add types

2026-03-15 14:50:56 +01:00
parent 347438928a
commit 4d8f7c2b02
12 changed files with 183 additions and 144 deletions
--- a/src/lib/database.js
+++ b/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;
-}
--- a/src/lib/database.ts
+++ b/src/lib/database.ts
@@ -0,0 +1,45 @@
+import { Database } from 'bun:sqlite';
+import type { Stream, StreamSummary } from './types.js';
+
+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, 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),
+        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)
+    };
+}
--- a/src/lib/stores.svelte.ts
+++ b/src/lib/stores.svelte.ts
@@ -1,11 +1,12 @@
 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({});
-export const currentSongIndex = writable(null);
+export const currentStream = writable<Stream | null>(null);
+export const currentSongIndex = writable<number | null>(null);

-export const favoritedStreams = new SvelteSet(
+export const favoritedStreams = new SvelteSet<string>(
    JSON.parse((browser && localStorage.getItem('favoritedStreams')) || '[]')
 );
 $effect.root(() => {
@@ -42,14 +43,14 @@ export const tagList = [
    'uplifting'
 ];

-let timestampList;
+let timestampList: number[];

 // utility

-function locationOf(element, array, start, end) {
+function locationOf(element: number, array: number[], start?: number, end?: number): number {
    start = start || 0;
    end = end || array.length;
-    var pivot = parseInt(start + (end - start) / 2, 10);
+    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);
@@ -60,13 +61,13 @@ function locationOf(element, array, start, end) {

 // exported methods

-export function getSongAtTime(currentTime) {
+export function getSongAtTime(currentTime: number): number {
    return locationOf(currentTime, timestampList) - 1;
 }

 // less operations needed when doing regular lookups
-export function updateCurrentSong(currentTime, songIndex) {
-    function updateCurrentSongRecurse(songIndex) {
+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]) {
@@ -78,7 +79,7 @@ export function updateCurrentSong(currentTime, songIndex) {
    currentSongIndex.set(updateCurrentSongRecurse(songIndex));
 }

-export function updateCurrentStream(stream) {
+export function updateCurrentStream(stream: Stream): void {
    currentStream.set(stream);
    timestampList = [-Infinity, ...stream.tracks.map((track) => track[0]), Infinity];
    currentSongIndex.set(0);
--- a/src/lib/types.ts
+++ b/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;
+	title: string | null;
+	tags: string[];
+	length_seconds: number;
+}
+
+/** The full stream shape used on the detail/player page. */
+export interface Stream extends StreamSummary {
+	filename: string;
+	format: string;
+	description: string | null;
+	tracks: Track[];
+}
--- a/src/lib/utils.js
+++ b/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);
-}
--- a/src/lib/utils.ts
+++ b/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);
+}
--- a/src/routes/streams/Sidebar.svelte
+++ b/src/routes/streams/Sidebar.svelte
@@ -2,10 +2,11 @@
    import { untrack } from 'svelte';
    import { goto } from '$app/navigation';
    import { currentStream, favoritedStreams } from '$lib/stores.svelte.js';
+    import type { StreamSummary } from '$lib/types';
    import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
    import TagSelect from './TagSelect.svelte';

-    let { streams } = $props();
+    let { streams }: { streams: StreamSummary[] } = $props();
    let filteredTags = $state([]);
    let favoritesOnly = $state(false);
    let listOpen = $state();
@@ -21,13 +22,13 @@
    function streamsToDisplay() {
        return 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) => {
-            stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
+        let tagCounts = displayedStreams.reduce((tags: Record<string, number>, stream) => {
+            stream.tags.forEach((tag) => (tags[tag] ? (tags[tag] += 1) : (tags[tag] = 1)));
            return tags;
        }, {});
        return Object.entries(tagCounts)
@@ -35,14 +36,14 @@
            .map((el) => el[0]);
    }

-    function getDisplayedTagsInList(streamTags, remainingTags) {
+    function getDisplayedTagsInList(streamTags: string[], remainingTags: string[]) {
        return streamTags.filter((tag) => remainingTags.includes(tag));
    }

-    function updateFavorites(stream) {
-        favoritedStreams.has(stream['id'])
-            ? favoritedStreams.delete(stream['id'])
-            : favoritedStreams.add(stream['id']);
+    function updateFavorites(stream: StreamSummary) {
+        favoritedStreams.has(stream.id)
+            ? favoritedStreams.delete(stream.id)
+            : favoritedStreams.add(stream.id);
    }
 </script>

@@ -56,28 +57,26 @@

 <ul class="stream-list">
    {#each streams as stream}
-        {@const favorited = favoritedStreams.has(stream['id'])}
-        {@const current = $currentStream['id'] === stream['id']}
+        {@const favorited = favoritedStreams.has(stream.id)}
+        {@const current = $currentStream?.id === stream.id}
        <li
            hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
            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"
-                    >{formatSecondsToHms(stream['length_seconds'])}</span
-                >
+                <span class="stream-item-length">{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>
--- a/src/routes/streams/WelcomePage.svelte
+++ b/src/routes/streams/WelcomePage.svelte
@@ -1,7 +1,7 @@
 <script>
    import { currentStream } from '$lib/stores.svelte.js';

-    currentStream.set({});
+    currentStream.set(null);
 </script>

 <div class="stream-information">
--- a/src/routes/streams/[stream_id]/+page.svelte
+++ b/src/routes/streams/[stream_id]/+page.svelte
@@ -6,6 +6,7 @@
    import Player from './Player.svelte';
    import { dev } from '$app/environment';
    import { currentStream, updateCurrentStream } from '$lib/stores.svelte.js';
+    import type { Stream } from '$lib/types';

    let { data } = $props();

@@ -23,7 +24,7 @@
    </div>
    <div id="player">
        {#key $currentStream}
-            <Player display={true} src="/media/tracks/{$currentStream.filename}" />
+            <Player display={true} src="/media/tracks/{$currentStream?.filename}" />
        {/key}
    </div>
 </div>
--- a/src/routes/streams/[stream_id]/Player.svelte
+++ b/src/routes/streams/[stream_id]/Player.svelte
@@ -25,6 +25,7 @@
        getSongAtTime,
        updateCurrentSong
    } from '$lib/stores.svelte.js';
+    import type { Track } from '$lib/types';

    interface Props {
        src: any;
@@ -89,7 +90,7 @@
        // update browser metadata on track changes
        if ('mediaSession' in navigator) {
            currentSongIndex.subscribe((val) => {
-                if (val != null && !paused) {
+                if (val != null && !paused && $currentStream) {
                    setMediaMetadata($currentStream.tracks[val]);
                }
            });
@@ -111,7 +112,7 @@
        }
    }

-    function setMediaMetadata(track) {
+    function setMediaMetadata(track: Track) {
        navigator.mediaSession.metadata = new MediaMetadata({
            artist: track[1],
            title: track[2]
@@ -120,7 +121,7 @@

    // browsers don't like if you update this while no media is playing
    function setMediaMetadataOnPlay() {
-        if ('mediaSession' in navigator) {
+        if ('mediaSession' in navigator && $currentStream && $currentSongIndex != null) {
            setMediaMetadata($currentStream.tracks[$currentSongIndex]);
        }
    }
@@ -173,6 +174,7 @@
        }
        let bounds = songBar.getBoundingClientRect();
        let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
+        if (!$currentStream) return;
        let trackArray = $currentStream.tracks[getSongAtTime(seekValue)];
        seekTrack = trackArray[1] + ' - ' + trackArray[2];
        seekText = formatSeconds(seekValue);
@@ -184,7 +186,9 @@
        if (volumeSeeking) seekVolume(event);
    }
    run(() => {
-        updateCurrentSong(currentTime, $currentSongIndex);
+        if ($currentSongIndex != null) {
+            updateCurrentSong(currentTime, $currentSongIndex);
+        }
    });
    run(() => {
        updateAudioAttributes(audio);
--- a/src/routes/streams/[stream_id]/StreamPage.svelte
+++ b/src/routes/streams/[stream_id]/StreamPage.svelte
@@ -9,49 +9,53 @@
        sanitizer: DOMPurify.sanitize
    });

-    let formattedStreamDate = $derived(formatDate($currentStream.stream_date));
+    let formattedStreamDate = $derived(
+        $currentStream ? formatDate($currentStream.stream_date) : ''
+    );
 </script>

 <svelte:head>
    <title>{formattedStreamDate} | apt-get's auditorium</title>
 </svelte:head>

-<div class="stream-information">
-    <div class="stream-information-flexbox">
-        <h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
-        <h1 class="stream-date">{formattedStreamDate}</h1>
+{#if $currentStream}
+    <div class="stream-information">
+        <div class="stream-information-flexbox">
+            <h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
+            <h1 class="stream-date">{formattedStreamDate}</h1>
+        </div>
+        <h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
    </div>
-    <h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
-</div>

-<div class="description-bubble">
-    {@html carta.renderSSR($currentStream.description || 'No description available.')}
-</div>
+    <div class="description-bubble">
+        {@html carta.renderSSR($currentStream.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}
-                <tr class:current={i == $currentSongIndex}>
-                    <td class="timestamp-field"
-                        ><div class="timestamp-field-flex">
-                            {formatTrackTime(track[0])}
-                            <button
-                                onclick={() => jumpToTrack(track[0])}
-                                class="material-icons"
-                                style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
-                                >fast_forward</button
-                            >
-                        </div>
-                    </td>
-                    <td class="artist-field">{track[1]}</td>
-                    <td class="track-field">{track[2]}</td>
-                </tr>
-            {/each}
-        </tbody>
-    </table>
-</div>
+    <div id="table-container">
+        <table>
+            <tbody>
+                <tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
+                {#each $currentStream.tracks as track, i}
+                    <tr class:current={i == $currentSongIndex}>
+                        <td class="timestamp-field"
+                            ><div class="timestamp-field-flex">
+                                {formatTrackTime(track[0])}
+                                <button
+                                    onclick={() => jumpToTrack(track[0])}
+                                    class="material-icons"
+                                    style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
+                                    >fast_forward</button
+                                >
+                            </div>
+                        </td>
+                        <td class="artist-field">{track[1]}</td>
+                        <td class="track-field">{track[2]}</td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+{/if}

 <style>
    .stream-information {