diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx
index 99407627..3a823b7e 100644
--- a/src/view/com/composer/videos/VideoPreview.tsx
+++ b/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 (
diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx
index 8556640b..57d3364f 100644
--- a/src/view/com/composer/videos/VideoPreview.web.tsx
+++ b/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 (
diff --git a/src/view/com/composer/videos/VideoTranscodeBackdrop.tsx b/src/view/com/composer/videos/VideoTranscodeBackdrop.tsx
index 1f417364..ef38e62a 100644
--- a/src/view/com/composer/videos/VideoTranscodeBackdrop.tsx
+++ b/src/view/com/composer/videos/VideoTranscodeBackdrop.tsx
@@ -21,8 +21,8 @@ export function VideoTranscodeBackdrop({uri}: {uri: string}) {
}, [])
return (
-
- {thumbnail && (
+ thumbnail && (
+
- )}
-
+
+ )
)
}
diff --git a/src/view/com/composer/videos/VideoTranscodeProgress.tsx b/src/view/com/composer/videos/VideoTranscodeProgress.tsx
index db698809..3e26230f 100644
--- a/src/view/com/composer/videos/VideoTranscodeProgress.tsx
+++ b/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 (
+ color="secondary">
>