-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
PlaybackContext.js
124 lines (109 loc) · 4.29 KB
/
PlaybackContext.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import PropTypes from 'prop-types';
import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
import useCurrentReportID from '@hooks/useCurrentReportID';
const PlaybackContext = React.createContext(null);
function PlaybackContextProvider({children}) {
const [currentlyPlayingURL, setCurrentlyPlayingURL] = useState(null);
const [sharedElement, setSharedElement] = useState(null);
const [originalParent, setOriginalParent] = useState(null);
const currentVideoPlayerRef = useRef(null);
const {currentReportID} = useCurrentReportID();
const pauseVideo = useCallback(() => {
if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.setStatusAsync)) {
return;
}
currentVideoPlayerRef.current.setStatusAsync({shouldPlay: false});
}, [currentVideoPlayerRef]);
const stopVideo = useCallback(() => {
if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.stopAsync)) {
return;
}
currentVideoPlayerRef.current.stopAsync({shouldPlay: false});
}, [currentVideoPlayerRef]);
const playVideo = useCallback(() => {
if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.setStatusAsync)) {
return;
}
currentVideoPlayerRef.current.getStatusAsync().then((status) => {
const newStatus = {shouldPlay: true};
if (status.durationMillis === status.positionMillis) {
newStatus.positionMillis = 0;
}
currentVideoPlayerRef.current.setStatusAsync(newStatus);
});
}, [currentVideoPlayerRef]);
const unloadVideo = useCallback(() => {
if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.unloadAsync)) {
return;
}
currentVideoPlayerRef.current.unloadAsync();
}, [currentVideoPlayerRef]);
const updateCurrentlyPlayingURL = useCallback(
(url) => {
if (currentlyPlayingURL && url !== currentlyPlayingURL) {
pauseVideo();
}
setCurrentlyPlayingURL(url);
},
[currentlyPlayingURL, pauseVideo],
);
const shareVideoPlayerElements = useCallback(
(ref, parent, child) => {
currentVideoPlayerRef.current = ref;
setOriginalParent(parent);
setSharedElement(child);
playVideo();
},
[playVideo],
);
const checkVideoPlaying = useCallback(
(statusCallback) => {
currentVideoPlayerRef.current.getStatusAsync().then((status) => {
statusCallback(status.isPlaying);
});
},
[currentVideoPlayerRef],
);
const resetVideoPlayerData = useCallback(() => {
stopVideo();
unloadVideo();
setCurrentlyPlayingURL(null);
setSharedElement(null);
setOriginalParent(null);
currentVideoPlayerRef.current = null;
}, [stopVideo, unloadVideo]);
useEffect(() => {
if (!currentReportID) {
return;
}
resetVideoPlayerData();
}, [currentReportID, resetVideoPlayerData]);
const contextValue = useMemo(
() => ({
updateCurrentlyPlayingURL,
currentlyPlayingURL,
originalParent,
sharedElement,
currentVideoPlayerRef,
shareVideoPlayerElements,
playVideo,
pauseVideo,
checkVideoPlaying,
}),
[updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying],
);
return <PlaybackContext.Provider value={contextValue}>{children}</PlaybackContext.Provider>;
}
function usePlaybackContext() {
const context = useContext(PlaybackContext);
if (context === undefined) {
throw new Error('usePlaybackContext must be used within a PlaybackContextProvider');
}
return context;
}
PlaybackContextProvider.displayName = 'PlaybackContextProvider';
PlaybackContextProvider.propTypes = {
/** Actual content wrapped by this component */
children: PropTypes.node.isRequired,
};
export {PlaybackContextProvider, usePlaybackContext};