None-Firefox fixes

components/Header.js

@@ -228,21 +228,28 @@ 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");
 			} else {
 				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");
 			}

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>

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;

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");