From ba3c65c159c872ac80b4b97d82b025e7f2a17588 Mon Sep 17 00:00:00 2001
From: Joshua Herron <herronjo@stibarc.dev>
Date: Wed, 13 Nov 2024 23:50:05 -0500
Subject: [PATCH] None-Firefox fixes

---
 components/Header.js | 17 ++++++++++++-----
 tv/index.html        |  2 +-
 tv/tv.css            |  4 ++++
 tv/tv.js             |  6 ++++--
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index 55af9f2..75d2f71 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -228,13 +228,12 @@ class HeaderComponent extends HTMLElement {
 		const searchbox = this.shadow.querySelector("#searchbox");
 		const menuprofile = this.shadow.querySelector("#menuprofile");
 
-		document.addEventListener("click", function (event) {
+		this.shadow.addEventListener("click", function (event) {
 			/* header pfp dropdown */
-			if (!event.originalTarget) return;
-			if (!(event.originalTarget instanceof Node)) return;
+			if (!event.target) return;
 			if (
 				hiddenHeader.classList.contains("hidden") &&
-				mypfp.contains(event.originalTarget)
+				mypfp.contains(event.target)
 			) {
 				mypfp.classList.add("active");
 				hiddenHeader.classList.remove("hidden");
@@ -242,7 +241,15 @@ class HeaderComponent extends HTMLElement {
 				mypfp.classList.remove("active");
 				hiddenHeader.classList.add("hidden");
 			}
-			if (!mypfp.contains(event.originalTarget)) {
+			if (!mypfp.contains(event.target)) {
+				mypfp.classList.remove("active");
+				hiddenHeader.classList.add("hidden");
+			}
+		});
+
+		document.addEventListener("click", function (event) {
+			if (!event.target) return;
+			if (!(event.target instanceof HeaderComponent)) {
 				mypfp.classList.remove("active");
 				hiddenHeader.classList.add("hidden");
 			}
diff --git a/tv/index.html b/tv/index.html
index 912a080..16de369 100644
--- a/tv/index.html
+++ b/tv/index.html
@@ -43,7 +43,7 @@ <h1>STiBaRC TV</h1>
 				<div id="chatbox">
 					<h2>Chat</h2>
 					<div id="chatmessages" class="flexcontainer"></div>
-					<i id="typing" class="hidden width100"></i>
+					<i id="typing sysnotif" class="hidden width100"></i>
 					<div id="chatinput">
 						<input id="chatmsg" type="text" placeholder="Message" autocomplete="off">
 						<button id="sendmsg" class="flexcontainer button primary" title="Send Message">Send</button>
diff --git a/tv/tv.css b/tv/tv.css
index e5569e7..123e7ab 100644
--- a/tv/tv.css
+++ b/tv/tv.css
@@ -63,6 +63,10 @@
 	margin-bottom: 0;
 }
 
+.sysnotif {
+	color: #7F7F7F;
+}
+
 @media only screen and (max-width: 750px) {
 	#responsivegrid {
 		grid-template-columns: 1fr;
diff --git a/tv/tv.js b/tv/tv.js
index cb5bd7c..847f2ab 100644
--- a/tv/tv.js
+++ b/tv/tv.js
@@ -31,9 +31,12 @@ window.addEventListener("load", function() {
 		$("#viewers").textContent = data.viewers;
 	});
 
+	let lastUserToSend = "";
+
 	socket.on("chatmemberschange", function(data) {
+		lastUserToSend = "";
 		const evt = document.createElement("i");
-		evt.classList.add("width100");
+		evt.classList.add("width100", "sysnotif");
 		evt.setAttribute("title", new Date().toLocaleString());
 		if (data.event === "join") {
 			evt.textContent = `${data.username} joined the chat.`;
@@ -44,7 +47,6 @@ window.addEventListener("load", function() {
 		$("#chatmessages").scrollTop = $("#chatmessages").scrollHeight;
 	});
 
-	let lastUserToSend = "";
 	socket.on("chatmessage", function(data) {
 		const msg = new ChatMessageComponent(data.user, data.message, lastUserToSend !== data.user.username);
 		msg.classList.add("width100");