X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=7929c1fa178454430b6f14d95b448064290e7643;hb=d77014491b339b4dcfab95c05507dd5f579a6d7d;hp=eac676be840cbcc57abb2af77c4fbd76d84ff210;hpb=202f6b6c9dcc9b0aec4b0c1b15e455c22a7952a7;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 eac676be8..7929c1fa1 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -2,19 +2,22 @@ import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/co import { ActivatedRoute, Router } from '@angular/router' 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 { 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' @Component({ selector: 'my-video-watch', @@ -26,13 +29,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { @ViewChild('videoShareModal') videoShareModal: VideoShareComponent @ViewChild('videoReportModal') videoReportModal: VideoReportComponent - downloadSpeed: number + otherVideosDisplayed: Video[] = [] + error = false loading = false - numPeers: number player: videojs.Player - playerElement: HTMLMediaElement - uploadSpeed: number + playerElement: HTMLVideoElement userRating: UserVideoRateType = null video: VideoDetails = null videoPlayerLoaded = false @@ -43,7 +45,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { completeVideoDescription: string shortVideoDescription: string videoHTMLDescription = '' + likesBarTooltipText = '' + private otherVideos: Video[] = [] private paramsSub: Subscription constructor ( @@ -59,8 +63,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private markdownService: MarkdownService ) {} + get user () { + return this.authService.getUser() + } + ngOnInit () { + this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt') + .subscribe( + data => this.otherVideos = data.videos, + err => console.error(err) + ) + this.paramsSub = this.route.params.subscribe(routeParams => { + if (this.videoPlayerLoaded) { + this.player.pause() + } + let uuid = routeParams['uuid'] this.videoService.getVideo(uuid).subscribe( video => this.onVideoFetched(video), @@ -85,63 +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) - ) - } - - 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) { 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 @@ -152,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) ) } ) @@ -168,7 +151,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } showLessDescription () { - this.updateVideoDescription(this.shortVideoDescription) this.completeDescriptionShown = false } @@ -190,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) } ) } @@ -213,16 +195,49 @@ 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) + } + + 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()) + 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.message) + ) + } + ) } private updateVideoDescription (description: string) { @@ -231,9 +246,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } private setVideoDescriptionHTML () { + if (!this.video.description) { + this.videoHTMLDescription = '' + return + } + this.videoHTMLDescription = this.markdownService.markdownToHTML(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 let message = '' @@ -266,8 +290,12 @@ 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.authService.getUser())) { + if (this.video.isVideoNSFWForUser(this.user)) { observable = this.confirmService.confirm( 'This video contains mature or explicit content. Are you sure you want to watch it?', 'Mature or explicit content' @@ -283,38 +311,43 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.router.navigate([ '/videos/list' ]) } - 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 - } + // Player was already loaded + if (this.videoPlayerLoaded !== true) { + this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') + + // If autoplay is true, we don't really need a poster + if (this.isAutoplay() === false) { + this.playerElement.poster = this.video.previewUrl } - } - this.videoPlayerLoaded = true + const videojsOptions = { + controls: true, + autoplay: this.isAutoplay(), + plugins: { + peertube: { + videoFiles: this.video.files, + playerElement: this.playerElement, + peerTubeLink: false + }, + hotkeys: {} + } + } - const self = this - videojs(this.playerElement, videojsOptions, function () { - self.player = this - this.on('customError', (event, data) => { - self.handleError(data.err) - }) + this.videoPlayerLoaded = true - this.on('torrentInfo', (event, data) => { - self.downloadSpeed = data.downloadSpeed - self.numPeers = data.numPeers - self.uploadSpeed = data.uploadSpeed + const self = this + 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) + } this.setVideoDescriptionHTML() + this.setVideoLikesBarTooltipText() this.setOpenGraphTags() this.checkUserRating() @@ -324,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 @@ -373,4 +431,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { }, viewTimeoutSeconds * 1000) } + + private isAutoplay () { + // True by default + if (!this.user) return true + + // Be sure the autoPlay is set to false + return this.user.autoPlayVideo !== false + } }