your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { ContentComponentProps } from '../types';
3
4 let { item }: ContentComponentProps = $props();
5
6 let hasError = $state(false);
7</script>
8
9<div class="relative h-full w-full overflow-hidden">
10 {#key item.cardData.url}
11 {#if item.cardData.url && !hasError}
12 <video
13 class="absolute inset-0 h-full w-full object-cover"
14 src={item.cardData.url}
15 autoplay
16 loop
17 muted
18 playsinline
19 onerror={() => (hasError = true)}
20 ></video>
21 {:else}
22 <div class="bg-base-100 dark:bg-base-900 flex h-full w-full items-center justify-center">
23 <svg
24 xmlns="http://www.w3.org/2000/svg"
25 fill="none"
26 viewBox="0 0 24 24"
27 stroke-width="1.5"
28 stroke="currentColor"
29 class="text-base-400 dark:text-base-600 size-12"
30 >
31 <path
32 stroke-linecap="round"
33 stroke-linejoin="round"
34 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"
35 />
36 </svg>
37 </div>
38 {/if}
39 {/key}
40</div>