mirror of https://github.com/FreeTubeApp/FreeTube
Use native addEventListener instead of jquery's .on (#2612)
This commit is contained in:
absidue
GitHub
parent
facbbf6acf
commit
c1a78d878e
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue