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}

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

@@ -3,6 +3,7 @@
 	import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
 	import { jumpToTrack } from './Player.svelte';
 	import { Carta } from 'carta-md';
+	import { goto } from '$app/navigation';
 	import DOMPurify from 'isomorphic-dompurify';
 
 	const carta = new Carta({
@@ -17,6 +18,7 @@
 </svelte:head>
 
 <div class="stream-information">
+	<!-- <div class="back-button material-icons" on:click={() => goto('/streams/')}>keyboard_return</div> -->
 	<div class="stream-information-flexbox">
 		<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
 		<h1 class="stream-date">{formattedStreamDate}</h1>
@@ -179,6 +181,17 @@
 		border: 0;
 	}
 
+	.back-button {
+		opacity: 0.75;
+		border: 1px solid white;
+		transform: rotateX(180deg);
+	}
+
+	.back-button:hover {
+		opacity: 1;
+		border: 1px solid white;
+	}
+
 	@media (max-width: 575px) {
 		.material-icons {
 			opacity: 0.5;