Fix video play promise error on non supported browsers
authorChocobozzz <me@florianbigard.com>
Wed, 14 Feb 2018 16:20:39 +0000 (17:20 +0100)
committerChocobozzz <me@florianbigard.com>
Wed, 14 Feb 2018 17:04:30 +0000 (18:04 +0100)
client/src/app/shared/video/infinite-scroller.directive.ts
client/src/app/videos/+video-watch/video-watch.component.ts
client/src/assets/player/peertube-videojs-plugin.ts
client/src/standalone/videos/embed.ts

index 52d8b2b3718b8b144baf64b77df4184e97117082..1da02f60ffef497cb6e3d5a073c4fc5fdc4b110f 100644 (file)
@@ -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'
index b7779ae9a081aad4c2c93af437df768f4f85ac7a..7a64406e6fc424f087ed4d87187f9c7a7559ef1f 100644 (file)
@@ -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()
index fecd4edec7b03f3a4f50f19487fe8bfdd1989e2b..01a630cb62cc4c12951b29f4078fa5eb38397b7c 100644 (file)
@@ -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(() => {
index 9076f1dc950e238a5f4c9feaea86e8ac78542c9e..da935ef4c97f2da49a500faa2f8f1dcb9181ef64 100644 (file)
@@ -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