diff --git a/src/app/home/recent-playlists/recent-playlists.component.html b/src/app/home/recent-playlists/recent-playlists.component.html index ac5b2656a..bdb043a40 100644 --- a/src/app/home/recent-playlists/recent-playlists.component.html +++ b/src/app/home/recent-playlists/recent-playlists.component.html @@ -1,10 +1,24 @@ + + + - + search
{{ 'HOME.PLAYLISTS.NO_PLAYLISTS' | translate }} @@ -13,51 +27,56 @@ {{ 'HOME.PLAYLISTS.ADD_FIRST' | translate }}
- - star -
- {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate }} -
-
- {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES_DESCRIPTION' | translate }} -
-
- - + + + star +
+ {{ 'HOME.PLAYLISTS.GLOBAL_FAVORITES' | translate }} +
+
+ {{ + 'HOME.PLAYLISTS.GLOBAL_FAVORITES_DESCRIPTION' + | translate + }} +
+
+ -
-

{{ migrationMessage }}

-   - -
+ + +
+

{{ migrationMessage }}

+   + +
+
diff --git a/src/app/home/recent-playlists/recent-playlists.component.scss b/src/app/home/recent-playlists/recent-playlists.component.scss index a1390799d..5c2cd45cb 100644 --- a/src/app/home/recent-playlists/recent-playlists.component.scss +++ b/src/app/home/recent-playlists/recent-playlists.component.scss @@ -2,6 +2,10 @@ padding-top: 0; } +.playlists-list { + padding: 0; +} + .meta { font-size: 12px !important; color: #666; diff --git a/src/app/home/recent-playlists/recent-playlists.component.ts b/src/app/home/recent-playlists/recent-playlists.component.ts index 89d656624..0c89ef9fd 100644 --- a/src/app/home/recent-playlists/recent-playlists.component.ts +++ b/src/app/home/recent-playlists/recent-playlists.component.ts @@ -12,7 +12,7 @@ import { MatSnackBar } from '@angular/material/snack-bar'; import { Router } from '@angular/router'; import { Store } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; -import { map } from 'rxjs'; +import { BehaviorSubject, combineLatest, map } from 'rxjs'; import { GLOBAL_FAVORITES_PLAYLIST_ID } from '../../../../shared/constants'; import { IpcCommand } from '../../../../shared/ipc-command.class'; import { Playlist } from '../../../../shared/playlist.interface'; @@ -42,9 +42,20 @@ import { PlaylistInfoComponent } from './playlist-info/playlist-info.component'; styleUrls: ['./recent-playlists.component.scss'], }) export class RecentPlaylistsComponent implements OnDestroy { - playlists$ = this.store.select(selectAllPlaylistsMeta).pipe( + searchQuery = new BehaviorSubject(''); + + playlists$ = combineLatest([ + this.store.select(selectAllPlaylistsMeta), + this.searchQuery, + ]).pipe( // eslint-disable-next-line @ngrx/avoid-mapping-selectors - map((playlists) => playlists.sort((a, b) => a.position - b.position)) + map(([playlists, searchQuery]) => + playlists + .sort((a, b) => a.position - b.position) + .filter((item) => + item.title.toLowerCase().includes(searchQuery.toLowerCase()) + ) + ) ); allPlaylistsLoaded$ = this.store.select(selectPlaylistsLoadingFlag); @@ -229,4 +240,12 @@ export class RecentPlaylistsComponent implements OnDestroy { ); } } + + trackByFn(_index: number, item: PlaylistMeta) { + return item._id; + } + + onSearchQueryUpdate(searchQuery: string) { + this.searchQuery.next(searchQuery); + } }