diff --git a/src/screens/Settings/ExternalMediaPreferences.tsx b/src/screens/Settings/ExternalMediaPreferences.tsx index 1f0040fb3..b2ad221b4 100644 --- a/src/screens/Settings/ExternalMediaPreferences.tsx +++ b/src/screens/Settings/ExternalMediaPreferences.tsx @@ -1,4 +1,4 @@ -import {Fragment} from 'react' +import {Fragment, useCallback} from 'react' import {View} from 'react-native' import {Trans} from '@lingui/macro' @@ -8,6 +8,7 @@ import { } from '#/lib/routes/types' import { type EmbedPlayerSource, + embedPlayerSources, externalEmbedLabels, } from '#/lib/strings/embed-player' import { @@ -53,6 +54,8 @@ export function ExternalMediaPreferencesScreen({}: Props) { {native()} + + {Object.entries(externalEmbedLabels) // TODO: Remove special case when we disable the old integration. .filter(([key]) => key !== 'tenor') @@ -78,24 +81,39 @@ function PrefSelector({ source, label, }: { - source: EmbedPlayerSource + source: EmbedPlayerSource | 'all' label: string }) { const setExternalEmbedPref = useSetExternalEmbedPref() const sources = useExternalEmbedsPrefs() + const isChecked = + source === 'all' + ? embedPlayerSources + .filter(key => key !== 'tenor') + .every(key => sources?.[key] === 'show') + : sources?.[source] === 'show' + + const handleChange = useCallback(() => { + if (source === 'all') { + const newValue = isChecked ? 'hide' : 'show' + for (const key of embedPlayerSources) { + if (key !== 'tenor') { + setExternalEmbedPref(key, newValue) + } + } + } else { + setExternalEmbedPref(source, isChecked ? 'hide' : 'show') + } + }, [source, isChecked, setExternalEmbedPref]) + return ( - setExternalEmbedPref( - source, - sources?.[source] === 'show' ? 'hide' : 'show', - ) - } + value={isChecked} + onChange={handleChange} style={[ a.flex_1, a.py_md,