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 defaultColor: 'transparent',
25 allowSetColor: false,
26 minW: 1,
27 minH: 1,
28 canHaveLabel: true,
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
49 keywords: ['animation', 'giphy', 'meme', 'tenor'],
50 groups: ['Media'],
51 icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12.75 8.25v7.5m-6-3.75h3v3.75m-3-7.5h3M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" /></svg>`
52} as CardDefinition & { type: 'gif' };