LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

running but needs some testing

Browse source
This commit is contained in:
Anthony 2021-11-08 21:42:13 +01:00
parent be4b8a4631
commit b7e55296d5
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
3 changed files with 41 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
ui/component/viewers/videoViewer/internal/videojs-events.jsx
View file

@ -9,27 +9,28 @@ const TAP = {
RETRY: 'RETRY',
};
export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
const setLabel = (controlBar, childName, label) => {
const c = controlBar.getChild(childName);
if (c) {
c.controlText(label);
}
};
export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode,
playerRef, autoplaySetting}) => {
// Override the player's control text. We override to:
// 1. Add keyboard shortcut to the tool-tip.
// 2. Override videojs' i18n and use our own (don't want to have 2 systems).
//
// Notes:
// - For dynamic controls (e.g. play/pause), those unfortunately need to be
// updated again at their event-listener level (that's just the way videojs
// updates the text), hence the need to listen to 'play', 'pause' and 'volumechange'
// on top of just 'loadstart'.
// - videojs changes the MuteToggle text at 'loadstart', so this was chosen
// as the listener to update static texts.
function resolveCtrlText(e) {
// Override the player's control text. We override to:
// 1. Add keyboard shortcut to the tool-tip.
// 2. Override videojs' i18n and use our own (don't want to have 2 systems).
//
// Notes:
// - For dynamic controls (e.g. play/pause), those unfortunately need to be
// updated again at their event-listener level (that's just the way videojs
// updates the text), hence the need to listen to 'play', 'pause' and 'volumechange'
// on top of just 'loadstart'.
// - videojs changes the MuteToggle text at 'loadstart', so this was chosen
// as the listener to update static texts.
const setLabel = (controlBar, childName, label) => {
const c = controlBar.getChild(childName);
if (c) {
c.controlText(label);
}
};
const player = playerRef.current;
if (player) {
const ctrlBar = player.getChild('controlBar');
@ -121,7 +122,7 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
}
}, [videoTheaterMode]);
// when user clicks 'Unmute' button, turn audio on and hide unmute button
function unmuteAndHideHint() {
const player = playerRef.current;
if (player) {
@ -154,7 +155,7 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
switch (tapButton) {
case TAP.NONE:
setButtonVisibility(/*tapToUnmuteRef*/, false);
setButtonVisibility(tapToUnmuteRef, false);
setButtonVisibility(tapToRetryRef, false);
break;
case TAP.UNMUTE:
@ -171,8 +172,9 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
}
}
useEffect(() => {
console.log('RUNNING HERE!')
const player = playerRef.current;
if (player) {
const touchOverlay = player.getChild('TouchOverlay');
@ -189,7 +191,6 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
}
}, [autoplaySetting]);
// Add various event listeners to player
player.one('play', onInitialPlay);
player.on('play', resolveCtrlText);
@ -199,11 +200,10 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
player.on('volumechange', resolveCtrlText);
player.on('volumechange', onVolumeChange);
player.on('error', onError);
player.on('ended', onEnded);
// player.on('ended', onEnded);
return {
detectFileType,
createVideoPlayerDOM,
retryVideoAfterFailure,
unmuteAndHideHint,
};
};

1
ui/component/viewers/videoViewer/internal/videojs-functions.jsx
View file

@ -1,3 +1,4 @@
// @flow
export default ({ source, sourceType, videoJsOptions, isAudio }) => {
function detectFileType() {

20
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -135,13 +135,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
playPrevious,
} = props;
// initiate keyboard shortcuts
const { curried_function } = keyboardShorcuts({ toggleVideoTheaterMode, playNext, playPrevious });
const [reload, setReload] = useState('initial');
const { initializeEvents, unmuteAndHideHint, retryVideoAfterFailure } = events(videoTheaterMode, setReload, autoplaySetting);
// will later store the videojs player
const playerRef = useRef();
const containerRef = useRef();
@ -149,6 +142,11 @@ export default React.memo<Props>(function VideoJs(props: Props) {
const tapToUnmuteRef = useRef();
const tapToRetryRef = useRef();
// initiate keyboard shortcuts
const { curried_function } = keyboardShorcuts({ toggleVideoTheaterMode, playNext, playPrevious });
const [reload, setReload] = useState('initial');
const videoJsOptions = {
...VIDEO_JS_OPTIONS,
autoplay: autoplay,
@ -173,6 +171,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
const { detectFileType, createVideoPlayerDOM } = functions({ source, sourceType, videoJsOptions, isAudio });
let unmuteAndHideHint, retryVideoAfterFailure;
// Initialize video.js
function initializeVideoPlayer(el) {
if (!el) return;
@ -185,7 +184,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
runAds(internalFeatureEnabled, allowPreRoll, player);
initializeEvents({ player, tapToRetryRef, tapToUnmuteRef });
const videoJsEvents = events({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, playerRef, autoplaySetting, player });
unmuteAndHideHint = { events };
retryVideoAfterFailure = { events };
videoJsEvents.initializeEvents({ player, tapToRetryRef, tapToUnmuteRef });
// Replace volume bar with custom LBRY volume bar
LbryVolumeBarClass.replaceExisting(player);