refactor(hololive): move lives to component

1 files changed, 167 insertions, 0 deletions

diff --git a/src/lib/Hololive/Lives.svelte b/src/lib/Hololive/Lives.svelte
new file mode 100644
index 00000000..9c5b6b04
--- /dev/null
+++ b/src/lib/Hololive/Lives.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+	import Message from '$lib/Loading/Message.svelte';
+	import root from '$lib/Utility/root';
+	import identity from '$stores/identity';
+	import locale from '$stores/locale';
+	import Icon from '@iconify/svelte';
+	import type { ParseResult } from './hololive';
+
+	export let schedule: ParseResult;
+	export let closestUpcomingPinnedStreams: Map<string, any>;
+	export let pinnedStreams: string[];
+	export let getPinnedStreams: () => void;
+
+	const pinStream = (streamer: string) =>
+		fetch(root(`/api/configuration/pin?stream=${encodeURIComponent(streamer)}`), {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		}).then(getPinnedStreams);
+</script>
+
+{#if schedule.lives.length === 0}
+	<Message message="No upcoming streams." loader="ripple" />
+{/if}
+
+<div class="container">
+	{#each schedule.lives
+		.filter((live) => {
+			try {
+				$locale().hololive.dateFormatter(new Date(live.time));
+
+				return true;
+			} catch {
+				return false;
+			}
+		})
+		.sort((a, b) => {
+			const now = Date.now();
+			const aTime = new Date(a.time).getTime();
+			const bTime = new Date(b.time).getTime();
+			const aIsLive = a.streaming;
+			const bIsLive = b.streaming;
+			const aIsClosestPinned = closestUpcomingPinnedStreams.get(a.streamer) === a;
+			const bIsClosestPinned = closestUpcomingPinnedStreams.get(b.streamer) === b;
+
+			if (aIsLive && pinnedStreams.includes(a.streamer)) return -1;
+			if (bIsLive && pinnedStreams.includes(b.streamer)) return 1;
+
+			if (aIsLive && !bIsLive) return -1;
+			if (bIsLive && !aIsLive) return 1;
+
+			if (aIsClosestPinned && !bIsClosestPinned) return -1;
+			if (bIsClosestPinned && !aIsClosestPinned) return 1;
+
+			if (aTime > now && !(aTime < now && !aIsLive)) return -1;
+			if (bTime > now && !(bTime < now && !bIsLive)) return 1;
+
+			return bTime - aTime;
+		}) as live}
+		<div class="stream card">
+			{#if $identity.id !== -2}
+				<div class="pin-icon">
+					<a
+						href={'#'}
+						on:click={(e) => {
+							e.preventDefault();
+							pinStream(live.streamer);
+						}}
+					>
+						<Icon
+							icon={`pajamas:thumbtack${pinnedStreams.includes(live.streamer) ? '-solid' : ''}`}
+							width="1em"
+						/>
+					</a>
+				</div>
+			{/if}
+
+			<p class="stream-heading">
+				[{#if live.streaming}
+					<b class="live">{$locale().hololive.live}</b
+					>{:else if new Date(live.time).getTime() < Date.now()}
+					<span class="ended">{$locale().hololive.ended}</span>{:else}
+					<span class="upcoming">{$locale().hololive.upcoming}</span>{/if}]
+				<b>{live.streamer}</b> <span class="opaque">|</span>
+				{$locale().hololive.dateFormatter(new Date(live.time))}
+				{#if live.guests.length > 0}
+					<br />
+					<small>
+						{$locale().hololive.with}{live.guests
+							.join($locale().hololive.comma)
+							.replace(
+								new RegExp(
+									`${$locale().hololive.comma}([^${$locale().hololive.commaNoSpace}]+)$`,
+									'g'
+								),
+								`${$locale().hololive.comma}${$locale().hololive.ampersand}$1`
+							)}
+					</small>
+				{/if}
+			</p>
+
+			<a href={live.link} class="preview" target="_blank">
+				<img src={live.livePreviewImage} alt="Stream Thumbnail" />
+			</a>
+		</div>
+	{/each}
+</div>
+
+<style lang="scss">
+	.preview {
+		// margin: 0.15rem;
+
+		img {
+			border-radius: 8px;
+			height: 20vh;
+			object-fit: cover;
+			transition: transform 0.3s ease;
+		}
+
+		&:hover {
+			img {
+				position: relative;
+				z-index: 2;
+				transition: transform 0.3s ease;
+				transform: scale(1.05);
+			}
+		}
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.live {
+		color: var(--base0F);
+	}
+
+	.upcoming {
+		color: var(--base0C);
+	}
+
+	.ended {
+		color: var(--base0D);
+	}
+
+	.container {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(22.5em, 1fr));
+		gap: 0.5em;
+	}
+
+	.pin-icon {
+		position: absolute;
+		right: 0;
+		top: 0;
+		padding: 0.75rem;
+	}
+
+	.stream {
+		position: relative;
+	}
+
+	.stream-heading {
+		padding-right: 2em;
+	}
+</style>