your personal website on atproto - mirror
blento.app
flo-bit.dev
1import type { CardDefinition } from '../types';
2import CreateSpotifyCardModal from './CreateSpotifyCardModal.svelte';
3import SpotifyCard from './SpotifyCard.svelte';
4
5const cardType = 'spotify-list-embed';
6
7export const SpotifyCardDefinition = {
8 type: cardType,
9 contentComponent: SpotifyCard,
10 creationModalComponent: CreateSpotifyCardModal,
11 sidebarButtonText: 'Spotify Embed',
12
13 createNew: (item) => {
14 item.cardType = cardType;
15 item.cardData = {};
16 item.w = 4;
17 item.mobileW = 8;
18 item.h = 5;
19 item.mobileH = 10;
20 },
21
22 onUrlHandler: (url, item) => {
23 const match = matchSpotifyUrl(url);
24 if (!match) return null;
25
26 item.cardData.spotifyType = match.type;
27 item.cardData.spotifyId = match.id;
28 item.cardData.href = url;
29
30 item.w = 4;
31 item.mobileW = 8;
32 item.h = 5;
33 item.mobileH = 10;
34
35 return item;
36 },
37
38 urlHandlerPriority: 2,
39
40 name: 'Spotify Embed',
41 canResize: true,
42 minW: 4,
43 minH: 5
44} as CardDefinition & { type: typeof cardType };
45
46// Match Spotify album and playlist URLs
47// Examples:
48// https://open.spotify.com/album/1DFixLWuPkv3KT3TnV35m3
49// https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M
50function matchSpotifyUrl(
51 url: string | undefined
52): { type: 'album' | 'playlist'; id: string } | null {
53 if (!url) return null;
54
55 const pattern = /open\.spotify\.com\/(album|playlist)\/([a-zA-Z0-9]+)/;
56 const match = url.match(pattern);
57
58 if (match) {
59 return {
60 type: match[1] as 'album' | 'playlist',
61 id: match[2]
62 };
63 }
64
65 return null;
66}