diff --git a/frontend/app/public/assets/giphy_small.gif b/frontend/app/public/assets/giphy_small.gif deleted file mode 100644 index 7a39f0abe0..0000000000 Binary files a/frontend/app/public/assets/giphy_small.gif and /dev/null differ diff --git a/frontend/app/public/assets/powered_by_tenor.svg b/frontend/app/public/assets/powered_by_tenor.svg new file mode 100644 index 0000000000..18d915b532 --- /dev/null +++ b/frontend/app/public/assets/powered_by_tenor.svg @@ -0,0 +1,34 @@ + + + + PB_tenor_logo_blue_horizontal + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/app/rollup.config.mjs b/frontend/app/rollup.config.mjs index c5f97db34b..90cd32e682 100644 --- a/frontend/app/rollup.config.mjs +++ b/frontend/app/rollup.config.mjs @@ -275,7 +275,7 @@ export default { "process.env.USERGEEK_APIKEY": JSON.stringify(process.env.USERGEEK_APIKEY), "process.env.VIDEO_BRIDGE_URL": JSON.stringify(process.env.VIDEO_BRIDGE_URL), "process.env.METERED_APIKEY": JSON.stringify(process.env.METERED_APIKEY), - "process.env.GIPHY_APIKEY": JSON.stringify(process.env.GIPHY_APIKEY), + "process.env.TENOR_APIKEY": JSON.stringify(process.env.TENOR_APIKEY), "process.env.CORS_APIKEY": JSON.stringify(process.env.CORS_APIKEY), "process.env.PUBLIC_TRANSLATE_API_KEY": JSON.stringify( process.env.PUBLIC_TRANSLATE_API_KEY, diff --git a/frontend/app/src/components/home/GiphySelector.svelte b/frontend/app/src/components/home/GiphySelector.svelte index dae3a41ae9..092a387503 100644 --- a/frontend/app/src/components/home/GiphySelector.svelte +++ b/frontend/app/src/components/home/GiphySelector.svelte @@ -8,15 +8,12 @@ import { _ } from "svelte-i18n"; import { createEventDispatcher } from "svelte"; import { mobileWidth } from "../../stores/screenDimensions"; - import type { - GIFObject, - PagedGIFObject, - GiphySearchResponse, - GiphyContent, - } from "openchat-client"; + import type { GiphyContent, TenorSearchResponse, TenorObject } from "openchat-client"; import Translatable from "../Translatable.svelte"; import { i18nKey } from "../../i18n/i18n"; + type KeyedTenorObject = TenorObject & { key: string }; + const dispatch = createEventDispatcher(); export let open: boolean; @@ -24,29 +21,29 @@ let refreshing = false; let message = ""; let searchTerm = ""; - let gifs: PagedGIFObject[] = []; + let gifs: KeyedTenorObject[] = []; let gifCache: Record< string, - PagedGIFObject & { top: number; left: number; calculatedHeight: number } + KeyedTenorObject & { top: number; left: number; calculatedHeight: number } > = {}; let timer: number | undefined; let modalWidth = 0; let pageSize = 25; - let pageNum = -1; - let selectedGif: PagedGIFObject | undefined; + let selectedGif: KeyedTenorObject | undefined; let containerElement: HTMLDivElement; const gutter = 5; let imgWidth = 0; + let pos = ""; $: selectedImage = selectedGif === undefined ? undefined : $mobileWidth - ? { ...selectedGif.images.downsized_large } - : { ...selectedGif.images.original }; + ? { ...selectedGif.media_formats.tinygif } + : { ...selectedGif.media_formats.mediumgif }; - const TRENDING_API_URL = `https://api.giphy.com/v1/gifs/trending?api_key=${process.env.GIPHY_APIKEY}&limit=${pageSize}`; - const SEARCH_API_URL = `https://api.giphy.com/v1/gifs/search?api_key=${process.env.GIPHY_APIKEY}&limit=${pageSize}&q=`; + const TRENDING_API_URL = `https://tenor.googleapis.com/v2/featured?contentfilter=off&media_filter=tinygif,mediumgif,mp4&key=${process.env.TENOR_APIKEY}&limit=${pageSize}`; + const SEARCH_API_URL = `https://tenor.googleapis.com/v2/search?contentfilter=off&media_filter=tinygif,mediumgif,mp4&key=${process.env.TENOR_APIKEY}&limit=${pageSize}&q=`; $: { let containerWidth = containerElement?.clientWidth ?? 0; @@ -59,7 +56,7 @@ function sumOfHeightsForColumn( cache: Record< string, - PagedGIFObject & { top: number; left: number; calculatedHeight: number } + KeyedTenorObject & { top: number; left: number; calculatedHeight: number } >, row: number, col: number, @@ -78,15 +75,15 @@ numCols: number, cache: Record< string, - PagedGIFObject & { top: number; left: number; calculatedHeight: number } + KeyedTenorObject & { top: number; left: number; calculatedHeight: number } >, - gif: PagedGIFObject, + gif: KeyedTenorObject, i: number, - ): Record { + ): Record { const col = i % numCols; const row = Math.floor(i / numCols); - const scale = gif.images.fixed_width.width / imgWidth; - const calcHeight = gif.images.fixed_width.height / scale; + const scale = gif.media_formats.tinygif.dims[0] / imgWidth; + const calcHeight = gif.media_formats.tinygif.dims[1] / scale; const key = `${row}_${col}`; cache[key] = { @@ -109,33 +106,31 @@ } timer = window.setTimeout(() => { if (searchTerm.length > 2) { - pageNum = -1; reset(searchTerm); } }, 500); } - function addPagingInfo(index: number, pageNum: number, gif: GIFObject): PagedGIFObject { + function addKey(index: number, pos: string, gif: TenorObject): KeyedTenorObject { return { - groupKey: pageNum, - key: index + pageNum * pageSize, + key: `${index}_${pos}`, ...gif, }; } function getMoreGifs() { refreshing = true; - const offset = pageSize * pageNum; const url = searchTerm === "" - ? `${TRENDING_API_URL}&offset=${offset}` - : `${SEARCH_API_URL}${searchTerm}&offset=${offset}`; + ? `${TRENDING_API_URL}&pos=${pos}` + : `${SEARCH_API_URL}${searchTerm}&pos=${pos}`; return fetch(url) .then((res) => res.json()) - .then((res: GiphySearchResponse) => { - return res.data; + .then((res: TenorSearchResponse) => { + pos = `${res.next}`; + return res.results; }) - .then((res) => res.map((gif, i) => addPagingInfo(i, pageNum, gif))) + .then((res) => res.map((result, i) => addKey(i, pos, result))) .finally(() => (refreshing = false)); } @@ -144,6 +139,7 @@ searchTerm = search; selectedGif = undefined; gifs = []; + pos = ""; nextPage(); } @@ -153,15 +149,15 @@ kind: "giphy_content", title: selectedGif.title, desktop: { - height: Number(selectedGif.images.original.height), - width: Number(selectedGif.images.original.width), - url: selectedGif.images.original.mp4, + height: Number(selectedGif.media_formats.mp4.dims[1]), + width: Number(selectedGif.media_formats.mp4.dims[0]), + url: selectedGif.media_formats.mp4.url, mimeType: "video/mp4", }, mobile: { - height: Number(selectedGif.images.downsized.height), - width: Number(selectedGif.images.downsized.width), - url: selectedGif.images.downsized.url, + height: Number(selectedGif.media_formats.tinygif.dims[1]), + width: Number(selectedGif.media_formats.tinygif.dims[0]), + url: selectedGif.media_formats.tinygif.url, mimeType: "image/gif", }, caption: message === "" ? undefined : message, @@ -171,7 +167,7 @@ } } - function selectGif(gif: PagedGIFObject) { + function selectGif(gif: KeyedTenorObject) { selectedGif = gif; } @@ -181,7 +177,6 @@ async function nextPage() { if (refreshing) return; - pageNum = pageNum + 1; const nextPage = await getMoreGifs(); gifs = [...gifs, ...nextPage]; } @@ -223,7 +218,7 @@ {#if selectedImage !== undefined}
selectedImage.height} + class:landscape={selectedImage.dims[0] > selectedImage.dims[1]} src={selectedImage.url} alt={selectedGif?.title} />
@@ -233,19 +228,17 @@ selectGif(item)} - src={item.images.fixed_width.url} + src={item.media_formats.tinygif.url} style={`width: ${imgWidth}px; top: ${item.top}px; left: ${item.left}px`} alt={item.title} /> {/each} {/if} - {#if selectedGif === undefined}
- Powered by Giphy + Powered by Tenor
{/if} -
; +}; diff --git a/frontend/openchat-shared/src/domain/giphy.ts b/frontend/openchat-shared/src/domain/giphy.ts deleted file mode 100644 index b6d5875808..0000000000 --- a/frontend/openchat-shared/src/domain/giphy.ts +++ /dev/null @@ -1,53 +0,0 @@ -export type GiphySearchResponse = { - data: GIFObject[]; - pagination: PaginationObject; - meta: MetaObject; -}; - -export type PagedGIFObject = GIFObject & { - groupKey: number; - key: number; -}; - -export type GIFObject = { - type: string; - id: string; - slug: string; - url: string; - embeded_url: string; - title: string; - images: ImagesObject; -}; - -export type ImagesObject = { - fixed_height: MultiformatImage; - fixed_width: MultiformatImage; - downsized_large: ImageVariant; - downsized: ImageVariant; - original: MultiformatImage; -}; - -export type NormalisedImage = ImageVariant & { type: "gif" | "mp4" }; - -export type ImageVariant = { - url: string; - height: number; - width: number; -}; - -export type MultiformatImage = ImageVariant & { - mp4: string; - webp: string; -}; - -export type PaginationObject = { - offset: number; - total_count: number; - count: number; -}; - -export type MetaObject = { - msg: string; - status: number; - response_id: string; -}; diff --git a/frontend/openchat-shared/src/domain/index.ts b/frontend/openchat-shared/src/domain/index.ts index 92cefbe497..588e819624 100644 --- a/frontend/openchat-shared/src/domain/index.ts +++ b/frontend/openchat-shared/src/domain/index.ts @@ -10,7 +10,7 @@ export * from "./email"; export * from "./error"; export * from "./events"; export * from "./faq"; -export * from "./giphy"; +export * from "./gif"; export * from "./i18n"; export * from "./identity"; export * from "./inviteCodes"; diff --git a/frontend/turbo.json b/frontend/turbo.json index 6a44547fde..5431746bca 100644 --- a/frontend/turbo.json +++ b/frontend/turbo.json @@ -8,7 +8,7 @@ "ROLLBAR_ACCESS_TOKEN", "TRANSLATE_API_KEY", "PUBLIC_TRANSLATE_API_KEY", - "GIPHY_APIKEY", + "TENOR_APIKEY", "CORS_APIKEY" ], "pipeline": {