-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
VideoPopoverMenuContext.js
84 lines (72 loc) · 3.06 KB
/
VideoPopoverMenuContext.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
import PropTypes from 'prop-types';
import React, {useCallback, useContext, useMemo, useState} from 'react';
import _ from 'underscore';
import * as Expensicons from '@components/Icon/Expensicons';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import fileDownload from '@libs/fileDownload';
import * as Url from '@libs/Url';
import CONST from '@src/CONST';
import {usePlaybackContext} from './PlaybackContext';
const VideoPopoverMenuContext = React.createContext(null);
function VideoPopoverMenuContextProvider({children}) {
const {currentVideoPlayerRef} = usePlaybackContext();
const {translate} = useLocalize();
const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]);
const {isOffline} = useNetwork();
const updatePlaybackSpeed = useCallback(
(speed) => {
setCurrentPlaybackSpeed(speed);
currentVideoPlayerRef.current.setStatusAsync({rate: speed});
},
[currentVideoPlayerRef],
);
const downloadAttachment = useCallback(() => {
currentVideoPlayerRef.current.getStatusAsync().then((status) => {
const sourceURI = `/${Url.getPathFromURL(status.uri)}`;
fileDownload(sourceURI);
});
}, [currentVideoPlayerRef]);
const menuItems = useMemo(() => {
const items = [];
if (!isOffline) {
items.push({
icon: Expensicons.Download,
text: translate('common.download'),
onSelected: () => {
downloadAttachment();
},
});
}
items.push({
icon: Expensicons.Meter,
text: translate('videoPlayer.playbackSpeed'),
subMenuItems: [
..._.map(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS, (speed) => ({
icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : null,
text: speed.toString(),
onSelected: () => {
updatePlaybackSpeed(speed);
},
shouldPutLeftPaddingWhenNoIcon: true,
})),
],
});
return items;
}, [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed, isOffline]);
const contextValue = useMemo(() => ({menuItems, updatePlaybackSpeed}), [menuItems, updatePlaybackSpeed]);
return <VideoPopoverMenuContext.Provider value={contextValue}>{children}</VideoPopoverMenuContext.Provider>;
}
function useVideoPopoverMenuContext() {
const context = useContext(VideoPopoverMenuContext);
if (context === undefined) {
throw new Error('useVideoPopoverMenuContext must be used within a VideoPopoverMenuContext');
}
return context;
}
VideoPopoverMenuContextProvider.displayName = 'VideoPopoverMenuContextProvider';
VideoPopoverMenuContextProvider.propTypes = {
/** Actual content wrapped by this component */
children: PropTypes.node.isRequired,
};
export {VideoPopoverMenuContextProvider, useVideoPopoverMenuContext};