"typescript": "~4.3.4",
"video.js": "^7",
"videojs-contextmenu-pt": "^5.4.1",
- "videojs-contrib-quality-levels": "^2.0.9",
"videojs-dock": "^2.0.2",
"videojs-hotkeys": "^0.2.27",
"videostream": "~3.2.1",
// Thanks https://github.com/streamroot/videojs-hlsjs-plugin
// We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file
-import Hlsjs, { ErrorData, HlsConfig, Level, ManifestLoadedData } from 'hls.js'
+import Hlsjs, { ErrorData, HlsConfig, Level, LevelSwitchingData, ManifestParsedData } from 'hls.js'
import videojs from 'video.js'
-import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
+import { HlsjsConfigHandlerOptions, PeerTubeResolution, VideoJSTechHLS } from '../peertube-videojs-typings'
type ErrorCounts = {
[ type: string ]: number
private dvrDuration: number = null
private edgeMargin: number = null
- private handlers: { [ id in 'play' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
- play: null,
- playing: null,
- textTracksChange: null,
- audioTracksChange: null
+ private handlers: { [ id in 'play' ]: EventListener } = {
+ play: null
}
- private uiTextTrackHandled = false
-
constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
this.vjs = vjs
this.source = source
// See comment for `initialize` method.
dispose () {
this.videoElement.removeEventListener('play', this.handlers.play)
- this.videoElement.removeEventListener('playing', this.handlers.playing)
-
- this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
- this.uiTextTrackHandled = false
this.hls.destroy()
}
}
}
- private switchQuality (qualityId: number) {
- this.hls.currentLevel = qualityId
- }
-
- private _levelLabel (level: Level) {
+ private buildLevelLabel (level: Level) {
if (this.player.srOptions_.levelLabelHandler) {
return this.player.srOptions_.levelLabelHandler(level as any)
}
if (level.width) return Math.round(level.width * 9 / 16) + 'p'
if (level.bitrate) return (level.bitrate / 1000) + 'kbps'
- return 0
- }
-
- private _relayQualityChange (qualityLevels: QualityLevels) {
- // Determine if it is "Auto" (all tracks enabled)
- let isAuto = true
-
- for (let i = 0; i < qualityLevels.length; i++) {
- if (!qualityLevels[i]._enabled) {
- isAuto = false
- break
- }
- }
-
- // Interact with ME
- if (isAuto) {
- this.hls.currentLevel = -1
- return
- }
-
- // Find ID of highest enabled track
- let selectedTrack: number
-
- for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
- if (qualityLevels[selectedTrack]._enabled) {
- break
- }
- }
-
- this.hls.currentLevel = selectedTrack
- }
-
- private _handleQualityLevels () {
- if (!this.metadata) return
-
- const qualityLevels = this.player.qualityLevels?.()
- if (!qualityLevels) return
-
- for (let i = 0; i < this.metadata.levels.length; i++) {
- const details = this.metadata.levels[i]
- const representation: QualityLevelRepresentation = {
- id: i,
- width: details.width,
- height: details.height,
- bandwidth: details.bitrate,
- bitrate: details.bitrate,
- _enabled: true
- }
-
- const self = this
- representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
- // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
- if (typeof toggle === 'boolean') {
- this[level]._enabled = toggle
- self._relayQualityChange(this)
- }
-
- return this[level]._enabled
- }
-
- qualityLevels.addQualityLevel(representation)
- }
+ return '0'
}
private _notifyVideoQualities () {
if (!this.metadata) return
- const cleanTracklist = []
- if (this.metadata.levels.length > 1) {
- const autoLevel = {
- id: -1,
- label: 'auto',
- selected: this.hls.manualLevel === -1
- }
- cleanTracklist.push(autoLevel)
- }
+ const resolutions: PeerTubeResolution[] = []
this.metadata.levels.forEach((level, index) => {
- // Don't write in level (shared reference with Hls.js)
- const quality = {
+ resolutions.push({
id: index,
- selected: index === this.hls.manualLevel,
- label: this._levelLabel(level)
- }
-
- cleanTracklist.push(quality)
+ height: level.height,
+ width: level.width,
+ bitrate: level.bitrate,
+ label: this.buildLevelLabel(level),
+ selected: level.id === this.hls.manualLevel,
+
+ selectCallback: () => {
+ this.hls.currentLevel = index
+ }
+ })
})
- const payload = {
- qualityData: { video: cleanTracklist },
- qualitySwitchCallback: this.switchQuality.bind(this)
- }
-
- this.tech.trigger('loadedqualitydata', payload)
-
- // Self-de-register so we don't raise the payload multiple times
- this.videoElement.removeEventListener('playing', this.handlers.playing)
- }
-
- private _updateSelectedAudioTrack () {
- const playerAudioTracks = this.tech.audioTracks()
- for (let j = 0; j < playerAudioTracks.length; j++) {
- // FIXME: typings
- if ((playerAudioTracks[j] as any).enabled) {
- this.hls.audioTrack = j
- break
- }
- }
- }
-
- private _onAudioTracks () {
- const hlsAudioTracks = this.hls.audioTracks
- const playerAudioTracks = this.tech.audioTracks()
-
- if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) {
- // Add Hls.js audio tracks if not added yet
- for (let i = 0; i < hlsAudioTracks.length; i++) {
- playerAudioTracks.addTrack(new this.vjs.AudioTrack({
- id: i.toString(),
- kind: 'alternative',
- label: hlsAudioTracks[i].name || hlsAudioTracks[i].lang,
- language: hlsAudioTracks[i].lang,
- enabled: i === this.hls.audioTrack
- }))
- }
-
- // Handle audio track change event
- this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
- playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
- }
- }
-
- private _getTextTrackLabel (textTrack: TextTrack) {
- // Label here is readable label and is optional (used in the UI so if it is there it should be different)
- return textTrack.label ? textTrack.label : textTrack.language
- }
-
- private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
- return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2) &&
- track1.kind === track2.kind
- }
-
- private _updateSelectedTextTrack () {
- const playerTextTracks = this.player.textTracks()
- let activeTrack: TextTrack = null
-
- for (let j = 0; j < playerTextTracks.length; j++) {
- if (playerTextTracks[j].mode === 'showing') {
- activeTrack = playerTextTracks[j]
- break
- }
- }
+ resolutions.push({
+ id: -1,
+ label: this.player.localize('Auto'),
+ selected: true,
+ selectCallback: () => this.hls.currentLevel = -1
+ })
- const hlsjsTracks = this.videoElement.textTracks
- for (let k = 0; k < hlsjsTracks.length; k++) {
- if (hlsjsTracks[k].kind === 'subtitles' || hlsjsTracks[k].kind === 'captions') {
- hlsjsTracks[k].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[k], activeTrack)
- ? 'showing'
- : 'disabled'
- }
- }
+ this.player.peertubeResolutions().add(resolutions)
}
private _startLoad () {
return result
}
- private _filterDisplayableTextTracks (textTracks: TextTrackList) {
- const displayableTracks = []
-
- // Filter out tracks that is displayable (captions or subtitles)
- for (let idx = 0; idx < textTracks.length; idx++) {
- if (textTracks[idx].kind === 'subtitles' || textTracks[idx].kind === 'captions') {
- displayableTracks.push(textTracks[idx])
- }
- }
-
- return displayableTracks
- }
-
- private _updateTextTrackList () {
- const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
- const playerTextTracks = this.player.textTracks()
-
- // Add stubs to make the caption switcher shows up
- // Adding the Hls.js text track in will make us have double captions
- for (let idx = 0; idx < displayableTracks.length; idx++) {
- let isAdded = false
-
- for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
- if (this._isSameTextTrack(displayableTracks[idx], playerTextTracks[jdx])) {
- isAdded = true
- break
- }
- }
-
- if (!isAdded) {
- const hlsjsTextTrack = displayableTracks[idx]
- this.player.addRemoteTextTrack({
- kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
- label: this._getTextTrackLabel(hlsjsTextTrack),
- language: hlsjsTextTrack.language,
- srclang: hlsjsTextTrack.language
- }, false)
- }
- }
-
- // Handle UI switching
- this._updateSelectedTextTrack()
-
- if (!this.uiTextTrackHandled) {
- this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
- playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
-
- this.uiTextTrackHandled = true
- }
- }
-
- private _onMetaData (_event: any, data: ManifestLoadedData) {
+ private _onMetaData (_event: any, data: ManifestParsedData) {
// This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
- this.metadata = data as any
- this._handleQualityLevels()
- }
-
- private _createCueHandler (captionConfig: any) {
- return {
- newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
- let row: any
- let cue: VTTCue
- let text: string
- const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
-
- for (let r = 0; r < captionScreen.rows.length; r++) {
- row = captionScreen.rows[r]
- text = ''
-
- if (!row.isEmpty()) {
- for (let c = 0; c < row.chars.length; c++) {
- text += row.chars[c].ucharj
- }
-
- cue = new VTTCue(startTime, endTime, text.trim())
-
- // typeof null === 'object'
- if (captionConfig != null && typeof captionConfig === 'object') {
- // Copy client overridden property into the cue object
- const configKeys = Object.keys(captionConfig)
-
- for (let k = 0; k < configKeys.length; k++) {
- cue[configKeys[k]] = captionConfig[configKeys[k]]
- }
- }
- track.addCue(cue)
- if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
- }
- }
- }
- }
+ this.metadata = data
+ this._notifyVideoQualities()
}
private _initHlsjs () {
this.hlsjsConfig.autoStartLoad = false
}
- const captionConfig = srOptions_?.captionConfig || techOptions.captionConfig
- if (captionConfig) {
- this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
- }
-
// If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above
// That's why we have a separate if block here to set the 'play' listener
if (this.hlsjsConfig.autoStartLoad === false) {
this.videoElement.addEventListener('play', this.handlers.play)
}
- // _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher
- this.handlers.playing = this._notifyVideoQualities.bind(this)
- this.videoElement.addEventListener('playing', this.handlers.playing)
-
this.hls = new Hlsjs(this.hlsjsConfig)
this._executeHooksFor('beforeinitialize')
this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data))
- this.hls.on(Hlsjs.Events.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks())
- this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings
+ this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data))
this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => {
// The DVR plugin will auto seek to "live edge" on start up
if (this.hlsjsConfig.liveSyncDuration) {
this.dvrDuration = data.details.totalduration
this._duration = this.isLive ? Infinity : data.details.totalduration
})
+
this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
// Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls`
// Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata
this.tech.trigger('loadedmetadata')
})
+ this.hls.on(Hlsjs.Events.LEVEL_SWITCHING, (_e, data: LevelSwitchingData) => {
+ const resolutionId = this.hls.autoLevelEnabled
+ ? -1
+ : data.level
+
+ const autoResolutionChosenId = this.hls.autoLevelEnabled
+ ? data.level
+ : -1
+
+ this.player.peertubeResolutions().select({ id: resolutionId, autoResolutionChosenId, byEngine: true })
+ })
+
this.hls.attachMedia(this.videoElement)
this.hls.loadSource(this.source.src)
const options = this.player.tech(true).options_ as any
this.p2pEngine = options.hlsjsConfig.loader.getEngine()
- this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
- this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
- })
-
- this.hlsjs.on(Hlsjs.Events.MANIFEST_LOADED, (_: any, data: any) => {
- this.trigger('resolutionsLoaded')
- })
-
this.p2pEngine.on(Events.SegmentError, (segment: Segment, err) => {
console.error('Segment error.', segment, err)
import 'videojs-hotkeys/videojs.hotkeys'
import 'videojs-dock'
import 'videojs-contextmenu-pt'
-import 'videojs-contrib-quality-levels'
import './upnext/end-card'
import './upnext/upnext-plugin'
import './stats/stats-card'
import './stats/stats-plugin'
import './bezels/bezels-plugin'
import './peertube-plugin'
+import './peertube-resolutions-plugin'
import './videojs-components/next-previous-video-button'
import './videojs-components/p2p-info-button'
import './videojs-components/peertube-link-button'
-import './videojs-components/settings-menu-button'
import videojs from 'video.js'
import { timeToInt } from '@shared/core-utils'
import {
saveVideoWatchHistory,
saveVolumeInStore
} from './peertube-player-local-storage'
-import { PeerTubePluginOptions, ResolutionUpdateData, UserWatching, VideoJSCaption } from './peertube-videojs-typings'
+import { PeerTubePluginOptions, UserWatching, VideoJSCaption } from './peertube-videojs-typings'
import { isMobile } from './utils'
const Plugin = videojs.getPlugin('plugin')
private videoViewInterval: any
private userWatchingVideoInterval: any
- private lastResolutionChange: ResolutionUpdateData
private isLive: boolean
this.player.ready(() => {
const playerOptions = this.player.options_
- if (options.mode === 'webtorrent') {
- this.player.webtorrent().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
- this.player.webtorrent().on('autoResolutionChange', (_: any, d: any) => this.trigger('autoResolutionChange', d))
- }
-
- if (options.mode === 'p2p-media-loader') {
- this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
- }
-
- this.player.tech(true).on('loadedqualitydata', () => {
- setTimeout(() => {
- // Replay a resolution change, now we loaded all quality data
- if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange)
- }, 0)
- })
-
const volume = getStoredVolume()
if (volume !== undefined) this.player.volume(volume)
})
}
- this.player.textTracks().on('change', () => {
+ this.player.textTracks().addEventListener('change', () => {
const showing = this.player.textTracks().tracks_.find(t => {
return t.kind === 'captions' && t.mode === 'showing'
})
return fetch(url, { method: 'PUT', body, headers })
}
- private handleResolutionChange (data: ResolutionUpdateData) {
- this.lastResolutionChange = data
-
- const qualityLevels = this.player.qualityLevels()
-
- for (let i = 0; i < qualityLevels.length; i++) {
- if (qualityLevels[i].height === data.resolutionId) {
- data.id = qualityLevels[i].id
- break
- }
- }
-
- console.log('Resolution changed.', data)
- this.trigger('resolutionChange', data)
- }
-
private listenControlBarMouse () {
this.player.controlBar.on('mouseenter', () => {
this.mouseInControlBar = true
--- /dev/null
+import videojs from 'video.js'
+import { PeerTubeResolution } from './peertube-videojs-typings'
+
+const Plugin = videojs.getPlugin('plugin')
+
+class PeerTubeResolutionsPlugin extends Plugin {
+ private currentSelection: PeerTubeResolution
+ private resolutions: PeerTubeResolution[] = []
+
+ private autoResolutionChosenId: number
+ private autoResolutionEnabled = true
+
+ add (resolutions: PeerTubeResolution[]) {
+ for (const r of resolutions) {
+ this.resolutions.push(r)
+ }
+
+ this.currentSelection = this.getSelected()
+
+ this.sort()
+ this.trigger('resolutionsAdded')
+ }
+
+ getResolutions () {
+ return this.resolutions
+ }
+
+ getSelected () {
+ return this.resolutions.find(r => r.selected)
+ }
+
+ getAutoResolutionChosen () {
+ return this.resolutions.find(r => r.id === this.autoResolutionChosenId)
+ }
+
+ select (options: {
+ id: number
+ byEngine: boolean
+ autoResolutionChosenId?: number
+ }) {
+ const { id, autoResolutionChosenId, byEngine } = options
+
+ if (this.currentSelection?.id === id && this.autoResolutionChosenId === autoResolutionChosenId) return
+
+ this.autoResolutionChosenId = autoResolutionChosenId
+
+ for (const r of this.resolutions) {
+ r.selected = r.id === id
+
+ if (r.selected) {
+ this.currentSelection = r
+
+ if (!byEngine) r.selectCallback()
+ }
+ }
+
+ this.trigger('resolutionChanged')
+ }
+
+ disableAutoResolution () {
+ this.autoResolutionEnabled = false
+ this.trigger('autoResolutionEnabledChanged')
+ }
+
+ enabledAutoResolution () {
+ this.autoResolutionEnabled = true
+ this.trigger('autoResolutionEnabledChanged')
+ }
+
+ isAutoResolutionEnabeld () {
+ return this.autoResolutionEnabled
+ }
+
+ private sort () {
+ this.resolutions.sort((a, b) => {
+ if (a.id === -1) return 1
+ if (b.id === -1) return -1
+
+ if (a.height > b.height) return -1
+ if (a.height === b.height) return 0
+ return 1
+ })
+ }
+
+}
+
+videojs.registerPlugin('peertubeResolutions', PeerTubeResolutionsPlugin)
+export { PeerTubeResolutionsPlugin }
-// FIXME: lint
-/* eslint-disable @typescript-eslint/ban-types */
-
import { HlsConfig, Level } from 'hls.js'
import videojs from 'video.js'
import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
import { PlayerMode } from './peertube-player-manager'
import { PeerTubePlugin } from './peertube-plugin'
+import { PeerTubeResolutionsPlugin } from './peertube-resolutions-plugin'
import { PlaylistPlugin } from './playlist/playlist-plugin'
-import { EndCardOptions } from './upnext/end-card'
import { StatsCardOptions } from './stats/stats-card'
-import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
import { StatsForNerdsPlugin } from './stats/stats-plugin'
+import { EndCardOptions } from './upnext/end-card'
+import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
declare module 'video.js' {
p2pMediaLoader (): P2pMediaLoaderPlugin
+ peertubeResolutions (): PeerTubeResolutionsPlugin
+
contextmenuUI (options: any): any
bezels (): void
stats (options?: StatsCardOptions): StatsForNerdsPlugin
- qualityLevels (): QualityLevels
-
textTracks (): TextTrackList & {
- on: Function
tracks_: (TextTrack & { id: string, label: string, src: string })[]
}
levelLabelHandler?: (level: Level) => string
}
-type QualityLevelRepresentation = {
+type PeerTubeResolution = {
id: number
- height: number
+ height?: number
label?: string
width?: number
- bandwidth?: number
bitrate?: number
- enabled?: Function
- _enabled: boolean
-}
-
-type QualityLevels = QualityLevelRepresentation[] & {
- selectedIndex: number
- selectedIndex_: number
-
- addQualityLevel (representation: QualityLevelRepresentation): void
+ selected: boolean
+ selectCallback: () => void
}
type VideoJSCaption = {
type NextPreviousVideoButtonOptions = {
type: 'next' | 'previous'
- handler: Function
+ handler: () => void
isDisabled: () => boolean
}
type PlaylistItemOptions = {
element: VideoPlaylistElement
- onClicked: Function
+ onClicked: () => void
}
export {
PeerTubePluginOptions,
WebtorrentPluginOptions,
P2PMediaLoaderPluginOptions,
+ PeerTubeResolution,
VideoJSPluginOptions,
LoadedQualityData,
- QualityLevelRepresentation,
- PeerTubeLinkButtonOptions,
- QualityLevels
+ PeerTubeLinkButtonOptions
}
import videojs from 'video.js'
-
-import { LoadedQualityData } from '../peertube-videojs-typings'
import { ResolutionMenuItem } from './resolution-menu-item'
const Menu = videojs.getComponent('Menu')
this.controlText('Quality')
- player.tech(true).on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+ player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
- player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
+ // For parent
+ player.peertubeResolutions().on('resolutionChanged', () => {
+ setTimeout(() => this.trigger('labelUpdated'))
+ })
}
createEl () {
})
}
- private buildQualities (data: LoadedQualityData) {
- // The automatic resolution item will need other labels
- const labels: { [ id: number ]: string } = {}
-
- data.qualityData.video.sort((a, b) => {
- if (a.id > b.id) return -1
- if (a.id === b.id) return 0
- return 1
- })
-
- for (const d of data.qualityData.video) {
- // Skip auto resolution, we'll add it ourselves
- if (d.id === -1) continue
-
+ private buildQualities () {
+ for (const d of this.player().peertubeResolutions().getResolutions()) {
const label = d.label === '0p'
? this.player().localize('Audio-only')
: d.label
{
id: d.id,
label,
- selected: d.selected,
- callback: data.qualitySwitchCallback
+ selected: d.selected
})
)
-
- labels[d.id] = d.label
}
- this.menu.addChild(new ResolutionMenuItem(
- this.player_,
- {
- id: -1,
- label: this.player_.localize('Auto'),
- labels,
- callback: data.qualitySwitchCallback,
- selected: true // By default, in auto mode
- }
- ))
-
for (const m of this.menu.children()) {
this.addClickListener(m)
}
import videojs from 'video.js'
-import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings'
const MenuItem = videojs.getComponent('MenuItem')
export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions {
- labels?: { [id: number]: string }
id: number
- callback: (resolutionId: number, type: 'video') => void
}
class ResolutionMenuItem extends MenuItem {
private readonly resolutionId: number
private readonly label: string
- // Only used for the automatic item
- private readonly labels: { [id: number]: string }
- private readonly callback: (resolutionId: number, type: 'video') => void
- private autoResolutionPossible: boolean
- private currentResolutionLabel: string
+ private autoResolutionEnabled: boolean
+ private autoResolutionChosen: string
constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
options.selectable = true
super(player, options)
- this.autoResolutionPossible = true
- this.currentResolutionLabel = ''
+ this.autoResolutionEnabled = true
+ this.autoResolutionChosen = ''
this.resolutionId = options.id
this.label = options.label
- this.labels = options.labels
- this.callback = options.callback
- player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data))
+ player.peertubeResolutions().on('resolutionChanged', () => this.updateSelection())
// We only want to disable the "Auto" item
if (this.resolutionId === -1) {
- player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data))
+ player.peertubeResolutions().on('autoResolutionEnabledChanged', () => this.updateAutoResolution())
}
}
handleClick (event: any) {
// Auto button disabled?
- if (this.autoResolutionPossible === false && this.resolutionId === -1) return
+ if (this.autoResolutionEnabled === false && this.resolutionId === -1) return
super.handleClick(event)
- this.callback(this.resolutionId, 'video')
+ this.player().peertubeResolutions().select({ id: this.resolutionId, byEngine: false })
}
- updateSelection (data: ResolutionUpdateData) {
- if (this.resolutionId === -1) {
- this.currentResolutionLabel = this.labels[data.id]
- }
+ updateSelection () {
+ const selectedResolution = this.player().peertubeResolutions().getSelected()
- // Automatic resolution only
- if (data.auto === true) {
- this.selected(this.resolutionId === -1)
- return
+ if (this.resolutionId === -1) {
+ this.autoResolutionChosen = this.player().peertubeResolutions().getAutoResolutionChosen()?.label
}
- this.selected(this.resolutionId === data.id)
+ this.selected(this.resolutionId === selectedResolution.id)
}
- updateAutoResolution (data: AutoResolutionUpdateData) {
+ updateAutoResolution () {
+ const enabled = this.player().peertubeResolutions().isAutoResolutionEnabeld()
+
// Check if the auto resolution is enabled or not
- if (data.possible === false) {
+ if (enabled === false) {
this.addClass('disabled')
} else {
this.removeClass('disabled')
}
- this.autoResolutionPossible = data.possible
+ this.autoResolutionEnabled = enabled
}
getLabel () {
if (this.resolutionId === -1) {
- return this.label + ' <small>' + this.currentResolutionLabel + '</small>'
+ return this.label + ' <small>' + this.autoResolutionChosen + '</small>'
}
return this.label
}
build () {
- this.subMenu.on('updateLabel', () => {
+ this.subMenu.on('labelUpdated', () => {
this.update()
})
this.subMenu.on('menuChanged', () => {
getStoredVolume,
saveAverageBandwidth
} from '../peertube-player-local-storage'
-import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
+import { PeerTubeResolution, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
import { getRtcConfig, isIOS, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
import { PeertubeChunkStore } from './peertube-chunk-store'
import { renderVideo } from './video-renderer'
return done()
})
- this.changeQuality()
- this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.currentVideoFile.resolution.id })
+ this.selectAppropriateResolution(true)
}
updateResolution (resolutionId: number, delay = 0) {
}
}
- enableAutoResolution () {
- this.autoResolution = true
- this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.getCurrentResolutionId() })
- }
-
- disableAutoResolution (forbid = false) {
- if (forbid === true) this.autoResolutionPossible = false
-
+ disableAutoResolution () {
this.autoResolution = false
- this.trigger('autoResolutionChange', { possible: this.autoResolutionPossible })
- this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.getCurrentResolutionId() })
+ this.autoResolutionPossible = false
+ this.player.peertubeResolutions().disableAutoResolution()
}
isAutoResolutionPossible () {
private fallbackToHttp (options: PlayOptions, done?: (err?: Error) => void) {
const paused = this.player.paused()
- this.disableAutoResolution(true)
+ this.disableAutoResolution()
this.flushVideoFile(this.currentVideoFile, true)
this.torrent = null
this.player.src = this.savePlayerSrcFunction
this.player.src(httpUrl)
- this.changeQuality()
+ this.selectAppropriateResolution(true)
// We changed the source, so reinit captions
this.player.trigger('sourcechange')
}
private buildQualities () {
- const qualityLevelsPayload = []
-
- for (const file of this.videoFiles) {
- const representation = {
- id: file.resolution.id,
- label: this.buildQualityLabel(file),
- height: file.resolution.id,
- _enabled: true
- }
-
- this.player.qualityLevels().addQualityLevel(representation)
-
- qualityLevelsPayload.push({
- id: representation.id,
- label: representation.label,
- selected: false
- })
- }
+ const resolutions: PeerTubeResolution[] = this.videoFiles.map(file => ({
+ id: file.resolution.id,
+ label: this.buildQualityLabel(file),
+ height: file.resolution.id,
+ selected: false,
+ selectCallback: () => this.qualitySwitchCallback(file.resolution.id)
+ }))
+
+ resolutions.push({
+ id: -1,
+ label: this.player.localize('Auto'),
+ selected: true,
+ selectCallback: () => this.qualitySwitchCallback(-1)
+ })
- const payload: LoadedQualityData = {
- qualitySwitchCallback: (d: any) => this.qualitySwitchCallback(d),
- qualityData: {
- video: qualityLevelsPayload
- }
- }
- this.player.tech(true).trigger('loadedqualitydata', payload)
+ this.player.peertubeResolutions().add(resolutions)
}
private buildQualityLabel (file: VideoFile) {
private qualitySwitchCallback (id: number) {
if (id === -1) {
- if (this.autoResolutionPossible === true) this.enableAutoResolution()
+ if (this.autoResolutionPossible === true) {
+ this.autoResolution = true
+
+ this.selectAppropriateResolution(false)
+ }
+
return
}
- this.disableAutoResolution()
+ this.autoResolution = false
this.updateResolution(id)
+ this.selectAppropriateResolution(false)
}
- private changeQuality () {
- const resolutionId = this.currentVideoFile.resolution.id as number
- const qualityLevels = this.player.qualityLevels()
+ private selectAppropriateResolution (byEngine: boolean) {
+ const resolution = this.autoResolution
+ ? -1
+ : this.getCurrentResolutionId()
- if (resolutionId === -1) {
- qualityLevels.selectedIndex = -1
- return
- }
+ const autoResolutionChosen = this.autoResolution
+ ? this.getCurrentResolutionId()
+ : undefined
- for (let i = 0; i < qualityLevels.length; i++) {
- const q = qualityLevels[i]
- if (q.height === resolutionId) qualityLevels.selectedIndex_ = i
- }
+ this.player.peertubeResolutions().select({ id: resolution, autoResolutionChosenId: autoResolutionChosen, byEngine })
}
}
})
// PeerTube specific capabilities
- if (this.isWebtorrent()) {
- this.embed.player.webtorrent().on('autoResolutionUpdate', () => this.loadWebTorrentResolutions())
- this.embed.player.webtorrent().on('videoFileUpdate', () => this.loadWebTorrentResolutions())
-
- this.loadWebTorrentResolutions()
- } else {
- this.embed.player.p2pMediaLoader().on('resolutionChange', () => this.loadP2PMediaLoaderResolutions())
- this.embed.player.p2pMediaLoader().on('resolutionsLoaded', () => this.loadP2PMediaLoaderResolutions())
- }
+ this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
+ this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
this.embed.player.on('volumechange', () => {
this.channel.notify({
})
}
- private loadP2PMediaLoaderResolutions () {
- this.resolutions = []
-
- const qualityLevels = this.embed.player.qualityLevels()
- const currentResolutionId = this.embed.player.qualityLevels().selectedIndex
-
- for (let i = 0; i < qualityLevels.length; i++) {
- const level = qualityLevels[i]
-
- this.resolutions.push({
- id: level.id,
- label: level.height + 'p',
- active: level.id === currentResolutionId,
- width: level.width,
- height: level.height
- })
- }
+ private loadResolutions () {
+ this.resolutions = this.embed.player.peertubeResolutions().getResolutions()
+ .map(r => ({
+ id: r.id,
+ label: r.height + 'p',
+ active: r.selected,
+ width: r.width,
+ height: r.height
+ }))
this.channel.notify({
method: 'resolutionUpdate',
global "^4.4.0"
video.js "^7.6.0"
-videojs-contrib-quality-levels@^2.0.9:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-2.1.0.tgz#046e9e21ed01043f512b83a1916001d552457083"
- integrity sha512-dqGQGbL9AFhucxki7Zh0c3kIhH0PAPcHEh6jUdRyaFCVeOuqnJrOYs/3wNtsokDdBdRf2Du2annpu4Z2XaSZRg==
- dependencies:
- global "^4.3.2"
- video.js "^6 || ^7"
-
videojs-dock@^2.0.2:
version "2.2.0"
resolved "https://registry.yarnpkg.com/videojs-dock/-/videojs-dock-2.2.0.tgz#57e4f942da1b8e930c4387fed85942473bc40829"
projects / github / Chocobozzz / PeerTube.git / commitdiff
