src/services/search/giphy.ts
import { SearchBaseClass } from "../../helpers/search";
export interface GIPHYResult {
id: string;
title: string;
url: string;
images: {
downsized_large: { url: string };
preview_gif: { url: string };
};
user?: {
avatar_url: string;
display_name: string;
profile_url: string;
};
}
export default class GIPHY extends SearchBaseClass<GIPHYResult> {
constructor(apiKey: string) {
super({
apiKey,
name: "giphy",
icon: `<svg aria-hidden="true" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="#000" d="M54 29h149v198H54z"/><path fill="#04FF8E" d="M24 22h30v212H24z"/><path fill="#8E2EFF" d="M203 80h30v154h-30z"/><path fill="#00C5FF" d="M24 227h209v29H24z"/><path fill="#FFF152" d="M24 0h119v29H24z"/><path fill="#FF5B5B" d="M203 59V29h-30V0h-30v88h90V59"/><path fill="#551C99" d="M203 117V88h30"/><path fill="#999131" d="M143 0v29h-29"/></g></svg>`,
color: "#a800ff",
noRecolor: true,
poweredByUrl: "https://giphy.com",
popularEndpoint: (apiKey: string) =>
`https://api.giphy.com/v1/gifs/trending?api_key=${apiKey}&limit=18&rating=G`,
searchEndpoint: (apiKey: string, query: string) =>
`https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=${encodeURIComponent(
query
)}&limit=18&offset=0&rating=G&lang=en`,
getButton: (image: GIPHYResult) => `<div class="result">
<button aria-label="${image.title}" data-full-url="${image.images.downsized_large.url}" style="background-image: url('${image.images.preview_gif.url}')"></button></div>`,
getSearchResults: (response: { data: GIPHYResult[] }) => response.data,
getPopularResults: (response: { data: GIPHYResult[] }) => response.data,
});
}
}