feat: currently playing + volume + seek position + toggle pause

src/routes/+layout.svelte

@@ -5,8 +5,17 @@
 	import AppSidebar from '$lib/components/groove/AppSidebar.svelte';
 	import Footer from '$lib/components/groove/Footer.svelte';
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
+	import { getPlayerState, setPlayerState } from '$lib/player.svelte';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
+
+	setPlayerState();
+	const player = getPlayerState();
+
+	onMount(() => {
+		return () => player.abort();
+	});
 </script>
 
 <ModeWatcher />

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const ssr = false;

src/routes/player/+page.server.ts

@@ -1,4 +1,5 @@
 import { PlayerClient } from '$lib/proto/player.client';
+import { fail } from '@sveltejs/kit';
 import { protoTransport } from '../../hooks.server';
 import type { Actions } from './$types';
 
@@ -6,11 +7,55 @@ export const actions = {
 	resume: async () => {
 		const client = new PlayerClient(protoTransport);
 
-		await client.resumeTrack({});
+		const response = await client.resumeTrack({});
+
+		return {
+			isPaused: response.response.isPaused
+		};
 	},
 	pause: async () => {
 		const client = new PlayerClient(protoTransport);
 
-		await client.pauseTrack({});
+		const response = await client.pauseTrack({});
+
+		return {
+			isPaused: response.response.isPaused
+		};
+	},
+	seek: async ({ request }) => {
+		const formData = await request.formData();
+
+		const position = formData.get('position')?.toString();
+
+		if (!position) {
+			return fail(400);
+		}
+
+		const client = new PlayerClient(protoTransport);
+
+		const response = await client.seekPosition({ position: BigInt(position) });
+
+		return {
+			position: response.response.position
+		};
+	},
+	volume: async ({ request }) => {
+		const formData = await request.formData();
+
+		const volume = formData.get('volume')?.toString();
+
+		if (!volume) {
+			return fail(400);
+		}
+
+		const client = new PlayerClient(protoTransport);
+
+		const response = await client.setVolume({
+			volume: parseFloat(volume)
+		});
+
+		return {
+			volume: response.response.volume
+		};
 	}
 } satisfies Actions;

src/routes/songs/[hash]/+page.server.ts

@@ -1,13 +1,22 @@
 import { PlayerClient } from '$lib/proto/player.client';
+import { fail } from '@sveltejs/kit';
 import { protoTransport } from '../../../hooks.server';
 import type { Actions } from './$types';
+import { serializable } from '$lib/proto';
+import type { PlayTrackResponse } from '$lib/proto/player';
 
 export const actions = {
 	play: async ({ params }) => {
 		const client = new PlayerClient(protoTransport);
 
-		await client.playTrack({
+		const response = await client.playTrack({
 			hash: params.hash
 		});
+
+		if (response.response.track === undefined) {
+			return fail(500);
+		}
+
+		return serializable<PlayTrackResponse>(response.response);
 	}
 } satisfies Actions;