[Video] Disable autoplay option (preview + web player) (#5167)

* rename setting

* preview (web)

* preview (native)

* improve autoplay disabled behaviour on web
zio/stable
Samuel Newman 2024-09-05 15:56:10 +01:00 committed by GitHub
parent d846f5bbf0
commit 60b74f7ab8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 32 additions and 8 deletions

View File

@ -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
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>
)
}

View File

@ -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>
)
}

View File

@ -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 && (

View File

@ -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)}