Fix watch page video change

client/package.json

@@ -78,9 +78,9 @@
     "tslint-config-standard": "^7.0.0",
     "typescript": "2.7.2",
     "uglifyjs-webpack-plugin": "^1.1.2",
-    "video.js": "^6.2.0",
+    "video.js": "^6.7.3",
     "videojs-dock": "^2.0.2",
-    "videojs-hotkeys": "^0.2.20",
+    "videojs-hotkeys": "^0.2.21",
     "webpack": "^3.3.0",
     "webpack-bundle-analyzer": "^2.9.1",
     "webtorrent": "^0.98.0",

client/src/app/videos/+video-watch/video-watch.component.html

@@ -1,7 +1,7 @@
 <div class="row">
   <!-- We need the video container for videojs so we just hide it -->
   <div [hidden]="videoNotFound" id="video-container">
-     <video id="video-element" class="video-js vjs-peertube-skin"></video>
+    <div id="video-element-wrapper"></div>
   </div>
 
   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>

client/src/app/videos/+video-watch/video-watch.component.scss

@@ -6,7 +6,7 @@
   display: flex;
   justify-content: center;
 
-  #video-element {
+  /deep/ .video-js {
     width: 888px;
     height: 500px;
 

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,36 +334,40 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       if (res === false) return this.redirectService.redirectToHomepage()
     }
 
-    // Player was already loaded
+    // Player was already loaded, remove old videojs
-    if (this.videoPlayerLoaded !== true) {
+    if (this.videojsInstance) {
-      this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
+      this.videojsInstance.dispose()
-
+      this.videojsInstance = undefined
-      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
-
-      const self = this
-      this.zone.runOutsideAngular(() => {
-        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)
     }
 
+    // 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
+
+    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))
+      })
+    })
+
     this.setVideoDescriptionHTML()
     this.setVideoLikesBarTooltipText()
 

client/src/assets/player/peertube-videojs-plugin.ts

@@ -215,7 +215,7 @@ class PeerTubePlugin extends Plugin {
       this.player.posterImage.hide()
       this.updateVideoFile(undefined, () => this.player.play())
     } else {
-      // Proxify first play
+      // Proxy first play
       const oldPlay = this.player.play.bind(this.player)
       this.player.play = () => {
         this.updateVideoFile(undefined, () => oldPlay)
@@ -308,7 +308,7 @@ class PeerTubePlugin extends Plugin {
       this.player.options_.inactivityTimeout = 0
     }
     const enableInactivity = () => {
-      // this.player.options_.inactivityTimeout = saveInactivityTimeout
+      this.player.options_.inactivityTimeout = saveInactivityTimeout
     }
 
     const settingsDialog = this.player.children_.find(c => c.name_ === 'SettingsDialog')

client/src/assets/player/resolution-menu-button.ts

@@ -35,8 +35,7 @@ class ResolutionMenuButton extends MenuButton {
   }
 
   createMenu () {
-    const menu = new Menu(this.player())
+    const menu = new Menu(this.player_)
-
     for (const videoFile of this.player_.peertube().videoFiles) {
       menu.addChild(new ResolutionMenuItem(
         this.player_,

client/src/assets/player/resolution-menu-item.ts

@@ -13,7 +13,7 @@ class ResolutionMenuItem extends MenuItem {
     this.label = options.label
     this.id = options.id
 
-    player.peertube().on('videoFileUpdate', () => this.update())
+    player.peertube().on('videoFileUpdate', () => this.updateSelection())
   }
 
   handleClick (event) {
@@ -22,7 +22,7 @@ class ResolutionMenuItem extends MenuItem {
     this.player_.peertube().updateResolution(this.id)
   }
 
-  update () {
+  updateSelection () {
     this.selected(this.player_.peertube().getCurrentResolutionId() === this.id)
   }
 }

client/src/assets/player/settings-menu-button.ts

@@ -33,7 +33,7 @@ class SettingsButton extends Button {
     this.buildMenu()
     this.bindEvents()
 
-    // Prepare dialog
+    // Prepare the dialog
     this.player().one('play', () => this.hideDialog())
   }
 

client/src/sass/video-js-custom.scss

@@ -77,7 +77,7 @@ $setting-transition-easing: ease-out;
     }
 
     .vjs-icon-placeholder::before {
-      transition: font-size 0.5s, opacity 0.5s;
+      transition: font-size 0.2s, opacity 0.2s;
     }
 
     &:hover {

client/yarn.lock

@@ -7041,9 +7041,9 @@ video.js@^5.19.2:
     videojs-vtt.js "0.12.6"
     xhr "2.2.2"
 
-video.js@^6.2.0:
+video.js@^6.7.3:
-  version "6.6.3"
+  version "6.7.3"
-  resolved "https://registry.yarnpkg.com/video.js/-/video.js-6.6.3.tgz#6ebf8ca607c95961bf07f0ecbe15f4b30c232d1e"
+  resolved "https://registry.yarnpkg.com/video.js/-/video.js-6.7.3.tgz#616ab015a74bb1bc8b092e9b4b8022519756f7c0"
   dependencies:
     babel-runtime "^6.9.2"
     global "4.3.2"
@@ -7051,7 +7051,7 @@ video.js@^6.2.0:
     tsml "1.0.1"
     videojs-font "2.1.0"
     videojs-ie8 "1.1.2"
-    videojs-vtt.js "0.12.4"
+    videojs-vtt.js "0.12.5"
     xhr "2.4.0"
 
 videojs-dock@^2.0.2:
@@ -7069,9 +7069,9 @@ videojs-font@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-2.1.0.tgz#a25930a67f6c9cfbf2bb88dacb8c6b451f093379"
 
-videojs-hotkeys@^0.2.20:
+videojs-hotkeys@^0.2.21:
-  version "0.2.20"
+  version "0.2.21"
-  resolved "https://registry.yarnpkg.com/videojs-hotkeys/-/videojs-hotkeys-0.2.20.tgz#1dce9d42c29da392cf1742b89ba292c6706c8973"
+  resolved "https://registry.yarnpkg.com/videojs-hotkeys/-/videojs-hotkeys-0.2.21.tgz#aa0a0a8484e8a8311ff9f4ba82d0934348566bad"
 
 videojs-ie8@1.1.2:
   version "1.1.2"
@@ -7083,9 +7083,9 @@ videojs-swf@5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/videojs-swf/-/videojs-swf-5.4.1.tgz#2077ef71c749f2c7823ef49babae4dd2acb08f87"
 
-videojs-vtt.js@0.12.4:
+videojs-vtt.js@0.12.5:
-  version "0.12.4"
+  version "0.12.5"
-  resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.12.4.tgz#38f2499e31efb3fa93590ddad4cb663275a4b161"
+  resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.12.5.tgz#32852732741c8b4e7a4314caa2cd93646a9c2d40"
   dependencies:
     global "^4.3.1"