Update to svelte 5

svelte/src/filesystem/viewers/Video.svelte

@@ -5,16 +5,18 @@ import { fs_path_url } from "lib/FilesystemAPI";
 import type { FSNavigator } from "filesystem/FSNavigator";
 let dispatch = createEventDispatcher()
 
-export let nav: FSNavigator
+let { nav }: {
+	nav: FSNavigator;
+} = $props();
 
 // Used to detect when the file path changes
 let last_path = ""
-let loaded = false
+let loaded = $state(false)
 
-let player: HTMLVideoElement
-let playing = false
+let player: HTMLVideoElement = $state()
+let playing = $state(false)
 let media_session = false
-let loop = false
+let loop = $state(false)
 
 export const update = async () => {
 	if (media_session) {
@@ -85,8 +87,7 @@ const video_keydown = (e: KeyboardEvent) => {
 	{#if
 		$nav.base.file_type === "video/x-matroska" ||
 		$nav.base.file_type === "video/quicktime" ||
-		$nav.base.file_type === "video/x-ms-asf"
-	}
+		$nav.base.file_type === "video/x-ms-asf"}
 		<div class="compatibility_warning">
 			This video file type is not compatible with every web
 			browser. If the video fails to play you can try downloading
@@ -96,7 +97,7 @@ const video_keydown = (e: KeyboardEvent) => {
 	<div class="player_and_controls">
 		<div class="player">
 			{#if loaded}
-				<!-- svelte-ignore a11y-media-has-caption -->
+				<!-- svelte-ignore a11y_media_has_caption -->
 				<video
 					bind:this={player}
 					controls
@@ -104,9 +105,9 @@ const video_keydown = (e: KeyboardEvent) => {
 					autoplay
 					loop={loop}
 					class="video"
-					on:pause={() => playing = false }
-					on:play={() => playing = true }
-					on:keydown={video_keydown}
+					onpause={() => playing = false}
+					onplay={() => playing = true}
+					onkeydown={video_keydown}
 					use:video_position={() => $nav.base.sha256_sum.substring(0, 8)}
 				>
 					<source src={fs_path_url($nav.base.path)} type={$nav.base.file_type} />
@@ -116,34 +117,34 @@ const video_keydown = (e: KeyboardEvent) => {
 
 		<div class="controls">
 			<div class="spacer"></div>
-			<button on:click={() => dispatch("open_sibling", -1) }>
+			<button onclick={() => dispatch("open_sibling", -1)}>
 				<i class="icon">skip_previous</i>
 			</button>
-			<button on:click={() => seek(-10)}>
+			<button onclick={() => seek(-10)}>
 				<i class="icon">replay_10</i>
 			</button>
-			<button on:click={toggle_playback} class="button_highlight">
+			<button onclick={toggle_playback} class="button_highlight">
 				{#if playing}
 					<i class="icon">pause</i>
 				{:else}
 					<i class="icon">play_arrow</i>
 				{/if}
 			</button>
-			<button on:click={() => seek(10)}>
+			<button onclick={() => seek(10)}>
 				<i class="icon">forward_10</i>
 			</button>
-			<button on:click={() => dispatch("open_sibling", 1) }>
+			<button onclick={() => dispatch("open_sibling", 1)}>
 				<i class="icon">skip_next</i>
 			</button>
 			<div style="width: 16px; height: 8px;"></div>
-			<button on:click={toggle_mute} class:button_red={player && player.muted}>
+			<button onclick={toggle_mute} class:button_red={player && player.muted}>
 				{#if player && player.muted}
 					<i class="icon">volume_off</i>
 				{:else}
 					<i class="icon">volume_up</i>
 				{/if}
 			</button>
-			<button on:click={toggle_fullscreen}>
+			<button onclick={toggle_fullscreen}>
 				<i class="icon">fullscreen</i>
 			</button>
 			<div class="spacer"></div>