support media player api

svelte/src/filesystem/viewers/Audio.svelte

@@ -1,20 +1,64 @@
 <script>
 import { fs_get_file_url } from "../FilesystemAPI.svelte";
-import { createEventDispatcher } from 'svelte'
+import { createEventDispatcher, onMount } from 'svelte'
 let dispatch = createEventDispatcher()
 
-export let state;
+export let state
+let player
+let playing = false
+let media_session = false
+
+const toggle_play = () => playing ? player.pause() : player.play()
+
+// Detect when the song changes
+$: update_session_meta(state.base.name)
+
+const update_session_meta = name => {
+	if (media_session) {
+		navigator.mediaSession.metadata = new MediaMetadata({
+			title: name,
+			artist: "unknown",
+			album: "unknown",
+		});
+	}
+}
+
+onMount(() => {
+	if ('mediaSession' in navigator) {
+		media_session = true
+		update_session_meta(state.base.name)
+
+		navigator.mediaSession.setActionHandler('play', () => player.play());
+		navigator.mediaSession.setActionHandler('pause', () => player.pause());
+		navigator.mediaSession.setActionHandler('stop', () => player.stop());
+		navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("open_sibling", -1));
+		navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("open_sibling", 1));
+	}
+})
 </script>
 
 <div class="container">
-	{state.base.name}
+	<button on:click={() =>  dispatch("open_sibling", -1) }><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("open_sibling", 1) }><i class="icon">skip_next</i></button>
 	<br/><br/>
 	<audio
+		bind:this={player}
 		class="player"
 		src={fs_get_file_url(state.bucket.id, state.base.path)}
 		autoplay="autoplay"
 		controls="controls"
-		on:ended={() => { dispatch("next") }}>
+		on:pause={() => playing = false }
+		on:play={() => playing = true }
+		on:ended={() => dispatch("open_sibling", 1) }>
 		<track kind="captions"/>
 	</audio>
 </div>

svelte/src/filesystem/viewers/Video.svelte

@@ -12,7 +12,7 @@ export let state;
 		src={fs_get_file_url(state.bucket.id, state.base.path)}
 		autoplay="autoplay"
 		controls="controls"
-		on:ended={() => { dispatch("next") }}>
+		on:ended={() => { dispatch("open_sibling", 1) }}>
 		<track kind="captions"/>
 </video>
 </div>