From 80109b2ddb14ec4a54cede7885611cb9244da3cb Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 18 Apr 2018 10:20:13 +0200 Subject: [PATCH] Handle when autoplay fails --- .../+video-watch/video-watch.component.scss | 2 +- client/src/assets/player/peertube-player.ts | 3 +- .../assets/player/peertube-videojs-plugin.ts | 35 +++++++++++++------ .../assets/player/peertube-videojs-typings.ts | 1 + 4 files changed, 29 insertions(+), 12 deletions(-) diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 3ebeccd4b..8bc9f8d9a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -332,7 +332,7 @@ .video-actions-rates { margin-top: 20px; - align-items: left; + align-items: start; .video-info-likes-dislikes-bar { margin-top: 10px; diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts index e8a258065..f02fe5d75 100644 --- a/client/src/assets/player/peertube-player.ts +++ b/client/src/assets/player/peertube-player.ts @@ -27,11 +27,12 @@ function getVideojsOptions (options: { const videojsOptions = { controls: true, poster: options.poster, - autoplay: options.autoplay, + autoplay: false, inactivityTimeout: options.inactivityTimeout, playbackRates: [ 0.5, 1, 1.5, 2 ], plugins: { peertube: { + autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent videoFiles: options.videoFiles, playerElement: options.playerElement, videoViewUrl: options.videoViewUrl, diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 60c291a50..290d88724 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -68,9 +68,7 @@ class PeerTubePlugin extends Plugin { constructor (player: videojs.Player, options: PeertubePluginOptions) { super(player, options) - // Fix canplay event on google chrome by disabling default videojs autoplay - this.autoplay = this.player.options_.autoplay - this.player.options_.autoplay = false + this.autoplay = options.autoplay this.startTime = options.startTime this.videoFiles = options.videoFiles @@ -190,12 +188,7 @@ class PeerTubePlugin extends Plugin { if (err) return this.fallbackToHttp(done) - if (!this.player.paused()) { - const playPromise = this.player.play() - if (playPromise !== undefined) return playPromise.then(done) - - return done() - } + if (!this.player.paused()) return this.tryToPlay(done) return done() }) @@ -264,6 +257,25 @@ class PeerTubePlugin extends Plugin { this.trigger('autoResolutionUpdate') } + private tryToPlay (done?: Function) { + if (!done) done = function () { /* empty */ } + + const playPromise = this.player.play() + if (playPromise !== undefined) { + return playPromise.then(done) + .catch(err => { + console.error(err) + this.player.pause() + this.player.posterImage.show() + this.player.removeClass('vjs-has-autoplay') + + return done() + }) + } + + return done() + } + private seek (time: number) { this.player.currentTime(time) this.player.handleTechSeeked_() @@ -317,7 +329,10 @@ class PeerTubePlugin extends Plugin { if (this.autoplay === true) { this.player.posterImage.hide() - this.updateVideoFile(undefined, 0, () => this.seek(this.startTime)) + this.updateVideoFile(undefined, 0, () => { + this.seek(this.startTime) + this.tryToPlay() + }) } else { // Proxy first play const oldPlay = this.player.play.bind(this.player) diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index a66caa30b..abdf333e1 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/client/src/assets/player/peertube-videojs-typings.ts @@ -22,6 +22,7 @@ type PeertubePluginOptions = { videoViewUrl: string videoDuration: number startTime: number + autoplay: boolean } // videojs typings don't have some method we need -- 2.41.0