Open mentions in new tab

[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 01e4bbf4af11c8b18445f5e7467d37888359f240..6b118b1de2bfddc2c6ffa725447d14b71b109233 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,10 +1,12 @@
-import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
+import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
 import { MetaService } from '@ngx-meta/core'
 import { NotificationsService } from 'angular2-notifications'
 import { Observable } from 'rxjs/Observable'
 import { Subscription } from 'rxjs/Subscription'
 import * as videojs from 'video.js'
+import 'videojs-hotkeys'
 import { UserVideoRateType, VideoRateType } from '../../../../../shared'
 import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
@@ -27,12 +29,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
 
-  otherVideos: Video[] = []
   otherVideosDisplayed: Video[] = []
 
   error = false
-  loading = false
   player: videojs.Player
   playerElement: HTMLVideoElement
   userRating: UserVideoRateType = null
@@ -47,6 +48,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   videoHTMLDescription = ''
   likesBarTooltipText = ''
 
+  private otherVideos: Video[] = []
   private paramsSub: Subscription
 
   constructor (
@@ -59,7 +61,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private metaService: MetaService,
     private authService: AuthService,
     private notificationsService: NotificationsService,
-    private markdownService: MarkdownService
+    private markdownService: MarkdownService,
+    private zone: NgZone
   ) {}
 
   get user () {
@@ -69,7 +72,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   ngOnInit () {
     this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
       .subscribe(
-        data => this.otherVideos = data.videos,
+        data => {
+          this.otherVideos = data.videos
+          this.updateOtherVideosDisplayed()
+        },
+
         err => console.error(err)
       )
 
@@ -78,7 +85,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         this.player.pause()
       }
 
-      let uuid = routeParams['uuid']
+      const uuid = routeParams['uuid']
+      // Video did not changed
+      if (this.video && this.video.uuid === uuid) return
+
       this.videoService.getVideo(uuid).subscribe(
         video => this.onVideoFetched(video),
 
@@ -181,6 +191,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoReportModal.show()
   }
 
+  showSupportModal () {
+    this.videoSupportModal.show()
+  }
+
   showShareModal () {
     this.videoShareModal.show()
   }
@@ -206,6 +220,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return Account.GET_ACCOUNT_AVATAR_URL(this.video.account)
   }
 
+  getVideoPoster () {
+    if (!this.video) return ''
+
+    return this.video.previewUrl
+  }
+
   getVideoTags () {
     if (!this.video || Array.isArray(this.video.tags) === false) return []
 
@@ -250,7 +270,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       return
     }
 
-    this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
+    this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description)
   }
 
   private setVideoLikesBarTooltipText () {
@@ -289,9 +309,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private onVideoFetched (video: VideoDetails) {
     this.video = video
 
-    if (this.otherVideos.length > 0) {
-      this.otherVideosDisplayed = this.otherVideos.filter(v => v.uuid !== this.video.uuid)
-    }
+    this.updateOtherVideosDisplayed()
 
     let observable
     if (this.video.isVideoNSFWForUser(this.user)) {
@@ -326,8 +344,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
               peertube: {
                 videoFiles: this.video.files,
                 playerElement: this.playerElement,
-                autoplay: this.isAutoplay(),
-                peerTubeLink: false
+                peerTubeLink: false,
+                videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
+                videoDuration: this.video.duration
+              },
+              hotkeys: {
+                enableVolumeScroll: false
               }
             }
           }
@@ -335,14 +357,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           this.videoPlayerLoaded = true
 
           const self = this
-          videojs(this.playerElement, videojsOptions, function () {
-            self.player = this
-            this.on('customError', (event, data) => {
-              self.handleError(data.err)
+          this.zone.runOutsideAngular(() => {
+            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)
+          const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid)
+          this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration)
         }
 
         this.setVideoDescriptionHTML()
@@ -350,8 +375,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
         this.setOpenGraphTags()
         this.checkUserRating()
-
-        this.prepareViewAdd()
       }
     )
   }
@@ -397,6 +420,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.video.dislikes += dislikesToIncrement
   }
 
+  private updateOtherVideosDisplayed () {
+    if (this.video && this.otherVideos && this.otherVideos.length > 0) {
+      this.otherVideosDisplayed = this.otherVideos.filter(v => v.uuid !== this.video.uuid)
+    }
+  }
+
   private setOpenGraphTags () {
     this.metaService.setTitle(this.video.name)
 
@@ -418,19 +447,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.metaService.setTag('url', window.location.href)
   }
 
-  private prepareViewAdd () {
-    // After 30 seconds (or 3/4 of the video), increment add a view
-    let viewTimeoutSeconds = 30
-    if (this.video.duration < viewTimeoutSeconds) viewTimeoutSeconds = (this.video.duration * 3) / 4
-
-    setTimeout(() => {
-      this.videoService
-        .viewVideo(this.video.uuid)
-        .subscribe()
-
-    }, viewTimeoutSeconds * 1000)
-  }
-
   private isAutoplay () {
     // True by default
     if (!this.user) return true