New "Connection Status" popup

obs-info-hud/index.html

@@ -8,7 +8,6 @@
 </head>
 
 <body>
-	<div id="statusContainer">Connecting...</div>
 	<div id="mainContainer">
 		<div id="infoContainer">
 			<div id="streamInfo">
@@ -77,4 +76,6 @@
 </body>
 
 <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
+<link rel="stylesheet" href="/.common/utils/connection-status.css">
+<script src="/.common/utils/connection-status.js"></script>
 <script src="./script.js"></script>

obs-info-hud/script.js

@@ -25,6 +25,13 @@ let previousOutputTimecode = 0;
 let previousOutputBytes = 0;
 let activeFps;
 
+const connectionStatus = new ConnectionStatus({
+	showDelay: 1000,
+    disconnectedMessage: "Connecting to Streamer.bot..."
+});
+
+connectionStatus.setConnected(false);
+
 function connectws() {
 	if ("WebSocket" in window) {
 
@@ -32,7 +39,7 @@ function connectws() {
 
 		// Reconnect
 		ws.onclose = function () {
-			SetConnectionStatus(false);
+			connectionStatus.setConnected(false);
 			setTimeout(connectws, 5000);
 		};
 
@@ -67,7 +74,7 @@ function connectws() {
 					break;
 				case 2:		// Identify OpCode
 					console.log("Connected to OBS!");
-					SetConnectionStatus(true);
+					connectionStatus.setConnected(true);
 					break;
 				case 5:		// Event OpCode
 					switch (data.d.eventType) {
@@ -379,26 +386,6 @@ function hexToBase64(hexstring) {
 // WEBSOCKET STATUS //
 //////////////////////
 
-// This function sets the visibility of the Streamer.bot status label on the overlay
-function SetConnectionStatus(connected) {
-	let statusContainer = document.getElementById("statusContainer");
-	
-	if (connected) {
-		statusContainer.style.background = "#2FB774";
-		statusContainer.innerText = "Connected!";
-		mainContainer.style.visibility = `visible`;
-		var tl = new TimelineMax();
-		tl
-			.to(statusContainer, 2, { opacity: 0, ease: Linear.easeNone });
-	}
-	else {
-		statusContainer.style.background = "#D12025";
-		statusContainer.innerText = "Connecting...";
-		statusContainer.style.opacity = 1;
-		mainContainer.style.visibility = `hidden`;
-	}
-}
-
 connectws();
 
 setInterval(GetStreamStatus, 1000);

obs-info-hud/style.css

@@ -6,24 +6,6 @@ body {
     background-size: cover;
 }
 
-#statusContainer {
-	font-family: 'Metropolis';
-	font-style: italic;
-	font-weight: bold;
-	font-size: 30px;
-	width: 400px;
-	max-width: fit-content;
-	text-align: center;
-	background-color: #D12025;
-	color: white;
-	padding: 10px;
-	border-radius: 10px;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
 #top,
 #bottom,
 #left,