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

2 files changed, 31 insertions, 3 deletions

diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx
index 17bae55b5..7d7cb2b4c 100644
--- a/src/components/MediaPreview.tsx
+++ b/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>
   )
diff --git a/src/components/video/PlayButtonIcon.tsx b/src/components/video/PlayButtonIcon.tsx
new file mode 100644
index 000000000..5415084ff
--- /dev/null
+++ b/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>
+  )
+}