import * as OVERLAY from './overlays'; import * as KEYCODES from 'constants/keycodes'; import isUserTyping from 'util/detect-typing'; const SEEK_STEP_5 = 5; const SEEK_STEP = 10; // time to seek in seconds // check if active (clicked) element is part of video div, used for keyboard shortcuts (volume etc) function activeElementIsPartOfVideoElement() { const videoElementParent = document.getElementsByClassName('video-js-parent')[0]; const activeElement = document.activeElement; return videoElementParent.contains(activeElement); } function volumeUp(event, playerRef) { // dont run if video element is not active element (otherwise runs when scrolling using keypad) const videoElementIsActive = activeElementIsPartOfVideoElement(); const player = playerRef.current; if (!player || !videoElementIsActive) return; event.preventDefault(); player.volume(player.volume() + 0.05); OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100)); player.userActive(true); } function volumeDown(event, playerRef) { // dont run if video element is not active element (otherwise runs when scrolling using keypad) const videoElementIsActive = activeElementIsPartOfVideoElement(); const player = playerRef.current; if (!player || !videoElementIsActive) return; event.preventDefault(); player.volume(player.volume() - 0.05); OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100)); player.userActive(true); } function seekVideo(stepSize: number, playerRef, containerRef) { const player = playerRef.current; const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); if (!videoNode || !player) return; const duration = videoNode.duration; const currentTime = videoNode.currentTime; const newDuration = currentTime + stepSize; if (newDuration < 0) { videoNode.currentTime = 0; } else if (newDuration > duration) { videoNode.currentTime = duration; } else { videoNode.currentTime = newDuration; } OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0); player.userActive(true); } function toggleFullscreen(playerRef) { const player = playerRef.current; if (!player) return; if (!player.isFullscreen()) { player.requestFullscreen(); } else { player.exitFullscreen(); } } function toggleTheaterMode(playerRef) { const player = playerRef.current; if (!player) return; // TODO: have to fix this toggleVideoTheaterMode(); if (player.isFullscreen()) { player.exitFullscreen(); } } function toggleMute(containerRef) { const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); if (!videoNode) return; videoNode.muted = !videoNode.muted; } function togglePlay(containerRef) { const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); if (!videoNode) return; videoNode.paused ? videoNode.play() : videoNode.pause(); } // eslint-disable-next-line flowtype/no-types-missing-file-annotation function handleSingleKeyActions(e: KeyboardEvent, playerRef, containerRef) { if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return; if (e.keyCode === KEYCODES.SPACEBAR || e.keyCode === KEYCODES.K) togglePlay(containerRef); if (e.keyCode === KEYCODES.F) toggleFullscreen(playerRef); if (e.keyCode === KEYCODES.M) toggleMute(containerRef); if (e.keyCode === KEYCODES.UP) volumeUp(e, playerRef); if (e.keyCode === KEYCODES.DOWN) volumeDown(e, playerRef); if (e.keyCode === KEYCODES.T) toggleTheaterMode(playerRef); if (e.keyCode === KEYCODES.L) seekVideo(SEEK_STEP, playerRef, containerRef); if (e.keyCode === KEYCODES.J) seekVideo(-SEEK_STEP, playerRef, containerRef); if (e.keyCode === KEYCODES.RIGHT) seekVideo(SEEK_STEP_5, playerRef, containerRef); if (e.keyCode === KEYCODES.LEFT) seekVideo(-SEEK_STEP_5, playerRef, containerRef); } function handleKeyDown(e: KeyboardEvent, playerRef, containerRef) { const player = playerRef.current; const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); if (!videoNode || !player || isUserTyping()) return; handleSingleKeyActions(e, playerRef, containerRef); // handleShiftKeyActions(e); } export default () => { var curried_function = function(playerRef, containerRef) { return function curried_func(e) { handleKeyDown(e, playerRef, containerRef); }; }; return { curried_function, }; };