From 72675ebe0181ab2389fb2f75a3b2acdca6e09c07 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 13 May 2019 11:18:24 +0200 Subject: Move video watch playlist in its own component --- .../videos/+video-watch/video-watch.component.ts | 106 ++------------------- 1 file changed, 7 insertions(+), 99 deletions(-) (limited to 'client/src/app/videos/+video-watch/video-watch.component.ts') 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 bce652210..0532e7de7 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -8,7 +8,7 @@ import { MetaService } from '@ngx-meta/core' 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 { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' @@ -27,9 +27,9 @@ import { } 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' import { isWebRTCDisabled } from '../../../assets/player/utils' +import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component' @Component({ selector: 'my-video-watch', @@ -39,6 +39,7 @@ import { isWebRTCDisabled } from '../../../assets/player/utils' 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 @@ -51,14 +52,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { descriptionLoading = false playlist: VideoPlaylist = null - playlistVideos: Video[] = [] - playlistPagination: ComponentPagination = { - currentPage: 1, - itemsPerPage: 30, - totalItems: null - } - noPlaylistVideos = false - currentPlaylistPosition = 1 completeDescriptionShown = false completeVideoDescription: string @@ -230,10 +223,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.tags } - isVideoRemovable () { - return this.video.isRemovableBy(this.authService.getUser()) - } - onVideoRemoved () { this.redirectService.redirectToHomepage() } @@ -247,10 +236,6 @@ 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 } @@ -263,36 +248,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return video.isVideoNSFWForUser(this.user, this.serverService.getConfig()) } - isPlaylistOwned () { - return this.playlist.isLocal === true && this.playlist.ownerAccount.name === this.user.username - } - - isUnlistedPlaylist () { - return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED - } - - isPrivatePlaylist () { - return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE - } - - isPublicPlaylist () { - return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC - } - - onPlaylistVideosNearOfBottom () { - // Last page - if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return - - 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 @@ -333,33 +288,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.playlist = playlist const videoId = this.route.snapshot.queryParams['videoId'] - this.loadPlaylistElements(!videoId) + this.videoWatchPlaylist.loadPlaylistElements(playlist, !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) { this.video.description = description this.setVideoDescriptionHTML() @@ -421,7 +353,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.remoteServerDown = false this.currentTime = undefined - this.updatePlaylistIndex() + 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 @@ -519,13 +451,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.player.one('ended', () => { if (this.playlist) { - this.zone.run(() => this.navigateToNextPlaylistVideo()) + this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) } }) this.player.one('stopped', () => { if (this.playlist) { - this.zone.run(() => this.navigateToNextPlaylistVideo()) + this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) } }) @@ -586,20 +518,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.setVideoLikesBarTooltipText() } - 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 () { this.metaService.setTitle(this.video.name) @@ -639,14 +557,4 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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 } }) - } - } } -- cgit v1.2.3