X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=df5b8d02d6f18c8a3c01fdd8fabe4abd0942985d;hb=f37bad639b36d35c29a464dc52123a1e7c9cd28a;hp=48842602efcfd1e48cca5d0350d1f114ba4f7c05;hpb=be6a4802326b1748e85c0d6fdadf06e70e6ecbb0;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 48842602e..df5b8d02d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -1,20 +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 { 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 { VideoService } from 'app/shared/video/video.service'
-import { Observable } from 'rxjs/Observable'
 import { Subscription } from 'rxjs/Subscription'
-import videojs from 'video.js'
+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 { VideoBlacklistService } from '../../shared'
-import { MarkdownService } from '../shared'
-import { VideoDownloadComponent } from './video-download.component'
-import { VideoReportComponent } from './video-report.component'
-import { VideoShareComponent } from './video-share.component'
+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',
@@ -22,17 +29,19 @@ import { VideoDetails } from '../../shared/video/video-details.model'
   styleUrls: [ './video-watch.component.scss' ]
 })
 export class VideoWatchComponent implements OnInit, OnDestroy {
+  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[] = []
 
-  error = false
-  loading = false
   player: videojs.Player
-  playerElement: HTMLMediaElement
+  playerElement: HTMLVideoElement
   userRating: UserVideoRateType = null
   video: VideoDetails = null
-  videoPlayerLoaded = false
   videoNotFound = false
   descriptionLoading = false
 
@@ -40,7 +49,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   completeVideoDescription: string
   shortVideoDescription: string
   videoHTMLDescription = ''
+  likesBarTooltipText = ''
+  hasAlreadyAcceptedPrivacyConcern = false
 
+  private otherVideos: Video[] = []
   private paramsSub: Subscription
 
   constructor (
@@ -53,14 +65,48 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private metaService: MetaService,
     private authService: AuthService,
     private notificationsService: NotificationsService,
-    private markdownService: MarkdownService
+    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.player) {
+        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),
+        video => {
+          const startTime = this.route.snapshot.queryParams.start
+          this.onVideoFetched(video, startTime)
+            .catch(err => this.handleError(err))
+        },
 
         error => {
           this.videoNotFound = true
@@ -71,10 +117,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()
@@ -82,77 +125,39 @@ 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)
-                     )
-  }
-
-  removeVideo (event: Event) {
-    event.preventDefault()
-
-    this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
-      res => {
-        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'])
-                           },
-
-                           error => this.notificationsService.error('Error', error.text)
-                          )
-      }
-    )
+    if (this.userRating === 'dislike') {
+      // Already disliked this video
+      this.setRating('none')
+    } else {
+      this.setRating('dislike')
+    }
   }
 
-  blacklistVideo (event: Event) {
+  async blacklistVideo (event: Event) {
     event.preventDefault()
 
-    this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').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.videoBlacklistService.blacklistVideo(this.video.id)
-                                  .subscribe(
-                                    status => {
-                                      this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`)
-                                      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)
+                              )
   }
 
   showMoreDescription () {
@@ -165,7 +170,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   showLessDescription () {
-
     this.updateVideoDescription(this.shortVideoDescription)
     this.completeDescriptionShown = false
   }
@@ -187,7 +191,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
         error => {
           this.descriptionLoading = false
-          this.notificationsService.error('Error', error.text)
+          this.notificationsService.error('Error', error.message)
         }
       )
   }
@@ -197,6 +201,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoReportModal.show()
   }
 
+  showSupportModal () {
+    this.videoSupportModal.show()
+  }
+
   showShareModal () {
     this.videoShareModal.show()
   }
@@ -210,16 +218,56 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     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) {
@@ -228,11 +276,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private setVideoDescriptionHTML () {
-    this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
+    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) {
@@ -260,59 +319,83 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                       )
   }
 
-  private onVideoFetched (video: VideoDetails) {
+  private async onVideoFetched (video: VideoDetails, startTime = 0) {
     this.video = video
 
-    let observable
-    if (this.video.isVideoNSFWForUser(this.authService.getUser())) {
-      observable = this.confirmService.confirm(
+    // Re init attributes
+    this.descriptionLoading = false
+    this.completeDescriptionShown = false
+
+    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'
       )
-    } else {
-      observable = Observable.of(true)
+      if (res === false) return this.redirectService.redirectToHomepage()
     }
 
-    observable.subscribe(
-      res => {
-        if (res === false) {
-
-          return this.router.navigate([ '/videos/list' ])
-        }
-
-        this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
-
-        const videojsOptions = {
-          controls: true,
-          autoplay: true,
-          plugins: {
-            peertube: {
-              videoFiles: this.video.files,
-              playerElement: this.playerElement,
-              autoplay: true,
-              peerTubeLink: false
-            }
-          }
-        }
+    // 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
+    })
 
-        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))
+      })
+    })
 
-        const self = this
-        videojs(this.playerElement, videojsOptions, function () {
-          self.player = this
-          this.on('customError', (event, data) => {
-            self.handleError(data.err)
-          })
-        })
+    this.setVideoDescriptionHTML()
+    this.setVideoLikesBarTooltipText()
 
-        this.setVideoDescriptionHTML()
+    this.setOpenGraphTags()
+    this.checkUserRating()
+  }
 
-        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
+    }
 
-        this.prepareViewAdd()
-      }
-    )
+    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) {
@@ -329,6 +412,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 () {
@@ -352,16 +444,19 @@ 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
+  private isAutoplay () {
+    // True by default
+    if (!this.user) return true
 
-    setTimeout(() => {
-      this.videoService
-        .viewVideo(this.video.uuid)
-        .subscribe()
+    // Be sure the autoPlay is set to false
+    return this.user.autoPlayVideo !== false
+  }
 
-    }, viewTimeoutSeconds * 1000)
+  private flushPlayer () {
+    // Remove player if it exists
+    if (this.player) {
+      this.player.dispose()
+      this.player = undefined
+    }
   }
 }