the bad video card

.claude/settings.local.json

···
 {
   "permissions": {
     "allow": [
-      "Bash(pnpm check:*)"
+      "Bash(pnpm check:*)",
+      "mcp__ide__getDiagnostics"
     ]
   }
 }

src/lib/cards/VideoCard/VideoCard.svelte

···
+<script lang="ts">
+	import { getDidContext } from '$lib/website/context';
+	import { getBlob } from '$lib/oauth/atproto';
+	import { onMount } from 'svelte';
+	import type { ContentComponentProps } from '../types';
+
+	let { item = $bindable() }: ContentComponentProps = $props();
+
+	const did = getDidContext();
+
+	let element: HTMLVideoElement | undefined = $state();
+
+	onMount(async () => {
+		const el = element;
+		if (!el) return;
+
+		el.muted = true;
+
+		// If we already have an objectUrl (preview before upload), use it directly
+		if (item.cardData.objectUrl) {
+			el.src = item.cardData.objectUrl;
+			el.play().catch((e) => {
+				console.error('Video play error:', e);
+			});
+			return;
+		}
+
+		// Fetch the video blob from the PDS
+		if (item.cardData.video?.video && typeof item.cardData.video.video === 'object') {
+			const cid = item.cardData.video.video?.ref?.$link;
+			if (!cid) return;
+
+			try {
+				const blobUrl = await getBlob({ did, cid });
+				const res = await fetch(blobUrl);
+				if (!res.ok) throw new Error(res.statusText);
+				const blob = await res.blob();
+				const url = URL.createObjectURL(blob);
+				el.src = url;
+				el.play().catch((e) => {
+					console.error('Video play error:', e);
+				});
+			} catch (e) {
+				console.error('Failed to load video:', e);
+			}
+		}
+	});
+</script>
+
+{#key item.cardData.video || item.cardData.objectUrl}
+	<!-- svelte-ignore a11y_media_has_caption -->
+	<video
+		bind:this={element}
+		muted
+		loop
+		autoplay
+		playsinline
+		class={[
+			'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
+			item.cardData.href ? 'group-hover:scale-102' : ''
+		]}
+	></video>
+{/key}
+{#if item.cardData.href}
+	<a
+		href={item.cardData.href}
+		class="absolute inset-0 h-full w-full"
+		target="_blank"
+		rel="noopener noreferrer"
+	>
+		<span class="sr-only">
+			{item.cardData.hrefText ?? 'Learn more'}
+		</span>
+
+		<div
+			class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="2.5"
+				stroke="currentColor"
+				class="size-4"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+				/>
+			</svg>
+		</div>
+	</a>
+{/if}

src/lib/cards/VideoCard/VideoCardSettings.svelte

···
+<script lang="ts">
+	import { validateLink } from '$lib/helper';
+	import type { Item } from '$lib/types';
+	import { Button, Input, toast } from '@foxui/core';
+
+	let { item, onclose }: { item: Item; onclose: () => void } = $props();
+
+	let linkValue = $derived(
+		item.cardData.href?.replace('https://', '').replace('http://', '') ?? ''
+	);
+
+	function updateLink() {
+		if (!linkValue.trim()) {
+			item.cardData.href = '';
+			item.cardData.domain = '';
+		}
+
+		let link = validateLink(linkValue);
+		if (!link) {
+			toast.error('Invalid link');
+			return;
+		}
+
+		item.cardData.href = link;
+		item.cardData.domain = new URL(link).hostname;
+
+		onclose?.();
+	}
+</script>
+
+<Input
+	spellcheck={false}
+	type="url"
+	bind:value={linkValue}
+	onkeydown={(event) => {
+		if (event.code === 'Enter') {
+			updateLink();
+			event.preventDefault();
+		}
+	}}
+	placeholder="Enter link"
+/>
+<Button onclick={updateLink} size="icon"
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="size-6"
+	>
+		<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+	</svg>
+</Button>

src/lib/cards/VideoCard/index.ts

···
+import { uploadBlob } from '$lib/oauth/utils';
+import type { CardDefinition } from '../types';
+import VideoCard from './VideoCard.svelte';
+import VideoCardSettings from './VideoCardSettings.svelte';
+
+async function getAspectRatio(videoBlob: Blob): Promise<{ width: number; height: number }> {
+	return new Promise((resolve, reject) => {
+		const video = document.createElement('video');
+		video.preload = 'metadata';
+
+		video.onloadedmetadata = () => {
+			URL.revokeObjectURL(video.src);
+			resolve({
+				width: video.videoWidth,
+				height: video.videoHeight
+			});
+		};
+
+		video.onerror = () => {
+			URL.revokeObjectURL(video.src);
+			reject(new Error('Failed to load video metadata'));
+		};
+
+		video.src = URL.createObjectURL(videoBlob);
+	});
+}
+
+export const VideoCardDefinition = {
+	type: 'video',
+	contentComponent: VideoCard,
+	createNew: (card) => {
+		card.cardType = 'video';
+		card.cardData = {
+			video: null,
+			href: ''
+		};
+	},
+	upload: async (item) => {
+		if (item.cardData.blob) {
+			const blob = item.cardData.blob;
+			const aspectRatio = await getAspectRatio(blob);
+			const uploadedBlob = await uploadBlob(blob);
+
+			item.cardData.video = {
+				$type: 'app.bsky.embed.video',
+				video: uploadedBlob,
+				aspectRatio
+			};
+
+			delete item.cardData.blob;
+		}
+
+		if (item.cardData.objectUrl) {
+			URL.revokeObjectURL(item.cardData.objectUrl);
+			delete item.cardData.objectUrl;
+		}
+
+		return item;
+	},
+	settingsComponent: VideoCardSettings,
+
+	canChange: (item) => Boolean(item.cardData.video),
+
+	change: (item) => {
+		return item;
+	},
+	name: 'Video Card',
+	sidebarButtonText: 'Video'
+} as CardDefinition & { type: 'video' };

src/lib/cards/index.ts

···
 import { UpdatedBlentosCardDefitition } from './SpecialCards/UpdatedBlentos';
 import { TextCardDefinition } from './TextCard';
 import type { CardDefinition } from './types';
+import { VideoCardDefinition } from './VideoCard';
 import { YoutubeCardDefinition } from './YoutubeVideo';
 import { BlueskyProfileCardDefinition } from './BlueskyProfileCard';
 
 export const AllCardDefinitions = [
 	ImageCardDefinition,
+	VideoCardDefinition,
 	TextCardDefinition,
 	LinkCardDefinition,
 	BigSocialCardDefinition,

src/lib/website/EditableWebsite.svelte

···
 	} = $props();
 
 	let imageInputRef: HTMLInputElement | undefined = $state();
+	let videoInputRef: HTMLInputElement | undefined = $state();
 	let imageDragOver = $state(false);
 	let imageDragPosition: { x: number; y: number } | null = $state(null);
 
···
 		// Reset the input so the same file can be selected again
 		target.value = '';
 	}
+
+	async function processVideoFile(file: File) {
+		const objectUrl = URL.createObjectURL(file);
+
+		let item = createEmptyCard(data.page);
+
+		item.cardType = 'video';
+		item.cardData = {
+			blob: file,
+			objectUrl
+		};
+
+		setPositionOfNewItem(item, items);
+		items = [...items, item];
+
+		await tick();
+
+		scrollToItem(item, isMobile, container);
+	}
+
+	async function handleVideoInputChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		if (!target.files || target.files.length < 1) return;
+
+		const files = Array.from(target.files);
+
+		for (const file of files) {
+			await processVideoFile(file);
+		}
+
+		// Reset the input so the same file can be selected again
+		target.value = '';
+	}
 </script>
 
 <svelte:body
···
 		class="hidden"
 		multiple
 		bind:this={imageInputRef}
+	/>
+	<input
+		type="file"
+		accept="video/*"
+		onchange={handleVideoInputChange}
+		class="hidden"
+		multiple
+		bind:this={videoInputRef}
 	/>
 
 	{#if !dev}
···
 							stroke-linecap="round"
 							stroke-linejoin="round"
 							d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+						/>
+					</svg>
+				</Button>
+
+				<Button
+					size="iconLg"
+					variant="ghost"
+					class="backdrop-blur-none"
+					onclick={() => {
+						videoInputRef?.click();
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
 						/>
 					</svg>
 				</Button>