From c06af5012ecc925ca924e6e20db3a1d909b1148e Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 26 Dec 2019 11:52:46 +0100 Subject: Add playlist search option and search input for add-to-video-playlist dropdown fixes #2138 --- .../video-add-to-playlist.component.html | 4 ++++ .../video-add-to-playlist.component.scss | 10 +++++++++- .../video-add-to-playlist.component.ts | 20 ++++++++++++++++++-- .../shared/video-playlist/video-playlist.service.ts | 10 ++++++++-- 4 files changed, 39 insertions(+), 5 deletions(-) (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html index 0cc8af345..ba30953b9 100644 --- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html @@ -41,6 +41,10 @@ +
+ +
+
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss index 090b530cf..5f9bb51a7 100644 --- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss @@ -53,6 +53,15 @@ overflow-y: auto; } +.input-container { + display: flex; + + input { + flex-grow: 1; + margin: 0 15px 10px 15px; + } +} + .playlist { display: flex; cursor: pointer; @@ -76,7 +85,6 @@ .new-playlist-button, .new-playlist-block { padding-top: 10px; - margin-top: 10px; border-top: 1px solid $separator-border-color; } diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts index 6380c2e51..25ba8cbca 100644 --- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts @@ -1,7 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core' import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' import { AuthService, Notifier } from '@app/core' -import { forkJoin } from 'rxjs' +import { forkJoin, Subject } from 'rxjs' +import { debounceTime } from 'rxjs/operators' import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models' import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms' import { I18n } from '@ngx-translate/i18n-polyfill' @@ -29,6 +30,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, @Input() lazyLoad = false isNewPlaylistBlockOpened = false + videoPlaylistSearch: string + videoPlaylistSearchChanged = new Subject() videoPlaylists: PlaylistSummary[] = [] timestampOptions: { startTimestampEnabled: boolean @@ -58,6 +61,13 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, this.buildForm({ displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME }) + + this.videoPlaylistSearchChanged + .pipe( + debounceTime(500)) + .subscribe(() => { + this.load() + }) } ngOnChanges (simpleChanges: SimpleChanges) { @@ -74,6 +84,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, reload () { this.videoPlaylists = [] + this.videoPlaylistSearch = undefined this.init() @@ -82,11 +93,12 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, load () { forkJoin([ - this.videoPlaylistService.listAccountPlaylists(this.user.account, undefined,'-updatedAt'), + this.videoPlaylistService.listAccountPlaylists(this.user.account, undefined, '-updatedAt', this.videoPlaylistSearch), this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id) ]) .subscribe( ([ playlistsResult, existResult ]) => { + this.videoPlaylists = [] for (const playlist of playlistsResult.data) { const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id) @@ -178,6 +190,10 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, return `(${start}-${stop})` } + onVideoPlaylistSearchChanged () { + this.videoPlaylistSearchChanged.next() + } + private removeVideoFromPlaylist (playlist: PlaylistSummary) { if (!playlist.playlistElementId) return diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts index 2945b4959..5f74dcd4c 100644 --- a/client/src/app/shared/video-playlist/video-playlist.service.ts +++ b/client/src/app/shared/video-playlist/video-playlist.service.ts @@ -59,7 +59,12 @@ export class VideoPlaylistService { ) } - listAccountPlaylists (account: Account, componentPagination: ComponentPagination, sort: string): Observable> { + listAccountPlaylists ( + account: Account, + componentPagination: ComponentPagination, + sort: string, + search?: string + ): Observable> { const url = AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-playlists' const pagination = componentPagination ? this.restService.componentPaginationToRestPagination(componentPagination) @@ -67,6 +72,7 @@ export class VideoPlaylistService { let params = new HttpParams() params = this.restService.addRestGetParams(params, pagination, sort) + if (search) params = this.restService.addObjectParams(params, { search }) return this.authHttp.get>(url, { params }) .pipe( @@ -213,8 +219,8 @@ export class VideoPlaylistService { private doVideosExistInPlaylist (videoIds: number[]): Observable { const url = VideoPlaylistService.MY_VIDEO_PLAYLIST_URL + 'videos-exist' - let params = new HttpParams() + let params = new HttpParams() params = this.restService.addObjectParams(params, { videoIds }) return this.authHttp.get(url, { params }) -- cgit v1.2.3