start back button, other random fixes

src/lib/stores.js

@@ -12,18 +12,6 @@ if (browser) {
 	favoritedStreams.subscribe((val) => {
 		localStorage.setItem('favoritedStreams', JSON.stringify(Array.from(val)));
 	});
-
-	if ('mediaSession' in navigator) {
-		currentSongIndex.subscribe((val) => {
-			if (val != null) {
-				const song = get(currentStream).tracks[val];
-				navigator.mediaSession.metadata = new MediaMetadata({
-					artist: song[1],
-					title: song[2]
-				});
-			}
-		});
-	}
 }
 
 export const tagList = [

src/routes/+layout.svelte

@@ -50,8 +50,6 @@
 			color: white;
 		}
 	</style>
-
-	<title>apt-get's auditorium</title>
 </svelte:head>
 
 <slot />

src/routes/+page.svelte

@@ -6,3 +6,7 @@
 		goto('/streams/');
 	}
 </script>
+
+<svelte:head>
+	<title>apt-get's auditorium</title>
+</svelte:head>

src/routes/streams/+page.svelte

@@ -2,6 +2,10 @@
 	import WelcomePage from './WelcomePage.svelte';
 </script>
 
+<svelte:head>
+	<title>apt-get's auditorium</title>
+</svelte:head>
+
 <div id="welcome-page" class="panel"><WelcomePage /></div>
 
 <style>

src/routes/streams/WelcomePage.svelte

@@ -4,10 +4,10 @@
 </div>
 
 <div class="description-bubble">
-	<p>Hello, there, welcome to V1.</p>
+	<p>Hello, there, welcome to V1.5.</p>
 	<p>
-		Still in construction. No responsive design yet, so phones will be hard to use, but that's
-		coming, too!
+		Still in construction. The design is responsive now, so phones should work well enough!
+		Needs touch events though.
 	</p>
 	<p>
 		There's gonna be an update feed soon (with RSS, too), but for now, just check the most
@@ -15,6 +15,12 @@
 		in the back-catalog.
 	</p>
 
+	<p>
+		Also, event sets of mine are available <a href="https://apt-get.xyz/music/">right here</a>.
+		They've got visuals alongside and are proper DJ mixes, which makes them rather different
+		from the usual streams. They should live under this subdomain soon enough too!
+	</p>
+
 	<p style="font-size: smaller">
 		Mascot drawn by <a href="https://twitter.com/yuuybee/">yuuybee</a>.
 	</p>

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;