fix linter nitpicks

src/app.d.ts

@@ -1,3 +1,4 @@
+/// <reference lib="dom.asynciterable" />
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

src/lib/types.ts

@@ -15,7 +15,8 @@ export interface StreamSummary {
 export interface Stream extends StreamSummary {
     format: string;
     description: string | null;
-    descriptionHtml: string;
+    // rendered at page load, so absent straight out of the database
+    descriptionHtml?: string;
     tracks: Track[];
 }
 

src/routes/streams/+layout.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
     import Sidebar from './Sidebar.svelte';
     import Footer from './Footer.svelte';
+    import { untrack } from 'svelte';
     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));
+    setStreamContext(new StreamContext(untrack(() => data.streams)));
 </script>
 
 <div id="mainContainer">

src/routes/streams/TagSelect.svelte

@@ -24,7 +24,7 @@
         });
     }
 
-    function handleChange(e) {
+    function handleChange(e: CustomEvent) {
         if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
         else
             checked.includes(e.detail.value)
@@ -33,7 +33,7 @@
         handleSelectable();
     }
 
-    let itemFilter = function (label, filterText, option) {
+    let itemFilter = function (label: string, filterText: string, option: { value: string }) {
         return (
             remainingTags.includes(option['value']) &&
             label.toLowerCase().includes(filterText.toLowerCase())
@@ -55,14 +55,13 @@
     --max-height="42px"
     listOffset={0}
 >
-    {#snippet item({ item })}
+    <!-- svelte-select 5.8.3 exposes this as a slot, not a snippet prop -->
-        <div class="item">
+    <div class="item" slot="item" let:item>
-            <label for={item.value}>
+        <label for={item.value}>
-                <input type="checkbox" id={item.value} checked={isChecked[item.value]} />
+            <input type="checkbox" id={item.value} checked={isChecked[item.value]} />
-                {item.label}
+            {item.label}
-            </label>
+        </label>
-        </div>
+    </div>
-    {/snippet}
 </Select>
 
 <style>

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

@@ -4,9 +4,13 @@ import { error } from '@sveltejs/kit';
 import { getStreamInfo } from '$lib/database.ts';
 import { dev } from '$app/environment';
 import { STREAM_JSON_LOCATION } from '$env/static/private';
+import type { Actions } from './$types';
 
-let getOriginalJson, writeSideloadJson;
+type SideloadJson = { title: unknown; description: unknown; tags: unknown };
-export let actions;
+
+let getOriginalJson: (streamId: string) => string;
+let writeSideloadJson: (streamId: string, newJson: SideloadJson) => void;
+export let actions: Actions | undefined;
 
 // utilities for manipulating original stream JSONs
 if (dev) {
@@ -30,11 +34,11 @@ if (dev) {
     actions = {
         default: async ({ params, request }) => {
             const data = await request.formData();
-            // let newJson = JSON.parse(getOriginalJson(params.stream_id));
+            const newJson: SideloadJson = {
-            const newJson = {};
+                title: data.get('title'),
-            newJson['title'] = data.get('title');
+                description: data.get('description'),
-            newJson['description'] = data.get('description');
+                tags: data.getAll('tags')
-            newJson['tags'] = data.getAll('tags');
+            };
             writeSideloadJson(params.stream_id, newJson);
         }
     };

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

@@ -4,10 +4,10 @@
 
     let { original = $bindable() } = $props();
 
-    let tagMap = new Map();
+    let tagMap = new Map<string, boolean>();
 
     // Create a mapping of tags and their checked status
-    let reloadTags = (original) => {
+    let reloadTags = (original: { tags: string[] }) => {
         tagList.forEach((tag) => {
             tagMap.set(tag, original.tags.includes(tag));
         });

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

@@ -3,10 +3,10 @@
 	 ISC License
 -->
 
-<script module>
+<script module lang="ts">
-    let getAudio = null;
+    let getAudio: () => HTMLAudioElement;
 
-    export function jumpToTrack(s) {
+    export function jumpToTrack(s: number) {
         getAudio().currentTime = s;
         getAudio().play();
     }
@@ -28,7 +28,7 @@
         duration?: number;
         muted?: boolean;
         volume?: number;
-        preload?: string;
+        preload?: 'none' | 'metadata' | 'auto';
         iconColor?: string;
         textColor?: string;
         barPrimaryColor?: string;
@@ -64,7 +64,7 @@
     };
 
     let currentTime = $state(0);
-    let tooltip = $state();
+    let tooltip = $state<HTMLElement>();
     let tooltipX = $state(0);
     let tooltipY = $state(0);
     let showTooltip = $state(false);
@@ -73,10 +73,10 @@
     let seeking = $state(false);
     let volumeSeeking = $state(false);
     let pendingSeekTime = $state<number | null>(null);
-    let songBar = $state();
+    let songBar = $state<HTMLProgressElement>();
-    let volumeBar = $state();
+    let volumeBar = $state<HTMLProgressElement>();
-    let innerWidth = $state();
+    let innerWidth = $state(0);
-    let innerHeight = $state();
+    let innerHeight = $state(0);
     let isSafari = $state(false);
 
     onMount(() => {
@@ -125,14 +125,14 @@
         }
     }
 
-    function seek(event, bounds) {
+    function seek(event: MouseEvent, bounds: DOMRect) {
         let x = event.clientX - bounds.left;
         return Math.min(Math.max(x / bounds.width, 0), 1);
     }
 
     // exponential volume bar
     // default is linear, which doesn't correspond to human hearing
-    function setVolume(volume) {
+    function setVolume(volume: number) {
         if (volume != 0) {
             audio.volume = Math.pow(10, 2.5 * (volume - 1));
         } else {
@@ -172,12 +172,12 @@
         return () => audio.removeEventListener('loadedmetadata', onLoadedMetadata);
     });
 
-    function updateSeekVisual(event) {
+    function updateSeekVisual(event: MouseEvent) {
         if (!songBar) return;
         pendingSeekTime = seek(event, songBar.getBoundingClientRect()) * duration;
     }
 
-    function seekVolume(event) {
+    function seekVolume(event: MouseEvent) {
         if (!volumeBar) return;
         volume = seek(event, volumeBar.getBoundingClientRect());
         setVolume(volume);
@@ -185,9 +185,9 @@
         muted = false;
     }
 
-    function formatSeconds(totalSeconds, forceHours = false) {
+    function formatSeconds(totalSeconds: number, forceHours = false) {
         if (isNaN(totalSeconds)) return 'No Data';
-        totalSeconds = parseInt(totalSeconds, 10);
+        totalSeconds = Math.trunc(totalSeconds);
         const hours = Math.floor(totalSeconds / 3600);
         const minutes = Math.floor(totalSeconds / 60) % 60;
         const seconds = totalSeconds % 60;
@@ -198,8 +198,9 @@
             .join(':');
     }
 
-    function seekTooltip(event) {
+    function seekTooltip(event: MouseEvent) {
-        if (!inlineTooltip) {
+        if (!songBar) return;
+        if (!inlineTooltip && tooltip) {
             let tooltipBounds = tooltip.getBoundingClientRect();
             tooltipX = Math.min(event.clientX + 10, innerWidth - tooltipBounds.width);
             tooltipY = Math.min(songBar.offsetTop - 30, innerHeight - tooltipBounds.height);
@@ -216,7 +217,7 @@
         seekText = formatSeconds(seekValue);
     }
 
-    function trackMouse(event) {
+    function trackMouse(event: MouseEvent) {
         if (seeking) updateSeekVisual(event);
         if (showTooltip && !disableTooltip) seekTooltip(event);
         if (volumeSeeking) seekVolume(event);

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

@@ -1,8 +1,9 @@
 import fs from 'fs';
 import { json } from '@sveltejs/kit';
 import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
 
-export let GET;
+export let GET: RequestHandler | undefined;
 
 if (process.env.NODE_ENV === 'development') {
     const jsonFolder = './db/stream_json/';

tsconfig.json

@@ -2,6 +2,7 @@
     "extends": "./.svelte-kit/tsconfig.json",
     "compilerOptions": {
         "allowJs": true,
+        "allowImportingTsExtensions": true,
         "checkJs": true,
         "esModuleInterop": true,
         "forceConsistentCasingInFileNames": true,