X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=c7e26fad29aecd50fa876666d3f3919bdb8ae51d;hb=c6352f2c64f3c1ad54f8500f493587cdce3d33c9;hp=bd98e877ca0e468434e514699b7d204425bbea6a;hpb=35bf0c83c80f59ca79f4b84fac8700f17adeb22d;p=github%2FChocobozzz%2FPeerTube.git

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 bd98e877c..c7e26fad2 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -1,21 +1,27 @@
-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 { Observable } from 'rxjs/Observable'
-import { Subscription } from 'rxjs/Subscription'
-
-import videojs from 'video.js'
-import '../../../assets/player/peertube-videojs-plugin'
-
+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 { Subscription } from 'rxjs/Subscription'
+import * as videojs from 'video.js'
+import 'videojs-hotkeys'
+import * as WebTorrent from 'webtorrent'
+import { UserVideoRateType, VideoRateType } from '../../../../../shared'
+import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
-import { VideoMagnetComponent } from './video-magnet.component'
-import { VideoShareComponent } from './video-share.component'
-import { VideoReportComponent } from './video-report.component'
-import { Video, VideoService } from '../shared'
 import { VideoBlacklistService } from '../../shared'
-import { UserVideoRateType, VideoRateType } from '../../../../../shared'
+import { Account } from '../../shared/account/account.model'
+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 { getVideojsOptions } from '../../../assets/player/peertube-player'
 
 @Component({
   selector: 'my-video-watch',
@@ -23,21 +29,32 @@ import { UserVideoRateType, VideoRateType } from '../../../../../shared'
   styleUrls: [ './video-watch.component.scss' ]
 })
 export class VideoWatchComponent implements OnInit, OnDestroy {
-  @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent
+  private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
+
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
+
+  otherVideosDisplayed: Video[] = []
 
-  downloadSpeed: number
   error = false
-  loading = false
-  numPeers: number
   player: videojs.Player
-  playerElement: HTMLMediaElement
-  uploadSpeed: number
+  playerElement: HTMLVideoElement
   userRating: UserVideoRateType = null
-  video: Video = null
+  video: VideoDetails = null
+  videoPlayerLoaded = false
   videoNotFound = false
+  descriptionLoading = false
+
+  completeDescriptionShown = false
+  completeVideoDescription: string
+  shortVideoDescription: string
+  videoHTMLDescription = ''
+  likesBarTooltipText = ''
+  hasAlreadyAcceptedPrivacyConcern = false
 
+  private otherVideos: Video[] = []
   private paramsSub: Subscription
 
   constructor (
@@ -49,18 +66,49 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private confirmService: ConfirmService,
     private metaService: MetaService,
     private authService: AuthService,
-    private notificationsService: NotificationsService
+    private notificationsService: NotificationsService,
+    private markdownService: MarkdownService,
+    private zone: NgZone,
+    private redirectService: RedirectService
   ) {}
 
+  get user () {
+    return this.authService.getUser()
+  }
+
   ngOnInit () {
+    if (
+      WebTorrent.WEBRTC_SUPPORT === false ||
+      peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
+    ) {
+      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 => {
-      let uuid = routeParams['uuid']
+      if (this.videoPlayerLoaded) {
+        this.player.pause()
+      }
+
+      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),
 
         error => {
-          console.error(error)
           this.videoNotFound = true
+          console.error(error)
         }
       )
     })
@@ -68,7 +116,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   ngOnDestroy () {
     // Remove player if it exists
-    if (this.videoNotFound === false) {
+    if (this.videoPlayerLoaded === true) {
       videojs(this.playerElement).dispose()
     }
 
@@ -78,77 +126,75 @@ 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')
+    }
   }
 
-  removeVideo (event: Event) {
+  async blacklistVideo (event: Event) {
     event.preventDefault()
 
-    this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
-      res => {
-        if (res === false) return
+    const res = await this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist')
+    if (res === false) return
 
-        this.videoService.removeVideo(this.video.id)
-                         .subscribe(
-                           status => {
-                             this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
-                             // Go back to the video-list.
-                             this.router.navigate(['/videos/list'])
-                           },
+    this.videoBlacklistService.blacklistVideo(this.video.id)
+                              .subscribe(
+                                status => {
+                                  this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`)
+                                  this.redirectService.redirectToHomepage()
+                                },
 
-                           error => this.notificationsService.error('Error', error.text)
-                          )
-      }
-    )
+                                error => this.notificationsService.error('Error', error.message)
+                              )
   }
 
-  blacklistVideo (event: Event) {
-    event.preventDefault()
+  showMoreDescription () {
+    if (this.completeVideoDescription === undefined) {
+      return this.loadCompleteDescription()
+    }
 
-    this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').subscribe(
-      res => {
-        if (res === false) return
+    this.updateVideoDescription(this.completeVideoDescription)
+    this.completeDescriptionShown = true
+  }
 
-        this.videoBlacklistService.blacklistVideo(this.video.id)
-                                  .subscribe(
-                                    status => {
-                                      this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`)
-                                      this.router.navigate(['/videos/list'])
-                                    },
+  showLessDescription () {
+    this.updateVideoDescription(this.shortVideoDescription)
+    this.completeDescriptionShown = false
+  }
 
-                                    error => this.notificationsService.error('Error', error.text)
-                                  )
-      }
-    )
+  loadCompleteDescription () {
+    this.descriptionLoading = true
+
+    this.videoService.loadCompleteDescription(this.video.descriptionPath)
+      .subscribe(
+        description => {
+          this.completeDescriptionShown = true
+          this.descriptionLoading = false
+
+          this.shortVideoDescription = this.video.description
+          this.completeVideoDescription = description
+
+          this.updateVideoDescription(this.completeVideoDescription)
+        },
+
+        error => {
+          this.descriptionLoading = false
+          this.notificationsService.error('Error', error.message)
+        }
+      )
   }
 
   showReportModal (event: Event) {
@@ -156,33 +202,97 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoReportModal.show()
   }
 
+  showSupportModal () {
+    this.videoSupportModal.show()
+  }
+
   showShareModal () {
     this.videoShareModal.show()
   }
 
-  showMagnetUriModal (event: Event) {
+  showDownloadModal (event: Event) {
     event.preventDefault()
-    this.videoMagnetModal.show()
+    this.videoDownloadModal.show()
   }
 
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
 
-  canUserUpdateVideo () {
+  isVideoUpdatable () {
     return this.video.isUpdatableBy(this.authService.getUser())
   }
 
+  isVideoBlacklistable () {
+    return this.video.isBlackistableBy(this.user)
+  }
+
+  getAvatarPath () {
+    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 []
+
+    return this.video.tags.join(', ')
+  }
+
   isVideoRemovable () {
     return this.video.isRemovableBy(this.authService.getUser())
   }
 
-  isVideoBlacklistable () {
-    return this.video.isBlackistableBy(this.authService.getUser())
+  async removeVideo (event: Event) {
+    event.preventDefault()
+
+    const res = await this.confirmService.confirm('Do you really want to delete this video?', 'Delete')
+    if (res === false) return
+
+    this.videoService.removeVideo(this.video.id)
+      .subscribe(
+        status => {
+          this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
+
+          // Go back to the video-list.
+          this.redirectService.redirectToHomepage()
+        },
+
+        error => this.notificationsService.error('Error', error.message)
+      )
+  }
+
+  acceptedPrivacyConcern () {
+    peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
+    this.hasAlreadyAcceptedPrivacyConcern = true
+  }
+
+  private updateVideoDescription (description: string) {
+    this.video.description = description
+    this.setVideoDescriptionHTML()
+  }
+
+  private setVideoDescriptionHTML () {
+    if (!this.video.description) {
+      this.videoHTMLDescription = ''
+      return
+    }
+
+    this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description)
+  }
+
+  private setVideoLikesBarTooltipText () {
+    this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes`
   }
 
   private handleError (err: any) {
     const errorMessage: string = typeof err === 'string' ? err : err.message
+    if (!errorMessage) return
+
     let message = ''
 
     if (errorMessage.indexOf('http error') !== -1) {
@@ -210,55 +320,83 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                       )
   }
 
-  private onVideoFetched (video: Video) {
+  private async onVideoFetched (video: VideoDetails) {
     this.video = video
 
-    let observable
-    if (this.video.isVideoNSFWForUser(this.authService.getUser())) {
-      observable = this.confirmService.confirm('This video is not safe for work. Are you sure you want to watch it?', 'NSFW')
-    } else {
-      observable = Observable.of(true)
+    this.updateOtherVideosDisplayed()
+
+    if (this.video.isVideoNSFWForUser(this.user)) {
+      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'
+      )
+      if (res === false) return this.redirectService.redirectToHomepage()
     }
 
-    observable.subscribe(
-      res => {
-        if (res === false) {
-          return this.router.navigate([ '/videos/list' ])
-        }
+    // Player was already loaded
+    if (this.videoPlayerLoaded !== true) {
+      this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
 
-        this.playerElement = this.elementRef.nativeElement.querySelector('#video-container')
-
-        const videojsOptions = {
-          controls: true,
-          autoplay: true,
-          plugins: {
-            peertube: {
-              videoFiles: this.video.files,
-              playerElement: this.playerElement,
-              autoplay: true,
-              peerTubeLink: false
-            }
-          }
-        }
+      // If autoplay is true, we don't really need a poster
+      if (this.isAutoplay() === false) {
+        this.playerElement.poster = this.video.previewUrl
+      }
 
-        const self = this
+      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
+
+      const self = this
+      this.zone.runOutsideAngular(() => {
         videojs(this.playerElement, videojsOptions, function () {
           self.player = this
-          this.on('customError', (event, data) => {
-            self.handleError(data.err)
-          })
-
-          this.on('torrentInfo', (event, data) => {
-            self.downloadSpeed = data.downloadSpeed
-            self.numPeers = data.numPeers
-            self.uploadSpeed = data.uploadSpeed
-          })
+          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.setOpenGraphTags()
-        this.checkUserRating()
-      }
-    )
+    this.setVideoDescriptionHTML()
+    this.setVideoLikesBarTooltipText()
+
+    this.setOpenGraphTags()
+    this.checkUserRating()
+  }
+
+  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) {
@@ -275,6 +413,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.video.likes += likesToIncrement
     this.video.dislikes += dislikesToIncrement
+
+    this.video.buildLikeAndDislikePercents()
+    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 () {
@@ -297,4 +444,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.metaService.setTag('og:url', window.location.href)
     this.metaService.setTag('url', window.location.href)
   }
+
+  private isAutoplay () {
+    // True by default
+    if (!this.user) return true
+
+    // Be sure the autoPlay is set to false
+    return this.user.autoPlayVideo !== false
+  }
 }