X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=995fb8e2baf229a932853ce7fbf6bee717325170;hb=040467f5c8cba429176423d5e4b83bf5379ad101;hp=7a64406e6fc424f087ed4d87187f9c7a7559ef1f;hpb=3bcfff7f446d0a1d8ef5adf340375e178259a42c;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 7a64406e6..995fb8e2b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -1,16 +1,19 @@ -import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { catchError } from 'rxjs/operators' +import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, 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 { forkJoin, Subscription } from 'rxjs' import * as videojs from 'video.js' import 'videojs-hotkeys' -import { UserVideoRateType, VideoRateType } from '../../../../../shared' +import * as WebTorrent from 'webtorrent' +import { UserVideoRateType, VideoPrivacy, VideoRateType, VideoState } from '../../../../../shared' import '../../../assets/player/peertube-videojs-plugin' import { AuthService, ConfirmService } from '../../core' -import { VideoBlacklistService } from '../../shared' -import { Account } from '../../shared/account/account.model' +import { RestExtractor, VideoBlacklistService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' import { Video } from '../../shared/video/video.model' import { VideoService } from '../../shared/video/video.service' @@ -18,6 +21,13 @@ 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 { addContextMenu, getVideojsOptions, loadLocale } from '../../../assets/player/peertube-player' +import { ServerService } from '@app/core' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { environment } from '../../../environments/environment' +import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' +import { VideoCaptionService } from '@app/shared/video-caption' +import { VideoCaption } from '../../../../../shared/models/videos/video-caption.model' @Component({ selector: 'my-video-watch', @@ -25,19 +35,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 otherVideosDisplayed: Video[] = [] - error = false player: videojs.Player playerElement: HTMLVideoElement userRating: UserVideoRateType = null video: VideoDetails = null - videoPlayerLoaded = false - videoNotFound = false descriptionLoading = false completeDescriptionShown = false @@ -45,12 +55,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy { shortVideoDescription: string videoHTMLDescription = '' likesBarTooltipText = '' + hasAlreadyAcceptedPrivacyConcern = false + remoteServerDown = false + private videojsLocaleLoaded = false private otherVideos: Video[] = [] private paramsSub: Subscription constructor ( private elementRef: ElementRef, + private changeDetector: ChangeDetectorRef, private route: ActivatedRoute, private router: Router, private videoService: VideoService, @@ -58,9 +72,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private confirmService: ConfirmService, private metaService: MetaService, private authService: AuthService, + private serverService: ServerService, + private restExtractor: RestExtractor, private notificationsService: NotificationsService, private markdownService: MarkdownService, - private zone: NgZone + private zone: NgZone, + private redirectService: RedirectService, + private videoCaptionService: VideoCaptionService, + private i18n: I18n, + @Inject(LOCALE_ID) private localeId: string ) {} get user () { @@ -68,38 +88,49 @@ 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 - this.updateOtherVideosDisplayed() - }, + .subscribe( + 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) { - this.player.pause() - } - - let uuid = routeParams['uuid'] - this.videoService.getVideo(uuid).subscribe( - video => this.onVideoFetched(video), - - error => { - this.videoNotFound = true - console.error(error) - } + const uuid = routeParams[ 'uuid' ] + + // Video did not change + if (this.video && this.video.uuid === uuid) return + + if (this.player) this.player.pause() + + // Video did change + forkJoin( + this.videoService.getVideo(uuid), + this.videoCaptionService.listCaptions(uuid) ) + .pipe( + catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ])) + ) + .subscribe(([ video, captionsResult ]) => { + const startTime = this.route.snapshot.queryParams.start + this.onVideoFetched(video, captionsResult.data, startTime) + .catch(err => this.handleError(err)) + }) }) } ngOnDestroy () { - // Remove player if it exists - if (this.videoPlayerLoaded === true) { - videojs(this.playerElement).dispose() - } + this.flushPlayer() // Unsubscribe subscriptions this.paramsSub.unsubscribe() @@ -125,24 +156,24 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - 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(this.i18n('Do you really want to blacklist this video?'), this.i18n('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( + () => { + this.notificationsService.success( + this.i18n('Success'), + this.i18n('Video {{videoName}} had been blacklisted.', { videoName: this.video.name }) + ) + this.redirectService.redirectToHomepage() + }, - error => this.notificationsService.error('Error', error.message) - ) - } - ) + error => this.notificationsService.error(this.i18n('Error'), error.message) + ) } showMoreDescription () { @@ -163,22 +194,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.descriptionLoading = true this.videoService.loadCompleteDescription(this.video.descriptionPath) - .subscribe( - description => { - this.completeDescriptionShown = true - this.descriptionLoading = false + .subscribe( + description => { + this.completeDescriptionShown = true + this.descriptionLoading = false - this.shortVideoDescription = this.video.description - this.completeVideoDescription = description + this.shortVideoDescription = this.video.description + this.completeVideoDescription = description - this.updateVideoDescription(this.completeVideoDescription) - }, + this.updateVideoDescription(this.completeVideoDescription) + }, - error => { - this.descriptionLoading = false - this.notificationsService.error('Error', error.message) - } - ) + error => { + this.descriptionLoading = false + this.notificationsService.error(this.i18n('Error'), error.message) + } + ) } showReportModal (event: Event) { @@ -186,6 +217,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoReportModal.show() } + showSupportModal () { + this.videoSupportModal.show() + } + showShareModal () { this.videoShareModal.show() } @@ -207,41 +242,55 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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(', ') + return this.video.tags } isVideoRemovable () { 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(this.i18n('Do you really want to delete this video?'), this.i18n('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( + this.i18n('Success'), + this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }) + ) - // 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.message) - ) - } - ) + error => this.notificationsService.error(this.i18n('Error'), error.message) + ) + } + + acceptedPrivacyConcern () { + peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') + this.hasAlreadyAcceptedPrivacyConcern = true + } + + isVideoToTranscode () { + return this.video && this.video.state.id === VideoState.TO_TRANSCODE + } + + hasVideoScheduledPublication () { + return this.video && this.video.scheduledUpdate !== undefined } private updateVideoDescription (description: string) { @@ -250,29 +299,30 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } private setVideoDescriptionHTML () { - if (!this.video.description) { - this.videoHTMLDescription = '' - return - } - - this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description) + this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description) } private setVideoLikesBarTooltipText () { - this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes` + this.likesBarTooltipText = this.i18n('{{likesNumber}} likes / {{dislikesNumber}} dislikes', { + likesNumber: this.video.likes, + dislikesNumber: this.video.dislikes + }) } private handleError (err: any) { const errorMessage: string = typeof err === 'string' ? err : err.message - let message = '' + if (!errorMessage) return - if (errorMessage.indexOf('http error') !== -1) { - message = 'Cannot fetch video from server, maybe down.' - } else { - message = errorMessage + // Display a message in the video player instead of a notification + if (errorMessage.indexOf('from xs param') !== -1) { + this.flushPlayer() + this.remoteServerDown = true + this.changeDetector.detectChanges() + + return } - this.notificationsService.error('Error', message) + this.notificationsService.error(this.i18n('Error'), errorMessage) } private checkUserRating () { @@ -280,88 +330,86 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.isUserLoggedIn() === false) return this.videoService.getUserVideoRating(this.video.id) - .subscribe( - ratingObject => { - if (ratingObject) { - this.userRating = ratingObject.rating - } - }, + .subscribe( + ratingObject => { + if (ratingObject) { + this.userRating = ratingObject.rating + } + }, - err => this.notificationsService.error('Error', err.message) - ) + err => this.notificationsService.error(this.i18n('Error'), err.message) + ) } - private onVideoFetched (video: VideoDetails) { + private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], startTime = 0) { this.video = video + // Re init attributes + this.descriptionLoading = false + this.completeDescriptionShown = false + this.remoteServerDown = false + this.updateOtherVideosDisplayed() - let observable - 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' + if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) { + const res = await this.confirmService.confirm( + this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'), + this.i18n('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' ]) - } - - // 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 - } + // 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' + this.playerElement.setAttribute('playsinline', 'true') + playerElementWrapper.appendChild(this.playerElement) + + const playerCaptions = videoCaptions.map(c => ({ + label: c.language.label, + language: c.language.id, + src: environment.apiUrl + c.captionPath + })) + + const videojsOptions = getVideojsOptions({ + autoplay: this.isAutoplay(), + inactivityTimeout: 2500, + videoFiles: this.video.files, + videoCaptions: playerCaptions, + playerElement: this.playerElement, + videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, + videoDuration: this.video.duration, + enableHotkeys: true, + peertubeLink: false, + poster: this.video.previewUrl, + startTime, + theaterMode: true + }) - const videojsOptions = { - controls: true, - autoplay: this.isAutoplay(), - plugins: { - peertube: { - videoFiles: this.video.files, - playerElement: this.playerElement, - peerTubeLink: false, - videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), - videoDuration: this.video.duration - }, - hotkeys: { - enableVolumeScroll: false - } - } - } + if (this.videojsLocaleLoaded === false) { + await loadLocale(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId) + this.videojsLocaleLoaded = true + } - this.videoPlayerLoaded = true + const self = this + this.zone.runOutsideAngular(async () => { + videojs(this.playerElement, videojsOptions, function () { + self.player = this + this.on('customError', (event, data) => self.handleError(data.err)) - const self = this - this.zone.runOutsideAngular(() => { - videojs(this.playerElement, videojsOptions, function () { - self.player = this - 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) - } + addContextMenu(self.player, self.video.embedUrl) + }) + }) - this.setVideoDescriptionHTML() - this.setVideoLikesBarTooltipText() + this.setVideoDescriptionHTML() + this.setVideoLikesBarTooltipText() - this.setOpenGraphTags() - this.checkUserRating() - } - ) + this.setOpenGraphTags() + this.checkUserRating() } private setRating (nextRating) { @@ -379,14 +427,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } 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) - ) + .subscribe( + () => { + // Update the video like attribute + this.updateVideoRating(this.userRating, nextRating) + this.userRating = nextRating + }, + + err => this.notificationsService.error(this.i18n('Error'), err.message) + ) } private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) { @@ -403,6 +452,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.video.likes += likesToIncrement this.video.dislikes += dislikesToIncrement + + this.video.buildLikeAndDislikePercents() + this.setVideoLikesBarTooltipText() } private updateOtherVideosDisplayed () { @@ -433,10 +485,21 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } private isAutoplay () { - // True by default + // We'll jump to the thread id, so do not play the video + if (this.route.snapshot.params['threadId']) return false + + // Otherwise true by default if (!this.user) return true // 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 + } + } }