Fix watch page video change

[github/Chocobozzz/PeerTube.git] / 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 b60e58fb09521d1b0371e31f6450a16609f04fe9..9563394dcd49e91731be8f8c629055818d73b05d 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { RedirectService } from '@app/core/routing/redirect.service'
+import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
 import { MetaService } from '@ngx-meta/core'
 import { NotificationsService } from 'angular2-notifications'
@@ -20,6 +21,7 @@ import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './modal/video-download.component'
 import { VideoReportComponent } from './modal/video-report.component'
 import { VideoShareComponent } from './modal/video-share.component'
+import { getVideojsOptions } from '../../../assets/player/peertube-player'
 
 @Component({
   selector: 'my-video-watch',
@@ -54,6 +56,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private otherVideos: Video[] = []
   private paramsSub: Subscription
+  private videojsInstance: videojs.Player
 
   constructor (
     private elementRef: ElementRef,
@@ -75,7 +78,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit () {
-    if (WebTorrent.WEBRTC_SUPPORT === false || localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true') {
+    if (
+      WebTorrent.WEBRTC_SUPPORT === false ||
+      peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
+    ) {
       this.hasAlreadyAcceptedPrivacyConcern = true
     }
 
@@ -262,7 +268,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   acceptedPrivacyConcern () {
-    localStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
+    peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
     this.hasAlreadyAcceptedPrivacyConcern = true
   }
 
@@ -328,68 +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')
-
-      // If autoplay is true, we don't really need a poster
-      if (this.isAutoplay() === false) {
-        this.playerElement.poster = this.video.previewUrl
-      }
-
-      const videojsOptions = {
-        controls: true,
-        autoplay: this.isAutoplay(),
-        playbackRates: [ 0.5, 1, 1.5, 2 ],
-        plugins: {
-          peertube: {
-            videoFiles: this.video.files,
-            playerElement: this.playerElement,
-            videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
-            videoDuration: this.video.duration
-          },
-          hotkeys: {
-            enableVolumeScroll: false
-          }
-        },
-        controlBar: {
-          children: [
-            'playToggle',
-            'currentTimeDisplay',
-            'timeDivider',
-            'durationDisplay',
-            'liveDisplay',
-
-            'flexibleWidthSpacer',
-            'progressControl',
-
-            'webTorrentButton',
-
-            'playbackRateMenuButton',
-
-            'muteToggle',
-            'volumeControl',
-
-            'resolutionMenuButton',
+    // Player was already loaded, remove old videojs
+    if (this.videojsInstance) {
+      this.videojsInstance.dispose()
+      this.videojsInstance = undefined
+    }
 
-            'fullscreenToggle'
-          ]
-        }
-      }
+    // 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()