mirror of https://github.com/FreeTubeApp/FreeTube
2310 lines
78 KiB
JavaScript
2310 lines
78 KiB
JavaScript
import { defineComponent } from 'vue'
|
|
import { mapActions } from 'vuex'
|
|
|
|
import videojs from 'video.js'
|
|
import qualitySelector from '@silvermine/videojs-quality-selector'
|
|
import fs from 'fs/promises'
|
|
import path from 'path'
|
|
import 'videojs-overlay/dist/videojs-overlay'
|
|
import 'videojs-overlay/dist/videojs-overlay.css'
|
|
import 'videojs-vtt-thumbnails-freetube'
|
|
import 'videojs-contrib-quality-levels'
|
|
import 'videojs-http-source-selector'
|
|
import 'videojs-mobile-ui'
|
|
import 'videojs-mobile-ui/dist/videojs-mobile-ui.css'
|
|
import { IpcChannels } from '../../../constants'
|
|
import { sponsorBlockSkipSegments } from '../../helpers/sponsorblock'
|
|
import { calculateColorLuminance, colors } from '../../helpers/colors'
|
|
import { pathExists } from '../../helpers/filesystem'
|
|
import {
|
|
copyToClipboard,
|
|
getPicturesPath,
|
|
showSaveDialog,
|
|
showToast,
|
|
} from '../../helpers/utils'
|
|
import { getProxyUrl } from '../../helpers/api/invidious'
|
|
import store from '../../store'
|
|
|
|
const EXPECTED_PLAY_RELATED_ERROR_MESSAGES = [
|
|
// This is thrown when `play()` called but user already viewing another page
|
|
'The play() request was interrupted by a new load request.',
|
|
// This is thrown when `pause()` called before video started playing on load
|
|
'The play() request was interrupted by a call to pause()',
|
|
]
|
|
|
|
// YouTube now throttles if you use the `Range` header for the DASH formats, instead of the range query parameter
|
|
// videojs-http-streaming calls this hook everytime it makes a request,
|
|
// so we can use it to convert the Range header into the range query parameter for the streaming URLs
|
|
videojs.Vhs.xhr.beforeRequest = (options) => {
|
|
if (store.getters.getProxyVideos && !options.uri.startsWith('data:application/dash+xml')) {
|
|
const { uri } = options
|
|
options.uri = getProxyUrl(uri)
|
|
}
|
|
// pass in the optional base so it doesn't error for `dashFiles/videoId.xml` (DASH manifest in dev mode)
|
|
if (new URL(options.uri, window.location.origin).hostname.endsWith('.googlevideo.com')) {
|
|
// The official clients use POST requests with this body for the DASH requests, so we should do that too
|
|
options.method = 'POST'
|
|
options.body = 'x\x00' // protobuf: { 15: 0 } (no idea what it means but this is what YouTube uses)
|
|
|
|
if (options.headers?.Range) {
|
|
options.uri += `&range=${options.headers.Range.split('=')[1]}`
|
|
delete options.headers.Range
|
|
}
|
|
}
|
|
}
|
|
// videojs-http-streaming spits out a warning every time you access videojs.Vhs.BANDWIDTH_VARIANCE
|
|
// so we'll get the value once here, to stop it spamming the console
|
|
// https://github.com/videojs/http-streaming/blob/main/src/config.js#L8-L10
|
|
const VHS_BANDWIDTH_VARIANCE = videojs.Vhs.BANDWIDTH_VARIANCE
|
|
|
|
export default defineComponent({
|
|
name: 'FtVideoPlayer',
|
|
props: {
|
|
format: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
sourceList: {
|
|
type: Array,
|
|
default: () => { return [] }
|
|
},
|
|
adaptiveFormats: {
|
|
type: Array,
|
|
default: () => { return [] }
|
|
},
|
|
dashSrc: {
|
|
type: Array,
|
|
default: null
|
|
},
|
|
captionHybridList: {
|
|
type: Array,
|
|
default: () => { return [] }
|
|
},
|
|
storyboardSrc: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
thumbnail: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
videoId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
lengthSeconds: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
chapters: {
|
|
type: Array,
|
|
default: () => { return [] }
|
|
},
|
|
currentChapterIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
audioTracks: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
theatrePossible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
useTheatreMode: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
powerSaveBlocker: null,
|
|
volume: 1,
|
|
muted: false,
|
|
/** @type {(import('video.js').VideoJsPlayer|null)} */
|
|
player: null,
|
|
useDash: false,
|
|
useHls: false,
|
|
selectedDefaultQuality: '',
|
|
selectedQuality: '',
|
|
selectedResolution: '',
|
|
selectedBitrate: '',
|
|
selectedMimeType: '',
|
|
selectedFPS: 0,
|
|
currentAdaptiveFormat: null,
|
|
autoQuality: '',
|
|
autoResolution: '',
|
|
autoBitrate: '',
|
|
autoMimeType: '',
|
|
autoFPS: 0,
|
|
using60Fps: false,
|
|
activeSourceList: [],
|
|
activeAdaptiveFormats: [],
|
|
playerStats: null,
|
|
statsModal: null,
|
|
showStatsModal: false,
|
|
statsModalEventName: 'updateStats',
|
|
usingTouch: false,
|
|
// whether or not sponsor segments should be skipped
|
|
skipSponsors: true,
|
|
// countdown before actually skipping sponsor segments
|
|
skipCountdown: 1,
|
|
dataSetup: {
|
|
fluid: true,
|
|
nativeTextTracks: false,
|
|
plugins: {},
|
|
controlBar: {
|
|
children: [
|
|
'playToggle',
|
|
'volumePanel',
|
|
'currentTimeDisplay',
|
|
'timeDivider',
|
|
'durationDisplay',
|
|
'progressControl',
|
|
'liveDisplay',
|
|
'seekToLive',
|
|
'remainingTimeDisplay',
|
|
'customControlSpacer',
|
|
'screenshotButton',
|
|
'playbackRateMenuButton',
|
|
'loopButton',
|
|
'audioTrackButton',
|
|
'chaptersButton',
|
|
'descriptionsButton',
|
|
'subsCapsButton',
|
|
'pictureInPictureToggle',
|
|
'toggleTheatreModeButton',
|
|
'fullWindowButton',
|
|
'qualitySelector',
|
|
'fullscreenToggle'
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
currentLocale: function () {
|
|
return this.$i18n.locale.replace('_', '-')
|
|
},
|
|
|
|
defaultPlayback: function () {
|
|
return this.$store.getters.getDefaultPlayback
|
|
},
|
|
|
|
defaultSkipInterval: function () {
|
|
return this.$store.getters.getDefaultSkipInterval
|
|
},
|
|
|
|
defaultQuality: function () {
|
|
const valueFromStore = this.$store.getters.getDefaultQuality
|
|
if (valueFromStore === 'auto') { return valueFromStore }
|
|
|
|
return parseInt(valueFromStore)
|
|
},
|
|
|
|
defaultCaptionSettings: function () {
|
|
try {
|
|
return JSON.parse(this.$store.getters.getDefaultCaptionSettings)
|
|
} catch (e) {
|
|
console.error(e)
|
|
return {}
|
|
}
|
|
},
|
|
|
|
autoplayVideos: function () {
|
|
return this.$store.getters.getAutoplayVideos
|
|
},
|
|
|
|
videoVolumeMouseScroll: function () {
|
|
return this.$store.getters.getVideoVolumeMouseScroll
|
|
},
|
|
|
|
videoPlaybackRateMouseScroll: function () {
|
|
return this.$store.getters.getVideoPlaybackRateMouseScroll
|
|
},
|
|
|
|
videoSkipMouseScroll: function () {
|
|
return this.$store.getters.getVideoSkipMouseScroll
|
|
},
|
|
|
|
useSponsorBlock: function () {
|
|
return this.$store.getters.getUseSponsorBlock
|
|
},
|
|
|
|
sponsorBlockShowSkippedToast: function () {
|
|
return this.$store.getters.getSponsorBlockShowSkippedToast
|
|
},
|
|
|
|
displayVideoPlayButton: function () {
|
|
return this.$store.getters.getDisplayVideoPlayButton
|
|
},
|
|
|
|
enterFullscreenOnDisplayRotate: function () {
|
|
return this.$store.getters.getEnterFullscreenOnDisplayRotate
|
|
},
|
|
|
|
sponsorSkips: function () {
|
|
const sponsorCats = ['sponsor',
|
|
'selfpromo',
|
|
'interaction',
|
|
'intro',
|
|
'outro',
|
|
'preview',
|
|
'music_offtopic',
|
|
'filler'
|
|
]
|
|
const autoSkip = {}
|
|
const seekBar = []
|
|
const promptSkip = {}
|
|
const categoryData = {}
|
|
sponsorCats.forEach(x => {
|
|
let sponsorVal = {}
|
|
switch (x) {
|
|
case 'sponsor':
|
|
sponsorVal = this.$store.getters.getSponsorBlockSponsor
|
|
break
|
|
case 'selfpromo':
|
|
sponsorVal = this.$store.getters.getSponsorBlockSelfPromo
|
|
break
|
|
case 'interaction':
|
|
sponsorVal = this.$store.getters.getSponsorBlockInteraction
|
|
break
|
|
case 'intro':
|
|
sponsorVal = this.$store.getters.getSponsorBlockIntro
|
|
break
|
|
case 'outro':
|
|
sponsorVal = this.$store.getters.getSponsorBlockOutro
|
|
break
|
|
case 'preview':
|
|
sponsorVal = this.$store.getters.getSponsorBlockRecap
|
|
break
|
|
case 'music_offtopic':
|
|
sponsorVal = this.$store.getters.getSponsorBlockMusicOffTopic
|
|
break
|
|
case 'filler':
|
|
sponsorVal = this.$store.getters.getSponsorBlockFiller
|
|
break
|
|
}
|
|
if (sponsorVal.skip !== 'doNothing') {
|
|
seekBar.push(x)
|
|
}
|
|
if (sponsorVal.skip === 'autoSkip') {
|
|
autoSkip[x] = true
|
|
}
|
|
if (sponsorVal.skip === 'promptToSkip') {
|
|
promptSkip[x] = true
|
|
}
|
|
categoryData[x] = sponsorVal
|
|
})
|
|
return { autoSkip, seekBar, promptSkip, categoryData }
|
|
},
|
|
|
|
maxVideoPlaybackRate: function () {
|
|
return parseInt(this.$store.getters.getMaxVideoPlaybackRate)
|
|
},
|
|
|
|
videoPlaybackRateInterval: function () {
|
|
return parseFloat(this.$store.getters.getVideoPlaybackRateInterval)
|
|
},
|
|
|
|
playbackRates: function () {
|
|
const playbackRates = []
|
|
let i = this.videoPlaybackRateInterval
|
|
|
|
while (i <= this.maxVideoPlaybackRate) {
|
|
playbackRates.push(i)
|
|
i = i + this.videoPlaybackRateInterval
|
|
i = parseFloat(i.toFixed(2))
|
|
}
|
|
|
|
return playbackRates
|
|
},
|
|
|
|
enableSubtitlesByDefault: function () {
|
|
return this.$store.getters.getEnableSubtitlesByDefault
|
|
},
|
|
|
|
enableScreenshot: function () {
|
|
return this.$store.getters.getEnableScreenshot
|
|
},
|
|
|
|
screenshotFormat: function () {
|
|
return this.$store.getters.getScreenshotFormat
|
|
},
|
|
|
|
screenshotQuality: function () {
|
|
return this.$store.getters.getScreenshotQuality
|
|
},
|
|
|
|
screenshotAskPath: function () {
|
|
return this.$store.getters.getScreenshotAskPath
|
|
},
|
|
|
|
screenshotFolder: function () {
|
|
return this.$store.getters.getScreenshotFolderPath
|
|
},
|
|
|
|
proxyVideos: function () {
|
|
return this.$store.getters.getProxyVideos
|
|
}
|
|
},
|
|
watch: {
|
|
showStatsModal: function () {
|
|
this.player.trigger(this.statsModalEventName)
|
|
},
|
|
|
|
enableScreenshot: function () {
|
|
this.toggleScreenshotButton()
|
|
}
|
|
},
|
|
created: function () {
|
|
this.dataSetup.playbackRates = this.playbackRates
|
|
|
|
if (this.format === 'audio') {
|
|
// hide the PIP button for the audio formats
|
|
const controlBarItems = this.dataSetup.controlBar.children
|
|
const index = controlBarItems.indexOf('pictureInPictureToggle')
|
|
controlBarItems.splice(index, 1)
|
|
}
|
|
|
|
if (this.format === 'legacy' || this.audioTracks.length === 0) {
|
|
// hide the audio track selector for the legacy formats
|
|
// and Invidious(it doesn't give us the information for multiple audio tracks yet)
|
|
const controlBarItems = this.dataSetup.controlBar.children
|
|
const index = controlBarItems.indexOf('audioTrackButton')
|
|
controlBarItems.splice(index, 1)
|
|
}
|
|
},
|
|
mounted: function () {
|
|
const volume = sessionStorage.getItem('volume')
|
|
const muted = sessionStorage.getItem('muted')
|
|
|
|
if (volume !== null) {
|
|
this.volume = volume
|
|
}
|
|
|
|
if (muted !== null) {
|
|
// as sessionStorage stores string values which are truthy by default so we must check with 'true'
|
|
// otherwise 'false' will be returned as true as well
|
|
this.muted = (muted === 'true')
|
|
}
|
|
|
|
if (this.format === 'dash') {
|
|
this.determineDefaultQualityDash()
|
|
}
|
|
|
|
this.createFullWindowButton()
|
|
this.createLoopButton()
|
|
this.createToggleTheatreModeButton()
|
|
this.createScreenshotButton()
|
|
this.determineFormatType()
|
|
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.setActionHandler('play', () => this.playVideo())
|
|
navigator.mediaSession.setActionHandler('pause', () => this.player.pause())
|
|
}
|
|
|
|
window.addEventListener('beforeunload', this.stopPowerSaveBlocker)
|
|
},
|
|
beforeDestroy: function () {
|
|
document.removeEventListener('keydown', this.keyboardShortcutHandler)
|
|
if (this.player !== null) {
|
|
this.exitFullWindow()
|
|
|
|
if (!this.player.isInPictureInPicture()) {
|
|
this.player.dispose()
|
|
this.player = null
|
|
}
|
|
}
|
|
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.setActionHandler('play', null)
|
|
navigator.mediaSession.setActionHandler('pause', null)
|
|
navigator.mediaSession.playbackState = 'none'
|
|
}
|
|
|
|
this.stopPowerSaveBlocker()
|
|
window.removeEventListener('beforeunload', this.stopPowerSaveBlocker)
|
|
},
|
|
methods: {
|
|
initializePlayer: async function () {
|
|
if (typeof this.$refs.video !== 'undefined') {
|
|
if (!this.useDash) {
|
|
qualitySelector(videojs, { showQualitySelectionLabelInControlBar: true })
|
|
await this.determineDefaultQualityLegacy()
|
|
}
|
|
|
|
// regardless of what DASH qualities you enable or disable in the qualityLevels plugin
|
|
// the first segments videojs-http-streaming requests are chosen based on the available bandwidth, which is set to 0.5MB/s by default
|
|
// overriding that to be the same as the quality we requested, makes videojs-http-streamming pick the correct quality
|
|
const playerBandwidthOption = {}
|
|
|
|
if (this.useDash && this.defaultQuality !== 'auto') {
|
|
// https://github.com/videojs/http-streaming#bandwidth
|
|
// Cannot be too high to fix https://github.com/FreeTubeApp/FreeTube/issues/595
|
|
// (when default quality is low like 240p)
|
|
playerBandwidthOption.bandwidth = this.selectedBitrate * VHS_BANDWIDTH_VARIANCE + 1
|
|
}
|
|
|
|
this.player = videojs(this.$refs.video, {
|
|
html5: {
|
|
preloadTextTracks: false,
|
|
vhs: {
|
|
limitRenditionByPlayerDimensions: false,
|
|
smoothQualityChange: false,
|
|
allowSeeksWithinUnsafeLiveWindow: true,
|
|
handlePartialData: true,
|
|
...playerBandwidthOption
|
|
}
|
|
}
|
|
})
|
|
this.player.mobileUi({
|
|
fullscreen: {
|
|
enterOnRotate: this.enterFullscreenOnDisplayRotate,
|
|
exitOnRotate: this.enterFullscreenOnDisplayRotate,
|
|
lockOnRotate: false
|
|
},
|
|
// Without this flag, the mobile UI will only activate
|
|
// if videojs detects it is in Android or iOS
|
|
// With this flag, the mobile UI could theoretically
|
|
// work on any device that has a touch input
|
|
forceForTesting: true,
|
|
touchControls: {
|
|
seekSeconds: this.defaultSkipInterval,
|
|
tapTimeout: 300
|
|
}
|
|
})
|
|
|
|
const qualityLevels = this.player.qualityLevels()
|
|
|
|
// Catch quality changes and update auto labels
|
|
// Event will not fire if new auto resolution is same as previous manual
|
|
// eg. 1080p30 -> auto 1080p30
|
|
qualityLevels.on('change', ({ selectedIndex }) => {
|
|
if (this.selectedQuality === 'auto' || (this.selectedQuality === '' && this.defaultQuality === 'auto')) {
|
|
const newQualityLevel = qualityLevels[selectedIndex]
|
|
this.autoBitrate = newQualityLevel.bitrate
|
|
this.autoFPS = newQualityLevel.frameRate
|
|
this.autoResolution = `${newQualityLevel.width}x${newQualityLevel.height}`
|
|
|
|
let qualityLabel = ''
|
|
const adaptiveFormat = this.activeAdaptiveFormats.find((format) => {
|
|
return format.bitrate === newQualityLevel.bitrate
|
|
})
|
|
if (adaptiveFormat) {
|
|
this.autoMimeType = adaptiveFormat.mimeType
|
|
this.currentAdaptiveFormat = adaptiveFormat
|
|
qualityLabel = `auto ${adaptiveFormat.qualityLabel}`
|
|
} else {
|
|
qualityLabel = `auto ${newQualityLevel.height}p`
|
|
}
|
|
|
|
// Can be run before createDashQualitySelector is called
|
|
const qualityElement = document.getElementById('vjs-current-quality')
|
|
if (qualityElement !== null) {
|
|
qualityElement.innerText = qualityLabel
|
|
}
|
|
}
|
|
})
|
|
|
|
// disable any quality the isn't the default one, as soon as it gets added
|
|
// we don't need to disable any qualities for auto
|
|
if (this.useDash && this.defaultQuality !== 'auto') {
|
|
qualityLevels.on('addqualitylevel', ({ qualityLevel }) => {
|
|
qualityLevel.enabled = qualityLevel.bitrate === this.selectedBitrate
|
|
})
|
|
}
|
|
|
|
// for the DASH formats, videojs-http-streaming takes care of the audio track management for us,
|
|
// thanks to the values in the DASH manifest
|
|
// so we only need a custom implementation for the audio only formats
|
|
if (this.format === 'audio' && this.audioTracks.length > 0) {
|
|
/** @type {import('../../views/Watch/Watch.js').AudioTrack[]} */
|
|
const audioTracks = this.audioTracks
|
|
|
|
const audioTrackList = this.player.audioTracks()
|
|
audioTracks.forEach(({ id, kind, label, language, isDefault: enabled }) => {
|
|
audioTrackList.addTrack(new videojs.AudioTrack({
|
|
id, kind, label, language, enabled,
|
|
}))
|
|
})
|
|
|
|
audioTrackList.on('change', () => {
|
|
let trackId
|
|
// doesn't support foreach so we need to use an indexed for loop here
|
|
for (let i = 0; i < audioTrackList.length; i++) {
|
|
const track = audioTrackList[i]
|
|
|
|
if (track.enabled) {
|
|
trackId = track.id
|
|
break
|
|
}
|
|
}
|
|
|
|
this.changeAudioTrack(trackId)
|
|
})
|
|
}
|
|
|
|
this.player.volume(this.volume)
|
|
this.player.muted(this.muted)
|
|
this.player.playbackRate(this.defaultPlayback)
|
|
this.player.textTrackSettings.setValues(this.defaultCaptionSettings)
|
|
// Remove big play button
|
|
// https://github.com/videojs/video.js/blob/v7.12.1/docs/guides/components.md#basic-example
|
|
if (!this.displayVideoPlayButton) {
|
|
this.player.removeChild('BigPlayButton')
|
|
}
|
|
|
|
// Makes the playback rate menu focus the current item on mouse hover
|
|
// or the closest item if the playback rate is between two items
|
|
// which is likely to be the case when the playback rate is changed by scrolling
|
|
const playbackRateMenuButton = this.player.controlBar.getChild('playbackRateMenuButton')
|
|
playbackRateMenuButton.on(playbackRateMenuButton.menuButton_, 'mouseenter', () => {
|
|
const playbackRate = this.player.playbackRate()
|
|
const rates = this.player.playbackRates()
|
|
|
|
// iterate through the items in reverse order as the highest is displayed first
|
|
// `slice` must be used as `reverse` does reversing in place
|
|
const targetPlaybackRateMenuItemIndex = rates.slice().reverse().findIndex((rate) => {
|
|
return rate === playbackRate || rate < playbackRate
|
|
})
|
|
|
|
// center the selected item in the middle of the visible area
|
|
// the first and last items will never be in the center so it can be skipped for them
|
|
if (targetPlaybackRateMenuItemIndex !== 0 && targetPlaybackRateMenuItemIndex !== rates.length - 1) {
|
|
const playbackRateMenu = playbackRateMenuButton.menu
|
|
const menuElement = playbackRateMenu.contentEl()
|
|
|
|
const itemHeight = playbackRateMenu.children()[targetPlaybackRateMenuItemIndex].contentEl().clientHeight
|
|
|
|
// clientHeight is the height of the visible part of an element
|
|
const centerOfVisibleArea = (menuElement.clientHeight - itemHeight) / 2
|
|
const menuScrollOffset = (itemHeight * targetPlaybackRateMenuItemIndex) - centerOfVisibleArea
|
|
|
|
menuElement.scrollTo({ top: menuScrollOffset })
|
|
}
|
|
})
|
|
|
|
if (this.storyboardSrc !== '') {
|
|
this.player.vttThumbnails({
|
|
src: this.storyboardSrc,
|
|
showTimestamp: true
|
|
})
|
|
}
|
|
|
|
if (this.autoplayVideos) {
|
|
// Calling play() won't happen right away, so a quick timeout will make it function properly.
|
|
setTimeout(() => {
|
|
// `this.player` can be destroyed before this runs
|
|
this.playVideo()
|
|
}, 200)
|
|
}
|
|
|
|
// Remove built-in progress bar mouse over current time display
|
|
// `MouseTimeDisplay` in
|
|
// https://github.com/videojs/video.js/blob/v7.13.3/docs/guides/components.md#default-component-tree
|
|
this.player.controlBar.progressControl.seekBar.playProgressBar.removeChild('timeTooltip')
|
|
|
|
if (this.chapters.length > 0) {
|
|
this.chapters.forEach(this.addChapterMarker)
|
|
}
|
|
|
|
if (this.useSponsorBlock) {
|
|
this.initializeSponsorBlock()
|
|
}
|
|
|
|
document.removeEventListener('keydown', this.keyboardShortcutHandler)
|
|
document.addEventListener('keydown', this.keyboardShortcutHandler)
|
|
|
|
this.player.on('volumechange', this.updateVolume)
|
|
if (this.videoVolumeMouseScroll) {
|
|
this.player.on('wheel', this.mouseScrollVolume)
|
|
} else {
|
|
this.player.controlBar.getChild('volumePanel').on('wheel', this.mouseScrollVolume)
|
|
}
|
|
|
|
if (this.videoPlaybackRateMouseScroll) {
|
|
this.player.on('wheel', this.mouseScrollPlaybackRate)
|
|
// Removes the 'out-of-the-box' click event and adds a custom click event so that a user can
|
|
// ctrl-click (or command+click on a mac) without toggling play/pause
|
|
this.player.el_.firstChild.style.pointerEvents = 'none'
|
|
this.player.on('click', this.handlePlayerClick)
|
|
}
|
|
if (this.videoSkipMouseScroll) {
|
|
this.player.on('wheel', this.mouseScrollSkip)
|
|
}
|
|
|
|
this.player.on('fullscreenchange', () => {
|
|
this.fullscreenOverlay()
|
|
this.toggleFullscreenClass()
|
|
})
|
|
|
|
this.player.on('ready', () => {
|
|
this.$emit('ready')
|
|
this.createStatsModal()
|
|
if (this.captionHybridList.length !== 0) {
|
|
this.transformAndInsertCaptions()
|
|
}
|
|
this.toggleScreenshotButton()
|
|
})
|
|
|
|
this.player.one('loadedmetadata', () => {
|
|
if (this.useDash) {
|
|
// Reserved for switching back to videojs-http-quality-selector if needed
|
|
// this.dataSetup.plugins.httpSourceSelector = {
|
|
// default: 'auto'
|
|
// }
|
|
|
|
// this.player.httpSourceSelector()
|
|
this.createDashQualitySelector(this.player.qualityLevels())
|
|
}
|
|
|
|
this.checkAspectRatio()
|
|
})
|
|
|
|
this.player.on('ended', () => {
|
|
this.$emit('ended')
|
|
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.playbackState = 'none'
|
|
}
|
|
|
|
this.stopPowerSaveBlocker()
|
|
})
|
|
|
|
this.player.on('error', (error, message) => {
|
|
this.$emit('error', error.target.player.error_)
|
|
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.playbackState = 'none'
|
|
}
|
|
|
|
this.stopPowerSaveBlocker()
|
|
})
|
|
|
|
this.player.on('play', async () => {
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.playbackState = 'playing'
|
|
}
|
|
|
|
if (process.env.IS_ELECTRON) {
|
|
const { ipcRenderer } = require('electron')
|
|
this.powerSaveBlocker =
|
|
await ipcRenderer.invoke(IpcChannels.START_POWER_SAVE_BLOCKER)
|
|
}
|
|
})
|
|
|
|
this.player.on('pause', () => {
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.playbackState = 'paused'
|
|
}
|
|
|
|
this.stopPowerSaveBlocker()
|
|
})
|
|
|
|
this.player.on(this.statsModalEventName, () => {
|
|
if (this.showStatsModal) {
|
|
this.statsModal.open()
|
|
this.player.controls(true)
|
|
this.statsModal.contentEl().innerHTML = this.getFormattedStats()
|
|
} else {
|
|
this.statsModal.close()
|
|
}
|
|
})
|
|
|
|
this.player.on('timeupdate', () => {
|
|
if (this.format === 'dash') {
|
|
this.playerStats = this.player.tech({ IWillNotUseThisInPlugins: true }).vhs.stats
|
|
this.updateStatsContent()
|
|
}
|
|
this.$emit('timeupdate')
|
|
})
|
|
|
|
this.player.textTrackSettings.on('modalclose', (_) => {
|
|
const settings = this.player.textTrackSettings.getValues()
|
|
this.updateDefaultCaptionSettings(JSON.stringify(settings))
|
|
})
|
|
|
|
// right click menu
|
|
if (process.env.IS_ELECTRON) {
|
|
const { ipcRenderer } = require('electron')
|
|
ipcRenderer.removeAllListeners('showVideoStatistics')
|
|
ipcRenderer.on('showVideoStatistics', (event) => {
|
|
this.toggleShowStatsModal()
|
|
})
|
|
}
|
|
}
|
|
},
|
|
|
|
initializeSponsorBlock() {
|
|
sponsorBlockSkipSegments(this.videoId, this.sponsorSkips.seekBar)
|
|
.then((skipSegments) => {
|
|
if (skipSegments.length === 0) {
|
|
return
|
|
}
|
|
|
|
this.player.ready(() => {
|
|
this.player.on('timeupdate', () => {
|
|
this.skipSponsorBlocks(skipSegments)
|
|
})
|
|
|
|
this.player.on('seeking', () => {
|
|
// disabling sponsors auto skipping when the user manually seeks
|
|
this.skipSponsors = false
|
|
})
|
|
|
|
skipSegments.forEach(({
|
|
category,
|
|
segment: [startTime, endTime]
|
|
}) => {
|
|
this.addSponsorBlockMarker({
|
|
time: startTime,
|
|
duration: endTime - startTime,
|
|
color: 'var(--primary-color)',
|
|
category: category
|
|
})
|
|
})
|
|
})
|
|
})
|
|
},
|
|
|
|
skipSponsorBlocks(skipSegments) {
|
|
const currentTime = this.player.currentTime()
|
|
const duration = this.player.duration()
|
|
let newTime = null
|
|
let skippedCategory = null
|
|
skipSegments.forEach(({ category, segment: [startTime, endTime] }) => {
|
|
if (startTime <= currentTime && currentTime < endTime) {
|
|
newTime = endTime
|
|
skippedCategory = category
|
|
}
|
|
})
|
|
if (this.skipSponsors && newTime !== null && Math.abs(duration - currentTime) > 0.500) {
|
|
if (this.sponsorSkips.autoSkip[skippedCategory]) {
|
|
if (this.skipCountdown === 0) {
|
|
if (this.sponsorBlockShowSkippedToast) {
|
|
this.showSkippedSponsorSegmentInformation(skippedCategory)
|
|
}
|
|
this.player.currentTime(newTime)
|
|
} else {
|
|
this.skipCountdown--
|
|
}
|
|
}
|
|
}
|
|
// restoring sponsors skipping default values
|
|
if (newTime === null && !this.skipSponsors) {
|
|
this.skipSponsors = true
|
|
this.skipCountdown = 1
|
|
}
|
|
},
|
|
|
|
showSkippedSponsorSegmentInformation(category) {
|
|
const translatedCategory = this.sponsorBlockTranslatedCategory(category)
|
|
showToast(`${this.$t('Video.Skipped segment')} ${translatedCategory}`)
|
|
},
|
|
|
|
sponsorBlockTranslatedCategory(category) {
|
|
switch (category) {
|
|
case 'sponsor':
|
|
return this.$t('Video.Sponsor Block category.sponsor')
|
|
case 'intro':
|
|
return this.$t('Video.Sponsor Block category.intro')
|
|
case 'outro':
|
|
return this.$t('Video.Sponsor Block category.outro')
|
|
case 'selfpromo':
|
|
return this.$t('Video.Sponsor Block category.self-promotion')
|
|
case 'interaction':
|
|
return this.$t('Video.Sponsor Block category.interaction')
|
|
case 'music_offtopic':
|
|
return this.$t('Video.Sponsor Block category.music offtopic')
|
|
case 'filler':
|
|
return this.$t('Video.Sponsor Block category.filler')
|
|
default:
|
|
console.error(`Unknown translation for SponsorBlock category ${category}`)
|
|
return category
|
|
}
|
|
},
|
|
|
|
addSponsorBlockMarker(marker) {
|
|
const markerDiv = videojs.dom.createEl('div')
|
|
|
|
markerDiv.title = this.sponsorBlockTranslatedCategory(marker.category)
|
|
markerDiv.className = `sponsorBlockMarker main${this.sponsorSkips.categoryData[marker.category].color}`
|
|
markerDiv.style.width = (marker.duration / this.lengthSeconds) * 100 + '%'
|
|
markerDiv.style.marginLeft = (marker.time / this.lengthSeconds) * 100 + '%'
|
|
|
|
this.player.el().querySelector('.vjs-progress-holder').appendChild(markerDiv)
|
|
},
|
|
|
|
addChapterMarker(chapter) {
|
|
const markerDiv = videojs.dom.createEl('div')
|
|
|
|
markerDiv.title = chapter.title
|
|
markerDiv.className = 'chapterMarker'
|
|
markerDiv.style.marginLeft = `calc(${(chapter.startSeconds / this.lengthSeconds) * 100}% - 1px)`
|
|
|
|
this.player.el().querySelector('.vjs-progress-holder').appendChild(markerDiv)
|
|
},
|
|
|
|
checkAspectRatio() {
|
|
const videoWidth = this.player.videoWidth()
|
|
const videoHeight = this.player.videoHeight()
|
|
|
|
if ((videoWidth - videoHeight) <= 240) {
|
|
this.player.fluid(false)
|
|
this.player.aspectRatio('16:9')
|
|
}
|
|
},
|
|
|
|
updateVolume: function (_event) {
|
|
// https://docs.videojs.com/html5#volume
|
|
if (sessionStorage.getItem('muted') === 'false' && this.player.volume() === 0) {
|
|
// If video is muted by dragging volume slider, it doesn't change 'muted' in sessionStorage to true
|
|
// hence compare it with 'false' and set volume to defaultVolume.
|
|
const volume = parseFloat(sessionStorage.getItem('defaultVolume'))
|
|
const muted = true
|
|
sessionStorage.setItem('volume', volume)
|
|
sessionStorage.setItem('muted', muted)
|
|
} else {
|
|
// If volume isn't muted by dragging the slider, muted and volume values are carried over to next video.
|
|
const volume = this.player.volume()
|
|
const muted = this.player.muted()
|
|
sessionStorage.setItem('volume', volume)
|
|
sessionStorage.setItem('muted', muted)
|
|
}
|
|
},
|
|
|
|
mouseScrollVolume: function (event) {
|
|
if (event.target && !event.currentTarget.querySelector('.vjs-menu:hover')) {
|
|
event.preventDefault()
|
|
|
|
if (this.player.muted() && event.wheelDelta > 0) {
|
|
this.player.muted(false)
|
|
this.player.volume(0)
|
|
}
|
|
|
|
if (!event.ctrlKey && !event.metaKey) {
|
|
if (!this.player.muted()) {
|
|
if (event.wheelDelta > 0) {
|
|
this.changeVolume(0.05)
|
|
} else if (event.wheelDelta < 0) {
|
|
this.changeVolume(-0.05)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {WheelEvent} event
|
|
*/
|
|
mouseScrollPlaybackRate: function (event) {
|
|
if (event.target && !event.currentTarget.querySelector('.vjs-menu:hover')) {
|
|
if (event.ctrlKey || event.metaKey) {
|
|
// Only stop page scrolling when Cmd/Ctrl pressed
|
|
event.preventDefault()
|
|
|
|
if (event.deltaY > 0) {
|
|
this.changePlayBackRate(0.05)
|
|
} else if (event.deltaY < 0) {
|
|
this.changePlayBackRate(-0.05)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
mouseScrollSkip: function (event) {
|
|
// Avoid doing both
|
|
if ((event.ctrlKey || event.metaKey) && this.videoPlaybackRateMouseScroll) {
|
|
return
|
|
}
|
|
|
|
// ensure that the mouse is over the player
|
|
if (event.target && (event.target.matches('.vjs-tech') || event.target.matches('.ftVideoPlayer'))) {
|
|
event.preventDefault()
|
|
|
|
if (event.wheelDelta > 0) {
|
|
this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate())
|
|
}
|
|
if (event.wheelDelta < 0) {
|
|
this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate())
|
|
}
|
|
}
|
|
},
|
|
|
|
handlePlayerClick: function (event) {
|
|
if (event.target.matches('.ftVideoPlayer')) {
|
|
if (event.ctrlKey || event.metaKey) {
|
|
this.player.playbackRate(this.defaultPlayback)
|
|
} else {
|
|
if (this.player.paused() || !this.player.hasStarted()) {
|
|
this.playVideo()
|
|
} else {
|
|
this.player.pause()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {string} trackId
|
|
*/
|
|
changeAudioTrack: function (trackId) {
|
|
// changing the player sources resets it, so we need to store the values that get reset,
|
|
// before we change the sources and restore them afterwards
|
|
const isPaused = this.player.paused()
|
|
const currentTime = this.player.currentTime()
|
|
const playbackRate = this.player.playbackRate()
|
|
const selectedQualityIndex = this.player.currentSources().findIndex(quality => quality.selected)
|
|
|
|
const newSourceList = this.audioTracks.find(audioTrack => audioTrack.id === trackId).sourceList
|
|
|
|
// video.js doesn't pick up changes to the sources in the HTML after it's initial load
|
|
// updating the sources of an existing player requires calling player.src() instead
|
|
// which accepts a different object that what use for the html sources
|
|
|
|
const newSources = newSourceList.map((source, index) => {
|
|
return {
|
|
src: source.url,
|
|
type: source.type,
|
|
label: source.qualityLabel,
|
|
selected: index === selectedQualityIndex
|
|
}
|
|
})
|
|
|
|
this.player.one('canplay', () => {
|
|
this.player.currentTime(currentTime)
|
|
this.player.playbackRate(playbackRate)
|
|
|
|
// need to call play to restore the player state, even if we want to pause afterwards
|
|
this.playVideo(() => {
|
|
if (isPaused) { this.player.pause() }
|
|
})
|
|
})
|
|
|
|
this.player.src(newSources)
|
|
},
|
|
|
|
determineFormatType: function () {
|
|
if (this.format === 'dash') {
|
|
this.enableDashFormat()
|
|
} else {
|
|
this.enableLegacyFormat()
|
|
}
|
|
},
|
|
|
|
determineDefaultQualityLegacy: function () {
|
|
if (this.useDash) {
|
|
return
|
|
}
|
|
|
|
if (this.sourceList.length === 0) {
|
|
return ''
|
|
}
|
|
|
|
if (typeof (this.sourceList[0].qualityLabel) === 'number') {
|
|
return ''
|
|
}
|
|
|
|
if (this.sourceList[this.sourceList.length - 1].qualityLabel === this.$t('Video.Audio.Low')) {
|
|
this.selectedDefaultQuality = this.sourceList[0].qualityLabel
|
|
return
|
|
}
|
|
|
|
let defaultQuality = this.defaultQuality
|
|
|
|
if (defaultQuality === 'auto') {
|
|
defaultQuality = 720
|
|
}
|
|
|
|
let maxAvailableQuality = parseInt(this.sourceList[this.sourceList.length - 1].qualityLabel.replace(/p|k/, ''))
|
|
|
|
if (maxAvailableQuality === 4) {
|
|
maxAvailableQuality = 2160
|
|
}
|
|
|
|
if (maxAvailableQuality === 8) {
|
|
maxAvailableQuality = 4320
|
|
}
|
|
|
|
if (maxAvailableQuality < defaultQuality) {
|
|
this.selectedDefaultQuality = this.sourceList[this.sourceList.length - 1].qualityLabel
|
|
}
|
|
|
|
const reversedList = [].concat(this.sourceList).reverse()
|
|
|
|
reversedList.forEach((source, index) => {
|
|
let qualityNumber = parseInt(source.qualityLabel.replace(/p|k/, ''))
|
|
if (qualityNumber === 4) {
|
|
qualityNumber = 2160
|
|
}
|
|
if (qualityNumber === 8) {
|
|
qualityNumber = 4320
|
|
}
|
|
|
|
if (defaultQuality === qualityNumber) {
|
|
this.selectedDefaultQuality = source.qualityLabel
|
|
}
|
|
|
|
if (index < (this.sourceList.length - 1)) {
|
|
let upperQualityNumber = parseInt(reversedList[index + 1].qualityLabel.replace(/p|k/, ''))
|
|
if (upperQualityNumber === 4) {
|
|
upperQualityNumber = 2160
|
|
}
|
|
if (upperQualityNumber === 8) {
|
|
upperQualityNumber = 4320
|
|
}
|
|
if (defaultQuality >= qualityNumber && defaultQuality < upperQualityNumber) {
|
|
this.selectedDefaultQuality = source.qualityLabel
|
|
}
|
|
} else if (qualityNumber <= defaultQuality) {
|
|
this.selectedDefaultQuality = source.qualityLabel
|
|
}
|
|
})
|
|
|
|
if (this.selectedDefaultQuality === '') {
|
|
this.selectedDefaultQuality = this.sourceList[this.sourceList.length - 1].qualityLabel
|
|
}
|
|
},
|
|
|
|
determineDefaultQualityDash: function () {
|
|
// TODO add settings and filtering for 60fps and HDR
|
|
|
|
if (this.defaultQuality === 'auto') {
|
|
this.selectedResolution = 'auto'
|
|
this.selectedFPS = 'auto'
|
|
this.selectedBitrate = 'auto'
|
|
this.selectedMimeType = 'auto'
|
|
} else {
|
|
const videoFormats = this.adaptiveFormats.filter(format => {
|
|
return (format.mimeType || format.type).startsWith('video') &&
|
|
typeof format.height === 'number'
|
|
})
|
|
|
|
// Select the quality that is identical to the users chosen default quality if it's available
|
|
// otherwise select the next lowest quality
|
|
|
|
let formatsToTest = videoFormats.filter(format => {
|
|
// For short videos (or vertical videos?)
|
|
// Height > width (e.g. H: 1280, W: 720)
|
|
if (typeof format.width === 'number' && format.height > format.width) {
|
|
return format.width === this.defaultQuality
|
|
}
|
|
|
|
return format.height === this.defaultQuality
|
|
})
|
|
|
|
if (formatsToTest.length === 0) {
|
|
formatsToTest = videoFormats.filter(format => {
|
|
// For short videos (or vertical videos?)
|
|
// Height > width (e.g. H: 1280, W: 720)
|
|
if (typeof format.width === 'number' && format.height > format.width) {
|
|
return format.width < this.defaultQuality
|
|
}
|
|
|
|
return format.height < this.defaultQuality
|
|
})
|
|
}
|
|
|
|
formatsToTest.sort((a, b) => {
|
|
if (a.height === b.height) {
|
|
// Higher bitrate for video formats with HDR qualities
|
|
// `height` and `fps` are the same but `bitrate` would be higher
|
|
return b.bitrate - a.bitrate
|
|
} else {
|
|
return b.height - a.height
|
|
}
|
|
})
|
|
|
|
const selectedFormat = formatsToTest[0]
|
|
this.currentAdaptiveFormat = selectedFormat
|
|
this.selectedBitrate = selectedFormat.bitrate
|
|
this.selectedResolution = `${selectedFormat.width}x${selectedFormat.height}`
|
|
this.selectedFPS = selectedFormat.fps
|
|
this.selectedMimeType = selectedFormat.mimeType || selectedFormat.type
|
|
}
|
|
},
|
|
|
|
setDashQualityLevel: function (bitrate) {
|
|
if (bitrate === this.selectedBitrate) {
|
|
return
|
|
}
|
|
|
|
let adaptiveFormat = null
|
|
|
|
if (bitrate !== 'auto') {
|
|
adaptiveFormat = this.activeAdaptiveFormats.find((format) => {
|
|
return format.bitrate === bitrate
|
|
})
|
|
}
|
|
|
|
let qualityLabel = adaptiveFormat ? adaptiveFormat.qualityLabel : ''
|
|
|
|
const qualityLevels = Array.from(this.player.qualityLevels())
|
|
if (bitrate === 'auto') {
|
|
qualityLevels.forEach(ql => {
|
|
ql.enabled = true
|
|
})
|
|
} else {
|
|
const previousBitrate = this.selectedBitrate
|
|
|
|
// if it was previously set to a specific quality we can disable just that and enable just the new one
|
|
// if it was previously set to auto, it means all qualitylevels were enabled, so we need to disable them
|
|
|
|
if (previousBitrate !== 'auto') {
|
|
const qualityLevel = qualityLevels.find(ql => bitrate === ql.bitrate)
|
|
qualityLevel.enabled = true
|
|
|
|
if (qualityLabel === '') {
|
|
qualityLabel = qualityLevel.height + 'p'
|
|
}
|
|
|
|
qualityLevels.find(ql => previousBitrate === ql.bitrate).enabled = false
|
|
} else {
|
|
qualityLevels.forEach(ql => {
|
|
if (bitrate === ql.bitrate) {
|
|
ql.enabled = true
|
|
if (qualityLabel === '') {
|
|
qualityLabel = ql.height + 'p'
|
|
}
|
|
} else {
|
|
ql.enabled = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const selectedQuality = bitrate === 'auto' ? 'auto' : qualityLabel
|
|
|
|
const qualityElement = document.getElementById('vjs-current-quality')
|
|
// Include resolution of previous selection
|
|
// If new auto resolution is the same as the previous resolution
|
|
// the qualityLevels on 'change' event will not be called
|
|
qualityElement.innerText = (selectedQuality === 'auto') ? `auto ${this.currentAdaptiveFormat.qualityLabel}` : selectedQuality
|
|
this.selectedQuality = selectedQuality
|
|
|
|
if (selectedQuality !== 'auto') {
|
|
this.selectedResolution = `${adaptiveFormat.width}x${adaptiveFormat.height}`
|
|
this.selectedFPS = adaptiveFormat.fps
|
|
this.selectedBitrate = adaptiveFormat.bitrate
|
|
this.selectedMimeType = adaptiveFormat.mimeType
|
|
this.currentAdaptiveFormat = adaptiveFormat
|
|
} else {
|
|
// Default auto values to use previous selected values in case the adaptive format doesn't change
|
|
this.autoResolution = this.selectedResolution
|
|
this.autoFPS = this.selectedFPS
|
|
this.autoBitrate = this.selectedBitrate
|
|
this.autoMimeType = this.selectedMimeType
|
|
|
|
this.selectedResolution = 'auto'
|
|
this.selectedFPS = 'auto'
|
|
this.selectedBitrate = 'auto'
|
|
this.selectedMimeType = 'auto'
|
|
}
|
|
|
|
const qualityItems = document.querySelectorAll('.quality-item')
|
|
|
|
qualityItems.forEach((item) => {
|
|
item.classList.remove('quality-selected')
|
|
const qualityText = item.querySelector('.vjs-menu-item-text')
|
|
if (qualityText.innerText === selectedQuality.toLowerCase()) {
|
|
item.classList.add('quality-selected')
|
|
}
|
|
})
|
|
|
|
/* if (this.selectedQuality === qualityLevel && this.using60Fps === is60Fps) {
|
|
return
|
|
}
|
|
let foundSelectedQuality = false
|
|
this.using60Fps = is60Fps
|
|
this.player.qualityLevels().levels_.sort((a, b) => {
|
|
if (a.height === b.height) {
|
|
return a.bitrate - b.bitrate
|
|
} else {
|
|
return a.height - b.height
|
|
}
|
|
}).forEach((ql, index, arr) => {
|
|
if (foundSelectedQuality) {
|
|
ql.enabled = false
|
|
ql.enabled_(false)
|
|
} else if (qualityLevel === 'auto') {
|
|
ql.enabled = true
|
|
ql.enabled_(true)
|
|
} else if (ql.height === qualityLevel) {
|
|
ql.enabled = true
|
|
ql.enabled_(true)
|
|
foundSelectedQuality = true
|
|
|
|
let lowerQuality
|
|
let higherQuality
|
|
|
|
if ((index - 1) !== -1) {
|
|
lowerQuality = arr[index - 1]
|
|
}
|
|
|
|
if ((index + 1) < arr.length) {
|
|
higherQuality = arr[index + 1]
|
|
}
|
|
|
|
if (typeof (lowerQuality) !== 'undefined' && lowerQuality.height === ql.height && lowerQuality.bitrate < ql.bitrate && !is60Fps) {
|
|
ql.enabled = false
|
|
ql.enabled_(false)
|
|
foundSelectedQuality = false
|
|
}
|
|
|
|
if (typeof (higherQuality) !== 'undefined' && higherQuality.height === ql.height && higherQuality.bitrate > ql.bitrate && is60Fps) {
|
|
ql.enabled = false
|
|
ql.enabled_(false)
|
|
foundSelectedQuality = false
|
|
}
|
|
} else {
|
|
ql.enabled = false
|
|
ql.enabled_(false)
|
|
}
|
|
})
|
|
|
|
let selectedQuality = qualityLevel
|
|
|
|
if (selectedQuality !== 'auto' && is60Fps) {
|
|
selectedQuality = selectedQuality + 'p60'
|
|
} else if (selectedQuality !== 'auto') {
|
|
selectedQuality = selectedQuality + 'p'
|
|
}
|
|
|
|
const qualityElement = document.getElementById('vjs-current-quality')
|
|
qualityElement.innerText = selectedQuality
|
|
this.selectedQuality = qualityLevel
|
|
|
|
const qualityItems = $('.quality-item').get()
|
|
|
|
$('.quality-item').removeClass('quality-selected')
|
|
|
|
qualityItems.forEach((item) => {
|
|
const qualityText = $(item).find('.vjs-menu-item-text').get(0)
|
|
if (qualityText.innerText === selectedQuality) {
|
|
$(item).addClass('quality-selected')
|
|
}
|
|
})
|
|
|
|
// const currentTime = this.player.currentTime()
|
|
|
|
// this.player.currentTime(0)
|
|
// this.player.currentTime(currentTime) */
|
|
},
|
|
|
|
enableDashFormat: function () {
|
|
if (this.dashSrc === null) {
|
|
console.warn('No dash format available.')
|
|
return
|
|
}
|
|
|
|
this.useDash = true
|
|
this.useHls = false
|
|
this.activeSourceList = this.dashSrc
|
|
|
|
setTimeout(this.initializePlayer, 100)
|
|
},
|
|
|
|
enableLegacyFormat: function () {
|
|
if (this.sourceList.length === 0) {
|
|
console.error('No sources available')
|
|
return
|
|
}
|
|
|
|
this.useDash = false
|
|
this.useHls = false
|
|
this.activeSourceList = (this.proxyVideos || !process.env.IS_ELECTRON)
|
|
// use map here to return slightly different list without modifying original
|
|
? this.sourceList.map((source) => {
|
|
return {
|
|
...source,
|
|
url: getProxyUrl(source.url)
|
|
}
|
|
})
|
|
: this.sourceList
|
|
|
|
setTimeout(this.initializePlayer, 100)
|
|
},
|
|
|
|
togglePlayPause: function () {
|
|
if (this.player.paused()) {
|
|
this.playVideo()
|
|
} else {
|
|
this.player.pause()
|
|
}
|
|
},
|
|
|
|
changeDurationBySeconds: function (seconds) {
|
|
const currentTime = this.player.currentTime()
|
|
const newTime = currentTime + seconds
|
|
|
|
if (newTime < 0) {
|
|
this.player.currentTime(0)
|
|
} else if (newTime > this.player.duration) {
|
|
this.player.currentTime(this.player.duration)
|
|
} else {
|
|
this.player.currentTime(newTime)
|
|
}
|
|
},
|
|
|
|
changePlayBackRate: function (rate) {
|
|
const newPlaybackRate = (this.player.playbackRate() + rate).toFixed(2)
|
|
|
|
if (newPlaybackRate >= this.videoPlaybackRateInterval && newPlaybackRate <= this.maxVideoPlaybackRate) {
|
|
this.player.playbackRate(newPlaybackRate)
|
|
}
|
|
},
|
|
|
|
framebyframe: function (step) {
|
|
if (this.format === 'audio') {
|
|
return
|
|
}
|
|
|
|
this.player.pause()
|
|
|
|
let fps
|
|
if (this.useDash) {
|
|
const qualityLevels = this.player.qualityLevels()
|
|
fps = qualityLevels[qualityLevels.selectedIndex].frameRate
|
|
} else {
|
|
// legacy formats
|
|
const currentPlayerSourceUrl = this.player.currentSource().src
|
|
fps = this.sourceList.find(source => source.url === currentPlayerSourceUrl)?.fps
|
|
}
|
|
|
|
if (isNaN(fps)) {
|
|
fps = 30
|
|
}
|
|
|
|
// The 3 lines below were taken from the videojs-framebyframe node module by Helena Rasche
|
|
const frameTime = 1 / fps
|
|
const dist = frameTime * step
|
|
this.player.currentTime(this.player.currentTime() + dist)
|
|
},
|
|
|
|
changeVolume: function (volume) {
|
|
const currentVolume = this.player.volume()
|
|
const newVolume = currentVolume + volume
|
|
|
|
if (newVolume < 0) {
|
|
this.player.volume(0)
|
|
} else if (newVolume > 1) {
|
|
this.player.volume(1)
|
|
} else {
|
|
this.player.volume(newVolume)
|
|
}
|
|
},
|
|
|
|
toggleMute: function () {
|
|
if (this.player.muted()) {
|
|
this.player.muted(false)
|
|
} else {
|
|
this.player.muted(true)
|
|
}
|
|
},
|
|
|
|
toggleCaptions: function () {
|
|
// skip videojs-http-streaming's segment-metadata track
|
|
// https://github.com/videojs/http-streaming#segment-metadata
|
|
const trackIndex = this.useDash ? 1 : 0
|
|
|
|
const tracks = this.player.textTracks()
|
|
|
|
// visually and semantically disable any other enabled tracks
|
|
for (let i = 0; i < tracks.length; ++i) {
|
|
if (i !== trackIndex && tracks[i].mode === 'showing') {
|
|
tracks[i].mode = 'disabled'
|
|
}
|
|
}
|
|
|
|
if (tracks.length > trackIndex) {
|
|
if (tracks[trackIndex].mode === 'showing') {
|
|
tracks[trackIndex].mode = 'disabled'
|
|
} else {
|
|
tracks[trackIndex].mode = 'showing'
|
|
}
|
|
}
|
|
},
|
|
|
|
createLoopButton: function () {
|
|
const toggleVideoLoop = this.toggleVideoLoop
|
|
|
|
const VjsButton = videojs.getComponent('Button')
|
|
class loopButton extends VjsButton {
|
|
handleClick() {
|
|
toggleVideoLoop()
|
|
}
|
|
|
|
createControlTextEl(button) {
|
|
button.title = 'Toggle Loop'
|
|
|
|
const div = document.createElement('div')
|
|
|
|
div.id = 'loopButton'
|
|
div.className = 'vjs-icon-loop loop-white vjs-button'
|
|
|
|
button.appendChild(div)
|
|
|
|
return div
|
|
}
|
|
}
|
|
|
|
videojs.registerComponent('loopButton', loopButton)
|
|
},
|
|
|
|
toggleVideoLoop: function () {
|
|
const loopButton = document.getElementById('loopButton')
|
|
|
|
if (!this.player.loop()) {
|
|
const currentTheme = this.$store.state.settings.mainColor
|
|
|
|
const colorValue = colors.find(color => color.name === currentTheme).value
|
|
|
|
const themeTextColor = calculateColorLuminance(colorValue)
|
|
|
|
loopButton.classList.add('vjs-icon-loop-active')
|
|
|
|
if (themeTextColor === '#000000') {
|
|
loopButton.classList.add('loop-black')
|
|
loopButton.classList.remove('loop-white')
|
|
}
|
|
|
|
this.player.loop(true)
|
|
} else {
|
|
loopButton.classList.remove('vjs-icon-loop-active')
|
|
loopButton.classList.remove('loop-black')
|
|
loopButton.classList.add('loop-white')
|
|
this.player.loop(false)
|
|
}
|
|
},
|
|
|
|
createFullWindowButton: function () {
|
|
const toggleFullWindow = this.toggleFullWindow
|
|
|
|
const VjsButton = videojs.getComponent('Button')
|
|
class fullWindowButton extends VjsButton {
|
|
handleClick() {
|
|
toggleFullWindow()
|
|
}
|
|
|
|
createControlTextEl(button) {
|
|
// Add class name to button to be able to target it with CSS selector
|
|
button.classList.add('vjs-button-fullwindow')
|
|
button.title = 'Full Window'
|
|
|
|
const div = document.createElement('div')
|
|
div.id = 'fullwindow'
|
|
div.className = 'vjs-icon-fullwindow-enter vjs-button'
|
|
|
|
button.appendChild(div)
|
|
|
|
return div
|
|
}
|
|
}
|
|
|
|
videojs.registerComponent('fullWindowButton', fullWindowButton)
|
|
},
|
|
|
|
createToggleTheatreModeButton: function () {
|
|
if (!this.theatrePossible) {
|
|
return
|
|
}
|
|
|
|
const theatreModeActive = this.useTheatreMode ? ' vjs-icon-theatre-active' : ''
|
|
|
|
const toggleTheatreMode = this.toggleTheatreMode
|
|
|
|
const VjsButton = videojs.getComponent('Button')
|
|
class toggleTheatreModeButton extends VjsButton {
|
|
handleClick() {
|
|
toggleTheatreMode()
|
|
}
|
|
|
|
createControlTextEl(button) {
|
|
button.classList.add('vjs-button-theatre')
|
|
button.title = 'Toggle Theatre Mode'
|
|
|
|
const div = document.createElement('div')
|
|
div.id = 'toggleTheatreModeButton'
|
|
div.className = `vjs-icon-theatre-inactive${theatreModeActive} vjs-button`
|
|
|
|
button.appendChild(div)
|
|
|
|
return button
|
|
}
|
|
}
|
|
|
|
videojs.registerComponent('toggleTheatreModeButton', toggleTheatreModeButton)
|
|
},
|
|
|
|
toggleTheatreMode: function () {
|
|
if (!this.player.isFullscreen_) {
|
|
const toggleTheatreModeButton = document.getElementById('toggleTheatreModeButton')
|
|
if (!this.useTheatreMode) {
|
|
toggleTheatreModeButton.classList.add('vjs-icon-theatre-active')
|
|
} else {
|
|
toggleTheatreModeButton.classList.remove('vjs-icon-theatre-active')
|
|
}
|
|
}
|
|
|
|
this.$emit('toggle-theatre-mode')
|
|
},
|
|
|
|
createScreenshotButton: function () {
|
|
const takeScreenshot = this.takeScreenshot
|
|
|
|
const VjsButton = videojs.getComponent('Button')
|
|
class screenshotButton extends VjsButton {
|
|
handleClick() {
|
|
takeScreenshot()
|
|
const video = document.getElementsByTagName('video')[0]
|
|
video.focus()
|
|
video.blur()
|
|
}
|
|
|
|
createControlTextEl(button) {
|
|
button.classList.add('vjs-hidden')
|
|
button.title = 'Screenshot'
|
|
|
|
const div = document.createElement('div')
|
|
div.id = 'screenshotButton'
|
|
div.className = 'vjs-icon-screenshot vjs-button'
|
|
|
|
button.appendChild(div)
|
|
|
|
return div
|
|
}
|
|
}
|
|
|
|
videojs.registerComponent('screenshotButton', screenshotButton)
|
|
},
|
|
|
|
toggleScreenshotButton: function () {
|
|
const button = document.getElementById('screenshotButton').parentNode
|
|
if (this.enableScreenshot && this.format !== 'audio') {
|
|
button.classList.remove('vjs-hidden')
|
|
} else {
|
|
button.classList.add('vjs-hidden')
|
|
}
|
|
},
|
|
|
|
takeScreenshot: async function () {
|
|
if (!this.enableScreenshot || this.format === 'audio') {
|
|
return
|
|
}
|
|
|
|
const width = this.player.videoWidth()
|
|
const height = this.player.videoHeight()
|
|
if (width <= 0) {
|
|
return
|
|
}
|
|
|
|
// Need to set crossorigin="anonymous" for LegacyFormat on Invidious
|
|
// https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
|
|
const video = document.querySelector('video')
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = width
|
|
canvas.height = height
|
|
canvas.getContext('2d').drawImage(video, 0, 0)
|
|
|
|
const format = this.screenshotFormat
|
|
const mimeType = `image/${format === 'jpg' ? 'jpeg' : format}`
|
|
const imageQuality = format === 'jpg' ? this.screenshotQuality / 100 : 1
|
|
|
|
let filename
|
|
try {
|
|
filename = await this.parseScreenshotCustomFileName({
|
|
date: new Date(Date.now()),
|
|
playerTime: this.player.currentTime(),
|
|
videoId: this.videoId
|
|
})
|
|
} catch (err) {
|
|
console.error(`Parse failed: ${err.message}`)
|
|
showToast(this.$t('Screenshot Error', { error: err.message }))
|
|
canvas.remove()
|
|
return
|
|
}
|
|
|
|
let subDir = ''
|
|
if (filename.indexOf(path.sep) !== -1) {
|
|
const lastIndex = filename.lastIndexOf(path.sep)
|
|
subDir = filename.substring(0, lastIndex)
|
|
filename = filename.substring(lastIndex + 1)
|
|
}
|
|
const filenameWithExtension = `${filename}.${format}`
|
|
|
|
let dirPath
|
|
let filePath
|
|
if (this.screenshotAskPath) {
|
|
const wasPlaying = !this.player.paused()
|
|
if (wasPlaying) {
|
|
this.player.pause()
|
|
}
|
|
|
|
if (this.screenshotFolder === '' || !(await pathExists(this.screenshotFolder))) {
|
|
dirPath = await getPicturesPath()
|
|
} else {
|
|
dirPath = this.screenshotFolder
|
|
}
|
|
|
|
const options = {
|
|
defaultPath: path.join(dirPath, filenameWithExtension),
|
|
filters: [
|
|
{
|
|
name: format.toUpperCase(),
|
|
extensions: [format]
|
|
}
|
|
]
|
|
}
|
|
|
|
const response = await showSaveDialog(options)
|
|
if (wasPlaying) {
|
|
this.playVideo()
|
|
}
|
|
if (response.canceled || response.filePath === '') {
|
|
canvas.remove()
|
|
return
|
|
}
|
|
|
|
filePath = response.filePath
|
|
if (!filePath.endsWith(`.${format}`)) {
|
|
filePath = `${filePath}.${format}`
|
|
}
|
|
|
|
dirPath = path.dirname(filePath)
|
|
this.updateScreenshotFolderPath(dirPath)
|
|
} else {
|
|
if (this.screenshotFolder === '') {
|
|
dirPath = path.join(await getPicturesPath(), 'Freetube', subDir)
|
|
} else {
|
|
dirPath = path.join(this.screenshotFolder, subDir)
|
|
}
|
|
|
|
if (!(await pathExists(dirPath))) {
|
|
try {
|
|
fs.mkdir(dirPath, { recursive: true })
|
|
} catch (err) {
|
|
console.error(err)
|
|
showToast(this.$t('Screenshot Error', { error: err }))
|
|
canvas.remove()
|
|
return
|
|
}
|
|
}
|
|
filePath = path.join(dirPath, filenameWithExtension)
|
|
}
|
|
|
|
canvas.toBlob((result) => {
|
|
result.arrayBuffer().then(ab => {
|
|
const arr = new Uint8Array(ab)
|
|
|
|
fs.writeFile(filePath, arr)
|
|
.then(() => {
|
|
showToast(this.$t('Screenshot Success', { filePath }))
|
|
})
|
|
.catch((err) => {
|
|
console.error(err)
|
|
showToast(this.$t('Screenshot Error', { error: err }))
|
|
})
|
|
})
|
|
}, mimeType, imageQuality)
|
|
canvas.remove()
|
|
},
|
|
|
|
createDashQualitySelector: function (levels) {
|
|
const currentAdaptiveFormat = this.currentAdaptiveFormat
|
|
const adaptiveFormats = this.adaptiveFormats
|
|
const activeAdaptiveFormats = this.activeAdaptiveFormats
|
|
const setDashQualityLevel = this.setDashQualityLevel
|
|
const defaultQuality = this.defaultQuality
|
|
const defaultBitrate = this.selectedBitrate
|
|
const autoResolution = this.autoResolution
|
|
|
|
const VjsButton = videojs.getComponent('Button')
|
|
class dashQualitySelector extends VjsButton {
|
|
handleClick(event) {
|
|
if (!event.target.classList.contains('quality-item') && !event.target.classList.contains('vjs-menu-item-text')) {
|
|
return
|
|
}
|
|
const selectedQuality = event.target.innerText
|
|
const bitrate = selectedQuality === 'auto' ? 'auto' : parseInt(event.target.attributes.bitrate.value)
|
|
setDashQualityLevel(bitrate)
|
|
}
|
|
|
|
createControlTextEl(button) {
|
|
const beginningHtml = `<div class="vjs-quality-level-value">
|
|
<span id="vjs-current-quality">1080p</span>
|
|
</div>
|
|
<div class="vjs-quality-level-menu vjs-menu">
|
|
<ul class="vjs-menu-content" role="menu">`
|
|
const endingHtml = '</ul></div>'
|
|
|
|
const defaultIsAuto = defaultQuality === 'auto'
|
|
|
|
let qualityHtml = `<li class="vjs-menu-item quality-item ${defaultIsAuto ? 'quality-selected' : ''}" role="menuitemradio" tabindex="-1" aria-checked="false" aria-disabled="false">
|
|
<span class="vjs-menu-item-text">Auto</span>
|
|
<span class="vjs-control-text" aria-live="polite"></span>
|
|
</li>`
|
|
|
|
let currentQualityLabel
|
|
|
|
Array.from(levels).sort((a, b) => {
|
|
if (b.height === a.height) {
|
|
return b.bitrate - a.bitrate
|
|
} else {
|
|
return b.height - a.height
|
|
}
|
|
}).forEach((quality, index, array) => {
|
|
let fps
|
|
let qualityLabel
|
|
let bitrate
|
|
|
|
if (typeof adaptiveFormats !== 'undefined' && adaptiveFormats.length > 0) {
|
|
const adaptiveFormat = adaptiveFormats.find((format) => {
|
|
return format.bitrate === quality.bitrate
|
|
})
|
|
|
|
if (typeof adaptiveFormat === 'undefined') {
|
|
return
|
|
}
|
|
|
|
activeAdaptiveFormats.push(adaptiveFormat)
|
|
|
|
fps = adaptiveFormat.fps ? adaptiveFormat.fps : 30
|
|
qualityLabel = adaptiveFormat.qualityLabel ? adaptiveFormat.qualityLabel : quality.height + 'p'
|
|
bitrate = quality.bitrate
|
|
} else {
|
|
fps = 30
|
|
qualityLabel = quality.height + 'p'
|
|
bitrate = quality.bitrate
|
|
}
|
|
|
|
const isSelected = !defaultIsAuto && bitrate === defaultBitrate
|
|
|
|
if (isSelected) {
|
|
currentQualityLabel = qualityLabel
|
|
}
|
|
|
|
qualityHtml += `<li class="vjs-menu-item quality-item ${isSelected ? 'quality-selected' : ''}" role="menuitemradio" tabindex="-1" aria-checked="false" aria-disabled="false" fps="${fps}" bitrate="${bitrate}">
|
|
<span class="vjs-menu-item-text" fps="${fps}" bitrate="${bitrate}">${qualityLabel}</span>
|
|
<span class="vjs-control-text" aria-live="polite"></span>
|
|
</li>`
|
|
|
|
// Old logic, revert if needed.
|
|
/* let is60Fps = false
|
|
if (index < array.length - 1 && array[index + 1].height === quality.height) {
|
|
if (array[index + 1].bitrate < quality.bitrate) {
|
|
is60Fps = true
|
|
}
|
|
}
|
|
const qualityText = is60Fps ? quality.height + 'p60' : quality.height + 'p'
|
|
qualityHtml = qualityHtml + `<li class="vjs-menu-item quality-item" role="menuitemradio" tabindex="-1" aria-checked="false aria-disabled="false">
|
|
<span class="vjs-menu-item-text">${qualityText}</span>
|
|
<span class="vjs-control-text" aria-live="polite"></span>
|
|
</li>` */
|
|
})
|
|
// the default width is 3em which is too narrow for qualitly labels with fps e.g. 1080p60
|
|
button.style.width = '4em'
|
|
button.title = 'Select Quality'
|
|
button.innerHTML = beginningHtml + qualityHtml + endingHtml
|
|
|
|
let autoQualityLabel = 'auto'
|
|
if (currentAdaptiveFormat) {
|
|
autoQualityLabel += ` ${currentAdaptiveFormat.qualityLabel}`
|
|
} else if (autoResolution !== '') {
|
|
autoQualityLabel += ` ${autoResolution.split('x')[1]}p`
|
|
}
|
|
|
|
// For default auto, it may select a resolution before generating the quality buttons
|
|
button.querySelector('#vjs-current-quality').innerText = defaultIsAuto ? autoQualityLabel : currentQualityLabel
|
|
const vjsMenu = button.querySelector('.vjs-menu')
|
|
let isTapping = false
|
|
button.addEventListener('touchstart', () => {
|
|
isTapping = true
|
|
})
|
|
button.addEventListener('touchmove', () => {
|
|
// if they are moving, they cannot be tapping
|
|
isTapping = false
|
|
})
|
|
button.addEventListener('touchend', (e) => {
|
|
if (isTapping) {
|
|
button.focus()
|
|
// make it easier to toggle the vjs-menu on touch (hover css is inconsistent w/ touch)
|
|
if (!e.target.classList.contains('quality-item') && !e.target.classList.contains('vjs-menu-item-text')) {
|
|
vjsMenu.classList.toggle('vjs-lock-showing')
|
|
} else {
|
|
// hide the quality selector on select (just like the other quality selectors do on mobile)
|
|
vjsMenu.classList.remove('vjs-lock-showing')
|
|
}
|
|
this.handleClick(e)
|
|
isTapping = false
|
|
}
|
|
})
|
|
button.addEventListener('focusout', () => {
|
|
// remove class which shows the selector
|
|
vjsMenu.classList.remove('vjs-lock-showing')
|
|
})
|
|
button.classList.add('dash-selector')
|
|
|
|
return button.children[0]
|
|
}
|
|
}
|
|
|
|
videojs.registerComponent('dashQualitySelector', dashQualitySelector)
|
|
this.player.controlBar.addChild('dashQualitySelector', {}, this.player.controlBar.children_.length - 1)
|
|
},
|
|
|
|
sortCaptions: function (captionList) {
|
|
return captionList.sort((captionA, captionB) => {
|
|
const aCode = captionA.language_code.split('-') // ex. [en,US]
|
|
const bCode = captionB.language_code.split('-')
|
|
const aName = (captionA.label) // ex: english (auto-generated)
|
|
const bName = (captionB.label)
|
|
const aIsAutotranslated = captionA.is_autotranslated
|
|
const bIsAutotranslated = captionB.is_autotranslated
|
|
const userLocale = this.currentLocale.split('-') // ex. [en,US]
|
|
if (aCode[0] === userLocale[0]) { // caption a has same language as user's locale
|
|
if (bCode[0] === userLocale[0]) { // caption b has same language as user's locale
|
|
if (bName.search('auto') !== -1) {
|
|
// prefer caption a: b is auto-generated captions
|
|
return -1
|
|
} else if (aName.search('auto') !== -1) {
|
|
// prefer caption b: a is auto-generated captions
|
|
return 1
|
|
} else if (bIsAutotranslated) {
|
|
// prefer caption a: b is auto-translated captions
|
|
return -1
|
|
} else if (aIsAutotranslated) {
|
|
// prefer caption b: a is auto-translated captions
|
|
return 1
|
|
} else if (aCode[1] === userLocale[1]) {
|
|
// prefer caption a: caption a has same county code as user's locale
|
|
return -1
|
|
} else if (bCode[1] === userLocale[1]) {
|
|
// prefer caption b: caption b has same county code as user's locale
|
|
return 1
|
|
} else if (aCode[1] === undefined) {
|
|
// prefer caption a: no country code is better than wrong country code
|
|
return -1
|
|
} else if (bCode[1] === undefined) {
|
|
// prefer caption b: no country code is better than wrong country code
|
|
return 1
|
|
}
|
|
} else {
|
|
// prefer caption a: b does not match user's language
|
|
return -1
|
|
}
|
|
} else if (bCode[0] === userLocale[0]) {
|
|
// prefer caption b: a does not match user's language
|
|
return 1
|
|
}
|
|
// sort alphabetically
|
|
return aName.localeCompare(bName, this.currentLocale)
|
|
})
|
|
},
|
|
|
|
transformAndInsertCaptions: async function () {
|
|
let captionList
|
|
if (this.captionHybridList[0] instanceof Promise) {
|
|
captionList = await Promise.all(this.captionHybridList)
|
|
this.$emit('store-caption-list', captionList)
|
|
} else {
|
|
captionList = this.captionHybridList
|
|
}
|
|
|
|
this.sortCaptions(captionList).forEach((caption, i) =>
|
|
this.player.addRemoteTextTrack({
|
|
kind: 'subtitles',
|
|
src: caption.url,
|
|
srclang: caption.language_code,
|
|
label: caption.label,
|
|
type: caption.type,
|
|
default: i === 0 && this.enableSubtitlesByDefault
|
|
}, true)
|
|
)
|
|
},
|
|
|
|
toggleFullWindow: function () {
|
|
if (!this.player.isFullscreen_) {
|
|
if (this.player.isFullWindow) {
|
|
this.player.removeClass('vjs-full-screen')
|
|
this.player.isFullWindow = false
|
|
document.documentElement.style.overflow = this.player.docOrigOverflow
|
|
document.body.classList.remove('vjs-full-window')
|
|
document.getElementById('fullwindow').classList.remove('vjs-icon-fullwindow-exit')
|
|
this.player.trigger('exitFullWindow')
|
|
} else {
|
|
this.player.addClass('vjs-full-screen')
|
|
this.player.isFullscreen_ = false
|
|
this.player.isFullWindow = true
|
|
this.player.docOrigOverflow = document.documentElement.style.overflow
|
|
document.documentElement.style.overflow = 'hidden'
|
|
document.body.classList.add('vjs-full-window')
|
|
document.getElementById('fullwindow').classList.add('vjs-icon-fullwindow-exit')
|
|
this.player.trigger('enterFullWindow')
|
|
}
|
|
}
|
|
},
|
|
|
|
exitFullWindow: function () {
|
|
if (this.player.isFullWindow) {
|
|
this.player.isFullWindow = false
|
|
document.documentElement.style.overflow = this.player.docOrigOverflow
|
|
this.player.removeClass('vjs-full-screen')
|
|
document.body.classList.remove('vjs-full-window')
|
|
document.getElementById('fullwindow').classList.remove('vjs-icon-fullwindow-exit')
|
|
this.player.trigger('exitFullWindow')
|
|
}
|
|
},
|
|
|
|
toggleFullscreen: function () {
|
|
if (this.player.isFullscreen()) {
|
|
this.player.exitFullscreen()
|
|
} else {
|
|
this.player.requestFullscreen()
|
|
}
|
|
},
|
|
|
|
fullscreenOverlay: function () {
|
|
const title = document.title.replace('- FreeTube', '')
|
|
|
|
if (this.player.isFullscreen()) {
|
|
this.player.ready(() => {
|
|
this.player.overlay({
|
|
overlays: [{
|
|
showBackground: false,
|
|
content: title,
|
|
start: 'mousemove',
|
|
end: 'userinactive'
|
|
}]
|
|
})
|
|
})
|
|
} else {
|
|
this.player.ready(() => {
|
|
this.player.overlay({
|
|
overlays: [{
|
|
showBackground: false,
|
|
content: ' ',
|
|
start: 'play',
|
|
end: 'loadstart'
|
|
}]
|
|
})
|
|
})
|
|
}
|
|
},
|
|
|
|
toggleFullscreenClass: function () {
|
|
if (this.player.isFullscreen()) {
|
|
document.body.classList.add('vjs--full-screen-enabled')
|
|
} else {
|
|
document.body.classList.remove('vjs--full-screen-enabled')
|
|
}
|
|
},
|
|
|
|
handleTouchStart: function () {
|
|
this.usingTouch = true
|
|
},
|
|
|
|
handleMouseOver: function () {
|
|
// This addresses a discrepancy that only seems to occur in the mobile version of firefox
|
|
if (navigator.userAgent.search('Firefox') !== -1 && (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS)) { return }
|
|
this.usingTouch = false
|
|
},
|
|
|
|
toggleShowStatsModal: function () {
|
|
if (this.format !== 'dash') {
|
|
showToast(this.$t('Video.Stats.Video statistics are not available for legacy videos'))
|
|
} else {
|
|
this.showStatsModal = !this.showStatsModal
|
|
}
|
|
},
|
|
createStatsModal: function () {
|
|
const ModalDialog = videojs.getComponent('ModalDialog')
|
|
this.statsModal = new ModalDialog(this.player, {
|
|
temporary: false,
|
|
pauseOnOpen: false
|
|
})
|
|
this.statsModal.handleKeyDown_ = (event) => {
|
|
// the default handler prevents keyboard events propagating beyond the modal
|
|
// the modal should only handle the escape and tab key, all others should be handled by the player
|
|
if (event.key === 'Escape' || event.key === 'Tab') {
|
|
this.statsModal.handleKeyDown(event)
|
|
}
|
|
}
|
|
this.player.addChild(this.statsModal)
|
|
this.statsModal.el_.classList.add('statsModal')
|
|
this.statsModal.on('modalclose', () => {
|
|
this.showStatsModal = false
|
|
})
|
|
},
|
|
updateStatsContent: function () {
|
|
if (this.showStatsModal) {
|
|
this.statsModal.contentEl().innerHTML = this.getFormattedStats()
|
|
}
|
|
},
|
|
getFormattedStats: function () {
|
|
const currentVolume = this.player.muted() ? 0 : this.player.volume()
|
|
const volume = `${(currentVolume * 100).toFixed(0)}%`
|
|
const bandwidth = `${(this.playerStats.bandwidth / 1000).toFixed(2)}kbps`
|
|
const buffered = `${(this.player.bufferedPercent() * 100).toFixed(0)}%`
|
|
const droppedFrames = this.playerStats.videoPlaybackQuality.droppedVideoFrames
|
|
const totalFrames = this.playerStats.videoPlaybackQuality.totalVideoFrames
|
|
const frames = `${droppedFrames} / ${totalFrames}`
|
|
const resolution = this.selectedResolution === 'auto' ? `${this.autoResolution}@${this.autoFPS}fps (auto)` : `${this.selectedResolution}@${this.selectedFPS}fps`
|
|
const playerDimensions = `${this.playerStats.playerDimensions.width}x${this.playerStats.playerDimensions.height}`
|
|
const bitrate = this.selectedBitrate === 'auto' ? `${this.autoBitrate} (auto)` : this.selectedBitrate
|
|
const mimeType = this.selectedMimeType === 'auto' ? `${this.autoMimeType} (auto)` : this.selectedMimeType
|
|
const statsArray = [
|
|
[this.$t('Video.Stats.Video ID'), this.videoId],
|
|
[this.$t('Video.Stats.Resolution'), resolution],
|
|
[this.$t('Video.Stats.Player Dimensions'), playerDimensions],
|
|
[this.$t('Video.Stats.Bitrate'), bitrate],
|
|
[this.$t('Video.Stats.Volume'), volume],
|
|
[this.$t('Video.Stats.Bandwidth'), bandwidth],
|
|
[this.$t('Video.Stats.Buffered'), buffered],
|
|
[this.$t('Video.Stats.Dropped / Total Frames'), frames],
|
|
[this.$t('Video.Stats.Mimetype'), mimeType]
|
|
]
|
|
let listContentHTML = ''
|
|
|
|
statsArray.forEach((stat) => {
|
|
const content = `<p>${stat[0]}: ${stat[1]}</p>`
|
|
listContentHTML += content
|
|
})
|
|
return listContentHTML
|
|
},
|
|
|
|
/**
|
|
* determines whether the jump to the previous or next chapter
|
|
* with the the keyboard shortcuts, should be done
|
|
* first it checks whether there are any chapters (the array is also empty if chapters are hidden)
|
|
* it also checks that the approprate combination was used ALT/OPTION on macOS and CTRL everywhere else
|
|
* @param {KeyboardEvent} event the keyboard event
|
|
* @param {string} direction the direction of the jump either previous or next
|
|
* @returns {boolean}
|
|
*/
|
|
canChapterJump: function (event, direction) {
|
|
const currentChapter = this.currentChapterIndex
|
|
return this.chapters.length > 0 &&
|
|
(direction === 'previous' ? currentChapter > 0 : this.chapters.length - 1 !== currentChapter) &&
|
|
((process.platform !== 'darwin' && event.ctrlKey) ||
|
|
(process.platform === 'darwin' && event.metaKey))
|
|
},
|
|
|
|
playVideo(thenFunc = null) {
|
|
// It can be called in `setTimeout` & user can navigate to other pages before it runs
|
|
// Which makes `this.player` become `null`
|
|
if (this.player == null) { return }
|
|
|
|
let promise = this.player.play()
|
|
if (typeof thenFunc === 'function') {
|
|
promise = promise.then(thenFunc)
|
|
}
|
|
promise
|
|
.catch(err => {
|
|
if (EXPECTED_PLAY_RELATED_ERROR_MESSAGES.some(msg => err.message.includes(msg))) {
|
|
// Ignoring expected exception
|
|
// console.debug('Ignoring expected error')
|
|
// console.debug(err)
|
|
return
|
|
}
|
|
|
|
// Unexpected errors should be reported
|
|
console.error(err)
|
|
const errorMessage = this.$t('play() request Error (Click to copy)')
|
|
showToast(`${errorMessage}: ${err}`, 10000, () => {
|
|
copyToClipboard(err)
|
|
})
|
|
})
|
|
},
|
|
|
|
// This function should always be at the bottom of this file
|
|
/**
|
|
* @param {KeyboardEvent} event
|
|
*/
|
|
keyboardShortcutHandler: function (event) {
|
|
if (document.activeElement.classList.contains('ft-input') || event.altKey) {
|
|
return
|
|
}
|
|
|
|
// allow chapter jump keyboard shortcuts
|
|
if (event.ctrlKey && (process.platform === 'darwin' || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight'))) {
|
|
return
|
|
}
|
|
|
|
// allow copying text
|
|
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
|
|
return
|
|
}
|
|
|
|
if (this.player !== null) {
|
|
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 'J':
|
|
case 'j':
|
|
// Rewind by 2x the time-skip interval (in seconds)
|
|
event.preventDefault()
|
|
this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate() * 2)
|
|
break
|
|
case 'K':
|
|
case 'k':
|
|
// Toggle Play/Pause
|
|
event.preventDefault()
|
|
this.togglePlayPause()
|
|
break
|
|
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 'O':
|
|
case 'o':
|
|
// Decrease playback rate by 0.25x
|
|
event.preventDefault()
|
|
this.changePlayBackRate(-this.videoPlaybackRateInterval)
|
|
break
|
|
case 'P':
|
|
case 'p':
|
|
// Increase playback rate by 0.25x
|
|
event.preventDefault()
|
|
this.changePlayBackRate(this.videoPlaybackRateInterval)
|
|
break
|
|
case 'F':
|
|
case 'f':
|
|
// Toggle Fullscreen Playback
|
|
event.preventDefault()
|
|
this.toggleFullscreen()
|
|
break
|
|
case 'M':
|
|
case 'm':
|
|
// Toggle Mute
|
|
if (!event.metaKey) {
|
|
event.preventDefault()
|
|
this.toggleMute()
|
|
}
|
|
break
|
|
case 'C':
|
|
case 'c':
|
|
// Toggle Captions
|
|
event.preventDefault()
|
|
this.toggleCaptions()
|
|
break
|
|
case 'ArrowUp':
|
|
// Increase volume
|
|
event.preventDefault()
|
|
this.changeVolume(0.05)
|
|
break
|
|
case 'ArrowDown':
|
|
// Decrease Volume
|
|
event.preventDefault()
|
|
this.changeVolume(-0.05)
|
|
break
|
|
case 'ArrowLeft':
|
|
event.preventDefault()
|
|
if (this.canChapterJump(event, 'previous')) {
|
|
// Jump to the previous chapter
|
|
this.player.currentTime(this.chapters[this.currentChapterIndex - 1].startSeconds)
|
|
} else {
|
|
// Rewind by the time-skip interval (in seconds)
|
|
this.changeDurationBySeconds(-this.defaultSkipInterval * this.player.playbackRate())
|
|
}
|
|
break
|
|
case 'ArrowRight':
|
|
event.preventDefault()
|
|
if (this.canChapterJump(event, 'next')) {
|
|
// Jump to the next chapter
|
|
this.player.currentTime(this.chapters[this.currentChapterIndex + 1].startSeconds)
|
|
} else {
|
|
// Fast-Forward by the time-skip interval (in seconds)
|
|
this.changeDurationBySeconds(this.defaultSkipInterval * this.player.playbackRate())
|
|
}
|
|
break
|
|
case 'I':
|
|
case 'i':
|
|
event.preventDefault()
|
|
// Toggle Picture in Picture Mode
|
|
if (this.format !== 'audio' && !this.player.isInPictureInPicture()) {
|
|
this.player.requestPictureInPicture()
|
|
} else if (this.player.isInPictureInPicture()) {
|
|
this.player.exitPictureInPicture()
|
|
}
|
|
break
|
|
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()
|
|
|
|
const percentage = parseInt(event.key) / 10
|
|
const duration = this.player.duration()
|
|
const newTime = duration * percentage
|
|
|
|
this.player.currentTime(newTime)
|
|
break
|
|
}
|
|
case ',':
|
|
// Return to previous frame
|
|
this.framebyframe(-1)
|
|
break
|
|
case '.':
|
|
// Advance to next frame
|
|
this.framebyframe(1)
|
|
break
|
|
case 'D':
|
|
case 'd':
|
|
event.preventDefault()
|
|
this.toggleShowStatsModal()
|
|
break
|
|
case 'Escape':
|
|
// Exit full window
|
|
event.preventDefault()
|
|
this.exitFullWindow()
|
|
break
|
|
case 'S':
|
|
case 's':
|
|
// Toggle Full Window Mode
|
|
this.toggleFullWindow()
|
|
break
|
|
case 'T':
|
|
case 't':
|
|
// Toggle Theatre Mode
|
|
this.toggleTheatreMode()
|
|
break
|
|
case 'U':
|
|
case 'u':
|
|
// Take screenshot
|
|
this.takeScreenshot()
|
|
break
|
|
}
|
|
}
|
|
},
|
|
|
|
stopPowerSaveBlocker: function () {
|
|
if (process.env.IS_ELECTRON && this.powerSaveBlocker !== null) {
|
|
const { ipcRenderer } = require('electron')
|
|
ipcRenderer.send(IpcChannels.STOP_POWER_SAVE_BLOCKER, this.powerSaveBlocker)
|
|
this.powerSaveBlocker = null
|
|
}
|
|
},
|
|
|
|
...mapActions([
|
|
'updateDefaultCaptionSettings',
|
|
'parseScreenshotCustomFileName',
|
|
'updateScreenshotFolderPath',
|
|
])
|
|
}
|
|
})
|