]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/videos/+video-watch/video-watch.component.ts
Nginx config file: remove text/html from gzip_types
[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / video-watch.component.ts
index d838ebe79c916d689d2efe6e195121af80ef1adc..ee504bc58c8219320c9e8c656703e1c8d33b5ab3 100644 (file)
@@ -5,29 +5,31 @@ 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'
+import { Notifier, ServerService } from '@app/core'
 import { forkJoin, Subscription } from 'rxjs'
-import * as videojs from 'video.js'
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import videojs from 'video.js'
 import 'videojs-hotkeys'
+import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import * as WebTorrent from 'webtorrent'
-import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoRateType, VideoState } from '../../../../../shared'
+import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
 import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { RestExtractor, VideoBlacklistService } from '../../shared'
 import { VideoDetails } from '../../shared/video/video-details.model'
-import { Video } from '../../shared/video/video.model'
 import { VideoService } from '../../shared/video/video.service'
-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 { VideoBlacklistComponent } from './modal/video-blacklist.component'
+import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
 import { addContextMenu, getVideojsOptions, loadLocaleInVideoJS } from '../../../assets/player/peertube-player'
-import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { environment } from '../../../environments/environment'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { VideoCaptionService } from '@app/shared/video-caption'
+import { MarkdownService } from '@app/shared/renderer'
 
 @Component({
   selector: 'my-video-watch',
@@ -42,8 +44,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
   @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
   @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
-
-  otherVideosDisplayed: Video[] = []
+  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
 
   player: videojs.Player
   playerElement: HTMLVideoElement
@@ -58,9 +59,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   likesBarTooltipText = ''
   hasAlreadyAcceptedPrivacyConcern = false
   remoteServerDown = false
+  hotkeys: Hotkey[]
 
   private videojsLocaleLoaded = false
-  private otherVideos: Video[] = []
   private paramsSub: Subscription
 
   constructor (
@@ -75,12 +76,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private authService: AuthService,
     private serverService: ServerService,
     private restExtractor: RestExtractor,
-    private notificationsService: NotificationsService,
+    private notifier: Notifier,
     private markdownService: MarkdownService,
     private zone: NgZone,
     private redirectService: RedirectService,
     private videoCaptionService: VideoCaptionService,
     private i18n: I18n,
+    private hotkeysService: HotkeysService,
     @Inject(LOCALE_ID) private localeId: string
   ) {}
 
@@ -96,16 +98,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.hasAlreadyAcceptedPrivacyConcern = true
     }
 
-    this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
-        .subscribe(
-          data => {
-            this.otherVideos = data.videos
-            this.updateOtherVideosDisplayed()
-          },
-
-          err => console.error(err)
-        )
-
     this.paramsSub = this.route.params.subscribe(routeParams => {
       const uuid = routeParams[ 'uuid' ]
 
@@ -121,14 +113,34 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       )
         .pipe(
           // If 401, the video is private or blacklisted so redirect to 404
-          catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 404 ]))
+          catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
         )
         .subscribe(([ video, captionsResult ]) => {
           const startTime = this.route.snapshot.queryParams.start
-          this.onVideoFetched(video, captionsResult.data, startTime)
+          const subtitle = this.route.snapshot.queryParams.subtitle
+
+          this.onVideoFetched(video, captionsResult.data, { startTime, subtitle })
               .catch(err => this.handleError(err))
         })
     })
+
+    this.hotkeys = [
+      new Hotkey('shift+l', (event: KeyboardEvent): boolean => {
+        this.setLike()
+        return false
+      }, undefined, this.i18n('Like the video')),
+      new Hotkey('shift+d', (event: KeyboardEvent): boolean => {
+        this.setDislike()
+        return false
+      }, undefined, this.i18n('Dislike the video')),
+      new Hotkey('shift+s', (event: KeyboardEvent): boolean => {
+        this.subscribeButton.subscribed ?
+          this.subscribeButton.unsubscribe() :
+          this.subscribeButton.subscribe()
+        return false
+      }, undefined, this.i18n('Subscribe to the account'))
+    ]
+    if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
   }
 
   ngOnDestroy () {
@@ -136,6 +148,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     // Unsubscribe subscriptions
     this.paramsSub.unsubscribe()
+
+    // Unbind hotkeys
+    if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
   }
 
   setLike () {
@@ -189,7 +204,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
           error => {
             this.descriptionLoading = false
-            this.notificationsService.error(this.i18n('Error'), error.message)
+            this.notifier.error(error.message)
           }
         )
   }
@@ -231,16 +246,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
       () => {
-        this.notificationsService.success(
-          this.i18n('Success'),
-          this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name })
-        )
+        this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name }))
 
         this.video.blacklisted = false
         this.video.blacklistedReason = null
       },
 
-      err => this.notificationsService.error(this.i18n('Error'), err.message)
+      err => this.notifier.error(err.message)
     )
   }
 
@@ -278,17 +290,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.videoService.removeVideo(this.video.id)
         .subscribe(
-          status => {
-            this.notificationsService.success(
-              this.i18n('Success'),
-              this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name })
-            )
+          () => {
+            this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
 
             // Go back to the video-list.
             this.redirectService.redirectToHomepage()
           },
 
-          error => this.notificationsService.error(this.i18n('Error'), error.message)
+          error => this.notifier.error(error.message)
         )
   }
 
@@ -338,7 +347,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       return
     }
 
-    this.notificationsService.error(this.i18n('Error'), errorMessage)
+    this.notifier.error(errorMessage)
   }
 
   private checkUserRating () {
@@ -353,11 +362,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
             }
           },
 
-          err => this.notificationsService.error(this.i18n('Error'), err.message)
+          err => this.notifier.error(err.message)
         )
   }
 
-  private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], startTime = 0) {
+  private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], urlOptions: { startTime: number, subtitle: string }) {
     this.video = video
 
     // Re init attributes
@@ -365,7 +374,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.completeDescriptionShown = false
     this.remoteServerDown = false
 
-    this.updateOtherVideosDisplayed()
+    let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
+    // If we are at the end of the video, reset the timer
+    if (this.video.duration - startTime <= 1) startTime = 0
 
     if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) {
       const res = await this.confirmService.confirm(
@@ -403,8 +414,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       peertubeLink: false,
       poster: this.video.previewUrl,
       startTime,
+      subtitle: urlOptions.subtitle,
       theaterMode: true,
-      language: this.localeId
+      language: this.localeId,
+
+      userWatching: this.user && this.user.videosHistoryEnabled === true ? {
+        url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
+        authorizationHeader: this.authService.getRequestHeaderValue()
+      } : undefined
     })
 
     if (this.videojsLocaleLoaded === false) {
@@ -414,9 +431,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     const self = this
     this.zone.runOutsideAngular(async () => {
-      videojs(this.playerElement, videojsOptions, function () {
+      videojs(this.playerElement, videojsOptions, function (this: videojs.Player) {
         self.player = this
-        this.on('customError', (event, data) => self.handleError(data.err))
+        this.on('customError', ({ err }: { err: any }) => self.handleError(err))
 
         addContextMenu(self.player, self.video.embedUrl)
       })
@@ -429,7 +446,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.checkUserRating()
   }
 
-  private setRating (nextRating) {
+  private setRating (nextRating: UserVideoRateType) {
     let method
     switch (nextRating) {
       case 'like':
@@ -451,11 +468,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
               this.userRating = nextRating
             },
 
-            err => this.notificationsService.error(this.i18n('Error'), err.message)
+            (err: { message: string }) => this.notifier.error(err.message)
           )
   }
 
-  private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) {
+  private updateVideoRating (oldRating: UserVideoRateType, newRating: UserVideoRateType) {
     let likesToIncrement = 0
     let dislikesToIncrement = 0
 
@@ -474,12 +491,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.setVideoLikesBarTooltipText()
   }
 
-  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)