From bfbd912886eba17b4aa9a40dcef2fddc685d85bf Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 31 Jul 2019 15:57:32 +0200 Subject: Fix broken playlist api --- .../video-watch-playlist.component.html | 6 +-- .../video-watch-playlist.component.scss | 5 +++ .../+video-watch/video-watch-playlist.component.ts | 43 +++++++++++++--------- .../videos/+video-watch/video-watch.component.ts | 2 +- 4 files changed, 34 insertions(+), 22 deletions(-) (limited to 'client/src/app/videos') diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.html b/client/src/app/videos/+video-watch/video-watch-playlist.component.html index c168a3130..c89936bd1 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.html +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.html @@ -16,10 +16,10 @@ -
+
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss index eeb763bd9..4c24d6b05 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss @@ -53,6 +53,11 @@ my-video-thumbnail { @include thumbnail-size-component(90px, 50px); } + + .fake-thumbnail { + width: 90px; + height: 50px; + } } } } diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts index 2fb0cb0e5..6e8d58cd8 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts @@ -1,11 +1,11 @@ import { Component, Input } from '@angular/core' import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' -import { Video } from '@app/shared/video/video.model' import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models' -import { VideoService } from '@app/shared/video/video.service' import { Router } from '@angular/router' import { AuthService } from '@app/core' +import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' +import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' @Component({ selector: 'my-video-watch-playlist', @@ -16,7 +16,7 @@ export class VideoWatchPlaylistComponent { @Input() video: VideoDetails @Input() playlist: VideoPlaylist - playlistVideos: Video[] = [] + playlistElements: VideoPlaylistElement[] = [] playlistPagination: ComponentPagination = { currentPage: 1, itemsPerPage: 30, @@ -28,7 +28,7 @@ export class VideoWatchPlaylistComponent { constructor ( private auth: AuthService, - private videoService: VideoService, + private videoPlaylist: VideoPlaylistService, private router: Router ) {} @@ -40,8 +40,8 @@ export class VideoWatchPlaylistComponent { this.loadPlaylistElements(this.playlist,false) } - onElementRemoved (video: Video) { - this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id) + onElementRemoved (playlistElement: VideoPlaylistElement) { + this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id) this.playlistPagination.totalItems-- } @@ -65,12 +65,13 @@ export class VideoWatchPlaylistComponent { } loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) { - this.videoService.getPlaylistVideos(playlist.uuid, this.playlistPagination) + this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination) .subscribe(({ total, data }) => { - this.playlistVideos = this.playlistVideos.concat(data) + this.playlistElements = this.playlistElements.concat(data) this.playlistPagination.totalItems = total - if (total === 0) { + const firstAvailableVideos = this.playlistElements.find(e => !!e.video) + if (!firstAvailableVideos) { this.noPlaylistVideos = true return } @@ -79,7 +80,7 @@ export class VideoWatchPlaylistComponent { if (redirectToFirst) { const extras = { - queryParams: { videoId: this.playlistVideos[ 0 ].uuid }, + queryParams: { videoId: firstAvailableVideos.video.uuid }, replaceUrl: true } this.router.navigate([], extras) @@ -88,11 +89,11 @@ export class VideoWatchPlaylistComponent { } updatePlaylistIndex (video: VideoDetails) { - if (this.playlistVideos.length === 0 || !video) return + if (this.playlistElements.length === 0 || !video) return - for (const playlistVideo of this.playlistVideos) { - if (playlistVideo.id === video.id) { - this.currentPlaylistPosition = playlistVideo.playlistElement.position + for (const playlistElement of this.playlistElements) { + if (playlistElement.video && playlistElement.video.id === video.id) { + this.currentPlaylistPosition = playlistElement.position return } } @@ -103,11 +104,17 @@ export class VideoWatchPlaylistComponent { navigateToNextPlaylistVideo () { if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { - const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1) + const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1) - const start = next.playlistElement.startTimestamp - const stop = next.playlistElement.stopTimestamp - this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } }) + if (!next || !next.video) { + this.currentPlaylistPosition++ + this.navigateToNextPlaylistVideo() + return + } + + const start = next.startTimestamp + const stop = next.stopTimestamp + this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } }) } } } 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 0d499d47f..d7c7b7497 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -464,7 +464,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } this.zone.runOutsideAngular(async () => { - this.player = await PeertubePlayerManager.initialize(mode, options) + this.player = await PeertubePlayerManager.initialize(mode, options, player => this.player = player) this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) -- cgit v1.2.3