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=4afd6160c15b540742002db46b34832d73d0f6bb;hpb=4635f59d7c3fea4b97029f10886c62fdf38b2084;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 4afd6160c..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,10 +1,14 @@ -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 { Observable } from 'rxjs/Observable' 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' @@ -17,6 +21,7 @@ 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', @@ -24,19 +29,19 @@ import { VideoShareComponent } from './modal/video-share.component' 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 - otherVideos: Video[] = [] + otherVideosDisplayed: Video[] = [] - error = false - loading = false player: videojs.Player playerElement: HTMLVideoElement userRating: UserVideoRateType = null video: VideoDetails = null - videoPlayerLoaded = false videoNotFound = false descriptionLoading = false @@ -45,7 +50,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { shortVideoDescription: string videoHTMLDescription = '' likesBarTooltipText = '' + hasAlreadyAcceptedPrivacyConcern = false + private otherVideos: Video[] = [] private paramsSub: Subscription constructor ( @@ -58,7 +65,9 @@ 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 () { @@ -66,21 +75,38 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } 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, + data => { + this.otherVideos = data.videos + this.updateOtherVideosDisplayed() + }, - err => console.error(err) + err => console.error(err) ) this.paramsSub = this.route.params.subscribe(routeParams => { - if (this.videoPlayerLoaded) { + if (this.player) { this.player.pause() } - let uuid = routeParams['uuid'] + 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 @@ -91,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() @@ -102,56 +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) - ) + 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 () { @@ -185,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) } ) } @@ -195,6 +201,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoReportModal.show() } + showSupportModal () { + this.videoSupportModal.show() + } + showShareModal () { this.videoShareModal.show() } @@ -217,7 +227,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } getAvatarPath () { - return Account.GET_ACCOUNT_AVATAR_PATH(this.video.account) + return Account.GET_ACCOUNT_AVATAR_URL(this.video.account) + } + + getVideoPoster () { + if (!this.video) return '' + + return this.video.previewUrl } getVideoTags () { @@ -230,29 +246,30 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.isRemovableBy(this.authService.getUser()) } - removeVideo (event: Event) { + async removeVideo (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 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.`) + 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' ]) - }, + // Go back to the video-list. + this.redirectService.redirectToHomepage() + }, - error => this.notificationsService.error('Error', error.text) - ) - } + 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() @@ -264,7 +281,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return } - this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description) + this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description) } private setVideoLikesBarTooltipText () { @@ -273,6 +290,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private handleError (err: any) { const errorMessage: string = typeof err === 'string' ? err : err.message + if (!errorMessage) return + let message = '' if (errorMessage.indexOf('http error') !== -1) { @@ -300,70 +319,83 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } - private onVideoFetched (video: VideoDetails) { + private async onVideoFetched (video: VideoDetails, startTime = 0) { this.video = video - let observable + // Re init attributes + this.descriptionLoading = false + this.completeDescriptionShown = false + + this.updateOtherVideosDisplayed() + if (this.video.isVideoNSFWForUser(this.user)) { - observable = this.confirmService.confirm( + 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) { + // 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 + }) - return this.router.navigate([ '/videos/list' ]) - } + const self = this + this.zone.runOutsideAngular(() => { + videojs(this.playerElement, videojsOptions, function () { + self.player = this + this.on('customError', (event, data) => self.handleError(data.err)) + }) + }) - // 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 - } - - const videojsOptions = { - controls: true, - autoplay: this.isAutoplay(), - plugins: { - peertube: { - videoFiles: this.video.files, - playerElement: this.playerElement, - autoplay: this.isAutoplay(), - peerTubeLink: false - } - } - } - - this.videoPlayerLoaded = true - - 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.setVideoDescriptionHTML() - this.setVideoLikesBarTooltipText() + 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) { @@ -380,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 () { @@ -403,19 +444,6 @@ 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 - - setTimeout(() => { - this.videoService - .viewVideo(this.video.uuid) - .subscribe() - - }, viewTimeoutSeconds * 1000) - } - private isAutoplay () { // True by default if (!this.user) return true @@ -423,4 +451,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { // Be sure the autoPlay is set to false return this.user.autoPlayVideo !== false } + + private flushPlayer () { + // Remove player if it exists + if (this.player) { + this.player.dispose() + this.player = undefined + } + } }