Add hotkeys in video player

[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 c388b138b3e1cec6b526b69ff57a3161d37d85e9..7929c1fa178454430b6f14d95b448064290e7643 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -5,6 +5,7 @@ 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'
@@ -14,9 +15,9 @@ 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 './video-download.component'
-import { VideoReportComponent } from './video-report.component'
-import { VideoShareComponent } from './video-share.component'
+import { VideoDownloadComponent } from './modal/video-download.component'
+import { VideoReportComponent } from './modal/video-report.component'
+import { VideoShareComponent } from './modal/video-share.component'
 
 @Component({
   selector: 'my-video-watch',
@@ -28,7 +29,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
 
-  otherVideos: Video[] = []
+  otherVideosDisplayed: Video[] = []
 
   error = false
   loading = false
@@ -46,6 +47,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   videoHTMLDescription = ''
   likesBarTooltipText = ''
 
+  private otherVideos: Video[] = []
   private paramsSub: Subscription
 
   constructor (
@@ -69,8 +71,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
       .subscribe(
         data => this.otherVideos = data.videos,
-
-    err => console.error(err)
+        err => console.error(err)
       )
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
@@ -102,42 +103,28 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   setLike () {
     if (this.isUserLoggedIn() === false) return
-    // Already liked this video
-    if (this.userRating === 'like') return
-
-    this.videoService.setVideoLike(this.video.id)
-                     .subscribe(
-                      () => {
-                        // Update the video like attribute
-                        this.updateVideoRating(this.userRating, 'like')
-                        this.userRating = 'like'
-                      },
-
-                      err => this.notificationsService.error('Error', err.message)
-                     )
+    if (this.userRating === 'like') {
+      // Already liked this video
+      this.setRating('none')
+    } else {
+      this.setRating('like')
+    }
   }
 
   setDislike () {
     if (this.isUserLoggedIn() === false) return
-    // Already disliked this video
-    if (this.userRating === 'dislike') return
-
-    this.videoService.setVideoDislike(this.video.id)
-                     .subscribe(
-                      () => {
-                        // Update the video dislike attribute
-                        this.updateVideoRating(this.userRating, 'dislike')
-                        this.userRating = 'dislike'
-                      },
-
-                      err => this.notificationsService.error('Error', err.message)
-                     )
+    if (this.userRating === 'dislike') {
+      // Already disliked this video
+      this.setRating('none')
+    } else {
+      this.setRating('dislike')
+    }
   }
 
   blacklistVideo (event: Event) {
     event.preventDefault()
 
-    this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').subscribe(
+    this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist').subscribe(
       res => {
         if (res === false) return
 
@@ -148,7 +135,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                                       this.router.navigate(['/videos/list'])
                                     },
 
-                                    error => this.notificationsService.error('Error', error.text)
+                                    error => this.notificationsService.error('Error', error.message)
                                   )
       }
     )
@@ -185,7 +172,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
         error => {
           this.descriptionLoading = false
-          this.notificationsService.error('Error', error.text)
+          this.notificationsService.error('Error', error.message)
         }
       )
   }
@@ -208,12 +195,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.authService.isLoggedIn()
   }
 
+  isVideoUpdatable () {
+    return this.video.isUpdatableBy(this.authService.getUser())
+  }
+
   isVideoBlacklistable () {
     return this.video.isBlackistableBy(this.user)
   }
 
   getAvatarPath () {
-    return Account.GET_ACCOUNT_AVATAR_PATH(this.video.account)
+    return Account.GET_ACCOUNT_AVATAR_URL(this.video.account)
   }
 
   getVideoTags () {
@@ -243,7 +234,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                 this.router.navigate([ '/videos/list' ])
               },
 
-              error => this.notificationsService.error('Error', error.text)
+              error => this.notificationsService.error('Error', error.message)
             )
         }
       )
@@ -299,6 +290,10 @@ 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)
+    }
+
     let observable
     if (this.video.isVideoNSFWForUser(this.user)) {
       observable = this.confirmService.confirm(
@@ -332,9 +327,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
               peertube: {
                 videoFiles: this.video.files,
                 playerElement: this.playerElement,
-                autoplay: this.isAutoplay(),
                 peerTubeLink: false
-              }
+              },
+              hotkeys: {}
             }
           }
 
@@ -362,6 +357,31 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     )
   }
 
+  private setRating (nextRating) {
+    let method
+    switch (nextRating) {
+      case 'like':
+        method = this.videoService.setVideoLike
+        break
+      case 'dislike':
+        method = this.videoService.setVideoDislike
+        break
+      case 'none':
+        method = this.videoService.unsetVideoLike
+        break
+    }
+
+    method.call(this.videoService, this.video.id)
+     .subscribe(
+      () => {
+        // Update the video like attribute
+        this.updateVideoRating(this.userRating, nextRating)
+        this.userRating = nextRating
+      },
+      err => this.notificationsService.error('Error', err.message)
+     )
+  }
+
   private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) {
     let likesToIncrement = 0
     let dislikesToIncrement = 0