feat: hls video player

package.json

···
 		"@atcute/bluesky-richtext-parser": "^1.0.7",
 		"@atcute/bluesky-richtext-segmenter": "^1.0.5",
 		"@atcute/client": "^2.0.7",
-		"@badrap/valita": "^0.4.2"
+		"@badrap/valita": "^0.4.2",
+		"hls.js": "^1.5.20"
 	}
 }

pnpm-lock.yaml

···
       '@badrap/valita':
         specifier: ^0.4.2
         version: 0.4.2
+      hls.js:
+        specifier: ^1.5.20
+        version: 1.5.20
     devDependencies:
       '@sveltejs/adapter-cloudflare':
         specifier: ^5.0.2
···
 
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+
+  hls.js@1.5.20:
+    resolution: {integrity: sha512-uu0VXUK52JhihhnN/MVVo1lvqNNuhoxkonqgO3IpjvQiGpJBdIXMGkofjQb/j9zvV7a1SW8U9g1FslWx/1HOiQ==}
 
   import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
···
       source-map: 0.6.1
 
   glob-to-regexp@0.4.1: {}
+
+  hls.js@1.5.20: {}
 
   import-meta-resolve@4.1.0: {}
 

src/app.d.ts

···
 	}
 }
 
+declare module 'svelte/elements' {
+	export interface AriaAttributes {
+		'aria-description'?: string;
+	}
+}
+
 export {};

src/lib/components/embeds/embeds.svelte

···
 	import ListEmbed from './list-embed.svelte';
 	import QuoteEmbed from './quote-embed.svelte';
 	import StarterpackEmbed from './starterpack-embed.svelte';
-	import VideoEmbed from './video-embed.svelte';
+	import VideoStandaloneEmbed from './video-standalone-embed.svelte';
 
 	type Embed = NonNullable<AppBskyFeedDefs.PostView['embed']>;
 	type MediaEmbed = Brand.Union<AppBskyEmbedExternal.View | AppBskyEmbedImages.View | AppBskyEmbedVideo.View>;
···
 	{:else if embed.$type === 'app.bsky.embed.images#view'}
 		<ImageEmbed {embed} standalone />
 	{:else if embed.$type === 'app.bsky.embed.video#view'}
-		<VideoEmbed {embed} standalone />
+		<VideoStandaloneEmbed {embed} />
 	{:else}
 		{@render Message(`Unsupported media embed`)}
 	{/if}

src/lib/components/embeds/quote-embed.svelte

···
 	import RelativeTime from '$lib/components/islands/relative-time.svelte';
 
 	import ImageEmbed from './image-embed.svelte';
-	import VideoEmbed from './video-embed.svelte';
+	import VideoThumbnailEmbed from './video-thumbnail-embed.svelte';
 
 	interface Props {
 		embed: AppBskyEmbedRecord.ViewRecord;
···
 					</div>
 				{:else if video}
 					<div class="aside">
-						<VideoEmbed embed={video} blur={false} />
+						<VideoThumbnailEmbed embed={video} blur={false} />
 					</div>
 				{/if}
 			{/if}
···
 		{#if image}
 			<ImageEmbed embed={image} borderless blur={false} />
 		{:else if video}
-			<VideoEmbed embed={video} borderless blur={false} />
+			<VideoThumbnailEmbed embed={video} borderless blur={false} />
 		{/if}
 	{/if}
 </a>

src/lib/components/embeds/video-embed.svelte

···
-<script lang="ts">
-	import type { AppBskyEmbedVideo } from '@atcute/client/lexicons';
-
-	import PlaySolid from '$lib/components/central-icons/play-solid.svelte';
-
-	interface Props {
-		embed: AppBskyEmbedVideo.View;
-		borderless?: boolean;
-		standalone?: boolean;
-		blur?: boolean;
-	}
-
-	const { embed: video, borderless, standalone, blur }: Props = $props();
-
-	const ratio = standalone && video.aspectRatio;
-</script>
-
-{#if standalone}
-	<div class={['video-embed', !borderless && 'is-bordered', standalone && 'is-standalone']}>
-		<div class="constrainer" style={ratio ? `aspect-ratio: ${ratio.width}/${ratio.height}` : ``}>
-			{@render Content()}
-		</div>
-	</div>
-{:else}
-	<div
-		class={['video-embed', !borderless && 'is-bordered']}
-		style={ratio ? `aspect-ratio: ${ratio.width}/${ratio.height}` : ``}
-	>
-		{@render Content()}
-	</div>
-{/if}
-
-{#snippet Content()}
-	<img loading="lazy" src={video.thumbnail} alt="" class={['thumbnail', blur && 'is-blurred']} />
-
-	{#if ratio}
-		<div class="placeholder"></div>
-	{/if}
-
-	<div class="play">
-		<PlaySolid />
-	</div>
-{/snippet}
-
-<style>
-	.video-embed {
-		position: relative;
-		background: var(--bg-secondary);
-		aspect-ratio: 16 / 9;
-		overflow: hidden;
-	}
-	.is-bordered {
-		border: 1px solid var(--divider-md);
-		border-radius: 6px;
-	}
-	.is-standalone {
-		align-self: baseline;
-		aspect-ratio: auto;
-		max-width: 100%;
-	}
-
-	.constrainer {
-		min-width: 64px;
-		max-width: 100%;
-		min-height: 64px;
-		max-height: 320px;
-	}
-
-	.thumbnail {
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
-	}
-	.is-blurred {
-		scale: 125%;
-		filter: blur(24px);
-	}
-
-	.placeholder {
-		width: 100vw;
-		height: 100vh;
-	}
-
-	.play {
-		display: grid;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		place-items: center;
-		translate: -50% -50%;
-		border-radius: 50%;
-		background: rgba(64, 64, 64, 0.6);
-		aspect-ratio: 1 / 1;
-		height: 40%;
-		max-height: 48px;
-		color: #ffffff;
-		font-size: 20px;
-
-		:global(.sv-icon) {
-			width: 40%;
-			height: 40%;
-		}
-
-		.is-standalone &:hover {
-			background: rgba(64, 64, 64, 0.8);
-		}
-	}
-</style>

src/lib/components/embeds/video-standalone-embed.svelte

···
+<script lang="ts" module>
+	const MATCH_RE = /\/(did:[a-z]+:[a-zA-Z0-9._:%-]*[a-zA-Z0-9._-])\/(bafkrei[2-7a-z]{52})\//;
+</script>
+
+<script lang="ts">
+	import { dev } from '$app/environment';
+	import { base } from '$app/paths';
+
+	import type { AppBskyEmbedVideo } from '@atcute/client/lexicons';
+
+	import PlaySolid from '$lib/components/central-icons/play-solid.svelte';
+	import Island from '$lib/components/island.svelte';
+
+	interface Props {
+		embed: AppBskyEmbedVideo.View;
+		blur?: boolean;
+	}
+
+	const { embed: video }: Props = $props();
+
+	const ratio = $derived.by(() => {
+		const aspectRatio = video.aspectRatio;
+		if (!aspectRatio) {
+			return undefined;
+		}
+
+		return `${aspectRatio.width}/${aspectRatio.height}`;
+	});
+
+	const videoUrl = $derived.by(() => {
+		const match = MATCH_RE.exec(decodeURIComponent(video.playlist));
+		if (!match) {
+			return undefined;
+		}
+
+		return `${base}/watch/${match[1]}/${match[2]}`;
+	});
+</script>
+
+{#snippet Content()}
+	<div class={['video-standalone-embed', 'isl-video-embed', ratio && 'has-ratio']}>
+		<div class="constrainer" style:aspect-ratio={ratio}>
+			<a href={videoUrl} aria-label="Play video" class="link">
+				<img loading="lazy" src={video.thumbnail} alt={video.alt} class="thumbnail" />
+
+				<div class="play">
+					<PlaySolid />
+				</div>
+			</a>
+
+			<!-- svelte-ignore a11y_missing_attribute -->
+			<!-- <iframe src={videoUrl} allow="autoplay; fullscreen" height="320" width="180"></iframe> -->
+
+			<div hidden={!ratio} class="hack"></div>
+		</div>
+	</div>
+{/snippet}
+
+{#if dev}
+	{@render Content()}
+{:else}
+	<Island scriptUrl="{base}/_scripts/video-embed.js" fetchPriority="auto">
+		{@render Content()}
+	</Island>
+{/if}
+
+<style>
+	.video-standalone-embed {
+		position: relative;
+		border: 1px solid var(--divider-md);
+		border-radius: 6px;
+		background: var(--bg-secondary);
+		overflow: hidden;
+
+		:global(iframe) {
+			border: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.has-ratio {
+		align-self: start;
+		max-width: 100%;
+	}
+
+	.constrainer {
+		aspect-ratio: 16 / 9;
+
+		.has-ratio & {
+			min-width: 64px;
+			max-width: 100%;
+			min-height: 64px;
+			max-height: 320px;
+		}
+	}
+	.link {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.thumbnail {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		font-size: 0;
+	}
+
+	.play {
+		display: grid;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		place-items: center;
+		translate: -50% -50%;
+		border-radius: 50%;
+		background: rgba(64, 64, 64, 0.6);
+		aspect-ratio: 1 / 1;
+		height: 40%;
+		max-height: 48px;
+		color: #ffffff;
+		font-size: 20px;
+
+		:global(.sv-icon) {
+			width: 40%;
+			height: 40%;
+		}
+	}
+
+	.hack {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>

src/lib/components/embeds/video-thumbnail-embed.svelte

···
+<script lang="ts">
+	// This is meant to be used inside quote embeds, so it's non-standalone.
+
+	import type { AppBskyEmbedVideo } from '@atcute/client/lexicons';
+
+	import PlaySolid from '$lib/components/central-icons/play-solid.svelte';
+
+	interface Props {
+		embed: AppBskyEmbedVideo.View;
+		borderless?: boolean;
+		blur?: boolean;
+	}
+
+	const { embed: video, borderless }: Props = $props();
+</script>
+
+<div class={['video-thumbnail-embed', !borderless && 'is-bordered']}>
+	<div class="constrainer">
+		<img loading="lazy" src={video.thumbnail} alt={video.alt} class="thumbnail" />
+
+		<div class="play">
+			<PlaySolid />
+		</div>
+
+		<div class="hack"></div>
+	</div>
+</div>
+
+<style>
+	.video-thumbnail-embed {
+		position: relative;
+		background: var(--bg-secondary);
+		overflow: hidden;
+	}
+	.is-bordered {
+		border: 1px solid var(--divider-md);
+		border-radius: 6px;
+	}
+
+	.constrainer {
+		aspect-ratio: 16 / 9;
+		overflow: hidden;
+	}
+
+	.thumbnail {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		font-size: 0;
+	}
+
+	.play {
+		display: grid;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		place-items: center;
+		translate: -50% -50%;
+		border-radius: 50%;
+		background: rgba(64, 64, 64, 0.6);
+		aspect-ratio: 1 / 1;
+		height: 40%;
+		max-height: 48px;
+		color: #ffffff;
+		font-size: 20px;
+
+		:global(.sv-icon) {
+			width: 40%;
+			height: 40%;
+		}
+	}
+
+	.hack {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>

src/params/cidRaw.ts

···
+import type { ParamMatcher } from '@sveltejs/kit';
+
+// cidv1; multibase=base32; multihash=sha2-256; multicodec=raw
+const RAW_CID_RE = /^bafkrei[2-7a-z]{52}$/;
+
+export const match = ((param: string): param is string => {
+	return RAW_CID_RE.test(param);
+}) as ParamMatcher;

src/routes/watch/[actor=did]/[cid=cidRaw]/+page.svelte

···
+<script lang="ts">
+	import Hls, { type Fragment as HlsFragment } from 'hls.js';
+
+	import type { PageProps } from './$types';
+
+	const { data }: PageProps = $props();
+
+	let video: HTMLVideoElement | undefined = $state();
+	let playing = $state(false);
+
+	$effect(() => {
+		if (!video) {
+			return;
+		}
+
+		const hls = new Hls({
+			capLevelToPlayerSize: true,
+			startLevel: 1,
+		});
+
+		hls.loadSource(data.playlistUrl);
+		hls.attachMedia(video);
+
+		$effect(() => {
+			if (!playing) {
+				return;
+			}
+
+			const channel = new BroadcastChannel('anartia:video-player');
+			const observer = new IntersectionObserver(
+				(entries) => {
+					const entry = entries[0];
+					if (!entry.isIntersecting) {
+						video!.pause();
+					}
+				},
+				{ threshold: 0.5 },
+			);
+
+			observer.observe(video!);
+
+			channel.postMessage('play');
+			channel.addEventListener('message', (event) => {
+				if (event.data === 'play') {
+					video!.pause();
+				}
+			});
+
+			return () => {
+				channel.close();
+				observer.disconnect();
+			};
+		});
+
+		// Low-quality fragment flushing
+		{
+			let lowQualityFragments: HlsFragment[] = [];
+
+			hls.on(Hls.Events.FRAG_BUFFERED, (_event, { frag }) => {
+				if (frag.level === 0) {
+					lowQualityFragments.push(frag);
+				}
+			});
+
+			hls.on(Hls.Events.FRAG_CHANGED, (_event, { frag }) => {
+				if (hls.nextAutoLevel > 0) {
+					const flushed: HlsFragment[] = [];
+
+					for (const lowQualFrag of lowQualityFragments) {
+						if (Math.abs(frag.start - lowQualFrag.start) < 0.1) {
+							continue;
+						}
+
+						hls.trigger(Hls.Events.BUFFER_FLUSHING, {
+							startOffset: lowQualFrag.start,
+							endOffset: lowQualFrag.end,
+							type: 'video',
+						});
+
+						flushed.push(lowQualFrag);
+					}
+
+					lowQualityFragments = lowQualityFragments.filter((f) => !flushed.includes(f));
+				}
+			});
+
+			video.addEventListener('ended', () => {
+				if (hls.nextAutoLevel > 0 && lowQualityFragments.length === 1 && lowQualityFragments[0].start === 0) {
+					const lowQualFrag = lowQualityFragments[0];
+
+					hls.trigger(Hls.Events.BUFFER_FLUSHING, {
+						startOffset: lowQualFrag.start,
+						endOffset: lowQualFrag.end,
+						type: 'video',
+					});
+
+					lowQualityFragments = [];
+				}
+			});
+		}
+
+		return () => {
+			playing = false;
+			hls.destroy();
+		};
+	});
+</script>
+
+{#key data.playlistUrl}
+	<!-- svelte-ignore a11y_media_has_caption -->
+	<video
+		bind:this={video}
+		poster={data.thumbnailUrl}
+		controls
+		playsinline
+		autoplay
+		onplay={() => {
+			playing = true;
+		}}
+		onpause={() => {
+			playing = false;
+		}}
+		onloadedmetadata={() => {
+			const hasAudio =
+				// @ts-expect-error: Mozilla-specific
+				video.mozHasAudio ||
+				// @ts-expect-error: WebKit/Blink-specific
+				!!video.webkitAudioDecodedByteCount ||
+				// @ts-expect-error: WebKit-specific
+				!!(video.audioTracks && video.audioTracks.length);
+
+			video!.loop = !hasAudio || video!.duration <= 6;
+		}}
+	>
+	</video>
+{/key}
+
+<style>
+	:global(body) {
+		margin: 0;
+		width: 100dvw;
+		height: 100dvh;
+		overflow: hidden;
+	}
+
+	video {
+		background: #000000;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+</style>

src/routes/watch/[actor=did]/[cid=cidRaw]/+page.ts

···
+import type { PageLoad } from './$types';
+
+export const ssr = false;
+export const csr = true;
+
+export const load: PageLoad = async ({ params }) => {
+	const CDN_URL = `https://video.cdn.bsky.app`;
+	const BASE_URL = `${CDN_URL}/hls/${params.actor}/${params.cid}`;
+
+	return {
+		playlistUrl: `${BASE_URL}/playlist.m3u8`,
+		thumbnailUrl: `${BASE_URL}/thumbnail.jpg`,
+	};
+};

static/_scripts/video-embed.js

···
+// @ts-check
+
+/** @type {Map<Element, (entry: ResizeObserverEntry) => void>} */
+const callbacks = new Map();
+
+const observer = new ResizeObserver((entries) => {
+	for (let idx = 0, len = entries.length; idx < len; idx++) {
+		const entry = entries[idx];
+
+		const target = entry.target;
+		const callback = callbacks.get(target);
+
+		if (callback) {
+			callback(entry);
+		} else {
+			observer.unobserve(target);
+		}
+	}
+});
+
+(() => {
+	/** @type {NodeListOf<HTMLAnchorElement>} */
+	const nodes = document.querySelectorAll('.isl-video-embed > .constrainer > .link');
+
+	for (const anchor of nodes) {
+		const parent = /** @type {HTMLDivElement} */ (anchor.parentElement);
+
+		// listen for clicks on the anchor
+		anchor.addEventListener('click', (event) => {
+			event.preventDefault();
+
+			// replace the anchor with an iframe
+			const iframe = document.createElement('iframe');
+			iframe.src = anchor.href;
+
+			anchor.replaceWith(iframe);
+
+			// observe the parent element to resize the iframe
+			callbacks.set(parent, (entry) => {
+				iframe.width = '' + entry.contentRect.width;
+				iframe.height = '' + entry.contentRect.width;
+			});
+
+			observer.observe(parent);
+		});
+
+		// prefetch on hover
+		{
+			const controller = new AbortController();
+			const signal = controller.signal;
+
+			const prefetch = () => {
+				const link = document.createElement('link');
+				link.rel = 'prefetch';
+				link.as = 'document';
+				link.href = anchor.href;
+
+				document.head.appendChild(link);
+
+				controller.abort();
+			};
+
+			anchor.addEventListener('mouseover', prefetch, { signal });
+			anchor.addEventListener('touchstart', prefetch, { signal });
+		}
+	}
+})();