X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=359217f3b8d4ed714449c265d1ec6ae9f7aac216;hb=f0a3988066f72a28bb44520af072f18d91d77dde;hp=878655d4a898f0b6e6500e4e3ffa18357e98d189;hpb=26b7305a232e547709f433a6edf700bf495935d8;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 878655d4a..359217f3b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -5,30 +5,29 @@ 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 { Notifier, ServerService } from '@app/core' import { forkJoin, Subscription } from 'rxjs' -import * as videojs from 'video.js' -import 'videojs-hotkeys' -import * as WebTorrent from 'webtorrent' -import { UserVideoRateType, VideoPrivacy, VideoRateType, VideoState } from '../../../../../shared' -import '../../../assets/player/peertube-videojs-plugin' +import { Hotkey, HotkeysService } from 'angular2-hotkeys' +import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' import { AuthService, ConfirmService } from '../../core' 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' -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 { VideoBlacklistComponent } from './modal/video-blacklist.component' -import { addContextMenu, getVideojsOptions, loadLocale } from '../../../assets/player/peertube-player' -import { ServerService } from '@app/core' +import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component' 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' +import { MarkdownService } from '@app/shared/renderer' +import { + P2PMediaLoaderOptions, + PeertubePlayerManager, + PeertubePlayerManagerOptions, + PlayerMode +} from '../../../assets/player/peertube-player-manager' @Component({ selector: 'my-video-watch', @@ -43,10 +42,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { @ViewChild('videoReportModal') videoReportModal: VideoReportComponent @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent + @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent - otherVideosDisplayed: Video[] = [] - - player: videojs.Player + player: any playerElement: HTMLVideoElement userRating: UserVideoRateType = null video: VideoDetails = null @@ -59,9 +57,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { likesBarTooltipText = '' hasAlreadyAcceptedPrivacyConcern = false remoteServerDown = false + hotkeys: Hotkey[] - private videojsLocaleLoaded = false - private otherVideos: Video[] = [] + private currentTime: number private paramsSub: Subscription constructor ( @@ -76,12 +74,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private authService: AuthService, private serverService: ServerService, private restExtractor: RestExtractor, - private notificationsService: NotificationsService, + private notifier: Notifier, private markdownService: MarkdownService, private zone: NgZone, private redirectService: RedirectService, private videoCaptionService: VideoCaptionService, private i18n: I18n, + private hotkeysService: HotkeysService, @Inject(LOCALE_ID) private localeId: string ) {} @@ -91,22 +90,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ngOnInit () { if ( - WebTorrent.WEBRTC_SUPPORT === false || + !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === 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 => { const uuid = routeParams[ 'uuid' ] @@ -121,14 +110,37 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoCaptionService.listCaptions(uuid) ) .pipe( - catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ])) + // If 401, the video is private or blacklisted so redirect to 404 + catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ])) ) .subscribe(([ video, captionsResult ]) => { const startTime = this.route.snapshot.queryParams.start - this.onVideoFetched(video, captionsResult.data, startTime) + const stopTime = this.route.snapshot.queryParams.stop + const subtitle = this.route.snapshot.queryParams.subtitle + const playerMode = this.route.snapshot.queryParams.mode + + this.onVideoFetched(video, captionsResult.data, { startTime, stopTime, subtitle, playerMode }) .catch(err => this.handleError(err)) }) }) + + this.hotkeys = [ + new Hotkey('shift+l', (event: KeyboardEvent): boolean => { + this.setLike() + return false + }, undefined, this.i18n('Like the video')), + new Hotkey('shift+d', (event: KeyboardEvent): boolean => { + this.setDislike() + return false + }, undefined, this.i18n('Dislike the video')), + new Hotkey('shift+s', (event: KeyboardEvent): boolean => { + this.subscribeButton.subscribed ? + this.subscribeButton.unsubscribe() : + this.subscribeButton.subscribe() + return false + }, undefined, this.i18n('Subscribe to the account')) + ] + if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys) } ngOnDestroy () { @@ -136,6 +148,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { // Unsubscribe subscriptions this.paramsSub.unsubscribe() + + // Unbind hotkeys + if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys) } setLike () { @@ -189,7 +204,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { error => { this.descriptionLoading = false - this.notificationsService.error(this.i18n('Error'), error.message) + this.notifier.error(error.message) } ) } @@ -204,7 +219,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } showShareModal () { - this.videoShareModal.show() + const currentTime = this.player ? this.player.currentTime() : undefined + + this.videoShareModal.show(this.currentTime) } showDownloadModal (event: Event) { @@ -217,6 +234,28 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoBlacklistModal.show() } + async unblacklistVideo (event: Event) { + event.preventDefault() + + const confirmMessage = this.i18n( + 'Do you really want to remove this video from the blacklist? It will be available again in the videos list.' + ) + + const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist')) + if (res === false) return + + this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe( + () => { + this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name })) + + this.video.blacklisted = false + this.video.blacklistedReason = null + }, + + err => this.notifier.error(err.message) + ) + } + isUserLoggedIn () { return this.authService.isLoggedIn() } @@ -229,10 +268,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.isBlackistableBy(this.user) } - getVideoPoster () { - if (!this.video) return '' - - return this.video.previewUrl + isVideoUnblacklistable () { + return this.video.isUnblacklistableBy(this.user) } getVideoTags () { @@ -253,17 +290,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoService.removeVideo(this.video.id) .subscribe( - status => { - this.notificationsService.success( - this.i18n('Success'), - this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }) - ) + () => { + this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name })) // Go back to the video-list. this.redirectService.redirectToHomepage() }, - error => this.notificationsService.error(this.i18n('Error'), error.message) + error => this.notifier.error(error.message) ) } @@ -276,6 +310,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video && this.video.state.id === VideoState.TO_TRANSCODE } + isVideoDownloadable () { + return this.video && this.video.downloadEnabled + } + isVideoToImport () { return this.video && this.video.state.id === VideoState.TO_IMPORT } @@ -289,8 +327,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.setVideoDescriptionHTML() } - private setVideoDescriptionHTML () { - this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description) + private async setVideoDescriptionHTML () { + this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description) } private setVideoLikesBarTooltipText () { @@ -313,7 +351,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return } - this.notificationsService.error(this.i18n('Error'), errorMessage) + this.notifier.error(errorMessage) } private checkUserRating () { @@ -328,19 +366,26 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } - private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], startTime = 0) { + private async onVideoFetched ( + video: VideoDetails, + videoCaptions: VideoCaption[], + urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string } + ) { this.video = video // Re init attributes this.descriptionLoading = false this.completeDescriptionShown = false this.remoteServerDown = false + this.currentTime = undefined - this.updateOtherVideosDisplayed() + let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0) + // If we are at the end of the video, reset the timer + if (this.video.duration - startTime <= 1) startTime = 0 if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) { const res = await this.confirmService.confirm( @@ -366,33 +411,68 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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 options: PeertubePlayerManagerOptions = { + common: { + autoplay: this.isAutoplay(), + + playerElement: this.playerElement, + onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, + + videoDuration: this.video.duration, + enableHotkeys: true, + inactivityTimeout: 2500, + poster: this.video.previewUrl, + startTime, + stopTime: urlOptions.stopTime, + + theaterMode: true, + captions: videoCaptions.length !== 0, + peertubeLink: false, + + videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, + embedUrl: this.video.embedUrl, + + language: this.localeId, + + subtitle: urlOptions.subtitle, + + userWatching: this.user && this.user.videosHistoryEnabled === true ? { + url: this.videoService.getUserWatchingVideoUrl(this.video.uuid), + authorizationHeader: this.authService.getRequestHeaderValue() + } : undefined, - if (this.videojsLocaleLoaded === false) { - await loadLocale(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId) - this.videojsLocaleLoaded = true + serverUrl: environment.apiUrl, + + videoCaptions: playerCaptions + }, + + webtorrent: { + videoFiles: this.video.files + } + } + + const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent' + + if (mode === 'p2p-media-loader') { + const hlsPlaylist = this.video.getHlsPlaylist() + + const p2pMediaLoader = { + playlistUrl: hlsPlaylist.playlistUrl, + segmentsSha256Url: hlsPlaylist.segmentsSha256Url, + redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl), + trackerAnnounce: this.video.trackerUrls, + videoFiles: this.video.files + } as P2PMediaLoaderOptions + + Object.assign(options, { p2pMediaLoader }) } - const self = this this.zone.runOutsideAngular(async () => { - videojs(this.playerElement, videojsOptions, function () { - self.player = this - this.on('customError', (event, data) => self.handleError(data.err)) + this.player = await PeertubePlayerManager.initialize(mode, options) + this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) - addContextMenu(self.player, self.video.embedUrl) + this.player.on('timeupdate', () => { + this.currentTime = Math.floor(this.player.currentTime()) }) }) @@ -403,7 +483,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.checkUserRating() } - private setRating (nextRating) { + private setRating (nextRating: UserVideoRateType) { let method switch (nextRating) { case 'like': @@ -425,11 +505,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.userRating = nextRating }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + (err: { message: string }) => this.notifier.error(err.message) ) } - private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) { + private updateVideoRating (oldRating: UserVideoRateType, newRating: UserVideoRateType) { let likesToIncrement = 0 let dislikesToIncrement = 0 @@ -448,12 +528,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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 () { this.metaService.setTitle(this.video.name)