your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { ContentComponentProps } from '../types';
3 import GiphySearchModal from './GiphySearchModal.svelte';
4
5 let { item = $bindable() }: ContentComponentProps = $props();
6
7 let hasError = $state(false);
8 let isSearchOpen = $state(false);
9
10 function handleGifSelect(gif: {
11 id: string;
12 title: string;
13 images: { original: { mp4: string } };
14 }) {
15 item.cardData.url = gif.images.original.mp4;
16 item.cardData.alt = gif.title;
17 hasError = false;
18 isSearchOpen = false;
19 }
20
21 function openSearch() {
22 isSearchOpen = true;
23 }
24</script>
25
26<!-- svelte-ignore a11y_no_static_element_interactions -->
27<!-- svelte-ignore a11y_click_events_have_key_events -->
28<div class="group relative h-full w-full cursor-pointer overflow-hidden" onclick={openSearch}>
29 {#if item.cardData.url && !hasError}
30 <video
31 class="absolute inset-0 h-full w-full object-cover"
32 src={item.cardData.url}
33 autoplay
34 loop
35 muted
36 playsinline
37 onerror={() => (hasError = true)}
38 ></video>
39 <!-- Click to change overlay -->
40 <div
41 class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
42 >
43 <span class="text-sm font-medium text-white">Click to change</span>
44 </div>
45 {:else}
46 <!-- Empty state -->
47 <div
48 class="bg-base-100 dark:bg-base-900 flex h-full w-full flex-col items-center justify-center gap-3 p-4"
49 >
50 <div
51 class="border-base-300 dark:border-base-700 flex size-12 items-center justify-center rounded-xl border-2 border-dashed"
52 >
53 <svg
54 xmlns="http://www.w3.org/2000/svg"
55 fill="none"
56 viewBox="0 0 24 24"
57 stroke-width="1.5"
58 stroke="currentColor"
59 class="text-base-400 dark:text-base-600 size-6"
60 >
61 <path
62 stroke-linecap="round"
63 stroke-linejoin="round"
64 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"
65 />
66 </svg>
67 </div>
68 <div class="text-center">
69 <p class="text-base-700 dark:text-base-300 text-sm font-medium">Click to search GIPHY</p>
70 </div>
71 </div>
72 {/if}
73</div>
74
75<GiphySearchModal
76 bind:open={isSearchOpen}
77 onselect={handleGifSelect}
78 oncancel={() => (isSearchOpen = false)}
79/>