[Video] Minor player tweaks (#5044)

src/view/com/composer/videos/VideoPreview.tsx

@@ -5,6 +5,7 @@ import {ImagePickerAsset} from 'expo-image-picker'
 import {useVideoPlayer, VideoView} from 'expo-video'
 
 import {CompressedVideo} from '#/lib/media/video/types'
+import {clamp} from '#/lib/numbers'
 import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn'
 import {atoms as a, useTheme} from '#/alf'
 
@@ -25,23 +26,31 @@ export function VideoPreview({
     player.play()
   })
 
-  const aspectRatio = asset.width / asset.height
+  let aspectRatio = asset.width / asset.height
+
+  if (isNaN(aspectRatio)) {
+    aspectRatio = 16 / 9
+  }
+
+  aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1)
 
   return (
     <View
       style={[
         a.w_full,
         a.rounded_sm,
-        {aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio},
+        {aspectRatio},
         a.overflow_hidden,
         a.border,
         t.atoms.border_contrast_low,
+        {backgroundColor: t.palette.black},
       ]}>
       <VideoView
         player={player}
         style={a.flex_1}
         allowsPictureInPicture={false}
         nativeControls={false}
+        contentFit="contain"
       />
       <ExternalEmbedRemoveBtn onRemove={clear} />
     </View>

src/view/com/composer/videos/VideoPreview.web.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native'
 import {ImagePickerAsset} from 'expo-image-picker'
 
 import {CompressedVideo} from '#/lib/media/video/types'
+import {clamp} from '#/lib/numbers'
 import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn'
 import {atoms as a, useTheme} from '#/alf'
 
@@ -38,15 +39,20 @@ export function VideoPreview({
     }
   }, [setDimensions])
 
-  const aspectRatio = asset.width / asset.height
+  let aspectRatio = asset.width / asset.height
+
+  if (isNaN(aspectRatio)) {
+    aspectRatio = 16 / 9
+  }
+
+  aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1)
 
   return (
     <View
       style={[
         a.w_full,
         a.rounded_sm,
-
+        {aspectRatio},
-        {aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio},
         a.overflow_hidden,
         {backgroundColor: t.palette.black},
       ]}>

src/view/com/composer/videos/VideoTranscodeBackdrop.tsx

@@ -21,8 +21,8 @@ export function VideoTranscodeBackdrop({uri}: {uri: string}) {
   }, [])
 
   return (
-    <Animated.View style={a.flex_1} entering={FadeIn}>
+    thumbnail && (
-      {thumbnail && (
+      <Animated.View style={a.flex_1} entering={FadeIn}>
         <Image
           style={a.flex_1}
           source={thumbnail.path}
@@ -31,7 +31,7 @@ export function VideoTranscodeBackdrop({uri}: {uri: string}) {
           blurRadius={15}
           contentFit="cover"
         />
-      )}
+      </Animated.View>
-    </Animated.View>
+    )
   )
 }

src/view/com/composer/videos/VideoTranscodeProgress.tsx

@@ -4,6 +4,7 @@ import {View} from 'react-native'
 import ProgressPie from 'react-native-progress/Pie'
 import {ImagePickerAsset} from 'expo-image-picker'
 
+import {clamp} from '#/lib/numbers'
 import {isWeb} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {ExternalEmbedRemoveBtn} from '../ExternalEmbedRemoveBtn'
@@ -20,10 +21,16 @@ export function VideoTranscodeProgress({
 }) {
   const t = useTheme()
 
-  const aspectRatio = asset.width / asset.height
-
   if (isWeb) return null
 
+  let aspectRatio = asset.width / asset.height
+
+  if (isNaN(aspectRatio)) {
+    aspectRatio = 16 / 9
+  }
+
+  aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1)
+
   return (
     <View
       style={[
@@ -32,7 +39,7 @@ export function VideoTranscodeProgress({
         t.atoms.bg_contrast_50,
         a.rounded_md,
         a.overflow_hidden,
-        {aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio},
+        {aspectRatio},
       ]}>
       <VideoTranscodeBackdrop uri={asset.uri} />
       <View

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

@@ -78,9 +78,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
                   setActiveSource(embed.playlist)
                 }}
                 label={_(msg`Play video`)}
-                variant="ghost"
+                color="secondary">
-                color="secondary"
-                size="large">
                 <PlayIcon width={48} fill={t.palette.white} />
               </Button>
             </>