add stream caching ("offline mode")

src/routes/streams/[stream_id]/+page.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import StreamPage from './StreamPage.svelte';
     import MetadataEditor from './MetadataEditor.svelte';
     import Player from './Player.svelte';
     import { dev } from '$app/environment';
-    import { getStreamContext } from '$lib/stream-context.svelte.ts';
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
+    import * as streamCache from '$lib/streamCache.svelte.ts';
 
     let { data } = $props();
     const ctx = getStreamContext();
+    let playerSrc = $state<string | null>(null);
 
-    run(() => {
-        ctx.setCurrent(data.stream);
+    // reactivity runs on `stream` and `streamCache.cached` here
+    $effect(() => {
+        const stream = data.stream;
+        ctx.setCurrent(stream);
+        playerSrc = null;
+        if (streamCache.cached.has(stream.id)) {
+            streamCache.getUrl(stream.id).then((url) => {
+                playerSrc = url ?? `/media/tracks/${stream.filename}`;
+            });
+        } else {
+            playerSrc = `/media/tracks/${stream.filename}`;
+        }
     });
 </script>
 
@@ -23,8 +33,10 @@
         <StreamPage />
     </div>
     <div id="player">
-        {#key ctx.current}
-            <Player display={true} src="/media/tracks/{ctx.current?.filename}" />
+        {#key playerSrc}
+            {#if playerSrc}
+                <Player display={true} src={playerSrc} />
+            {/if}
         {/key}
     </div>
 </div>