forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Videos] handle app backgrounding (#4912)
* play when returning from background
* play when unfullscreening
* play when entering fullscreen, just to be sure
* state -> ref
---------
Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
authored by
Samuel Newman
Samuel Newman
and committed by
GitHub
ab0da7c8
0a9782ac
+36
-7
+36
-7
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+36
-7
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
···
7
7
import {useIsFocused} from '@react-navigation/native'
8
8
9
9
import {HITSLOP_30} from '#/lib/constants'
10
+
import {useAppState} from '#/lib/hooks/useAppState'
10
11
import {useVideoPlayer} from '#/view/com/util/post-embeds/VideoPlayerContext'
11
12
import {android, atoms as a, useTheme} from '#/alf'
12
13
import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
···
21
22
const player = useVideoPlayer()
22
23
const ref = useRef<VideoView>(null)
23
24
const isScreenFocused = useIsFocused()
25
+
const isAppFocused = useAppState()
26
+
const prevFocusedRef = useRef(isAppFocused)
27
+
28
+
// resume video when coming back from background
29
+
useEffect(() => {
30
+
if (isAppFocused !== prevFocusedRef.current) {
31
+
prevFocusedRef.current = isAppFocused
32
+
if (isAppFocused === 'active') {
33
+
player.play()
34
+
}
35
+
}
36
+
}, [isAppFocused, player])
24
37
25
38
// pause the video when the screen is not focused
26
39
useEffect(() => {
···
33
46
}
34
47
}
35
48
}, [isScreenFocused, player])
49
+
50
+
const enterFullscreen = useCallback(() => {
51
+
ref.current?.enterFullscreen()
52
+
}, [])
36
53
37
54
return (
38
55
<View style={[a.flex_1, a.relative]}>
···
50
67
PlatformInfo.setAudioCategory(AudioCategory.Ambient)
51
68
PlatformInfo.setAudioMixWithOthers(true)
52
69
player.muted = true
70
+
if (!player.playing) player.play()
53
71
}}
54
72
/>
55
-
<Controls
56
-
player={player}
57
-
enterFullscreen={() => {
58
-
ref.current?.enterFullscreen()
59
-
}}
60
-
/>
73
+
<Controls player={player} enterFullscreen={enterFullscreen} />
61
74
</View>
62
75
)
63
76
}
···
102
115
}
103
116
}, [player])
104
117
118
+
const onPressFullscreen = useCallback(() => {
119
+
switch (player.status) {
120
+
case 'idle':
121
+
case 'loading':
122
+
case 'readyToPlay': {
123
+
if (!player.playing) player.play()
124
+
enterFullscreen()
125
+
break
126
+
}
127
+
case 'error': {
128
+
player.replay()
129
+
break
130
+
}
131
+
}
132
+
}, [player, enterFullscreen])
133
+
105
134
const toggleMuted = useCallback(() => {
106
135
const muted = !player.muted
107
136
// We want to set this to the _inverse_ of the new value, because we actually want for the audio to be mixed when
···
150
179
</Animated.View>
151
180
)}
152
181
<Pressable
153
-
onPress={enterFullscreen}
182
+
onPress={onPressFullscreen}
154
183
style={a.flex_1}
155
184
accessibilityLabel={_(msg`Video`)}
156
185
accessibilityHint={_(msg`Tap to enter full screen`)}