[Video] more minor tweaks (#4906)
* update expo-video * pause when on a different screen * rm collapsable * add mute/unmute button --------- Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>zio/stable
Samuel Newman
GitHub
parent
4350dbc853
commit
a4f0c9c753
|
|
@ -139,7 +139,7 @@
|
|||
"expo-system-ui": "~3.0.4",
|
||||
"expo-task-manager": "~11.8.1",
|
||||
"expo-updates": "~0.25.14",
|
||||
"expo-video": "^1.1.10",
|
||||
"expo-video": "^1.2.4",
|
||||
"expo-web-browser": "~13.0.3",
|
||||
"fast-text-encoding": "^1.0.6",
|
||||
"history": "^5.3.0",
|
||||
|
|
|
|||
|
|
@ -1,18 +1,37 @@
|
|||
import React, {useEffect, useRef, useState} from 'react'
|
||||
import React, {useCallback, useEffect, useRef, useState} from 'react'
|
||||
import {Pressable, View} from 'react-native'
|
||||
import Animated, {FadeIn} from 'react-native-reanimated'
|
||||
import {VideoPlayer, VideoView} from 'expo-video'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useIsFocused} from '@react-navigation/native'
|
||||
|
||||
import {useVideoPlayer} from 'view/com/util/post-embeds/VideoPlayerContext'
|
||||
import {android, atoms as a} from '#/alf'
|
||||
import {HITSLOP_30} from '#/lib/constants'
|
||||
import {useVideoPlayer} from '#/view/com/util/post-embeds/VideoPlayerContext'
|
||||
import {android, atoms as a, useTheme} from '#/alf'
|
||||
import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
|
||||
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function VideoEmbedInnerNative() {
|
||||
const player = useVideoPlayer()
|
||||
const ref = useRef<VideoView>(null)
|
||||
const isScreenFocused = useIsFocused()
|
||||
|
||||
// pause the video when the screen is not focused
|
||||
useEffect(() => {
|
||||
if (!isScreenFocused) {
|
||||
let wasPlaying = player.playing
|
||||
player.pause()
|
||||
|
||||
return () => {
|
||||
if (wasPlaying) player.play()
|
||||
}
|
||||
}
|
||||
}, [isScreenFocused, player])
|
||||
|
||||
return (
|
||||
<View style={[a.flex_1, a.relative]} collapsable={false}>
|
||||
<View style={[a.flex_1, a.relative]}>
|
||||
<VideoView
|
||||
ref={ref}
|
||||
player={player}
|
||||
|
|
@ -37,6 +56,9 @@ function Controls({
|
|||
player: VideoPlayer
|
||||
enterFullscreen: () => void
|
||||
}) {
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
const [isMuted, setIsMuted] = useState(player.muted)
|
||||
const [duration, setDuration] = useState(() => Math.floor(player.duration))
|
||||
const [currentTime, setCurrentTime] = useState(() =>
|
||||
Math.floor(player.currentTime),
|
||||
|
|
@ -55,11 +77,21 @@ function Controls({
|
|||
// 1000 gets out of sync with the video time
|
||||
}, 250)
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-shadow
|
||||
const sub = player.addListener('volumeChange', ({isMuted}) => {
|
||||
setIsMuted(isMuted)
|
||||
})
|
||||
|
||||
return () => {
|
||||
clearInterval(interval)
|
||||
sub.remove()
|
||||
}
|
||||
}, [player])
|
||||
|
||||
const toggleSound = useCallback(() => {
|
||||
player.muted = !player.muted
|
||||
}, [player])
|
||||
|
||||
return (
|
||||
<View style={[a.absolute, a.inset_0]}>
|
||||
{!isNaN(timeRemaining) && (
|
||||
|
|
@ -74,12 +106,13 @@ function Controls({
|
|||
position: 'absolute',
|
||||
left: 5,
|
||||
bottom: 5,
|
||||
minHeight: 20,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
]}
|
||||
pointerEvents="none">
|
||||
]}>
|
||||
<Text
|
||||
style={[
|
||||
{color: 'white', fontSize: 12},
|
||||
{color: t.palette.white, fontSize: 12},
|
||||
a.font_bold,
|
||||
android({lineHeight: 1.25}),
|
||||
]}>
|
||||
|
|
@ -90,10 +123,35 @@ function Controls({
|
|||
<Pressable
|
||||
onPress={enterFullscreen}
|
||||
style={a.flex_1}
|
||||
accessibilityLabel="Video"
|
||||
accessibilityHint="Tap to enter full screen"
|
||||
accessibilityLabel={_(msg`Video`)}
|
||||
accessibilityHint={_(msg`Tap to enter full screen`)}
|
||||
accessibilityRole="button"
|
||||
/>
|
||||
<Pressable
|
||||
onPress={toggleSound}
|
||||
style={{
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
||||
borderRadius: 6,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 3,
|
||||
position: 'absolute',
|
||||
bottom: 5,
|
||||
right: 5,
|
||||
minHeight: 20,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
accessibilityLabel={isMuted ? _(msg`Muted`) : _(msg`Unmuted`)}
|
||||
accessibilityHint={_(msg`Tap to toggle sound`)}
|
||||
accessibilityRole="button"
|
||||
hitSlop={HITSLOP_30}>
|
||||
<Animated.View entering={FadeIn.duration(100)}>
|
||||
{isMuted ? (
|
||||
<MuteIcon width={14} fill={t.palette.white} />
|
||||
) : (
|
||||
<UnmuteIcon width={14} fill={t.palette.white} />
|
||||
)}
|
||||
</Animated.View>
|
||||
</Pressable>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12302,10 +12302,10 @@ expo-updates@~0.25.14:
|
|||
ignore "^5.3.1"
|
||||
resolve-from "^5.0.0"
|
||||
|
||||
expo-video@^1.1.10:
|
||||
version "1.1.10"
|
||||
resolved "https://registry.yarnpkg.com/expo-video/-/expo-video-1.1.10.tgz#b47c0d40c21f401236639424bd25d70c09316b7b"
|
||||
integrity sha512-k9ecpgtwAK8Ut8enm8Jv398XkB/uVOyLLqk80M/d8pH9EN5CVrBQ7iEzWlR3quvVUFM7Uf5wRukJ4hk3mZ8NCg==
|
||||
expo-video@^1.2.4:
|
||||
version "1.2.4"
|
||||
resolved "https://registry.yarnpkg.com/expo-video/-/expo-video-1.2.4.tgz#787342aded4295a1b6864f59227d178b93e1bb53"
|
||||
integrity sha512-pBK9mt7vYAbuPQjCSQxHQ7xrNjbmRheJep7JIStEg57O183/JRfP2blKuXniiSt1HBdZYPdoQnGRa3jGMXB9pg==
|
||||
|
||||
expo-web-browser@~13.0.3:
|
||||
version "13.0.3"
|
||||
|
|
|
|||
Loading…
Reference in New Issue