parent
76449fb6ef
commit
861804629a
|
@ -8,10 +8,6 @@ import {useLingui} from '@lingui/react'
|
||||||
import {logEvent} from '#/lib/statsig/statsig'
|
import {logEvent} from '#/lib/statsig/statsig'
|
||||||
import {cleanError} from '#/lib/strings/errors'
|
import {cleanError} from '#/lib/strings/errors'
|
||||||
import {isWeb} from '#/platform/detection'
|
import {isWeb} from '#/platform/detection'
|
||||||
import {
|
|
||||||
useExternalEmbedsPrefs,
|
|
||||||
useSetExternalEmbedPref,
|
|
||||||
} from '#/state/preferences'
|
|
||||||
import {
|
import {
|
||||||
Gif,
|
Gif,
|
||||||
useFeaturedGifsQuery,
|
useFeaturedGifsQuery,
|
||||||
|
@ -27,7 +23,6 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arr
|
||||||
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
|
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
|
||||||
import {Button, ButtonIcon, ButtonText} from '../Button'
|
import {Button, ButtonIcon, ButtonText} from '../Button'
|
||||||
import {ListFooter, ListMaybePlaceholder} from '../Lists'
|
import {ListFooter, ListMaybePlaceholder} from '../Lists'
|
||||||
import {Text} from '../Typography'
|
|
||||||
|
|
||||||
export function GifSelectDialog({
|
export function GifSelectDialog({
|
||||||
control,
|
control,
|
||||||
|
@ -38,7 +33,6 @@ export function GifSelectDialog({
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
onSelectGif: (gif: Gif) => void
|
onSelectGif: (gif: Gif) => void
|
||||||
}) {
|
}) {
|
||||||
const externalEmbedsPrefs = useExternalEmbedsPrefs()
|
|
||||||
const onSelectGif = useCallback(
|
const onSelectGif = useCallback(
|
||||||
(gif: Gif) => {
|
(gif: Gif) => {
|
||||||
control.close(() => onSelectGifProp(gif))
|
control.close(() => onSelectGifProp(gif))
|
||||||
|
@ -46,19 +40,6 @@ export function GifSelectDialog({
|
||||||
[control, onSelectGifProp],
|
[control, onSelectGifProp],
|
||||||
)
|
)
|
||||||
|
|
||||||
let content = null
|
|
||||||
let snapPoints
|
|
||||||
switch (externalEmbedsPrefs?.tenor) {
|
|
||||||
case 'show':
|
|
||||||
content = <GifList control={control} onSelectGif={onSelectGif} />
|
|
||||||
snapPoints = ['100%']
|
|
||||||
break
|
|
||||||
case 'hide':
|
|
||||||
default:
|
|
||||||
content = <TenorConsentPrompt control={control} />
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderErrorBoundary = useCallback(
|
const renderErrorBoundary = useCallback(
|
||||||
(error: any) => <DialogError details={String(error)} />,
|
(error: any) => <DialogError details={String(error)} />,
|
||||||
[],
|
[],
|
||||||
|
@ -67,10 +48,12 @@ export function GifSelectDialog({
|
||||||
return (
|
return (
|
||||||
<Dialog.Outer
|
<Dialog.Outer
|
||||||
control={control}
|
control={control}
|
||||||
nativeOptions={{sheet: {snapPoints}}}
|
nativeOptions={{sheet: {snapPoints: ['100%']}}}
|
||||||
onClose={onClose}>
|
onClose={onClose}>
|
||||||
<Dialog.Handle />
|
<Dialog.Handle />
|
||||||
<ErrorBoundary renderError={renderErrorBoundary}>{content}</ErrorBoundary>
|
<ErrorBoundary renderError={renderErrorBoundary}>
|
||||||
|
<GifList control={control} onSelectGif={onSelectGif} />
|
||||||
|
</ErrorBoundary>
|
||||||
</Dialog.Outer>
|
</Dialog.Outer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -293,74 +276,6 @@ function GifPreview({
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function TenorConsentPrompt({control}: {control: Dialog.DialogControlProps}) {
|
|
||||||
const {_} = useLingui()
|
|
||||||
const t = useTheme()
|
|
||||||
const {gtMobile} = useBreakpoints()
|
|
||||||
const setExternalEmbedPref = useSetExternalEmbedPref()
|
|
||||||
|
|
||||||
const onShowPress = useCallback(() => {
|
|
||||||
setExternalEmbedPref('tenor', 'show')
|
|
||||||
}, [setExternalEmbedPref])
|
|
||||||
|
|
||||||
const onHidePress = useCallback(() => {
|
|
||||||
setExternalEmbedPref('tenor', 'hide')
|
|
||||||
control.close()
|
|
||||||
}, [control, setExternalEmbedPref])
|
|
||||||
|
|
||||||
const gtMobileWeb = gtMobile && isWeb
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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 Tenor</Trans>
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<View style={[a.mt_sm, a.mb_2xl, a.gap_lg]}>
|
|
||||||
<Text>
|
|
||||||
<Trans>
|
|
||||||
Bluesky uses Tenor to provide the GIF selector feature.
|
|
||||||
</Trans>
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Text style={t.atoms.text_contrast_medium}>
|
|
||||||
<Trans>
|
|
||||||
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 Tenor`)}
|
|
||||||
onPress={onShowPress}
|
|
||||||
onAccessibilityEscape={control.close}
|
|
||||||
color="primary"
|
|
||||||
size={gtMobileWeb ? 'small' : 'medium'}
|
|
||||||
variant="solid">
|
|
||||||
<ButtonText>
|
|
||||||
<Trans>Enable Tenor</Trans>
|
|
||||||
</ButtonText>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
label={_(msg`No thanks`)}
|
|
||||||
onAccessibilityEscape={control.close}
|
|
||||||
onPress={onHidePress}
|
|
||||||
color="secondary"
|
|
||||||
size={gtMobileWeb ? 'small' : 'medium'}
|
|
||||||
variant="ghost">
|
|
||||||
<ButtonText>
|
|
||||||
<Trans>No thanks</Trans>
|
|
||||||
</ButtonText>
|
|
||||||
</Button>
|
|
||||||
</View>
|
|
||||||
</Dialog.ScrollableInner>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function DialogError({details}: {details?: string}) {
|
function DialogError({details}: {details?: string}) {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const control = Dialog.useDialogContext()
|
const control = Dialog.useDialogContext()
|
||||||
|
|
|
@ -1,25 +1,26 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {StyleSheet, View} from 'react-native'
|
import {StyleSheet, View} from 'react-native'
|
||||||
|
import {Trans} from '@lingui/macro'
|
||||||
import {useFocusEffect} from '@react-navigation/native'
|
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 {
|
import {
|
||||||
EmbedPlayerSource,
|
EmbedPlayerSource,
|
||||||
externalEmbedLabels,
|
externalEmbedLabels,
|
||||||
} from '#/lib/strings/embed-player'
|
} from '#/lib/strings/embed-player'
|
||||||
import {useSetMinimalShellMode} from '#/state/shell'
|
import {useSetMinimalShellMode} from '#/state/shell'
|
||||||
import {Trans} from '@lingui/macro'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
import {ScrollView} from '../com/util/Views'
|
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 {
|
import {
|
||||||
useExternalEmbedsPrefs,
|
useExternalEmbedsPrefs,
|
||||||
useSetExternalEmbedPref,
|
useSetExternalEmbedPref,
|
||||||
} from 'state/preferences'
|
} from 'state/preferences'
|
||||||
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
|
||||||
import {SimpleViewHeader} from '../com/util/SimpleViewHeader'
|
import {SimpleViewHeader} from '../com/util/SimpleViewHeader'
|
||||||
|
import {Text} from '../com/util/text/Text'
|
||||||
|
import {ScrollView} from '../com/util/Views'
|
||||||
|
|
||||||
type Props = NativeStackScreenProps<
|
type Props = NativeStackScreenProps<
|
||||||
CommonNavigatorParams,
|
CommonNavigatorParams,
|
||||||
|
@ -74,13 +75,16 @@ export function PreferencesExternalEmbeds({}: Props) {
|
||||||
<Text type="xl-bold" style={[pal.text, styles.heading]}>
|
<Text type="xl-bold" style={[pal.text, styles.heading]}>
|
||||||
<Trans>Enable media players for</Trans>
|
<Trans>Enable media players for</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
{Object.entries(externalEmbedLabels).map(([key, label]) => (
|
{Object.entries(externalEmbedLabels)
|
||||||
<PrefSelector
|
// TODO: Remove special case when we disable the old integration.
|
||||||
source={key as EmbedPlayerSource}
|
.filter(([key]) => key !== 'tenor')
|
||||||
label={label}
|
.map(([key, label]) => (
|
||||||
key={key}
|
<PrefSelector
|
||||||
/>
|
source={key as EmbedPlayerSource}
|
||||||
))}
|
label={label}
|
||||||
|
key={key}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue