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

167
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,90 +350,111 @@ 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;
handleSingleKeyActions(e);
handleShiftKeyActions(e);
}
if (!videoNode || !player || isUserTyping()) { function handleShiftKeyActions(e: KeyboardEvent) {
return; if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return;
} if (e.keyCode === PERIOD_KEYCODE) changePlaybackSpeed(true);
if (e.keyCode === COMMA_KEYCODE) changePlaybackSpeed(false);
}
if (e.keyCode === SPACE_BAR_KEYCODE || e.keyCode === SMALL_K_KEYCODE) { function handleSingleKeyActions(e: KeyboardEvent) {
videoNode.paused ? videoNode.play() : videoNode.pause(); if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
} if (e.keyCode === SPACE_BAR_KEYCODE || e.keyCode === SMALL_K_KEYCODE) togglePlay();
if (e.keyCode === FULLSCREEN_KEYCODE) toggleFullscreen();
if (e.keyCode === MUTE_KEYCODE) toggleMute();
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);
}
// Fullscreen toggle shortcuts function seekVideo(stepSize: number) {
if (e.keyCode === FULLSCREEN_KEYCODE || e.keyCode === F11_KEYCODE) { const player = playerRef.current;
if (!player.isFullscreen()) { const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
player.requestFullscreen(); if (!videoNode || !player) return;
} else { const duration = videoNode.duration;
player.exitFullscreen(); const currentTime = videoNode.currentTime;
} const newDuration = currentTime + stepSize;
if (newDuration < 0) {
videoNode.currentTime = 0;
} else if (newDuration > duration) {
videoNode.currentTime = duration;
} else {
videoNode.currentTime = newDuration;
} }
OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0);
player.userActive(true);
}
// Mute/Unmute Shortcuts function changePlaybackSpeed(shouldSpeedUp: boolean) {
if (e.keyCode === MUTE_KEYCODE) { const player = playerRef.current;
videoNode.muted = !videoNode.muted; if (!player) return;
} const isSpeedUp = shouldSpeedUp;
if (e.keyCode === VOLUME_DOWN_KEYCODE) { const rate = player.playbackRate();
player.volume(player.volume() - 0.05); let rateIndex = videoPlaybackRates.findIndex((x) => x === rate);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100)); if (rateIndex >= 0) {
player.userActive(true); rateIndex = isSpeedUp ? Math.min(rateIndex + 1, videoPlaybackRates.length - 1) : Math.max(rateIndex - 1, 0);
} const nextRate = videoPlaybackRates[rateIndex];
if (e.keyCode === VOLUME_UP_KEYCODE) {
player.volume(player.volume() + 0.05); OVERLAY.showPlaybackRateOverlay(player, nextRate, isSpeedUp);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true); player.userActive(true);
player.playbackRate(nextRate);
} }
}
// Seeking Shortcuts function toggleFullscreen() {
if (!e.altKey) { const player = playerRef.current;
const duration = videoNode.duration; if (!player) return;
const currentTime = videoNode.currentTime; if (!player.isFullscreen()) {
if (e.keyCode === SEEK_FORWARD_KEYCODE) { player.requestFullscreen();
const newDuration = currentTime + SEEK_STEP; } else {
videoNode.currentTime = newDuration > duration ? duration : newDuration; player.exitFullscreen();
OVERLAY.showSeekedOverlay(player, SEEK_STEP, true);
player.userActive(true);
} else if (e.keyCode === SEEK_BACKWARD_KEYCODE) {
const newDuration = currentTime - SEEK_STEP;
videoNode.currentTime = newDuration < 0 ? 0 : newDuration;
OVERLAY.showSeekedOverlay(player, SEEK_STEP, false);
player.userActive(true);
}
if (e.keyCode === SEEK_FORWARD_KEYCODE_5) {
const newDuration = currentTime + SEEK_STEP_5;
videoNode.currentTime = newDuration < 0 ? 0 : newDuration;
OVERLAY.showSeekedOverlay(player, SEEK_STEP_5, 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 toggleTheaterMode() {
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 rate = player.playbackRate(); toggleVideoTheaterMode();
let rateIndex = videoPlaybackRates.findIndex((x) => x === rate); if (player.isFullscreen()) {
if (rateIndex >= 0) { player.exitFullscreen();
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);
}
} }
}
// Theater Mode shortcut function toggleMute() {
if (e.keyCode === THEATER_MODE_KEYCODE) { const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
toggleVideoTheaterMode(); if (!videoNode) return;
if (player.isFullscreen()) { videoNode.muted = !videoNode.muted;
player.exitFullscreen(); }
}
} 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