Fix video play promise error on non supported browsers

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