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

feat(shortcuts): keyboard shortcuts for Fullscreen, mute, volume and seeking

Browse source
This commit is contained in:
Pankaj Patel 2019-10-08 10:06:28 +02:00 committed by Sean Yesmunt
parent 9b10cbe7bc
commit 9f7a2e2611
1 changed files with 59 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/ui/component/viewers/videoViewer/view.jsx
View file

@ -6,6 +6,24 @@ import 'video.js/dist/video-js.css';
import isUserTyping from 'util/detect-typing';
const SPACE_BAR_KEYCODE = 32;
const SMALL_F_KEYCODE = 70;
const SMALL_M_KEYCODE = 77;
const ARROW_LEFT_KEYCODE = 37;
const ARROW_UP_KEYCODE = 38;
const ARROW_RIGHT_KEYCODE = 39;
const ARROW_DOWN_KEYCODE = 40;
const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE;
const MUTE_KEYCODE = SMALL_M_KEYCODE;
const VOLUME_INCREASE_KEYCODE = ARROW_UP_KEYCODE;
const VOLUME_DECREASE_KEYCODE = ARROW_DOWN_KEYCODE;
const SEEK_FORWARD_KEYCODE = ARROW_RIGHT_KEYCODE;
const SEEK_BACKWARD_KEYCODE = ARROW_LEFT_KEYCODE;
const VOLUME_STEP = 0.1; // Volume range is 0 to 1
const SEEK_STEP = 10; // time to seek in seconds
const VIDEO_JS_OPTIONS = {
autoplay: true,
controls: true,
@ -111,11 +129,50 @@ function VideoViewer(props: Props) {
function handleKeyDown(e: KeyboardEvent) {
const videoNode = videoRef.current;
if (videoNode && !isUserTyping() && e.keyCode === SPACE_BAR_KEYCODE) {
e.preventDefault();
if (!videoNode || isUserTyping()) {
return;
}
// If not needed to prevent the default,
// add keycode handler above preventDefault & return after that
e.preventDefault();
if (e.keyCode === SPACE_BAR_KEYCODE) {
videoNode.paused ? videoNode.play() : videoNode.pause();
}
// Fullscreen Shortcut
if (e.keyCode === FULLSCREEN_KEYCODE) {
videoNode.webkitEnterFullscreen && videoNode.webkitEnterFullscreen();
}
// Mute/Unmute Shortcuts
if (e.keyCode === MUTE_KEYCODE) {
videoNode.muted = !videoNode.muted;
}
// Volume Shortcuts
const volume = videoNode.volume;
if (e.keyCode === VOLUME_INCREASE_KEYCODE) {
const newVolume = volume + VOLUME_STEP;
videoNode.volume = newVolume > 1 ? 1 : newVolume;
}
if (e.keyCode === VOLUME_DECREASE_KEYCODE) {
const newVolume = volume - VOLUME_STEP;
videoNode.volume = newVolume < 0 ? 0 : newVolume;
}
// Seeking Shortcuts
const duration = videoNode.duration;
const currentTime = videoNode.currentTime;
if (e.keyCode === SEEK_FORWARD_KEYCODE) {
const newDuration = currentTime + SEEK_STEP;
videoNode.currentTime = newDuration > duration ? duration : newDuration;
}
if (e.keyCode === SEEK_BACKWARD_KEYCODE) {
const newDuration = currentTime - SEEK_STEP;
videoNode.currentTime = newDuration < 0 ? 0 : newDuration;
}
}
window.addEventListener('keydown', handleKeyDown);