Merge branch 'offline-mode'

src/routes/streams/[stream_id]/Player.svelte

@@ -19,12 +19,10 @@
     const bubble = createBubbler();
     import { onMount, onDestroy } from 'svelte';
     import { fade } from 'svelte/transition';
-    import {
-        currentSongIndex,
-        currentStream,
-        getSongAtTime,
-        updateCurrentSong
-    } from '$lib/stores.js';
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
+    import type { Track } from '$lib/types';
+
+    const ctx = getStreamContext();
 
     interface Props {
         src: any;
@@ -75,6 +73,7 @@
     let seekTrack = $state('');
     let seeking = $state(false);
     let volumeSeeking = $state(false);
+    let pendingSeekTime = $state<number | null>(null);
     let songBar = $state();
     let volumeBar = $state();
     let innerWidth = $state();
@@ -93,14 +92,12 @@
         const volumeData = localStorage.getItem('volume');
         volume = volumeData ? parseFloat(volumeData) : 0.67;
         setVolume(volume);
+    });
 
-        // update browser metadata on track changes
-        if ('mediaSession' in navigator) {
-            currentSongIndex.subscribe((val) => {
-                if (val != null && !paused) {
-                    setMediaMetadata($currentStream.tracks[val]);
-                }
-            });
+    // update browser metadata on track changes
+    $effect(() => {
+        if ('mediaSession' in navigator && ctx.songIndex != null && !paused && ctx.current) {
+            setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
         }
     });
 
@@ -119,7 +116,7 @@
         }
     }
 
-    function setMediaMetadata(track) {
+    function setMediaMetadata(track: Track) {
         navigator.mediaSession.metadata = new MediaMetadata({
             artist: track[1],
             title: track[2]
@@ -128,8 +125,8 @@
 
     // browsers don't like if you update this while no media is playing
     function setMediaMetadataOnPlay() {
-        if ('mediaSession' in navigator) {
-            setMediaMetadata($currentStream.tracks[$currentSongIndex]);
+        if ('mediaSession' in navigator && ctx.current && ctx.songIndex != null) {
+            setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
         }
     }
 
@@ -152,6 +149,11 @@
         audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
     }
 
+    function updateSeekVisual(event) {
+        if (!songBar) return;
+        pendingSeekTime = seek(event, songBar.getBoundingClientRect()) * duration;
+    }
+
     function seekVolume(event) {
         if (!volumeBar) return;
         volume = seek(event, volumeBar.getBoundingClientRect());
@@ -181,18 +183,21 @@
         }
         let bounds = songBar.getBoundingClientRect();
         let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
-        let trackArray = $currentStream.tracks[getSongAtTime(seekValue)];
+        if (!ctx.current) return;
+        let trackArray = ctx.current.tracks[ctx.getSongAtTime(seekValue)];
         seekTrack = trackArray[1] + ' - ' + trackArray[2];
         seekText = formatSeconds(seekValue);
     }
 
     function trackMouse(event) {
-        if (seeking) seekAudio(event);
+        if (seeking) updateSeekVisual(event);
         if (showTooltip && !disableTooltip) seekTooltip(event);
         if (volumeSeeking) seekVolume(event);
     }
     run(() => {
-        updateCurrentSong(currentTime, $currentSongIndex);
+        if (ctx.songIndex != null) {
+            ctx.updateCurrentSong(currentTime, ctx.songIndex);
+        }
     });
     run(() => {
         updateAudioAttributes(audio);
@@ -220,7 +225,13 @@
 <svelte:window
     bind:innerWidth
     bind:innerHeight
-    onmouseup={() => (seeking = volumeSeeking = false)}
+    onmouseup={() => {
+        if (seeking && pendingSeekTime != null) {
+            audio.currentTime = pendingSeekTime;
+            pendingSeekTime = null;
+        }
+        seeking = volumeSeeking = false;
+    }}
     onmousemove={trackMouse}
 />
 
@@ -239,7 +250,7 @@
         </button>
         <progress
             bind:this={songBar}
-            value={currentTime ? currentTime : 0}
+            value={seeking && pendingSeekTime != null ? pendingSeekTime : (currentTime || 0)}
             max={duration}
             onmousedown={() => (seeking = true)}
             onmouseenter={() => (showTooltip = true)}