From 76449fb6ef9b3eb327b6d059614d0da31c9d8e1f Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 22 Apr 2024 23:39:32 +0100 Subject: [PATCH 1/3] [GIFs] Replace GIPHY with Tenor (#3651) * replace GIPHY with Tenor * remove "directly" wording * replace GIPHY wording * remove log --- src/components/dialogs/GifSelect.tsx | 65 ++-- src/lib/constants.ts | 14 +- src/state/queries/giphy.ts | 280 ------------------ src/state/queries/tenor.ts | 177 +++++++++++ src/view/com/composer/Composer.tsx | 17 +- src/view/com/composer/photos/SelectGifBtn.tsx | 2 +- 6 files changed, 220 insertions(+), 335 deletions(-) delete mode 100644 src/state/queries/giphy.ts create mode 100644 src/state/queries/tenor.ts diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx index a8fe016d10..41612aa5d9 100644 --- a/src/components/dialogs/GifSelect.tsx +++ b/src/components/dialogs/GifSelect.tsx @@ -5,7 +5,6 @@ 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' @@ -13,7 +12,11 @@ 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 = snapPoints = ['100%'] break case 'hide': default: - content = + content = 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() - - 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({ { 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 ( - + - Permission to use GIPHY + Permission to use Tenor - Bluesky uses GIPHY to provide the GIF selector feature. + Bluesky uses Tenor to provide the GIF selector feature. - GIPHY may collect information about you and your device. You can - find out more in their{' '} - control.close()}> - privacy policy - - . + 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. - - - - ) -} - function DialogError({details}: {details?: string}) { const {_} = useLingui() const control = Dialog.useDialogContext() diff --git a/src/view/screens/PreferencesExternalEmbeds.tsx b/src/view/screens/PreferencesExternalEmbeds.tsx index 1e8cedf7e2..5eec7e5077 100644 --- a/src/view/screens/PreferencesExternalEmbeds.tsx +++ b/src/view/screens/PreferencesExternalEmbeds.tsx @@ -1,25 +1,26 @@ import React from 'react' import {StyleSheet, View} from 'react-native' +import {Trans} from '@lingui/macro' import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {s} from 'lib/styles' -import {Text} from '../com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' + import { EmbedPlayerSource, externalEmbedLabels, } from '#/lib/strings/embed-player' import {useSetMinimalShellMode} from '#/state/shell' -import {Trans} from '@lingui/macro' -import {ScrollView} from '../com/util/Views' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' import { useExternalEmbedsPrefs, useSetExternalEmbedPref, } from 'state/preferences' import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {SimpleViewHeader} from '../com/util/SimpleViewHeader' +import {Text} from '../com/util/text/Text' +import {ScrollView} from '../com/util/Views' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -74,13 +75,16 @@ export function PreferencesExternalEmbeds({}: Props) { Enable media players for - {Object.entries(externalEmbedLabels).map(([key, label]) => ( - - ))} + {Object.entries(externalEmbedLabels) + // TODO: Remove special case when we disable the old integration. + .filter(([key]) => key !== 'tenor') + .map(([key, label]) => ( + + ))} ) From 49b5d420e6ae7c3c9cfd56f47248b686f5c0128a Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 23 Apr 2024 00:37:46 +0100 Subject: [PATCH 3/3] rm country param (#3653) --- src/state/queries/tenor.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/state/queries/tenor.ts b/src/state/queries/tenor.ts index 66cfcec6af..80c57479e6 100644 --- a/src/state/queries/tenor.ts +++ b/src/state/queries/tenor.ts @@ -65,10 +65,6 @@ function createTenorApi( if (locale) { params.set('locale', locale.languageTag.replace('-', '_')) - - if (locale.regionCode) { - params.set('country', locale.regionCode) - } } for (const [key, value] of Object.entries(input)) {