feat(hololive): stream pinning

4 files changed, 118 insertions, 3 deletions

diff --git a/src/lib/Database/userConfiguration.ts b/src/lib/Database/userConfiguration.ts
index 3a01411e..f1e3ef95 100644
--- a/src/lib/Database/userConfiguration.ts
+++ b/src/lib/Database/userConfiguration.ts
@@ -2,14 +2,16 @@ import supabase from './supabase';
 
 interface UserConfiguration {
 	user_id: number;
-	configuration: JSON;
+	configuration: object;
 	created_at: string;
 	updated_at: string;
+	pinned_hololive_streams: string[];
 }
 
 interface NewUserConfiguration {
-	configuration: JSON;
+	configuration: object;
 	updated_at?: string;
+	pinned_hololive_streams?: string[];
 }
 
 export const getUserConfiguration = async (userId: number) => {
@@ -24,13 +26,17 @@ export const getUserConfiguration = async (userId: number) => {
 };
 
 export const setUserConfiguration = async (userId: number, configuration: NewUserConfiguration) => {
+	const userConfiguration = await getUserConfiguration(userId);
 	const { data, error } = await supabase
 		.from('user_configuration')
 		.upsert(
 			{
 				user_id: userId,
 				configuration: configuration.configuration,
-				updated_at: configuration.updated_at || new Date().toISOString()
+				updated_at: configuration.updated_at || new Date().toISOString(),
+				pinned_hololive_streams:
+					configuration.pinned_hololive_streams ||
+					(userConfiguration ? userConfiguration.pinned_hololive_streams : [])
 			},
 			{ onConflict: 'user_id' }
 		)
@@ -40,3 +46,21 @@ export const setUserConfiguration = async (userId: number, configuration: NewUse
 
 	return data[0].configuration as UserConfiguration;
 };
+
+export const toggleHololiveStreamPinning = async (userId: number, streamId: string) => {
+	const userConfiguration = await getUserConfiguration(userId);
+
+	if (!userConfiguration) return null;
+
+	const pinnedStreams = userConfiguration.pinned_hololive_streams;
+	const index = pinnedStreams.indexOf(streamId);
+
+	if (index === -1) pinnedStreams.push(streamId);
+	else pinnedStreams.splice(index, 1);
+
+	return setUserConfiguration(userId, {
+		configuration: userConfiguration.configuration,
+		updated_at: new Date().toISOString(),
+		pinned_hololive_streams: pinnedStreams
+	});
+};
diff --git a/src/lib/websocket.ts b/src/lib/websocket.ts.bak
index 28557415..28557415 100644
--- a/src/lib/websocket.ts
+++ b/src/lib/websocket.ts.bak
diff --git a/src/routes/api/configuration/pin/+server.ts b/src/routes/api/configuration/pin/+server.ts
new file mode 100644
index 00000000..f813d8e8
--- /dev/null
+++ b/src/routes/api/configuration/pin/+server.ts
@@ -0,0 +1,32 @@
+import { userIdentity } from '$lib/Data/AniList/identity';
+import { toggleHololiveStreamPinning } from '$lib/Database/userConfiguration';
+
+const unauthorised = new Response('Unauthorised', { status: 401 });
+
+export const PUT = async ({ cookies, url }) => {
+	const userCookie = cookies.get('user');
+
+	if (!userCookie) return unauthorised;
+
+	const user = JSON.parse(userCookie);
+
+	return Response.json(
+		await toggleHololiveStreamPinning(
+			(
+				await userIdentity({
+					tokenType: user['token_type'],
+					expiresIn: user['expires_in'],
+					accessToken: user['access_token'],
+					refreshToken: user['refresh_token']
+				})
+			).id,
+			url.searchParams.get('stream') || ''
+		),
+		{
+			headers: {
+				method: 'PUT',
+				'Access-Control-Allow-Origin': 'https://due.moe'
+			}
+		}
+	);
+};
diff --git a/src/routes/hololive/+page.svelte b/src/routes/hololive/+page.svelte
index d30766b9..aace56a3 100644
--- a/src/routes/hololive/+page.svelte
+++ b/src/routes/hololive/+page.svelte
@@ -6,6 +6,9 @@
 	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 Icon from '@iconify/svelte';
 
 	interface ParseResult {
 		lives: {
@@ -21,6 +24,17 @@
 	}
 
 	let schedulePromise: Promise<Response>;
+	let pinnedStreams: string[] = [];
+
+	$: {
+		pinnedStreams = pinnedStreams;
+
+		schedulePromise = fetch(proxy('https://schedule.hololive.tv'), {
+			headers: {
+				Cookie: 'timezone=Asia/Tokyo'
+			}
+		});
+	}
 
 	onMount(async () => {
 		schedulePromise = fetch(proxy('https://schedule.hololive.tv'), {
@@ -28,9 +42,29 @@
 				Cookie: 'timezone=Asia/Tokyo'
 			}
 		});
+
+		getPinnedStreams();
 	});
 
+	const getPinnedStreams = () => {
+		if ($identity.id !== -2)
+			fetch(root(`/api/configuration?id=${$identity.id}`)).then((response) => {
+				if (response.ok)
+					response.json().then((data) => {
+						if (data && data.configuration) pinnedStreams = data.pinned_hololive_streams;
+					});
+			});
+	};
+
 	const typeSchedule = (schedule: any) => schedule as ParseResult;
+
+	const pinStream = (streamer: string) =>
+		fetch(root(`/api/configuration/pin?stream=${encodeURIComponent(streamer)}`), {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		}).then(getPinnedStreams);
 </script>
 
 <HeadTitle route="hololive Schedule" path="/hololive" />
@@ -60,6 +94,12 @@
 						return time.getTime() > Date.now() - 12 * 60 * 60 * 1000 || time.getTime() > Date.now() || live.streaming;
 					})
 					.sort((a, b) => {
+						if (pinnedStreams.includes(a.streamer) && a.streaming) {
+							return -1;
+						} else if (pinnedStreams.includes(b.streamer) && b.streaming) {
+							return 1;
+						}
+
 						if (a.streaming && !b.streaming) {
 							return -1;
 						} else if (!a.streaming && b.streaming) {
@@ -77,6 +117,18 @@
 						return aTime - new Date(b.time).getTime();
 					}) as live}
 					<div class="stream card">
+						{#if $identity.id !== -2}
+							<div class="pin-icon">
+								<a href={'#'} on:click={() => pinStream(live.streamer)}>
+									<Icon
+										icon={`pajamas:thumbtack${
+											pinnedStreams.includes(live.streamer) ? '-solid' : ''
+										}`}
+									/>
+								</a>
+							</div>
+						{/if}
+
 						<p>
 							[{#if live.streaming}
 								<b class="live">{$locale().hololive.live}</b
@@ -167,4 +219,11 @@
 		grid-template-columns: repeat(auto-fill, minmax(22.5em, 1fr));
 		gap: 0.5em;
 	}
+
+	.pin-icon {
+		position: absolute;
+		right: 0;
+		top: 0;
+		padding: 0.75rem;
+	}
 </style>