remove legacy svelte 4 elements in Player

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';
+    import { onMount, untrack } from 'svelte';
-
-    const bubble = createBubbler();
-    import { onMount, onDestroy } 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) {
+    // also workaround for bug https://github.com/sveltejs/svelte/issues/5914
-        if (audio && audio.duration) {
+    $effect(() => {
-            duration = audio.duration;
+        if (!audio) return;
-            setVolume(volume);
 
-            // workaround for bug https://github.com/sveltejs/svelte/issues/5914
+        const onLoadedMetadata = () => {
-            audio.addEventListener('loadedmetadata', (event) => {
+            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);
+        const hours = Math.floor(totalSeconds / 3600);
-        var minutes = Math.floor(totalSeconds / 60) % 60;
+        const minutes = Math.floor(totalSeconds / 60) % 60;
-        var seconds = totalSeconds % 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(() => {
+
+    $effect(() => {
+        const time = currentTime;
+        untrack(() => {
             if (ctx.songIndex != null) {
-            ctx.updateCurrentSong(currentTime, ctx.songIndex);
+                ctx.updateCurrentSong(time, ctx.songIndex);
             }
         });
-    run(() => {
-        updateAudioAttributes(audio);
     });
 
-    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}