svelte5 migration, formatting cleanup

src/routes/streams/[stream_id]/+page.svelte

@@ -1,53 +1,61 @@
-<script>
-	import StreamPage from './StreamPage.svelte';
-	import MetadataEditor from './MetadataEditor.svelte';
-	import Player from './Player.svelte';
-	import { dev } from '$app/environment';
-	import { currentStream, updateCurrentStream } from '$lib/stores.js';
+<script lang="ts">
+    import { run } from 'svelte/legacy';
 
-	export let data;
-	$: updateCurrentStream(data.stream);
+    import StreamPage from './StreamPage.svelte';
+    import MetadataEditor from './MetadataEditor.svelte';
+    import Player from './Player.svelte';
+    import { dev } from '$app/environment';
+    import { currentStream, updateCurrentStream } from '$lib/stores.js';
+
+    let { data } = $props();
+
+    run(() => {
+        updateCurrentStream(data.stream);
+    });
 </script>
 
 <div id="streamContainer">
-	<div id="streamPage" class="panel">
-		{#if dev}
-			<MetadataEditor {...data} />
-		{/if}
-		<StreamPage />
-	</div>
-	<div id="player">
-		{#key $currentStream}
-			<Player display={true} src="/media/tracks/{$currentStream.filename}" />
-		{/key}
-	</div>
+    <div id="streamPage" class="panel">
+        {#if dev}
+            <MetadataEditor {...data} />
+        {/if}
+        <StreamPage />
+    </div>
+    <div id="player">
+        {#key $currentStream}
+            <Player display={true} src="/media/tracks/{$currentStream.filename}" />
+        {/key}
+    </div>
 </div>
 
 <style>
-	#streamContainer {
-		display: grid;
-		grid-template-rows: 1fr auto;
-		height: 100%;
-		gap: 0.5em;
-	}
+    #streamContainer {
+        display: grid;
+        grid-template-rows: 1fr auto;
+        height: 100%;
+        gap: 0.5em;
+    }
 
-	#streamPage {
-		grid-row: 1 / 2;
-		overflow: auto;
-		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
-	}
+    #streamPage {
+        grid-row: 1 / 2;
+        overflow: auto;
+        background:
+            local url('/assets/result.png') top right / 50% no-repeat,
+            rgba(0, 0, 0, 0.8);
+    }
 
-	#player {
-		grid-row: 2 / 3;
-		margin-left: 1px;
-		margin-right: 1px;
-		height: 100%;
-	}
+    #player {
+        grid-row: 2 / 3;
+        margin-left: 1px;
+        margin-right: 1px;
+        height: 100%;
+    }
 
-	@media (max-width: 575px) {
-		#streamPage {
-			background: local url('/assets/result.png') top right / 80% no-repeat,
-				rgba(0, 0, 0, 0.8);
-		}
-	}
+    @media (max-width: 575px) {
+        #streamPage {
+            background:
+                local url('/assets/result.png') top right / 80% no-repeat,
+                rgba(0, 0, 0, 0.8);
+        }
+    }
 </style>