From 24b07c6cf495367acfcf6a3f44a841e8f355d08f Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 11 Sep 2024 18:33:57 +0100 Subject: [PATCH] [Video] Cap duration (#5270) --- src/view/com/composer/videos/SelectVideoBtn.tsx | 11 +++++++++-- src/view/com/composer/videos/VideoPreview.web.tsx | 11 +++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/view/com/composer/videos/SelectVideoBtn.tsx b/src/view/com/composer/videos/SelectVideoBtn.tsx index 6e294ba9c3..da67d781e0 100644 --- a/src/view/com/composer/videos/SelectVideoBtn.tsx +++ b/src/view/com/composer/videos/SelectVideoBtn.tsx @@ -18,7 +18,7 @@ import {Button} from '#/components/Button' import {VideoClip_Stroke2_Corner0_Rounded as VideoClipIcon} from '#/components/icons/VideoClip' import * as Prompt from '#/components/Prompt' -const VIDEO_MAX_DURATION = 60 +const VIDEO_MAX_DURATION = 60 * 1000 // 60s in milliseconds type Props = { onSelectVideo: (video: ImagePickerAsset) => void @@ -45,13 +45,20 @@ export function SelectVideoBtn({onSelectVideo, disabled, setError}: Props) { const response = await launchImageLibraryAsync({ exif: false, mediaTypes: MediaTypeOptions.Videos, - videoMaxDuration: VIDEO_MAX_DURATION, quality: 1, legacy: true, preferredAssetRepresentationMode: UIImagePickerPreferredAssetRepresentationMode.Current, }) if (response.assets && response.assets.length > 0) { + if (isNative) { + if (typeof response.assets[0].duration !== 'number') + throw Error('Asset is not a video') + if (response.assets[0].duration > VIDEO_MAX_DURATION) { + setError(_(msg`Videos must be less than 60 seconds long`)) + return + } + } try { onSelectVideo(response.assets[0]) } catch (err) { diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx index 88537956e4..f64de29e7c 100644 --- a/src/view/com/composer/videos/VideoPreview.web.tsx +++ b/src/view/com/composer/videos/VideoPreview.web.tsx @@ -12,6 +12,8 @@ import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn' import {atoms as a} from '#/alf' import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' +const MAX_DURATION = 60 + export function VideoPreview({ asset, video, @@ -36,6 +38,15 @@ export function VideoPreview({ 'loadedmetadata', function () { setDimensions(this.videoWidth, this.videoHeight) + if (!isNaN(this.duration)) { + if (this.duration > MAX_DURATION) { + Toast.show( + _(msg`Videos must be less than 60 seconds long`), + 'xmark', + ) + clear() + } + } }, {signal}, )