X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=bad0144bf8c7f91444740083ba1de941fc107aa6;hb=1dc240a9488c66ad38205d08fcfdb32d35efceaa;hp=523865feffc3299ea637dfa9e06f6d706c1bd85e;hpb=3d9a63d3d824e753e95292b5e1343e1ebf9eaf71;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 523865fef..bad0144bf 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 { 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' @@ -36,7 +36,8 @@ import { getStoredTheater } from '../../../assets/player/peertube-player-local-s import { PluginService } from '@app/core/plugins/plugin.service' import { HooksService } from '@app/core/plugins/hooks.service' import { PlatformLocation } from '@angular/common' -import { randomInt } from '@shared/core-utils/miscs/miscs' +import { RecommendedVideosComponent } from '../recommendations/recommended-videos.component' +import { scrollToTop } from '@app/shared/misc/utils' @Component({ selector: 'my-video-watch', @@ -69,14 +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, @@ -101,18 +110,27 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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() } async ngOnInit () { - this.configSub = this.serverService.configLoaded - .subscribe(() => { + 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 @@ -127,9 +145,12 @@ 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) + + const start = queryParams[ 'start' ] + if (this.player && start) this.player.currentTime(parseInt(start, 10)) }) this.initHotkeys() @@ -147,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 () { @@ -232,8 +253,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { onRecommendations (videos: Video[]) { if (videos.length > 0) { - // Pick a random video until the recommendations are improved - this.nextVideoUuid = videos[randomInt(0,videos.length - 1)].uuid + // The recommended videos's first element should be the next video + const video = videos[0] + this.nextVideoUuid = video.uuid + this.nextVideoTitle = video.name } } @@ -263,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) { @@ -333,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 () { @@ -418,6 +461,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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' ) @@ -431,17 +476,32 @@ 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()) - } else if (this.user && this.user.autoPlayNextVideo) { - this.zone.run(() => this.autoplayNext()) + /** + * 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()) } }) @@ -549,26 +609,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - 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')) - ] - if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys) - } - private buildPlayerManagerOptions (params: { video: VideoDetails, videoCaptions: VideoCaption[], @@ -576,8 +616,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy { user?: AuthUser }) { const { video, videoCaptions, urlOptions, user } = params + const getStartTime = () => { + const byUrl = urlOptions.startTime !== undefined + const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined) + + if (byUrl) { + return timeToInt(urlOptions.startTime) + } else if (byHistory) { + return video.userHistory.currentTime + } else { + return 0 + } + } - let startTime = timeToInt(urlOptions.startTime) || (video.userHistory ? video.userHistory.currentTime : 0) + let startTime = getStartTime() // If we are at the end of the video, reset the timer if (video.duration - startTime <= 1) startTime = 0 @@ -590,6 +642,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const options: PeertubePlayerManagerOptions = { common: { autoplay: this.isAutoplay(), + nextVideo: () => this.zone.run(() => this.autoplayNext()), playerElement: this.playerElement, onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, @@ -665,4 +718,47 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.player.pause() } + + private initHotkeys () { + this.hotkeys = [ + // 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.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) + } }