Menu bottom sticky + moving tests + better experience cross-devices

Author: MrDesjardins

.vscode/settings.json

@@ -1,3 +1,23 @@
 {
-  "python-envs.pythonProjects": []
+  "python-envs.pythonProjects": [],
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#82ac6b",
+    "activityBar.background": "#82ac6b",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#50668f",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#82ac6b",
+    "statusBar.background": "#699252",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#82ac6b",
+    "statusBarItem.remoteBackground": "#699252",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#699252",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#69925299",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.remoteColor": "#699252"
 }

pytest.ini

@@ -13,5 +13,5 @@ addopts =
     --cov-fail-under=76
     -v
     --tb=short
-    --ignore=tests/services/test_cache.py
+    --ignore=tests/unit/services/test_cache.py
 asyncio_mode = auto

routes/stream.py

@@ -14,6 +14,7 @@
     add_to_history,
     get_history,
     clear_history,
+    get_queue_hash,
     save_playback_position,
     get_playback_position,
     clear_playback_position,
@@ -35,6 +36,7 @@
 class StreamRequest(BaseModel):
     youtube_video_id: str
     skip_transcription: bool = False
+    queue_id: Optional[int] = None
 
 
 class StreamState:
@@ -44,6 +46,8 @@ def __init__(self, lock):
         self._lock = lock
         self._current_process = None
         self._download_thread = None
+        self._current_video_id: Optional[str] = None
+        self._current_queue_id: Optional[int] = None
 
     def start_stream(self, video_id: str, skip_transcription: bool):
         """Start new download, stopping existing one."""
@@ -96,6 +100,21 @@ def is_streaming(self) -> bool:
         with self._lock:
             return self._current_process is not None
 
+    @property
+    def current_video_id(self) -> Optional[str]:
+        with self._lock:
+            return self._current_video_id
+
+    @property
+    def current_queue_id(self) -> Optional[int]:
+        with self._lock:
+            return self._current_queue_id
+
+    def set_current(self, video_id: Optional[str], queue_id: Optional[int]) -> None:
+        with self._lock:
+            self._current_video_id = video_id
+            self._current_queue_id = queue_id
+
 
 # Global instance
 _stream_state = None
@@ -170,6 +189,7 @@ def stream_video(request: StreamRequest) -> dict:
 
     # Start new stream (handles stopping existing stream internally)
     state.start_stream(video_id, request.skip_transcription)
+    state.set_current(video_id, request.queue_id)
 
     return {
         "status": "stream started",
@@ -246,6 +266,7 @@ def stop_stream() -> dict:
     """Stop the current stream."""
     state = get_stream_state()
     if state.stop_stream():
+        state.set_current(None, None)
         return {"status": "stream stopped"}
     raise HTTPException(status_code=400, detail="No stream running")
 
@@ -254,7 +275,17 @@ def stop_stream() -> dict:
 def get_status() -> dict:
     """Get the current streaming status."""
     state = get_stream_state()
-    return {"status": "streaming" if state.is_streaming() else "idle"}
+    try:
+        queue_hash = get_queue_hash()
+    except Exception as e:
+        logger.warning(f"Failed to compute queue hash: {e}")
+        queue_hash = 0
+    return {
+        "status": "streaming" if state.is_streaming() else "idle",
+        "current_video_id": state.current_video_id,
+        "current_queue_id": state.current_queue_id,
+        "queue_hash": queue_hash,
+    }
 
 
 @router.get("/history")

services/database.py

@@ -457,6 +457,15 @@ def clear_queue():
         logger.info("Queue cleared")
 
 
+def get_queue_hash() -> int:
+    """Return an integer representing current queue state for cheap change detection."""
+    with get_db_connection() as conn:
+        cursor = conn.cursor()
+        cursor.execute("SELECT COUNT(*), COALESCE(MAX(id), 0) FROM queue")
+        row = cursor.fetchone()
+        return row[1] * 10000 + row[0]
+
+
 def reorder_queue(queue_item_ids: List[int]) -> bool:
     """
     Reorder queue items by updating their positions.

static/app.js

@@ -11,6 +11,9 @@ const transcriptionEnabled = appConfig.transcriptionEnabled;
 let currentVideoId = null;
 let currentQueueId = null;
 let isPlaying = false;
+let lastQueueHash = null;
+let loadingQueueId = null;
+let isDraggingQueue = false;
 let currentTrackTitle = null;
 let serverAudioDuration = null; // Authoritative duration from server (ffprobe)
 const defaultTitle = 'YouTube Radio';
@@ -389,6 +392,7 @@ player.addEventListener('playing', function () {
     }
 
     console.log('Playback started/resumed');
+    clearQueueItemLoading();
     hideStreamStatus();
     retryCount = 0; // Reset retry count when successfully playing
 
@@ -713,6 +717,25 @@ async function fetchSavedPosition(videoId) {
     }
 }
 
+async function refreshPositionFromServer() {
+    if (!currentVideoId) return;
+    try {
+        const res = await fetch(`/playback-position/${currentVideoId}`);
+        if (!res.ok) return;
+        const data = await res.json();
+        const serverPos = data.position_seconds || 0;
+        const drift = Math.abs(serverPos - player.currentTime);
+        if (drift > 15) {
+            remoteLog('log', 'Position sync: seeking to server position', {
+                local: Math.round(player.currentTime), server: Math.round(serverPos), drift: Math.round(drift)
+            });
+            player.currentTime = serverPos;
+        }
+    } catch (e) {
+        console.warn('Failed to refresh position from server:', e);
+    }
+}
+
 // Queue Management
 async function fetchQueue() {
     try {
@@ -897,6 +920,7 @@ async function playNext() {
 }
 
 async function startStreamFromQueue(youtube_video_id, queue_id) {
+    setQueueItemLoading(queue_id);
     // Reset position save throttle so first save of new track isn't suppressed
     lastPositionSaveTime = 0;
 
@@ -907,7 +931,7 @@ async function startStreamFromQueue(youtube_video_id, queue_id) {
         const res = await fetch('/stream', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ youtube_video_id, skip_transcription })
+            body: JSON.stringify({ youtube_video_id, skip_transcription, queue_id })
         });
         const data = await res.json();
         updateStatus(data.status || data.detail, res.ok ? 'streaming' : 'error');
@@ -973,16 +997,19 @@ async function startStreamFromQueue(youtube_video_id, queue_id) {
                 }
             });
         } else {
+            clearQueueItemLoading();
             updateStatus('Failed to start stream', 'error');
         }
     } catch (error) {
+        clearQueueItemLoading();
         updateStatus('Failed to start stream', 'error');
         console.error(error);
     }
 }
 
 async function startSummaryFromQueue(weekYear, queue_id) {
     try {
+        setQueueItemLoading(queue_id);
         // For summaries, we directly play the audio file from the server
         updateStatus('Loading weekly summary...', 'streaming');
 
@@ -1020,16 +1047,36 @@ async function startSummaryFromQueue(weekYear, queue_id) {
             console.error('Audio playback failed:', e);
             updateStatus('Failed to play summary', 'error');
             isPlaying = false;
+            clearQueueItemLoading();
         });
 
         updateStatus('Playing: ' + (currentItem ? currentItem.title : 'Weekly Summary'), 'streaming');
     } catch (error) {
+        clearQueueItemLoading();
         updateStatus('Failed to play summary', 'error');
         console.error(error);
         isPlaying = false;
     }
 }
 
+function setQueueItemLoading(queueId) {
+    loadingQueueId = queueId;
+    _applyQueueLoadingClass();
+}
+
+function clearQueueItemLoading() {
+    loadingQueueId = null;
+    _applyQueueLoadingClass();
+}
+
+function _applyQueueLoadingClass() {
+    document.querySelectorAll('.queue-item').forEach(el => el.classList.remove('queue-item-loading'));
+    if (loadingQueueId != null) {
+        const target = document.querySelector(`.queue-item[data-queue-id="${loadingQueueId}"]`);
+        if (target) target.classList.add('queue-item-loading');
+    }
+}
+
 async function renderQueue() {
     const queueContainer = document.getElementById('queue-list');
     const queueCountEl = document.getElementById('queue-count');
@@ -1086,6 +1133,8 @@ async function renderQueue() {
 
     // Initialize drag-and-drop after rendering
     initializeQueueDragAndDrop();
+    // Restore loading shimmer if still active (survives DOM rebuild)
+    _applyQueueLoadingClass();
 }
 
 // Queue drag-and-drop functionality
@@ -1116,13 +1165,15 @@ function initializeQueueDragAndDrop() {
 }
 
 function handleDragStart(e) {
+    isDraggingQueue = true;
     draggedElement = this;
     this.classList.add('dragging');
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/html', this.innerHTML);
 }
 
 function handleDragEnd(e) {
+    isDraggingQueue = false;
     this.classList.remove('dragging');
     // Remove all drag-over classes
     document.querySelectorAll('.queue-item').forEach(item => {
@@ -1211,6 +1262,7 @@ function handleTouchStart(e) {
 
     draggedElement = this;
     isTouchDragging = true;
+    isDraggingQueue = true;
 
     const touch = e.touches[0];
     touchStartY = touch.clientY;
@@ -1327,6 +1379,7 @@ async function handleTouchEnd(e) {
     draggedElement = null;
     draggedOverElement = null;
     isTouchDragging = false;
+    isDraggingQueue = false;
     touchStartY = 0;
     touchCurrentY = 0;
 }
@@ -1769,6 +1822,25 @@ async function fetchStatus() {
         const res = await fetch('/status');
         const data = await res.json();
         updateStatus(data.status, data.status);
+
+        // Queue sync: detect changes from other devices
+        const serverHash = data.queue_hash;
+        if (serverHash !== undefined) {
+            if (lastQueueHash !== null && lastQueueHash !== serverHash && !isDraggingQueue) {
+                remoteLog('log', 'Queue hash changed, refreshing queue', { old: lastQueueHash, new: serverHash });
+                await renderQueue();
+            }
+            lastQueueHash = serverHash;
+        }
+
+        // Sync "now playing" indicator when this device is passive (not playing).
+        // No status guard needed: backend correctly sets current_queue_id=null on /stop,
+        // so a non-null value always means something was started and not yet stopped.
+        const serverQueueId = data.current_queue_id;
+        if (serverQueueId !== undefined && serverQueueId !== currentQueueId && !isPlaying) {
+            currentQueueId = serverQueueId;
+            await renderQueue();
+        }
     } catch (error) {
         console.error('Failed to fetch status:', error);
     }
@@ -1929,6 +2001,17 @@ window.onclick = function (event) {
     }
 }
 
+// Resync state when tab becomes visible again (e.g. switching from PC to phone)
+document.addEventListener('visibilitychange', async function () {
+    if (document.hidden) return;
+    remoteLog('log', 'Page became visible, resyncing state');
+    await fetchStatus();
+    await renderQueue();
+    if (currentVideoId && player.paused) {
+        await refreshPositionFromServer();
+    }
+});
+
 // Poll status every 3 seconds
 setInterval(fetchStatus, 3000);