your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { videoPlayer } from '$lib/components/YoutubeVideoPlayer.svelte';
3 import type { ContentComponentProps } from '../types';
4
5 let { item }: ContentComponentProps = $props();
6
7 let isPlaying = $state(false);
8</script>
9
10{#if isPlaying && item.cardData.showInline}
11 <iframe
12 class="absolute inset-0 h-full w-full"
13 src="https://www.youtube.com/embed/{item.cardData.youtubeId}?autoplay=1"
14 title="YouTube video player"
15 frameborder="0"
16 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
17 allowfullscreen
18 ></iframe>
19{:else}
20 <img
21 class={[
22 'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
23 item.cardData.href ? 'group-hover:scale-102' : ''
24 ]}
25 src={item.cardData.poster}
26 alt=""
27 />
28 <button
29 onclick={() => {
30 if (item.cardData.showInline) isPlaying = true;
31 else videoPlayer.show(item.cardData.youtubeId);
32 }}
33 class="absolute inset-0 flex h-full w-full cursor-pointer items-center justify-center"
34 >
35 <span class="sr-only">
36 {item.cardData.hrefText ?? 'Learn more'}
37 </span>
38
39 <svg xmlns="http://www.w3.org/2000/svg" class="text-accent-500 w-14" viewBox="0 0 256 180"
40 ><path
41 fill="currentColor"
42 d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
43 /><path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /></svg
44 >
45 </button>
46{/if}