flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { Alert, Button, Input, Subheading } from '@foxui/core';
3 import Modal from '$lib/components/modal/Modal.svelte';
4 import type { CreationModalComponentProps } from '../../types';
5
6 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
7
8 let errorMessage = $state('');
9
10 function checkUrl() {
11 errorMessage = '';
12
13 const pattern = /music\.apple\.com\/([a-z]{2})\/(album|playlist)\/[^/]+\/([a-zA-Z0-9.]+)/;
14 const match = item.cardData.href?.match(pattern);
15
16 if (!match) {
17 errorMessage = 'Please enter a valid Apple Music album or playlist URL';
18 return false;
19 }
20
21 item.cardData.appleMusicStorefront = match[1];
22 item.cardData.appleMusicType = match[2];
23 item.cardData.appleMusicId = match[3];
24
25 return true;
26 }
27</script>
28
29<Modal open={true} closeButton={false}>
30 <Subheading>Enter an Apple Music album or playlist URL</Subheading>
31 <Input
32 bind:value={item.cardData.href}
33 placeholder="https://music.apple.com/us/album/..."
34 onkeydown={(e) => {
35 if (e.key === 'Enter' && checkUrl()) oncreate();
36 }}
37 />
38
39 {#if errorMessage}
40 <Alert type="error" title="Invalid URL"><span>{errorMessage}</span></Alert>
41 {/if}
42
43 <div class="mt-4 flex justify-end gap-2">
44 <Button onclick={oncancel} variant="ghost">Cancel</Button>
45 <Button
46 onclick={() => {
47 if (checkUrl()) oncreate();
48 }}
49 >
50 Create
51 </Button>
52 </div>
53</Modal>