fix android

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

@@ -8,7 +8,6 @@ import {useLingui} from '@lingui/react'
 
 import {clamp} from '#/lib/numbers'
 import {useGate} from '#/lib/statsig/statsig'
-import {isAndroid, isIOS} from 'platform/detection'
 import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative'
 import {atoms as a} from '#/alf'
 import {Button} from '#/components/Button'
@@ -148,46 +147,46 @@ function InnerWrapper({embed}: Props) {
           setIsFullscreen={setIsFullscreen}
         />
       ) : null}
-      {(isAndroid && showOverlay) || isIOS ? (
+      <ImageBackground
-        <ImageBackground
+        source={{uri: embed.thumbnail}}
-          source={{uri: embed.thumbnail}}
+        accessibilityIgnoresInvertColors
-          contentFit="cover"
+        style={[
-          alt={embed.alt}
+          {
-          accessibilityIgnoresInvertColors
+            position: 'absolute',
-          style={[
+            top: 0,
-            {
+            left: 0,
-              position: 'absolute',
+            right: 0,
-              top: 0,
+            bottom: 0,
-              bottom: 0,
+            backgroundColor: 'transparent', // If you don't add `backgroundColor` to the styles here,
-              left: 0,
+            // the play button won't show up on the first render on android 🥴😮‍💨
-              right: 0,
+            display: showOverlay ? 'flex' : 'none',
-              display: showOverlay ? 'flex' : 'none',
+          },
-            },
+        ]}
-          ]}>
+        cachePolicy="memory-disk" // Preferring memory cache helps to avoid flicker when re-displaying on android
-          <Button
+      >
-            style={[a.flex_1, a.align_center, a.justify_center]}
+        <Button
-            onPress={() => {
+          style={[a.flex_1, a.align_center, a.justify_center]}
-              setActiveSource(embed.playlist, viewId)
+          onPress={() => {
-            }}
+            setActiveSource(embed.playlist, viewId)
-            label={_(msg`Play video`)}
+          }}
-            color="secondary">
+          label={_(msg`Play video`)}
-            {isLoading ? (
+          color="secondary">
-              <View
+          {isLoading ? (
-                style={[
+            <View
-                  a.rounded_full,
+              style={[
-                  a.p_xs,
+                a.rounded_full,
-                  a.absolute,
+                a.p_xs,
-                  {top: 'auto', left: 'auto'},
+                a.align_center,
-                  {backgroundColor: 'rgba(0,0,0,0.5)'},
+                a.justify_center,
-                ]}>
+                {backgroundColor: 'rgba(0,0,0,0.5)'},
-                <Loader size="2xl" style={{color: 'white'}} />
+              ]}>
-              </View>
+              <Loader size="2xl" style={{color: 'white'}} />
-            ) : (
+            </View>
-              <PlayButtonIcon />
+          ) : (
-            )}
+            <PlayButtonIcon />
-          </Button>
+          )}
-        </ImageBackground>
+        </Button>
-      ) : null}
+      </ImageBackground>
     </VisibilityView>
   )
 }