more ts switches, use setcontext instead of stores

src/lib/database.ts

@@ -1,5 +1,5 @@
 import { Database } from 'bun:sqlite';
-import type { Stream, StreamSummary } from './types.js';
+import type { Stream, StreamSummary } from './types.ts';
 
 const dbName = './db/strimserve.db';
 

src/lib/stores.svelte.ts

@@ -1,10 +1,5 @@
-import { writable } from 'svelte/store';
 import { browser } from '$app/environment';
 import { SvelteSet } from 'svelte/reactivity';
-import type { Stream } from '$lib/types';
-
-export const currentStream = writable<Stream | null>(null);
-export const currentSongIndex = writable<number | null>(null);
 
 export const favoritedStreams = new SvelteSet<string>(
     JSON.parse((browser && localStorage.getItem('favoritedStreams')) || '[]')
@@ -42,45 +37,3 @@ export const tagList = [
     'moody',
     'uplifting'
 ];
-
-let timestampList: number[];
-
-// utility
-
-function locationOf(element: number, array: number[], start?: number, end?: number): number {
-    start = start || 0;
-    end = end || array.length;
-    const pivot = parseInt(String(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: number): number {
-    return locationOf(currentTime, timestampList) - 1;
-}
-
-// less operations needed when doing regular lookups
-export function updateCurrentSong(currentTime: number, songIndex: number): void {
-    function updateCurrentSongRecurse(songIndex: number): number {
-        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: Stream): void {
-    currentStream.set(stream);
-    timestampList = [-Infinity, ...stream.tracks.map((track) => track[0]), Infinity];
-    currentSongIndex.set(0);
-}

src/lib/stream-context.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/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/stream-context.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,12 +1,13 @@
 <script lang="ts">
     import { untrack } from 'svelte';
     import { goto } from '$app/navigation';
-    import { currentStream, favoritedStreams } from '$lib/stores.svelte.js';
+    import { favoritedStreams } from '$lib/stores.svelte.ts';
+    import { getStreamContext } from '$lib/stream-context.svelte.ts';
     import type { StreamSummary } from '$lib/types';
-    import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
+    import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.ts';
     import TagSelect from './TagSelect.svelte';
 
-    let { streams }: { streams: StreamSummary[] } = $props();
+    const ctx = getStreamContext();
     let filteredTags = $state([]);
     let favoritesOnly = $state(false);
     let listOpen = $state();
@@ -20,7 +21,7 @@
     });
 
     function streamsToDisplay() {
-        return streams.filter(
+        return ctx.streams.filter(
             (stream) =>
                 !('tags' in stream) || filteredTags.every((tag) => stream.tags.includes(tag))
         );
@@ -56,9 +57,9 @@
 </div>
 
 <ul class="stream-list">
-    {#each streams as stream}
+    {#each ctx.streams as stream}
         {@const favorited = favoritedStreams.has(stream.id)}
-        {@const current = $currentStream?.id === stream.id}
+        {@const current = ctx.current?.id === stream.id}
         <li
             hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
             class="stream-item {current ? 'current-stream' : ''}"

src/routes/streams/TagSelect.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Select from 'svelte-select';
-    import { tagList } from '$lib/stores.svelte.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.svelte.js';
+    import { getStreamContext } from '$lib/stream-context.svelte.ts';
 
-    currentStream.set(null);
+    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

@@ -5,13 +5,13 @@
     import MetadataEditor from './MetadataEditor.svelte';
     import Player from './Player.svelte';
     import { dev } from '$app/environment';
-    import { currentStream, updateCurrentStream } from '$lib/stores.svelte.js';
+    import { getStreamContext } from '$lib/stream-context.svelte.ts';
-    import type { Stream } from '$lib/types';
 
     let { data } = $props();
+    const ctx = getStreamContext();
 
     run(() => {
-        updateCurrentStream(data.stream);
+        ctx.setCurrent(data.stream);
     });
 </script>
 
@@ -23,8 +23,8 @@
         <StreamPage />
     </div>
     <div id="player">
-        {#key $currentStream}
+        {#key ctx.current}
-            <Player display={true} src="/media/tracks/{$currentStream?.filename}" />
+            <Player display={true} src="/media/tracks/{ctx.current?.filename}" />
         {/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.svelte.js';
+    import { tagList } from '$lib/stores.svelte.ts';
 
     let { original = $bindable() } = $props();
 

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

@@ -19,14 +19,11 @@
     const bubble = createBubbler();
     import { onMount, onDestroy } from 'svelte';
     import { fade } from 'svelte/transition';
-    import {
+    import { getStreamContext } from '$lib/stream-context.svelte.ts';
-        currentSongIndex,
-        currentStream,
-        getSongAtTime,
-        updateCurrentSong
-    } from '$lib/stores.svelte.js';
     import type { Track } from '$lib/types';
 
+    const ctx = getStreamContext();
+
     interface Props {
         src: any;
         audio?: any;
@@ -76,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();
@@ -86,14 +84,12 @@
         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 && $currentStream) {
+            setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
-                    setMediaMetadata($currentStream.tracks[val]);
-                }
-            });
         }
     });
 
@@ -121,8 +117,8 @@
 
     // browsers don't like if you update this while no media is playing
     function setMediaMetadataOnPlay() {
-        if ('mediaSession' in navigator && $currentStream && $currentSongIndex != null) {
+        if ('mediaSession' in navigator && ctx.current && ctx.songIndex != null) {
-            setMediaMetadata($currentStream.tracks[$currentSongIndex]);
+            setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
         }
     }
 
@@ -145,6 +141,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());
@@ -174,20 +175,20 @@
         }
         let bounds = songBar.getBoundingClientRect();
         let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
-        if (!$currentStream) return;
+        if (!ctx.current) return;
-        let trackArray = $currentStream.tracks[getSongAtTime(seekValue)];
+        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(() => {
-        if ($currentSongIndex != null) {
+        if (ctx.songIndex != null) {
-            updateCurrentSong(currentTime, $currentSongIndex);
+            ctx.updateCurrentSong(currentTime, ctx.songIndex);
         }
     });
     run(() => {
@@ -216,7 +217,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}
 />
 
@@ -235,7 +242,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)}

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

@@ -1,6 +1,6 @@
 <script>
-    import { currentStream, currentSongIndex } from '$lib/stores.svelte.js';
+    import { getStreamContext } from '$lib/stream-context.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,8 +9,10 @@
         sanitizer: DOMPurify.sanitize
     });
 
+    const ctx = getStreamContext();
+
     let formattedStreamDate = $derived(
-        $currentStream ? formatDate($currentStream.stream_date) : ''
+        ctx.current ? formatDate(ctx.current.stream_date) : ''
     );
 </script>
 
@@ -18,25 +20,25 @@
     <title>{formattedStreamDate} | apt-get's auditorium</title>
 </svelte:head>
 
-{#if $currentStream}
+{#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 class="description-bubble">
-        {@html carta.renderSSR($currentStream.description || 'No description available.')}
+        {@html carta.renderSSR(ctx.current.description || 'No description available.')}
     </div>
 
     <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])}