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 canHaveLabel: true,
30 onUrlHandler: (url, item) => {
31 // Match Giphy page URLs: https://giphy.com/gifs/name-ID or https://giphy.com/gifs/ID
32 const pageMatch = url.match(/giphy\.com\/gifs\/(?:.*-)?([a-zA-Z0-9]+)(?:\?|$)/);
33 if (pageMatch) {
34 item.cardData.url = `https://media.giphy.com/media/${pageMatch[1]}/giphy.mp4`;
35 return item;
36 }
37
38 // Match Giphy media URLs: https://media.giphy.com/media/ID/giphy.gif or .mp4
39 const mediaMatch = url.match(/media\.giphy\.com\/media\/([a-zA-Z0-9]+)\//);
40 if (mediaMatch) {
41 item.cardData.url = `https://media.giphy.com/media/${mediaMatch[1]}/giphy.mp4`;
42 return item;
43 }
44
45 return null;
46 },
47 urlHandlerPriority: 5,
48 name: 'GIF'
49} as CardDefinition & { type: 'gif' };