flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { Button, Input, Subheading } from '@foxui/core';
3 import Modal from '$lib/components/modal/Modal.svelte';
4 import type { CreationModalComponentProps } from '../../types';
5 import { matcher } from './index';
6
7 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
8
9 let errorMessage = $state('');
10</script>
11
12<Modal open={true} closeButton={false}>
13 <form
14 onsubmit={() => {
15 const url = item.cardData.href?.trim();
16 if (!url) return;
17
18 const id = matcher(url);
19 if (!id) {
20 errorMessage = 'Please enter a valid YouTube URL';
21 return;
22 }
23
24 item.cardData.youtubeId = id;
25 item.cardData.poster = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
26 item.cardData.showInline = true;
27
28 item.w = 4;
29 item.mobileW = 8;
30 item.h = 3;
31 item.mobileH = 5;
32
33 oncreate?.();
34 }}
35 class="flex flex-col gap-2"
36 >
37 <Subheading>Enter a YouTube URL</Subheading>
38 <Input
39 bind:value={item.cardData.href}
40 placeholder="https://youtube.com/watch?v=..."
41 class="mt-4"
42 />
43
44 {#if errorMessage}
45 <p class="mt-2 text-sm text-red-600">{errorMessage}</p>
46 {/if}
47
48 <div class="mt-4 flex justify-end gap-2">
49 <Button onclick={oncancel} variant="ghost">Cancel</Button>
50 <Button type="submit">Create</Button>
51 </div>
52 </form>
53</Modal>