diff --git a/ui/component/viewers/videoViewer/internal/videojs-events.jsx b/ui/component/viewers/videoViewer/internal/videojs-events.jsx index ae21ddd69..e2bc1a6a2 100644 --- a/ui/component/viewers/videoViewer/internal/videojs-events.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs-events.jsx @@ -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, }; }; diff --git a/ui/component/viewers/videoViewer/internal/videojs-functions.jsx b/ui/component/viewers/videoViewer/internal/videojs-functions.jsx index 021648fe9..e794abaea 100644 --- a/ui/component/viewers/videoViewer/internal/videojs-functions.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs-functions.jsx @@ -1,3 +1,4 @@ +// @flow export default ({ source, sourceType, videoJsOptions, isAudio }) => { function detectFileType() { diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index f0de188da..3f4db017a 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -135,13 +135,6 @@ export default React.memo(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(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(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(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);