feat: use t.gifs cdn for tenor search results (#8574)

__tests__/lib/string.test.ts

@@ -6,6 +6,7 @@ import {
   createStarterPackLinkFromAndroidReferrer,
   parseStarterPackUri,
 } from '#/lib/strings/starter-pack'
+import {tenorUrlToBskyGifUrl} from '#/state/queries/tenor'
 import {cleanError} from '../../src/lib/strings/errors'
 import {createFullHandle, makeValidHandle} from '../../src/lib/strings/handles'
 import {enforceLen} from '../../src/lib/strings/helpers'
@@ -997,3 +998,18 @@ describe('createStarterPackGooglePlayUri', () => {
     expect(createStarterPackGooglePlayUri(undefined, 'rkey')).toEqual(null)
   })
 })
+
+describe('tenorUrlToBskyGifUrl', () => {
+  const inputs = [
+    'https://media.tenor.com/someID_AAAAC/someName.gif',
+    'https://media.tenor.com/someID/someName.gif',
+  ]
+
+  it.each(inputs)(
+    'returns url with t.gifs.bsky.app as hostname for input url',
+    input => {
+      const out = tenorUrlToBskyGifUrl(input)
+      expect(out.startsWith('https://t.gifs.bsky.app/')).toEqual(true)
+    },
+  )
+})

src/components/dialogs/GifSelect.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import {TextInput, View} from 'react-native'
+import {type TextInput, View} from 'react-native'
 import {useWindowDimensions} from 'react-native'
 import {Image} from 'expo-image'
 import {msg, Trans} from '@lingui/macro'
@@ -15,13 +15,14 @@ import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {isWeb} from '#/platform/detection'
 import {
-  Gif,
+  type Gif,
+  tenorUrlToBskyGifUrl,
   useFeaturedGifsQuery,
   useGifSearchQuery,
 } from '#/state/queries/tenor'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {ListMethods} from '#/view/com/util/List'
+import {type ListMethods} from '#/view/com/util/List'
 import {atoms as a, ios, native, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -316,7 +317,7 @@ export function GifPreview({
             t.atoms.bg_contrast_25,
           ]}
           source={{
-            uri: gif.media_formats.tinygif.url,
+            uri: tenorUrlToBskyGifUrl(gif.media_formats.tinygif.url),
           }}
           contentFit="cover"
           accessibilityLabel={gif.title}

src/state/queries/tenor.ts

@@ -3,6 +3,7 @@ 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']
@@ -86,6 +87,18 @@ function createTenorApi<Input extends object>(
   }
 }
 
+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
+}
+
 export type Gif = {
   /**
    * A Unix timestamp that represents when this post was created.