mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #6070 from dmitrylyzo/fix-hotkeys

Browse source 
Make hotkeys strict and prevent default actions for handled ones
This commit is contained in:
Bill Thornton 2024-09-20 14:47:33 -04:00 • committed by GitHub
commit 37c8370d57
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 108 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/controllers/playback/video/index.js
View file

@ -1195,9 +1195,13 @@ export default function (view) {
function onKeyDown(e) {
clickedElement = e.target;
const key = keyboardnavigation.getKeyName(e);
const isKeyModified = e.ctrlKey || e.altKey || e.metaKey;
// Skip modified keys
if (isKeyModified) return;
const key = keyboardnavigation.getKeyName(e);
const btnPlayPause = osdBottomElement.querySelector('.btnPause');
if (e.keyCode === 32) {
@ -1219,8 +1223,10 @@ export default function (view) {
switch (key) {
case 'ArrowLeft':
case 'ArrowRight':
if (!e.shiftKey) {
showOsd(nowPlayingPositionSlider);
nowPlayingPositionSlider.dispatchEvent(new KeyboardEvent(e.type, e));
}
return;
case 'Enter':
playbackManager.playPause(currentPlayer);
@ -1230,7 +1236,7 @@ export default function (view) {
}
if (layoutManager.tv && keyboardnavigation.isNavigationKey(key)) {
showOsd();
if (!e.shiftKey) showOsd();
return;
}
@ -1248,50 +1254,71 @@ export default function (view) {
break;
case 'k':
case 'K':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.playPause(currentPlayer);
showOsd(btnPlayPause);
}
break;
case 'ArrowUp':
case 'Up':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.volumeUp(currentPlayer);
}
break;
case 'ArrowDown':
case 'Down':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.volumeDown(currentPlayer);
}
break;
case 'l':
case 'L':
case 'ArrowRight':
case 'Right':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.fastForward(currentPlayer);
showOsd(btnFastForward);
}
break;
case 'j':
case 'J':
case 'ArrowLeft':
case 'Left':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.rewind(currentPlayer);
showOsd(btnRewind);
}
break;
case 'f':
case 'F':
if (!e.ctrlKey && !e.metaKey) {
if (!e.shiftKey) {
e.preventDefault();
playbackManager.toggleFullscreen(currentPlayer);
}
break;
case 'm':
case 'M':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.toggleMute(currentPlayer);
}
break;
case 'p':
case 'P':
if (e.shiftKey) {
e.preventDefault();
playbackManager.previousTrack(currentPlayer);
}
break;
case 'n':
case 'N':
if (e.shiftKey) {
e.preventDefault();
playbackManager.nextTrack(currentPlayer);
}
break;
@ -1314,10 +1341,16 @@ export default function (view) {
}
break;
case 'Home':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.seekPercent(0, currentPlayer);
}
break;
case 'End':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.seekPercent(100, currentPlayer);
}
break;
case '0':
case '1':
@ -1328,32 +1361,45 @@ export default function (view) {
case '6':
case '7':
case '8':
case '9': {
if (!isKeyModified) {
case '9': { // no Shift
e.preventDefault();
const percent = parseInt(key, 10) * 10;
playbackManager.seekPercent(percent, currentPlayer);
}
break;
}
case '>':
case '>': // Shift+.
e.preventDefault();
playbackManager.increasePlaybackRate(currentPlayer);
break;
case '<':
case '<': // Shift+,
e.preventDefault();
playbackManager.decreasePlaybackRate(currentPlayer);
break;
case 'PageUp':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.nextChapter(currentPlayer);
}
break;
case 'PageDown':
if (!e.shiftKey) {
e.preventDefault();
playbackManager.previousChapter(currentPlayer);
}
break;
case 'g':
case 'G':
if (!e.shiftKey) {
e.preventDefault();
subtitleSyncOverlay?.decrementOffset();
}
break;
case 'h':
case 'H':
if (!e.shiftKey) {
e.preventDefault();
subtitleSyncOverlay?.incrementOffset();
}
break;
}
}

18
src/plugins/bookPlayer/plugin.js
View file

@ -45,7 +45,7 @@ export class BookPlayer {
this.decreaseFontSize = this.decreaseFontSize.bind(this);
this.previous = this.previous.bind(this);
this.next = this.next.bind(this);
this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
this.onWindowKeyDown = this.onWindowKeyDown.bind(this);
this.addSwipeGestures = this.addSwipeGestures.bind(this);
}
@ -130,7 +130,10 @@ export class BookPlayer {
return true;
}
onWindowKeyUp(e) {
onWindowKeyDown(e) {
// Skip modified keys
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
const key = keyboardnavigation.getKeyName(e);
if (!this.loaded) return;
@ -138,14 +141,17 @@ export class BookPlayer {
case 'l':
case 'ArrowRight':
case 'Right':
e.preventDefault();
this.next();
break;
case 'j':
case 'ArrowLeft':
case 'Left':
e.preventDefault();
this.previous();
break;
case 'Escape':
e.preventDefault();
if (this.tocElement) {
// Close table of contents on ESC if it is open
this.tocElement.destroy();
@ -184,8 +190,8 @@ export class BookPlayer {
bindEvents() {
this.bindMediaElementEvents();
document.addEventListener('keyup', this.onWindowKeyUp);
this.rendition?.on('keyup', this.onWindowKeyUp);
document.addEventListener('keydown', this.onWindowKeyDown);
this.rendition?.on('keydown', this.onWindowKeyDown);
if (browser.safari) {
const player = document.getElementById('bookPlayerContainer');
@ -214,8 +220,8 @@ export class BookPlayer {
this.unbindMediaElementEvents();
}
document.removeEventListener('keyup', this.onWindowKeyUp);
this.rendition?.off('keyup', this.onWindowKeyUp);
document.removeEventListener('keydown', this.onWindowKeyDown);
this.rendition?.off('keydown', this.onWindowKeyDown);
if (!browser.safari) {
this.rendition?.off('rendered', (e, i) => this.addSwipeGestures(i.document.documentElement));

12
src/plugins/comicsPlayer/plugin.js
View file

@ -23,7 +23,7 @@ export class ComicsPlayer {
this.imageMap = new Map();
this.onDialogClosed = this.onDialogClosed.bind(this);
this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
this.onWindowKeyDown = this.onWindowKeyDown.bind(this);
}
play(options) {
@ -177,9 +177,13 @@ export class ComicsPlayer {
this.swiperInstance.update();
}
onWindowKeyUp(e) {
onWindowKeyDown(e) {
// Skip modified keys
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
const key = keyboardnavigation.getKeyName(e);
if (key === 'Escape') {
e.preventDefault();
this.stop();
}
}
@ -196,7 +200,7 @@ export class ComicsPlayer {
bindEvents() {
this.bindMediaElementEvents();
document.addEventListener('keyup', this.onWindowKeyUp);
document.addEventListener('keydown', this.onWindowKeyDown);
}
unbindMediaElementEvents() {
@ -211,7 +215,7 @@ export class ComicsPlayer {
unbindEvents() {
this.unbindMediaElementEvents();
document.removeEventListener('keyup', this.onWindowKeyUp);
document.removeEventListener('keydown', this.onWindowKeyDown);
}
createMediaElement() {

17
src/plugins/pdfPlayer/plugin.js
View file

@ -18,7 +18,7 @@ export class PdfPlayer {
this.priority = 1;
this.onDialogClosed = this.onDialogClosed.bind(this);
this.onWindowKeyUp = this.onWindowKeyUp.bind(this);
this.onWindowKeyDown = this.onWindowKeyDown.bind(this);
this.onTouchStart = this.onTouchStart.bind(this);
}
@ -88,22 +88,29 @@ export class PdfPlayer {
return true;
}
onWindowKeyUp(e) {
onWindowKeyDown(e) {
if (!this.loaded) return;
// Skip modified keys
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
const key = keyboardnavigation.getKeyName(e);
if (!this.loaded) return;
switch (key) {
case 'l':
case 'ArrowRight':
case 'Right':
e.preventDefault();
this.next();
break;
case 'j':
case 'ArrowLeft':
case 'Left':
e.preventDefault();
this.previous();
break;
case 'Escape':
e.preventDefault();
this.stop();
break;
}
@ -132,7 +139,7 @@ export class PdfPlayer {
bindEvents() {
this.bindMediaElementEvents();
document.addEventListener('keyup', this.onWindowKeyUp);
document.addEventListener('keydown', this.onWindowKeyDown);
document.addEventListener('touchstart', this.onTouchStart);
}
@ -148,7 +155,7 @@ export class PdfPlayer {
this.unbindMediaElementEvents();
}
document.removeEventListener('keyup', this.onWindowKeyUp);
document.removeEventListener('keydown', this.onWindowKeyDown);
document.removeEventListener('touchstart', this.onTouchStart);
}

3
src/scripts/keyboardNavigation.js
View file

@ -125,6 +125,9 @@ export function isInteractiveElement(element) {
export function enable() {
const hasMediaSession = 'mediaSession' in navigator;
window.addEventListener('keydown', function (e) {
// Skip modified keys
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
const key = getKeyName(e);
// Ignore navigation keys for non-TV