New "Connection Status" popup

horizontal-chat/index.html

@@ -8,7 +8,6 @@
 </head>
 
 <body>
-	<div id="statusContainer">Connecting...</div>
 	<div id="mainContainer" class="slide-fade">
 		<ul id="messageList">
 		</ul>
@@ -39,4 +38,6 @@
 </body>
 
 <script src="/.common/utils/helpers.js"></script>
+<link rel="stylesheet" href="/.common/utils/connection-status.css">
+<script src="/.common/utils/connection-status.js"></script>
 <script src="./script.js"></script>

horizontal-chat/script.js

@@ -125,6 +125,14 @@ document.documentElement.style.setProperty('--animation-speed', `${animationSpee
 // STREAMER.BOT CLIENT //
 /////////////////////////
 
+const connectionStatus = new ConnectionStatus({
+    name: "Streamer.bot",
+	showDelay: 1000,
+    disconnectedMessage: "Connecting to Streamer.bot..."
+});
+
+connectionStatus.setConnected(false);
+
 const client = new StreamerbotClient({
 	host: sbServerAddress,
 	port: sbServerPort,
@@ -132,13 +140,13 @@ const client = new StreamerbotClient({
 	onConnect: (data) => {
 		console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`)
 		console.debug(data);
-		SetConnectionStatus(true);
+		connectionStatus.setConnected(true);
 		KickConnect();
 	},
 
 	onDisconnect: () => {
 		console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`)
-		SetConnectionStatus(false);
+		connectionStatus.setConnected(false);
 	}
 });
 
@@ -1848,30 +1856,4 @@ function GetWinnersList(gifts) {
 		const secondLastWinner = winners.pop();
 		return `${winners.join(", ")}, ${secondLastWinner} and ${lastWinner}`;
 	}
-}
-
-
-
-///////////////////////////////////
-// STREAMER.BOT 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!";
-		statusContainer.style.opacity = 1;
-		setTimeout(() => {
-			statusContainer.style.transition = "all 2s ease";
-			statusContainer.style.opacity = 0;
-		}, 10);
-	}
-	else {
-		statusContainer.style.background = "#D12025";
-		statusContainer.innerText = "Connecting...";
-		statusContainer.style.transition = "";
-		statusContainer.style.opacity = 1;
-	}
 }

horizontal-chat/style.css

@@ -21,20 +21,6 @@ html {
 	overflow-wrap: break-word;
 }
 
-#statusContainer {
-	font-weight: 500;
-	font-size: 30px;
-	text-align: center;
-	background-color: #D12025;
-	color: white;
-	padding: 10px;
-	border-radius: 10px;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
 #mainContainer {
 	position: absolute;
 	height: calc(100% - 2 * var(--margin));