Redesign play button (#5192)

3 files changed, 31 insertions, 8 deletions

diff --git a/src/components/video/PlayButtonIcon.tsx b/src/components/video/PlayButtonIcon.tsx
index 5415084ff..90e93f744 100644
--- a/src/components/video/PlayButtonIcon.tsx
+++ b/src/components/video/PlayButtonIcon.tsx
@@ -2,24 +2,47 @@ 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'
+import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
 
-export function PlayButtonIcon({size = 44}: {size?: number}) {
+export function PlayButtonIcon({size = 36}: {size?: number}) {
   const t = useTheme()
+  const bg = t.name === 'light' ? t.palette.contrast_25 : t.palette.contrast_975
+  const fg = t.name === 'light' ? t.palette.contrast_975 : t.palette.contrast_25
 
   return (
     <View
       style={[
         a.rounded_full,
+        a.overflow_hidden,
         a.align_center,
         a.justify_center,
+        t.atoms.shadow_lg,
         {
-          backgroundColor: t.palette.primary_500,
-          width: size + 16,
-          height: size + 16,
+          width: size + size / 1.5,
+          height: size + size / 1.5,
         },
       ]}>
-      <PlayIcon height={size} width={size} style={{color: 'white'}} />
+      <View
+        style={[
+          a.absolute,
+          a.inset_0,
+          {
+            backgroundColor: bg,
+            opacity: 0.7,
+          },
+        ]}
+      />
+      <PlayIcon
+        width={size}
+        fill={fg}
+        style={[
+          a.relative,
+          a.z_10,
+          {
+            left: size / 50,
+          },
+        ]}
+      />
     </View>
   )
 }
diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx
index 28b46bae2..60b467d62 100644
--- a/src/view/com/composer/videos/VideoPreview.tsx
+++ b/src/view/com/composer/videos/VideoPreview.tsx
@@ -60,7 +60,7 @@ export function VideoPreview({
       <ExternalEmbedRemoveBtn onRemove={clear} />
       {autoplayDisabled && (
         <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-          <PlayButtonIcon size={48} />
+          <PlayButtonIcon />
         </View>
       )}
     </View>
diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx
index 9473be074..b8fd15950 100644
--- a/src/view/com/composer/videos/VideoPreview.web.tsx
+++ b/src/view/com/composer/videos/VideoPreview.web.tsx
@@ -83,7 +83,7 @@ export function VideoPreview({
       />
       {autoplayDisabled && (
         <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-          <PlayButtonIcon size={48} />
+          <PlayButtonIcon />
         </View>
       )}
     </View>