[GIFs] Replace GIPHY with Tenor

src/components/dialogs/GifSelect.tsx

@@ -5,15 +5,18 @@ import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {GIPHY_PRIVACY_POLICY} from '#/lib/constants'
 import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {isWeb} from '#/platform/detection'
 import {
   useExternalEmbedsPrefs,
   useSetExternalEmbedPref,
 } from '#/state/preferences'
-import {Gif, useGifphySearch, useGiphyTrending} from '#/state/queries/giphy'
+import {
+  Gif,
+  useFeaturedGifsQuery,
+  useGifSearchQuery,
+} from '#/state/queries/tenor'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
@@ -22,7 +25,6 @@ import * as TextField from '#/components/forms/TextField'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
-import {InlineLinkText} from '#/components/Link'
 import {Button, ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {Text} from '../Typography'
@@ -46,14 +48,14 @@ export function GifSelectDialog({
 
   let content = null
   let snapPoints
-  switch (externalEmbedsPrefs?.giphy) {
+  switch (externalEmbedsPrefs?.tenor) {
     case 'show':
       content = <GifList control={control} onSelectGif={onSelectGif} />
       snapPoints = ['100%']
       break
     case 'hide':
     default:
-      content = <GiphyConsentPrompt control={control} />
+      content = <TenorConsentPrompt control={control} />
       break
   }
 
@@ -90,8 +92,8 @@ function GifList({
 
   const isSearching = search.length > 0
 
-  const trendingQuery = useGiphyTrending()
-  const searchQuery = useGifphySearch(search)
+  const trendingQuery = useFeaturedGifsQuery()
+  const searchQuery = useGifSearchQuery(search)
 
   const {
     data,
@@ -105,17 +107,7 @@ function GifList({
   } = isSearching ? searchQuery : trendingQuery
 
   const flattenedData = useMemo(() => {
-    const uniquenessSet = new Set<string>()
-
-    function filter(gif: Gif) {
-      if (!gif) return false
-      if (uniquenessSet.has(gif.id)) {
-        return false
-      }
-      uniquenessSet.add(gif.id)
-      return true
-    }
-    return data?.pages.flatMap(page => page.data.filter(filter)) || []
+    return data?.pages.flatMap(page => page.results) || []
   }, [data])
 
   const renderItem = useCallback(
@@ -181,7 +173,7 @@ function GifList({
           <TextField.Icon icon={Search} />
           <TextField.Input
             label={_(msg`Search GIFs`)}
-            placeholder={_(msg`Powered by GIPHY`)}
+            placeholder={_(msg`Search Tenor`)}
             onChangeText={text => {
               setSearch(text)
               listRef.current?.scrollToOffset({offset: 0, animated: false})
@@ -223,12 +215,12 @@ function GifList({
                 emptyType="results"
                 sideBorders={false}
                 errorTitle={_(msg`Failed to load GIFs`)}
-                errorMessage={_(msg`There was an issue connecting to GIPHY.`)}
+                errorMessage={_(msg`There was an issue connecting to Tenor.`)}
                 emptyMessage={
                   isSearching
                     ? _(msg`No search results found for "${search}".`)
                     : _(
-                        msg`No trending GIFs found. There may be an issue with GIPHY.`,
+                        msg`No featured GIFs found. There may be an issue with Tenor.`,
                       )
                 }
               />
@@ -287,7 +279,9 @@ function GifPreview({
             {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
             t.atoms.bg_contrast_25,
           ]}
-          source={{uri: gif.images.preview_gif.url}}
+          source={{
+            uri: gif.media_formats.tinygif.url,
+          }}
           contentFit="cover"
           accessibilityLabel={gif.title}
           accessibilityHint=""
@@ -299,61 +293,56 @@ function GifPreview({
   )
 }
 
-function GiphyConsentPrompt({control}: {control: Dialog.DialogControlProps}) {
+function TenorConsentPrompt({control}: {control: Dialog.DialogControlProps}) {
   const {_} = useLingui()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const setExternalEmbedPref = useSetExternalEmbedPref()
 
   const onShowPress = useCallback(() => {
-    setExternalEmbedPref('giphy', 'show')
+    setExternalEmbedPref('tenor', 'show')
   }, [setExternalEmbedPref])
 
   const onHidePress = useCallback(() => {
-    setExternalEmbedPref('giphy', 'hide')
+    setExternalEmbedPref('tenor', 'hide')
     control.close()
   }, [control, setExternalEmbedPref])
 
   const gtMobileWeb = gtMobile && isWeb
 
   return (
-    <Dialog.ScrollableInner label={_(msg`Permission to use GIPHY`)}>
+    <Dialog.ScrollableInner label={_(msg`Permission to use Tenor`)}>
       <View style={a.gap_sm}>
         <Text style={[a.text_2xl, a.font_bold]}>
-          <Trans>Permission to use GIPHY</Trans>
+          <Trans>Permission to use Tenor</Trans>
         </Text>
 
         <View style={[a.mt_sm, a.mb_2xl, a.gap_lg]}>
           <Text>
             <Trans>
-              Bluesky uses GIPHY to provide the GIF selector feature.
+              Bluesky uses Tenor to provide the GIF selector feature.
             </Trans>
           </Text>
 
           <Text style={t.atoms.text_contrast_medium}>
             <Trans>
-              GIPHY may collect information about you and your device. You can
-              find out more in their{' '}
-              <InlineLinkText
-                to={GIPHY_PRIVACY_POLICY}
-                onPress={() => control.close()}>
-                privacy policy
-              </InlineLinkText>
-              .
+              Tenor is a third-party service that provides GIFs for use in
+              Bluesky. By enabling Tenor, requests will be made to Tenor's
+              servers to retrieve the GIFs.
             </Trans>
           </Text>
         </View>
       </View>
       <View style={[a.gap_md, gtMobileWeb && a.flex_row_reverse]}>
         <Button
-          label={_(msg`Enable GIPHY`)}
+          label={_(msg`Enable Tenor`)}
           onPress={onShowPress}
           onAccessibilityEscape={control.close}
           color="primary"
           size={gtMobileWeb ? 'small' : 'medium'}
           variant="solid">
           <ButtonText>
-            <Trans>Enable GIPHY</Trans>
+            <Trans>Enable Tenor</Trans>
           </ButtonText>
         </Button>
         <Button

src/lib/constants.ts

@@ -90,11 +90,9 @@ export const BSKY_FEED_OWNER_DIDS = [
   'did:plc:q6gjnaw2blty4crticxkmujt',
 ]
 
-export const GIPHY_API_URL = 'https://api.giphy.com'
-export const GIPHY_API_KEY = Platform.select({
-  ios: 'ydVxhrQkwlcUjkVKx15mF6vyaNJbMeez',
-  android: 'Vwj3Ib7857dj3EcIg24Hiz1LbRVdGeYF',
-  default: 'vyL3hQQ8AipwcmIB8kFvg0NDs9faWg7G',
-})
-export const GIPHY_PRIVACY_POLICY =
-  'https://support.giphy.com/hc/en-us/articles/360032872931-GIPHY-Privacy-Policy'
+export const GIF_SERVICE = 'https://gifs.bsky.app'
+
+export const GIF_SEARCH = (params: string) =>
+  `${GIF_SERVICE}/tenor/v2/search?${params}`
+export const GIF_FEATURED = (params: string) =>
+  `${GIF_SERVICE}/tenor/v2/featured?${params}`