From 0372f80fc7a917e0cea6a3572ba67b23db418e91 Mon Sep 17 00:00:00 2001
From: apt-get <me@apt-get.xyz>
Date: Tue, 17 Mar 2026 00:30:17 +0100
Subject: [PATCH] remove legacy svelte 4 elements in Player

---
 src/routes/streams/[stream_id]/Player.svelte | 76 ++++++++------------
 1 file changed, 31 insertions(+), 45 deletions(-)

diff --git a/src/routes/streams/[stream_id]/Player.svelte b/src/routes/streams/[stream_id]/Player.svelte
index beec536..3a63fe6 100644
--- a/src/routes/streams/[stream_id]/Player.svelte
+++ b/src/routes/streams/[stream_id]/Player.svelte
@@ -2,7 +2,6 @@
 	 taken from https://github.com/Linkcube/svelte-audio-controls
 	 ISC License
 -->
-<svelte:options />
 
 <script module>
     let getAudio = null;
@@ -14,10 +13,7 @@
 </script>
 
 <script lang="ts">
-    import { run, createBubbler } from 'svelte/legacy';
-
-    const bubble = createBubbler();
-    import { onMount, onDestroy } from 'svelte';
+    import { onMount, untrack } from 'svelte';
     import { fade } from 'svelte/transition';
     import { getStreamContext } from '$lib/streamContext.svelte.ts';
     import type { Track } from '$lib/types';
@@ -40,6 +36,7 @@
         display?: boolean;
         inlineTooltip?: boolean;
         disableTooltip?: boolean;
+        onended?: () => void;
     }
 
     let {
@@ -57,7 +54,8 @@
         backgroundColor = 'white',
         display = false,
         inlineTooltip = false,
-        disableTooltip = false
+        disableTooltip = false,
+        onended
     }: Props = $props();
 
     getAudio = () => {
@@ -80,7 +78,7 @@
     let innerHeight = $state();
     let isSafari = $state(false);
 
-    onMount(async () => {
+    onMount(() => {
         // work around coreaudio bug
         // see https://git.webbieweb.org/apt-get/strimserve/issues/1
         const ua = navigator.userAgent;
@@ -158,17 +156,21 @@
 
     // workaround for bug https://github.com/sveltejs/svelte/issues/5347
     // need to init duration & volume after SSR first load
-    function updateAudioAttributes(audio) {
-        if (audio && audio.duration) {
-            duration = audio.duration;
-            setVolume(volume);
+    // also workaround for bug https://github.com/sveltejs/svelte/issues/5914
+    $effect(() => {
+        if (!audio) return;
 
-            // workaround for bug https://github.com/sveltejs/svelte/issues/5914
-            audio.addEventListener('loadedmetadata', (event) => {
-                paused = audio.paused;
-            });
-        }
-    }
+        const onLoadedMetadata = () => {
+            duration = audio.duration;
+            paused = audio.paused;
+            setVolume(volume);
+        };
+
+        if (audio.duration) onLoadedMetadata();
+
+        audio.addEventListener('loadedmetadata', onLoadedMetadata);
+        return () => audio.removeEventListener('loadedmetadata', onLoadedMetadata);
+    });
 
     function updateSeekVisual(event) {
         if (!songBar) return;
@@ -186,9 +188,9 @@
     function formatSeconds(totalSeconds, forceHours = false) {
         if (isNaN(totalSeconds)) return 'No Data';
         totalSeconds = parseInt(totalSeconds, 10);
-        var hours = Math.floor(totalSeconds / 3600);
-        var minutes = Math.floor(totalSeconds / 60) % 60;
-        var seconds = totalSeconds % 60;
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor(totalSeconds / 60) % 60;
+        const seconds = totalSeconds % 60;
 
         return [hours, minutes, seconds]
             .map((v) => (v < 10 ? '0' + v : v))
@@ -219,32 +221,16 @@
         if (showTooltip && !disableTooltip) seekTooltip(event);
         if (volumeSeeking) seekVolume(event);
     }
-    run(() => {
-        if (ctx.songIndex != null) {
-            ctx.updateCurrentSong(currentTime, ctx.songIndex);
-        }
-    });
-    run(() => {
-        updateAudioAttributes(audio);
+
+    $effect(() => {
+        const time = currentTime;
+        untrack(() => {
+            if (ctx.songIndex != null) {
+                ctx.updateCurrentSong(time, ctx.songIndex);
+            }
+        });
     });
 
-    export {
-        src,
-        audio,
-        paused,
-        duration,
-        muted,
-        volume,
-        preload,
-        iconColor,
-        textColor,
-        barPrimaryColor,
-        barSecondaryColor,
-        backgroundColor,
-        display,
-        inlineTooltip,
-        disableTooltip
-    };
 </script>
 
 <svelte:window
@@ -342,7 +328,7 @@
     bind:currentTime
     {muted}
     onplay={setMediaMetadataOnPlay}
-    onended={bubble('ended')}
+    {onended}
     {preload}
 >
     {#if isSafari}