Implement most of the file viewer in svelte

svelte/src/file_viewer/viewers/Audio.svelte

@@ -0,0 +1,106 @@
+<script>
+import { onMount,  createEventDispatcher, tick } from "svelte";
+let dispatch = createEventDispatcher()
+
+export let file = {
+	id: "",
+	name: "",
+	mime_type: "",
+	get_href: "",
+}
+
+$: loop = file.name.includes(".loop.")
+
+let player
+let playing = false
+let audio_reload = false
+let media_session = false
+
+$: update_file(file.id)
+const update_file = async () => {
+	if (media_session) {
+		navigator.mediaSession.metadata = new MediaMetadata({
+			title: file.name,
+			artist: "pixeldrain",
+			album: "unknown",
+		});
+		console.log("updating media session")
+	}
+
+	// When the component receives a new ID the video track does not automatically
+	// start playing the new video. So we use this little hack to make sure that the
+	// video is unloaded and loaded when the ID changes
+	audio_reload = true
+	await tick()
+	audio_reload = false
+}
+
+const toggle_play = () => playing ? player.pause() : player.play()
+
+onMount(() => {
+	if ('mediaSession' in navigator) {
+		media_session = true
+		navigator.mediaSession.setActionHandler('play', () => player.play());
+		navigator.mediaSession.setActionHandler('pause', () => player.pause());
+		navigator.mediaSession.setActionHandler('stop', () => player.stop());
+		navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("prev", {}));
+		navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("next", {}));
+		update_file()
+	}
+})
+
+</script>
+
+<div class="container">
+	<button on:click={() => dispatch("prev") }>
+		<i class="icon">skip_previous</i>
+	</button>
+	<button on:click={() => player.currentTime -= 10 }>
+		<i class="icon">replay_10</i>
+	</button>
+	<button on:click={toggle_play}>
+		{#if playing}
+			<i class="icon">pause</i>
+		{:else}
+			<i class="icon">play_arrow</i>
+		{/if}
+	</button>
+	<button on:click={() => player.currentTime += 10 }>
+		<i class="icon">forward_10</i>
+	</button>
+	<button on:click={() => dispatch("next") }>
+		<i class="icon">skip_next</i>
+	</button>
+	<br/><br/>
+
+	{#if !audio_reload}
+		<!-- svelte-ignore a11y-media-has-caption -->
+		<audio
+			bind:this={player}
+			class="player"
+			controls
+			playsinline
+			autoplay
+			loop={loop}
+			on:pause={() => playing = false }
+			on:play={() => playing = true }
+			on:ended={() => {dispatch("next", {})}}
+		>
+			<source src={file.get_href} type={file.mime_type} />
+		</audio>
+	{/if}
+</div>
+
+<style>
+.container {
+	height: 100%;
+	width: 100%;
+	margin: 50px 0 0 0;
+	padding: 0;
+	overflow-y: auto;
+	text-align: center;
+}
+.player {
+	width: 90%;
+}
+</style>