diff options
Diffstat (limited to 'src/view/com/composer')
4 files changed, 34 insertions, 12 deletions
diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx index 994076273..3a823b7ed 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 ( <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> diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx index 8556640b7..57d3364f9 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 ( <View style={[ a.w_full, a.rounded_sm, - - {aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio}, + {aspectRatio}, a.overflow_hidden, {backgroundColor: t.palette.black}, ]}> diff --git a/src/view/com/composer/videos/VideoTranscodeBackdrop.tsx b/src/view/com/composer/videos/VideoTranscodeBackdrop.tsx index 1f4173642..ef38e62af 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 ( - <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> + ) ) } diff --git a/src/view/com/composer/videos/VideoTranscodeProgress.tsx b/src/view/com/composer/videos/VideoTranscodeProgress.tsx index db6988092..3e26230ff 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 ( <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 |