diff --git a/modules/expo-bluesky-gif-view/ios/ExpoBlueskyGifViewModule.swift b/modules/expo-bluesky-gif-view/ios/ExpoBlueskyGifViewModule.swift index a45b5db134..7c7132290d 100644 --- a/modules/expo-bluesky-gif-view/ios/ExpoBlueskyGifViewModule.swift +++ b/modules/expo-bluesky-gif-view/ios/ExpoBlueskyGifViewModule.swift @@ -7,14 +7,7 @@ public class ExpoBlueskyGifViewModule: Module { Name("ExpoBlueskyGifView") OnCreate { - // See expo-image. SDImageAWebPCoder is preferred (and uses Apple's own WebP coder) - // but only is available on 14.0+. We probably don't have many users on iOS 13 but - // for now let's keep it there until RN targets change. - if #available(iOS 14.0, tvOS 14.0, *) { - SDImageCodersManager.shared.addCoder(SDImageAWebPCoder.shared) - } else { - SDImageCodersManager.shared.addCoder(SDImageWebPCoder.shared) - } + SDImageCodersManager.shared.addCoder(SDImageGIFCoder.shared) } AsyncFunction("prefetchAsync") { (sources: [URL]) in diff --git a/src/lib/strings/embed-player.ts b/src/lib/strings/embed-player.ts index cd8f4e16c6..b0907dabc9 100644 --- a/src/lib/strings/embed-player.ts +++ b/src/lib/strings/embed-player.ts @@ -1,4 +1,4 @@ -import {Dimensions} from 'react-native' +import {Dimensions, Platform} from 'react-native' import {isWeb} from 'platform/detection' const {height: SCREEN_HEIGHT} = Dimensions.get('window') @@ -255,16 +255,6 @@ export function parseEmbedPlayerFromUrl( if (urlp.hostname === 'giphy.com' || urlp.hostname === 'www.giphy.com') { const [_, gifs, nameAndId] = urlp.pathname.split('/') - const h = urlp.searchParams.get('hh') - const w = urlp.searchParams.get('ww') - let dimensions - if (h && w) { - dimensions = { - height: Number(h), - width: Number(w), - } - } - /* * nameAndId is a string that consists of the name (dash separated) and the id of the gif (the last part of the name) * We want to get the id of the gif, then direct to media.giphy.com/media/{id}/giphy.webp so we can @@ -281,10 +271,7 @@ export function parseEmbedPlayerFromUrl( isGif: true, hideDetails: true, metaUri: `https://giphy.com/gifs/${gifId}`, - playerUri: `https://i.giphy.com/media/${gifId}/${ - dimensions && isWeb ? 'giphy.mp4' : '200.webp' - }`, - dimensions, + playerUri: `https://i.giphy.com/media/${gifId}/giphy.webp`, } } } @@ -350,21 +337,34 @@ export function parseEmbedPlayerFromUrl( } } - if (urlp.hostname === 'tenor.com' || urlp.hostname === 'www.tenor.com') { - const [_, pathOrIntl, pathOrFilename, intlFilename] = - urlp.pathname.split('/') - const isIntl = pathOrFilename === 'view' - const filename = isIntl ? intlFilename : pathOrFilename + if (urlp.hostname === 'media.tenor.com') { + let [_, id, filename] = urlp.pathname.split('/') - if ((pathOrIntl === 'view' || pathOrFilename === 'view') && filename) { - const includesExt = filename.split('.').pop() === 'gif' + const h = urlp.searchParams.get('hh') + const w = urlp.searchParams.get('ww') + let dimensions + if (h && w) { + dimensions = { + height: Number(h), + width: Number(w), + } + } + + if (id && filename && dimensions && id.includes('AAAAC')) { + if (Platform.OS === 'web') { + id = id.replace('AAAAC', 'AAAP3') + filename = filename.replace('.gif', '.webm') + } else { + id = id.replace('AAAAC', 'AAAAM') + } return { type: 'tenor_gif', source: 'tenor', isGif: true, hideDetails: true, - playerUri: `${url}${!includesExt ? '.gif' : ''}`, + playerUri: `https://t.gifs.bsky.app/${id}/${filename}`, + dimensions, } } } diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 93e2dc6b56..76ebb528d7 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -318,7 +318,7 @@ export const ComposePost = observer(function ComposePost({ const onSelectGif = useCallback( (gif: Gif) => { setExtLink({ - uri: `${gif.media_formats.gif.url}?hh=${gif.media_formats.gif.dims[0]}&ww=${gif.media_formats.gif.dims[1]}`, + uri: `${gif.media_formats.gif.url}?hh=${gif.media_formats.gif.dims[1]}&ww=${gif.media_formats.gif.dims[0]}`, isLoading: true, meta: { url: gif.media_formats.gif.url, diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index 8461ef865a..4f9d223ce5 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -35,10 +35,8 @@ export const ExternalLinkEmbed = ({ return params } }, [link.uri, externalEmbedPrefs]) - const isCompatibleGiphy = - embedPlayerParams?.source === 'giphy' && embedPlayerParams.dimensions - if (isCompatibleGiphy) { + if (embedPlayerParams?.source === 'tenor') { return } @@ -69,14 +67,12 @@ export const ExternalLinkEmbed = ({ paddingHorizontal: isMobile ? 10 : 14, }, ]}> - {!isCompatibleGiphy && ( - - {toNiceDomain(link.uri)} - - )} + + {toNiceDomain(link.uri)} + {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && ( diff --git a/src/view/com/util/post-embeds/GifEmbed.tsx b/src/view/com/util/post-embeds/GifEmbed.tsx index 96cb1c2272..770fb302fb 100644 --- a/src/view/com/util/post-embeds/GifEmbed.tsx +++ b/src/view/com/util/post-embeds/GifEmbed.tsx @@ -1,14 +1,10 @@ import React from 'react' import {Pressable, View} from 'react-native' -import {Image} from 'expo-image' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {EmbedPlayerParams} from 'lib/strings/embed-player' -import {useAutoplayDisabled, useExternalEmbedsPrefs} from 'state/preferences' +import {useAutoplayDisabled} from 'state/preferences' import {atoms as a, useTheme} from '#/alf' -import {useDialogControl} from '#/components/Dialog' -import * as Dialog from '#/components/Dialog' -import {GiphyConsentPrompt} from '#/components/dialogs/GifSelect' import {Loader} from '#/components/Loader' import {GifView} from '../../../../../modules/expo-bluesky-gif-view' import {GifViewStateChangeEvent} from '../../../../../modules/expo-bluesky-gif-view/src/GifView.types' @@ -17,12 +13,10 @@ function PlaybackControls({ onPress, isPlaying, isLoaded, - needsPermissions, }: { onPress: () => void isPlaying: boolean isLoaded: boolean - needsPermissions: boolean }) { const t = useTheme() @@ -41,16 +35,15 @@ function PlaybackControls({ top: 0, bottom: 0, zIndex: 2, - backgroundColor: - !needsPermissions && !isLoaded - ? t.atoms.bg_contrast_25.backgroundColor - : !isPlaying - ? 'rgba(0, 0, 0, 0.3)' - : undefined, + backgroundColor: !isLoaded + ? t.atoms.bg_contrast_25.backgroundColor + : !isPlaying + ? 'rgba(0, 0, 0, 0.3)' + : undefined, }, ]} onPress={onPress}> - {!needsPermissions && !isLoaded ? ( + {!isLoaded ? ( @@ -87,10 +80,7 @@ export function GifEmbed({ params: EmbedPlayerParams thumb?: string }) { - const consentControl = useDialogControl() const autoplayDisabled = useAutoplayDisabled() - const externalEmbedsPrefs = useExternalEmbedsPrefs() - const needsPermissions = externalEmbedsPrefs?.giphy === undefined const playerRef = React.useRef(null) @@ -98,7 +88,7 @@ export function GifEmbed({ isPlaying: boolean isLoaded: boolean }>({ - isPlaying: !autoplayDisabled && !needsPermissions, + isPlaying: !autoplayDisabled, isLoaded: false, }) @@ -110,12 +100,8 @@ export function GifEmbed({ ) const onPress = React.useCallback(() => { - if (needsPermissions) { - consentControl.open() - } else { - playerRef.current?.toggleAsync() - } - }, [consentControl, needsPermissions]) + playerRef.current?.toggleAsync() + }, []) return ( @@ -131,30 +117,15 @@ export function GifEmbed({ onPress={onPress} isPlaying={playerState.isPlaying} isLoaded={playerState.isLoaded} - needsPermissions={needsPermissions} /> - {needsPermissions ? ( - <> - - - - - - - ) : ( - - )} + )