From 38a3ccc7f8ad0ea94362b58c732af7c387ab46be Mon Sep 17 00:00:00 2001 From: kontrollanten <6680299+kontrollanten@users.noreply.github.com> Date: Mon, 24 Oct 2022 14:48:03 +0200 Subject: [PATCH] feat: show contained playlists under My videos (#5125) * feat: show contained playlists under My videos closes #4769 * refactor(server): remove unused types * fixes after code review * fix(client/video-miniature): add to playlist * fix(server/user/me): shortUUID response * Revert "fix(client/video-miniature): add to playlist" This reverts commit f1a0412391c7e2370b87df2594c9fe3f39a40ddc. * fix(client/PlaylistService): caching * Revert "fix(server/user/me): shortUUID response" This reverts commit e3f1ee4e335739b895bced938540c003df24af73. * Fix fetching playlists Co-authored-by: Chocobozzz --- .../my-videos/my-videos.component.html | 1 + .../my-videos/my-videos.component.ts | 28 ++++++++++++++----- .../video-miniature.component.html | 6 ++++ .../video-miniature.component.scss | 4 +++ .../video-miniature.component.ts | 3 +- .../videos-selection.component.html | 1 + .../videos-selection.component.ts | 3 +- .../video-add-to-playlist.component.ts | 4 +-- .../video-playlist.service.ts | 12 ++++---- .../api/users/my-video-playlists.ts | 5 +++- server/models/video/video-playlist.ts | 6 ++-- server/tests/api/videos/video-playlists.ts | 12 +++++++- server/types/models/video/video-playlist.ts | 12 ++++---- .../playlist/video-exist-in-playlist.model.ts | 10 ++++++- 14 files changed, 79 insertions(+), 28 deletions(-) diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html index 146dcf41e..995f6b75b 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.html +++ b/client/src/app/+my-library/my-videos/my-videos.component.html @@ -34,6 +34,7 @@ this.pagination.totalItems = res.total) - ) + }).pipe( + tap(res => this.pagination.totalItems = res.total), + tap(({ data }) => this.fetchVideosContainedInPlaylists(data)) + ) + } + + private fetchVideosContainedInPlaylists (videos: Video[]) { + this.playlistService.doVideosExistInPlaylist(videos.map(v => v.id)) + .subscribe(result => { + this.videosContainedInPlaylists = Object.keys(result).reduce((acc, videoId) => ({ + ...acc, + [videoId]: uniqBy(result[videoId], (p: VideoExistInPlaylist) => p.playlistId) + }), this.videosContainedInPlaylists) + }) } async deleteSelectedVideos () { diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index e8d2ca1c4..6fdf24b2d 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -52,6 +52,12 @@ - {{ getStateLabel(video) }} + +
+ + {{ playlist.playlistDisplayName }} + +
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index a397efdca..ba2adfc5a 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss @@ -4,6 +4,10 @@ $more-button-width: 40px; +.chip { + @include chip; +} + .video-miniature { font-size: 14px; } diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts index 20596d6d0..85c63c173 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts @@ -11,7 +11,7 @@ import { Output } from '@angular/core' import { AuthService, ScreenService, ServerService, User } from '@app/core' -import { HTMLServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models' +import { HTMLServerConfig, VideoExistInPlaylist, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models' import { LinkType } from '../../../types/link.type' import { ActorAvatarSize } from '../shared-actor-image/actor-avatar.component' import { Video } from '../shared-main' @@ -40,6 +40,7 @@ export type MiniatureDisplayOptions = { export class VideoMiniatureComponent implements OnInit { @Input() user: User @Input() video: Video + @Input() containedInPlaylists: VideoExistInPlaylist[] @Input() displayOptions: MiniatureDisplayOptions = { date: true, diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html index 6ea2661e4..6c6db4b96 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html @@ -12,6 +12,7 @@ diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts index fa3c79bbb..460a0080e 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts @@ -2,7 +2,7 @@ import { Observable, Subject } from 'rxjs' import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core' import { ComponentPagination, Notifier, User } from '@app/core' import { logger } from '@root-helpers/logger' -import { ResultList, VideoSortField } from '@shared/models' +import { ResultList, VideosExistInPlaylists, VideoSortField } from '@shared/models' import { PeerTubeTemplateDirective, Video } from '../shared-main' import { MiniatureDisplayOptions } from './video-miniature.component' @@ -14,6 +14,7 @@ export type SelectionType = { [ id: number ]: boolean } styleUrls: [ './videos-selection.component.scss' ] }) export class VideosSelectionComponent implements AfterContentInit { + @Input() videosContainedInPlaylists: VideosExistInPlaylists @Input() user: User @Input() pagination: ComponentPagination diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts index f81de7c6b..2fc39fc75 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts @@ -6,8 +6,8 @@ import { AuthService, DisableForReuseHook, Notifier } from '@app/core' import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' import { secondsToTime } from '@shared/core-utils' import { + CachedVideoExistInPlaylist, Video, - VideoExistInPlaylist, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistElementUpdate, @@ -330,7 +330,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, } } - private rebuildPlaylists (existResult: VideoExistInPlaylist[]) { + private rebuildPlaylists (existResult: CachedVideoExistInPlaylist[]) { debugLogger('Got existing results for %d.', this.video.id, existResult) const oldPlaylists = this.videoPlaylists diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts index d71f8f72e..330a51f91 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts +++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts @@ -8,6 +8,8 @@ import { buildBulkObservable, objectToFormData } from '@app/helpers' import { Account, AccountService, VideoChannel, VideoChannelService } from '@app/shared/shared-main' import { NGX_LOADING_BAR_IGNORED } from '@ngx-loading-bar/http-client' import { + CachedVideoExistInPlaylist, + CachedVideosExistInPlaylists, ResultList, VideoExistInPlaylist, VideoPlaylist as VideoPlaylistServerModel, @@ -34,11 +36,11 @@ export class VideoPlaylistService { // Use a replay subject because we "next" a value before subscribing private videoExistsInPlaylistNotifier = new ReplaySubject(1) - private videoExistsInPlaylistCacheSubject = new Subject() - private readonly videoExistsInPlaylistObservable: Observable + private videoExistsInPlaylistCacheSubject = new Subject() + private readonly videoExistsInPlaylistObservable: Observable - private videoExistsObservableCache: { [ id: number ]: Observable } = {} - private videoExistsCache: { [ id: number ]: VideoExistInPlaylist[] } = {} + private videoExistsObservableCache: { [ id: number ]: Observable } = {} + private videoExistsCache: { [ id: number ]: CachedVideoExistInPlaylist[] } = {} private myAccountPlaylistCache: ResultList = undefined private myAccountPlaylistCacheRunning: Observable> @@ -346,7 +348,7 @@ export class VideoPlaylistService { ) } - private doVideosExistInPlaylist (videoIds: number[]): Observable { + doVideosExistInPlaylist (videoIds: number[]): Observable { const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist' let params = new HttpParams() diff --git a/server/controllers/api/users/my-video-playlists.ts b/server/controllers/api/users/my-video-playlists.ts index f55ea2ec4..715717610 100644 --- a/server/controllers/api/users/my-video-playlists.ts +++ b/server/controllers/api/users/my-video-playlists.ts @@ -1,3 +1,4 @@ +import { uuidToShort } from '@shared/extra-utils' import express from 'express' import { VideosExistInPlaylists } from '../../../../shared/models/videos/playlist/video-exist-in-playlist.model' import { asyncMiddleware, authenticate } from '../../../middlewares' @@ -24,7 +25,7 @@ async function doVideosInPlaylistExist (req: express.Request, res: express.Respo const videoIds = req.query.videoIds.map(i => parseInt(i + '', 10)) const user = res.locals.oauth.token.User - const results = await VideoPlaylistModel.listPlaylistIdsOf(user.Account.id, videoIds) + const results = await VideoPlaylistModel.listPlaylistSummariesOf(user.Account.id, videoIds) const existObject: VideosExistInPlaylists = {} @@ -37,6 +38,8 @@ async function doVideosInPlaylistExist (req: express.Request, res: express.Respo existObject[element.videoId].push({ playlistElementId: element.id, playlistId: result.id, + playlistDisplayName: result.name, + playlistShortUUID: uuidToShort(result.uuid), startTimestamp: element.startTimestamp, stopTimestamp: element.stopTimestamp }) diff --git a/server/models/video/video-playlist.ts b/server/models/video/video-playlist.ts index 81ce3dc9e..8bbe54c49 100644 --- a/server/models/video/video-playlist.ts +++ b/server/models/video/video-playlist.ts @@ -49,7 +49,7 @@ import { MVideoPlaylistFormattable, MVideoPlaylistFull, MVideoPlaylistFullSummary, - MVideoPlaylistIdWithElements + MVideoPlaylistSummaryWithElements } from '../../types/models/video/video-playlist' import { AccountModel, ScopeNames as AccountScopeNames, SummaryOptions } from '../account/account' import { ActorModel } from '../actor/actor' @@ -470,9 +470,9 @@ export class VideoPlaylistModel extends Model { + static listPlaylistSummariesOf (accountId: number, videoIds: number[]): Promise { const query = { - attributes: [ 'id' ], + attributes: [ 'id', 'name', 'uuid' ], where: { ownerAccountId: accountId }, diff --git a/server/tests/api/videos/video-playlists.ts b/server/tests/api/videos/video-playlists.ts index 9d223de48..a3de73ba5 100644 --- a/server/tests/api/videos/video-playlists.ts +++ b/server/tests/api/videos/video-playlists.ts @@ -23,6 +23,7 @@ import { setDefaultVideoChannel, waitJobs } from '@shared/server-commands' +import { uuidToShort } from '@shared/extra-utils' async function checkPlaylistElementType ( servers: PeerTubeServer[], @@ -56,6 +57,7 @@ describe('Test video playlists', function () { let playlistServer2UUID2: string let playlistServer1Id: number + let playlistServer1DisplayName: string let playlistServer1UUID: string let playlistServer1UUID2: string @@ -489,15 +491,17 @@ describe('Test video playlists', function () { return commands[0].addElement({ playlistId: playlistServer1Id, attributes }) } + const playlistDisplayName = 'playlist 4' const playlist = await commands[0].create({ attributes: { - displayName: 'playlist 4', + displayName: playlistDisplayName, privacy: VideoPlaylistPrivacy.PUBLIC, videoChannelId: servers[0].store.channel.id } }) playlistServer1Id = playlist.id + playlistServer1DisplayName = playlistDisplayName playlistServer1UUID = playlist.uuid await addVideo({ videoId: servers[0].store.videos[0].uuid, startTimestamp: 15, stopTimestamp: 28 }) @@ -908,6 +912,8 @@ describe('Test video playlists', function () { const elem = obj[servers[0].store.videos[0].id] expect(elem).to.have.lengthOf(1) expect(elem[0].playlistElementId).to.exist + expect(elem[0].playlistDisplayName).to.equal(playlistServer1DisplayName) + expect(elem[0].playlistShortUUID).to.equal(uuidToShort(playlistServer1UUID)) expect(elem[0].playlistId).to.equal(playlistServer1Id) expect(elem[0].startTimestamp).to.equal(15) expect(elem[0].stopTimestamp).to.equal(28) @@ -917,6 +923,8 @@ describe('Test video playlists', function () { const elem = obj[servers[0].store.videos[3].id] expect(elem).to.have.lengthOf(1) expect(elem[0].playlistElementId).to.equal(playlistElementServer1Video4) + expect(elem[0].playlistDisplayName).to.equal(playlistServer1DisplayName) + expect(elem[0].playlistShortUUID).to.equal(uuidToShort(playlistServer1UUID)) expect(elem[0].playlistId).to.equal(playlistServer1Id) expect(elem[0].startTimestamp).to.equal(1) expect(elem[0].stopTimestamp).to.equal(35) @@ -926,6 +934,8 @@ describe('Test video playlists', function () { const elem = obj[servers[0].store.videos[4].id] expect(elem).to.have.lengthOf(1) expect(elem[0].playlistId).to.equal(playlistServer1Id) + expect(elem[0].playlistDisplayName).to.equal(playlistServer1DisplayName) + expect(elem[0].playlistShortUUID).to.equal(uuidToShort(playlistServer1UUID)) expect(elem[0].startTimestamp).to.equal(45) expect(elem[0].stopTimestamp).to.equal(null) } diff --git a/server/types/models/video/video-playlist.ts b/server/types/models/video/video-playlist.ts index 33fe5416a..40f0dfc14 100644 --- a/server/types/models/video/video-playlist.ts +++ b/server/types/models/video/video-playlist.ts @@ -14,6 +14,10 @@ export type MVideoPlaylist = Omit +export type MVideoPlaylistSummary = + Pick & + Pick & + Pick export type MVideoPlaylistPrivacy = Pick export type MVideoPlaylistUUID = Pick export type MVideoPlaylistVideosLength = MVideoPlaylist & { videosLength?: number } @@ -22,12 +26,8 @@ export type MVideoPlaylistVideosLength = MVideoPlaylist & { videosLength?: numbe // With elements -export type MVideoPlaylistWithElements = - MVideoPlaylist & - Use<'VideoPlaylistElements', MVideoPlaylistElementLight[]> - -export type MVideoPlaylistIdWithElements = - MVideoPlaylistId & +export type MVideoPlaylistSummaryWithElements = + MVideoPlaylistSummary & Use<'VideoPlaylistElements', MVideoPlaylistElementLight[]> // ############################################################################ diff --git a/shared/models/videos/playlist/video-exist-in-playlist.model.ts b/shared/models/videos/playlist/video-exist-in-playlist.model.ts index fc979c8c0..bc803a99c 100644 --- a/shared/models/videos/playlist/video-exist-in-playlist.model.ts +++ b/shared/models/videos/playlist/video-exist-in-playlist.model.ts @@ -1,10 +1,18 @@ export type VideosExistInPlaylists = { [videoId: number ]: VideoExistInPlaylist[] } +export type CachedVideosExistInPlaylists = { + [videoId: number ]: CachedVideoExistInPlaylist[] +} -export type VideoExistInPlaylist = { +export type CachedVideoExistInPlaylist = { playlistElementId: number playlistId: number startTimestamp?: number stopTimestamp?: number } + +export type VideoExistInPlaylist = CachedVideoExistInPlaylist & { + playlistDisplayName: string + playlistShortUUID: string +}