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

Fixed and cleaned up Hotkeys. Fixed overlapping lbry hotkeys with browser hotkeys

Browse source
This commit is contained in:
Max Kotlan 2021-04-16 14:51:56 -04:00 committed by Sean Yesmunt
parent fdeea30a4a
commit 1279a6eaaf
1 changed files with 93 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -81,7 +81,6 @@ const VIDEO_JS_OPTIONS: VideoJSOptions = {
}, },
}; };
const F11_KEYCODE = 122;
const SPACE_BAR_KEYCODE = 32; const SPACE_BAR_KEYCODE = 32;
const SMALL_F_KEYCODE = 70; const SMALL_F_KEYCODE = 70;
const SMALL_M_KEYCODE = 77; const SMALL_M_KEYCODE = 77;
@ -185,7 +184,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
} = props; } = props;
const [reload, setReload] = useState('initial'); const [reload, setReload] = useState('initial');
const playerRef = useRef(); const playerRef = useRef();
const containerRef = useRef(); const containerRef = useRef();
const videoJsOptions = { const videoJsOptions = {
@ -352,71 +350,54 @@ export default React.memo<Props>(function VideoJs(props: Props) {
function handleKeyDown(e: KeyboardEvent) { function handleKeyDown(e: KeyboardEvent) {
const player = playerRef.current; const player = playerRef.current;
const videoNode: ?HTMLVideoElement = 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()) { handleSingleKeyActions(e);
return; handleShiftKeyActions(e);
} }
if (e.keyCode === SPACE_BAR_KEYCODE || e.keyCode === SMALL_K_KEYCODE) { function handleShiftKeyActions(e: KeyboardEvent) {
videoNode.paused ? videoNode.play() : videoNode.pause(); if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return;
if (e.keyCode === PERIOD_KEYCODE) changePlaybackSpeed(true);
if (e.keyCode === COMMA_KEYCODE) changePlaybackSpeed(false);
} }
// Fullscreen toggle shortcuts function handleSingleKeyActions(e: KeyboardEvent) {
if (e.keyCode === FULLSCREEN_KEYCODE || e.keyCode === F11_KEYCODE) { if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
if (!player.isFullscreen()) { if (e.keyCode === SPACE_BAR_KEYCODE || e.keyCode === SMALL_K_KEYCODE) togglePlay();
player.requestFullscreen(); if (e.keyCode === FULLSCREEN_KEYCODE) toggleFullscreen();
} else { if (e.keyCode === MUTE_KEYCODE) toggleMute();
player.exitFullscreen(); if (e.keyCode === VOLUME_UP_KEYCODE) volumeUp();
} if (e.keyCode === VOLUME_DOWN_KEYCODE) volumeDown();
if (e.keyCode === THEATER_MODE_KEYCODE) toggleTheaterMode();
if (e.keyCode === SEEK_FORWARD_KEYCODE) seekVideo(SEEK_STEP);
if (e.keyCode === SEEK_BACKWARD_KEYCODE) seekVideo(-SEEK_STEP);
if (e.keyCode === SEEK_FORWARD_KEYCODE_5) seekVideo(SEEK_STEP_5);
if (e.keyCode === SEEK_BACKWARD_KEYCODE_5) seekVideo(-SEEK_STEP_5);
} }
// Mute/Unmute Shortcuts function seekVideo(stepSize: number) {
if (e.keyCode === MUTE_KEYCODE) { const player = playerRef.current;
videoNode.muted = !videoNode.muted; const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
} if (!videoNode || !player) return;
if (e.keyCode === VOLUME_DOWN_KEYCODE) {
player.volume(player.volume() - 0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true);
}
if (e.keyCode === VOLUME_UP_KEYCODE) {
player.volume(player.volume() + 0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true);
}
// Seeking Shortcuts
if (!e.altKey) {
const duration = videoNode.duration; const duration = videoNode.duration;
const currentTime = videoNode.currentTime; const currentTime = videoNode.currentTime;
if (e.keyCode === SEEK_FORWARD_KEYCODE) { const newDuration = currentTime + stepSize;
const newDuration = currentTime + SEEK_STEP; if (newDuration < 0) {
videoNode.currentTime = newDuration > duration ? duration : newDuration; videoNode.currentTime = 0;
OVERLAY.showSeekedOverlay(player, SEEK_STEP, true); } else if (newDuration > duration) {
player.userActive(true); videoNode.currentTime = duration;
} else if (e.keyCode === SEEK_BACKWARD_KEYCODE) { } else {
const newDuration = currentTime - SEEK_STEP; videoNode.currentTime = newDuration;
videoNode.currentTime = newDuration < 0 ? 0 : newDuration;
OVERLAY.showSeekedOverlay(player, SEEK_STEP, false);
player.userActive(true);
} }
if (e.keyCode === SEEK_FORWARD_KEYCODE_5) { OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0);
const newDuration = currentTime + SEEK_STEP_5;
videoNode.currentTime = newDuration < 0 ? 0 : newDuration;
OVERLAY.showSeekedOverlay(player, SEEK_STEP_5, true);
player.userActive(true); player.userActive(true);
} else if (e.keyCode === SEEK_BACKWARD_KEYCODE_5) {
const newDuration = currentTime - SEEK_STEP_5;
videoNode.currentTime = newDuration < 0 ? 0 : newDuration;
OVERLAY.showSeekedOverlay(player, SEEK_STEP_5, false);
player.userActive(true);
}
} }
// Playback-Rate Shortcuts ('>' = speed up, '<' = speed down) function changePlaybackSpeed(shouldSpeedUp: boolean) {
if (e.shiftKey && (e.keyCode === PERIOD_KEYCODE || e.keyCode === COMMA_KEYCODE)) { const player = playerRef.current;
const isSpeedUp = e.keyCode === PERIOD_KEYCODE; if (!player) return;
const isSpeedUp = shouldSpeedUp;
const rate = player.playbackRate(); const rate = player.playbackRate();
let rateIndex = videoPlaybackRates.findIndex((x) => x === rate); let rateIndex = videoPlaybackRates.findIndex((x) => x === rate);
if (rateIndex >= 0) { if (rateIndex >= 0) {
@ -429,13 +410,51 @@ export default React.memo<Props>(function VideoJs(props: Props) {
} }
} }
// Theater Mode shortcut function toggleFullscreen() {
if (e.keyCode === THEATER_MODE_KEYCODE) { const player = playerRef.current;
if (!player) return;
if (!player.isFullscreen()) {
player.requestFullscreen();
} else {
player.exitFullscreen();
}
}
function toggleTheaterMode() {
const player = playerRef.current;
if (!player) return;
toggleVideoTheaterMode(); toggleVideoTheaterMode();
if (player.isFullscreen()) { if (player.isFullscreen()) {
player.exitFullscreen(); player.exitFullscreen();
} }
} }
function toggleMute() {
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode) return;
videoNode.muted = !videoNode.muted;
}
function togglePlay() {
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode) return;
videoNode.paused ? videoNode.play() : videoNode.pause();
}
function volumeUp() {
const player = playerRef.current;
if (!player) return;
player.volume(player.volume() + 0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true);
}
function volumeDown() {
const player = playerRef.current;
if (!player) return;
player.volume(player.volume() - 0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true);
} }
// Create the video DOM element and wrapper // Create the video DOM element and wrapper