1 files changed, 106 insertions, 0 deletions
diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte
new file mode 100644
index 00000000..3d59fd72
--- /dev/null
+++ b/src/lib/Hololive/Stream.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import identity from '$stores/identity';
+	import locale from '$stores/locale';
+	import Icon from '@iconify/svelte';
+
+	export let live: any;
+	export let pinStream: (streamer: string) => void;
+	export let pinnedStreams: string[];
+</script>
+
+<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>
+
+<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);
+	}
+
+	.pin-icon {
+		position: absolute;
+		right: 0;
+		top: 0;
+		padding: 0.75rem;
+	}
+
+	.stream {
+		position: relative;
+	}
+
+	.stream-heading {
+		padding-right: 2em;
+	}
+</style>