start back button, other random fixes

src/routes/streams/[stream_id]/Player.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <script>
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import {
 		currentSongIndex,
@@ -58,9 +58,19 @@
 	let innerHeight;
 
 	onMount(async () => {
+		// default volume
 		const volumeData = localStorage.getItem('volume');
 		volume = volumeData ? parseFloat(volumeData) : 0.67;
 		setVolume(volume);
+
+		// update browser metadata on track changes
+		if ('mediaSession' in navigator) {
+			currentSongIndex.subscribe((val) => {
+				if (val != null && !paused) {
+					setMediaMetadata($currentStream.tracks[val]);
+				}
+			});
+		}
 	});
 
 	$: updateCurrentSong(currentTime, $currentSongIndex);
@@ -81,6 +91,20 @@
 		}
 	}
 
+	function setMediaMetadata(track) {
+		navigator.mediaSession.metadata = new MediaMetadata({
+			artist: track[1],
+			title: track[2]
+		});
+	}
+
+	// browsers don't like if you update this while no media is playing
+	function setMediaMetadataOnPlay() {
+		if ('mediaSession' in navigator) {
+			setMediaMetadata($currentStream.tracks[$currentSongIndex]);
+		}
+	}
+
 	// workaround for bug https://github.com/sveltejs/svelte/issues/5347
 	// need to init duration & volume after SSR first load
 	function updateAudioAttributes(audio) {
@@ -229,7 +253,7 @@
 	bind:currentTime
 	{muted}
 	{volume}
-	on:play
+	on:play={setMediaMetadataOnPlay}
 	on:ended
 	{src}
 	{preload}