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/EmbedConsent.tsx

@@ -1,154 +0,0 @@
-import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {LinearGradient} from 'expo-linear-gradient'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {
-  EmbedPlayerSource,
-  embedPlayerSources,
-  externalEmbedLabels,
-} from '#/lib/strings/embed-player'
-import {useModalControls} from '#/state/modals'
-import {useSetExternalEmbedPref} from '#/state/preferences/external-embeds-prefs'
-import {usePalette} from 'lib/hooks/usePalette'
-import {colors, gradients, s} from 'lib/styles'
-import {Text} from '../util/text/Text'
-import {ScrollView} from './util'
-
-export const snapPoints = [450]
-
-export function Component({
-  onAccept,
-  source,
-}: {
-  onAccept: () => void
-  source: EmbedPlayerSource
-}) {
-  const pal = usePalette('default')
-  const {closeModal} = useModalControls()
-  const {_} = useLingui()
-  const setExternalEmbedPref = useSetExternalEmbedPref()
-  const {isMobile} = useWebMediaQueries()
-
-  const onShowAllPress = React.useCallback(() => {
-    for (const key of embedPlayerSources) {
-      setExternalEmbedPref(key, 'show')
-    }
-    onAccept()
-    closeModal()
-  }, [closeModal, onAccept, setExternalEmbedPref])
-
-  const onShowPress = React.useCallback(() => {
-    setExternalEmbedPref(source, 'show')
-    onAccept()
-    closeModal()
-  }, [closeModal, onAccept, setExternalEmbedPref, source])
-
-  const onHidePress = React.useCallback(() => {
-    setExternalEmbedPref(source, 'hide')
-    closeModal()
-  }, [closeModal, setExternalEmbedPref, source])
-
-  return (
-    <ScrollView
-      testID="embedConsentModal"
-      style={[
-        s.flex1,
-        pal.view,
-        isMobile
-          ? {paddingHorizontal: 20, paddingTop: 10}
-          : {paddingHorizontal: 30},
-      ]}>
-      <Text style={[pal.text, styles.title]}>
-        <Trans>External Media</Trans>
-      </Text>
-
-      <Text style={pal.text}>
-        <Trans>
-          This content is hosted by {externalEmbedLabels[source]}. Do you want
-          to enable external media?
-        </Trans>
-      </Text>
-      <View style={[s.mt10]} />
-      <Text style={pal.textLight}>
-        <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 style={[s.mt20]} />
-      <TouchableOpacity
-        testID="enableAllBtn"
-        onPress={onShowAllPress}
-        accessibilityRole="button"
-        accessibilityLabel={_(
-          msg`Show embeds from ${externalEmbedLabels[source]}`,
-        )}
-        accessibilityHint=""
-        onAccessibilityEscape={closeModal}>
-        <LinearGradient
-          colors={[gradients.blueLight.start, gradients.blueLight.end]}
-          start={{x: 0, y: 0}}
-          end={{x: 1, y: 1}}
-          style={[styles.btn]}>
-          <Text style={[s.white, s.bold, s.f18]}>
-            <Trans>Enable External Media</Trans>
-          </Text>
-        </LinearGradient>
-      </TouchableOpacity>
-      <View style={[s.mt10]} />
-      <TouchableOpacity
-        testID="enableSourceBtn"
-        onPress={onShowPress}
-        accessibilityRole="button"
-        accessibilityLabel={_(
-          msg`Never load embeds from ${externalEmbedLabels[source]}`,
-        )}
-        accessibilityHint=""
-        onAccessibilityEscape={closeModal}>
-        <View style={[styles.btn, pal.btn]}>
-          <Text style={[pal.text, s.bold, s.f18]}>
-            <Trans>Enable {externalEmbedLabels[source]} only</Trans>
-          </Text>
-        </View>
-      </TouchableOpacity>
-      <View style={[s.mt10]} />
-      <TouchableOpacity
-        testID="disableSourceBtn"
-        onPress={onHidePress}
-        accessibilityRole="button"
-        accessibilityLabel={_(
-          msg`Never load embeds from ${externalEmbedLabels[source]}`,
-        )}
-        accessibilityHint=""
-        onAccessibilityEscape={closeModal}>
-        <View style={[styles.btn, pal.btn]}>
-          <Text style={[pal.text, s.bold, s.f18]}>
-            <Trans>No thanks</Trans>
-          </Text>
-        </View>
-      </TouchableOpacity>
-    </ScrollView>
-  )
-}
-
-const styles = StyleSheet.create({
-  title: {
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 24,
-    marginBottom: 12,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.gray1,
-  },
-})

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 {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
+import type {Modal as ModalIface} from '#/state/modals'
+import {useModalControls, useModals} from '#/state/modals'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
+import * as AddAppPassword from './AddAppPasswords'
-
+import * as AltTextImageModal from './AltImage'
-import {useModals, useModalControls} from '#/state/modals'
+import * as ChangeEmailModal from './ChangeEmail'
-import type {Modal as ModalIface} from '#/state/modals'
+import * as ChangeHandleModal from './ChangeHandle'
-import * as EditProfileModal from './EditProfile'
+import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
-import * as UserAddRemoveLists from './UserAddRemoveLists'
+import * as CropImageModal from './crop-image/CropImage.web'
-import * as ListAddUserModal from './ListAddRemoveUsers'
 import * as DeleteAccountModal from './DeleteAccount'
+import * as EditImageModal from './EditImage'
+import * as EditProfileModal from './EditProfile'
+import * as InviteCodesModal from './InviteCodes'
+import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
+import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
+import * as LinkWarningModal from './LinkWarning'
+import * as ListAddUserModal from './ListAddRemoveUsers'
 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 UserAddRemoveLists from './UserAddRemoveLists'
-import * as AltTextImageModal from './AltImage'
-import * as EditImageModal from './EditImage'
-import * as ChangeHandleModal from './ChangeHandle'
-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'
 
 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
   }

src/view/com/util/post-embeds/ExternalGifEmbed.tsx

@@ -1,6 +1,4 @@
-import {EmbedPlayerParams, getGifDims} from 'lib/strings/embed-player'
 import React from 'react'
-import {Image, ImageLoadEventData} from 'expo-image'
 import {
   ActivityIndicator,
   GestureResponderEvent,
@@ -9,13 +7,17 @@ import {
   StyleSheet,
   View,
 } from 'react-native'
-import {isIOS, isNative, isWeb} from '#/platform/detection'
+import {Image, ImageLoadEventData} from 'expo-image'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {useExternalEmbedsPrefs} from 'state/preferences'
-import {useModalControls} from 'state/modals'
-import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
 import {AppBskyEmbedExternal} from '@atproto/api'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {EmbedPlayerParams, getGifDims} from '#/lib/strings/embed-player'
+import {isIOS, isNative, isWeb} from '#/platform/detection'
+import {useExternalEmbedsPrefs} from '#/state/preferences'
+import {useDialogControl} from '#/components/Dialog'
+import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'
 
 export function ExternalGifEmbed({
   link,
@@ -25,8 +27,9 @@ export function ExternalGifEmbed({
   params: EmbedPlayerParams
 }) {
   const externalEmbedsPrefs = useExternalEmbedsPrefs()
-  const {openModal} = useModalControls()
+
   const {_} = useLingui()
+  const consentDialogControl = useDialogControl()
 
   const thumbHasLoaded = React.useRef(false)
   const viewWidth = React.useRef(0)
@@ -57,11 +60,7 @@ export function ExternalGifEmbed({
 
       // Show consent if this is the first load
       if (externalEmbedsPrefs?.[params.source] === undefined) {
-        openModal({
+        consentDialogControl.open()
-          name: 'embed-consent',
-          source: params.source,
-          onAccept: load,
-        })
         return
       }
       // If the player isn't active, we want to activate it and prefetch the gif
@@ -84,7 +83,13 @@ export function ExternalGifEmbed({
         }
       })
     },
-    [externalEmbedsPrefs, isPlayerActive, load, openModal, params.source],
+    [
+      consentDialogControl,
+      externalEmbedsPrefs,
+      isPlayerActive,
+      load,
+      params.source,
+    ],
   )
 
   const onLoad = React.useCallback((e: ImageLoadEventData) => {
@@ -98,47 +103,55 @@ export function ExternalGifEmbed({
   }, [])
 
   return (
-    <Pressable
+    <>
-      style={[
+      <EmbedConsentDialog
-        {height: imageDims.height},
+        control={consentDialogControl}
-        styles.topRadius,
+        source={params.source}
-        styles.gifContainer,
+        onAccept={load}
-      ]}
-      onPress={onPlayPress}
-      onLayout={onLayout}
-      accessibilityRole="button"
-      accessibilityHint={_(msg`Plays the GIF`)}
-      accessibilityLabel={_(msg`Play ${link.title}`)}>
-      {(!isPrefetched || !isAnimating) && ( // If we have not loaded or are not animating, show the overlay
-        <View style={[styles.layer, styles.overlayLayer]}>
-          <View style={[styles.overlayContainer, styles.topRadius]}>
-            {!isAnimating || !isPlayerActive ? ( // Play button when not animating or not active
-              <FontAwesomeIcon icon="play" size={42} color="white" />
-            ) : (
-              // Activity indicator while gif loads
-              <ActivityIndicator size="large" color="white" />
-            )}
-          </View>
-        </View>
-      )}
-      <Image
-        source={{
-          uri:
-            !isPrefetched || (isWeb && !isAnimating)
-              ? link.thumb
-              : params.playerUri,
-        }} // Web uses the thumb to control playback
-        style={{flex: 1}}
-        ref={imageRef}
-        onLoad={onLoad}
-        autoplay={isAnimating}
-        contentFit="contain"
-        accessibilityIgnoresInvertColors
-        accessibilityLabel={link.title}
-        accessibilityHint={link.title}
-        cachePolicy={isIOS ? 'disk' : 'memory-disk'} // cant control playback with memory-disk on ios
       />
-    </Pressable>
+
+      <Pressable
+        style={[
+          {height: imageDims.height},
+          styles.topRadius,
+          styles.gifContainer,
+        ]}
+        onPress={onPlayPress}
+        onLayout={onLayout}
+        accessibilityRole="button"
+        accessibilityHint={_(msg`Plays the GIF`)}
+        accessibilityLabel={_(msg`Play ${link.title}`)}>
+        {(!isPrefetched || !isAnimating) && ( // If we have not loaded or are not animating, show the overlay
+          <View style={[styles.layer, styles.overlayLayer]}>
+            <View style={[styles.overlayContainer, styles.topRadius]}>
+              {!isAnimating || !isPlayerActive ? ( // Play button when not animating or not active
+                <FontAwesomeIcon icon="play" size={42} color="white" />
+              ) : (
+                // Activity indicator while gif loads
+                <ActivityIndicator size="large" color="white" />
+              )}
+            </View>
+          </View>
+        )}
+        <Image
+          source={{
+            uri:
+              !isPrefetched || (isWeb && !isAnimating)
+                ? link.thumb
+                : params.playerUri,
+          }} // Web uses the thumb to control playback
+          style={{flex: 1}}
+          ref={imageRef}
+          onLoad={onLoad}
+          autoplay={isAnimating}
+          contentFit="contain"
+          accessibilityIgnoresInvertColors
+          accessibilityLabel={link.title}
+          accessibilityHint={link.title}
+          cachePolicy={isIOS ? 'disk' : 'memory-disk'} // cant control playback with memory-disk on ios
+        />
+      </Pressable>
+    </>
   )
 }
 

src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx

@@ -13,20 +13,23 @@ import Animated, {
   useAnimatedRef,
   useFrameCallback,
 } from 'react-native-reanimated'
-import {Image} from 'expo-image'
-import {WebView} from 'react-native-webview'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {WebView} from 'react-native-webview'
+import {Image} from 'expo-image'
+import {AppBskyEmbedExternal} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
-import {AppBskyEmbedExternal} from '@atproto/api'
+
-import {EmbedPlayerParams, getPlayerAspect} from 'lib/strings/embed-player'
+import {NavigationProp} from '#/lib/routes/types'
+import {EmbedPlayerParams, getPlayerAspect} from '#/lib/strings/embed-player'
+import {isNative} from '#/platform/detection'
+import {useExternalEmbedsPrefs} from '#/state/preferences'
+import {atoms as a} from '#/alf'
+import {useDialogControl} from '#/components/Dialog'
+import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'
 import {EventStopper} from '../EventStopper'
-import {isNative} from 'platform/detection'
-import {NavigationProp} from 'lib/routes/types'
-import {useExternalEmbedsPrefs} from 'state/preferences'
-import {useModalControls} from 'state/modals'
 
 interface ShouldStartLoadRequest {
   url: string
@@ -48,7 +51,7 @@ function PlaceholderOverlay({
   if (isPlayerActive && !isLoading) return null
 
   return (
-    <View style={[styles.layer, styles.overlayLayer]}>
+    <View style={[a.absolute, a.inset_0, styles.overlayLayer]}>
       <Pressable
         accessibilityRole="button"
         accessibilityLabel={_(msg`Play Video`)}
@@ -89,7 +92,7 @@ function Player({
   if (!isPlayerActive) return null
 
   return (
-    <EventStopper style={[styles.layer, styles.playerLayer]}>
+    <EventStopper style={[a.absolute, a.inset_0, styles.playerLayer]}>
       <WebView
         javaScriptEnabled={true}
         onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
@@ -119,7 +122,7 @@ export function ExternalPlayer({
   const insets = useSafeAreaInsets()
   const windowDims = useWindowDimensions()
   const externalEmbedsPrefs = useExternalEmbedsPrefs()
-  const {openModal} = useModalControls()
+  const consentDialogControl = useDialogControl()
 
   const [isPlayerActive, setPlayerActive] = React.useState(false)
   const [isLoading, setIsLoading] = React.useState(true)
@@ -187,37 +190,47 @@ export function ExternalPlayer({
       event.preventDefault()
 
       if (externalEmbedsPrefs?.[params.source] === undefined) {
-        openModal({
+        consentDialogControl.open()
-          name: 'embed-consent',
-          source: params.source,
-          onAccept: () => {
-            setPlayerActive(true)
-          },
-        })
         return
       }
 
       setPlayerActive(true)
     },
-    [externalEmbedsPrefs, openModal, params.source],
+    [externalEmbedsPrefs, consentDialogControl, params.source],
   )
 
+  const onAcceptConsent = React.useCallback(() => {
+    setPlayerActive(true)
+  }, [])
+
   return (
-    <Animated.View ref={viewRef} collapsable={false} style={[aspect]}>
+    <>
-      {link.thumb && (!isPlayerActive || isLoading) && (
+      <EmbedConsentDialog
-        <Image
+        control={consentDialogControl}
-          style={[{flex: 1}, styles.topRadius]}
+        source={params.source}
-          source={{uri: link.thumb}}
+        onAccept={onAcceptConsent}
-          accessibilityIgnoresInvertColors
-        />
-      )}
-      <PlaceholderOverlay
-        isLoading={isLoading}
-        isPlayerActive={isPlayerActive}
-        onPress={onPlayPress}
       />
-      <Player isPlayerActive={isPlayerActive} params={params} onLoad={onLoad} />
+
-    </Animated.View>
+      <Animated.View ref={viewRef} collapsable={false} style={[aspect]}>
+        {link.thumb && (!isPlayerActive || isLoading) && (
+          <Image
+            style={[a.flex_1, styles.topRadius]}
+            source={{uri: link.thumb}}
+            accessibilityIgnoresInvertColors
+          />
+        )}
+        <PlaceholderOverlay
+          isLoading={isLoading}
+          isPlayerActive={isPlayerActive}
+          onPress={onPlayPress}
+        />
+        <Player
+          isPlayerActive={isPlayerActive}
+          params={params}
+          onLoad={onLoad}
+        />
+      </Animated.View>
+    </>
   )
 }
 
@@ -226,13 +239,6 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 6,
     borderTopRightRadius: 6,
   },
-  layer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
   overlayContainer: {
     flex: 1,
     justifyContent: 'center',