From 2138c8b0d212d0a4868339f408aa8aaa0adf18b4 Mon Sep 17 00:00:00 2001
From: lucor <hi@lucor.dev>
Date: Fri, 1 May 2026 23:35:43 +0200
Subject: [PATCH] feat(hive): preview video attachments inline

Adds a dedicated modal with an HTML video player when a notification
attachment has a video MIME type, mirroring the existing image preview
flow.
---
 .../lib/components/notification_card.svelte   | 91 ++++++++++++++++++-
 .../hive/src/lib/utils/attachmentCache.ts     |  9 ++
 2 files changed, 98 insertions(+), 2 deletions(-)

diff --git a/web/apps/hive/src/lib/components/notification_card.svelte b/web/apps/hive/src/lib/components/notification_card.svelte
index e88ab75..9776eeb 100644
--- a/web/apps/hive/src/lib/components/notification_card.svelte
+++ b/web/apps/hive/src/lib/components/notification_card.svelte
@@ -2,6 +2,7 @@
 	import {
 		Image,
 		FileDown,
+		Video,
 		ChevronUp,
 		EllipsisVertical,
 		Check,
@@ -11,9 +12,10 @@
 	} from '@lucide/svelte';
 	import type { Notification, NotificationPriority } from '@beebuzz/shared/types';
 	import { notificationsStore, formatRelativeTime } from '$lib/stores/notifications.svelte';
-	import { fetchAndCacheAttachment, isImageMime } from '$lib/utils/attachmentCache';
+	import { fetchAndCacheAttachment, isImageMime, isVideoMime } from '$lib/utils/attachmentCache';
 	import type { CachedAttachment } from '$lib/utils/attachmentCache';
 	import { parseHttpsLinkSegments } from '$lib/utils/linkify';
+	import { tick } from 'svelte';
 
 	const PRIORITY_HIGH: NotificationPriority = 'high';
 
@@ -49,8 +51,13 @@
 
 	let cachedAttachment = $state<CachedAttachment | null>(null);
 	let showImageModal = $state(false);
+	let showVideoModal = $state(false);
 	let attachmentLoading = $state(false);
 	let imageDialog = $state<HTMLDialogElement | undefined>(undefined);
+	let videoDialog = $state<HTMLDialogElement | undefined>(undefined);
+	// Why: Safari can't reliably play <video> from data: URLs (no range requests).
+	// Create a blob URL on demand for the modal and revoke it on close.
+	let videoObjectUrl = $state<string | null>(null);
 
 	// Why: DaisyUI's focus-based dropdown breaks in Safari — focus leaves the
 	// trigger before onclick fires on menu items, swallowing the event.
@@ -86,6 +93,39 @@
 		}
 	});
 
+	$effect(() => {
+		if (!videoDialog) return;
+		if (showVideoModal) {
+			videoDialog.showModal();
+		} else {
+			videoDialog.close();
+		}
+	});
+
+	/** Create the blob URL and open the video modal. */
+	function openVideoModal() {
+		if (!cachedAttachment) return;
+		if (!videoObjectUrl) {
+			videoObjectUrl = URL.createObjectURL(cachedAttachment.blob);
+		}
+		showVideoModal = true;
+	}
+
+	/**
+	 * Close the video modal and revoke the blob URL to free memory.
+	 * Awaits tick() so the <video> element unmounts before the URL is revoked,
+	 * avoiding a microtask window where the still-mounted element holds a
+	 * revoked src.
+	 */
+	async function closeVideoModal() {
+		showVideoModal = false;
+		await tick();
+		if (videoObjectUrl) {
+			URL.revokeObjectURL(videoObjectUrl);
+			videoObjectUrl = null;
+		}
+	}
+
 	function handleMarkRead() {
 		notificationsStore.markAsRead(notification.id);
 		menuOpen = false;
@@ -121,6 +161,8 @@
 		if (!cachedAttachment) return;
 		if (isImageMime(cachedAttachment.mimeType)) {
 			showImageModal = true;
+		} else if (isVideoMime(cachedAttachment.mimeType)) {
+			openVideoModal();
 		} else {
 			const filename = notification.attachment?.filename || 'attachment.bin';
 			triggerDownload(cachedAttachment.dataUrl, filename);
@@ -135,8 +177,15 @@
 		}
 
 		const mimeType = notification.attachment?.mime || 'application/octet-stream';
+		const binary = atob(inlineData);
+		const bytes = new Uint8Array(binary.length);
+		for (let i = 0; i < binary.length; i++) {
+			bytes[i] = binary.charCodeAt(i);
+		}
+		const blob = new Blob([bytes], { type: mimeType });
 		return {
 			dataUrl: `data:${mimeType};base64,${inlineData}`,
+			blob,
 			mimeType,
 			timestamp: Date.now()
 		};
@@ -149,6 +198,9 @@
 		if (notification.attachment?.mime && isImageMime(notification.attachment.mime)) {
 			return 'Image attachment';
 		}
+		if (notification.attachment?.mime && isVideoMime(notification.attachment.mime)) {
+			return 'Video attachment';
+		}
 		return 'File attachment';
 	});
 
@@ -360,6 +412,8 @@
 			>
 				{#if notification.attachment?.mime && isImageMime(notification.attachment.mime)}
 					<Image size={16} />
+				{:else if notification.attachment?.mime && isVideoMime(notification.attachment.mime)}
+					<Video size={16} />
 				{:else}
 					<FileDown size={16} />
 				{/if}
@@ -373,7 +427,7 @@
 </div>
 
 <!-- Image modal — rendered outside the card to avoid inheriting opacity-60 on read messages -->
-<dialog bind:this={imageDialog} class="modal">
+<dialog bind:this={imageDialog} class="modal" onclose={() => (showImageModal = false)}>
 	<div class="modal-box max-w-4xl w-11/12 flex flex-col items-center">
 		<form method="dialog">
 			<button
@@ -392,3 +446,36 @@
 	</div>
 	<form method="dialog" class="modal-backdrop"><button type="submit">close</button></form>
 </dialog>
+
+<!-- Video modal — iOS PWAs handle programmatic downloads poorly, so playable media opens inline -->
+<dialog bind:this={videoDialog} class="modal" onclose={closeVideoModal}>
+	<div class="modal-box max-w-4xl w-11/12 flex flex-col items-center">
+		<form method="dialog">
+			<button
+				type="submit"
+				class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+				aria-label="Close video viewer"
+			>
+				✕
+			</button>
+		</form>
+		{#if showVideoModal && videoObjectUrl}
+			<video
+				src={videoObjectUrl}
+				controls
+				muted
+				playsinline
+				preload="metadata"
+				class="rounded-lg max-w-full max-h-[80vh]"
+			>
+				<a
+					href={cachedAttachment?.dataUrl || ''}
+					download={notification.attachment?.filename || 'attachment'}
+				>
+					Download video
+				</a>
+			</video>
+		{/if}
+	</div>
+	<form method="dialog" class="modal-backdrop"><button type="submit">close</button></form>
+</dialog>
diff --git a/web/apps/hive/src/lib/utils/attachmentCache.ts b/web/apps/hive/src/lib/utils/attachmentCache.ts
index 69ea78e..60d6caa 100644
--- a/web/apps/hive/src/lib/utils/attachmentCache.ts
+++ b/web/apps/hive/src/lib/utils/attachmentCache.ts
@@ -6,6 +6,9 @@ const attachmentCache = new Map<string, CachedAttachment>();
 
 export interface CachedAttachment {
 	dataUrl: string;
+	// Why: Safari can't reliably play video from data: URLs (no range requests),
+	// so video playback uses URL.createObjectURL(blob) instead of dataUrl.
+	blob: Blob;
 	mimeType: string;
 	timestamp: number;
 }
@@ -55,6 +58,7 @@ export async function fetchAndCacheAttachment(
 	const dataUrl = await blobToDataUrl(finalBlob);
 	const result: CachedAttachment = {
 		dataUrl,
+		blob: finalBlob,
 		mimeType: finalBlob.type || mimeType,
 		timestamp: Date.now()
 	};
@@ -68,6 +72,11 @@ export function isImageMime(mime: string): boolean {
 	return mime.startsWith('image/');
 }
 
+/** Returns true if the MIME type represents a video. */
+export function isVideoMime(mime: string): boolean {
+	return mime.startsWith('video/');
+}
+
 /** Clear attachment cache */
 export function clearAttachmentCache(): void {
 	attachmentCache.clear();