Merge branch 'offline-mode'

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "scripts": {
         "dev": "vite dev",
-        "build": "vite build && node ./scripts/create_media_symlink.js",
+        "build": "vite build && bun --bun run ./scripts/create_media_symlink.js",
         "preview": "vite preview",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -15,33 +15,34 @@
         "generate_iconfont_subset": "cd scripts && bash ./generate_iconfont_subset.sh"
     },
     "dependencies": {
-        "@sveltejs/kit": "^2.17.1",
+        "@sveltejs/kit": "^2.55.0",
-        "@types/bun": "^1.2.2",
+        "@types/bun": "^1.3.10",
-        "@types/node": "^20.17.17",
+        "@types/node": "^25.5.0",
-        "@typescript-eslint/eslint-plugin": "^5.62.0",
+        "@typescript-eslint/eslint-plugin": "^8.57.0",
-        "@typescript-eslint/parser": "^5.62.0",
+        "@typescript-eslint/parser": "^8.57.0",
-        "carta-md": "^4.6.7",
+        "carta-md": "^4.11.1",
-        "dotenv": "^16.4.7",
+        "dotenv": "^16.6.1",
-        "eslint": "^8.57.1",
+        "eslint": "^10.0.3",
-        "eslint-config-prettier": "^8.10.0",
+        "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-svelte": "^2.46.1",
+        "eslint-plugin-svelte": "^3.15.2",
         "fontkit": "^2.0.4",
-        "isomorphic-dompurify": "^2.21.0",
+        "isomorphic-dompurify": "^3.3.0",
-        "prettier": "^3.4.2",
+        "prettier": "^3.8.1",
-        "prettier-plugin-svelte": "^3.3.3",
+        "prettier-plugin-svelte": "^3.5.1",
         "sqids": "0.3.0",
-        "svelte": "^5.19.9",
+        "svelte": "^5.53.12",
-        "svelte-check": "^4.1.4",
+        "svelte-check": "^4.4.5",
         "svelte-select": "^5.8.3",
         "tslib": "^2.8.1",
-        "typescript": "^5.7.3",
+        "typescript": "^5.9.3",
-        "vite": "^5.4.14"
+        "vite": "^8.0.0"
     },
     "type": "module",
     "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^4.0.4",
+        "@sveltejs/adapter-node": "^5.5.4",
-        "svelte-adapter-bun": "https://github.com/gornostay25/svelte-adapter-bun",
+        "@sveltejs/vite-plugin-svelte": "^7.0.0",
-        "typescript-svelte-plugin": "^0.3.45"
+        "svelte-adapter-bun": "^1.0.1",
+        "typescript-svelte-plugin": "^0.3.50"
     },
     "trustedDependencies": [
         "svelte-adapter-bun"

scripts/generate_iconfont_subset.sh

@@ -8,6 +8,7 @@ fontFile="$(basename "$fontUrl")"
 unicodePoints=(
 	"61-7a,5f" # ascii lowercase + underscore
 	"e2c4"     # file_download
+	"e872"     # delete
 	"e037"     # play_arrow
 	"e034"     # pause
 	"e04f"     # volume_off

src/lib/database.js

@@ -1,36 +0,0 @@
-import { Database } from 'bun:sqlite';
-
-const dbName = './db/strimserve.db';
-
-// Create a new database object and initialize it with the schema
-const db = new Database(dbName);
-
-export function getStreams() {
-    const indexData = db
-        .prepare(
-            'SELECT id, stream_date, title, tags, length_seconds ' + 'FROM Stream ORDER BY id DESC'
-        )
-        .all();
-    indexData.forEach((stream) => {
-        stream['stream_date'] = Date.parse(stream['stream_date']);
-        stream['tags'] = JSON.parse(stream['tags']);
-    });
-    return indexData;
-}
-
-export function getStreamInfo(streamId) {
-    const streamData = db
-        .prepare(
-            'SELECT id, stream_date, filename, ' +
-                'format, title, description, tags, ' +
-                'length_seconds, tracks FROM Stream ' +
-                'WHERE id = ?'
-        )
-        .get(streamId);
-    if (streamData) {
-        streamData['stream_date'] = Date.parse(streamData['stream_date']);
-        streamData['tracks'] = JSON.parse(streamData['tracks']);
-        streamData['tags'] = JSON.parse(streamData['tags']);
-    }
-    return streamData;
-}

src/lib/database.ts

@@ -0,0 +1,46 @@
+import { Database } from 'bun:sqlite';
+import type { Stream, StreamSummary } from './types.ts';
+
+const dbName = './db/strimserve.db';
+
+// Create a new database object and initialize it with the schema
+const db = new Database(dbName);
+
+export function getStreams(): StreamSummary[] {
+    const indexData = db
+        .prepare(
+            'SELECT id, stream_date, filename, title, tags, length_seconds ' + 'FROM Stream ORDER BY id DESC'
+        )
+        .all() as Record<string, unknown>[];
+    return indexData.map((stream) => ({
+        id: stream.id as string,
+        stream_date: Date.parse(stream.stream_date as string),
+        filename: stream.filename as string,
+        title: stream.title as string | null,
+        tags: JSON.parse(stream.tags as string) as string[],
+        length_seconds: stream.length_seconds as number
+    }));
+}
+
+export function getStreamInfo(streamId: string): Stream | null {
+    const streamData = db
+        .prepare(
+            'SELECT id, stream_date, filename, ' +
+                'format, title, description, tags, ' +
+                'length_seconds, tracks FROM Stream ' +
+                'WHERE id = ?'
+        )
+        .get(streamId) as Record<string, unknown> | null;
+    if (!streamData) return null;
+    return {
+        id: streamData.id as string,
+        stream_date: Date.parse(streamData.stream_date as string),
+        filename: streamData.filename as string,
+        format: streamData.format as string,
+        title: streamData.title as string | null,
+        description: streamData.description as string | null,
+        tags: JSON.parse(streamData.tags as string) as string[],
+        length_seconds: streamData.length_seconds as number,
+        tracks: JSON.parse(streamData.tracks as string)
+    };
+}

src/lib/stores.js

@@ -1,85 +0,0 @@
-import { writable, get } from 'svelte/store';
-import { browser } from '$app/environment';
-
-export const currentStream = writable({});
-export const currentSongIndex = writable(null);
-
-export const favoritedStreams = writable(
-    new Set(JSON.parse((browser && localStorage.getItem('favoritedStreams')) || '[]'))
-);
-
-if (browser) {
-    favoritedStreams.subscribe((val) => {
-        localStorage.setItem('favoritedStreams', JSON.stringify(Array.from(val)));
-    });
-}
-
-export const tagList = [
-    'acoustic',
-    'electronic',
-    'orchestral',
-    'rock',
-    'pop',
-    'metal',
-    'aggressive',
-    'folk',
-    'jazzy',
-    'dance.music',
-    'untz',
-    'breakbeats',
-    'electronica',
-    'chiptune',
-    'left.field',
-    'denpa',
-    'vocaloid',
-    'funky',
-    'lush',
-    'noisy',
-    'psychedelic',
-    'dark',
-    'calm',
-    'moody',
-    'uplifting'
-];
-
-let timestampList;
-
-// utility
-
-function locationOf(element, array, start, end) {
-    start = start || 0;
-    end = end || array.length;
-    var pivot = parseInt(start + (end - start) / 2, 10);
-    if (end - start <= 1 || array[pivot] === element) return pivot;
-    if (array[pivot] < element) {
-        return locationOf(element, array, pivot, end);
-    } else {
-        return locationOf(element, array, start, pivot);
-    }
-}
-
-// exported methods
-
-export function getSongAtTime(currentTime) {
-    return locationOf(currentTime, timestampList) - 1;
-}
-
-// less operations needed when doing regular lookups
-export function updateCurrentSong(currentTime, songIndex) {
-    function updateCurrentSongRecurse(songIndex) {
-        if (currentTime >= timestampList[songIndex + 2]) {
-            return updateCurrentSongRecurse(songIndex + 1);
-        } else if (currentTime < timestampList[songIndex + 1]) {
-            return updateCurrentSongRecurse(songIndex - 1);
-        }
-        return songIndex;
-    }
-
-    currentSongIndex.set(updateCurrentSongRecurse(songIndex));
-}
-
-export function updateCurrentStream(stream) {
-    currentStream.set(stream);
-    timestampList = [-Infinity, ...stream.tracks.map((track) => track[0]), Infinity];
-    currentSongIndex.set(0);
-}

src/lib/stores.svelte.ts

@@ -0,0 +1,39 @@
+import { browser } from '$app/environment';
+import { SvelteSet } from 'svelte/reactivity';
+
+export const favoritedStreams = new SvelteSet<string>(
+    JSON.parse((browser && localStorage.getItem('favoritedStreams')) || '[]')
+);
+$effect.root(() => {
+    $effect(() => {
+        localStorage.setItem('favoritedStreams', JSON.stringify(Array.from(favoritedStreams)));
+    });
+});
+
+export const tagList = [
+    'acoustic',
+    'electronic',
+    'orchestral',
+    'rock',
+    'pop',
+    'metal',
+    'aggressive',
+    'folk',
+    'jazzy',
+    'dance.music',
+    'untz',
+    'breakbeats',
+    'electronica',
+    'chiptune',
+    'left.field',
+    'denpa',
+    'vocaloid',
+    'funky',
+    'lush',
+    'noisy',
+    'psychedelic',
+    'dark',
+    'calm',
+    'moody',
+    'uplifting'
+];

src/lib/streamCache.svelte.ts

@@ -0,0 +1,66 @@
+import { browser } from '$app/environment';
+import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+import type { StreamSummary } from './types.ts';
+
+const STORAGE_KEY = 'cachedStreams';
+
+export const cached = new SvelteSet<string>(
+	browser ? JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') : []
+);
+export const downloading = new SvelteMap<string, number>();
+
+if (browser) {
+	$effect.root(() => {
+		$effect(() => {
+			localStorage.setItem(STORAGE_KEY, JSON.stringify([...cached]));
+		});
+	});
+}
+
+export async function download(stream: StreamSummary) {
+	const res = await fetch(`/media/tracks/${stream.filename}`);
+	if (!res.ok || !res.body) throw new Error('Download failed');
+
+	const total = Number(res.headers.get('content-length') || 0);
+	const reader = res.body.getReader();
+	const chunks: Uint8Array[] = [];
+	let received = 0;
+
+	downloading.set(stream.id, 0);
+
+	while (true) {
+		const { done, value } = await reader.read();
+		if (done) break;
+		chunks.push(value);
+		received += value.length;
+		if (total) downloading.set(stream.id, Math.round((received / total) * 100));
+	}
+
+	const root = await navigator.storage.getDirectory();
+	const handle = await root.getFileHandle(stream.id, { create: true });
+	const writable = await handle.createWritable();
+	await writable.write(new Blob(chunks));
+	await writable.close();
+
+	downloading.delete(stream.id);
+	cached.add(stream.id);
+}
+
+export async function remove(streamId: string) {
+	const root = await navigator.storage.getDirectory();
+	await root.removeEntry(streamId);
+	cached.delete(streamId);
+}
+
+export async function getUrl(streamId: string): Promise<string | null> {
+	if (!cached.has(streamId)) return null;
+	try {
+		const root = await navigator.storage.getDirectory();
+		const handle = await root.getFileHandle(streamId);
+		const file = await handle.getFile();
+		return URL.createObjectURL(file);
+	} catch {
+		cached.delete(streamId);
+		return null;
+	}
+}

src/lib/streamContext.svelte.ts

@@ -0,0 +1,47 @@
+import { createContext } from 'svelte';
+import type { Stream, StreamSummary } from './types.ts';
+
+export class StreamContext {
+	streams: StreamSummary[];
+	current = $state<Stream | null>(null);
+	songIndex = $state<number | null>(null);
+	#timestamps: number[] = [];
+
+	constructor(streams: StreamSummary[]) {
+		this.streams = streams;
+	}
+
+	setCurrent(stream: Stream) {
+		this.current = stream;
+		this.#timestamps = [-Infinity, ...stream.tracks.map((t) => t[0]), Infinity];
+		this.songIndex = 0;
+	}
+
+	clearCurrent() {
+		this.current = null;
+		this.songIndex = null;
+	}
+
+	getSongAtTime(time: number): number {
+		return this.#locationOf(time, this.#timestamps) - 1;
+	}
+
+	updateCurrentSong(currentTime: number, songIndex: number) {
+		const ts = this.#timestamps;
+		const recurse = (idx: number): number => {
+			if (currentTime >= ts[idx + 2]) return recurse(idx + 1);
+			if (currentTime < ts[idx + 1]) return recurse(idx - 1);
+			return idx;
+		};
+		this.songIndex = recurse(songIndex);
+	}
+
+	#locationOf(element: number, array: number[], start = 0, end = array.length): number {
+		const pivot = Math.floor(start + (end - start) / 2);
+		if (end - start <= 1 || array[pivot] === element) return pivot;
+		if (array[pivot] < element) return this.#locationOf(element, array, pivot, end);
+		return this.#locationOf(element, array, start, pivot);
+	}
+}
+
+export const [getStreamContext, setStreamContext] = createContext<StreamContext>();

src/lib/types.ts

@@ -0,0 +1,19 @@
+/** A track entry: [timestamp_seconds, artist, title] */
+export type Track = [number, string, string];
+
+/** The summary shape used in sidebar listings. */
+export interface StreamSummary {
+	id: string;
+	stream_date: number;
+	filename: string;
+	title: string | null;
+	tags: string[];
+	length_seconds: number;
+}
+
+/** The full stream shape used on the detail/player page. */
+export interface Stream extends StreamSummary {
+	format: string;
+	description: string | null;
+	tracks: Track[];
+}

src/lib/utils.js

@@ -1,37 +0,0 @@
-import Sqids from 'sqids';
-
-let sqids = new Sqids({ minLength: 6, alphabet: 'abcdefghijklmnopqrstuvwxyz0123456789' });
-
-export function hashcode(str) {
-    for (var i = 0, h = 9; i < str.length; ) h = Math.imul(h ^ str.charCodeAt(i++), 9 ** 9);
-    return h ^ (h >>> 9);
-}
-
-// for mnemonic display
-export function shorthandCode(str) {
-    return sqids.encode([hashcode(str) & 0xffff]);
-}
-
-// for tag display
-export function hashColor(str) {
-    const hash = hashcode(str);
-    return `hsl(${hash % 360}, ${65 + (hash % 30) + 1}%, ${85 + (hash % 10) + 1}%)`;
-}
-
-export function formatSecondsToHms(s) {
-    s = Number(s);
-    var h = Math.floor(s / 3600);
-    var m = Math.ceil((s % 3600) / 60);
-
-    var hDisplay = h > 0 ? h + (h == 1 ? ' hr' : ' hrs') + (m > 0 ? ', ' : '') : '';
-    var mDisplay = m > 0 ? m + (m == 1 ? ' min' : ' mins') : '';
-    return hDisplay + mDisplay;
-}
-
-export function formatDate(unix_timestamp) {
-    return new Date(unix_timestamp).toISOString().split('T')[0];
-}
-
-export function formatTrackTime(s) {
-    return new Date(s * 1000).toISOString().slice(11, 19);
-}

src/lib/utils.ts

@@ -0,0 +1,38 @@
+import Sqids from 'sqids';
+
+const sqids = new Sqids({ minLength: 6, alphabet: 'abcdefghijklmnopqrstuvwxyz0123456789' });
+
+export function hashcode(str: string): number {
+    let h = 9;
+    for (let i = 0; i < str.length; ) h = Math.imul(h ^ str.charCodeAt(i++), 9 ** 9);
+    return h ^ (h >>> 9);
+}
+
+// for mnemonic display
+export function shorthandCode(str: string): string {
+    return sqids.encode([hashcode(str) & 0xffff]);
+}
+
+// for tag display
+export function hashColor(str: string): string {
+    const hash = hashcode(str);
+    return `hsl(${hash % 360}, ${65 + (hash % 30) + 1}%, ${85 + (hash % 10) + 1}%)`;
+}
+
+export function formatSecondsToHms(s: number): string {
+    s = Number(s);
+    const h = Math.floor(s / 3600);
+    const m = Math.ceil((s % 3600) / 60);
+
+    const hDisplay = h > 0 ? h + (h == 1 ? ' hr' : ' hrs') + (m > 0 ? ', ' : '') : '';
+    const mDisplay = m > 0 ? m + (m == 1 ? ' min' : ' mins') : '';
+    return hDisplay + mDisplay;
+}
+
+export function formatDate(unix_timestamp: number): string {
+    return new Date(unix_timestamp).toISOString().split('T')[0];
+}
+
+export function formatTrackTime(s: number): string {
+    return new Date(s * 1000).toISOString().slice(11, 19);
+}

src/routes/streams/+layout.server.ts

@@ -1,4 +1,4 @@
-import { getStreams } from '$lib/database.js';
+import { getStreams } from '$lib/database.ts';
 
 export function load() {
     return {

src/routes/streams/+layout.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
     import Sidebar from './Sidebar.svelte';
     import Footer from './Footer.svelte';
-    let { data, children } = $props();
+    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
+    const { data, children } = $props();
+    setStreamContext(new StreamContext(data.streams));
 </script>
 
 <div id="mainContainer">
-    <div id="sidebar" class="panel"><Sidebar streams={data.streams} /></div>
+    <div id="sidebar" class="panel"><Sidebar /></div>
     <div id="footer" class="panel-alt"><Footer /></div>
     <div id="content">{@render children?.()}</div>
 </div>

src/routes/streams/Sidebar.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
     import { untrack } from 'svelte';
     import { goto } from '$app/navigation';
-    import { currentStream, favoritedStreams } from '$lib/stores.js';
+    import { favoritedStreams } from '$lib/stores.svelte.ts';
-    import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
+    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';
 
-    let { streams } = $props();
+    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);
@@ -19,15 +23,15 @@
     });
 
     function streamsToDisplay() {
-        return streams.filter(
+        return ctx.streams.filter(
             (stream) =>
-                !('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
+                !('tags' in stream) || filteredTags.every((tag) => stream.tags.includes(tag))
         );
     }
 
     function getRemainingTags() {
-        let tagCounts = displayedStreams.reduce((tags, stream) => {
+        let tagCounts = displayedStreams.reduce((tags: Record<string, number>, stream) => {
-            stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
+            stream.tags.forEach((tag) => (tags[tag] ? (tags[tag] += 1) : (tags[tag] = 1)));
             return tags;
         }, {});
         return Object.entries(tagCounts)
@@ -35,20 +39,23 @@
             .map((el) => el[0]);
     }
 
-    function getDisplayedTagsInList(streamTags, remainingTags) {
+    function getDisplayedTagsInList(streamTags: string[], remainingTags: string[]) {
         return streamTags.filter((tag) => remainingTags.includes(tag));
     }
 
-    function updateFavorites(stream) {
+    function updateFavorites(stream: StreamSummary) {
-        $favoritedStreams.has(stream['id'])
+        favoritedStreams.has(stream.id)
-            ? $favoritedStreams.delete(stream['id'])
+            ? favoritedStreams.delete(stream.id)
-            : $favoritedStreams.add(stream['id']);
+            : favoritedStreams.add(stream.id);
-        $favoritedStreams = $favoritedStreams; // for reactivity
     }
 </script>
 
 <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
@@ -56,29 +63,28 @@
 </div>
 
 <ul class="stream-list">
-    {#each streams as stream}
+    {#each ctx.streams as stream}
-        {@const favorited = $favoritedStreams.has(stream['id'])}
+        {@const favorited = favoritedStreams.has(stream.id)}
-        {@const current = $currentStream['id'] === 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']}"
+            id="stream-{stream.id}"
         >
-            <button class="stream-item-button" onclick={() => goto('/streams/' + stream['id'])}>
+            <button class="stream-item-button" onclick={() => goto('/streams/' + stream.id)}>
                 <span class="stream-item-id">
                     ID:
-                    {shorthandCode(stream['id'])}</span
+                    {shorthandCode(stream.id)}</span
                 >
 
-                <span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
+                <span class="stream-item-date">{formatDate(stream.stream_date)}</span>
 
-                <span class="stream-item-length"
+                <span class="stream-item-length">{formatSecondsToHms(stream.length_seconds)}</span>
-                    >{formatSecondsToHms(stream['length_seconds'])}</span
-                >
 
                 <p class="stream-item-tags" hidden={!remainingTags.length}>
                     Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
-                        stream['tags'],
+                        stream.tags,
                         remainingTags
                     ).join(', ')}
                 </p>
@@ -92,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>
@@ -169,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;
+        bottom: 2px;
-        right: 0;
+        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;
     }
@@ -203,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/TagSelect.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Select from 'svelte-select';
-    import { tagList } from '$lib/stores.js';
+    import { tagList } from '$lib/stores.svelte.ts';
 
     let { checked = $bindable([]), remainingTags = [], listOpen = $bindable() } = $props();
     let items = $state(tagList.map((x) => ({ value: x, label: x })));
@@ -58,7 +58,7 @@
     {#snippet item({ item })}
         <div class="item">
             <label for={item.value}>
-                <input type="checkbox" id={item.value} bind:checked={isChecked[item.value]} />
+                <input type="checkbox" id={item.value} checked={isChecked[item.value]} />
                 {item.label}
             </label>
         </div>

src/routes/streams/WelcomePage.svelte

@@ -1,7 +1,8 @@
 <script>
-    import { currentStream } from '$lib/stores.js';
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
 
-    currentStream.set({});
+    const ctx = getStreamContext();
+    ctx.clearCurrent();
 </script>
 
 <div class="stream-information">

src/routes/streams/[stream_id]/+page.server.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { error } from '@sveltejs/kit';
-import { getStreamInfo } from '$lib/database.js';
+import { getStreamInfo } from '$lib/database.ts';
 import { dev } from '$app/environment';
 import { STREAM_JSON_LOCATION } from '$env/static/private';
 

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

@@ -1,16 +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 { currentStream, updateCurrentStream } from '$lib/stores.js';
+    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(() => {
+    // reactivity runs on `stream` and `streamCache.cached` here
-        updateCurrentStream(data.stream);
+    $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>
 
@@ -22,8 +33,10 @@
         <StreamPage />
     </div>
     <div id="player">
-        {#key $currentStream}
+        {#key playerSrc}
-            <Player display={true} src="/media/tracks/{$currentStream.filename}" />
+            {#if playerSrc}
+                <Player display={true} src={playerSrc} />
+            {/if}
         {/key}
     </div>
 </div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { tagList } from '$lib/stores.js';
+    import { tagList } from '$lib/stores.svelte.ts';
 
     let { original = $bindable() } = $props();
 

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 {
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
-        currentSongIndex,
+    import type { Track } from '$lib/types';
-        currentStream,
+
-        getSongAtTime,
+    const ctx = getStreamContext();
-        updateCurrentSong
-    } from '$lib/stores.js';
 
     interface Props {
         src: any;
@@ -75,24 +73,31 @@
     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();
     let innerHeight = $state();
+    let isSafari = $state(false);
 
     onMount(async () => {
+        // work around coreaudio bug
+        // see https://git.webbieweb.org/apt-get/strimserve/issues/1
+        const ua = navigator.userAgent;
+        const isIOS = /iPad|iPhone|iPod/.test(ua);
+        const isDesktopSafari = /Safari/.test(ua) && !/Chrome/.test(ua) && !/Chromium/.test(ua);
+        isSafari = isIOS || isDesktopSafari;
+
         // default volume
         const volumeData = localStorage.getItem('volume');
         volume = volumeData ? parseFloat(volumeData) : 0.67;
         setVolume(volume);
+    });
 
     // update browser metadata on track changes
-        if ('mediaSession' in navigator) {
+    $effect(() => {
-            currentSongIndex.subscribe((val) => {
+        if ('mediaSession' in navigator && ctx.songIndex != null && !paused && ctx.current) {
-                if (val != null && !paused) {
+            setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
-                    setMediaMetadata($currentStream.tracks[val]);
-                }
-            });
         }
     });
 
@@ -111,7 +116,7 @@
         }
     }
 
-    function setMediaMetadata(track) {
+    function setMediaMetadata(track: Track) {
         navigator.mediaSession.metadata = new MediaMetadata({
             artist: track[1],
             title: track[2]
@@ -120,8 +125,8 @@
 
     // browsers don't like if you update this while no media is playing
     function setMediaMetadataOnPlay() {
-        if ('mediaSession' in navigator) {
+        if ('mediaSession' in navigator && ctx.current && ctx.songIndex != null) {
-            setMediaMetadata($currentStream.tracks[$currentSongIndex]);
+            setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
         }
     }
 
@@ -144,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());
@@ -173,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);
@@ -212,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}
 />
 
@@ -231,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)}
@@ -296,13 +315,17 @@
     bind:duration={null, (d) => (duration = d || 0)}
     bind:currentTime
     {muted}
-    {volume}
     onplay={setMediaMetadataOnPlay}
     onended={bubble('ended')}
     {preload}
 >
+    {#if isSafari}
+        <source src="{src}.mp3" type="audio/mpeg" />
+        <source {src} type="audio/ogg;codecs=opus" />
+    {:else}
         <source {src} type="audio/ogg;codecs=opus" />
         <source src="{src}.mp3" type="audio/mpeg" />
+    {/if}
 </audio>
 
 <style>

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

@@ -1,6 +1,6 @@
 <script>
-    import { currentStream, currentSongIndex } from '$lib/stores.js';
+    import { getStreamContext } from '$lib/streamContext.svelte.ts';
-    import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
+    import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.ts';
     import { jumpToTrack } from './Player.svelte';
     import { Carta } from 'carta-md';
     import DOMPurify from 'isomorphic-dompurify';
@@ -9,31 +9,36 @@
         sanitizer: DOMPurify.sanitize
     });
 
-    let formattedStreamDate = $derived(formatDate($currentStream.stream_date));
+    const ctx = getStreamContext();
+
+    let formattedStreamDate = $derived(
+        ctx.current ? formatDate(ctx.current.stream_date) : ''
+    );
 </script>
 
 <svelte:head>
     <title>{formattedStreamDate} | apt-get's auditorium</title>
 </svelte:head>
 
-<div class="stream-information">
+{#if ctx.current}
+    <div class="stream-information">
         <div class="stream-information-flexbox">
-        <h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
+            <h3 class="stream-id">ID: {shorthandCode(ctx.current.id)}</h3>
             <h1 class="stream-date">{formattedStreamDate}</h1>
         </div>
-    <h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
+        <h5 class="stream-tags"><u>Tags</u>: {ctx.current.tags.join(', ')}</h5>
-</div>
+    </div>
 
-<div class="description-bubble">
+    <div class="description-bubble">
-    {@html carta.renderSSR($currentStream.description || 'No description available.')}
+        {@html carta.renderSSR(ctx.current.description || 'No description available.')}
-</div>
+    </div>
 
-<div id="table-container">
+    <div id="table-container">
         <table>
             <tbody>
                 <tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
-            {#each $currentStream.tracks as track, i}
+                {#each ctx.current.tracks as track, i}
-                <tr class:current={i == $currentSongIndex}>
+                    <tr class:current={i == ctx.songIndex}>
                         <td class="timestamp-field"
                             ><div class="timestamp-field-flex">
                                 {formatTrackTime(track[0])}
@@ -51,7 +56,8 @@
                 {/each}
             </tbody>
         </table>
-</div>
+    </div>
+{/if}
 
 <style>
     .stream-information {

svelte.config.js

@@ -1,4 +1,3 @@
-//import adapter from 'svelte-adapter-bun';
 import adapter from 'svelte-adapter-bun';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';