update gif stuff

src/lib/cards/GIFCard/CreateGifCardModal.svelte

···
+<script lang="ts">
+	import type { CreationModalComponentProps } from '../types';
+	import GiphySearchModal from './GiphySearchModal.svelte';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let isOpen = $state(true);
+
+	function handleGifSelect(gif: {
+		id: string;
+		title: string;
+		images: { original: { mp4: string } };
+	}) {
+		item.cardData.url = gif.images.original.mp4;
+		item.cardData.alt = gif.title;
+		isOpen = false;
+		oncreate();
+	}
+
+	function handleCancel() {
+		isOpen = false;
+		oncancel();
+	}
+</script>
+
+<GiphySearchModal bind:open={isOpen} onselect={handleGifSelect} oncancel={handleCancel} />

src/lib/cards/GIFCard/EditingGifCard.svelte

···
 <script lang="ts">
-	import { getDidContext } from '$lib/website/context';
-	import { getImageBlobUrl } from '$lib/oauth/utils';
 	import type { ContentComponentProps } from '../types';
+	import GiphySearchModal from './GiphySearchModal.svelte';
 
 	let { item = $bindable() }: ContentComponentProps = $props();
 
-	const did = getDidContext();
-
 	let hasError = $state(false);
 	let isSearchOpen = $state(false);
-	let searchQuery = $state('');
-	let searchResults = $state<
-		Array<{
-			id: string;
-			title: string;
-			images: {
-				fixed_height: { url: string; width: string; height: string };
-				original: { url: string };
-			};
-		}>
-	>([]);
-	let isLoading = $state(false);
-	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	function getSrc() {
-		if (item.cardData.url) return item.cardData.url;
-
-		if (item.cardData.image && typeof item.cardData.image === 'object') {
-			return getImageBlobUrl({ did, link: item.cardData.image?.ref?.$link });
-		}
-
-		return item.cardData.image;
-	}
-
-	async function searchGiphy(query: string) {
-		if (!query.trim()) {
-			searchResults = [];
-			return;
-		}
-
-		isLoading = true;
-		try {
-			const response = await fetch(`/api/giphy?q=${encodeURIComponent(query)}`);
-			if (response.ok) {
-				const data = await response.json();
-				searchResults = data.data || [];
-			}
-		} catch (error) {
-			console.error('Failed to search Giphy:', error);
-		} finally {
-			isLoading = false;
-		}
-	}
-
-	function handleSearchInput() {
-		if (searchTimeout) clearTimeout(searchTimeout);
-		searchTimeout = setTimeout(() => {
-			searchGiphy(searchQuery);
-		}, 300);
-	}
-
-	function selectGif(gif: (typeof searchResults)[0]) {
-		item.cardData.url = gif.images.original.url;
+	function handleGifSelect(gif: {
+		id: string;
+		title: string;
+		images: { original: { mp4: string } };
+	}) {
+		item.cardData.url = gif.images.original.mp4;
 		item.cardData.alt = gif.title;
 		hasError = false;
 		isSearchOpen = false;
-		searchQuery = '';
-		searchResults = [];
 	}
 
 	function openSearch() {
 		isSearchOpen = true;
 	}
-
-	function closeSearch() {
-		isSearchOpen = false;
-		searchQuery = '';
-		searchResults = [];
-	}
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div class="relative h-full w-full overflow-hidden" onclick={openSearch}>
-	{#if getSrc() && !hasError}
-		<img
+<div class="group relative h-full w-full cursor-pointer overflow-hidden" onclick={openSearch}>
+	{#if item.cardData.url && !hasError}
+		<video
 			class="absolute inset-0 h-full w-full object-cover"
-			src={getSrc()}
-			alt={item.cardData.alt || 'GIF'}
+			src={item.cardData.url}
+			autoplay
+			loop
+			muted
+			playsinline
 			onerror={() => (hasError = true)}
-		/>
+		></video>
+		<!-- Click to change overlay -->
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
+		>
+			<span class="text-sm font-medium text-white">Click to change</span>
+		</div>
 	{:else}
 		<!-- Empty state -->
 		<div
-			class="bg-base-100 dark:bg-base-900 flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 p-4"
+			class="bg-base-100 dark:bg-base-900 flex h-full w-full flex-col items-center justify-center gap-3 p-4"
 		>
 			<div
 				class="border-base-300 dark:border-base-700 flex size-12 items-center justify-center rounded-xl border-2 border-dashed"
···
 			</div>
 		</div>
 	{/if}
-
-	<!-- Giphy search modal -->
-	{#if isSearchOpen}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<div
-			class="absolute inset-0 z-50 flex flex-col bg-black/80 backdrop-blur-sm"
-			onclick={(e) => e.stopPropagation()}
-		>
-			<!-- Header -->
-			<div class="flex items-center gap-2 p-3">
-				<input
-					bind:value={searchQuery}
-					oninput={handleSearchInput}
-					class="flex-1 rounded-lg border border-white/20 bg-white/10 px-4 py-2 text-sm text-white placeholder-white/50 outline-none focus:border-white/40 focus:bg-white/20"
-					placeholder="Search GIPHY..."
-				/>
-				<button
-					onclick={closeSearch}
-					aria-label="Close search"
-					class="rounded-lg p-2 text-white/70 transition-colors hover:bg-white/10 hover:text-white"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-5"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-					</svg>
-				</button>
-			</div>
-
-			<!-- Results grid -->
-			<div class="flex-1 overflow-y-auto p-2">
-				{#if isLoading}
-					<div class="flex h-full items-center justify-center">
-						<p class="text-white/60">Searching...</p>
-					</div>
-				{:else if searchResults.length > 0}
-					<div class="grid grid-cols-2 gap-2">
-						{#each searchResults as gif}
-							<button
-								onclick={() => selectGif(gif)}
-								class="overflow-hidden rounded-lg transition-transform hover:scale-[1.02]"
-							>
-								<img
-									src={gif.images.fixed_height.url}
-									alt={gif.title}
-									class="h-auto w-full"
-									loading="lazy"
-								/>
-							</button>
-						{/each}
-					</div>
-				{:else if searchQuery}
-					<div class="flex h-full items-center justify-center">
-						<p class="text-white/60">No results found</p>
-					</div>
-				{:else}
-					<div class="flex h-full items-center justify-center">
-						<p class="text-white/60">Type to search for GIFs</p>
-					</div>
-				{/if}
-			</div>
+</div>
 
-			<!-- Giphy attribution -->
-			<div class="p-2 text-center">
-				<span class="text-xs text-white/40">Powered by GIPHY</span>
-			</div>
-		</div>
-	{/if}
-</div>
+<GiphySearchModal bind:open={isSearchOpen} onselect={handleGifSelect} oncancel={() => (isSearchOpen = false)} />

src/lib/cards/GIFCard/GifCard.svelte

···
 <script lang="ts">
-	import { getDidContext } from '$lib/website/context';
-	import { getImageBlobUrl } from '$lib/oauth/utils';
 	import type { ContentComponentProps } from '../types';
 
 	let { item }: ContentComponentProps = $props();
 
-	const did = getDidContext();
-
-	function getSrc() {
-		if (item.cardData.objectUrl) return item.cardData.objectUrl;
-
-		if (item.cardData.image && typeof item.cardData.image === 'object') {
-			return getImageBlobUrl({ did, link: item.cardData.image?.ref?.$link });
-		}
-
-		return item.cardData.url || item.cardData.image;
-	}
-
 	let hasError = $state(false);
 </script>
 
 <div class="relative h-full w-full overflow-hidden">
-	{#key item.cardData.url || item.cardData.image || item.cardData.objectUrl}
-		{#if getSrc() && !hasError}
-			<img
+	{#key item.cardData.url}
+		{#if item.cardData.url && !hasError}
+			<video
 				class="absolute inset-0 h-full w-full object-cover"
-				src={getSrc()}
-				alt={item.cardData.alt || 'GIF'}
+				src={item.cardData.url}
+				autoplay
+				loop
+				muted
+				playsinline
 				onerror={() => (hasError = true)}
-			/>
+			></video>
+			
 		{:else}
 			<div
 				class="flex h-full w-full items-center justify-center bg-base-100 dark:bg-base-900"

src/lib/cards/GIFCard/GifCardSettings.svelte

···
 <script lang="ts">
 	import type { Item } from '$lib/types';
 	import type { SettingsComponentProps } from '../types';
-	import { Button, Input, Label } from '@foxui/core';
+	import { Button, Label } from '@foxui/core';
+	import GiphySearchModal from './GiphySearchModal.svelte';
 
 	let { item = $bindable<Item>() }: SettingsComponentProps = $props();
 
 	let isSearchOpen = $state(false);
-	let searchQuery = $state('');
-	let searchResults = $state<
-		Array<{
-			id: string;
-			title: string;
-			images: {
-				fixed_height: { url: string; width: string; height: string };
-				original: { url: string };
-			};
-		}>
-	>([]);
-	let isLoading = $state(false);
-	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
-	async function searchGiphy(query: string) {
-		if (!query.trim()) {
-			searchResults = [];
-			return;
-		}
-
-		isLoading = true;
-		try {
-			const response = await fetch(`/api/giphy?q=${encodeURIComponent(query)}`);
-			if (response.ok) {
-				const data = await response.json();
-				searchResults = data.data || [];
-			}
-		} catch (error) {
-			console.error('Failed to search Giphy:', error);
-		} finally {
-			isLoading = false;
-		}
-	}
-
-	function handleSearchInput() {
-		if (searchTimeout) clearTimeout(searchTimeout);
-		searchTimeout = setTimeout(() => {
-			searchGiphy(searchQuery);
-		}, 300);
-	}
-
-	function selectGif(gif: (typeof searchResults)[0]) {
-		item.cardData.url = gif.images.original.url;
+	function handleGifSelect(gif: {
+		id: string;
+		title: string;
+		images: { original: { mp4: string } };
+	}) {
+		item.cardData.url = gif.images.original.mp4;
 		item.cardData.alt = gif.title;
 		isSearchOpen = false;
-		searchQuery = '';
-		searchResults = [];
 	}
 </script>
 
 <div class="flex flex-col gap-3">
 	<div>
-		<Label class="mb-1 text-xs">Search GIPHY</Label>
+		<Label class="mb-1 text-xs">Change GIF</Label>
 		<Button
 			variant="secondary"
 			class="w-full justify-start"
-			onclick={() => (isSearchOpen = !isSearchOpen)}
+			onclick={() => (isSearchOpen = true)}
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
···
 					d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
 				/>
 			</svg>
-			Search for GIFs
+			Search GIPHY
 		</Button>
 	</div>
-
-	{#if isSearchOpen}
-		<div class="flex flex-col gap-2">
-			<Input
-				bind:value={searchQuery}
-				oninput={handleSearchInput}
-				placeholder="Type to search..."
-				class="w-full"
-				autofocus
-			/>
-			{#if isLoading}
-				<p class="text-base-500 text-xs">Searching...</p>
-			{:else if searchResults.length > 0}
-				<div class="grid max-h-48 grid-cols-2 gap-1 overflow-y-auto">
-					{#each searchResults as gif}
-						<button
-							onclick={() => selectGif(gif)}
-							class="overflow-hidden rounded transition-transform hover:scale-[1.02]"
-						>
-							<img
-								src={gif.images.fixed_height.url}
-								alt={gif.title}
-								class="h-auto w-full"
-								loading="lazy"
-							/>
-						</button>
-					{/each}
-				</div>
-				<p class="text-base-400 text-center text-xs">Powered by GIPHY</p>
-			{:else if searchQuery}
-				<p class="text-base-500 text-xs">No results found</p>
-			{/if}
-		</div>
-	{/if}
+</div>
 
-	<div>
-		<Label class="mb-1 text-xs">Alt text</Label>
-		<Input bind:value={item.cardData.alt} placeholder="Description" class="w-full" />
-	</div>
-</div>
+<GiphySearchModal bind:open={isSearchOpen} onselect={handleGifSelect} oncancel={() => (isSearchOpen = false)} />

src/lib/cards/GIFCard/GiphySearchModal.svelte

···
+<script lang="ts">
+	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import { PUBLIC_GIPHY_API_TOKEN } from '$env/static/public';
+	import PoweredByGiphy from './PoweredByGiphy.gif';
+
+	type GiphyGif = {
+		id: string;
+		title: string;
+		images: {
+			fixed_height: { url: string; mp4: string; width: string; height: string };
+			original: { mp4: string };
+		};
+	};
+
+	let {
+		open = $bindable(false),
+		onselect,
+		oncancel
+	}: {
+		open: boolean;
+		onselect: (gif: GiphyGif) => void;
+		oncancel: () => void;
+	} = $props();
+
+	let searchQuery = $state('');
+	let searchResults = $state<GiphyGif[]>([]);
+	let trendingResults = $state<GiphyGif[]>([]);
+	let isLoading = $state(false);
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	// Split results into 4 columns for masonry layout
+	let columns = $derived(() => {
+		const results = searchQuery.trim() ? searchResults : trendingResults;
+		const cols: [GiphyGif[], GiphyGif[], GiphyGif[], GiphyGif[]] = [[], [], [], []];
+		results.forEach((gif, i) => {
+			cols[i % 4].push(gif);
+		});
+		return cols;
+	});
+
+	let displayResults = $derived(searchQuery.trim() ? searchResults : trendingResults);
+
+	async function fetchTrending() {
+		if (trendingResults.length > 0) return;
+
+		isLoading = true;
+		try {
+			const url = new URL('https://api.giphy.com/v1/gifs/trending');
+			url.searchParams.set('api_key', PUBLIC_GIPHY_API_TOKEN);
+			url.searchParams.set('limit', '24');
+			url.searchParams.set('rating', 'g');
+
+			const response = await fetch(url.toString());
+			if (response.ok) {
+				const data = await response.json();
+				trendingResults = data.data || [];
+			}
+		} catch (error) {
+			console.error('Failed to fetch trending:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	async function searchGiphy(query: string) {
+		if (!query.trim()) {
+			searchResults = [];
+			return;
+		}
+
+		isLoading = true;
+		try {
+			const url = new URL('https://api.giphy.com/v1/gifs/search');
+			url.searchParams.set('api_key', PUBLIC_GIPHY_API_TOKEN);
+			url.searchParams.set('q', query);
+			url.searchParams.set('limit', '24');
+			url.searchParams.set('rating', 'g');
+			url.searchParams.set('lang', 'en');
+
+			const response = await fetch(url.toString());
+			if (response.ok) {
+				const data = await response.json();
+				searchResults = data.data || [];
+			}
+		} catch (error) {
+			console.error('Failed to search Giphy:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleSearchInput() {
+		if (searchTimeout) clearTimeout(searchTimeout);
+		searchTimeout = setTimeout(() => {
+			searchGiphy(searchQuery);
+		}, 300);
+	}
+
+	function selectGif(gif: GiphyGif) {
+		onselect(gif);
+		resetState();
+	}
+
+	function handleCancel() {
+		oncancel();
+		resetState();
+	}
+
+	function resetState() {
+		searchQuery = '';
+		searchResults = [];
+	}
+
+	$effect(() => {
+		if (open) {
+			fetchTrending();
+		}
+	});
+</script>
+
+<Modal bind:open onOpenChange={(isOpen) => !isOpen && handleCancel()} closeButton={true} class="flex h-[80dvh] max-w-4xl flex-col">
+	<Subheading>{searchQuery.trim() ? 'Search GIPHY' : 'Trending GIFs'}</Subheading>
+
+	<Input
+		bind:value={searchQuery}
+		oninput={handleSearchInput}
+		placeholder="Search for GIFs..."
+		class="w-full"
+	/>
+
+	<div class="mt-4 flex-1 overflow-y-auto">
+		{#if isLoading && displayResults.length === 0}
+			<div class="flex h-[300px] items-center justify-center">
+				<p class="text-base-500">Loading...</p>
+			</div>
+		{:else if displayResults.length > 0}
+			<div class="flex items-start gap-3">
+				{#each columns() as column}
+					<div class="flex w-1/4 flex-col gap-3">
+						{#each column as gif}
+							<button
+								onclick={() => selectGif(gif)}
+								aria-label={gif.title}
+								class="block shrink-0 overflow-hidden rounded-xl transition-transform hover:scale-[1.02] focus:ring-2 focus:ring-accent-500 focus:outline-none"
+							>
+								<video
+									src={gif.images.fixed_height.mp4}
+									autoplay
+									loop
+									muted
+									playsinline
+									class="block w-full bg-base-200 dark:bg-base-800"
+									style="aspect-ratio: {gif.images.fixed_height.width} / {gif.images.fixed_height.height}"
+								></video>
+							</button>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		{:else if searchQuery}
+			<div class="flex h-[300px] items-center justify-center">
+				<p class="text-base-500">No results found</p>
+			</div>
+		{/if}
+	</div>
+
+	<div class="mt-4 flex items-center justify-between">
+		<img src={PoweredByGiphy} alt="Powered by GIPHY" class="h-7 rounded-md" />
+		<Button onclick={handleCancel} variant="ghost">Cancel</Button>
+	</div>
+</Modal>

src/lib/cards/GIFCard/index.ts

···
 import type { CardDefinition } from '../types';
+import CreateGifCardModal from './CreateGifCardModal.svelte';
 import EditingGifCard from './EditingGifCard.svelte';
 import GifCard from './GifCard.svelte';
 import GifCardSettings from './GifCardSettings.svelte';
···
 	type: 'gif',
 	contentComponent: GifCard,
 	editingContentComponent: EditingGifCard,
+	creationModalComponent: CreateGifCardModal,
 	createNew: (card) => {
 		card.cardType = 'gif';
 		card.cardData = {
···
 	minW: 1,
 	minH: 1,
 	onUrlHandler: (url, item) => {
-		const gifUrlPatterns = [/\.gif(\?.*)?$/i, /giphy\.com\/gifs\//i, /media\.giphy\.com/i];
+		// Match Giphy page URLs: https://giphy.com/gifs/name-ID or https://giphy.com/gifs/ID
+		const pageMatch = url.match(/giphy\.com\/gifs\/(?:.*-)?([a-zA-Z0-9]+)(?:\?|$)/);
+		if (pageMatch) {
+			item.cardData.url = `https://media.giphy.com/media/${pageMatch[1]}/giphy.mp4`;
+			return item;
+		}
 
-		if (gifUrlPatterns.some((pattern) => pattern.test(url))) {
-			// Convert Giphy page URLs to direct media URLs
-			const giphyMatch = url.match(/giphy\.com\/gifs\/(?:.*-)?([a-zA-Z0-9]+)(?:\?|$)/);
-			if (giphyMatch) {
-				item.cardData.url = `https://media.giphy.com/media/${giphyMatch[1]}/giphy.gif`;
-			} else {
-				item.cardData.url = url;
-			}
+		// Match Giphy media URLs: https://media.giphy.com/media/ID/giphy.gif or .mp4
+		const mediaMatch = url.match(/media\.giphy\.com\/media\/([a-zA-Z0-9]+)\//);
+		if (mediaMatch) {
+			item.cardData.url = `https://media.giphy.com/media/${mediaMatch[1]}/giphy.mp4`;
 			return item;
 		}
+
 		return null;
 	},
-	urlHandlerPriority: 5
+	urlHandlerPriority: 5,
+	name: 'GIF'
 } as CardDefinition & { type: 'gif' };

src/lib/cards/LivestreamCard/index.ts

···
 			| undefined;
 		const values = Object.values(records);
 		if (values?.length > 0) {
-			const latest = JSON.parse(JSON.stringify(values[0]));
+			const latest = JSON.parse(JSON.stringify(values?.[0]));
 
 			latestLivestream = {
 				createdAt: latest.value.createdAt,
-				title: latest.value.title as string,
-				thumb: getImageBlobUrl({ link: latest.value.thumb?.ref.$link, did }),
-				href: latest.value.canonicalUrl || latest.value.url,
+				title: latest.value?.title as string,
+				thumb: latest.value?.thumb?.ref?.$link
+					? getImageBlobUrl({ link: latest.value.thumb.ref.$link, did })
+					: undefined,
+				href: latest.value?.canonicalUrl || latest.value.url,
 				online: undefined
 			};
 		}

src/routes/api/giphy/+server.ts

···
-import { env } from '$env/dynamic/private';
-import { json } from '@sveltejs/kit';
-
-export async function GET({ url }) {
-	const q = url.searchParams.get('q');
-	const offset = url.searchParams.get('offset') || '0';
-	const limit = url.searchParams.get('limit') || '24';
-
-	if (!q) {
-		return json({ error: 'No search query provided' }, { status: 400 });
-	}
-
-	const apiKey = env.GIPHY_API_TOKEN;
-	if (!apiKey) {
-		return json({ error: 'Giphy API not configured' }, { status: 500 });
-	}
-
-	const giphyUrl = new URL('https://api.giphy.com/v1/gifs/search');
-	giphyUrl.searchParams.set('api_key', apiKey);
-	giphyUrl.searchParams.set('q', q);
-	giphyUrl.searchParams.set('limit', limit);
-	giphyUrl.searchParams.set('offset', offset);
-	giphyUrl.searchParams.set('rating', 'g');
-	giphyUrl.searchParams.set('lang', 'en');
-
-	try {
-		const response = await fetch(giphyUrl.toString());
-		if (!response.ok) {
-			throw new Error(`Giphy API error: ${response.status}`);
-		}
-		const data = await response.json();
-		return json(data);
-	} catch (error) {
-		console.error('Error fetching from Giphy:', error);
-		return json({ error: 'Failed to fetch from Giphy' }, { status: 500 });
-	}
-}