From 76fda1260422d542ea101a911701f032bb4877e1 Mon Sep 17 00:00:00 2001
From: apt-get <me@apt-get.xyz>
Date: Fri, 19 Jan 2024 02:08:52 +0100
Subject: [PATCH] start back button, other random fixes

---
 scripts/generate_iconfont_subset.sh           |   1 +
 src/lib/stores.js                             |  12 --------
 src/routes/+layout.svelte                     |   2 --
 src/routes/+page.svelte                       |   4 +++
 src/routes/streams/+page.svelte               |   4 +++
 src/routes/streams/WelcomePage.svelte         |  12 ++++++--
 src/routes/streams/[stream_id]/Player.svelte  |  28 ++++++++++++++++--
 .../streams/[stream_id]/StreamPage.svelte     |  13 ++++++++
 .../fonts/MaterialIcons-Regular-subset.woff2  | Bin 1012 -> 1080 bytes
 9 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/scripts/generate_iconfont_subset.sh b/scripts/generate_iconfont_subset.sh
index 12e7186..fa647ec 100755
--- a/scripts/generate_iconfont_subset.sh
+++ b/scripts/generate_iconfont_subset.sh
@@ -17,6 +17,7 @@ unicodePoints=(
 	"e01f"     # fast_forward
 	"e83a"     # star_border
 	"e838"     # star
+	"e31b"     # keyboard_return
 )
 unicodeStr=$(
 	IFS=,
diff --git a/src/lib/stores.js b/src/lib/stores.js
index e8a2d0c..297eb2e 100644
--- a/src/lib/stores.js
+++ b/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 = [
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1a05bcf..4ef93cd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -50,8 +50,6 @@
 			color: white;
 		}
 	</style>
-
-	<title>apt-get's auditorium</title>
 </svelte:head>
 
 <slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a686f39..0430874 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,3 +6,7 @@
 		goto('/streams/');
 	}
 </script>
+
+<svelte:head>
+	<title>apt-get's auditorium</title>
+</svelte:head>
diff --git a/src/routes/streams/+page.svelte b/src/routes/streams/+page.svelte
index 9c8e1f6..915c24d 100644
--- a/src/routes/streams/+page.svelte
+++ b/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>
diff --git a/src/routes/streams/WelcomePage.svelte b/src/routes/streams/WelcomePage.svelte
index 81c3dc5..8dbac31 100644
--- a/src/routes/streams/WelcomePage.svelte
+++ b/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>
diff --git a/src/routes/streams/[stream_id]/Player.svelte b/src/routes/streams/[stream_id]/Player.svelte
index e8d092e..fe6c26e 100644
--- a/src/routes/streams/[stream_id]/Player.svelte
+++ b/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}
diff --git a/src/routes/streams/[stream_id]/StreamPage.svelte b/src/routes/streams/[stream_id]/StreamPage.svelte
index eeb9094..a5cf3bd 100644
--- a/src/routes/streams/[stream_id]/StreamPage.svelte
+++ b/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;
diff --git a/static/fonts/MaterialIcons-Regular-subset.woff2 b/static/fonts/MaterialIcons-Regular-subset.woff2
index acd3da01de36b42d2eab074fcbc7e98fd2af79e2..26ef693b88dd818e5fdf3347ecc3d018a60523c0 100644
GIT binary patch
delta 1067
zcmV+`1l0TV2e=3rcTYw#00961000Cy01p5F000V9000Bykr*C-Y6f5cd<X;)2nvWG
zgnI!t0we=a3s3+AAO(VY2Ot|<2S6?dY$DTxs}OZYc3GB1EG^1{&-(AygcsCN5j?*?
zzB%`s4GHkd>1~yhBP-Z9T8W{m?MBC+pZ~dR?<d*pUC)(Tp*vLR-M6k3gF;x0N1;G?
z9PGimn!UY;nv4X0Ee>>g2o-FOjPK4Qg>soOL|Hq^845sMEY<&W%ydy$z$KVudp`YJ
z|M%C0*%*D-II^>BE!^{?BWaNXv3qB0$fiGGRTg)L@YA_c0V)9`42d97IShevHVy#%
zFL70Lblao>cLK<B1c+m2aw)ij06`ESm{4SClrcIB-h+{U(lYEU>?ER5f}HFWMiXVj
zc=-^W;t|AnXo!&IB!zJ*ew2sg<LBXAAs!VMWK1F<&ng%LGDy56ppa+ft4MQ_5{4|w
z5i%t9{ga)>L^D(D{2V0W=aOQH?ycx_NmfON&-BeFx^3^K`VyUui&ub1psR`?Hj@Nk
zo%{{Ucp=e$3IIUV0swH<j$bnrKmrH=(5?a!C;*K(0*!<tpqau+n;bveo^qcGo?5;?
z|3qF3UyGdv*ntnF#`nT_H6;ELzaw5E?!vfX9xeX^K7rV8d|j*th}=K|bON>lL*NO~
z0iYB>G$td`qQJ4}Is*!v3&CZUtI86alM%YrVp`IFK8N#|Cpv%VMX?kR`|9{urWeTw
zi|}CxS$!(!Fj2l;oLGJ|Mz?zxpg#n$E^K#xb|YWnp|8HYvBNvVwjX%cJUmB--;#vi
z&)$81(hjygbA%US#bE{5vLZnyVLs#>>19bA$MDNe{DlOD0S}5fvH4)p#xwiPb4;rt
z`DT`XjBlU0WO%>%yH<C25mzXPatR($QNq|+`NxY3a>elwaNb+FI6WW|ZGBYKw~N7;
zAbL9XLyy2#I{F*G`YL_ek7_gMzwcunXvZMqS^1sX2LO&I^*;wCuk6^^-0)5^*cQJ|
zFDT9=rz9u6&zK<VIKa)rDIKdD8t%`S{oXr&CkTuy&)cGBkBb&;E`Hz(K8*L5znaYO
zWz?6k-C{BT003X?ZW8Ey`kDX;5QQt}zNfF7&eCO*nF09zW)k2>`S#rSH~ttg4k*O{
z0SS=g8O9P2(}PGror5wR?mJ@EQj;j9te!w;+|mk2AP`uR4xq#e6cw5QJHbdwqPC=e
zjKhtTn=v#iSW->c*ISXwenm^i&OlB|#w1c(Q%kR;L0Vc;Dq^XUhG__;OB$e}5^3g6
zGLBK~T`gu{AtsV;9G@wM@=mH*KnhwKM*dM!W-5FJ^>H$JP~%eKXTiD(lln)W%gkx*
lQq!TfgLt0>e%wgT1EJP@%UgQHCc8)qd#*T?>B=u)1OP=D;T-?~

delta 998
zcmV<C0~!3d2=oUScTYw#00961000B@01p5F000T}000A?kr*C-LIz*}bO;0y2nvUA
zgj@kO0we=Y3r+w8AO(VY2Ot{@2SAR(wt15!lS@o~B-3$3L@is-5@UJPDT2lQJEG*V
z(V`IMUm?jtC1WrS6pnKwjb5L=Eqz~r6^{v2EG7!<lvGUY)ag;>W`0ZdkNc^M!VkVA
z7}?IJZ&7icjoCPVvRTroEDCTf9t8^1P1dt35s`4!{oTJ!z%+n@BEk^iI-&@eWa9u3
zFey?Da^82sD41}d`UK=+#L&Sofq>vR2os_W=TK#wZ75ND9oSjei3ov9Fef_~N)XP5
z@)v-RxcCW1`4Lc}aFHzRs89su$B#>}2m&gQKM^I0)QMGp0Ll-+xcCu>{B*=KGG5Uy
zQ`BhB%*8H{gNO*^){Z6G-9;i%SViKn(E&yBn_Aa;1SfIx7lap(8wiknG6=9`-P^wq
z3!o5&06^xUmp#z?JF5UF0096iqCo*eU>QTeGOiC;=E88jO>5;grA==eK0f%~{LZQs
zNBYJIwU1eUAANh}R{4|sCBH`;1$_<r1EJquNC_adDu4#C4>rI{DfsdF=Rs2$5j)4c
zDx(aHan3{sbJ--DVdj!WnIt_1YpR85gRRukfW<BT$QG-Y>X!a<D#*dJypI;-9S-c8
zcO``!j@F@1606>K?$fk9d1B6L-1e$D{!M7{;4f%@@K`06pCx6z`PhDwdF`;Bsk)U|
z;XUx`UazL9+91{)L|0WHX#7O|p_b+T#jd^s2}IO`7Ns4(oKZOT@aYW1u#PrtnBK-{
za(=dP!uX919ewDqV;cC58IL9x4j6Fky7ghqWnaTs160o$7+OF*kepTfEv9R49#RtD
z{pYcN8Z%3dH$EWhRm4jO40X&mjAYR5NV&?XJdrfW&3}?HtREE})$Q{JC24bd!?${V
zefy2$2W+urujnv>4SsL<F4f2T8)dmYr4AYa0Rd?{o=*ZiMGgr72*|L}_S!nAw=?IT
z$xH!!9N3!<@EP^?ptkv1DWME7jsgM&P~=g6z78Oi4N`ywm(erFal>s?pulj^q7l$!
zH-Z5L1OZ)f0LB;?GHeDMgGVL8^`TM@GpJ0HWyKst6@+?yE21d>6&r1gsm2*<upuT;
zBuS7cgQDDMqYXB~Krs}RM(Hn(qR<E<D4J%<#{2UPG~PhtOft{_accE7A?6;cuMw+7
z0J}#UWjx+8*u*%wuW`y`6D;s;gALq^Bu)@TR`zT0G0~}FC5x@VmPyCk#v6(QmL;y&
UIZ--`xQ*C-*)Yng&PNge0N>ZYvH$=8