more robust centering of the play button (#181)

Co-authored-by: Aryan Goharzad <arrygoo@gmail.com>

src/view/com/util/PostEmbeds/ExternalLinkEmbed.tsx

@@ -8,19 +8,19 @@ import {PresentedExternal} from '@atproto/api/dist/client/types/app/bsky/embed/e
 const ExternalLinkEmbed = ({
   link,
   onImagePress,
+  imageChild,
 }: {
   link: PresentedExternal
   onImagePress: () => void
+  imageChild: React.ReactNode
 }) => {
   const pal = usePalette('default')
   return (
     <>
       {link.thumb ? (
-        <Image
-          uri={link.thumb}
-          style={styles.extImage}
-          onPress={onImagePress}
-        />
+        <Image uri={link.thumb} style={styles.extImage} onPress={onImagePress}>
+          {imageChild}
+        </Image>
       ) : undefined}
       <View style={styles.extInner}>
         <Text type="md-bold" numberOfLines={2} style={[pal.text]}>

src/view/com/util/PostEmbeds/YoutubeEmbed.tsx

@@ -49,15 +49,22 @@ const YoutubeEmbed = ({
     return () => sub && sub.remove()
   }, [displayVideoPlayer, store])
 
+  const imageChild = (
+    <Pressable onPress={handlePlayButtonPressed} style={styles.playButton}>
+      <FontAwesomeIcon icon="play" size={24} color="white" />
+    </Pressable>
+  )
+
   if (!displayVideoPlayer) {
     return (
       <View
         style={[styles.extOuter, pal.view, pal.border]}
         onLayout={handleOnLayout}>
-        <ExternalLinkEmbed link={link} onImagePress={handlePlayButtonPressed} />
-        <Pressable onPress={handlePlayButtonPressed} style={styles.playButton}>
-          <FontAwesomeIcon icon="play" size={24} color="white" />
-        </Pressable>
+        <ExternalLinkEmbed
+          link={link}
+          onImagePress={handlePlayButtonPressed}
+          imageChild={imageChild}
+        />
       </View>
     )
   }
@@ -93,9 +100,9 @@ const styles = StyleSheet.create({
   },
   playButton: {
     position: 'absolute',
-    top: '20%',
     alignSelf: 'center',
     alignItems: 'center',
+    top: '44%',
     justifyContent: 'center',
     backgroundColor: 'black',
     padding: 10,

src/view/com/util/images/Image.tsx

@@ -14,12 +14,14 @@ export function Image({
   onLongPress,
   onPressIn,
   style,
+  children = null,
 }: {
   uri: string
   onPress?: () => void
   onLongPress?: () => void
   onPressIn?: () => void
   style?: StyleProp<ViewStyle>
+  children?: React.ReactNode
 }) {
   const [aspectRatio, setAspectRatio] = React.useState<number>(1)
   const onLoad = (e: OnLoadEvent) => {
@@ -44,6 +46,7 @@ export function Image({
         defaultSource={LOADING}
         onLoad={onLoad}
       />
+      {children}
     </TouchableOpacity>
   )
 }