Add account view

[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 c7e26fad29aecd50fa876666d3f3919bdb8ae51d..4b0c495832833a3e7089aabdf4043b7c7c55b82b 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -22,6 +22,7 @@ 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'
+import { ServerService } from '@app/core'
 
 @Component({
   selector: 'my-video-watch',
@@ -38,12 +39,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   otherVideosDisplayed: Video[] = []
 
-  error = false
   player: videojs.Player
   playerElement: HTMLVideoElement
   userRating: UserVideoRateType = null
   video: VideoDetails = null
-  videoPlayerLoaded = false
   videoNotFound = false
   descriptionLoading = false
 
@@ -66,6 +65,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private confirmService: ConfirmService,
     private metaService: MetaService,
     private authService: AuthService,
+    private serverService: ServerService,
     private notificationsService: NotificationsService,
     private markdownService: MarkdownService,
     private zone: NgZone,
@@ -95,16 +95,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       )
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
-      if (this.videoPlayerLoaded) {
+      if (this.player) {
         this.player.pause()
       }
 
       const uuid = routeParams['uuid']
-      // Video did not changed
+      // Video did not change
       if (this.video && this.video.uuid === uuid) return
-
+      // Video did change
       this.videoService.getVideo(uuid).subscribe(
-        video => this.onVideoFetched(video),
+        video => {
+          const startTime = this.route.snapshot.queryParams.start
+          this.onVideoFetched(video, startTime)
+            .catch(err => this.handleError(err))
+        },
 
         error => {
           this.videoNotFound = true
@@ -115,10 +119,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy () {
-    // Remove player if it exists
-    if (this.videoPlayerLoaded === true) {
-      videojs(this.playerElement).dispose()
-    }
+    this.flushPlayer()
 
     // Unsubscribe subscriptions
     this.paramsSub.unsubscribe()
@@ -320,12 +321,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                       )
   }
 
-  private async onVideoFetched (video: VideoDetails) {
+  private async onVideoFetched (video: VideoDetails, startTime = 0) {
     this.video = video
 
+    // Re init attributes
+    this.descriptionLoading = false
+    this.completeDescriptionShown = false
+
     this.updateOtherVideosDisplayed()
 
-    if (this.video.isVideoNSFWForUser(this.user)) {
+    if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) {
       const res = await this.confirmService.confirm(
         'This video contains mature or explicit content. Are you sure you want to watch it?',
         'Mature or explicit content'
@@ -333,39 +338,35 @@ 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 = 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
-      })
-
-      this.videoPlayerLoaded = true
+    // Flush old player if needed
+    this.flushPlayer()
+
+    // 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: 2500,
+      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,
+      startTime
+    })
 
-      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(() => {
+      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()
@@ -452,4 +453,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     // Be sure the autoPlay is set to false
     return this.user.autoPlayVideo !== false
   }
+
+  private flushPlayer () {
+    // Remove player if it exists
+    if (this.player) {
+      this.player.dispose()
+      this.player = undefined
+    }
+  }
 }