Fix changing video we are watching

2 files changed, 34 insertions, 19 deletions

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 d4e3ec014..bec6932ae 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -69,6 +69,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       )
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
+      if (this.videoPlayerLoaded) {
+        this.player.pause()
+      }
+
       let uuid = routeParams['uuid']
       this.videoService.getVideo(uuid).subscribe(
         video => this.onVideoFetched(video),
@@ -276,30 +280,35 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           return this.router.navigate([ '/videos/list' ])
         }
 
-        this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
-
-        const videojsOptions = {
-          controls: true,
-          autoplay: true,
-          plugins: {
-            peertube: {
-              videoFiles: this.video.files,
-              playerElement: this.playerElement,
-              autoplay: true,
-              peerTubeLink: false
+        // Player was already loaded
+        if (this.videoPlayerLoaded !== true) {
+          this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
+
+          const videojsOptions = {
+            controls: true,
+            autoplay: true,
+            plugins: {
+              peertube: {
+                videoFiles: this.video.files,
+                playerElement: this.playerElement,
+                autoplay: true,
+                peerTubeLink: false
+              }
             }
           }
-        }
 
-        this.videoPlayerLoaded = true
+          this.videoPlayerLoaded = true
 
-        const self = this
-        videojs(this.playerElement, videojsOptions, function () {
-          self.player = this
-          this.on('customError', (event, data) => {
-            self.handleError(data.err)
+          const self = this
+          videojs(this.playerElement, videojsOptions, function () {
+            self.player = this
+            this.on('customError', (event, data) => {
+              self.handleError(data.err)
+            })
           })
-        })
+        } else {
+          (this.player as any).setVideoFiles(this.video.files)
+        }
 
         this.setVideoDescriptionHTML()
 
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 4ba37b7d9..4898c1efe 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -283,6 +283,12 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
     }
   }
 
+  player.setVideoFiles = function (files: VideoFile[]) {
+    player.videoFiles = files
+
+    player.updateVideoFile(undefined, () => player.play())
+  }
+
   player.ready(function () {
     const controlBar = player.controlBar