forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[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>
authored by
Samuel Newman
Samuel Newman
and committed by
GitHub
a4f0c9c7
4350dbc8
+72
-14
+1
-1
package.json
+1
-1
package.json
+67
-9
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+67
-9
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
···
1
-
import React, {useEffect, useRef, useState} from 'react'
1
+
import React, {useCallback, useEffect, useRef, useState} from 'react'
2
2
import {Pressable, View} from 'react-native'
3
3
import Animated, {FadeIn} from 'react-native-reanimated'
4
4
import {VideoPlayer, VideoView} from 'expo-video'
5
+
import {msg} from '@lingui/macro'
6
+
import {useLingui} from '@lingui/react'
7
+
import {useIsFocused} from '@react-navigation/native'
5
8
6
-
import {useVideoPlayer} from 'view/com/util/post-embeds/VideoPlayerContext'
7
-
import {android, atoms as a} from '#/alf'
9
+
import {HITSLOP_30} from '#/lib/constants'
10
+
import {useVideoPlayer} from '#/view/com/util/post-embeds/VideoPlayerContext'
11
+
import {android, atoms as a, useTheme} from '#/alf'
12
+
import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
13
+
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
8
14
import {Text} from '#/components/Typography'
9
15
10
16
export function VideoEmbedInnerNative() {
11
17
const player = useVideoPlayer()
12
18
const ref = useRef<VideoView>(null)
19
+
const isScreenFocused = useIsFocused()
20
+
21
+
// pause the video when the screen is not focused
22
+
useEffect(() => {
23
+
if (!isScreenFocused) {
24
+
let wasPlaying = player.playing
25
+
player.pause()
26
+
27
+
return () => {
28
+
if (wasPlaying) player.play()
29
+
}
30
+
}
31
+
}, [isScreenFocused, player])
13
32
14
33
return (
15
-
<View style={[a.flex_1, a.relative]} collapsable={false}>
34
+
<View style={[a.flex_1, a.relative]}>
16
35
<VideoView
17
36
ref={ref}
18
37
player={player}
···
37
56
player: VideoPlayer
38
57
enterFullscreen: () => void
39
58
}) {
59
+
const {_} = useLingui()
60
+
const t = useTheme()
61
+
const [isMuted, setIsMuted] = useState(player.muted)
40
62
const [duration, setDuration] = useState(() => Math.floor(player.duration))
41
63
const [currentTime, setCurrentTime] = useState(() =>
42
64
Math.floor(player.currentTime),
···
55
77
// 1000 gets out of sync with the video time
56
78
}, 250)
57
79
80
+
// eslint-disable-next-line @typescript-eslint/no-shadow
81
+
const sub = player.addListener('volumeChange', ({isMuted}) => {
82
+
setIsMuted(isMuted)
83
+
})
84
+
58
85
return () => {
59
86
clearInterval(interval)
87
+
sub.remove()
60
88
}
61
89
}, [player])
62
90
91
+
const toggleSound = useCallback(() => {
92
+
player.muted = !player.muted
93
+
}, [player])
94
+
63
95
return (
64
96
<View style={[a.absolute, a.inset_0]}>
65
97
{!isNaN(timeRemaining) && (
···
74
106
position: 'absolute',
75
107
left: 5,
76
108
bottom: 5,
109
+
minHeight: 20,
110
+
justifyContent: 'center',
77
111
},
78
-
]}
79
-
pointerEvents="none">
112
+
]}>
80
113
<Text
81
114
style={[
82
-
{color: 'white', fontSize: 12},
115
+
{color: t.palette.white, fontSize: 12},
83
116
a.font_bold,
84
117
android({lineHeight: 1.25}),
85
118
]}>
···
90
123
<Pressable
91
124
onPress={enterFullscreen}
92
125
style={a.flex_1}
93
-
accessibilityLabel="Video"
94
-
accessibilityHint="Tap to enter full screen"
126
+
accessibilityLabel={_(msg`Video`)}
127
+
accessibilityHint={_(msg`Tap to enter full screen`)}
95
128
accessibilityRole="button"
96
129
/>
130
+
<Pressable
131
+
onPress={toggleSound}
132
+
style={{
133
+
backgroundColor: 'rgba(0, 0, 0, 0.75)',
134
+
borderRadius: 6,
135
+
paddingHorizontal: 6,
136
+
paddingVertical: 3,
137
+
position: 'absolute',
138
+
bottom: 5,
139
+
right: 5,
140
+
minHeight: 20,
141
+
justifyContent: 'center',
142
+
}}
143
+
accessibilityLabel={isMuted ? _(msg`Muted`) : _(msg`Unmuted`)}
144
+
accessibilityHint={_(msg`Tap to toggle sound`)}
145
+
accessibilityRole="button"
146
+
hitSlop={HITSLOP_30}>
147
+
<Animated.View entering={FadeIn.duration(100)}>
148
+
{isMuted ? (
149
+
<MuteIcon width={14} fill={t.palette.white} />
150
+
) : (
151
+
<UnmuteIcon width={14} fill={t.palette.white} />
152
+
)}
153
+
</Animated.View>
154
+
</Pressable>
97
155
</View>
98
156
)
99
157
}
+4
-4
yarn.lock
+4
-4
yarn.lock
···
12302
12302
ignore "^5.3.1"
12303
12303
resolve-from "^5.0.0"
12304
12304
12305
-
expo-video@^1.1.10:
12306
-
version "1.1.10"
12307
-
resolved "https://registry.yarnpkg.com/expo-video/-/expo-video-1.1.10.tgz#b47c0d40c21f401236639424bd25d70c09316b7b"
12308
-
integrity sha512-k9ecpgtwAK8Ut8enm8Jv398XkB/uVOyLLqk80M/d8pH9EN5CVrBQ7iEzWlR3quvVUFM7Uf5wRukJ4hk3mZ8NCg==
12305
+
expo-video@^1.2.4:
12306
+
version "1.2.4"
12307
+
resolved "https://registry.yarnpkg.com/expo-video/-/expo-video-1.2.4.tgz#787342aded4295a1b6864f59227d178b93e1bb53"
12308
+
integrity sha512-pBK9mt7vYAbuPQjCSQxHQ7xrNjbmRheJep7JIStEg57O183/JRfP2blKuXniiSt1HBdZYPdoQnGRa3jGMXB9pg==
12309
12309
12310
12310
expo-web-browser@~13.0.3:
12311
12311
version "13.0.3"