From c1a78d878e219e911d38ca606b2a82286e2f7de1 Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Sun, 25 Sep 2022 02:44:16 +0200 Subject: [PATCH] Use native addEventListener instead of jquery's .on (#2612) --- src/renderer/App.js | 29 +-- .../ft-video-player/ft-video-player.js | 176 ++++++------------ 2 files changed, 75 insertions(+), 130 deletions(-) diff --git a/src/renderer/App.js b/src/renderer/App.js index 966a8895..29399cd1 100644 --- a/src/renderer/App.js +++ b/src/renderer/App.js @@ -9,7 +9,6 @@ import FtPrompt from './components/ft-prompt/ft-prompt.vue' import FtButton from './components/ft-button/ft-button.vue' import FtToast from './components/ft-toast/ft-toast.vue' import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue' -import $ from 'jquery' import { marked } from 'marked' import Parser from 'rss-parser' import { IpcChannels } from '../constants' @@ -288,31 +287,33 @@ export default Vue.extend({ }, activateKeyboardShortcuts: function () { - $(document).on('keydown', this.handleKeyboardShortcuts) - $(document).on('mousedown', () => { + document.addEventListener('keydown', this.handleKeyboardShortcuts) + document.addEventListener('mousedown', () => { this.hideOutlines = true }) }, handleKeyboardShortcuts: function (event) { if (event.altKey) { - switch (event.code) { + switch (event.key) { case 'ArrowRight': this.$refs.topNav.historyForward() break case 'ArrowLeft': this.$refs.topNav.historyBack() break - case 'KeyD': + case 'D': + case 'd': this.$refs.topNav.focusSearch() break } } - switch (event.code) { + switch (event.key) { case 'Tab': this.hideOutlines = false break - case 'KeyL': + case 'L': + case 'l': if ((process.platform !== 'darwin' && event.ctrlKey) || (process.platform === 'darwin' && event.metaKey)) { this.$refs.topNav.focusSearch() @@ -322,22 +323,26 @@ export default Vue.extend({ }, openAllLinksExternally: function () { - $(document).on('click', 'a[href^="http"]', (event) => { - this.handleLinkClick(event) + const isExternalLink = (event) => event.target.tagName === 'A' && event.target.href.startsWith('http') + + document.addEventListener('click', (event) => { + if (isExternalLink(event)) { + this.handleLinkClick(event) + } }) - $(document).on('auxclick', 'a[href^="http"]', (event) => { + document.addEventListener('auxclick', (event) => { // auxclick fires for all clicks not performed with the primary button // only handle the link click if it was the middle button, // otherwise the context menu breaks - if (event.button === 1) { + if (isExternalLink(event) && event.button === 1) { this.handleLinkClick(event) } }) }, handleLinkClick: function (event) { - const el = event.currentTarget + const el = event.target event.preventDefault() // Check if it's a YouTube link diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index 68d0f7ec..ea758def 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -21,6 +21,7 @@ export default Vue.extend({ 'ft-card': FtCard }, beforeRouteLeave: function () { + document.removeEventListener('keydown', this.keyboardShortcutHandler) if (this.player !== null) { this.exitFullWindow() } @@ -433,7 +434,8 @@ export default Vue.extend({ this.initializeSponsorBlock() } - $(document).on('keydown', this.keyboardShortcutHandler) + document.removeEventListener('keydown', this.keyboardShortcutHandler) + document.addEventListener('keydown', this.keyboardShortcutHandler) this.player.on('mousemove', this.hideMouseTimeout) this.player.on('mouseleave', this.removeMouseTimeout) @@ -1078,13 +1080,6 @@ export default Vue.extend({ } }, - changeDurationByPercentage: function (percentage) { - const duration = this.player.duration() - const newTime = duration * percentage - - this.player.currentTime(newTime) - }, - changePlayBackRate: function (rate) { const newPlaybackRate = (this.player.playbackRate() + rate).toFixed(2) @@ -1746,102 +1741,90 @@ export default Vue.extend({ // This function should always be at the bottom of this file keyboardShortcutHandler: function (event) { - const activeInputs = $('.ft-input') - - for (let i = 0; i < activeInputs.length; i++) { - if (activeInputs[i] === document.activeElement) { - return - } - } - - if (event.ctrlKey) { + if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) { return } if (this.player !== null) { - switch (event.which) { - case 32: - // Space Bar + switch (event.key) { + case ' ': + case 'Spacebar': // older browsers might return spacebar instead of a space character // Toggle Play/Pause event.preventDefault() this.togglePlayPause() break - case 74: - // J Key + case 'J': + case 'j': // Rewind by 2x the time-skip interval (in seconds) event.preventDefault() this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate() * 2) break - case 75: - // K Key + case 'K': + case 'k': // Toggle Play/Pause event.preventDefault() this.togglePlayPause() break - case 76: - // L Key + case 'L': + case 'l': // Fast-Forward by 2x the time-skip interval (in seconds) event.preventDefault() this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate() * 2) break - case 79: - // O Key + case 'O': + case 'o': // Decrease playback rate by 0.25x event.preventDefault() this.changePlayBackRate(-this.videoPlaybackRateInterval) break - case 80: - // P Key + case 'P': + case 'p': // Increase playback rate by 0.25x event.preventDefault() this.changePlayBackRate(this.videoPlaybackRateInterval) break - case 70: - // F Key + case 'F': + case 'f': // Toggle Fullscreen Playback event.preventDefault() this.toggleFullscreen() break - case 77: - // M Key + case 'M': + case 'm': // Toggle Mute if (!event.metaKey) { event.preventDefault() this.toggleMute() } break - case 67: - // C Key + case 'C': + case 'c': // Toggle Captions event.preventDefault() this.toggleCaptions() break - case 38: - // Up Arrow Key + case 'ArrowUp': // Increase volume event.preventDefault() this.changeVolume(0.05) break - case 40: - // Down Arrow Key + case 'ArrowDown': // Decrease Volume event.preventDefault() this.changeVolume(-0.05) break - case 37: - // Left Arrow Key + case 'ArrowLeft': // Rewind by the time-skip interval (in seconds) event.preventDefault() this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate()) break - case 39: - // Right Arrow Key + case 'ArrowRight': // Fast-Forward by the time-skip interval (in seconds) event.preventDefault() this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate()) break - case 73: - // I Key + case 'I': + case 'i': event.preventDefault() // Toggle Picture in Picture Mode if (this.format !== 'audio' && !this.player.isInPictureInPicture()) { @@ -1850,99 +1833,56 @@ export default Vue.extend({ this.player.exitPictureInPicture() } break - case 49: - // 1 Key - // Jump to 10% in the video + case '0': + case '1': + case '2': + case '3': + case '4': + case '5': + case '6': + case '7': + case '8': + case '9': { + // Jump to percentage in the video event.preventDefault() - this.changeDurationByPercentage(0.1) + + const percentage = parseInt(event.key) / 10 + const duration = this.player.duration() + const newTime = duration * percentage + + this.player.currentTime(newTime) break - case 50: - // 2 Key - // Jump to 20% in the video - event.preventDefault() - this.changeDurationByPercentage(0.2) - break - case 51: - // 3 Key - // Jump to 30% in the video - event.preventDefault() - this.changeDurationByPercentage(0.3) - break - case 52: - // 4 Key - // Jump to 40% in the video - event.preventDefault() - this.changeDurationByPercentage(0.4) - break - case 53: - // 5 Key - // Jump to 50% in the video - event.preventDefault() - this.changeDurationByPercentage(0.5) - break - case 54: - // 6 Key - // Jump to 60% in the video - event.preventDefault() - this.changeDurationByPercentage(0.6) - break - case 55: - // 7 Key - // Jump to 70% in the video - event.preventDefault() - this.changeDurationByPercentage(0.7) - break - case 56: - // 8 Key - // Jump to 80% in the video - event.preventDefault() - this.changeDurationByPercentage(0.8) - break - case 57: - // 9 Key - // Jump to 90% in the video - event.preventDefault() - this.changeDurationByPercentage(0.9) - break - case 48: - // 0 Key - // Jump to 0% in the video (The beginning) - event.preventDefault() - this.changeDurationByPercentage(0) - break - case 188: - // , Key + } + case ',': // Return to previous frame this.framebyframe(-1) break - case 190: - // . Key + case '.': // Advance to next frame this.framebyframe(1) break - case 68: - // D Key + case 'D': + case 'd': event.preventDefault() this.toggleShowStatsModal() break - case 27: - // esc Key + case 'Escape': // Exit full window event.preventDefault() this.exitFullWindow() break - case 83: - // S Key + case 'S': + case 's': // Toggle Full Window Mode this.toggleFullWindow() break - case 84: - // T Key + case 'T': + case 't': // Toggle Theatre Mode this.toggleTheatreMode() break - case 85: - // U Key + case 'U': + case 'u': // Take screenshot this.takeScreenshot() break