X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=9973fad0d88cfbf1e8ac1c8278586aa51d989d20;hb=9d45db2919862640ad550c5326fb21ddc08d6d59;hp=3a7629cc64585ee6260b59b771ae5a48e81a92d8;hpb=b29bf61dbd518e5cef0b2f564ddc8f8a0657d089;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 3a7629cc6..9973fad0d 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -8,9 +8,9 @@ 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 { RestExtractor } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' import { VideoService } from '../../shared/video/video.service' import { VideoShareComponent } from './modal/video-share.component' @@ -33,12 +33,10 @@ import { Video } from '@app/shared/video/video.model' 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 { randomInt } from '@shared/core-utils/miscs/miscs' import { RecommendedVideosComponent } from '../recommendations/recommended-videos.component' -import { scrollToTop } from '@app/shared/misc/utils' +import { scrollToTop, isXPercentInViewport } from '@app/shared/misc/utils' @Component({ selector: 'my-video-watch', @@ -79,11 +77,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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, @@ -91,14 +92,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private router: Router, private videoService: VideoService, private playlistService: VideoPlaylistService, - private videoBlacklistService: VideoBlacklistService, private confirmService: ConfirmService, private metaService: MetaService, private authService: AuthService, private serverService: ServerService, private restExtractor: RestExtractor, private notifier: Notifier, - private pluginService: PluginService, private markdownService: MarkdownService, private zone: NgZone, private redirectService: RedirectService, @@ -120,11 +119,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } 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 @@ -141,7 +144,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.queryParamsSub = this.route.queryParams.subscribe(async queryParams => { const videoId = queryParams[ 'videoId' ] - if (videoId) await this.loadVideo(videoId) + if (videoId) this.loadVideo(videoId) const start = queryParams[ 'start' ] if (this.player && start) this.player.currentTime(parseInt(start, 10)) @@ -247,8 +250,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 } } @@ -278,7 +283,7 @@ 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 () { @@ -468,11 +473,38 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.currentTime = Math.floor(this.player.currentTime()) }) - this.player.one('ended', () => { - if (this.playlist) { - if (this.isPlaylistAutoPlayEnabled()) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) - } else if (this.isAutoPlayEnabled()) { - this.zone.run(() => this.autoplayNext()) + /** + * replaces this.player.one('ended') + * 'condition()': true to make the upnext functionality trigger, + * false to disable the upnext functionality + * go to the next video in 'condition()' if you don't want of the timer. + * 'next': function triggered at the end of the timer. + * 'suspended': function used at each clic of the timer checking if we need + * to reset progress and wait until 'suspended' becomes truthy again. + */ + this.player.upnext({ + timeout: 10000, // 10s + headText: this.i18n('Up Next'), + cancelText: this.i18n('Cancel'), + suspendedText: this.i18n('Autoplay is suspended'), + 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 + }, + suspended: () => { + return ( + !isXPercentInViewport(this.player.el(), 80) || + !document.getElementById('content').contains(document.activeElement) + ) } }) @@ -595,7 +627,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const { video, videoCaptions, urlOptions, user } = params const getStartTime = () => { const byUrl = urlOptions.startTime !== undefined - const byHistory = video.userHistory && !this.playlist + const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined) if (byUrl) { return timeToInt(urlOptions.startTime) @@ -619,6 +651,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,