diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js index 8b4344ce..24876b92 100644 --- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js +++ b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js @@ -215,15 +215,18 @@ function VideoJSPlayer({ player: player, type: 'updatePlayer', }); - } else if (playerRef.current && options.sources?.length == 0) { + } + }, [options.sources, videoJSRef]); + + React.useEffect(() => { + if (playerRef.current) { // For empty Canvas pause the player if it's playing if (isPlayingRef.current) { playerRef.current.pause(); } - // Disable hotkeys for avoid playback on the underlying player - document.removeEventListener('keydown', playerHotKeys); // Set the player's aspect ratio to video playerRef.current.audioOnlyMode(false); + playerRef.current.canvasIsEmpty = true; } - }, [options.sources, videoJSRef]); + }, [canvasIsEmpty]); /** * Build track HTML for Video.js player on initial page load @@ -249,6 +252,7 @@ function VideoJSPlayer({ player.srcIndex = srcIndex; player.targets = targets; player.duration(canvasDuration); + player.canvasIsEmpty = canvasIsEmptyRef.current; // Update textTracks in the player var oldTracks = player.remoteTextTracks(); @@ -313,15 +317,13 @@ function VideoJSPlayer({ for both audio and video. */ if (!IS_MOBILE) { + const volumeIndex = controlBar.children() + .findIndex((c) => c.name_ == 'VolumePanel'); controlBar.removeChild('volumePanel'); if (!isVideo) { - controlBar.addChild('volumePanel', { inline: true }, - player.getChild('controlBar').children().length - 3 - ); + controlBar.addChild('volumePanel', { inline: true }, volumeIndex); } else { - controlBar.addChild('volumePanel', { inline: false }, - player.getChild('controlBar').children().length - 3 - ); + controlBar.addChild('volumePanel', { inline: false }, volumeIndex); } /* Trigger ready event to reset the volume slider in the refreshed @@ -358,12 +360,9 @@ function VideoJSPlayer({ * @param {Object} player Video.js player instance */ const playerLoadedMetadata = (player) => { - player.on('loadedmetadata', () => { + player.one('loadedmetadata', () => { videojs.log('Player loadedmetadata'); - // Enable hotkeys eventlistener after inaccessible items - document.addEventListener('keydown', playerHotKeys); - player.duration(canvasDurationRef.current); isEndedRef.current ? player.currentTime(0) : player.currentTime(currentTime); @@ -516,7 +515,7 @@ function VideoJSPlayer({ elements on the page */ document.addEventListener('keydown', (event) => { - playerHotKeys(event, player); + playerHotKeys(event, player, canvasIsEmptyRef.current); }); }; @@ -888,7 +887,7 @@ function VideoJSPlayer({ > - {((hasStructure || playlist.isPlaylist) && !canvasIsEmptyRef.current) && + {(hasStructure || playlist.isPlaylist) && (

{ timeUpdateHandler(); }, 100); - - }, [player.src(), player.srcIndex]); + if (player.canvasIsEmpty) { setZoomedOut(true); } + }, [player.src(), player.srcIndex, player.canvasIsEmpty]); /** * Keydown event handler for the track button on the player controls, @@ -132,6 +132,7 @@ function TrackScrubberButton({ player, trackScrubberRef, timeToolRef, isPlaylist if (e.which === 32 || e.which === 13) { e.preventDefault(); handleTrackScrubberClick(); + e.stopPropagation(); } }; diff --git a/src/services/utility-helpers.js b/src/services/utility-helpers.js index bdbc3b75..3abe8520 100644 --- a/src/services/utility-helpers.js +++ b/src/services/utility-helpers.js @@ -543,9 +543,10 @@ export function autoScroll(currentItem, containerRef, toTop = false) { * Bind default hotkeys for VideoJS player * @param {Object} event keydown event * @param {String} id player instance ID in VideoJS + * @param {Boolean} canvasIsEmpty flag to indicate empty Canvas * @returns */ -export function playerHotKeys(event, player) { +export function playerHotKeys(event, player, canvasIsEmpty) { let playerInst = player?.player(); let inputs = ['input', 'textarea']; @@ -564,14 +565,15 @@ export function playerHotKeys(event, player) { - focus is on a navigation tab AND the key pressed is one of left/right arrow keys this specific combination of keys with a focused navigation tab is avoided to allow keyboard navigation between tabbed UI components, instead of triggering player hotkeys - - when key combinations are not in use with a key associated with hotkeys + - key combinations are not in use with a key associated with hotkeys + - current Canvas is empty */ if ( (activeElement && (inputs.indexOf(activeElement.tagName.toLowerCase()) !== -1 || (activeElement.role === "tab" && (pressedKey === 37 || pressedKey === 39))) && !focusedWithinPlayer) - || isCombKeyPress + || isCombKeyPress || canvasIsEmpty ) { return; } else if (playerInst === null || playerInst === undefined) {