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

almost done keyboard shortcuts

Browse source
This commit is contained in:
Anthony 2021-11-05 13:21:02 +01:00
parent b518abc480
commit 9b58312e44
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 27 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,8 @@ import isUserTyping from 'util/detect-typing';
const SEEK_STEP_5 = 5; const SEEK_STEP_5 = 5;
const SEEK_STEP = 10; // time to seek in seconds 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) // check if active (clicked) element is part of video div, used for keyboard shortcuts (volume etc)
function activeElementIsPartOfVideoElement() { function activeElementIsPartOfVideoElement() {
const videoElementParent = document.getElementsByClassName('video-js-parent')[0]; 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); 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) { function handleKeyDown(e: KeyboardEvent, playerRef, containerRef) {
const player = playerRef.current; const player = playerRef.current;
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode || !player || isUserTyping()) return; if (!videoNode || !player || isUserTyping()) return;
handleSingleKeyActions(e, playerRef, containerRef); handleSingleKeyActions(e, playerRef, containerRef);
// handleShiftKeyActions(e); handleShiftKeyActions(e, playerRef);
} }
export default () => { export default () => {

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

@ -333,38 +333,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
} }
}, [adUrl]); }, [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 // Create the video DOM element and wrapper
function createVideoPlayerDOM(container) { function createVideoPlayerDOM(container) {
if (!container) return; if (!container) return;