diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 2e277de642..b6439216ce 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -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': - showOsd(nowPlayingPositionSlider); - nowPlayingPositionSlider.dispatchEvent(new KeyboardEvent(e.type, e)); + 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': - playbackManager.playPause(currentPlayer); - showOsd(btnPlayPause); + if (!e.shiftKey) { + e.preventDefault(); + playbackManager.playPause(currentPlayer); + showOsd(btnPlayPause); + } break; case 'ArrowUp': case 'Up': - playbackManager.volumeUp(currentPlayer); + if (!e.shiftKey) { + e.preventDefault(); + playbackManager.volumeUp(currentPlayer); + } break; case 'ArrowDown': case 'Down': - playbackManager.volumeDown(currentPlayer); + if (!e.shiftKey) { + e.preventDefault(); + playbackManager.volumeDown(currentPlayer); + } break; case 'l': case 'L': case 'ArrowRight': case 'Right': - playbackManager.fastForward(currentPlayer); - showOsd(btnFastForward); + if (!e.shiftKey) { + e.preventDefault(); + playbackManager.fastForward(currentPlayer); + showOsd(btnFastForward); + } break; case 'j': case 'J': case 'ArrowLeft': case 'Left': - playbackManager.rewind(currentPlayer); - showOsd(btnRewind); + 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': - playbackManager.toggleMute(currentPlayer); + 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': - playbackManager.seekPercent(0, currentPlayer); + if (!e.shiftKey) { + e.preventDefault(); + playbackManager.seekPercent(0, currentPlayer); + } break; case 'End': - playbackManager.seekPercent(100, currentPlayer); + 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) { - const percent = parseInt(key, 10) * 10; - playbackManager.seekPercent(percent, currentPlayer); - } + 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': - playbackManager.nextChapter(currentPlayer); + if (!e.shiftKey) { + e.preventDefault(); + playbackManager.nextChapter(currentPlayer); + } break; case 'PageDown': - playbackManager.previousChapter(currentPlayer); + if (!e.shiftKey) { + e.preventDefault(); + playbackManager.previousChapter(currentPlayer); + } break; case 'g': case 'G': - subtitleSyncOverlay?.decrementOffset(); + if (!e.shiftKey) { + e.preventDefault(); + subtitleSyncOverlay?.decrementOffset(); + } break; case 'h': case 'H': - subtitleSyncOverlay?.incrementOffset(); + if (!e.shiftKey) { + e.preventDefault(); + subtitleSyncOverlay?.incrementOffset(); + } break; } } diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index f43613be5c..733519cb38 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -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)); diff --git a/src/plugins/comicsPlayer/plugin.js b/src/plugins/comicsPlayer/plugin.js index 405bdcd941..0e8f599a1b 100644 --- a/src/plugins/comicsPlayer/plugin.js +++ b/src/plugins/comicsPlayer/plugin.js @@ -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() { diff --git a/src/plugins/pdfPlayer/plugin.js b/src/plugins/pdfPlayer/plugin.js index 0a7d203415..7b7e3fa4b8 100644 --- a/src/plugins/pdfPlayer/plugin.js +++ b/src/plugins/pdfPlayer/plugin.js @@ -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); } diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js index ed13e90415..8b1778ebf4 100644 --- a/src/scripts/keyboardNavigation.js +++ b/src/scripts/keyboardNavigation.js @@ -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