diff --git a/ui/component/viewers/videoViewer/internal/videojs-events.jsx b/ui/component/viewers/videoViewer/internal/videojs-events.jsx index 18e72fa2a..af4f514ad 100644 --- a/ui/component/viewers/videoViewer/internal/videojs-events.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs-events.jsx @@ -5,6 +5,8 @@ import isUserTyping from 'util/detect-typing'; const SEEK_STEP_5 = 5; const SEEK_STEP = 10; // time to seek in seconds +const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2]; + // 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]; @@ -100,12 +102,36 @@ function handleSingleKeyActions(e: KeyboardEvent, playerRef, containerRef) { if (e.keyCode === KEYCODES.LEFT) seekVideo(-SEEK_STEP_5, playerRef, containerRef); } +function changePlaybackSpeed(shouldSpeedUp: boolean, playerRef) { + const player = playerRef.current; + if (!player) return; + const isSpeedUp = shouldSpeedUp; + const rate = player.playbackRate(); + let rateIndex = videoPlaybackRates.findIndex((x) => x === rate); + if (rateIndex >= 0) { + rateIndex = isSpeedUp ? Math.min(rateIndex + 1, videoPlaybackRates.length - 1) : Math.max(rateIndex - 1, 0); + const nextRate = videoPlaybackRates[rateIndex]; + + OVERLAY.showPlaybackRateOverlay(player, nextRate, isSpeedUp); + player.userActive(true); + player.playbackRate(nextRate); + } +} + +function handleShiftKeyActions(e: KeyboardEvent, playerRef) { + if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return; + if (e.keyCode === KEYCODES.PERIOD) changePlaybackSpeed(true, playerRef); + if (e.keyCode === KEYCODES.COMMA) changePlaybackSpeed(false, playerRef); + if (e.keyCode === KEYCODES.N) playNext(); + if (e.keyCode === KEYCODES.P) playPrevious(); +} + 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); + handleShiftKeyActions(e, playerRef); } export default () => { diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 269b9fc21..f3f21bc72 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -333,38 +333,6 @@ export default React.memo(function VideoJs(props: Props) { } }, [adUrl]); - // function handleKeyDown(e: KeyboardEvent) { - // const player = playerRef.current; - // const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); - // if (!videoNode || !player || isUserTyping()) return; - // handleSingleKeyActions(e, playerRef); - // handleShiftKeyActions(e); - // } - - function handleShiftKeyActions(e: KeyboardEvent) { - if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return; - if (e.keyCode === KEYCODES.PERIOD) changePlaybackSpeed(true); - if (e.keyCode === KEYCODES.COMMA) changePlaybackSpeed(false); - if (e.keyCode === KEYCODES.N) playNext(); - if (e.keyCode === KEYCODES.P) playPrevious(); - } - - function changePlaybackSpeed(shouldSpeedUp: boolean) { - const player = playerRef.current; - if (!player) return; - const isSpeedUp = shouldSpeedUp; - const rate = player.playbackRate(); - let rateIndex = videoPlaybackRates.findIndex((x) => x === rate); - if (rateIndex >= 0) { - rateIndex = isSpeedUp ? Math.min(rateIndex + 1, videoPlaybackRates.length - 1) : Math.max(rateIndex - 1, 0); - const nextRate = videoPlaybackRates[rateIndex]; - - OVERLAY.showPlaybackRateOverlay(player, nextRate, isSpeedUp); - player.userActive(true); - player.playbackRate(nextRate); - } - } - // Create the video DOM element and wrapper function createVideoPlayerDOM(container) { if (!container) return;