From 0f6104f915aa8cb9b28bbc1469e6d0a1a16d58c1 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 18 Feb 2024 06:28:05 -0800
Subject: feat(hololive): filter

---
 src/lib/Hololive/Lives.svelte                  |  2 +
 src/routes/hololive/+page.svelte               | 80 -------------------------
 src/routes/hololive/[[stream]]/+page.server.ts |  5 ++
 src/routes/hololive/[[stream]]/+page.svelte    | 82 ++++++++++++++++++++++++++
 4 files changed, 89 insertions(+), 80 deletions(-)
 delete mode 100644 src/routes/hololive/+page.svelte
 create mode 100644 src/routes/hololive/[[stream]]/+page.server.ts
 create mode 100644 src/routes/hololive/[[stream]]/+page.svelte

diff --git a/src/lib/Hololive/Lives.svelte b/src/lib/Hololive/Lives.svelte
index 25d5b0dd..54ed0447 100644
--- a/src/lib/Hololive/Lives.svelte
+++ b/src/lib/Hololive/Lives.svelte
@@ -7,6 +7,7 @@
 	export let schedule: ParseResult;
 	export let pinnedStreams: string[];
 	export let getPinnedStreams: () => void;
+	export let filter: string | undefined;
 
 	const pinStream = (streamer: string) =>
 		fetch(root(`/api/preferences/pin?stream=${encodeURIComponent(streamer)}`), {
@@ -17,6 +18,7 @@
 		}).then(getPinnedStreams);
 
 	$: categorisedStreams = schedule.lives
+		.filter((live) => (filter ? live.streamer === filter : true))
 		.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime())
 		.sort((a, b) => {
 			const aPinned = pinnedStreams.includes(a.streamer);
diff --git a/src/routes/hololive/+page.svelte b/src/routes/hololive/+page.svelte
deleted file mode 100644
index 109fbc42..00000000
--- a/src/routes/hololive/+page.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import Message from '$lib/Loading/Message.svelte';
-	import Skeleton from '$lib/Loading/Skeleton.svelte';
-	import HeadTitle from '$lib/Home/HeadTitle.svelte';
-	import { parseScheduleHtml } from '$lib/Data/hololive';
-	import proxy from '$lib/Utility/proxy';
-	import locale from '$stores/locale';
-	import root from '$lib/Utility/root';
-	import identity from '$stores/identity';
-	import Lives from '$lib/Hololive/Lives.svelte';
-	import { typeSchedule } from '$lib/Hololive/hololive';
-
-	let schedulePromise: Promise<Response>;
-	let pinnedStreams: string[] = [];
-
-	onMount(() => getPinnedStreams());
-
-	const getPinnedStreams = () => {
-		let streams: string[] = [];
-
-		const setSchedule = () => {
-			pinnedStreams = streams;
-			schedulePromise = fetch(proxy('https://schedule.hololive.tv'), {
-				headers: {
-					Cookie: 'timezone=Asia/Tokyo'
-				}
-			});
-		};
-
-		if ($identity.id !== -2) {
-			fetch(root(`/api/preferences?id=${$identity.id}`)).then((response) => {
-				if (response.ok)
-					response.json().then((data) => {
-						if (data && data.pinned_hololive_streams) streams = data.pinned_hololive_streams;
-
-						setSchedule();
-					});
-			});
-
-			return;
-		}
-
-		setSchedule();
-	};
-</script>
-
-<HeadTitle route="hololive Schedule" path="/hololive" />
-
-{#await schedulePromise}
-	<Message message="Loading schedule ..." />
-
-	<Skeleton grid={true} count={100} width="49%" height="16.25em" />
-{:then scheduleResponse}
-	{#if scheduleResponse}
-		{#await scheduleResponse.text()}
-			<Message message="Parsing schedule ..." />
-
-			<Skeleton grid={true} count={100} width="49%" height="16.25em" />
-		{:then untypedSchedule}
-			{@const schedule = typeSchedule(parseScheduleHtml(untypedSchedule))}
-
-			<Lives {schedule} {pinnedStreams} {getPinnedStreams} />
-		{:catch}
-			<Message loader="ripple" slot>
-				{$locale().hololive.parseError}
-				<a href={'#'} on:click={() => location.reload()}>Try again?</a>
-			</Message>
-		{/await}
-	{:else}
-		<Message message="Loading schedule ..." />
-
-		<Skeleton grid={true} count={100} width="49%" height="16.25em" />
-	{/if}
-{:catch}
-	<Message loader="ripple" slot>
-		{$locale().hololive.loadError} Please
-		<a href={'#'} on:click={() => location.reload()}>try again</a> later.
-	</Message>
-{/await}
diff --git a/src/routes/hololive/[[stream]]/+page.server.ts b/src/routes/hololive/[[stream]]/+page.server.ts
new file mode 100644
index 00000000..87839c14
--- /dev/null
+++ b/src/routes/hololive/[[stream]]/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+	return {
+		stream: params.stream
+	};
+};
diff --git a/src/routes/hololive/[[stream]]/+page.svelte b/src/routes/hololive/[[stream]]/+page.svelte
new file mode 100644
index 00000000..777f1e70
--- /dev/null
+++ b/src/routes/hololive/[[stream]]/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Message from '$lib/Loading/Message.svelte';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import HeadTitle from '$lib/Home/HeadTitle.svelte';
+	import { parseScheduleHtml } from '$lib/Data/hololive';
+	import proxy from '$lib/Utility/proxy';
+	import locale from '$stores/locale';
+	import root from '$lib/Utility/root';
+	import identity from '$stores/identity';
+	import Lives from '$lib/Hololive/Lives.svelte';
+	import { typeSchedule } from '$lib/Hololive/hololive';
+
+	export let data;
+
+	let schedulePromise: Promise<Response>;
+	let pinnedStreams: string[] = [];
+
+	onMount(() => getPinnedStreams());
+
+	const getPinnedStreams = () => {
+		let streams: string[] = [];
+
+		const setSchedule = () => {
+			pinnedStreams = streams;
+			schedulePromise = fetch(proxy('https://schedule.hololive.tv'), {
+				headers: {
+					Cookie: 'timezone=Asia/Tokyo'
+				}
+			});
+		};
+
+		if ($identity.id !== -2) {
+			fetch(root(`/api/preferences?id=${$identity.id}`)).then((response) => {
+				if (response.ok)
+					response.json().then((data) => {
+						if (data && data.pinned_hololive_streams) streams = data.pinned_hololive_streams;
+
+						setSchedule();
+					});
+			});
+
+			return;
+		}
+
+		setSchedule();
+	};
+</script>
+
+<HeadTitle route="hololive Schedule" path="/hololive" />
+
+{#await schedulePromise}
+	<Message message="Loading schedule ..." />
+
+	<Skeleton grid={true} count={100} width="49%" height="16.25em" />
+{:then scheduleResponse}
+	{#if scheduleResponse}
+		{#await scheduleResponse.text()}
+			<Message message="Parsing schedule ..." />
+
+			<Skeleton grid={true} count={100} width="49%" height="16.25em" />
+		{:then untypedSchedule}
+			{@const schedule = typeSchedule(parseScheduleHtml(untypedSchedule))}
+
+			<Lives {schedule} {pinnedStreams} {getPinnedStreams} filter={data.stream} />
+		{:catch}
+			<Message loader="ripple" slot>
+				{$locale().hololive.parseError}
+				<a href={'#'} on:click={() => location.reload()}>Try again?</a>
+			</Message>
+		{/await}
+	{:else}
+		<Message message="Loading schedule ..." />
+
+		<Skeleton grid={true} count={100} width="49%" height="16.25em" />
+	{/if}
+{:catch}
+	<Message loader="ripple" slot>
+		{$locale().hololive.loadError} Please
+		<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+	</Message>
+{/await}
-- 
cgit v1.2.3