fixes lol

frontend/src/lib/components/StreamPlayer.svelte

@@ -33,6 +33,7 @@
     let playerId = `player-${stream.realmId}-${Math.random().toString(36).substr(2, 9)}`;
     let showControls = false;
     let showVolumeSlider = false;
+    let statsInterval = null;
 
     // Get muted/volume from stream object with defaults
     $: muted = stream.muted !== undefined ? stream.muted : true;
@@ -68,6 +69,7 @@
 
         if (viewerToken && actualStreamKey) {
             initializePlayer();
+            startStatsPolling();
         } else {
             error = 'Could not get stream access';
         }
@@ -75,7 +77,31 @@
         loading = false;
     });
 
+    function startStatsPolling() {
+        // Poll stats every 5 seconds to update viewer count for aggregation
+        statsInterval = setInterval(async () => {
+            try {
+                const response = await fetch(`/api/realms/${stream.realmId}/stats`);
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.success && data.stats) {
+                        // Update the store with this stream's viewer count
+                        streamTiles.setViewerCount(stream.realmId, data.stats.connections || 0);
+                        isLive = data.stats.is_live || false;
+                    }
+                }
+            } catch (e) {
+                console.error('Failed to fetch stats for tile:', stream.name, e);
+            }
+        }, 5000);
+    }
+
     onDestroy(() => {
+        if (statsInterval) {
+            clearInterval(statsInterval);
+        }
+        // Clear this stream's viewer count from the store
+        streamTiles.setViewerCount(stream.realmId, 0);
         if (player) {
             try {
                 player.remove();

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

@@ -232,21 +232,21 @@
                calendarDate.getFullYear() === today.getFullYear();
     }
 
+    $: calendarDays = getCalendarDays(calendarDate);
+    $: calendarMonthYear = calendarDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    $: calendarHolidays = getHolidaysForMonth(calendarDate.getFullYear(), calendarDate.getMonth());
+
     function isHoliday(day) {
         if (!day) return false;
-        return calendarHolidays.has(day);
+        return calendarHolidays?.has(day) ?? false;
     }
 
     function getHolidayName(day) {
         if (!day) return null;
-        const info = calendarHolidays.get(day);
+        const info = calendarHolidays?.get(day);
         return info ? info.name : null;
     }
 
-    $: calendarDays = getCalendarDays(calendarDate);
-    $: calendarMonthYear = calendarDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-    $: calendarHolidays = getHolidaysForMonth(calendarDate.getFullYear(), calendarDate.getMonth());
-
     // Timezone definitions
     const timezones = [
         { label: 'UTC', zone: 'UTC' },

frontend/src/lib/components/watch/YouTubePlayer.svelte

@@ -27,10 +27,10 @@
 
     const SYNC_CHECK_INTERVAL = 1000; // Check sync every second (matches server sync interval)
     const RESTART_GRACE_PERIOD = 3000; // 3 seconds grace period during video restart
-    const DRIFT_THRESHOLD = 2; // Seek if drift > 2 seconds (CyTube-style tight sync)
+    const DRIFT_THRESHOLD = 5; // Seek if drift > 5 seconds (more lenient to avoid jitter)
     const MIN_SYNC_INTERVAL = 1000; // Minimum 1 second between sync checks (server pushes every 1s)
-    const CONTROLLER_SEEK_DEBOUNCE = 2000; // Debounce controller seeks by 2 seconds
-    const SEEK_RATE_LIMIT = 2000; // Minimum 2 seconds between seeks
+    const CONTROLLER_SEEK_DEBOUNCE = 5000; // Debounce controller seeks by 5 seconds
+    const SEEK_RATE_LIMIT = 3000; // Minimum 3 seconds between seeks
     const POST_LEAD_IN_GRACE = 500; // 500ms grace period after lead-in ends
 
     // Load YouTube IFrame API

frontend/src/lib/stores/ebookReader.js

@@ -50,8 +50,8 @@ function loadState() {
             return {
                 ...defaultState,
                 ...parsed,
-                // Don't persist currentBook or showToc
-                currentBook: null,
+                // Restore currentBook if it was persisted
+                currentBook: parsed.currentBook || null,
                 showToc: false
             };
         }
@@ -68,7 +68,8 @@ function saveState(state) {
     try {
         const toSave = {
             enabled: state.enabled,
-            minimized: state.minimized
+            minimized: state.minimized,
+            currentBook: state.currentBook
         };
         localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
     } catch (e) {
@@ -96,14 +97,18 @@ function createEbookReaderStore() {
                 console.error('Invalid book object - missing id or filePath');
                 return;
             }
-            update(state => ({
-                ...state,
-                enabled: true,
-                currentBook: book,
-                progress: 0,
-                showToc: false,
-                minimized: false
-            }));
+            update(state => {
+                const newState = {
+                    ...state,
+                    enabled: true,
+                    currentBook: book,
+                    progress: 0,
+                    showToc: false,
+                    minimized: false
+                };
+                saveState(newState);
+                return newState;
+            });
         },
 
         // Close the reader (optionally save position first)
@@ -113,13 +118,15 @@ function createEbookReaderStore() {
                 if (cfi && state.currentBook?.id) {
                     persistPosition(state.currentBook.id, cfi);
                 }
-                return {
+                const newState = {
                     ...state,
                     enabled: false,
                     currentBook: null,
                     progress: 0,
                     showToc: false
                 };
+                saveState(newState);
+                return newState;
             });
         },
 

frontend/src/lib/stores/streamTiles.js

@@ -6,6 +6,7 @@ const STORAGE_KEY = 'streamTiles';
 const defaultState = {
     enabled: false,
     streams: [],  // Array of { streamKey, name, username, realmId, offlineImageUrl?, muted: true, volume: 0.5 }
+    viewerCounts: {},  // Map of realmId -> viewerCount for aggregating across tiles
     // Grid sizing: percentage splits for resizable dividers
     horizontalSplit: 50,  // Percentage for left/right split (2 streams side by side)
     verticalSplit: 50     // Percentage for top/bottom split (2x2 grid)
@@ -138,6 +139,18 @@ function createTileStore() {
             return newState;
         }),
 
+        // Update viewer count for a specific stream (used for aggregating across tiles)
+        setViewerCount: (realmId, count) => update(s => {
+            const newViewerCounts = { ...s.viewerCounts, [realmId]: count };
+            // Don't persist viewer counts to storage - they're ephemeral
+            return { ...s, viewerCounts: newViewerCounts };
+        }),
+
+        // Get total viewer count across all tile streams
+        getTotalViewerCount: (state) => {
+            return Object.values(state.viewerCounts).reduce((sum, count) => sum + (count || 0), 0);
+        },
+
         clear: () => {
             const newState = { ...defaultState };
             saveToStorage(newState);

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

@@ -256,13 +256,13 @@
     
     function startHeartbeat() {
         heartbeatInterval = setInterval(async () => {
-            if (streamKey && viewerToken) {
+            if (streamKey && viewerToken && realm) {
                 try {
-                    const response = await fetch(`/api/stream/heartbeat/${streamKey}`, {
+                    const response = await fetch(`/api/stream/heartbeat/${realm.id}/${streamKey}`, {
                         method: 'POST',
                         credentials: 'include'
                     });
-                    
+
                     if (!response.ok) {
                         console.error('Heartbeat failed, getting new token');
                         await getViewerToken();
@@ -623,6 +623,11 @@
     $: totalStreams = hasTiledStreams ? tiledStreams.length + 1 : 1; // +1 for main stream
     $: gridClass = totalStreams === 2 ? 'grid-2' : totalStreams >= 3 ? 'grid-4' : '';
 
+    // Aggregated viewer count across all streams (main + tiles)
+    $: tileViewerCount = Object.values($streamTiles.viewerCounts).reduce((sum, count) => sum + (count || 0), 0);
+    $: mainViewerCount = stats.isLive ? stats.connections : (realm?.viewerCount || 0);
+    $: totalViewerCount = hasTiledStreams && $streamTiles.enabled ? mainViewerCount + tileViewerCount : mainViewerCount;
+
     // Track previous layout to detect changes
     let prevTotalStreams = 1;
 
@@ -1459,7 +1464,7 @@
                     <div class="header-top">
                         <h1 style="color: {realm.titleColor || '#ffffff'};">{realm.displayName || realm.name}</h1>
                         <div class="live-status-badge" class:live={stats.isLive}>
-                            <span class="badge-segment">{stats.isLive ? stats.connections : realm.viewerCount} viewers</span>
+                            <span class="badge-segment">{totalViewerCount} viewers</span>
                             {#if stats.isLive && stats.bitrate > 0}
                                 <span class="badge-divider"></span>
                                 <span class="badge-segment">{formatBitrate(stats.bitrate)}</span>

frontend/src/routes/chat/terminal/+page.svelte

@@ -130,21 +130,21 @@
                calendarDate.getFullYear() === today.getFullYear();
     }
 
+    $: calendarDays = getCalendarDays(calendarDate);
+    $: calendarMonthYear = calendarDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+    $: calendarHolidays = getHolidaysForMonth(calendarDate.getFullYear(), calendarDate.getMonth());
+
     function isHoliday(day) {
         if (!day) return false;
-        return calendarHolidays.has(day);
+        return calendarHolidays?.has(day) ?? false;
     }
 
     function getHolidayName(day) {
         if (!day) return null;
-        const info = calendarHolidays.get(day);
+        const info = calendarHolidays?.get(day);
         return info ? info.name : null;
     }
 
-    $: calendarDays = getCalendarDays(calendarDate);
-    $: calendarMonthYear = calendarDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-    $: calendarHolidays = getHolidaysForMonth(calendarDate.getFullYear(), calendarDate.getMonth());
-
     // Timezone definitions
     const timezones = [
         { label: 'UTC', zone: 'UTC' },

frontend/src/routes/watch/[id]/+page.svelte

@@ -224,6 +224,7 @@
                 controls
                 autoplay
                 playsinline
+                on:loadedmetadata={() => { if (videoElement) videoElement.volume = 0.6; }}
             >
                 <track kind="captions" />
             </video>