[Video] Use same play button for gifs and videos (#5144)

Author: haileyok

src/components/MediaPreview.tsx

@@ -11,8 +11,8 @@ import {Trans} from '@lingui/macro'
 
 import {parseTenorGif} from '#/lib/strings/embed-player'
 import {atoms as a} from '#/alf'
-import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
 import {Text} from '#/components/Typography'
+import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 
 /**
  * Streamlined MediaPreview component which just handles images, gifs, and videos
@@ -111,6 +111,9 @@ export function ImageItem({
 export function GifItem({thumbnail, alt}: {thumbnail: string; alt?: string}) {
   return (
     <ImageItem thumbnail={thumbnail} alt={alt}>
+      <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
+        <PlayButtonIcon size={24} />
+      </View>
       <View style={styles.altContainer}>
         <Text style={styles.alt}>
           <Trans>GIF</Trans>
@@ -137,14 +140,14 @@ export function VideoItem({
           a.justify_center,
           a.align_center,
         ]}>
-        <PlayIcon size="xl" fill="white" />
+        <PlayButtonIcon size={24} />
       </View>
     )
   }
   return (
     <ImageItem thumbnail={thumbnail} alt={alt}>
       <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-        <PlayIcon size="xl" fill="white" />
+        <PlayButtonIcon size={24} />
       </View>
     </ImageItem>
   )

src/components/video/PlayButtonIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
+
+export function PlayButtonIcon({size = 44}: {size?: number}) {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.rounded_full,
+        a.align_center,
+        a.justify_center,
+        {
+          backgroundColor: t.palette.primary_500,
+          width: size + 16,
+          height: size + 16,
+        },
+      ]}>
+      <PlayIcon height={size} width={size} style={{color: 'white'}} />
+    </View>
+  )
+}

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

@@ -8,7 +8,6 @@ import {
   ViewStyle,
 } from 'react-native'
 import {AppBskyEmbedExternal} from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -22,6 +21,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
+import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 import {GifView} from '../../../../../modules/expo-bluesky-gif-view'
 import {GifViewStateChangeEvent} from '../../../../../modules/expo-bluesky-gif-view/src/GifView.types'
 
@@ -69,24 +69,7 @@ function PlaybackControls({
           </View>
         </View>
       ) : !isPlaying ? (
-        <View
-          style={[
-            a.rounded_full,
-            a.align_center,
-            a.justify_center,
-            {
-              backgroundColor: t.palette.primary_500,
-              width: 60,
-              height: 60,
-            },
-          ]}>
-          <FontAwesomeIcon
-            icon="play"
-            size={42}
-            color="white"
-            style={{marginLeft: 8}}
-          />
-        </View>
+        <PlayButtonIcon />
       ) : undefined}
     </Pressable>
   )
@@ -155,7 +138,6 @@ export function GifEmbed({
           accessibilityHint={_(msg`Animated GIF`)}
           accessibilityLabel={parsedAlt.alt}
         />
-
         {!hideAlt && parsedAlt.isPreferred && <AltText text={parsedAlt.alt} />}
       </View>
     </View>
@@ -183,7 +165,6 @@ function AltText({text}: {text: string}) {
           <Trans>ALT</Trans>
         </Text>
       </TouchableOpacity>
-
       <Prompt.Outer control={control}>
         <Prompt.TitleText>
           <Trans>Alt Text</Trans>

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

@@ -8,17 +8,16 @@ import {useLingui} from '@lingui/react'
 import {clamp} from '#/lib/numbers'
 import {useGate} from '#/lib/statsig/statsig'
 import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Button} from '#/components/Button'
-import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
+import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 import {VisibilityView} from '../../../../../modules/expo-bluesky-swiss-army'
 import {ErrorBoundary} from '../ErrorBoundary'
 import {useActiveVideoNative} from './ActiveVideoNativeContext'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'
 
 export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
   const {_} = useLingui()
-  const t = useTheme()
   const {activeSource, activeViewId, setActiveSource, player} =
     useActiveVideoNative()
   const viewId = useId()
@@ -95,7 +94,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
                 }}
                 label={_(msg`Play video`)}
                 color="secondary">
-                <PlayIcon width={48} fill={t.palette.white} />
+                <PlayButtonIcon />
               </Button>
             </>
           )}