fixes lol

frontend/src/lib/components/chat/ChatPanel.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { onMount, onDestroy } from 'svelte';
+	import { get } from 'svelte/store';
 	import {
 		filteredMessages,
 		connectionStatus,
@@ -40,6 +41,7 @@
 
 	let messagesContainer;
 	let autoScroll = true;
+	let initialScrollDone = false; // Prevent handleScroll from disabling autoScroll before initial scroll
 	let showMenu = false;  // Combined settings + participants menu
 	let configCollapsed = false;  // Track if config section is collapsed
 	let usersCollapsed = false;   // Track if users section is collapsed
@@ -207,13 +209,15 @@
 		const scrollToBottom = () => {
 			if (autoScroll && messagesContainer) {
 				requestAnimationFrame(() => {
-					if ($chatLayout.messagesFromTop) {
+					const messagesFromTop = get(chatLayout).messagesFromTop;
+					if (messagesFromTop) {
 						// column-reverse: newest at top, scroll to top
 						messagesContainer.scrollTop = 0;
 					} else {
 						// normal: newest at bottom, scroll to bottom
 						messagesContainer.scrollTop = messagesContainer.scrollHeight;
 					}
+					initialScrollDone = true;
 				});
 			}
 		};
@@ -273,6 +277,9 @@
 	}
 
 	function handleScroll() {
+		// Ignore scroll events before initial scroll is done (prevents browser's initial position from disabling autoScroll)
+		if (!initialScrollDone) return;
+
 		const { scrollTop, scrollHeight, clientHeight } = messagesContainer;
 		if ($chatLayout.messagesFromTop) {
 			// column-reverse: user at "newest" means scrollTop near 0

frontend/src/routes/[realm]/live/+page.svelte

@@ -72,8 +72,13 @@
         resolution: 'N/A',
         codec: 'N/A',
         fps: 0,
-        isLive: false
+        isLive: false,
+        liveStartedAt: null
     };
+
+    // Duration display for live stream
+    let durationDisplay = '';
+    let durationInterval;
     
     onMount(async () => {
         const realmName = $page.params.realm;
@@ -154,6 +159,9 @@
         if (statsInterval) {
             clearInterval(statsInterval);
         }
+        if (durationInterval) {
+            clearInterval(durationInterval);
+        }
         if (llhlsRetryTimeout) {
             clearTimeout(llhlsRetryTimeout);
         }
@@ -166,6 +174,12 @@
             if (response.ok) {
                 const data = await response.json();
                 realm = data.realm;
+                // Initialize liveStartedAt from realm data if stream is live
+                if (realm.isLive && realm.liveStartedAt) {
+                    stats.liveStartedAt = realm.liveStartedAt;
+                    stats.isLive = true;
+                    startDurationTimer();
+                }
                 // Get the stream key from the database
                 const keyResponse = await fetch(`/api/realms/${realm.id}`);
                 if (keyResponse.ok && keyResponse.status !== 404) {
@@ -277,15 +291,27 @@
     }
     
     function updateStatsFromData(data) {
+        const wasLive = stats.isLive;
         stats = {
             connections: data.connections || 0,
             bitrate: data.bitrate || 0,
             resolution: data.resolution || 'N/A',
             codec: data.codec || 'N/A',
             fps: data.fps || 0,
-            isLive: data.is_live || false
+            isLive: data.is_live || false,
+            liveStartedAt: data.live_started_at || stats.liveStartedAt || null
         };
 
+        // Start/stop duration timer based on live status
+        if (stats.isLive && stats.liveStartedAt && !wasLive) {
+            startDurationTimer();
+        } else if (!stats.isLive && wasLive) {
+            stopDurationTimer();
+        } else if (stats.isLive && stats.liveStartedAt && !durationInterval) {
+            // Ensure timer is running if we're live with a start time
+            startDurationTimer();
+        }
+
         // Only update isStreaming from stats if player isn't actively playing
         // This prevents stats from overriding the player's live state during connection
         if (!playerPlaying) {
@@ -510,6 +536,36 @@
         }
     }
 
+    function formatDuration(startTime) {
+        if (!startTime) return '';
+        const elapsed = Math.floor((Date.now() - new Date(startTime).getTime()) / 1000);
+        if (elapsed < 0) return '0:00';
+        const hours = Math.floor(elapsed / 3600);
+        const minutes = Math.floor((elapsed % 3600) / 60);
+        const seconds = elapsed % 60;
+
+        if (hours > 0) {
+            return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+        }
+        return `${minutes}:${String(seconds).padStart(2, '0')}`;
+    }
+
+    function startDurationTimer() {
+        if (durationInterval) return;
+        durationDisplay = formatDuration(stats.liveStartedAt);
+        durationInterval = setInterval(() => {
+            durationDisplay = formatDuration(stats.liveStartedAt);
+        }, 1000);
+    }
+
+    function stopDurationTimer() {
+        if (durationInterval) {
+            clearInterval(durationInterval);
+            durationInterval = null;
+        }
+        durationDisplay = '';
+    }
+
     // Tiled streams (exclude current stream)
     $: tiledStreams = $streamTiles.streams.filter(s => s.streamKey !== streamKey);
     $: hasTiledStreams = tiledStreams.length > 0;
@@ -1375,6 +1431,10 @@
                                 <span class="badge-divider"></span>
                                 <span class="badge-segment">{formatBitrate(stats.bitrate)}</span>
                             {/if}
+                            {#if stats.isLive && durationDisplay}
+                                <span class="badge-divider"></span>
+                                <span class="badge-segment">{durationDisplay}</span>
+                            {/if}
                             <span class="badge-divider"></span>
                             <span class="badge-segment status" class:live={stats.isLive}>
                                 {stats.isLive ? 'LIVE' : 'Offline'}