From 3bcfff7f446d0a1d8ef5adf340375e178259a42c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 14 Feb 2018 17:20:39 +0100 Subject: [PATCH] Fix video play promise error on non supported browsers --- .../video/infinite-scroller.directive.ts | 1 + .../+video-watch/video-watch.component.ts | 6 ++- .../assets/player/peertube-videojs-plugin.ts | 37 +++++++++++-------- client/src/standalone/videos/embed.ts | 3 +- 4 files changed, 28 insertions(+), 19 deletions(-) diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts index 52d8b2b37..1da02f60f 100644 --- a/client/src/app/shared/video/infinite-scroller.directive.ts +++ b/client/src/app/shared/video/infinite-scroller.directive.ts @@ -1,6 +1,7 @@ import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core' import 'rxjs/add/operator/debounceTime' import 'rxjs/add/operator/distinct' +import 'rxjs/add/operator/distinctUntilChanged' import 'rxjs/add/operator/filter' import 'rxjs/add/operator/map' import 'rxjs/add/operator/startWith' diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index b7779ae9a..7a64406e6 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -330,7 +330,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { videoFiles: this.video.files, playerElement: this.playerElement, peerTubeLink: false, - videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid) + videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), + videoDuration: this.video.duration }, hotkeys: { enableVolumeScroll: false @@ -350,7 +351,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { }) }) } else { - this.player.peertube().setVideoFiles(this.video.files, this.videoService.getVideoViewUrl(this.video.uuid)) + const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) + this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) } this.setVideoDescriptionHTML() diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index fecd4edec..01a630cb6 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -25,6 +25,7 @@ type PeertubePluginOptions = { playerElement: HTMLVideoElement peerTubeLink: boolean videoViewUrl: string + videoDuration: number } // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts @@ -221,7 +222,9 @@ class PeerTubePlugin extends Plugin { private torrent: WebTorrent.Torrent private autoplay = false private videoViewUrl: string + private videoDuration: number private videoViewInterval + private torrentInfoInterval constructor (player: videojs.Player, options: PeertubePluginOptions) { super(player, options) @@ -232,6 +235,7 @@ class PeerTubePlugin extends Plugin { this.videoFiles = options.videoFiles this.videoViewUrl = options.videoViewUrl + this.videoDuration = options.videoDuration // Hack to "simulate" src link in video.js >= 6 // Without this, we can't play the video after pausing it @@ -245,11 +249,14 @@ class PeerTubePlugin extends Plugin { this.player.ready(() => { this.initializePlayer(options) this.runTorrentInfoScheduler() - this.prepareRunViewAdd() + this.runViewAdd() }) } dispose () { + clearInterval(this.videoViewInterval) + clearInterval(this.torrentInfoInterval) + // Don't need to destroy renderer, video player will be destroyed this.flushVideoFile(this.currentVideoFile, false) } @@ -291,8 +298,14 @@ class PeerTubePlugin extends Plugin { if (err) return this.handleError(err) this.renderer = renderer - if (!this.player.paused()) this.player.play().then(done) - else done() + if (!this.player.paused()) { + const playPromise = this.player.play() + if (playPromise !== undefined) return playPromise.then(done) + + return done() + } + + return done() }) }) @@ -340,12 +353,13 @@ class PeerTubePlugin extends Plugin { } } - setVideoFiles (files: VideoFile[], videoViewUrl: string) { + setVideoFiles (files: VideoFile[], videoViewUrl: string, videoDuration: number) { this.videoViewUrl = videoViewUrl + this.videoDuration = videoDuration this.videoFiles = files // Re run view add for the new video - this.prepareRunViewAdd() + this.runViewAdd() this.updateVideoFile(undefined, () => this.player.play()) } @@ -375,7 +389,7 @@ class PeerTubePlugin extends Plugin { } private runTorrentInfoScheduler () { - setInterval(() => { + this.torrentInfoInterval = setInterval(() => { if (this.torrent !== undefined) { this.trigger('torrentInfo', { downloadSpeed: this.torrent.downloadSpeed, @@ -386,22 +400,13 @@ class PeerTubePlugin extends Plugin { }, 1000) } - private prepareRunViewAdd () { - if (this.player.readyState() < 1) { - return this.player.one('loadedmetadata', () => this.runViewAdd()) - } - - this.runViewAdd() - } - private runViewAdd () { this.clearVideoViewInterval() // After 30 seconds (or 3/4 of the video), add a view to the video let minSecondsToView = 30 - const duration = this.player.duration() - if (duration < minSecondsToView) minSecondsToView = (duration * 3) / 4 + if (this.videoDuration < minSecondsToView) minSecondsToView = (this.videoDuration * 3) / 4 let secondsViewed = 0 this.videoViewInterval = setInterval(() => { diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 9076f1dc9..da935ef4c 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -32,7 +32,8 @@ loadVideoInfo(videoId) videoFiles: videoInfo.files, playerElement: videoElement, peerTubeLink: true, - videoViewUrl: getVideoUrl(videoId) + '/views' + videoViewUrl: getVideoUrl(videoId) + '/views', + videoDuration: videoInfo.duration }, hotkeys: { enableVolumeScroll: false