add stream caching ("offline mode")

src/routes/streams/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import Sidebar from './Sidebar.svelte';
     import Footer from './Footer.svelte';
-    import { setStreamContext, StreamContext } from '$lib/stream-context.svelte.ts';
+    import { setStreamContext, StreamContext } from '$lib/streamContext.svelte.ts';
 
     // streams are grabbed from the server here, then accessed throughout the rest
     // of the components through the svelte context api

src/routes/streams/Sidebar.svelte

@@ -2,7 +2,8 @@
     import { untrack } from 'svelte';
     import { goto } from '$app/navigation';
     import { favoritedStreams } from '$lib/stores.svelte.ts';
-    import { getStreamContext } from '$lib/stream-context.svelte.ts';
+    import * as streamCache from '$lib/streamCache.svelte.ts';
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
     import type { StreamSummary } from '$lib/types';
     import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.ts';
     import TagSelect from './TagSelect.svelte';
@@ -10,6 +11,7 @@
     const ctx = getStreamContext();
     let filteredTags = $state([]);
     let favoritesOnly = $state(false);
+    let cachedOnly = $state(false);
     let listOpen = $state();
     let displayedStreams = $derived.by(streamsToDisplay);
     let remainingTags = $derived.by(getRemainingTags);
@@ -50,6 +52,10 @@
 
 <div class="tag-select">
     <TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
+    <button
+        onclick={() => (cachedOnly = !cachedOnly)}
+        class="material-icons filter-download {cachedOnly ? 'select-faves-star' : 'unselect-faves-star'}">file_download</button
+    >
     <button
         onclick={() => (favoritesOnly = !favoritesOnly)}
         class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
@@ -59,9 +65,10 @@
 <ul class="stream-list">
     {#each ctx.streams as stream}
         {@const favorited = favoritedStreams.has(stream.id)}
+        {@const isCached = streamCache.cached.has(stream.id)}
         {@const current = ctx.current?.id === stream.id}
         <li
-            hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
+            hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited) || (cachedOnly && !isCached)}
             class="stream-item {current ? 'current-stream' : ''}"
             id="stream-{stream.id}"
         >
@@ -91,6 +98,19 @@
                 class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
                 >{favorited ? 'star' : 'star_border'}</button
             >
+            {#if streamCache.downloading.has(stream.id)}
+                <span class="stream-item-cached">{streamCache.downloading.get(stream.id)}%</span>
+            {:else if isCached}
+                <button
+                    onclick={(e) => { e.stopPropagation(); streamCache.remove(stream.id); }}
+                    class="material-icons stream-item-cached stream-item-cached-btn">delete</button
+                >
+            {:else}
+                <button
+                    onclick={(e) => { e.stopPropagation(); streamCache.download(stream); }}
+                    class="material-icons filter-download stream-item-cached stream-item-cached-btn">file_download</button
+                >
+            {/if}
         </li>
     {/each}
 </ul>
@@ -168,24 +188,51 @@
     .select-faves-star {
         color: rgba(255, 219, 88, 1);
         font-size: 24px;
+        transform: translateX(-1px);
     }
 
     .unselect-faves-star {
         color: #bbbbbb;
         font-size: 24px;
+        transform: translateX(-1px);
+    }
+
+    .filter-download {
+        transform: translateY(1px);
     }
 
     .stream-item-star {
         font-size: 18px;
         position: absolute;
-        bottom: 0;
-        right: 0;
+        bottom: 2px;
+        right: 2px;
         opacity: 0;
     }
 
     .stream-item-star-faved {
         opacity: 0.5;
     }
+
+    .stream-item-cached {
+        font-size: 18px;
+        position: absolute;
+        bottom: 2px;
+        right: 22px;
+        opacity: 0;
+    }
+
+    .stream-item-cached-btn {
+        cursor: pointer;
+    }
+
+    .stream-item:hover .stream-item-cached {
+        opacity: 0.5;
+    }
+
+    .stream-item:hover .stream-item-cached-btn:hover {
+        opacity: 1;
+    }
+
     .stream-item:hover .stream-item-star {
         opacity: 0.5;
     }
@@ -202,6 +249,15 @@
         .stream-item-star {
             opacity: 0.5;
             font-size: 24px;
+            bottom: 4px;
+            right: 4px;
+        }
+
+        .stream-item-cached {
+            opacity: 0.4;
+            font-size: 24px;
+            bottom: 4px;
+            right: 30px;
         }
     }
 </style>

src/routes/streams/WelcomePage.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { getStreamContext } from '$lib/stream-context.svelte.ts';
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
 
     const ctx = getStreamContext();
     ctx.clearCurrent();

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>

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

@@ -19,7 +19,7 @@
     const bubble = createBubbler();
     import { onMount, onDestroy } from 'svelte';
     import { fade } from 'svelte/transition';
-    import { getStreamContext } from '$lib/stream-context.svelte.ts';
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
     import type { Track } from '$lib/types';
 
     const ctx = getStreamContext();

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

@@ -1,5 +1,5 @@
 <script>
-    import { getStreamContext } from '$lib/stream-context.svelte.ts';
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
     import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.ts';
     import { jumpToTrack } from './Player.svelte';
     import { Carta } from 'carta-md';