diff options
Diffstat (limited to 'src/components/dialogs')
| -rw-r--r-- | src/components/dialogs/GifSelect.tsx | 65 |
1 files changed, 27 insertions, 38 deletions
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx index a8fe016d1..41612aa5d 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 = <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 |