X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fwebtorrent%2Fwebtorrent-plugin.ts;h=e557fe722e3f7d81989d8d0769355fcb02548fcd;hb=d61893f7236abbed30c25b1823e6ecad93a8e8dd;hp=c7182acc94477585c3c8cb9bac46330112def8a8;hpb=f0a3988066f72a28bb44520af072f18d91d77dde;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts index c7182acc9..e557fe722 100644 --- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts +++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts @@ -1,20 +1,17 @@ -// FIXME: something weird with our path definition in tsconfig and typings -// @ts-ignore -import * as videojs from 'video.js' - +import videojs from 'video.js' import * as WebTorrent from 'webtorrent' -import { VideoFile } from '../../../../../shared/models/videos/video.model' import { renderVideo } from './video-renderer' -import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings' -import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils' +import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings' +import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution, isIOS, isSafari } from '../utils' import { PeertubeChunkStore } from './peertube-chunk-store' import { getAverageBandwidthInStore, getStoredMute, + getStoredP2PEnabled, getStoredVolume, - getStoredWebTorrentEnabled, saveAverageBandwidth } from '../peertube-player-local-storage' +import { VideoFile } from '@shared/models' const CacheChunkStore = require('cache-chunk-store') @@ -24,14 +21,16 @@ type PlayOptions = { delay?: number } -const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') +const Plugin = videojs.getPlugin('plugin') + class WebTorrentPlugin extends Plugin { + readonly videoFiles: VideoFile[] + private readonly playerElement: HTMLVideoElement private readonly autoplay: boolean = false private readonly startTime: number = 0 - private readonly savePlayerSrcFunction: Function - private readonly videoFiles: VideoFile[] + private readonly savePlayerSrcFunction: videojs.Player['src'] private readonly videoDuration: number private readonly CONSTANTS = { INFO_SCHEDULER: 1000, // Don't change this @@ -49,7 +48,6 @@ class WebTorrentPlugin extends Plugin { dht: false }) - private player: any private currentVideoFile: VideoFile private torrent: WebTorrent.Torrent @@ -70,14 +68,14 @@ class WebTorrentPlugin extends Plugin { private downloadSpeeds: number[] = [] - constructor (player: videojs.Player, options: WebtorrentPluginOptions) { - super(player, options) + constructor (player: videojs.Player, options?: WebtorrentPluginOptions) { + super(player) this.startTime = timeToInt(options.startTime) // Disable auto play on iOS - this.autoplay = options.autoplay && this.isIOS() === false - this.playerRefusedP2P = !getStoredWebTorrentEnabled() + this.autoplay = options.autoplay + this.playerRefusedP2P = !getStoredP2PEnabled() this.videoFiles = options.videoFiles this.videoDuration = options.videoDuration @@ -134,25 +132,29 @@ class WebTorrentPlugin extends Plugin { done: () => void = () => { /* empty */ } ) { // Automatically choose the adapted video file - if (videoFile === undefined) { + 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.disableErrorDisplay() + this.disableErrorDisplay(); // 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.src = () => true + (this.player as any).src = () => true const oldPlaybackRate = this.player.playbackRate() const previousVideoFile = this.currentVideoFile @@ -160,7 +162,7 @@ class WebTorrentPlugin extends Plugin { // Don't try on iOS that does not support MediaSource // Or don't use P2P if webtorrent is disabled - if (this.isIOS() || this.playerRefusedP2P) { + if (isIOS() || this.playerRefusedP2P) { return this.fallbackToHttp(options, () => { this.player.playbackRate(oldPlaybackRate) return done() @@ -181,20 +183,29 @@ class WebTorrentPlugin extends Plugin { const currentTime = this.player.currentTime() const isPaused = this.player.paused() - // Remove poster to have black background - this.playerElement.poster = '' - // 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) } @@ -220,23 +231,36 @@ class WebTorrentPlugin extends Plugin { this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.getCurrentResolutionId() }) } + isAutoResolutionPossible () { + return this.autoResolutionPossible + } + getTorrent () { return this.torrent } + getCurrentVideoFile () { + return this.currentVideoFile + } + private addTorrent ( magnetOrTorrentUrl: string, previousVideoFile: VideoFile, options: PlayOptions, done: Function ) { + if (!magnetOrTorrentUrl) return this.fallbackToHttp(options, done) + console.log('Adding ' + magnetOrTorrentUrl + '.') const oldTorrent = this.torrent const torrentOptions = { - store: (chunkLength: number, storeOpts: any) => new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), { - max: 100 - }) + // 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 + }) + } } this.torrent = this.webtorrent.add(magnetOrTorrentUrl, torrentOptions, torrent => { @@ -313,7 +337,7 @@ class WebTorrentPlugin extends Plugin { const playPromise = this.player.play() if (playPromise !== undefined) { - return playPromise.then(done) + return playPromise.then(() => done()) .catch((err: Error) => { if (err.message.indexOf('The play() request was interrupted by a call to pause()') !== -1) { return @@ -324,6 +348,7 @@ class WebTorrentPlugin extends Plugin { 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() }) @@ -338,45 +363,48 @@ class WebTorrentPlugin extends Plugin { } private getAppropriateFile (averageDownloadSpeed?: number): VideoFile { - if (this.videoFiles === undefined || this.videoFiles.length === 0) return undefined - if (this.videoFiles.length === 1) return this.videoFiles[0] + if (this.videoFiles === undefined) return undefined + + const files = this.videoFiles.filter(f => f.resolution.id !== 0) + + if (files.length === 0) return undefined + if (files.length === 1) return files[0] - // Don't change the torrent is the play was ended + // 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 as number + 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 = this.videoFiles[0].resolution.id - for (let i = this.videoFiles.length - 1; i >= 0; i--) { - const resolutionId = this.videoFiles[i].resolution.id - if (resolutionId >= playerHeight) { + 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 = this.videoFiles - .filter(f => f.resolution.id <= maxResolution) - .filter(f => { - const fileBitrate = (f.size / this.videoDuration) - let threshold = fileBitrate + 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) - } + // 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 - }) + return averageDownloadSpeed > threshold + }) // If the download speed is too bad, return the lowest resolution we have - if (filteredFiles.length === 0) return videoFileMinByResolution(this.videoFiles) + if (filteredFiles.length === 0) return videoFileMinByResolution(files) return videoFileMaxByResolution(filteredFiles) } @@ -398,15 +426,15 @@ class WebTorrentPlugin extends Plugin { private initializePlayer () { this.buildQualities() - if (this.autoplay === true) { + if (this.autoplay) { 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.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 @@ -465,6 +493,7 @@ class WebTorrentPlugin extends Plugin { if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed) return this.player.trigger('p2pInfo', { + source: 'webtorrent', http: { downloadSpeed: 0, uploadSpeed: 0, @@ -524,10 +553,6 @@ class WebTorrentPlugin extends Plugin { this.player.removeClass('vjs-error-display-enabled') } - private isIOS () { - return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform) - } - private pickAverageVideoFile () { if (this.videoFiles.length === 1) return this.videoFiles[0] @@ -598,7 +623,7 @@ class WebTorrentPlugin extends Plugin { video: qualityLevelsPayload } } - this.player.tech_.trigger('loadedqualitydata', payload) + this.player.tech(true).trigger('loadedqualitydata', payload) } private buildQualityLabel (file: VideoFile) { @@ -630,9 +655,9 @@ class WebTorrentPlugin extends Plugin { return } - for (let i = 0; i < qualityLevels; i++) { - const q = this.player.qualityLevels[i] - if (q.height === resolutionId) qualityLevels.selectedIndex = i + for (let i = 0; i < qualityLevels.length; i++) { + const q = qualityLevels[i] + if (q.height === resolutionId) qualityLevels.selectedIndex_ = i } } }