tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use native addEventListener instead of jquery's .on (#2612)

This commit is contained in:
absidue 2022-09-25 02:44:16 +02:00 committed by GitHub
parent facbbf6acf
commit c1a78d878e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 75 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/renderer/App.js
View File

@ -9,7 +9,6 @@ import FtPrompt from './components/ft-prompt/ft-prompt.vue'
import FtButton from './components/ft-button/ft-button.vue' import FtButton from './components/ft-button/ft-button.vue'
import FtToast from './components/ft-toast/ft-toast.vue' import FtToast from './components/ft-toast/ft-toast.vue'
import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue' import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
import $ from 'jquery'
import { marked } from 'marked' import { marked } from 'marked'
import Parser from 'rss-parser' import Parser from 'rss-parser'
import { IpcChannels } from '../constants' import { IpcChannels } from '../constants'
@ -288,31 +287,33 @@ export default Vue.extend({
}, },
activateKeyboardShortcuts: function () { activateKeyboardShortcuts: function () {
$(document).on('keydown', this.handleKeyboardShortcuts) document.addEventListener('keydown', this.handleKeyboardShortcuts)
$(document).on('mousedown', () => { document.addEventListener('mousedown', () => {
this.hideOutlines = true this.hideOutlines = true
}) })
}, },
handleKeyboardShortcuts: function (event) { handleKeyboardShortcuts: function (event) {
if (event.altKey) { if (event.altKey) {
switch (event.code) { switch (event.key) {
case 'ArrowRight': case 'ArrowRight':
this.$refs.topNav.historyForward() this.$refs.topNav.historyForward()
break break
case 'ArrowLeft': case 'ArrowLeft':
this.$refs.topNav.historyBack() this.$refs.topNav.historyBack()
break break
case 'KeyD': case 'D':
case 'd':
this.$refs.topNav.focusSearch() this.$refs.topNav.focusSearch()
break break
} }
} }
switch (event.code) { switch (event.key) {
case 'Tab': case 'Tab':
this.hideOutlines = false this.hideOutlines = false
break break
case 'KeyL': case 'L':
case 'l':
if ((process.platform !== 'darwin' && event.ctrlKey) || if ((process.platform !== 'darwin' && event.ctrlKey) ||
(process.platform === 'darwin' && event.metaKey)) { (process.platform === 'darwin' && event.metaKey)) {
this.$refs.topNav.focusSearch() this.$refs.topNav.focusSearch()
@ -322,22 +323,26 @@ export default Vue.extend({
}, },
openAllLinksExternally: function () { openAllLinksExternally: function () {
$(document).on('click', 'a[href^="http"]', (event) => { const isExternalLink = (event) => event.target.tagName === 'A' && event.target.href.startsWith('http')
document.addEventListener('click', (event) => {
if (isExternalLink(event)) {
this.handleLinkClick(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 // auxclick fires for all clicks not performed with the primary button
// only handle the link click if it was the middle button, // only handle the link click if it was the middle button,
// otherwise the context menu breaks // otherwise the context menu breaks
if (event.button === 1) { if (isExternalLink(event) && event.button === 1) {
this.handleLinkClick(event) this.handleLinkClick(event)
} }
}) })
}, },
handleLinkClick: function (event) { handleLinkClick: function (event) {
const el = event.currentTarget const el = event.target
event.preventDefault() event.preventDefault()
// Check if it's a YouTube link // Check if it's a YouTube link

176
src/renderer/components/ft-video-player/ft-video-player.js
View File

@ -21,6 +21,7 @@ export default Vue.extend({
'ft-card': FtCard 'ft-card': FtCard
}, },
beforeRouteLeave: function () { beforeRouteLeave: function () {
document.removeEventListener('keydown', this.keyboardShortcutHandler)
if (this.player !== null) { if (this.player !== null) {
this.exitFullWindow() this.exitFullWindow()
} }
@ -433,7 +434,8 @@ export default Vue.extend({
this.initializeSponsorBlock() 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('mousemove', this.hideMouseTimeout)
this.player.on('mouseleave', this.removeMouseTimeout) 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) { changePlayBackRate: function (rate) {
const newPlaybackRate = (this.player.playbackRate() + rate).toFixed(2) 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 // This function should always be at the bottom of this file
keyboardShortcutHandler: function (event) { keyboardShortcutHandler: function (event) {
const activeInputs = $('.ft-input') if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) {
for (let i = 0; i < activeInputs.length; i++) {
if (activeInputs[i] === document.activeElement) {
return
}
}
if (event.ctrlKey) {
return return
} }
if (this.player !== null) { if (this.player !== null) {
switch (event.which) { switch (event.key) {
case 32: case ' ':
// Space Bar case 'Spacebar': // older browsers might return spacebar instead of a space character
// Toggle Play/Pause // Toggle Play/Pause
event.preventDefault() event.preventDefault()
this.togglePlayPause() this.togglePlayPause()
break break
case 74: case 'J':
// J Key case 'j':
// Rewind by 2x the time-skip interval (in seconds) // Rewind by 2x the time-skip interval (in seconds)
event.preventDefault() event.preventDefault()
this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate() * 2) this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate() * 2)
break break
case 75: case 'K':
// K Key case 'k':
// Toggle Play/Pause // Toggle Play/Pause
event.preventDefault() event.preventDefault()
this.togglePlayPause() this.togglePlayPause()
break break
case 76: case 'L':
// L Key case 'l':
// Fast-Forward by 2x the time-skip interval (in seconds) // Fast-Forward by 2x the time-skip interval (in seconds)
event.preventDefault() event.preventDefault()
this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate() * 2) this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate() * 2)
break break
case 79: case 'O':
// O Key case 'o':
// Decrease playback rate by 0.25x // Decrease playback rate by 0.25x
event.preventDefault() event.preventDefault()
this.changePlayBackRate(-this.videoPlaybackRateInterval) this.changePlayBackRate(-this.videoPlaybackRateInterval)
break break
case 80: case 'P':
// P Key case 'p':
// Increase playback rate by 0.25x // Increase playback rate by 0.25x
event.preventDefault() event.preventDefault()
this.changePlayBackRate(this.videoPlaybackRateInterval) this.changePlayBackRate(this.videoPlaybackRateInterval)
break break
case 70: case 'F':
// F Key case 'f':
// Toggle Fullscreen Playback // Toggle Fullscreen Playback
event.preventDefault() event.preventDefault()
this.toggleFullscreen() this.toggleFullscreen()
break break
case 77: case 'M':
// M Key case 'm':
// Toggle Mute // Toggle Mute
if (!event.metaKey) { if (!event.metaKey) {
event.preventDefault() event.preventDefault()
this.toggleMute() this.toggleMute()
} }
break break
case 67: case 'C':
// C Key case 'c':
// Toggle Captions // Toggle Captions
event.preventDefault() event.preventDefault()
this.toggleCaptions() this.toggleCaptions()
break break
case 38: case 'ArrowUp':
// Up Arrow Key
// Increase volume // Increase volume
event.preventDefault() event.preventDefault()
this.changeVolume(0.05) this.changeVolume(0.05)
break break
case 40: case 'ArrowDown':
// Down Arrow Key
// Decrease Volume // Decrease Volume
event.preventDefault() event.preventDefault()
this.changeVolume(-0.05) this.changeVolume(-0.05)
break break
case 37: case 'ArrowLeft':
// Left Arrow Key
// Rewind by the time-skip interval (in seconds) // Rewind by the time-skip interval (in seconds)
event.preventDefault() event.preventDefault()
this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate()) this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate())
break break
case 39: case 'ArrowRight':
// Right Arrow Key
// Fast-Forward by the time-skip interval (in seconds) // Fast-Forward by the time-skip interval (in seconds)
event.preventDefault() event.preventDefault()
this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate()) this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate())
break break
case 73: case 'I':
// I Key case 'i':
event.preventDefault() event.preventDefault()
// Toggle Picture in Picture Mode // Toggle Picture in Picture Mode
if (this.format !== 'audio' && !this.player.isInPictureInPicture()) { if (this.format !== 'audio' && !this.player.isInPictureInPicture()) {
@ -1850,99 +1833,56 @@ export default Vue.extend({
this.player.exitPictureInPicture() this.player.exitPictureInPicture()
} }
break break
case 49: case '0':
// 1 Key case '1':
// Jump to 10% in the video case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9': {
// Jump to percentage in the video
event.preventDefault() 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 break
case 50: }
// 2 Key case ',':
// 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
// Return to previous frame // Return to previous frame
this.framebyframe(-1) this.framebyframe(-1)
break break
case 190: case '.':
// . Key
// Advance to next frame // Advance to next frame
this.framebyframe(1) this.framebyframe(1)
break break
case 68: case 'D':
// D Key case 'd':
event.preventDefault() event.preventDefault()
this.toggleShowStatsModal() this.toggleShowStatsModal()
break break
case 27: case 'Escape':
// esc Key
// Exit full window // Exit full window
event.preventDefault() event.preventDefault()
this.exitFullWindow() this.exitFullWindow()
break break
case 83: case 'S':
// S Key case 's':
// Toggle Full Window Mode // Toggle Full Window Mode
this.toggleFullWindow() this.toggleFullWindow()
break break
case 84: case 'T':
// T Key case 't':
// Toggle Theatre Mode // Toggle Theatre Mode
this.toggleTheatreMode() this.toggleTheatreMode()
break break
case 85: case 'U':
// U Key case 'u':
// Take screenshot // Take screenshot
this.takeScreenshot() this.takeScreenshot()
break break