[Feature] keyboard shortcuts for Fullscreen, mute, volume & Seeking #2999

Merged
pankajpatel merged 2 commits from play-pause-keyboard into master 2019-10-08 17:33:24 +02:00
2 changed files with 48 additions and 2 deletions

View file

@ -14,6 +14,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Subscription and file view counts ([#2920](https://github.com/lbryio/lbry-desktop/pull/2920))
- Pagination on Library, Publishes, and Transactions page ([#2923](https://github.com/lbryio/lbry-desktop/pull/2923))
- Granular balance information ([#2916](https://github.com/lbryio/lbry-desktop/pull/2916))
- Keyboard shortcuts for the following actions: ([#2999](https://github.com/lbryio/lbry-desktop/pull/2999))
- `→` to Seek Forward
- `←` to Seek Backward
- `f` to Going Fullscreen
- `m` to Mute/Unmute
### Changed

View file

@ -6,6 +6,19 @@ 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_RIGHT_KEYCODE = 39;
const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE;
const MUTE_KEYCODE = SMALL_M_KEYCODE;
const SEEK_FORWARD_KEYCODE = ARROW_RIGHT_KEYCODE;
const SEEK_BACKWARD_KEYCODE = ARROW_LEFT_KEYCODE;
const SEEK_STEP = 10; // time to seek in seconds
const VIDEO_JS_OPTIONS = {
autoplay: true,
controls: true,
@ -104,11 +117,39 @@ function VideoViewer(props: Props) {
function handleKeyDown(e: KeyboardEvent) {
const videoNode = videoRef.current;
if (videoNode && !isUserTyping() && e.keyCode === SPACE_BAR_KEYCODE) {
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;
}
// 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);