Use ALF for the embed consent modal (#3336)

src/components/dialogs/EmbedConsent.tsx

@@ -0,0 +1,119 @@
+import React, {useCallback} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {
+  type EmbedPlayerSource,
+  embedPlayerSources,
+  externalEmbedLabels,
+} from '#/lib/strings/embed-player'
+import {useSetExternalEmbedPref} from '#/state/preferences'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {Button, ButtonText} from '../Button'
+import {Text} from '../Typography'
+
+export function EmbedConsentDialog({
+  control,
+  source,
+  onAccept,
+}: {
+  control: Dialog.DialogControlProps
+  source: EmbedPlayerSource
+  onAccept: () => void
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const setExternalEmbedPref = useSetExternalEmbedPref()
+  const {gtMobile} = useBreakpoints()
+
+  const onShowAllPress = useCallback(() => {
+    for (const key of embedPlayerSources) {
+      setExternalEmbedPref(key, 'show')
+    }
+    onAccept()
+    control.close()
+  }, [control, onAccept, setExternalEmbedPref])
+
+  const onShowPress = useCallback(() => {
+    setExternalEmbedPref(source, 'show')
+    onAccept()
+    control.close()
+  }, [control, onAccept, setExternalEmbedPref, source])
+
+  const onHidePress = useCallback(() => {
+    setExternalEmbedPref(source, 'hide')
+    control.close()
+  }, [control, setExternalEmbedPref, source])
+
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        label={_(msg`External Media`)}
+        style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
+        <View style={a.gap_sm}>
+          <Text style={[a.text_2xl, a.font_bold]}>
+            <Trans>External Media</Trans>
+          </Text>
+
+          <View style={[a.mt_sm, a.mb_2xl, a.gap_lg]}>
+            <Text>
+              <Trans>
+                This content is hosted by {externalEmbedLabels[source]}. Do you
+                want to enable external media?
+              </Trans>
+            </Text>
+
+            <Text style={t.atoms.text_contrast_medium}>
+              <Trans>
+                External media may allow websites to collect information about
+                you and your device. No information is sent or requested until
+                you press the "play" button.
+              </Trans>
+            </Text>
+          </View>
+        </View>
+        <View style={a.gap_md}>
+          <Button
+            style={gtMobile && a.flex_1}
+            label={_(msg`Enable external media`)}
+            onPress={onShowAllPress}
+            onAccessibilityEscape={control.close}
+            color="primary"
+            size="medium"
+            variant="solid">
+            <ButtonText>
+              <Trans>Enable external media</Trans>
+            </ButtonText>
+          </Button>
+          <Button
+            style={gtMobile && a.flex_1}
+            label={_(msg`Enable this source only`)}
+            onPress={onShowPress}
+            onAccessibilityEscape={control.close}
+            color="secondary"
+            size="medium"
+            variant="solid">
+            <ButtonText>
+              <Trans>Enable {externalEmbedLabels[source]} only</Trans>
+            </ButtonText>
+          </Button>
+          <Button
+            label={_(msg`No thanks`)}
+            onAccessibilityEscape={control.close}
+            onPress={onHidePress}
+            color="secondary"
+            size="medium"
+            variant="ghost">
+            <ButtonText>
+              <Trans>No thanks</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}

src/state/modals/index.tsx

@@ -3,7 +3,6 @@ import {Image as RNImage} from 'react-native-image-crop-picker'
 import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {EmbedPlayerSource} from '#/lib/strings/embed-player'
 import {GalleryModel} from '#/state/models/media/gallery'
 import {ImageModel} from '#/state/models/media/image'
 import {ThreadgateSetting} from '../queries/threadgate'
@@ -125,12 +124,6 @@ export interface LinkWarningModal {
   share?: boolean
 }
 
-export interface EmbedConsentModal {
-  name: 'embed-consent'
-  source: EmbedPlayerSource
-  onAccept: () => void
-}
-
 export interface InAppBrowserConsentModal {
   name: 'in-app-browser-consent'
   href: string
@@ -169,7 +162,6 @@ export type Modal =
 
   // Generic
   | LinkWarningModal
-  | EmbedConsentModal
   | InAppBrowserConsentModal
 
 const ModalContext = React.createContext<{

src/view/com/modals/Modal.tsx

@@ -15,7 +15,6 @@ import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as EditProfileModal from './EditProfile'
-import * as EmbedConsentModal from './EmbedConsent'
 import * as InAppBrowserConsentModal from './InAppBrowserConsent'
 import * as InviteCodesModal from './InviteCodes'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
@@ -116,9 +115,6 @@ export function ModalsContainer() {
   } else if (activeModal?.name === 'link-warning') {
     snapPoints = LinkWarningModal.snapPoints
     element = <LinkWarningModal.Component {...activeModal} />
-  } else if (activeModal?.name === 'embed-consent') {
-    snapPoints = EmbedConsentModal.snapPoints
-    element = <EmbedConsentModal.Component {...activeModal} />
   } else if (activeModal?.name === 'in-app-browser-consent') {
     snapPoints = InAppBrowserConsentModal.snapPoints
     element = <InAppBrowserConsentModal.Component {...activeModal} />

src/view/com/modals/Modal.web.tsx

@@ -1,33 +1,32 @@
 import React from 'react'
-import {TouchableWithoutFeedback, StyleSheet, View} from 'react-native'
+import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 
-import {useModals, useModalControls} from '#/state/modals'
+import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import type {Modal as ModalIface} from '#/state/modals'
-import * as EditProfileModal from './EditProfile'
+import {useModalControls, useModals} from '#/state/modals'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import * as AddAppPassword from './AddAppPasswords'
+import * as AltTextImageModal from './AltImage'
+import * as ChangeEmailModal from './ChangeEmail'
+import * as ChangeHandleModal from './ChangeHandle'
+import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
-import * as UserAddRemoveLists from './UserAddRemoveLists'
-import * as ListAddUserModal from './ListAddRemoveUsers'
-import * as DeleteAccountModal from './DeleteAccount'
-import * as RepostModal from './Repost'
-import * as SelfLabelModal from './SelfLabel'
-import * as ThreadgateModal from './Threadgate'
 import * as CropImageModal from './crop-image/CropImage.web'
-import * as AltTextImageModal from './AltImage'
+import * as DeleteAccountModal from './DeleteAccount'
 import * as EditImageModal from './EditImage'
-import * as ChangeHandleModal from './ChangeHandle'
+import * as EditProfileModal from './EditProfile'
 import * as InviteCodesModal from './InviteCodes'
-import * as AddAppPassword from './AddAppPasswords'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
-import * as VerifyEmailModal from './VerifyEmail'
-import * as ChangeEmailModal from './ChangeEmail'
-import * as ChangePasswordModal from './ChangePassword'
 import * as LinkWarningModal from './LinkWarning'
-import * as EmbedConsentModal from './EmbedConsent'
+import * as ListAddUserModal from './ListAddRemoveUsers'
+import * as RepostModal from './Repost'
+import * as SelfLabelModal from './SelfLabel'
+import * as ThreadgateModal from './Threadgate'
+import * as UserAddRemoveLists from './UserAddRemoveLists'
+import * as VerifyEmailModal from './VerifyEmail'
 
 export function ModalsContainer() {
   const {isModalActive, activeModals} = useModals()
@@ -112,8 +111,6 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <ChangePasswordModal.Component />
   } else if (modal.name === 'link-warning') {
     element = <LinkWarningModal.Component {...modal} />
-  } else if (modal.name === 'embed-consent') {
-    element = <EmbedConsentModal.Component {...modal} />
   } else {
     return null
   }