added timer, replaced middots and fixed css issues on small devices

web/index.html

@@ -31,7 +31,11 @@
 				</div>
 
 				<div class="status-bar">
-					<p id="listener-count">0 person tuned in</p>
+					<div id="listener-stats-container">
+						<p id="timer-display-label">joined HH:MM</p>
+						<p class="status-bar-listener-separator">&middot;</p>
+						<p id="listener-count">0 person tuned in</p>
+					</div>					
 					<div id="volume-slider-container">
 						<output id="current-volume-label" for="volume-slider">100%</output>
 						<input id="volume-slider" type="range" min="0" max="100" step="1" />
@@ -51,7 +55,7 @@
 		</div>
 
 		<footer>
-			made by&nbsp<a href="https://kennethnym.com">kennethnym</a>&nbsp;&lt;3 · powered by
+			made by&nbsp<a href="https://kennethnym.com">kennethnym</a>&nbsp;&lt;3 &middot; powered by
 			<a class="fal-link" href="https://fal.ai">
 				<picture>
 					<source srcset="./images/fal-logo-light.svg" media="(prefers-color-scheme: light)" />
@@ -59,7 +63,7 @@
 					<img class="fal-logo" fill="none" src="./images/fal-logo-dark.svg">
 				</picture>
 			</a>
-      ·
+      &middot;
 			<a target="_blank" rel="noopener noreferrer" href="https://github.com/kennethnym/infinifi">github</a>
 		</footer>
 

web/script.js

@@ -11,6 +11,7 @@ const heartImg = document.getElementById("heart");
 const volumeSlider = document.getElementById("volume-slider");
 const currentVolumeLabel = document.getElementById("current-volume-label");
 const listenerCountLabel = document.getElementById("listener-count");
+const timerDisplayLabel = document.getElementById("timer-display-label");
 const notificationContainer = document.getElementById("notification");
 const notificationTitle = document.getElementById("notification-title");
 const notificationBody = document.getElementById("notification-body");
@@ -31,6 +32,8 @@ let saveVolumeTimeout = null;
 let meowCount = 0;
 let ws = connectToWebSocket();
 
+const joinedTime = new Date();
+
 function playAudio() {
 	// add a random query parameter at the end to prevent browser caching
 	currentAudio = new Audio(`./current.mp3?t=${Date.now()}`);
@@ -229,6 +232,33 @@ function showNotification(title, content, duration) {
 	}, duration);
 }
 
+function dateToHumanTime(dateVal, includeSeconds = false) {
+	// Extract hours, minutes
+	let hours = dateVal.getHours();
+	let minutes = dateVal.getMinutes();
+	let seconds = dateVal.getSeconds();
+
+	// Add leading zeros if the values are less than 10
+	hours = hours < 10 ? '0' + hours : hours;
+	minutes = minutes < 10 ? '0' + minutes : minutes;
+	seconds = seconds < 10 ? '0' + seconds : seconds;
+
+	// Combine into HH:MM format
+	if (includeSeconds) {
+		return `${hours}:${minutes}:${seconds}`;
+	}
+	return `${hours}:${minutes}`;
+}
+
+function loadTimerDisplay() {
+	const now = new Date();
+	timerDisplayLabel.innerText = `${dateToHumanTime(now)} | joined ${dateToHumanTime(joinedTime)}`;
+
+	// seconds until next full minutes 
+	// + 1 seconds to ensure non null value
+	setTimeout(loadTimerDisplay, (61 - now.getSeconds()) * 1000);
+}
+
 playBtn.onmousedown = () => {
 	clickAudio.play();
 	document.addEventListener(
@@ -300,3 +330,4 @@ loadMeowCount();
 loadInitialVolume();
 animateCat();
 enableSpaceBarControl();
+loadTimerDisplay();

web/style.css

@@ -115,18 +115,39 @@ a {
   left: 0;
   right: 0;
   z-index: -10;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   padding: 2rem;
   z-index: 0;
   color: var(--text);
 }
 
-.status-bar > #listener-count {
+@media (min-width: 460px){
+  .status-bar{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.status-bar #listener-stats-container {
+  padding-right: 0.5rem;
+}
+
+.status-bar #listener-stats-container > * {
+  display: inline-block;
   margin: 0;
   opacity: 0.8;
-  padding-right: 1rem;
+  padding-right: 0.5rem;
+}
+
+@media (max-width: 650px) {
+  .status-bar #listener-stats-container > * {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
+  .status-bar #listener-stats-container .status-bar-listener-separator {
+    display: none;
+  }
 }
 
 .header {