[APP-2067] Rebuild GIF Dialog (#10261)
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Spence Pope
@@ -1,108 +0,0 @@
|
||||
import {Platform} from 'react-native'
|
||||
import {getLocales} from 'expo-localization'
|
||||
import {keepPreviousData, useInfiniteQuery} from '@tanstack/react-query'
|
||||
|
||||
import {GIF_KLIPY_FEATURED, GIF_KLIPY_SEARCH} from '#/lib/constants'
|
||||
import {logger} from '#/logger'
|
||||
import {type Gif} from '#/state/queries/tenor'
|
||||
|
||||
export const RQKEY_ROOT = 'klipy-gif-service'
|
||||
export const RQKEY_FEATURED = [RQKEY_ROOT, 'featured']
|
||||
export const RQKEY_SEARCH = (query: string) => [RQKEY_ROOT, 'search', query]
|
||||
|
||||
const getTrendingGifs = createKlipyApi(GIF_KLIPY_FEATURED)
|
||||
const searchGifs = createKlipyApi<{q: string}>(GIF_KLIPY_SEARCH)
|
||||
|
||||
export function useFeaturedGifsQuery(options?: {enabled?: boolean}) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: RQKEY_FEATURED,
|
||||
queryFn: ({pageParam}) => getTrendingGifs({pos: pageParam}),
|
||||
initialPageParam: undefined as string | undefined,
|
||||
getNextPageParam: lastPage => lastPage.next,
|
||||
enabled: options?.enabled,
|
||||
})
|
||||
}
|
||||
|
||||
export function useGifSearchQuery(
|
||||
query: string,
|
||||
options?: {enabled?: boolean},
|
||||
) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: RQKEY_SEARCH(query),
|
||||
queryFn: ({pageParam}) => searchGifs({q: query, pos: pageParam}),
|
||||
initialPageParam: undefined as string | undefined,
|
||||
getNextPageParam: lastPage => lastPage.next,
|
||||
enabled: !!query && options?.enabled !== false,
|
||||
placeholderData: keepPreviousData,
|
||||
})
|
||||
}
|
||||
|
||||
function createKlipyApi<Input extends object>(
|
||||
urlFn: (params: string) => string,
|
||||
): (input: Input & {pos?: string}) => Promise<{
|
||||
next: string
|
||||
results: Gif[]
|
||||
}> {
|
||||
return async input => {
|
||||
const params = new URLSearchParams()
|
||||
|
||||
params.set(
|
||||
'client_key',
|
||||
Platform.select({
|
||||
ios: 'bluesky-ios',
|
||||
android: 'bluesky-android',
|
||||
default: 'bluesky-web',
|
||||
}),
|
||||
)
|
||||
|
||||
// 30 is divisible by 2 and 3, so both 2 and 3 column layouts can be used
|
||||
params.set('limit', '30')
|
||||
|
||||
params.set('contentfilter', 'high')
|
||||
|
||||
const locale = getLocales?.()?.[0]
|
||||
|
||||
if (locale) {
|
||||
params.set('locale', locale.languageTag.replace('-', '_'))
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(input)) {
|
||||
if (value !== undefined) {
|
||||
params.set(key, String(value))
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch(urlFn(params.toString()), {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to fetch KLIPY API (status ${res.status})`)
|
||||
}
|
||||
const body: {next: string; results: Gif[]} = await res.json()
|
||||
return {
|
||||
next: body.next,
|
||||
results: body.results,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Rewrites a KLIPY static CDN URL through the bsky proxy
|
||||
* (k.gifs.bsky.app). Mirrors `tenorUrlToBskyGifUrl`, but uses a
|
||||
* separate hostname from Tenor's t.gifs.bsky.app so the two
|
||||
* upstreams can be routed independently.
|
||||
*/
|
||||
export function klipyUrlToBskyGifUrl(klipyUrl: string) {
|
||||
let url
|
||||
try {
|
||||
url = new URL(klipyUrl)
|
||||
} catch (e) {
|
||||
logger.debug('invalid url passed to klipyUrlToBskyGifUrl()')
|
||||
return ''
|
||||
}
|
||||
url.hostname = 'k.gifs.bsky.app'
|
||||
return url.href
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import {type QueryClient, useQuery} from '@tanstack/react-query'
|
||||
import {type ResolvedLink, resolveGif, resolveLink} from '#/lib/api/resolve'
|
||||
import {STALE} from '#/state/queries/index'
|
||||
import {useAgent} from '#/state/session'
|
||||
import {type Gif} from './tenor'
|
||||
import {type Gif} from '#/features/gifPicker/types'
|
||||
|
||||
export const RQKEY_LINK_ROOT = 'resolve-link'
|
||||
export const RQKEY_LINK = (url: string) => [RQKEY_LINK_ROOT, url]
|
||||
|
||||
@@ -1,218 +0,0 @@
|
||||
import {Platform} from 'react-native'
|
||||
import {getLocales} from 'expo-localization'
|
||||
import {keepPreviousData, useInfiniteQuery} from '@tanstack/react-query'
|
||||
|
||||
import {GIF_FEATURED, GIF_SEARCH} from '#/lib/constants'
|
||||
import {logger} from '#/logger'
|
||||
|
||||
export const RQKEY_ROOT = 'gif-service'
|
||||
export const RQKEY_FEATURED = [RQKEY_ROOT, 'featured']
|
||||
export const RQKEY_SEARCH = (query: string) => [RQKEY_ROOT, 'search', query]
|
||||
|
||||
const getTrendingGifs = createTenorApi(GIF_FEATURED)
|
||||
|
||||
const searchGifs = createTenorApi<{q: string}>(GIF_SEARCH)
|
||||
|
||||
export function useTenorFeaturedGifsQuery(options?: {enabled?: boolean}) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: RQKEY_FEATURED,
|
||||
queryFn: ({pageParam}) => getTrendingGifs({pos: pageParam}),
|
||||
initialPageParam: undefined as string | undefined,
|
||||
getNextPageParam: lastPage => lastPage.next,
|
||||
enabled: options?.enabled,
|
||||
})
|
||||
}
|
||||
|
||||
export function useTenorGifSearchQuery(
|
||||
query: string,
|
||||
options?: {enabled?: boolean},
|
||||
) {
|
||||
return useInfiniteQuery({
|
||||
queryKey: RQKEY_SEARCH(query),
|
||||
queryFn: ({pageParam}) => searchGifs({q: query, pos: pageParam}),
|
||||
initialPageParam: undefined as string | undefined,
|
||||
getNextPageParam: lastPage => lastPage.next,
|
||||
enabled: !!query && options?.enabled !== false,
|
||||
placeholderData: keepPreviousData,
|
||||
})
|
||||
}
|
||||
|
||||
function createTenorApi<Input extends object>(
|
||||
urlFn: (params: string) => string,
|
||||
): (input: Input & {pos?: string}) => Promise<{
|
||||
next: string
|
||||
results: Gif[]
|
||||
}> {
|
||||
return async input => {
|
||||
const params = new URLSearchParams()
|
||||
|
||||
// set client key based on platform
|
||||
params.set(
|
||||
'client_key',
|
||||
Platform.select({
|
||||
ios: 'bluesky-ios',
|
||||
android: 'bluesky-android',
|
||||
default: 'bluesky-web',
|
||||
}),
|
||||
)
|
||||
|
||||
// 30 is divisible by 2 and 3, so both 2 and 3 column layouts can be used
|
||||
params.set('limit', '30')
|
||||
|
||||
params.set('contentfilter', 'high')
|
||||
|
||||
params.set(
|
||||
'media_filter',
|
||||
(['preview', 'gif', 'tinygif'] satisfies ContentFormats[]).join(','),
|
||||
)
|
||||
|
||||
const locale = getLocales?.()?.[0]
|
||||
|
||||
if (locale) {
|
||||
params.set('locale', locale.languageTag.replace('-', '_'))
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(input)) {
|
||||
if (value !== undefined) {
|
||||
params.set(key, String(value))
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch(urlFn(params.toString()), {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to fetch Tenor API')
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
}
|
||||
|
||||
export function tenorUrlToBskyGifUrl(tenorUrl: string) {
|
||||
let url
|
||||
try {
|
||||
url = new URL(tenorUrl)
|
||||
} catch (e) {
|
||||
logger.debug('invalid url passed to tenorUrlToBskyGifUrl()')
|
||||
return ''
|
||||
}
|
||||
url.hostname = 't.gifs.bsky.app'
|
||||
return url.href
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the appropriate URL for a GIF preview image.
|
||||
* Tenor URLs (media.tenor.com) are routed through t.gifs.bsky.app;
|
||||
* KLIPY URLs (static.klipy.com) are routed through k.gifs.bsky.app.
|
||||
*/
|
||||
export function gifPreviewUrl(gifUrl: string) {
|
||||
try {
|
||||
const url = new URL(gifUrl)
|
||||
if (url.hostname === 'media.tenor.com') {
|
||||
url.hostname = 't.gifs.bsky.app'
|
||||
return url.href
|
||||
}
|
||||
if (url.hostname === 'static.klipy.com') {
|
||||
url.hostname = 'k.gifs.bsky.app'
|
||||
return url.href
|
||||
}
|
||||
return gifUrl
|
||||
} catch (e) {
|
||||
logger.debug('invalid url passed to gifPreviewUrl()')
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
export type Gif = {
|
||||
/**
|
||||
* A Unix timestamp that represents when this post was created.
|
||||
*/
|
||||
created: number
|
||||
/**
|
||||
* Returns true if this post contains audio.
|
||||
* Note: Only video formats support audio. The GIF image file format can't contain audio information.
|
||||
*/
|
||||
hasaudio: boolean
|
||||
/**
|
||||
* Tenor result identifier
|
||||
*/
|
||||
id: string
|
||||
/**
|
||||
* A dictionary with a content format as the key and a Media Object as the value.
|
||||
*/
|
||||
media_formats: Record<BaseContentFormats, MediaObject> &
|
||||
Partial<Record<VideoContentFormats, MediaObject>>
|
||||
/**
|
||||
* An array of tags for the post
|
||||
*/
|
||||
tags: string[]
|
||||
/**
|
||||
* The title of the post
|
||||
*/
|
||||
title: string
|
||||
/**
|
||||
* A textual description of the content.
|
||||
* We recommend that you use content_description for user accessibility features.
|
||||
*/
|
||||
content_description: string
|
||||
/**
|
||||
* The full URL to view the post on tenor.com.
|
||||
*/
|
||||
itemurl: string
|
||||
/**
|
||||
* Returns true if this post contains captions.
|
||||
*/
|
||||
hascaption: boolean
|
||||
/**
|
||||
* Comma-separated list to signify whether the content is a sticker or static image, has audio, or is any combination of these. If sticker and static aren't present, then the content is a GIF. A blank flags field signifies a GIF without audio.
|
||||
*/
|
||||
flags: string
|
||||
/**
|
||||
* The most common background pixel color of the content
|
||||
*/
|
||||
bg_color?: string
|
||||
/**
|
||||
* A short URL to view the post on tenor.com.
|
||||
*/
|
||||
url: string
|
||||
}
|
||||
|
||||
type MediaObject = {
|
||||
/**
|
||||
* A URL to the media source
|
||||
*/
|
||||
url: string
|
||||
/**
|
||||
* Width and height of the media in pixels
|
||||
*/
|
||||
dims: [number, number]
|
||||
/**
|
||||
* Represents the time in seconds for one loop of the content. If the content is static, the duration is set to 0.
|
||||
*/
|
||||
duration: number
|
||||
/**
|
||||
* Size of the file in bytes
|
||||
*/
|
||||
size: number
|
||||
}
|
||||
|
||||
type BaseContentFormats =
|
||||
| 'preview'
|
||||
| 'gif'
|
||||
// | 'mediumgif'
|
||||
| 'tinygif'
|
||||
// | 'nanogif'
|
||||
|
||||
type VideoContentFormats =
|
||||
| 'mp4'
|
||||
// | 'loopedmp4'
|
||||
// | 'tinymp4'
|
||||
// | 'nanomp4'
|
||||
| 'webm'
|
||||
// | 'tinywebm'
|
||||
// | 'nanowebm'
|
||||
|
||||
type ContentFormats = BaseContentFormats | VideoContentFormats
|
||||
Reference in New Issue
Block a user