X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=edc546b283f4e7a9856076549ea0e1b1115b5490;hb=0a57bbff2141de718aa901bfbdd147468fd624c6;hp=c7e26fad29aecd50fa876666d3f3919bdb8ae51d;hpb=c6352f2c64f3c1ad54f8500f493587cdce3d33c9;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 c7e26fad2..edc546b28 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -1,27 +1,34 @@ -import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' +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 { 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 * 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 { Notifier, ServerService } from '@app/core' +import { forkJoin, Subscription } from 'rxjs' +import { Hotkey, HotkeysService } from 'angular2-hotkeys' +import { UserVideoRateType, VideoCaption, VideoPlaylistPrivacy, VideoPrivacy, VideoState } from '../../../../../shared' 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' -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 { getVideojsOptions } from '../../../assets/player/peertube-player' +import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { environment } from '../../../environments/environment' +import { VideoCaptionService } from '@app/shared/video-caption' +import { MarkdownService } from '@app/shared/renderer' +import { + P2PMediaLoaderOptions, + PeertubePlayerManager, + PeertubePlayerManagerOptions, + PlayerMode +} from '../../../assets/player/peertube-player-manager' +import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' +import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' +import { ComponentPagination } from '@app/shared/rest/component-pagination.model' +import { Video } from '@app/shared/video/video.model' @Component({ selector: 'my-video-watch', @@ -31,45 +38,61 @@ import { getVideojsOptions } from '../../../assets/player/peertube-player' export class VideoWatchComponent implements OnInit, OnDestroy { private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' - @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent @ViewChild('videoShareModal') videoShareModal: VideoShareComponent - @ViewChild('videoReportModal') videoReportModal: VideoReportComponent @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent + @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent - otherVideosDisplayed: Video[] = [] - - error = false - player: videojs.Player + player: any playerElement: HTMLVideoElement + theaterEnabled = false userRating: UserVideoRateType = null video: VideoDetails = null - videoPlayerLoaded = false - videoNotFound = false descriptionLoading = false + playlist: VideoPlaylist = null + playlistVideos: Video[] = [] + playlistPagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 30, + totalItems: null + } + noPlaylistVideos = false + currentPlaylistPosition = 1 + completeDescriptionShown = false completeVideoDescription: string shortVideoDescription: string videoHTMLDescription = '' likesBarTooltipText = '' hasAlreadyAcceptedPrivacyConcern = false + remoteServerDown = false + hotkeys: Hotkey[] - private otherVideos: Video[] = [] + private currentTime: number private paramsSub: Subscription + private queryParamsSub: Subscription constructor ( private elementRef: ElementRef, + private changeDetector: ChangeDetectorRef, private route: ActivatedRoute, private router: Router, private videoService: VideoService, + private playlistService: VideoPlaylistService, private videoBlacklistService: VideoBlacklistService, private confirmService: ConfirmService, private metaService: MetaService, private authService: AuthService, - private notificationsService: NotificationsService, + private serverService: ServerService, + private restExtractor: RestExtractor, + private notifier: Notifier, private markdownService: MarkdownService, private zone: NgZone, - private redirectService: RedirectService + private redirectService: RedirectService, + private videoCaptionService: VideoCaptionService, + private i18n: I18n, + private hotkeysService: HotkeysService, + @Inject(LOCALE_ID) private localeId: string ) {} get user () { @@ -78,50 +101,53 @@ 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 => { - if (this.videoPlayerLoaded) { - this.player.pause() - } - - const uuid = routeParams['uuid'] - // Video did not changed - if (this.video && this.video.uuid === uuid) return + const videoId = routeParams[ 'videoId' ] + if (videoId) this.loadVideo(videoId) - this.videoService.getVideo(uuid).subscribe( - video => this.onVideoFetched(video), + const playlistId = routeParams[ 'playlistId' ] + if (playlistId) this.loadPlaylist(playlistId) + }) - error => { - this.videoNotFound = true - console.error(error) - } - ) + this.queryParamsSub = this.route.queryParams.subscribe(queryParams => { + const videoId = queryParams[ 'videoId' ] + if (videoId) this.loadVideo(videoId) }) + + 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 () { - // Remove player if it exists - if (this.videoPlayerLoaded === true) { - videojs(this.playerElement).dispose() - } + this.flushPlayer() // Unsubscribe subscriptions - this.paramsSub.unsubscribe() + if (this.paramsSub) this.paramsSub.unsubscribe() + if (this.queryParamsSub) this.queryParamsSub.unsubscribe() + + // Unbind hotkeys + if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys) } setLike () { @@ -144,23 +170,6 @@ 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') - if (res === false) return - - this.videoBlacklistService.blacklistVideo(this.video.id) - .subscribe( - status => { - this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`) - this.redirectService.redirectToHomepage() - }, - - error => this.notificationsService.error('Error', error.message) - ) - } - showMoreDescription () { if (this.completeVideoDescription === undefined) { return this.loadCompleteDescription() @@ -179,27 +188,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.descriptionLoading = true this.videoService.loadCompleteDescription(this.video.descriptionPath) - .subscribe( - description => { - this.completeDescriptionShown = true - this.descriptionLoading = false + .subscribe( + description => { + this.completeDescriptionShown = true + this.descriptionLoading = false - this.shortVideoDescription = this.video.description - this.completeVideoDescription = description + this.shortVideoDescription = this.video.description + this.completeVideoDescription = description - this.updateVideoDescription(this.completeVideoDescription) - }, - - error => { - this.descriptionLoading = false - this.notificationsService.error('Error', error.message) - } - ) - } + this.updateVideoDescription(this.completeVideoDescription) + }, - showReportModal (event: Event) { - event.preventDefault() - this.videoReportModal.show() + error => { + this.descriptionLoading = false + this.notifier.error(error.message) + } + ) } showSupportModal () { @@ -207,68 +211,147 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } showShareModal () { - this.videoShareModal.show() - } - - showDownloadModal (event: Event) { - event.preventDefault() - this.videoDownloadModal.show() + this.videoShareModal.show(this.currentTime) } isUserLoggedIn () { return this.authService.isLoggedIn() } - isVideoUpdatable () { - return this.video.isUpdatableBy(this.authService.getUser()) + getVideoTags () { + if (!this.video || Array.isArray(this.video.tags) === false) return [] + + return this.video.tags + } + + isVideoRemovable () { + return this.video.isRemovableBy(this.authService.getUser()) } - isVideoBlacklistable () { - return this.video.isBlackistableBy(this.user) + onVideoRemoved () { + this.redirectService.redirectToHomepage() } - getAvatarPath () { - return Account.GET_ACCOUNT_AVATAR_URL(this.video.account) + acceptedPrivacyConcern () { + peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') + this.hasAlreadyAcceptedPrivacyConcern = true } - getVideoPoster () { - if (!this.video) return '' + isVideoToTranscode () { + return this.video && this.video.state.id === VideoState.TO_TRANSCODE + } - return this.video.previewUrl + isVideoDownloadable () { + return this.video && this.video.downloadEnabled } - getVideoTags () { - if (!this.video || Array.isArray(this.video.tags) === false) return [] + isVideoToImport () { + return this.video && this.video.state.id === VideoState.TO_IMPORT + } - return this.video.tags.join(', ') + hasVideoScheduledPublication () { + return this.video && this.video.scheduledUpdate !== undefined } - isVideoRemovable () { - return this.video.isRemovableBy(this.authService.getUser()) + isVideoBlur (video: Video) { + return video.isVideoNSFWForUser(this.user, this.serverService.getConfig()) + } + + isPlaylistOwned () { + return this.playlist.isLocal === true && this.playlist.ownerAccount.name === this.user.username } - async removeVideo (event: Event) { - event.preventDefault() + isUnlistedPlaylist () { + return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED + } - const res = await this.confirmService.confirm('Do you really want to delete this video?', 'Delete') - if (res === false) return + isPrivatePlaylist () { + return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE + } - this.videoService.removeVideo(this.video.id) - .subscribe( - status => { - this.notificationsService.success('Success', `Video ${this.video.name} deleted.`) + isPublicPlaylist () { + return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC + } - // Go back to the video-list. - this.redirectService.redirectToHomepage() - }, + onPlaylistVideosNearOfBottom () { + // Last page + if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return - error => this.notificationsService.error('Error', error.message) + this.playlistPagination.currentPage += 1 + this.loadPlaylistElements(false) + } + + onElementRemoved (video: Video) { + this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id) + + this.playlistPagination.totalItems-- + } + + private loadVideo (videoId: string) { + // Video did not change + if (this.video && this.video.uuid === videoId) return + + if (this.player) this.player.pause() + + // Video did change + forkJoin( + this.videoService.getVideo(videoId), + 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 ])) ) + .subscribe(([ video, captionsResult ]) => { + const queryParams = this.route.snapshot.queryParams + const startTime = queryParams.start + const stopTime = queryParams.stop + const subtitle = queryParams.subtitle + const playerMode = queryParams.mode + + this.onVideoFetched(video, captionsResult.data, { startTime, stopTime, subtitle, playerMode }) + .catch(err => this.handleError(err)) + }) } - acceptedPrivacyConcern () { - peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') - this.hasAlreadyAcceptedPrivacyConcern = true + private loadPlaylist (playlistId: string) { + // Playlist did not change + if (this.playlist && this.playlist.uuid === playlistId) return + + this.playlistService.getVideoPlaylist(playlistId) + .pipe( + // If 401, the video is private or blacklisted so redirect to 404 + catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ])) + ) + .subscribe(playlist => { + this.playlist = playlist + + const videoId = this.route.snapshot.queryParams['videoId'] + this.loadPlaylistElements(!videoId) + }) + } + + private loadPlaylistElements (redirectToFirst = false) { + this.videoService.getPlaylistVideos(this.playlist.uuid, this.playlistPagination) + .subscribe(({ totalVideos, videos }) => { + this.playlistVideos = this.playlistVideos.concat(videos) + this.playlistPagination.totalItems = totalVideos + + if (totalVideos === 0) { + this.noPlaylistVideos = true + return + } + + this.updatePlaylistIndex() + + if (redirectToFirst) { + const extras = { + queryParams: { videoId: this.playlistVideos[ 0 ].uuid }, + replaceUrl: true + } + this.router.navigate([], extras) + } + }) } private updateVideoDescription (description: string) { @@ -276,32 +359,31 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.setVideoDescriptionHTML() } - private setVideoDescriptionHTML () { - if (!this.video.description) { - this.videoHTMLDescription = '' - return - } - - this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description) + private async setVideoDescriptionHTML () { + this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description) } private setVideoLikesBarTooltipText () { - this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes` + this.likesBarTooltipText = this.i18n('{{likesNumber}} likes / {{dislikesNumber}} dislikes', { + likesNumber: this.video.likes, + dislikesNumber: this.video.dislikes + }) } private handleError (err: any) { const errorMessage: string = typeof err === 'string' ? err : err.message if (!errorMessage) return - let message = '' + // Display a message in the video player instead of a notification + if (errorMessage.indexOf('from xs param') !== -1) { + this.flushPlayer() + this.remoteServerDown = true + this.changeDetector.detectChanges() - if (errorMessage.indexOf('http error') !== -1) { - message = 'Cannot fetch video from server, maybe down.' - } else { - message = errorMessage + return } - this.notificationsService.error('Error', message) + this.notifier.error(errorMessage) } private checkUserRating () { @@ -309,63 +391,142 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.isUserLoggedIn() === false) return this.videoService.getUserVideoRating(this.video.id) - .subscribe( - ratingObject => { - if (ratingObject) { - this.userRating = ratingObject.rating - } - }, + .subscribe( + ratingObject => { + if (ratingObject) { + this.userRating = ratingObject.rating + } + }, + + err => this.notifier.error(err.message) + ) + } + + private async onVideoFetched ( + video: VideoDetails, + videoCaptions: VideoCaption[], + urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string } + ) { + this.video = video - err => this.notificationsService.error('Error', err.message) - ) - } + // Re init attributes + this.descriptionLoading = false + this.completeDescriptionShown = false + this.remoteServerDown = false + this.currentTime = undefined - private async onVideoFetched (video: VideoDetails) { - this.video = video + this.updatePlaylistIndex() - 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)) { + if (this.isVideoBlur(this.video)) { 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() } - // Player was already loaded - if (this.videoPlayerLoaded !== true) { - this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') + // Flush old player if needed + this.flushPlayer() - // If autoplay is true, we don't really need a poster - if (this.isAutoplay() === false) { - this.playerElement.poster = this.video.previewUrl - } + // Build video element, because videojs remove 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 videojsOptions = getVideojsOptions({ + const options: PeertubePlayerManagerOptions = { + common: { autoplay: this.isAutoplay(), - inactivityTimeout: 4000, - videoFiles: this.video.files, + playerElement: this.playerElement, - videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), + onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, + videoDuration: this.video.duration, enableHotkeys: true, - peertubeLink: false + 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 + } + } + + 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 }) + } + + this.zone.runOutsideAngular(async () => { + this.player = await PeertubePlayerManager.initialize(mode, options) + this.theaterEnabled = this.player.theaterEnabled + + this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) + + this.player.on('timeupdate', () => { + this.currentTime = Math.floor(this.player.currentTime()) }) - this.videoPlayerLoaded = true + this.player.one('ended', () => { + if (this.playlist) { + this.zone.run(() => this.navigateToNextPlaylistVideo()) + } + }) - const self = this - this.zone.runOutsideAngular(() => { - videojs(this.playerElement, videojsOptions, function () { - self.player = this - this.on('customError', (event, data) => self.handleError(data.err)) - }) + this.player.one('stopped', () => { + if (this.playlist) { + this.zone.run(() => this.navigateToNextPlaylistVideo()) + } }) - } else { - const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) - this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) - } + + this.player.on('theaterChange', (_: any, enabled: boolean) => { + this.zone.run(() => this.theaterEnabled = enabled) + }) + }) this.setVideoDescriptionHTML() this.setVideoLikesBarTooltipText() @@ -374,7 +535,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.checkUserRating() } - private setRating (nextRating) { + private setRating (nextRating: UserVideoRateType) { let method switch (nextRating) { case 'like': @@ -389,17 +550,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } method.call(this.videoService, this.video.id) - .subscribe( - () => { - // Update the video like attribute - this.updateVideoRating(this.userRating, nextRating) - this.userRating = nextRating - }, - err => this.notificationsService.error('Error', err.message) - ) + .subscribe( + () => { + // Update the video like attribute + this.updateVideoRating(this.userRating, nextRating) + this.userRating = nextRating + }, + + (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 @@ -418,10 +580,18 @@ 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 updatePlaylistIndex () { + if (this.playlistVideos.length === 0 || !this.video) return + + for (const video of this.playlistVideos) { + if (video.id === this.video.id) { + this.currentPlaylistPosition = video.playlistElement.position + return + } } + + // Load more videos to find our video + this.onPlaylistVideosNearOfBottom() } private setOpenGraphTags () { @@ -446,10 +616,31 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } private isAutoplay () { - // True by default + // We'll jump to the thread id, so do not play the video + if (this.route.snapshot.params['threadId']) return false + + // Otherwise true by default if (!this.user) return true // Be sure the autoPlay is set to false return this.user.autoPlayVideo !== false } + + private flushPlayer () { + // Remove player if it exists + if (this.player) { + this.player.dispose() + this.player = undefined + } + } + + private navigateToNextPlaylistVideo () { + if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { + const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1) + + const start = next.playlistElement.startTimestamp + const stop = next.playlistElement.stopTimestamp + this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } }) + } + } }