${options.headText}
@@ -23,15 +24,10 @@ function getMainTemplate (options: any) {
`
}
-export interface EndCardOptions extends videojs.ComponentOptions {
- next: () => void
- getTitle: () => string
- timeout: number
+export interface EndCardOptions extends videojs.ComponentOptions, UpNextPluginOptions {
cancelText: string
headText: string
suspendedText: string
- condition: () => boolean
- suspended: () => boolean
}
const Component = videojs.getComponent('Component')
@@ -52,27 +48,43 @@ class EndCard extends Component {
suspendedMessage: HTMLElement
nextButton: HTMLElement
+ private onEndedHandler: () => void
+ private onPlayingHandler: () => void
+
constructor (player: videojs.Player, options: EndCardOptions) {
super(player, options)
this.totalTicks = this.options_.timeout / this.interval
- player.on('ended', (_: any) => {
- if (!this.options_.condition()) return
+ this.onEndedHandler = () => {
+ if (!this.options_.isDisplayed()) return
player.addClass('vjs-upnext--showing')
- this.showCard((canceled: boolean) => {
+
+ this.showCard(canceled => {
player.removeClass('vjs-upnext--showing')
+
this.container.style.display = 'none'
+
if (!canceled) {
this.options_.next()
}
})
- })
+ }
- player.on('playing', () => {
+ this.onPlayingHandler = () => {
this.upNextEvents.trigger('playing')
- })
+ }
+
+ player.on([ 'auto-stopped', 'ended' ], this.onEndedHandler)
+ player.on('playing', this.onPlayingHandler)
+ }
+
+ dispose () {
+ if (this.onEndedHandler) this.player().off([ 'auto-stopped', 'ended' ], this.onEndedHandler)
+ if (this.onPlayingHandler) this.player().off('playing', this.onPlayingHandler)
+
+ super.dispose()
}
createEl () {
@@ -101,7 +113,7 @@ class EndCard extends Component {
return container
}
- showCard (cb: (value: boolean) => void) {
+ showCard (cb: (canceled: boolean) => void) {
let timeout: any
this.autoplayRing.setAttribute('stroke-dasharray', `${this.dashOffsetStart}`)
@@ -109,6 +121,10 @@ class EndCard extends Component {
this.title.innerHTML = this.options_.getTitle()
+ if (this.totalTicks === 0) {
+ return cb(false)
+ }
+
this.upNextEvents.one('cancel', () => {
clearTimeout(timeout)
cb(true)
@@ -134,7 +150,7 @@ class EndCard extends Component {
}
const update = () => {
- if (this.options_.suspended()) {
+ if (this.options_.isSuspended()) {
this.suspendedMessage.innerText = this.options_.suspendedText
goToPercent(0)
this.ticks = 0
diff --git a/client/src/assets/player/shared/upnext/upnext-plugin.ts b/client/src/assets/player/shared/upnext/upnext-plugin.ts
index e12e8c503..0badcd68c 100644
--- a/client/src/assets/player/shared/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/shared/upnext/upnext-plugin.ts
@@ -1,26 +1,24 @@
import videojs from 'video.js'
+import { UpNextPluginOptions } from '../../types'
import { EndCardOptions } from './end-card'
const Plugin = videojs.getPlugin('plugin')
class UpNextPlugin extends Plugin {
- constructor (player: videojs.Player, options: Partial
= {}) {
- const settings = {
- next: options.next,
- getTitle: options.getTitle,
- timeout: options.timeout || 5000,
- cancelText: options.cancelText || 'Cancel',
- headText: options.headText || 'Up Next',
- suspendedText: options.suspendedText || 'Autoplay is suspended',
- condition: options.condition,
- suspended: options.suspended
- }
-
+ constructor (player: videojs.Player, options: UpNextPluginOptions) {
super(player)
- // UpNext plugin can be called later, so ensure the player is not disposed
- if (this.player.isDisposed()) return
+ const settings: EndCardOptions = {
+ next: options.next,
+ getTitle: options.getTitle,
+ timeout: options.timeout,
+ cancelText: player.localize('Cancel'),
+ headText: player.localize('Up Next'),
+ suspendedText: player.localize('Autoplay is suspended'),
+ isDisplayed: options.isDisplayed,
+ isSuspended: options.isSuspended
+ }
this.player.ready(() => {
player.addClass('vjs-upnext')
diff --git a/client/src/assets/player/shared/web-video/web-video-plugin.ts b/client/src/assets/player/shared/web-video/web-video-plugin.ts
new file mode 100644
index 000000000..80e56795b
--- /dev/null
+++ b/client/src/assets/player/shared/web-video/web-video-plugin.ts
@@ -0,0 +1,186 @@
+import debug from 'debug'
+import videojs from 'video.js'
+import { logger } from '@root-helpers/logger'
+import { addQueryParams } from '@shared/core-utils'
+import { VideoFile } from '@shared/models'
+import { PeerTubeResolution, PlayerNetworkInfo, WebVideoPluginOptions } from '../../types'
+
+const debugLogger = debug('peertube:player:web-video-plugin')
+
+const Plugin = videojs.getPlugin('plugin')
+
+class WebVideoPlugin extends Plugin {
+ private readonly videoFiles: VideoFile[]
+
+ private currentVideoFile: VideoFile
+ private videoFileToken: () => string
+
+ private networkInfoInterval: any
+
+ private onErrorHandler: () => void
+ private onPlayHandler: () => void
+
+ constructor (player: videojs.Player, options?: WebVideoPluginOptions) {
+ super(player, options)
+
+ this.videoFiles = options.videoFiles
+ this.videoFileToken = options.videoFileToken
+
+ this.updateVideoFile({ videoFile: this.pickAverageVideoFile(), isUserResolutionChange: false })
+
+ player.ready(() => {
+ this.buildQualities()
+
+ this.setupNetworkInfoInterval()
+
+ if (this.videoFiles.length === 0) {
+ this.player.addClass('disabled')
+ return
+ }
+ })
+ }
+
+ dispose () {
+ clearInterval(this.networkInfoInterval)
+
+ if (this.onErrorHandler) this.player.off('error', this.onErrorHandler)
+ if (this.onPlayHandler) this.player.off('canplay', this.onPlayHandler)
+
+ super.dispose()
+ }
+
+ getCurrentResolutionId () {
+ return this.currentVideoFile.resolution.id
+ }
+
+ updateVideoFile (options: {
+ videoFile: VideoFile
+ isUserResolutionChange: boolean
+ }) {
+ this.currentVideoFile = options.videoFile
+
+ debugLogger('Updating web video file to ' + this.currentVideoFile.fileUrl)
+
+ const paused = this.player.paused()
+ const playbackRate = this.player.playbackRate()
+ const currentTime = this.player.currentTime()
+
+ // Enable error display now this is our last fallback
+ this.onErrorHandler = () => this.player.peertube().displayFatalError()
+ this.player.one('error', this.onErrorHandler)
+
+ let httpUrl = this.currentVideoFile.fileUrl
+
+ if (this.videoFileToken()) {
+ httpUrl = addQueryParams(httpUrl, { videoFileToken: this.videoFileToken() })
+ }
+
+ const oldAutoplayValue = this.player.autoplay()
+ if (options.isUserResolutionChange) {
+ this.player.autoplay(false)
+ this.player.addClass('vjs-updating-resolution')
+ }
+
+ this.player.src(httpUrl)
+
+ this.onPlayHandler = () => {
+ this.player.playbackRate(playbackRate)
+ this.player.currentTime(currentTime)
+
+ this.adaptPosterForAudioOnly()
+
+ if (options.isUserResolutionChange) {
+ this.player.trigger('user-resolution-change')
+ this.player.trigger('web-video-source-change')
+
+ this.tryToPlay()
+ .then(() => {
+ if (paused) this.player.pause()
+
+ this.player.autoplay(oldAutoplayValue)
+ })
+ }
+ }
+
+ this.player.one('canplay', this.onPlayHandler)
+ }
+
+ getCurrentVideoFile () {
+ return this.currentVideoFile
+ }
+
+ private adaptPosterForAudioOnly () {
+ // Audio-only (resolutionId === 0) gets special treatment
+ if (this.currentVideoFile.resolution.id === 0) {
+ this.player.audioPosterMode(true)
+ } else {
+ this.player.audioPosterMode(false)
+ }
+ }
+
+ private tryToPlay () {
+ debugLogger('Try to play manually the video')
+
+ const playPromise = this.player.play()
+ if (playPromise === undefined) return
+
+ return playPromise
+ .catch((err: Error) => {
+ if (err.message.includes('The play() request was interrupted by a call to pause()')) {
+ return
+ }
+
+ logger.warn(err)
+ this.player.pause()
+ this.player.posterImage.show()
+ this.player.removeClass('vjs-has-autoplay')
+ this.player.removeClass('vjs-playing-audio-only-content')
+ })
+ .finally(() => {
+ this.player.removeClass('vjs-updating-resolution')
+ })
+ }
+
+ private pickAverageVideoFile () {
+ if (this.videoFiles.length === 1) return this.videoFiles[0]
+
+ const files = this.videoFiles.filter(f => f.resolution.id !== 0)
+ return files[Math.floor(files.length / 2)]
+ }
+
+ private buildQualities () {
+ const resolutions: PeerTubeResolution[] = this.videoFiles.map(videoFile => ({
+ id: videoFile.resolution.id,
+ label: this.buildQualityLabel(videoFile),
+ height: videoFile.resolution.id,
+ selected: videoFile.id === this.currentVideoFile.id,
+ selectCallback: () => this.updateVideoFile({ videoFile, isUserResolutionChange: true })
+ }))
+
+ this.player.peertubeResolutions().add(resolutions)
+ }
+
+ private buildQualityLabel (file: VideoFile) {
+ let label = file.resolution.label
+
+ if (file.fps && file.fps >= 50) {
+ label += file.fps
+ }
+
+ return label
+ }
+
+ private setupNetworkInfoInterval () {
+ this.networkInfoInterval = setInterval(() => {
+ return this.player.trigger('http-info', {
+ source: 'web-video',
+ http: {
+ downloaded: this.player.bufferedPercent() * this.currentVideoFile.size
+ }
+ } as PlayerNetworkInfo)
+ }, 1000)
+ }
+}
+
+videojs.registerPlugin('webVideo', WebVideoPlugin)
+export { WebVideoPlugin }
diff --git a/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts b/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts
deleted file mode 100644
index 74ae17704..000000000
--- a/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-// From https://github.com/MinEduTDF/idb-chunk-store
-// We use temporary IndexDB (all data are removed on destroy) to avoid RAM issues
-// Thanks @santiagogil and @Feross
-
-import Dexie from 'dexie'
-import { EventEmitter } from 'events'
-import { logger } from '@root-helpers/logger'
-
-class ChunkDatabase extends Dexie {
- chunks: Dexie.Table<{ id: number, buf: Buffer }, number>
-
- constructor (dbname: string) {
- super(dbname)
-
- this.version(1).stores({
- chunks: 'id'
- })
- }
-}
-
-class ExpirationDatabase extends Dexie {
- databases: Dexie.Table<{ name: string, expiration: number }, number>
-
- constructor () {
- super('webtorrent-expiration')
-
- this.version(1).stores({
- databases: 'name,expiration'
- })
- }
-}
-
-export class PeertubeChunkStore extends EventEmitter {
- private static readonly BUFFERING_PUT_MS = 1000
- private static readonly CLEANER_INTERVAL_MS = 1000 * 60 // 1 minute
- private static readonly CLEANER_EXPIRATION_MS = 1000 * 60 * 5 // 5 minutes
-
- chunkLength: number
-
- private pendingPut: { id: number, buf: Buffer, cb: (err?: Error) => void }[] = []
- // If the store is full
- private memoryChunks: { [ id: number ]: Buffer | true } = {}
- private databaseName: string
- private putBulkTimeout: any
- private cleanerInterval: any
- private db: ChunkDatabase
- private expirationDB: ExpirationDatabase
- private readonly length: number
- private readonly lastChunkLength: number
- private readonly lastChunkIndex: number
-
- constructor (chunkLength: number, opts: any) {
- super()
-
- this.databaseName = 'webtorrent-chunks-'
-
- if (!opts) opts = {}
- if (opts.torrent?.infoHash) this.databaseName += opts.torrent.infoHash
- else this.databaseName += '-default'
-
- this.setMaxListeners(100)
-
- this.chunkLength = Number(chunkLength)
- if (!this.chunkLength) throw new Error('First argument must be a chunk length')
-
- this.length = Number(opts.length) || Infinity
-
- if (this.length !== Infinity) {
- this.lastChunkLength = (this.length % this.chunkLength) || this.chunkLength
- this.lastChunkIndex = Math.ceil(this.length / this.chunkLength) - 1
- }
-
- this.db = new ChunkDatabase(this.databaseName)
- // Track databases that expired
- this.expirationDB = new ExpirationDatabase()
-
- this.runCleaner()
- }
-
- put (index: number, buf: Buffer, cb: (err?: Error) => void) {
- const isLastChunk = (index === this.lastChunkIndex)
- if (isLastChunk && buf.length !== this.lastChunkLength) {
- return this.nextTick(cb, new Error('Last chunk length must be ' + this.lastChunkLength))
- }
- if (!isLastChunk && buf.length !== this.chunkLength) {
- return this.nextTick(cb, new Error('Chunk length must be ' + this.chunkLength))
- }
-
- // Specify we have this chunk
- this.memoryChunks[index] = true
-
- // Add it to the pending put
- this.pendingPut.push({ id: index, buf, cb })
- // If it's already planned, return
- if (this.putBulkTimeout) return
-
- // Plan a future bulk insert
- this.putBulkTimeout = setTimeout(async () => {
- const processing = this.pendingPut
- this.pendingPut = []
- this.putBulkTimeout = undefined
-
- try {
- await this.db.transaction('rw', this.db.chunks, () => {
- return this.db.chunks.bulkPut(processing.map(p => ({ id: p.id, buf: p.buf })))
- })
- } catch (err) {
- logger.info('Cannot bulk insert chunks. Store them in memory.', err)
-
- processing.forEach(p => {
- this.memoryChunks[p.id] = p.buf
- })
- } finally {
- processing.forEach(p => p.cb())
- }
- }, PeertubeChunkStore.BUFFERING_PUT_MS)
- }
-
- get (index: number, opts: any, cb: (err?: Error, buf?: Buffer) => void): void {
- if (typeof opts === 'function') return this.get(index, null, opts)
-
- // IndexDB could be slow, use our memory index first
- const memoryChunk = this.memoryChunks[index]
- if (memoryChunk === undefined) {
- const err = new Error('Chunk not found') as any
- err['notFound'] = true
-
- return process.nextTick(() => cb(err))
- }
-
- // Chunk in memory
- if (memoryChunk !== true) return cb(null, memoryChunk)
-
- // Chunk in store
- this.db.transaction('r', this.db.chunks, async () => {
- const result = await this.db.chunks.get({ id: index })
- if (result === undefined) return cb(null, Buffer.alloc(0))
-
- const buf = result.buf
- if (!opts) return this.nextTick(cb, null, buf)
-
- const offset = opts.offset || 0
- const len = opts.length || (buf.length - offset)
- return cb(null, buf.slice(offset, len + offset))
- })
- .catch(err => {
- logger.error(err)
- return cb(err)
- })
- }
-
- close (cb: (err?: Error) => void) {
- return this.destroy(cb)
- }
-
- async destroy (cb: (err?: Error) => void) {
- try {
- if (this.pendingPut) {
- clearTimeout(this.putBulkTimeout)
- this.pendingPut = null
- }
- if (this.cleanerInterval) {
- clearInterval(this.cleanerInterval)
- this.cleanerInterval = null
- }
-
- if (this.db) {
- this.db.close()
-
- await this.dropDatabase(this.databaseName)
- }
-
- if (this.expirationDB) {
- this.expirationDB.close()
- this.expirationDB = null
- }
-
- return cb()
- } catch (err) {
- logger.error('Cannot destroy peertube chunk store.', err)
- return cb(err)
- }
- }
-
- private runCleaner () {
- this.checkExpiration()
-
- this.cleanerInterval = setInterval(() => {
- this.checkExpiration()
- }, PeertubeChunkStore.CLEANER_INTERVAL_MS)
- }
-
- private async checkExpiration () {
- let databasesToDeleteInfo: { name: string }[] = []
-
- try {
- await this.expirationDB.transaction('rw', this.expirationDB.databases, async () => {
- // Update our database expiration since we are alive
- await this.expirationDB.databases.put({
- name: this.databaseName,
- expiration: new Date().getTime() + PeertubeChunkStore.CLEANER_EXPIRATION_MS
- })
-
- const now = new Date().getTime()
- databasesToDeleteInfo = await this.expirationDB.databases.where('expiration').below(now).toArray()
- })
- } catch (err) {
- logger.error('Cannot update expiration of fetch expired databases.', err)
- }
-
- for (const databaseToDeleteInfo of databasesToDeleteInfo) {
- await this.dropDatabase(databaseToDeleteInfo.name)
- }
- }
-
- private async dropDatabase (databaseName: string) {
- const dbToDelete = new ChunkDatabase(databaseName)
- logger.info(`Destroying IndexDB database ${databaseName}`)
-
- try {
- await dbToDelete.delete()
-
- await this.expirationDB.transaction('rw', this.expirationDB.databases, () => {
- return this.expirationDB.databases.where({ name: databaseName }).delete()
- })
- } catch (err) {
- logger.error(`Cannot delete ${databaseName}.`, err)
- }
- }
-
- private nextTick (cb: (err?: Error, val?: T) => void, err: Error, val?: T) {
- process.nextTick(() => cb(err, val), undefined)
- }
-}
diff --git a/client/src/assets/player/shared/webtorrent/video-renderer.ts b/client/src/assets/player/shared/webtorrent/video-renderer.ts
deleted file mode 100644
index a85d7a838..000000000
--- a/client/src/assets/player/shared/webtorrent/video-renderer.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-// Thanks: https://github.com/feross/render-media
-
-const MediaElementWrapper = require('mediasource')
-import { logger } from '@root-helpers/logger'
-import { extname } from 'path'
-const Videostream = require('videostream')
-
-const VIDEOSTREAM_EXTS = [
- '.m4a',
- '.m4v',
- '.mp4'
-]
-
-type RenderMediaOptions = {
- controls: boolean
- autoplay: boolean
-}
-
-function renderVideo (
- file: any,
- elem: HTMLVideoElement,
- opts: RenderMediaOptions,
- callback: (err: Error, renderer: any) => void
-) {
- validateFile(file)
-
- return renderMedia(file, elem, opts, callback)
-}
-
-function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
- const extension = extname(file.name).toLowerCase()
- let preparedElem: any
- let currentTime = 0
- let renderer: any
-
- try {
- if (VIDEOSTREAM_EXTS.includes(extension)) {
- renderer = useVideostream()
- } else {
- renderer = useMediaSource()
- }
- } catch (err) {
- return callback(err)
- }
-
- function useVideostream () {
- prepareElem()
- preparedElem.addEventListener('error', function onError (err: Error) {
- preparedElem.removeEventListener('error', onError)
-
- return callback(err)
- })
- preparedElem.addEventListener('loadstart', onLoadStart)
- return new Videostream(file, preparedElem)
- }
-
- function useMediaSource (useVP9 = false) {
- const codecs = getCodec(file.name, useVP9)
-
- prepareElem()
- preparedElem.addEventListener('error', function onError (err: Error) {
- preparedElem.removeEventListener('error', onError)
-
- // Try with vp9 before returning an error
- if (codecs.includes('vp8')) return fallbackToMediaSource(true)
-
- return callback(err)
- })
- preparedElem.addEventListener('loadstart', onLoadStart)
-
- const wrapper = new MediaElementWrapper(preparedElem)
- const writable = wrapper.createWriteStream(codecs)
- file.createReadStream().pipe(writable)
-
- if (currentTime) preparedElem.currentTime = currentTime
-
- return wrapper
- }
-
- function fallbackToMediaSource (useVP9 = false) {
- if (useVP9 === true) logger.info('Falling back to media source with VP9 enabled.')
- else logger.info('Falling back to media source..')
-
- useMediaSource(useVP9)
- }
-
- function prepareElem () {
- if (preparedElem === undefined) {
- preparedElem = elem
-
- preparedElem.addEventListener('progress', function () {
- currentTime = elem.currentTime
- })
- }
- }
-
- function onLoadStart () {
- preparedElem.removeEventListener('loadstart', onLoadStart)
- if (opts.autoplay) preparedElem.play()
-
- callback(null, renderer)
- }
-}
-
-function validateFile (file: any) {
- if (file == null) {
- throw new Error('file cannot be null or undefined')
- }
- if (typeof file.name !== 'string') {
- throw new Error('missing or invalid file.name property')
- }
- if (typeof file.createReadStream !== 'function') {
- throw new Error('missing or invalid file.createReadStream property')
- }
-}
-
-function getCodec (name: string, useVP9 = false) {
- const ext = extname(name).toLowerCase()
- if (ext === '.mp4') {
- return 'video/mp4; codecs="avc1.640029, mp4a.40.5"'
- }
-
- if (ext === '.webm') {
- if (useVP9 === true) return 'video/webm; codecs="vp9, opus"'
-
- return 'video/webm; codecs="vp8, vorbis"'
- }
-
- return undefined
-}
-
-export {
- renderVideo
-}
diff --git a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
deleted file mode 100644
index e2e220c03..000000000
--- a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
+++ /dev/null
@@ -1,663 +0,0 @@
-import videojs from 'video.js'
-import * as WebTorrent from 'webtorrent'
-import { logger } from '@root-helpers/logger'
-import { isIOS } from '@root-helpers/web-browser'
-import { addQueryParams, timeToInt } from '@shared/core-utils'
-import { VideoFile } from '@shared/models'
-import { getAverageBandwidthInStore, getStoredMute, getStoredVolume, saveAverageBandwidth } from '../../peertube-player-local-storage'
-import { PeerTubeResolution, PlayerNetworkInfo, WebtorrentPluginOptions } from '../../types'
-import { getRtcConfig, videoFileMaxByResolution, videoFileMinByResolution } from '../common'
-import { PeertubeChunkStore } from './peertube-chunk-store'
-import { renderVideo } from './video-renderer'
-
-const CacheChunkStore = require('cache-chunk-store')
-
-type PlayOptions = {
- forcePlay?: boolean
- seek?: number
- delay?: number
-}
-
-const Plugin = videojs.getPlugin('plugin')
-
-class WebTorrentPlugin extends Plugin {
- readonly videoFiles: VideoFile[]
-
- private readonly playerElement: HTMLVideoElement
-
- private readonly autoplay: boolean | string = false
- private readonly startTime: number = 0
- private readonly savePlayerSrcFunction: videojs.Player['src']
- private readonly videoDuration: number
- private readonly CONSTANTS = {
- INFO_SCHEDULER: 1000, // Don't change this
- AUTO_QUALITY_SCHEDULER: 3000, // Check quality every 3 seconds
- AUTO_QUALITY_THRESHOLD_PERCENT: 30, // Bandwidth should be 30% more important than a resolution bitrate to change to it
- AUTO_QUALITY_OBSERVATION_TIME: 10000, // Wait 10 seconds after having change the resolution before another check
- AUTO_QUALITY_HIGHER_RESOLUTION_DELAY: 5000, // Buffering higher resolution during 5 seconds
- BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5 // Last 5 seconds to build average bandwidth
- }
-
- private readonly buildWebSeedUrls: (file: VideoFile) => string[]
-
- private readonly webtorrent = new WebTorrent({
- tracker: {
- rtcConfig: getRtcConfig()
- },
- dht: false
- })
-
- private currentVideoFile: VideoFile
- private torrent: WebTorrent.Torrent
-
- private renderer: any
- private fakeRenderer: any
- private destroyingFakeRenderer = false
-
- private autoResolution = true
- private autoResolutionPossible = true
- private isAutoResolutionObservation = false
- private playerRefusedP2P = false
-
- private requiresUserAuth: boolean
- private videoFileToken: () => string
-
- private torrentInfoInterval: any
- private autoQualityInterval: any
- private addTorrentDelay: any
- private qualityObservationTimer: any
- private runAutoQualitySchedulerTimer: any
-
- private downloadSpeeds: number[] = []
-
- constructor (player: videojs.Player, options?: WebtorrentPluginOptions) {
- super(player)
-
- this.startTime = timeToInt(options.startTime)
-
- // Custom autoplay handled by webtorrent because we lazy play the video
- this.autoplay = options.autoplay
-
- this.playerRefusedP2P = options.playerRefusedP2P
-
- this.videoFiles = options.videoFiles
- this.videoDuration = options.videoDuration
-
- this.savePlayerSrcFunction = this.player.src
- this.playerElement = options.playerElement
-
- this.requiresUserAuth = options.requiresUserAuth
- this.videoFileToken = options.videoFileToken
-
- this.buildWebSeedUrls = options.buildWebSeedUrls
-
- this.player.ready(() => {
- const playerOptions = this.player.options_
-
- const volume = getStoredVolume()
- if (volume !== undefined) this.player.volume(volume)
-
- const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
- if (muted !== undefined) this.player.muted(muted)
-
- this.player.duration(options.videoDuration)
-
- this.initializePlayer()
- this.runTorrentInfoScheduler()
-
- this.player.one('play', () => {
- // Don't run immediately scheduler, wait some seconds the TCP connections are made
- this.runAutoQualitySchedulerTimer = setTimeout(() => this.runAutoQualityScheduler(), this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
- })
- })
- }
-
- dispose () {
- clearTimeout(this.addTorrentDelay)
- clearTimeout(this.qualityObservationTimer)
- clearTimeout(this.runAutoQualitySchedulerTimer)
-
- clearInterval(this.torrentInfoInterval)
- clearInterval(this.autoQualityInterval)
-
- // Don't need to destroy renderer, video player will be destroyed
- this.flushVideoFile(this.currentVideoFile, false)
-
- this.destroyFakeRenderer()
- }
-
- getCurrentResolutionId () {
- return this.currentVideoFile ? this.currentVideoFile.resolution.id : -1
- }
-
- updateVideoFile (
- videoFile?: VideoFile,
- options: {
- forcePlay?: boolean
- seek?: number
- delay?: number
- } = {},
- done: () => void = () => { /* empty */ }
- ) {
- // Automatically choose the adapted video file
- if (!videoFile) {
- const savedAverageBandwidth = getAverageBandwidthInStore()
- videoFile = savedAverageBandwidth
- ? this.getAppropriateFile(savedAverageBandwidth)
- : this.pickAverageVideoFile()
- }
-
- if (!videoFile) {
- throw Error(`Can't update video file since videoFile is undefined.`)
- }
-
- // Don't add the same video file once again
- if (this.currentVideoFile !== undefined && this.currentVideoFile.magnetUri === videoFile.magnetUri) {
- return
- }
-
- // Do not display error to user because we will have multiple fallback
- this.player.peertube().hideFatalError();
-
- // Hack to "simulate" src link in video.js >= 6
- // Without this, we can't play the video after pausing it
- // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
- (this.player as any).src = () => true
- const oldPlaybackRate = this.player.playbackRate()
-
- const previousVideoFile = this.currentVideoFile
- this.currentVideoFile = videoFile
-
- // Don't try on iOS that does not support MediaSource
- // Or don't use P2P if webtorrent is disabled
- if (isIOS() || this.playerRefusedP2P) {
- return this.fallbackToHttp(options, () => {
- this.player.playbackRate(oldPlaybackRate)
- return done()
- })
- }
-
- this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, options, () => {
- this.player.playbackRate(oldPlaybackRate)
- return done()
- })
-
- this.selectAppropriateResolution(true)
- }
-
- updateEngineResolution (resolutionId: number, delay = 0) {
- // Remember player state
- const currentTime = this.player.currentTime()
- const isPaused = this.player.paused()
-
- // Hide bigPlayButton
- if (!isPaused) {
- this.player.bigPlayButton.hide()
- }
-
- // Audio-only (resolutionId === 0) gets special treatment
- if (resolutionId === 0) {
- // Audio-only: show poster, do not auto-hide controls
- this.player.addClass('vjs-playing-audio-only-content')
- this.player.posterImage.show()
- } else {
- // Hide poster to have black background
- this.player.removeClass('vjs-playing-audio-only-content')
- this.player.posterImage.hide()
- }
-
- const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId)
- const options = {
- forcePlay: false,
- delay,
- seek: currentTime + (delay / 1000)
- }
-
- this.updateVideoFile(newVideoFile, options)
-
- this.player.trigger('engineResolutionChange')
- }
-
- flushVideoFile (videoFile: VideoFile, destroyRenderer = true) {
- if (videoFile !== undefined && this.webtorrent.get(videoFile.magnetUri)) {
- if (destroyRenderer === true && this.renderer && this.renderer.destroy) this.renderer.destroy()
-
- this.webtorrent.remove(videoFile.magnetUri)
- logger.info(`Removed ${videoFile.magnetUri}`)
- }
- }
-
- disableAutoResolution () {
- this.autoResolution = false
- this.autoResolutionPossible = false
- this.player.peertubeResolutions().disableAutoResolution()
- }
-
- isAutoResolutionPossible () {
- return this.autoResolutionPossible
- }
-
- getTorrent () {
- return this.torrent
- }
-
- getCurrentVideoFile () {
- return this.currentVideoFile
- }
-
- changeQuality (id: number) {
- if (id === -1) {
- if (this.autoResolutionPossible === true) {
- this.autoResolution = true
-
- this.selectAppropriateResolution(false)
- }
-
- return
- }
-
- this.autoResolution = false
- this.updateEngineResolution(id)
- this.selectAppropriateResolution(false)
- }
-
- private addTorrent (
- magnetOrTorrentUrl: string,
- previousVideoFile: VideoFile,
- options: PlayOptions,
- done: (err?: Error) => void
- ) {
- if (!magnetOrTorrentUrl) return this.fallbackToHttp(options, done)
-
- logger.info(`Adding ${magnetOrTorrentUrl}.`)
-
- const oldTorrent = this.torrent
- const torrentOptions = {
- // Don't use arrow function: it breaks webtorrent (that uses `new` keyword)
- store: function (chunkLength: number, storeOpts: any) {
- return new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
- max: 100
- })
- },
- urlList: this.buildWebSeedUrls(this.currentVideoFile)
- }
-
- this.torrent = this.webtorrent.add(magnetOrTorrentUrl, torrentOptions, torrent => {
- logger.info(`Added ${magnetOrTorrentUrl}.`)
-
- if (oldTorrent) {
- // Pause the old torrent
- this.stopTorrent(oldTorrent)
-
- // We use a fake renderer so we download correct pieces of the next file
- if (options.delay) this.renderFileInFakeElement(torrent.files[0], options.delay)
- }
-
- // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution)
- this.addTorrentDelay = setTimeout(() => {
- // We don't need the fake renderer anymore
- this.destroyFakeRenderer()
-
- const paused = this.player.paused()
-
- this.flushVideoFile(previousVideoFile)
-
- // Update progress bar (just for the UI), do not wait rendering
- if (options.seek) this.player.currentTime(options.seek)
-
- const renderVideoOptions = { autoplay: false, controls: true }
- renderVideo(torrent.files[0], this.playerElement, renderVideoOptions, (err, renderer) => {
- this.renderer = renderer
-
- if (err) return this.fallbackToHttp(options, done)
-
- return this.tryToPlay(err => {
- if (err) return done(err)
-
- if (options.seek) this.seek(options.seek)
- if (options.forcePlay === false && paused === true) this.player.pause()
-
- return done()
- })
- })
- }, options.delay || 0)
- })
-
- this.torrent.on('error', (err: any) => logger.error(err))
-
- this.torrent.on('warning', (err: any) => {
- // We don't support HTTP tracker but we don't care -> we use the web socket tracker
- if (err.message.indexOf('Unsupported tracker protocol') !== -1) return
-
- // Users don't care about issues with WebRTC, but developers do so log it in the console
- if (err.message.indexOf('Ice connection failed') !== -1) {
- logger.info(err)
- return
- }
-
- // Magnet hash is not up to date with the torrent file, add directly the torrent file
- if (err.message.indexOf('incorrect info hash') !== -1) {
- logger.error('Incorrect info hash detected, falling back to torrent file.')
- const newOptions = { forcePlay: true, seek: options.seek }
- return this.addTorrent((this.torrent as any)['xs'], previousVideoFile, newOptions, done)
- }
-
- // Remote instance is down
- if (err.message.indexOf('from xs param') !== -1) {
- this.handleError(err)
- }
-
- logger.warn(err)
- })
- }
-
- private tryToPlay (done?: (err?: Error) => void) {
- if (!done) done = function () { /* empty */ }
-
- const playPromise = this.player.play()
- if (playPromise !== undefined) {
- return playPromise.then(() => done())
- .catch((err: Error) => {
- if (err.message.includes('The play() request was interrupted by a call to pause()')) {
- return
- }
-
- logger.warn(err)
- this.player.pause()
- this.player.posterImage.show()
- this.player.removeClass('vjs-has-autoplay')
- this.player.removeClass('vjs-has-big-play-button-clicked')
- this.player.removeClass('vjs-playing-audio-only-content')
-
- return done()
- })
- }
-
- return done()
- }
-
- private seek (time: number) {
- this.player.currentTime(time)
- this.player.handleTechSeeked_()
- }
-
- private getAppropriateFile (averageDownloadSpeed?: number): VideoFile {
- if (this.videoFiles === undefined) return undefined
- if (this.videoFiles.length === 1) return this.videoFiles[0]
-
- const files = this.videoFiles.filter(f => f.resolution.id !== 0)
- if (files.length === 0) return undefined
-
- // Don't change the torrent if the player ended
- if (this.torrent && this.torrent.progress === 1 && this.player.ended()) return this.currentVideoFile
-
- if (!averageDownloadSpeed) averageDownloadSpeed = this.getAndSaveActualDownloadSpeed()
-
- // Limit resolution according to player height
- const playerHeight = this.playerElement.offsetHeight
-
- // We take the first resolution just above the player height
- // Example: player height is 530px, we want the 720p file instead of 480p
- let maxResolution = files[0].resolution.id
- for (let i = files.length - 1; i >= 0; i--) {
- const resolutionId = files[i].resolution.id
- if (resolutionId !== 0 && resolutionId >= playerHeight) {
- maxResolution = resolutionId
- break
- }
- }
-
- // Filter videos we can play according to our screen resolution and bandwidth
- const filteredFiles = files.filter(f => f.resolution.id <= maxResolution)
- .filter(f => {
- const fileBitrate = (f.size / this.videoDuration)
- let threshold = fileBitrate
-
- // If this is for a higher resolution or an initial load: add a margin
- if (!this.currentVideoFile || f.resolution.id > this.currentVideoFile.resolution.id) {
- threshold += ((fileBitrate * this.CONSTANTS.AUTO_QUALITY_THRESHOLD_PERCENT) / 100)
- }
-
- return averageDownloadSpeed > threshold
- })
-
- // If the download speed is too bad, return the lowest resolution we have
- if (filteredFiles.length === 0) return videoFileMinByResolution(files)
-
- return videoFileMaxByResolution(filteredFiles)
- }
-
- private getAndSaveActualDownloadSpeed () {
- const start = Math.max(this.downloadSpeeds.length - this.CONSTANTS.BANDWIDTH_AVERAGE_NUMBER_OF_VALUES, 0)
- const lastDownloadSpeeds = this.downloadSpeeds.slice(start, this.downloadSpeeds.length)
- if (lastDownloadSpeeds.length === 0) return -1
-
- const sum = lastDownloadSpeeds.reduce((a, b) => a + b)
- const averageBandwidth = Math.round(sum / lastDownloadSpeeds.length)
-
- // Save the average bandwidth for future use
- saveAverageBandwidth(averageBandwidth)
-
- return averageBandwidth
- }
-
- private initializePlayer () {
- this.buildQualities()
-
- if (this.videoFiles.length === 0) {
- this.player.addClass('disabled')
- return
- }
-
- if (this.autoplay !== false) {
- this.player.posterImage.hide()
-
- return this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
- }
-
- // Proxy first play
- const oldPlay = this.player.play.bind(this.player);
- (this.player as any).play = () => {
- this.player.addClass('vjs-has-big-play-button-clicked')
- this.player.play = oldPlay
-
- this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
- }
- }
-
- private runAutoQualityScheduler () {
- this.autoQualityInterval = setInterval(() => {
-
- // Not initialized or in HTTP fallback
- if (this.torrent === undefined || this.torrent === null) return
- if (this.autoResolution === false) return
- if (this.isAutoResolutionObservation === true) return
-
- const file = this.getAppropriateFile()
- let changeResolution = false
- let changeResolutionDelay = 0
-
- // Lower resolution
- if (this.isPlayerWaiting() && file.resolution.id < this.currentVideoFile.resolution.id) {
- logger.info(`Downgrading automatically the resolution to: ${file.resolution.label}`)
- changeResolution = true
- } else if (file.resolution.id > this.currentVideoFile.resolution.id) { // Higher resolution
- logger.info(`Upgrading automatically the resolution to: ${file.resolution.label}`)
- changeResolution = true
- changeResolutionDelay = this.CONSTANTS.AUTO_QUALITY_HIGHER_RESOLUTION_DELAY
- }
-
- if (changeResolution === true) {
- this.updateEngineResolution(file.resolution.id, changeResolutionDelay)
-
- // Wait some seconds in observation of our new resolution
- this.isAutoResolutionObservation = true
-
- this.qualityObservationTimer = setTimeout(() => {
- this.isAutoResolutionObservation = false
- }, this.CONSTANTS.AUTO_QUALITY_OBSERVATION_TIME)
- }
- }, this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
- }
-
- private isPlayerWaiting () {
- return this.player?.hasClass('vjs-waiting')
- }
-
- private runTorrentInfoScheduler () {
- this.torrentInfoInterval = setInterval(() => {
- // Not initialized yet
- if (this.torrent === undefined) return
-
- // Http fallback
- if (this.torrent === null) return this.player.trigger('p2pInfo', false)
-
- // this.webtorrent.downloadSpeed because we need to take into account the potential old torrent too
- if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
-
- return this.player.trigger('p2pInfo', {
- source: 'webtorrent',
- http: {
- downloadSpeed: 0,
- downloaded: 0
- },
- p2p: {
- downloadSpeed: this.torrent.downloadSpeed,
- numPeers: this.torrent.numPeers,
- uploadSpeed: this.torrent.uploadSpeed,
- downloaded: this.torrent.downloaded,
- uploaded: this.torrent.uploaded
- },
- bandwidthEstimate: this.webtorrent.downloadSpeed
- } as PlayerNetworkInfo)
- }, this.CONSTANTS.INFO_SCHEDULER)
- }
-
- private fallbackToHttp (options: PlayOptions, done?: (err?: Error) => void) {
- const paused = this.player.paused()
-
- this.disableAutoResolution()
-
- this.flushVideoFile(this.currentVideoFile, true)
- this.torrent = null
-
- // Enable error display now this is our last fallback
- this.player.one('error', () => this.player.peertube().displayFatalError())
-
- let httpUrl = this.currentVideoFile.fileUrl
-
- if (this.videoFileToken) {
- httpUrl = addQueryParams(httpUrl, { videoFileToken: this.videoFileToken() })
- }
-
- this.player.src = this.savePlayerSrcFunction
- this.player.src(httpUrl)
-
- this.selectAppropriateResolution(true)
-
- // We changed the source, so reinit captions
- this.player.trigger('sourcechange')
-
- return this.tryToPlay(err => {
- if (err && done) return done(err)
-
- if (options.seek) this.seek(options.seek)
- if (options.forcePlay === false && paused === true) this.player.pause()
-
- if (done) return done()
- })
- }
-
- private handleError (err: Error | string) {
- return this.player.trigger('customError', { err })
- }
-
- private pickAverageVideoFile () {
- if (this.videoFiles.length === 1) return this.videoFiles[0]
-
- const files = this.videoFiles.filter(f => f.resolution.id !== 0)
- return files[Math.floor(files.length / 2)]
- }
-
- private stopTorrent (torrent: WebTorrent.Torrent) {
- torrent.pause()
- // Pause does not remove actual peers (in particular the webseed peer)
- torrent.removePeer((torrent as any)['ws'])
- }
-
- private renderFileInFakeElement (file: WebTorrent.TorrentFile, delay: number) {
- this.destroyingFakeRenderer = false
-
- const fakeVideoElem = document.createElement('video')
- renderVideo(file, fakeVideoElem, { autoplay: false, controls: false }, (err, renderer) => {
- this.fakeRenderer = renderer
-
- // The renderer returns an error when we destroy it, so skip them
- if (this.destroyingFakeRenderer === false && err) {
- logger.error('Cannot render new torrent in fake video element.', err)
- }
-
- // Load the future file at the correct time (in delay MS - 2 seconds)
- fakeVideoElem.currentTime = this.player.currentTime() + (delay - 2000)
- })
- }
-
- private destroyFakeRenderer () {
- if (this.fakeRenderer) {
- this.destroyingFakeRenderer = true
-
- if (this.fakeRenderer.destroy) {
- try {
- this.fakeRenderer.destroy()
- } catch (err) {
- logger.info('Cannot destroy correctly fake renderer.', err)
- }
- }
- this.fakeRenderer = undefined
- }
- }
-
- private buildQualities () {
- const resolutions: PeerTubeResolution[] = this.videoFiles.map(file => ({
- id: file.resolution.id,
- label: this.buildQualityLabel(file),
- height: file.resolution.id,
- selected: false,
- selectCallback: () => this.changeQuality(file.resolution.id)
- }))
-
- resolutions.push({
- id: -1,
- label: this.player.localize('Auto'),
- selected: true,
- selectCallback: () => this.changeQuality(-1)
- })
-
- this.player.peertubeResolutions().add(resolutions)
- }
-
- private buildQualityLabel (file: VideoFile) {
- let label = file.resolution.label
-
- if (file.fps && file.fps >= 50) {
- label += file.fps
- }
-
- return label
- }
-
- private selectAppropriateResolution (byEngine: boolean) {
- const resolution = this.autoResolution
- ? -1
- : this.getCurrentResolutionId()
-
- const autoResolutionChosen = this.autoResolution
- ? this.getCurrentResolutionId()
- : undefined
-
- this.player.peertubeResolutions().select({ id: resolution, autoResolutionChosenId: autoResolutionChosen, byEngine })
- }
-}
-
-videojs.registerPlugin('webtorrent', WebTorrentPlugin)
-export { WebTorrentPlugin }
diff --git a/client/src/assets/player/types/index.ts b/client/src/assets/player/types/index.ts
index b73e0b3cb..4bf49f65c 100644
--- a/client/src/assets/player/types/index.ts
+++ b/client/src/assets/player/types/index.ts
@@ -1,2 +1,2 @@
-export * from './manager-options'
+export * from './peertube-player-options'
export * from './peertube-videojs-typings'
diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/peertube-player-options.ts
similarity index 53%
rename from client/src/assets/player/types/manager-options.ts
rename to client/src/assets/player/types/peertube-player-options.ts
index a73341b4c..e1b8c7fab 100644
--- a/client/src/assets/player/types/manager-options.ts
+++ b/client/src/assets/player/types/peertube-player-options.ts
@@ -1,101 +1,117 @@
import { PluginsManager } from '@root-helpers/plugins-manager'
import { LiveVideoLatencyMode, VideoFile } from '@shared/models'
+import { PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
import { PlaylistPluginOptions, VideoJSCaption, VideoJSStoryboard } from './peertube-videojs-typings'
-export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
+export type PlayerMode = 'web-video' | 'p2p-media-loader'
-export type WebtorrentOptions = {
- videoFiles: VideoFile[]
-}
+export type PeerTubePlayerContructorOptions = {
+ playerElement: () => HTMLVideoElement
-export type P2PMediaLoaderOptions = {
- playlistUrl: string
- segmentsSha256Url: string
- trackerAnnounce: string[]
- redundancyBaseUrls: string[]
- videoFiles: VideoFile[]
-}
+ controls: boolean
+ controlBar: boolean
-export interface CustomizationOptions {
- startTime: number | string
- stopTime: number | string
+ muted: boolean
+ loop: boolean
- controls?: boolean
- controlBar?: boolean
-
- muted?: boolean
- loop?: boolean
- subtitle?: string
- resume?: string
-
- peertubeLink: boolean
+ peertubeLink: () => boolean
playbackRate?: number | string
-}
-export interface CommonOptions extends CustomizationOptions {
- playerElement: HTMLVideoElement
- onPlayerElementChange: (element: HTMLVideoElement) => void
-
- autoplay: boolean
- forceAutoplay: boolean
-
- p2pEnabled: boolean
-
- nextVideo?: () => void
- hasNextVideo?: () => boolean
-
- previousVideo?: () => void
- hasPreviousVideo?: () => boolean
-
- playlist?: PlaylistPluginOptions
-
- videoDuration: number
enableHotkeys: boolean
inactivityTimeout: number
- poster: string
videoViewIntervalMs: number
instanceName: string
theaterButton: boolean
- captions: boolean
- videoViewUrl: string
- authorizationHeader?: () => string
+ authorizationHeader: () => string
metricsUrl: string
+ serverUrl: string
+
+ errorNotifier: (message: string) => void
+
+ // Current web browser language
+ language: string
+
+ pluginsManager: PluginsManager
+}
+
+export type PeerTubePlayerLoadOptions = {
+ mode: PlayerMode
+
+ startTime?: number | string
+ stopTime?: number | string
+
+ autoplay: boolean
+ forceAutoplay: boolean
+
+ poster: string
+ subtitle?: string
+ videoViewUrl: string
embedUrl: string
embedTitle: string
isLive: boolean
+
liveOptions?: {
latencyMode: LiveVideoLatencyMode
}
- language?: string
-
videoCaptions: VideoJSCaption[]
storyboard: VideoJSStoryboard
videoUUID: string
videoShortUUID: string
- serverUrl: string
+ duration: number
+
requiresUserAuth: boolean
videoFileToken: () => string
requiresPassword: boolean
videoPassword: () => string
- errorNotifier: (message: string) => void
+ nextVideo: {
+ enabled: boolean
+ getVideoTitle: () => string
+ handler?: () => void
+ displayControlBarButton: boolean
+ }
+
+ previousVideo: {
+ enabled: boolean
+ handler?: () => void
+ displayControlBarButton: boolean
+ }
+
+ upnext?: {
+ isEnabled: () => boolean
+ isSuspended: (player: videojs.VideoJsPlayer) => boolean
+ timeout: number
+ }
+
+ dock?: PeerTubeDockPluginOptions
+
+ playlist?: PlaylistPluginOptions
+
+ p2pEnabled: boolean
+
+ hls?: HLSOptions
+ webVideo?: WebVideoOptions
}
-export type PeertubePlayerManagerOptions = {
- common: CommonOptions
- webtorrent: WebtorrentOptions
- p2pMediaLoader?: P2PMediaLoaderOptions
-
- pluginsManager: PluginsManager
+export type WebVideoOptions = {
+ videoFiles: VideoFile[]
+}
+
+export type HLSOptions = {
+ playlistUrl: string
+ segmentsSha256Url: string
+ trackerAnnounce: string[]
+ redundancyBaseUrls: string[]
+ videoFiles: VideoFile[]
}
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index 30d2b287f..f10fc03a8 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -2,8 +2,11 @@ import { HlsConfig, Level } from 'hls.js'
import videojs from 'video.js'
import { Engine } from '@peertube/p2p-media-loader-hlsjs'
import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
-import { PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
-import { HotkeysOptions } from '../shared/hotkeys/peertube-hotkeys-plugin'
+import { BezelsPlugin } from '../shared/bezels/bezels-plugin'
+import { StoryboardPlugin } from '../shared/control-bar/storyboard-plugin'
+import { PeerTubeDockPlugin, PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
+import { HotkeysOptions, PeerTubeHotkeysPlugin } from '../shared/hotkeys/peertube-hotkeys-plugin'
+import { PeerTubeMobilePlugin } from '../shared/mobile/peertube-mobile-plugin'
import { Html5Hlsjs } from '../shared/p2p-media-loader/hls-plugin'
import { P2pMediaLoaderPlugin } from '../shared/p2p-media-loader/p2p-media-loader-plugin'
import { RedundancyUrlManager } from '../shared/p2p-media-loader/redundancy-url-manager'
@@ -12,9 +15,10 @@ import { PlaylistPlugin } from '../shared/playlist/playlist-plugin'
import { PeerTubeResolutionsPlugin } from '../shared/resolutions/peertube-resolutions-plugin'
import { StatsCardOptions } from '../shared/stats/stats-card'
import { StatsForNerdsPlugin } from '../shared/stats/stats-plugin'
-import { EndCardOptions } from '../shared/upnext/end-card'
-import { WebTorrentPlugin } from '../shared/webtorrent/webtorrent-plugin'
-import { PlayerMode } from './manager-options'
+import { UpNextPlugin } from '../shared/upnext/upnext-plugin'
+import { WebVideoPlugin } from '../shared/web-video/web-video-plugin'
+import { PlayerMode } from './peertube-player-options'
+import { SegmentValidator } from '../shared/p2p-media-loader/segment-validator'
declare module 'video.js' {
@@ -31,35 +35,36 @@ declare module 'video.js' {
handleTechSeeked_ (): void
- // Plugins
-
- peertube (): PeerTubePlugin
-
- webtorrent (): WebTorrentPlugin
-
- p2pMediaLoader (): P2pMediaLoaderPlugin
-
- peertubeResolutions (): PeerTubeResolutionsPlugin
-
- contextmenuUI (options: any): any
-
- bezels (): void
- peertubeMobile (): void
- peerTubeHotkeysPlugin (options?: HotkeysOptions): void
-
- stats (options?: StatsCardOptions): StatsForNerdsPlugin
-
- storyboard (options: StoryboardOptions): void
-
textTracks (): TextTrackList & {
tracks_: (TextTrack & { id: string, label: string, src: string })[]
}
- peertubeDock (options: PeerTubeDockPluginOptions): void
+ // Plugins
- upnext (options: Partial): void
+ peertube (): PeerTubePlugin
- playlist (): PlaylistPlugin
+ webVideo (options?: any): WebVideoPlugin
+
+ p2pMediaLoader (options?: any): P2pMediaLoaderPlugin
+ hlsjs (options?: any): any
+
+ peertubeResolutions (): PeerTubeResolutionsPlugin
+
+ contextmenuUI (options?: any): any
+
+ bezels (): BezelsPlugin
+ peertubeMobile (): PeerTubeMobilePlugin
+ peerTubeHotkeysPlugin (options?: HotkeysOptions): PeerTubeHotkeysPlugin
+
+ stats (options?: StatsCardOptions): StatsForNerdsPlugin
+
+ storyboard (options?: StoryboardOptions): StoryboardPlugin
+
+ peertubeDock (options?: PeerTubeDockPluginOptions): PeerTubeDockPlugin
+
+ upnext (options?: UpNextPluginOptions): UpNextPlugin
+
+ playlist (options?: PlaylistPluginOptions): PlaylistPlugin
}
}
@@ -99,32 +104,28 @@ type VideoJSStoryboard = {
}
type PeerTubePluginOptions = {
- mode: PlayerMode
+ hasAutoplay: () => videojs.Autoplay
- autoplay: videojs.Autoplay
- videoDuration: number
+ videoViewUrl: () => string
+ videoViewIntervalMs: number
- videoViewUrl: string
authorizationHeader?: () => string
- subtitle?: string
+ videoDuration: () => number
- videoCaptions: VideoJSCaption[]
+ startTime: () => number | string
+ stopTime: () => number | string
- startTime: number | string
- stopTime: number | string
-
- isLive: boolean
-
- videoUUID: string
-
- videoViewIntervalMs: number
+ videoCaptions: () => VideoJSCaption[]
+ isLive: () => boolean
+ videoUUID: () => string
+ subtitle: () => string
}
type MetricsPluginOptions = {
- mode: PlayerMode
- metricsUrl: string
- videoUUID: string
+ mode: () => PlayerMode
+ metricsUrl: () => string
+ videoUUID: () => string
}
type StoryboardOptions = {
@@ -144,37 +145,36 @@ type PlaylistPluginOptions = {
onItemClicked: (element: VideoPlaylistElement) => void
}
+type UpNextPluginOptions = {
+ timeout: number
+
+ next: () => void
+ getTitle: () => string
+ isDisplayed: () => boolean
+ isSuspended: () => boolean
+}
+
type NextPreviousVideoButtonOptions = {
type: 'next' | 'previous'
- handler: () => void
+ handler?: () => void
+ isDisplayed: () => boolean
isDisabled: () => boolean
}
type PeerTubeLinkButtonOptions = {
- shortUUID: string
+ isDisplayed: () => boolean
+ shortUUID: () => string
instanceName: string
}
-type PeerTubeP2PInfoButtonOptions = {
- p2pEnabled: boolean
+type TheaterButtonOptions = {
+ isDisplayed: () => boolean
}
-type WebtorrentPluginOptions = {
- playerElement: HTMLVideoElement
-
- autoplay: videojs.Autoplay
- videoDuration: number
-
+type WebVideoPluginOptions = {
videoFiles: VideoFile[]
-
startTime: number | string
-
- playerRefusedP2P: boolean
-
- requiresUserAuth: boolean
videoFileToken: () => string
-
- buildWebSeedUrls: (file: VideoFile) => string[]
}
type P2PMediaLoaderPluginOptions = {
@@ -182,9 +182,8 @@ type P2PMediaLoaderPluginOptions = {
type: string
src: string
- startTime: number | string
-
loader: P2PMediaLoader
+ segmentValidator: SegmentValidator
requiresUserAuth: boolean
videoFileToken: () => string
@@ -192,6 +191,8 @@ type P2PMediaLoaderPluginOptions = {
export type P2PMediaLoader = {
getEngine(): Engine
+
+ destroy: () => void
}
type VideoJSPluginOptions = {
@@ -200,7 +201,7 @@ type VideoJSPluginOptions = {
peertube: PeerTubePluginOptions
metrics: MetricsPluginOptions
- webtorrent?: WebtorrentPluginOptions
+ webVideo?: WebVideoPluginOptions
p2pMediaLoader?: P2PMediaLoaderPluginOptions
}
@@ -227,14 +228,14 @@ type AutoResolutionUpdateData = {
}
type PlayerNetworkInfo = {
- source: 'webtorrent' | 'p2p-media-loader'
+ source: 'web-video' | 'p2p-media-loader'
http: {
- downloadSpeed: number
+ downloadSpeed?: number
downloaded: number
}
- p2p: {
+ p2p?: {
downloadSpeed: number
uploadSpeed: number
downloaded: number
@@ -243,7 +244,7 @@ type PlayerNetworkInfo = {
}
// In bytes
- bandwidthEstimate: number
+ bandwidthEstimate?: number
}
type PlaylistItemOptions = {
@@ -254,6 +255,7 @@ type PlaylistItemOptions = {
export {
PlayerNetworkInfo,
+ TheaterButtonOptions,
VideoJSStoryboard,
PlaylistItemOptions,
NextPreviousVideoButtonOptions,
@@ -263,12 +265,12 @@ export {
MetricsPluginOptions,
VideoJSCaption,
PeerTubePluginOptions,
- WebtorrentPluginOptions,
+ WebVideoPluginOptions,
P2PMediaLoaderPluginOptions,
PeerTubeResolution,
VideoJSPluginOptions,
+ UpNextPluginOptions,
LoadedQualityData,
StoryboardOptions,
- PeerTubeLinkButtonOptions,
- PeerTubeP2PInfoButtonOptions
+ PeerTubeLinkButtonOptions
}
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 02d5fa169..09a75e2fd 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -3,20 +3,6 @@
@use '_mixins' as *;
@use './_player-variables' as *;
-// Like the time tooltip
-.video-js .vjs-progress-holder .vjs-storyboard-sprite-placeholder {
- display: none;
-}
-
-.video-js .vjs-progress-control:hover .vjs-storyboard-sprite-placeholder,
-.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-storyboard-sprite-placeholder {
- display: block;
-
- // Ensure that we maintain a font-size of ~10px.
- font-size: 0.6em;
- visibility: visible;
-}
-
.video-js.vjs-peertube-skin .vjs-control-bar {
z-index: 100;
@@ -26,11 +12,8 @@
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
transition: visibility 0.3s, opacity 0.3s !important;
- &.control-bar-hidden {
- display: none !important;
- }
-
- > button:first-child {
+ > button:not(.vjs-hidden):first-child,
+ > button.vjs-hidden + button:not(.vjs-hidden) {
@include margin-left($first-control-bar-element-margin-left);
}
@@ -167,7 +150,7 @@
}
}
- .vjs-live-control {
+ .vjs-pt-live-control {
padding: 5px 7px;
border-radius: 3px;
height: fit-content;
@@ -245,6 +228,7 @@
.vjs-next-video,
.vjs-previous-video {
width: $control-bar-button-width - 4px;
+ cursor: pointer;
&.vjs-disabled {
cursor: default;
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 5d0307d95..4bfd67a26 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -10,3 +10,4 @@
@use './playlist';
@use './stats';
@use './offline-notification';
+@use './storyboard.scss';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index d150c54ee..b0019d2c9 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -170,7 +170,8 @@
}
}
- &.vjs-scrubbing {
+ &.vjs-scrubbing,
+ &.vjs-mobile-sliding {
.vjs-mobile-buttons-overlay {
display: none;
}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 4df8dbaf0..572ae7050 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -84,7 +84,9 @@ body {
}
// Do not display poster when video is starting
- &.vjs-has-autoplay:not(.vjs-has-started) {
+ // Or if we change resolution manually
+ &.vjs-has-autoplay:not(.vjs-has-started),
+ &.vjs-updating-resolution {
.vjs-poster {
opacity: 0;
visibility: hidden;
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index d2346c126..369c827f7 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -75,6 +75,7 @@ $setting-transition-easing: ease-out;
> .vjs-menu {
flex: 1;
min-width: 200px;
+ padding: 5px 0;
}
> .vjs-menu,
@@ -90,14 +91,6 @@ $setting-transition-easing: ease-out;
background-color: rgba(255, 255, 255, 0.2);
}
- &:first-child {
- margin-top: 5px;
- }
-
- &:last-child {
- margin-bottom: 5px;
- }
-
&.disabled {
opacity: 0.5;
cursor: default !important;
diff --git a/client/src/sass/player/storyboard.scss b/client/src/sass/player/storyboard.scss
new file mode 100644
index 000000000..c80d1b59d
--- /dev/null
+++ b/client/src/sass/player/storyboard.scss
@@ -0,0 +1,26 @@
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
+
+// Like the time tooltip
+.video-js .vjs-progress-holder .vjs-storyboard-sprite-placeholder {
+ display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-storyboard-sprite-placeholder,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-storyboard-sprite-placeholder {
+ display: block;
+
+ // Ensure that we maintain a font-size of ~10px.
+ font-size: 0.6em;
+ visibility: visible;
+}
+
+.video-js.vjs-settings-dialog-opened {
+ .vjs-storyboard-sprite-placeholder,
+ .vjs-time-tooltip,
+ .vjs-mouse-display {
+ display: none !important;
+ }
+}
diff --git a/client/src/shims/http.ts b/client/src/shims/http.ts
deleted file mode 100644
index 1b1767aab..000000000
--- a/client/src/shims/http.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('stream-http')
diff --git a/client/src/shims/https.ts b/client/src/shims/https.ts
deleted file mode 100644
index f5ef70430..000000000
--- a/client/src/shims/https.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('https-browserify')
diff --git a/client/src/shims/stream.ts b/client/src/shims/stream.ts
deleted file mode 100644
index 977fd05a0..000000000
--- a/client/src/shims/stream.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('stream-browserify')
diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index a99f1edae..cdda122b2 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -72,15 +72,12 @@ export class PeerTubeEmbedApi {
private setResolution (resolutionId: number) {
logger.info(`Set resolution ${resolutionId}`)
- if (this.isWebtorrent()) {
- if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
-
- this.embed.player.webtorrent().changeQuality(resolutionId)
-
+ if (this.isWebVideo() && resolutionId === -1) {
+ logger.error('Auto resolution cannot be set in web video player mode')
return
}
- this.embed.player.p2pMediaLoader().getHLSJS().currentLevel = resolutionId
+ this.embed.player.peertubeResolutions().select({ id: resolutionId, fireCallback: true })
}
private getCaptions (): PeerTubeTextTrack[] {
@@ -152,8 +149,8 @@ export class PeerTubeEmbedApi {
// ---------------------------------------------------------------------------
// PeerTube specific capabilities
- this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
- this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
+ this.embed.player.peertubeResolutions().on('resolutions-added', () => this.loadResolutions())
+ this.embed.player.peertubeResolutions().on('resolutions-changed', () => this.loadResolutions())
this.loadResolutions()
@@ -193,7 +190,7 @@ export class PeerTubeEmbedApi {
})
}
- private isWebtorrent () {
- return !!this.embed.player.webtorrent
+ private isWebVideo () {
+ return !!this.embed.player.webVideo
}
}
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index a74bb4cee..e2dc02b60 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -44,11 +44,11 @@
-
+
-
+
@@ -60,8 +60,6 @@
-
-