From b891f9bc612217b5b6f08a886c7d12eca260b9c8 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 3 Apr 2018 17:33:39 +0200
Subject: Fix watch page video change

---
 .../videos/+video-watch/video-watch.component.ts   | 57 ++++++++++++----------
 1 file changed, 31 insertions(+), 26 deletions(-)

(limited to 'client/src/app/videos/+video-watch/video-watch.component.ts')

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 0f7c76d0b..9563394dc 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -56,6 +56,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private otherVideos: Video[] = []
   private paramsSub: Subscription
+  private videojsInstance: videojs.Player
 
   constructor (
     private elementRef: ElementRef,
@@ -333,35 +334,39 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       if (res === false) return this.redirectService.redirectToHomepage()
     }
 
-    // Player was already loaded
-    if (this.videoPlayerLoaded !== true) {
-      this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
-
-      const videojsOptions = getVideojsOptions({
-        autoplay: this.isAutoplay(),
-        inactivityTimeout: 4000,
-        videoFiles: this.video.files,
-        playerElement: this.playerElement,
-        videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
-        videoDuration: this.video.duration,
-        enableHotkeys: true,
-        peertubeLink: false,
-        poster: this.video.previewUrl
-      })
+    // Player was already loaded, remove old videojs
+    if (this.videojsInstance) {
+      this.videojsInstance.dispose()
+      this.videojsInstance = undefined
+    }
+
+    // Build video element, because videojs remove it on dispose
+    const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper')
+    this.playerElement = document.createElement('video')
+    this.playerElement.className = 'video-js vjs-peertube-skin'
+    playerElementWrapper.appendChild(this.playerElement)
+
+    const videojsOptions = getVideojsOptions({
+      autoplay: this.isAutoplay(),
+      inactivityTimeout: 4000,
+      videoFiles: this.video.files,
+      playerElement: this.playerElement,
+      videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
+      videoDuration: this.video.duration,
+      enableHotkeys: true,
+      peertubeLink: false,
+      poster: this.video.previewUrl
+    })
 
-      this.videoPlayerLoaded = true
+    this.videoPlayerLoaded = true
 
-      const self = this
-      this.zone.runOutsideAngular(() => {
-        videojs(this.playerElement, videojsOptions, function () {
-          self.player = this
-          this.on('customError', (event, data) => self.handleError(data.err))
-        })
+    const self = this
+    this.zone.runOutsideAngular(() => {
+      self.videojsInstance = videojs(this.playerElement, videojsOptions, function () {
+        self.player = this
+        this.on('customError', (event, data) => self.handleError(data.err))
       })
-    } else {
-      const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid)
-      this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration)
-    }
+    })
 
     this.setVideoDescriptionHTML()
     this.setVideoLikesBarTooltipText()
-- 
cgit v1.2.3