diff options
4 files changed, 32 insertions, 8 deletions
diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx index 199a1fff7..28b46bae2 100644 --- a/src/view/com/composer/videos/VideoPreview.tsx +++ b/src/view/com/composer/videos/VideoPreview.tsx @@ -6,8 +6,10 @@ import {useVideoPlayer, VideoView} from 'expo-video' import {CompressedVideo} from '#/lib/media/video/types' import {clamp} from '#/lib/numbers' +import {useAutoplayDisabled} from '#/state/preferences' import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn' import {atoms as a, useTheme} from '#/alf' +import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' export function VideoPreview({ asset, @@ -20,10 +22,13 @@ export function VideoPreview({ clear: () => void }) { const t = useTheme() + const autoplayDisabled = useAutoplayDisabled() const player = useVideoPlayer(video.uri, player => { player.loop = true player.muted = true - player.play() + if (!autoplayDisabled) { + player.play() + } }) let aspectRatio = asset.width / asset.height @@ -53,6 +58,11 @@ export function VideoPreview({ contentFit="contain" /> <ExternalEmbedRemoveBtn onRemove={clear} /> + {autoplayDisabled && ( + <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}> + <PlayButtonIcon size={48} /> + </View> + )} </View> ) } diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx index 4c44781cf..9473be074 100644 --- a/src/view/com/composer/videos/VideoPreview.web.tsx +++ b/src/view/com/composer/videos/VideoPreview.web.tsx @@ -6,9 +6,11 @@ import {useLingui} from '@lingui/react' import {CompressedVideo} from '#/lib/media/video/types' import {clamp} from '#/lib/numbers' +import {useAutoplayDisabled} from '#/state/preferences' import * as Toast from '#/view/com/util/Toast' import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn' import {atoms as a} from '#/alf' +import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' export function VideoPreview({ asset, @@ -23,6 +25,7 @@ export function VideoPreview({ }) { const ref = useRef<HTMLVideoElement>(null) const {_} = useLingui() + const autoplayDisabled = useAutoplayDisabled() useEffect(() => { if (!ref.current) return @@ -66,17 +69,23 @@ export function VideoPreview({ {aspectRatio}, a.overflow_hidden, {backgroundColor: 'black'}, + a.relative, ]}> <ExternalEmbedRemoveBtn onRemove={clear} /> <video ref={ref} src={video.uri} style={{width: '100%', height: '100%', objectFit: 'cover'}} - autoPlay + autoPlay={!autoplayDisabled} loop muted playsInline /> + {autoplayDisabled && ( + <View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}> + <PlayButtonIcon size={48} /> + </View> + )} </View> ) } diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx index d9b99ef3a..82c0ab7a6 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx @@ -111,9 +111,9 @@ export function Controls({ // autoplay/pause based on visibility const autoplayDisabled = useAutoplayDisabled() useEffect(() => { - if (active && !autoplayDisabled) { + if (active) { if (onScreen) { - play() + if (!autoplayDisabled) play() } else { pause() } @@ -151,10 +151,11 @@ export function Controls({ const onPressEmptySpace = useCallback(() => { if (!focused) { drawFocus() + if (autoplayDisabled) play() } else { togglePlayPause() } - }, [togglePlayPause, drawFocus, focused]) + }, [togglePlayPause, drawFocus, focused, autoplayDisabled, play]) const onPressPlayPause = useCallback(() => { drawFocus() @@ -240,7 +241,8 @@ export function Controls({ }, []) const showControls = - (focused && !playing) || (interactingViaKeypress ? hasFocus : hovered) + ((focused || autoplayDisabled) && !playing) || + (interactingViaKeypress ? hasFocus : hovered) return ( <div @@ -273,7 +275,10 @@ export function Controls({ ? msg`Pause video` : msg`Play video`, )} - style={[a.flex_1, web({cursor: showCursor ? 'pointer' : 'none'})]} + style={[ + a.flex_1, + web({cursor: showCursor || !playing ? 'pointer' : 'none'}), + ]} onPress={onPressEmptySpace} /> {!showControls && !focused && duration > 0 && ( diff --git a/src/view/screens/AccessibilitySettings.tsx b/src/view/screens/AccessibilitySettings.tsx index 5cb5c6a39..2992e5c7e 100644 --- a/src/view/screens/AccessibilitySettings.tsx +++ b/src/view/screens/AccessibilitySettings.tsx @@ -108,7 +108,7 @@ export function AccessibilitySettingsScreen({}: Props) { <View style={[pal.view, styles.toggleCard]}> <ToggleButton type="default-light" - label={_(msg`Disable autoplay for GIFs`)} + label={_(msg`Disable autoplay for videos and GIFs`)} labelType="lg" isSelected={autoplayDisabled} onPress={() => setAutoplayDisabled(!autoplayDisabled)} |