From 83fcadac86da0bc6120a5b93850bb9a7fc069fba Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 31 Jan 2020 11:39:50 +0100 Subject: [PATCH] Move streamroot plugin in core project To avoid an already bundled HLS.js library, and adapt some parts of the code --- client/package.json | 1 - .../player/p2p-media-loader/hls-plugin.ts | 626 ++++++++++++++++++ .../p2p-media-loader-plugin.ts | 13 +- .../assets/player/peertube-player-manager.ts | 8 +- .../assets/player/peertube-videojs-typings.ts | 57 +- client/yarn.lock | 5 - 6 files changed, 680 insertions(+), 30 deletions(-) create mode 100644 client/src/assets/player/p2p-media-loader/hls-plugin.ts diff --git a/client/package.json b/client/package.json index ef0e8c03f..66e8990f9 100644 --- a/client/package.json +++ b/client/package.json @@ -56,7 +56,6 @@ "@ngx-loading-bar/router": "^4.2.0", "@ngx-meta/core": "^7.0.0", "@ngx-translate/i18n-polyfill": "^1.0.0", - "@streamroot/videojs-hlsjs-plugin": "^1.0.10", "@types/core-js": "^2.5.2", "@types/debug": "^4.1.5", "@types/hls.js": "^0.12.4", diff --git a/client/src/assets/player/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/p2p-media-loader/hls-plugin.ts new file mode 100644 index 000000000..d78e1ab90 --- /dev/null +++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts @@ -0,0 +1,626 @@ +// 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 * as Hlsjs from 'hls.js' +import videojs, { VideoJsPlayer } from 'video.js' +import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings' + +type ErrorCounts = { + [ type: string ]: number +} + +type Metadata = { + levels: Hlsjs.Level[] +} + +const registerSourceHandler = function (vjs: typeof videojs) { + if (!Hlsjs.isSupported()) { + console.warn('Hls.js is not supported in this browser!') + return + } + + const html5 = vjs.getTech('Html5') + + if (!html5) { + console.error('Not supported version if video.js') + return + } + + // FIXME: typings + (html5 as any).registerSourceHandler({ + canHandleSource: function (source: videojs.Tech.SourceObject) { + const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i + const hlsExtRE = /\.m3u8/i + + if (hlsTypeRE.test(source.type)) return 'probably' + if (hlsExtRE.test(source.src)) return 'maybe' + + return '' + }, + + handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) { + if (tech.hlsProvider) { + tech.hlsProvider.dispose() + } + + tech.hlsProvider = new Html5Hlsjs(vjs, source, tech) + + return tech.hlsProvider + } + }, 0); + + // FIXME: typings + (vjs as any).Html5Hlsjs = Html5Hlsjs +} + +function hlsjsConfigHandler (this: VideoJsPlayer, options: HlsjsConfigHandlerOptions) { + const player = this + + if (!options) return + + if (!player.srOptions_) { + player.srOptions_ = {} + } + + if (!player.srOptions_.hlsjsConfig) { + player.srOptions_.hlsjsConfig = options.hlsjsConfig + } + + if (!player.srOptions_.captionConfig) { + player.srOptions_.captionConfig = options.captionConfig + } + + if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) { + player.srOptions_.levelLabelHandler = options.levelLabelHandler + } +} + +const registerConfigPlugin = function (vjs: typeof videojs) { + // Used in Brightcove since we don't pass options directly there + const registerVjsPlugin = vjs.registerPlugin || vjs.plugin + registerVjsPlugin('hlsjs', hlsjsConfigHandler) +} + +class Html5Hlsjs { + private static readonly hooks: { [id: string]: Function[] } = {} + + private readonly videoElement: HTMLVideoElement + private readonly errorCounts: ErrorCounts = {} + private readonly player: VideoJsPlayer + private readonly tech: videojs.Tech + private readonly source: videojs.Tech.SourceObject + private readonly vjs: typeof videojs + + private hls: Hlsjs & { manualLevel?: number } // FIXME: typings + private hlsjsConfig: Partial = null + + private _duration: number = null + private metadata: Metadata = null + private isLive: boolean = null + private dvrDuration: number = null + private edgeMargin: number = null + + private handlers: { [ id in 'play' | 'addtrack' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = { + play: null, + addtrack: null, + playing: null, + textTracksChange: null, + audioTracksChange: null + } + + private uiTextTrackHandled = false + + constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) { + this.vjs = vjs + this.source = source + + this.tech = tech; + (this.tech as any).name_ = 'Hlsjs' + + this.videoElement = tech.el() as HTMLVideoElement + this.player = vjs((tech.options_ as any).playerId) + + this.videoElement.addEventListener('error', event => { + let errorTxt: string + const mediaError = (event.currentTarget as HTMLVideoElement).error + + switch (mediaError.code) { + case mediaError.MEDIA_ERR_ABORTED: + errorTxt = 'You aborted the video playback' + break + case mediaError.MEDIA_ERR_DECODE: + errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support' + this._handleMediaError(mediaError) + break + case mediaError.MEDIA_ERR_NETWORK: + errorTxt = 'A network error caused the video download to fail part-way' + break + case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED: + errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported' + break + + default: + errorTxt = mediaError.message + } + + console.error('MEDIA_ERROR: ', errorTxt) + }) + + this.initialize() + } + + duration () { + return this._duration || this.videoElement.duration || 0 + } + + seekable () { + if (this.hls.media) { + if (!this.isLive) { + return this.vjs.createTimeRanges(0, this.hls.media.duration) + } + + // Video.js doesn't seem to like floating point timeranges + const startTime = Math.round(this.hls.media.duration - this.dvrDuration) + const endTime = Math.round(this.hls.media.duration - this.edgeMargin) + + return this.vjs.createTimeRanges(startTime, endTime) + } + + return this.vjs.createTimeRanges() + } + + // See comment for `initialize` method. + dispose () { + this.videoElement.removeEventListener('play', this.handlers.play) + this.videoElement.textTracks.removeEventListener('addtrack', this.handlers.addtrack) + this.videoElement.removeEventListener('playing', this.handlers.playing) + + this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange) + this.uiTextTrackHandled = false + + this.player.audioTracks().removeEventListener('change', this.handlers.audioTracksChange) + + this.hls.destroy() + } + + static addHook (type: string, callback: Function) { + Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || [] + Html5Hlsjs.hooks[ type ].push(callback) + } + + static removeHook (type: string, callback: Function) { + if (Html5Hlsjs.hooks[ type ] === undefined) return false + + const index = Html5Hlsjs.hooks[ type ].indexOf(callback) + if (index === -1) return false + + Html5Hlsjs.hooks[ type ].splice(index, 1) + + return true + } + + private _executeHooksFor (type: string) { + if (Html5Hlsjs.hooks[ type ] === undefined) { + return + } + + // ES3 and IE < 9 + for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) { + Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls) + } + } + + private _handleMediaError (error: any) { + if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) { + console.info('trying to recover media error') + this.hls.recoverMediaError() + return + } + + if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) { + console.info('2nd try to recover media error (by swapping audio codec') + this.hls.swapAudioCodec() + this.hls.recoverMediaError() + return + } + + if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) { + console.info('bubbling media error up to VIDEOJS') + this.tech.error = () => error + this.tech.trigger('error') + return + } + } + + private _onError (_event: any, data: Hlsjs.errorData) { + const error: { message: string, code?: number } = { + message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}` + } + console.error(error.message) + + // increment/set error count + if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1 + else this.errorCounts[ data.type ] = 1 + + // Implement simple error handling based on hls.js documentation + // https://github.com/dailymotion/hls.js/blob/master/API.md#fifth-step-error-handling + if (data.fatal) { + switch (data.type) { + case Hlsjs.ErrorTypes.NETWORK_ERROR: + console.info('bubbling network error up to VIDEOJS') + error.code = 2 + this.tech.error = () => error as any + this.tech.trigger('error') + break + + case Hlsjs.ErrorTypes.MEDIA_ERROR: + error.code = 3 + this._handleMediaError(error) + break + + default: + // cannot recover + this.hls.destroy() + console.info('bubbling error up to VIDEOJS') + this.tech.error = () => error as any + this.tech.trigger('error') + break + } + } + } + + private switchQuality (qualityId: number) { + this.hls.nextLevel = qualityId + } + + private _levelLabel (level: Hlsjs.Level) { + if (this.player.srOptions_.levelLabelHandler) { + return this.player.srOptions_.levelLabelHandler(level) + } + + if (level.height) return level.height + 'p' + 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 && 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) + } + } + + 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) + } + + this.metadata.levels.forEach((level, index) => { + // Don't write in level (shared reference with Hls.js) + const quality = { + id: index, + selected: index === this.hls.manualLevel, + label: this._levelLabel(level) + } + + cleanTracklist.push(quality) + }) + + 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 as (AudioTrack & { name?: string, lang?: string })[] // FIXME typings + 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 + } + } + + 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' + } + } + } + + private _startLoad () { + this.hls.startLoad(-1) + this.videoElement.removeEventListener('play', this.handlers.play) + } + + private _oneLevelObjClone (obj: object) { + const result = {} + const objKeys = Object.keys(obj) + for (let i = 0; i < objKeys.length; i++) { + result[ objKeys[ i ] ] = obj[ objKeys[ i ] ] + } + + 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: Hlsjs.manifestLoadedData) { + // 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, '')) + } + } + } + } + } + + private _initHlsjs () { + const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions + const srOptions_ = this.player.srOptions_ + + const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig + // Hls.js will write to the reference thus change the object for later streams + this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {} + + if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) { + this.hlsjsConfig.autoStartLoad = false + } + + const captionConfig = srOptions_ && 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.handlers.play = this._startLoad.bind(this) + 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.LEVEL_LOADED, (event, data) => { + // The DVR plugin will auto seek to "live edge" on start up + if (this.hlsjsConfig.liveSyncDuration) { + this.edgeMargin = this.hlsjsConfig.liveSyncDuration + } else if (this.hlsjsConfig.liveSyncDurationCount) { + this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration + } + + this.isLive = data.details.live + 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.attachMedia(this.videoElement) + + this.handlers.addtrack = this._updateTextTrackList.bind(this) + this.videoElement.textTracks.addEventListener('addtrack', this.handlers.addtrack) + + this.hls.loadSource(this.source.src) + } + + private initialize () { + this._initHlsjs() + } +} + +export { + Html5Hlsjs, + registerSourceHandler, + registerConfigPlugin +} diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts index 512054ae6..e86900faa 100644 --- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts +++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts @@ -3,10 +3,11 @@ import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-vide import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs' import { Events, Segment } from 'p2p-media-loader-core' import { timeToInt } from '../utils' +import { registerConfigPlugin, registerSourceHandler } from './hls-plugin' +import * as Hlsjs from 'hls.js' -// videojs-hlsjs-plugin needs videojs in window -window['videojs'] = videojs -require('@streamroot/videojs-hlsjs-plugin') +registerConfigPlugin(videojs) +registerSourceHandler(videojs) const Plugin = videojs.getPlugin('plugin') class P2pMediaLoaderPlugin extends Plugin { @@ -16,7 +17,7 @@ class P2pMediaLoaderPlugin extends Plugin { } private readonly options: P2PMediaLoaderPluginOptions - private hlsjs: any // Don't type hlsjs to not bundle the module + private hlsjs: Hlsjs private p2pEngine: Engine private statsP2PBytes = { pendingDownload: [] as number[], @@ -88,9 +89,7 @@ class P2pMediaLoaderPlugin extends Plugin { const options = this.player.tech(true).options_ as any this.p2pEngine = options.hlsjsConfig.loader.getEngine() - // Avoid using constants to not import hls.hs - // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37 - this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => { + this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => { this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height }) }) diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 4e6387a53..dbf631a5e 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -211,9 +211,9 @@ export class PeertubePlayerManager { } if (mode === 'p2p-media-loader') { - const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) + const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) - html5 = streamrootHls.html5 + html5 = hlsjs.html5 } if (mode === 'webtorrent') { @@ -303,7 +303,7 @@ export class PeertubePlayerManager { swarmId: p2pMediaLoaderOptions.playlistUrl } } - const streamrootHls = { + const hlsjs = { levelLabelHandler: (level: { height: number, width: number }) => { const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height) @@ -322,7 +322,7 @@ export class PeertubePlayerManager { } } - const toAssign = { p2pMediaLoader, streamrootHls } + const toAssign = { p2pMediaLoader, hlsjs } Object.assign(plugins, toAssign) return toAssign diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index e45722661..8f3d76cac 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/client/src/assets/player/peertube-videojs-typings.ts @@ -1,13 +1,17 @@ -import videojs from 'video.js' import { PeerTubePlugin } from './peertube-plugin' import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin' import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin' import { PlayerMode } from './peertube-player-manager' import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' import { VideoFile } from '@shared/models' +import videojs from 'video.js' +import { Config, Level } from 'hls.js' declare module 'video.js' { + export interface VideoJsPlayer { + srOptions_: HlsjsConfigHandlerOptions + theaterEnabled: boolean // FIXME: add it to upstream typings @@ -21,32 +25,57 @@ declare module 'video.js' { // Plugins peertube (): PeerTubePlugin + webtorrent (): WebTorrentPlugin + p2pMediaLoader (): P2pMediaLoaderPlugin contextmenuUI (options: any): any bezels (): void - qualityLevels (): { height: number, id: number }[] & { - selectedIndex: number - selectedIndex_: number - - addQualityLevel (representation: { - id: number - label: string - height: number - _enabled: boolean - }): void - } + qualityLevels (): QualityLevels textTracks (): TextTrackList & { on: Function tracks_: { kind: string, mode: string, language: string }[] } + + audioTracks (): AudioTrackList } } +export interface VideoJSTechHLS extends videojs.Tech { + hlsProvider: any // FIXME: typings +} + +export interface HlsjsConfigHandlerOptions { + hlsjsConfig?: Config & { cueHandler: any }// FIXME: typings + captionConfig?: any // FIXME: typings + + levelLabelHandler?: (level: Level) => string +} + +type QualityLevelRepresentation = { + id: 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 +} + type VideoJSCaption = { label: string language: string @@ -148,5 +177,7 @@ export { WebtorrentPluginOptions, P2PMediaLoaderPluginOptions, VideoJSPluginOptions, - LoadedQualityData + LoadedQualityData, + QualityLevelRepresentation, + QualityLevels } diff --git a/client/yarn.lock b/client/yarn.lock index 98b7e58a7..1b9c2cef1 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -987,11 +987,6 @@ semver "6.3.0" semver-intersect "1.4.0" -"@streamroot/videojs-hlsjs-plugin@^1.0.10": - version "1.0.13" - resolved "https://registry.yarnpkg.com/@streamroot/videojs-hlsjs-plugin/-/videojs-hlsjs-plugin-1.0.13.tgz#ae3afb3a5a3cd90e7b424b6b4cb14de1cde40836" - integrity sha512-A55213sFj8nuoj23YiR0r73cRV4dlnSwXGwT1Qiu+oqhsauhqN+lHSRHFztMIU4EMf2Cafvv5P4R+A2c/Uj6nw== - "@types/bittorrent-protocol@*": version "2.2.4" resolved "https://registry.yarnpkg.com/@types/bittorrent-protocol/-/bittorrent-protocol-2.2.4.tgz#7dc0716924bc6a904753d39846ad235c7dab4641"