diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx index 77c50dc7d1..1e6b5df5f2 100644 --- a/src/view/com/composer/videos/VideoPreview.web.tsx +++ b/src/view/com/composer/videos/VideoPreview.web.tsx @@ -1,14 +1,15 @@ +import {useState} from 'react' import {View} from 'react-native' import {type ImagePickerAsset} from 'expo-image-picker' -import {msg} from '@lingui/core/macro' -import {useLingui} from '@lingui/react' +import {Trans} from '@lingui/react/macro' import {type CompressedVideo} from '#/lib/media/video/types' +import {logger} from '#/logger' import {useAutoplayDisabled} from '#/state/preferences' import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn' import {atoms as a} from '#/alf' import {ConstrainedImage} from '#/components/images/AutoSizedImage' -import * as Toast from '#/components/Toast' +import {Text} from '#/components/Typography' import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' export function VideoPreview({ @@ -21,10 +22,10 @@ export function VideoPreview({ isActivePost: boolean clear: () => void }) { - const {_} = useLingui() // TODO: figure out how to pause a GIF for reduced motion // it's not possible using an img tag -sfn const autoplayDisabled = useAutoplayDisabled() + const [previewFailed, setPreviewFailed] = useState(false) let aspectRatio: number | undefined if (asset.width && asset.height) { @@ -52,6 +53,21 @@ export function VideoPreview({ style={{width: '100%', height: '100%', objectFit: 'contain'}} alt="GIF" /> + ) : previewFailed ? ( + + + + This video can’t be previewed in your browser. It will still + be uploaded. + + + ) : ( <>