X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=23d74494c5c599ef5e6e90634e0dada78d937052;hb=550a562ceca45ea78d6f7054024c8d3a6b89c30c;hp=6f6f02378ca577b2ebfb48d2fe80533de72051b1;hpb=0db1a226507a39b0a663e3e63f04851836a44d5a;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 6f6f02378..23d74494c 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -1,3 +1,4 @@ +import { catchError } from 'rxjs/operators' import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { RedirectService } from '@app/core/routing/redirect.service' @@ -5,15 +6,14 @@ 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 { Subscription } from 'rxjs' 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 { 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' @@ -23,6 +23,7 @@ import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' import { getVideojsOptions } from '../../../assets/player/peertube-player' import { ServerService } from '@app/core' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-video-watch', @@ -39,8 +40,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { otherVideosDisplayed: Video[] = [] - syndicationItems = {} - player: videojs.Player playerElement: HTMLVideoElement userRating: UserVideoRateType = null @@ -68,10 +67,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private metaService: MetaService, private authService: AuthService, private serverService: ServerService, + private restExtractor: RestExtractor, private notificationsService: NotificationsService, private markdownService: MarkdownService, private zone: NgZone, - private redirectService: RedirectService + private redirectService: RedirectService, + private i18n: I18n ) {} get user () { @@ -102,22 +103,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } const uuid = routeParams['uuid'] + // Video did not change if (this.video && this.video.uuid === uuid) return // Video did change - this.videoService.getVideo(uuid).subscribe( - video => { - const startTime = this.route.snapshot.queryParams.start - this.onVideoFetched(video, startTime) - .catch(err => this.handleError(err)) - this.generateSyndicationList() - }, - - error => { - this.videoNotFound = true - console.error(error) - } - ) + this.videoService + .getVideo(uuid) + .pipe(catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))) + .subscribe( + video => { + const startTime = this.route.snapshot.queryParams.start + this.onVideoFetched(video, startTime) + .catch(err => this.handleError(err)) + }, + + error => { + this.videoNotFound = true + console.error(error) + } + ) }) } @@ -151,17 +155,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy { async blacklistVideo (event: Event) { event.preventDefault() - const res = await this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist') + 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.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) ) } @@ -196,7 +203,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { error => { this.descriptionLoading = false - this.notificationsService.error('Error', error.message) + this.notificationsService.error(this.i18n('Error'), error.message) } ) } @@ -231,10 +238,6 @@ 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 '' @@ -247,10 +250,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.tags.join(', ') } - generateSyndicationList () { - this.syndicationItems = this.videoService.getAccountFeedUrls(this.video.account.id) - } - isVideoRemovable () { return this.video.isRemovableBy(this.authService.getUser()) } @@ -258,19 +257,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy { async removeVideo (event: Event) { event.preventDefault() - const res = await this.confirmService.confirm('Do you really want to delete this video?', 'Delete') + 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.notificationsService.success( + this.i18n('Success'), + this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }) + ) // 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) ) } @@ -294,7 +296,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } private setVideoLikesBarTooltipText () { - this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes` + this.likesBarTooltipText = this.i18n( + '{{likesNumber}} likes / {{dislikesNumber}} dislikes', + { likesNumber: this.video.likes, dislikes: this.video.dislikes } + ) } private handleError (err: any) { @@ -304,12 +309,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { let message = '' if (errorMessage.indexOf('http error') !== -1) { - message = 'Cannot fetch video from server, maybe down.' + message = this.i18n('Cannot fetch video from server, maybe down.') } else { message = errorMessage } - this.notificationsService.error('Error', message) + this.notificationsService.error(this.i18n('Error'), message) } private checkUserRating () { @@ -324,7 +329,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } }, - err => this.notificationsService.error('Error', err.message) + err => this.notificationsService.error(this.i18n('Error'), err.message) ) } @@ -339,8 +344,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) { 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' + this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'), + this.i18n('Mature or explicit content') ) if (res === false) return this.redirectService.redirectToHomepage() } @@ -352,6 +357,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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 videojsOptions = getVideojsOptions({ @@ -359,6 +365,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { inactivityTimeout: 2500, videoFiles: this.video.files, playerElement: this.playerElement, + videoEmbedUrl: this.video.embedUrl, videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), videoDuration: this.video.duration, enableHotkeys: true, @@ -403,7 +410,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.updateVideoRating(this.userRating, nextRating) this.userRating = nextRating }, - err => this.notificationsService.error('Error', err.message) + err => this.notificationsService.error(this.i18n('Error'), err.message) ) }