kangaroo-and-rabbit/karusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

[DEV] add search in artist and album

Browse Source
This commit is contained in:
Edouard DUPIN 2024-01-27 19:34:53 +01:00
parent 883866d5f6
commit b4157877c3
9 changed files with 75 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/app/component/element-player-audio/element-player-audio.less
View File

@ -82,6 +82,7 @@
}
.title {
width: 100%;
font-size: 24px;
font-weight: bold;
}

11
front/src/app/scene/album/album.html
View File

@ -19,9 +19,14 @@
</button>
</div>
</div>
<div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
<div class="cover-area" *ngIf="artistCovers">
<div class="cover">
<img src="{{artistCovers[0]}}"/>
</div>
</div>
<div class="cover-area" *ngIf="albumCovers">
<div class="cover">
<img src="{{albumCovers[0]}}"/>
</div>
</div>
</div>

47
front/src/app/scene/album/album.ts
View File

@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
import { Media } from 'app/model';
import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service';
import { arrayUnique } from 'common/utils/arrayTools';
@Component({
selector: 'app-album',
@ -15,11 +16,11 @@ import { ArtistService, DataService, ArianeService, AlbumService, TrackService,
})
export class AlbumScene implements OnInit {
public idArtist = -1;
public idAlbum = -1;
public name: string = '';
public artistIds: number[] = [];
public idAlbum: number = -1;
public name: string = '???';
public description: string = undefined;
public covers: Array<string> = undefined;
public artistCovers: Array<string> = undefined;
public albumName: string = '';
public albumDescription: string = undefined;
public albumCovers: string[] = undefined;
@ -34,26 +35,12 @@ export class AlbumScene implements OnInit {
private arianeService: ArianeService,
private playerService: PlayerService,
private dataService: DataService) {
}
ngOnInit() {
// this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
this.idArtist = this.arianeService.getArtistId();
//this.artistIds = [this.arianeService.getArtistId()];
this.idAlbum = this.arianeService.getAlbumId();
let self = this;
this.artistService.get(this.idArtist)
.then((response) => {
self.name = response.name;
self.description = response.description;
self.covers = this.dataService.getCoverListUrl(response.covers);
}).catch((response) => {
self.description = undefined;
self.name = '???';
self.covers = undefined;
// no check just ==> an error occured on album
});
this.albumService.get(this.idAlbum)
.then((response) => {
self.albumName = response.name;
@ -70,6 +57,28 @@ export class AlbumScene implements OnInit {
this.trackService.getWithAlbum(self.idAlbum)
.then((response2: Media[]) => {
self.tracks = response2;
self.artistIds = []
self.tracks.forEach(element => {
self.artistIds = [...self.artistIds, ...element.artists];
});
self.artistIds = arrayUnique(self.artistIds);
if (self.artistIds.length === 0) {
console.error("No artist found !!!");
return;
} else if (self.artistIds.length > 1) {
console.error("More than 1 artist ==> not managed");
}
// TODO: display more than 1 ...
self.artistService.get(self.artistIds[0])
.then((response) => {
self.name = response.name;
self.description = response.description;
self.artistCovers = self.dataService.getCoverListUrl(response.covers);
}).catch((response) => {
self.description = undefined;
self.name = '???';
self.artistCovers = undefined;
});
//console.log(`>>>>BBB get tracks : ${JSON.stringify(response2, null, 2)}`);
}).catch((response) => {
//console.log(`>>>>BBB plop`);

10
front/src/app/scene/album/albums.html
View File

@ -24,15 +24,19 @@
</div>
<div class="fill-content colomn_single" *ngIf="albums">
<div class="clear"></div>
<div class="title" *ngIf="albums.length > 1">Albums:</div>
<div class="title" *ngIf="albums.length == 1">Album:</div>
<div *ngFor="let data of albums" class="item-list" (click)="onSelectAlbum($event, data.id)" (auxclick)="onSelectAlbum($event, data.id)">
<div class="title">Album<span *ngIf="albums.length > 1">s</span>: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
<div *ngFor="let data of albums"
class="item-list"
(click)="onSelectAlbum($event, data.id)"
(auxclick)="onSelectAlbum($event, data.id)"
>
<app-element-season
[element]="data"
countSubType="Track"
[countSubTypeCallBack]="countTrack"
subValues="Artist"
[subValuesCallBack]="getArtistsString"
></app-element-season>
</div>
</div>

10
front/src/app/scene/album/albums.ts
View File

@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service';
import { NodeData } from 'common/model';
import { filter } from 'rxjs';
@Component({
selector: 'app-albums',
@ -19,6 +20,7 @@ export class AlbumsScene implements OnInit {
public description: string = undefined;
public covers: string[] = undefined;
public albums: NodeData[] = undefined;
public albumsSave: NodeData[] = undefined;
public tracks: any[] = undefined;
public countSubElement: number = undefined;
countTrack: (id: number) => Promise<Number>;
@ -54,6 +56,7 @@ export class AlbumsScene implements OnInit {
.then((response: NodeData[]) => {
//console.log(`>>>> get album : ${JSON.stringify(response)}`)
self.albums = response;
self.albumsSave = [...response];
}).catch((response) => {
self.albums = undefined;
});
@ -69,7 +72,12 @@ export class AlbumsScene implements OnInit {
*/
}
onSearch(value: string) {
console.log(`Search value: ${value}`);
this.albums = this.albumsSave.filter(element => {
return element.name.toLowerCase().includes(value.toLowerCase());;
})
}
onSelectAlbum(event: any, idSelected: number): void {
if (event.ctrlKey) {

9
front/src/app/scene/artist/artist-album.html
View File

@ -19,9 +19,14 @@
</button>
</div>
</div>
<div class="cover-area" *ngIf="covers" >
<div class="cover-area" *ngIf="artistCovers" >
<div class="cover">
<img src="{{covers[0]}}"/>
<img src="{{artistCovers[0]}}"/>
</div>
</div>
<div class="cover-area" *ngIf="albumCovers" >
<div class="cover">
<img src="{{albumCovers[0]}}"/>
</div>
</div>
</div>

6
front/src/app/scene/artist/artist-album.ts
View File

@ -19,7 +19,7 @@ export class ArtistAlbumScene implements OnInit {
public idAlbum = -1;
public name: string = '';
public description: string = undefined;
public covers: Array<string> = undefined;
public artistCovers: Array<string> = undefined;
public albumName: string = '';
public albumDescription: string = undefined;
public albumCovers: string[] = undefined;
@ -47,11 +47,11 @@ export class ArtistAlbumScene implements OnInit {
.then((response) => {
self.name = response.name;
self.description = response.description;
self.covers = this.dataService.getCoverListUrl(response.covers);
self.artistCovers = this.dataService.getCoverListUrl(response.covers);
}).catch((response) => {
self.description = undefined;
self.name = '???';
self.covers = undefined;
self.artistCovers = undefined;
// no check just ==> an error occured on album
});
this.albumService.get(this.idAlbum)

3
front/src/app/scene/artist/artists.html
View File

@ -24,8 +24,7 @@
</div>
<div class="fill-content colomn_single" *ngIf="artists">
<div class="clear"></div>
<div class="title" *ngIf="artists.length > 1">Artists:</div>
<div class="title" *ngIf="artists.length == 1">Artist:</div>
<div class="title">Artist<span *ngIf="artists.length > 1">s</span>: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
<div *ngFor="let data of artists" class="item-list" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<app-element-season
[element]="data"

11
front/src/app/scene/artist/artists.ts
View File

@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
import { ArtistService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service';
import { NodeData } from 'common/model';
import { isNullOrUndefined } from 'common/utils';
@Component({
selector: 'app-artists',
@ -20,6 +21,7 @@ export class ArtistsScene implements OnInit {
name: string = "Artists";
description: string = "All available artists";
artists: NodeData[];
artistsSave: NodeData[];
countTrack: (id: number) => Promise<Number>;
countAlbum: (id: number) => Promise<Number>;
@ -41,11 +43,20 @@ export class ArtistsScene implements OnInit {
this.artistService.getOrder()
.then((response: NodeData[]) => {
self.artists = response;
self.artistsSave = [...response];
//console.log("get artists: " + JSON.stringify(self.artists));
}).catch((response) => {
self.artists = undefined;
});
}
onSearch(value: string) {
console.log(`Search value: ${value}`);
this.artists = this.artistsSave.filter(element => {
return element.name.toLowerCase().includes(value.toLowerCase());;
})
}
onSelectArtist(event: any, idSelected: number): void {
if (event.ctrlKey) {
this.arianeService.navigateArtistEdit({ id: idSelected, newWindows: event.which === 2 });