your personal website on atproto - mirror
blento.app
flo-bit.dev
1import type { CardDefinition } from '../types';
2import CreateGifCardModal from './CreateGifCardModal.svelte';
3import EditingGifCard from './EditingGifCard.svelte';
4import GifCard from './GifCard.svelte';
5import GifCardSettings from './GifCardSettings.svelte';
6
7export const GifCardDefinition = {
8 type: 'gif',
9 contentComponent: GifCard,
10 editingContentComponent: EditingGifCard,
11 creationModalComponent: CreateGifCardModal,
12 createNew: (card) => {
13 card.cardType = 'gif';
14 card.cardData = {
15 url: '',
16 alt: ''
17 };
18 card.w = 2;
19 card.h = 2;
20 card.mobileW = 4;
21 card.mobileH = 4;
22 },
23 settingsComponent: GifCardSettings,
24 sidebarButtonText: 'GIF',
25 defaultColor: 'transparent',
26 allowSetColor: false,
27 minW: 1,
28 minH: 1,
29 onUrlHandler: (url, item) => {
30 // Match Giphy page URLs: https://giphy.com/gifs/name-ID or https://giphy.com/gifs/ID
31 const pageMatch = url.match(/giphy\.com\/gifs\/(?:.*-)?([a-zA-Z0-9]+)(?:\?|$)/);
32 if (pageMatch) {
33 item.cardData.url = `https://media.giphy.com/media/${pageMatch[1]}/giphy.mp4`;
34 return item;
35 }
36
37 // Match Giphy media URLs: https://media.giphy.com/media/ID/giphy.gif or .mp4
38 const mediaMatch = url.match(/media\.giphy\.com\/media\/([a-zA-Z0-9]+)\//);
39 if (mediaMatch) {
40 item.cardData.url = `https://media.giphy.com/media/${mediaMatch[1]}/giphy.mp4`;
41 return item;
42 }
43
44 return null;
45 },
46 urlHandlerPriority: 5,
47 name: 'GIF'
48} as CardDefinition & { type: 'gif' };