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
45 groups: ['Media']
46} as CardDefinition & { type: typeof cardType };
47
48// Match Spotify album and playlist URLs
49// Examples:
50// https://open.spotify.com/album/1DFixLWuPkv3KT3TnV35m3
51// https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M
52function matchSpotifyUrl(
53 url: string | undefined
54): { type: 'album' | 'playlist'; id: string } | null {
55 if (!url) return null;
56
57 const pattern = /open\.spotify\.com\/(album|playlist)\/([a-zA-Z0-9]+)/;
58 const match = url.match(pattern);
59
60 if (match) {
61 return {
62 type: match[1] as 'album' | 'playlist',
63 id: match[2]
64 };
65 }
66
67 return null;
68}