X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=626d0ca07e115b3ac8bcdefb70cd633fc07d038a;hb=ba430d7516bc5b1324b60571ba7594460969b7fb;hp=2d13f1b58cc82cca10b4d0a66793e62a18a1120a;hpb=b91bc1d1f3591c35ab4426f6ab594b4bd9f1ef62;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 2d13f1b58..626d0ca07 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -2,13 +2,13 @@ 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 { peertubeLocalStorage, peertubeSessionStorage } from '@app/shared/misc/peertube-web-storage' import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' import { MetaService } from '@ngx-meta/core' -import { Notifier, ServerService } from '@app/core' +import { AuthUser, Notifier, ServerService } from '@app/core' import { forkJoin, Observable, Subscription } from 'rxjs' import { Hotkey, HotkeysService } from 'angular2-hotkeys' -import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' +import { ServerConfig, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' @@ -20,6 +20,8 @@ import { environment } from '../../../environments/environment' import { VideoCaptionService } from '@app/shared/video-caption' import { MarkdownService } from '@app/shared/renderer' import { + videojs, + CustomizationOptions, P2PMediaLoaderOptions, PeertubePlayerManager, PeertubePlayerManagerOptions, @@ -28,8 +30,14 @@ import { import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' import { Video } from '@app/shared/video/video.model' -import { isWebRTCDisabled } from '../../../assets/player/utils' +import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component' +import { getStoredTheater } from '../../../assets/player/peertube-player-local-storage' +import { PluginService } from '@app/core/plugins/plugin.service' +import { HooksService } from '@app/core/plugins/hooks.service' +import { PlatformLocation } from '@angular/common' +import { RecommendedVideosComponent } from '../recommendations/recommended-videos.component' +import { scrollToTop } from '@app/shared/misc/utils' @Component({ selector: 'my-video-watch', @@ -39,18 +47,20 @@ import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watc export class VideoWatchComponent implements OnInit, OnDestroy { private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' - @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent - @ViewChild('videoShareModal') videoShareModal: VideoShareComponent - @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent - @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent + @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent + @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent + @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent + @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent player: any playerElement: HTMLVideoElement theaterEnabled = false userRating: UserVideoRateType = null - video: VideoDetails = null descriptionLoading = false + video: VideoDetails = null + videoCaptions: VideoCaption[] = [] + playlist: VideoPlaylist = null completeDescriptionShown = false @@ -60,13 +70,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy { likesBarTooltipText = '' hasAlreadyAcceptedPrivacyConcern = false remoteServerDown = false - hotkeys: Hotkey[] + hotkeys: Hotkey[] = [] + tooltipLike = '' + tooltipDislike = '' + tooltipSupport = '' + tooltipSaveToPlaylist = '' + + private nextVideoUuid = '' + private nextVideoTitle = '' private currentTime: number private paramsSub: Subscription private queryParamsSub: Subscription private configSub: Subscription + private serverConfig: ServerConfig + constructor ( private elementRef: ElementRef, private changeDetector: ChangeDetectorRef, @@ -81,25 +100,37 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private serverService: ServerService, private restExtractor: RestExtractor, private notifier: Notifier, + private pluginService: PluginService, private markdownService: MarkdownService, private zone: NgZone, private redirectService: RedirectService, private videoCaptionService: VideoCaptionService, private i18n: I18n, private hotkeysService: HotkeysService, + private hooks: HooksService, + private location: PlatformLocation, @Inject(LOCALE_ID) private localeId: string - ) {} + ) { + this.tooltipLike = this.i18n('Like this video') + this.tooltipDislike = this.i18n('Dislike this video') + this.tooltipSupport = this.i18n('Support options for this video') + this.tooltipSaveToPlaylist = this.i18n('Save to playlist') + } get user () { return this.authService.getUser() } - ngOnInit () { - this.configSub = this.serverService.configLoaded - .subscribe(() => { + async ngOnInit () { + this.serverConfig = this.serverService.getTmpConfig() + + this.configSub = this.serverService.getConfig() + .subscribe(config => { + this.serverConfig = config + if ( isWebRTCDisabled() || - this.serverService.getConfig().tracker.enabled === false || + this.serverConfig.tracker.enabled === false || peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' ) { this.hasAlreadyAcceptedPrivacyConcern = true @@ -114,12 +145,19 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (playlistId) this.loadPlaylist(playlistId) }) - this.queryParamsSub = this.route.queryParams.subscribe(queryParams => { + this.queryParamsSub = this.route.queryParams.subscribe(async queryParams => { const videoId = queryParams[ 'videoId' ] - if (videoId) this.loadVideo(videoId) + if (videoId) await this.loadVideo(videoId) + + const start = queryParams[ 'start' ] + if (this.player && start) this.player.currentTime(parseInt(start, 10)) }) this.initHotkeys() + + this.theaterEnabled = getStoredTheater() + + this.hooks.runAction('action:video-watch.init', 'video-watch') } ngOnDestroy () { @@ -130,7 +168,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.queryParamsSub) this.queryParamsSub.unsubscribe() // Unbind hotkeys - if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys) + this.hotkeysService.remove(this.hotkeys) } setLike () { @@ -149,6 +187,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { else this.setRating('dislike') } + getRatePopoverText () { + if (this.isUserLoggedIn()) return undefined + + return this.i18n('You need to be connected to rate this content.') + } + showMoreDescription () { if (this.completeVideoDescription === undefined) { return this.loadCompleteDescription() @@ -186,10 +230,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } showSupportModal () { + this.pausePlayer() + this.videoSupportModal.show() } showShareModal () { + this.pausePlayer() + this.videoShareModal.show(this.currentTime) } @@ -203,6 +251,19 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.tags } + onRecommendations (videos: Video[]) { + if (videos.length > 0) { + // The recommended videos's first element should be the next video + const video = videos[0] + this.nextVideoUuid = video.uuid + this.nextVideoTitle = video.name + } + } + + onModalOpened () { + this.pausePlayer() + } + onVideoRemoved () { this.redirectService.redirectToHomepage() } @@ -225,7 +286,26 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } isVideoBlur (video: Video) { - return video.isVideoNSFWForUser(this.user, this.serverService.getConfig()) + return video.isVideoNSFWForUser(this.user, this.serverConfig) + } + + isAutoPlayEnabled () { + return ( + (this.user && this.user.autoPlayNextVideo) || + peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true' + ) + } + + handleTimestampClicked (timestamp: number) { + if (this.player) this.player.currentTime(timestamp) + scrollToTop() + } + + isPlaylistAutoPlayEnabled () { + return ( + (this.user && this.user.autoPlayNextVideoPlaylist) || + peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true' + ) } private loadVideo (videoId: string) { @@ -234,11 +314,19 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.player) this.player.pause() + const videoObs = this.hooks.wrapObsFun( + this.videoService.getVideo.bind(this.videoService), + { videoId }, + 'video-watch', + 'filter:api.video-watch.video.get.params', + 'filter:api.video-watch.video.get.result' + ) + // Video did change - forkJoin( - this.videoService.getVideo(videoId), + forkJoin([ + videoObs, this.videoCaptionService.listCaptions(videoId) - ) + ]) .pipe( // If 401, the video is private or blacklisted so redirect to 404 catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ])) @@ -249,8 +337,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const urlOptions = { startTime: queryParams.start, stopTime: queryParams.stop, + + muted: queryParams.muted, + loop: queryParams.loop, subtitle: queryParams.subtitle, - playerMode: queryParams.mode + + playerMode: queryParams.mode, + peertubeLink: false } this.onVideoFetched(video, captionsResult.data, urlOptions) @@ -282,7 +375,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } private async setVideoDescriptionHTML () { - this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description) + const html = await this.markdownService.textMarkdownToHTML(this.video.description) + this.videoHTMLDescription = await this.markdownService.processVideoTimestamps(html) } private setVideoLikesBarTooltipText () { @@ -327,9 +421,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private async onVideoFetched ( video: VideoDetails, videoCaptions: VideoCaption[], - urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string } + urlOptions: CustomizationOptions & { playerMode: PlayerMode } ) { this.video = video + this.videoCaptions = videoCaptions // Re init attributes this.descriptionLoading = false @@ -339,103 +434,41 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoWatchPlaylist.updatePlaylistIndex(video) - 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.isVideoBlur(this.video)) { 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') ) - if (res === false) return this.redirectService.redirectToHomepage() + if (res === false) return this.location.back() } // Flush old player if needed this.flushPlayer() - // Build video element, because videojs remove it on dispose + // Build video element, because videojs removes it on dispose const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-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 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, - - serverUrl: environment.apiUrl, - - videoCaptions: playerCaptions - }, - - webtorrent: { - videoFiles: this.video.files - } - } - - let mode: PlayerMode - - if (urlOptions.playerMode) { - if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader' - else mode = 'webtorrent' - } else { - if (this.video.hasHlsPlaylist()) mode = 'p2p-media-loader' - else mode = '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 params = { + video: this.video, + videoCaptions, + urlOptions, + user: this.user } + const { playerMode, playerOptions } = await this.hooks.wrapFun( + this.buildPlayerManagerOptions.bind(this), + params, + 'video-watch', + 'filter:internal.video-watch.player.build-options.params', + 'filter:internal.video-watch.player.build-options.result' + ) this.zone.runOutsideAngular(async () => { - this.player = await PeertubePlayerManager.initialize(mode, options) - this.theaterEnabled = this.player.theaterEnabled + this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player) + this.player.focus() this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) @@ -443,21 +476,40 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.currentTime = Math.floor(this.player.currentTime()) }) - this.player.one('ended', () => { - if (this.playlist) { - this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) + /** + * replaces this.player.one('ended') + * define 'condition(next)' to return true to wait, false to stop + */ + this.player.upnext({ + timeout: 10000, // 10s + headText: this.i18n('Up Next'), + cancelText: this.i18n('Cancel'), + getTitle: () => this.nextVideoTitle, + next: () => this.zone.run(() => this.autoplayNext()), + condition: () => { + if (this.playlist) { + if (this.isPlaylistAutoPlayEnabled()) { + // upnext will not trigger, and instead the next video will play immediately + this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) + } + } else if (this.isAutoPlayEnabled()) { + return true // upnext will trigger + } + return false // upnext will not trigger, and instead leave the video stopping } }) this.player.one('stopped', () => { if (this.playlist) { - this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) + if (this.isPlaylistAutoPlayEnabled()) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) } }) this.player.on('theaterChange', (_: any, enabled: boolean) => { this.zone.run(() => this.theaterEnabled = enabled) }) + + this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player }) }) this.setVideoDescriptionHTML() @@ -465,6 +517,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.setOpenGraphTags() this.checkUserRating() + + this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs }) + } + + private autoplayNext () { + if (this.nextVideoUuid) { + this.router.navigate([ '/videos/watch', this.nextVideoUuid ]) + } } private setRating (nextRating: UserVideoRateType) { @@ -549,23 +609,155 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } + private buildPlayerManagerOptions (params: { + video: VideoDetails, + videoCaptions: VideoCaption[], + urlOptions: CustomizationOptions & { playerMode: PlayerMode }, + user?: AuthUser + }) { + const { video, videoCaptions, urlOptions, user } = params + const getStartTime = () => { + const byUrl = urlOptions.startTime !== undefined + const byHistory = video.userHistory && !this.playlist + + if (byUrl) { + return timeToInt(urlOptions.startTime) + } else if (byHistory) { + return video.userHistory.currentTime + } else { + return 0 + } + } + + let startTime = getStartTime() + // If we are at the end of the video, reset the timer + if (video.duration - startTime <= 1) startTime = 0 + + const playerCaptions = videoCaptions.map(c => ({ + label: c.language.label, + language: c.language.id, + src: environment.apiUrl + c.captionPath + })) + + const options: PeertubePlayerManagerOptions = { + common: { + autoplay: this.isAutoplay(), + + playerElement: this.playerElement, + onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, + + videoDuration: video.duration, + enableHotkeys: true, + inactivityTimeout: 2500, + poster: video.previewUrl, + + startTime, + stopTime: urlOptions.stopTime, + controls: urlOptions.controls, + muted: urlOptions.muted, + loop: urlOptions.loop, + subtitle: urlOptions.subtitle, + + peertubeLink: urlOptions.peertubeLink, + + theaterButton: true, + captions: videoCaptions.length !== 0, + + videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE + ? this.videoService.getVideoViewUrl(video.uuid) + : null, + embedUrl: video.embedUrl, + + language: this.localeId, + + userWatching: user && user.videosHistoryEnabled === true ? { + url: this.videoService.getUserWatchingVideoUrl(video.uuid), + authorizationHeader: this.authService.getRequestHeaderValue() + } : undefined, + + serverUrl: environment.apiUrl, + + videoCaptions: playerCaptions + }, + + webtorrent: { + videoFiles: video.files + } + } + + let mode: PlayerMode + + if (urlOptions.playerMode) { + if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader' + else mode = 'webtorrent' + } else { + if (video.hasHlsPlaylist()) mode = 'p2p-media-loader' + else mode = 'webtorrent' + } + + if (mode === 'p2p-media-loader') { + const hlsPlaylist = video.getHlsPlaylist() + + const p2pMediaLoader = { + playlistUrl: hlsPlaylist.playlistUrl, + segmentsSha256Url: hlsPlaylist.segmentsSha256Url, + redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl), + trackerAnnounce: video.trackerUrls, + videoFiles: hlsPlaylist.files + } as P2PMediaLoaderOptions + + Object.assign(options, { p2pMediaLoader }) + } + + return { playerMode: mode, playerOptions: options } + } + + private pausePlayer () { + if (!this.player) return + + this.player.pause() + } + private initHotkeys () { this.hotkeys = [ - new Hotkey('shift+l', () => { - this.setLike() - return false - }, undefined, this.i18n('Like the video')), - - new Hotkey('shift+d', () => { - this.setDislike() - return false - }, undefined, this.i18n('Dislike the video')), - - new Hotkey('shift+s', () => { - this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe() - return false - }, undefined, this.i18n('Subscribe to the account')) + // These hotkeys are managed by the player + new Hotkey('f', e => e, undefined, this.i18n('Enter/exit fullscreen (requires player focus)')), + new Hotkey('space', e => e, undefined, this.i18n('Play/Pause the video (requires player focus)')), + new Hotkey('m', e => e, undefined, this.i18n('Mute/unmute the video (requires player focus)')), + + new Hotkey('0-9', e => e, undefined, this.i18n('Skip to a percentage of the video: 0 is 0% and 9 is 90% (requires player focus)')), + + new Hotkey('up', e => e, undefined, this.i18n('Increase the volume (requires player focus)')), + new Hotkey('down', e => e, undefined, this.i18n('Decrease the volume (requires player focus)')), + + new Hotkey('right', e => e, undefined, this.i18n('Seek the video forward (requires player focus)')), + new Hotkey('left', e => e, undefined, this.i18n('Seek the video backward (requires player focus)')), + + new Hotkey('>', e => e, undefined, this.i18n('Increase playback rate (requires player focus)')), + new Hotkey('<', e => e, undefined, this.i18n('Decrease playback rate (requires player focus)')), + + new Hotkey('.', e => e, undefined, this.i18n('Navigate in the video frame by frame (requires player focus)')) ] - if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys) + + if (this.isUserLoggedIn()) { + this.hotkeys = this.hotkeys.concat([ + new Hotkey('shift+l', () => { + this.setLike() + return false + }, undefined, this.i18n('Like the video')), + + new Hotkey('shift+d', () => { + this.setDislike() + return false + }, undefined, this.i18n('Dislike the video')), + + new Hotkey('shift+s', () => { + this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe() + return false + }, undefined, this.i18n('Subscribe to the account')) + ]) + } + + this.hotkeysService.add(this.hotkeys) } }