Get Artist & details + lock loading system
Because with stats, scroll launch an undesired loading of data So need to lock when loading data
This commit is contained in:
@@ -31,11 +31,7 @@ export class AlbumComponent implements OnInit {
|
|||||||
|
|
||||||
this.loadSongs()
|
this.loadSongs()
|
||||||
|
|
||||||
this.elsService.getAlbum(this.albumName).subscribe(data => {
|
this.elsService.getAlbum(this.albumName).subscribe(data => this.album = data);
|
||||||
this.album = data;
|
|
||||||
console.log(this.album);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
loadSongs(): void {
|
loadSongs(): void {
|
||||||
|
|||||||
@@ -15,10 +15,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-xs-9 text-right">
|
<div class="col-xs-9 text-right">
|
||||||
<div>
|
<div>
|
||||||
<h3 *ngIf="!albumNames"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
<h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
||||||
<h3 *ngIf="albumNames">{{albumNames.length}}</h3>
|
<h3 *ngIf="artist">{{artist.Album?.length}}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div><br>Total time</div>
|
<div><br>albums</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { Location } from '@angular/common'
|
|||||||
|
|
||||||
import { ElsService } from './els.service'
|
import { ElsService } from './els.service'
|
||||||
import { Song } from './object/song';
|
import { Song } from './object/song';
|
||||||
|
import { Artist } from './object/artist';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'artist-component',
|
selector: 'artist-component',
|
||||||
@@ -20,10 +21,10 @@ export class ArtistComponent implements OnInit {
|
|||||||
|
|
||||||
artistName = "";
|
artistName = "";
|
||||||
songs: Array<Song> = [];
|
songs: Array<Song> = [];
|
||||||
|
artist: Artist = new Artist();
|
||||||
moreDataAvailable: boolean = false;
|
moreDataAvailable: boolean = false;
|
||||||
atBottom: boolean = false;
|
atBottom: boolean = false;
|
||||||
albumNames: string[];
|
lockLoadData: boolean = true;
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.route.params
|
this.route.params
|
||||||
@@ -31,14 +32,13 @@ export class ArtistComponent implements OnInit {
|
|||||||
|
|
||||||
this.loadSongs();
|
this.loadSongs();
|
||||||
|
|
||||||
this.elsService.getArtistAlbums(this.artistName).subscribe(data => this.albumNames = data );
|
this.elsService.getArtist(this.artistName).subscribe(data => this.artist = data);
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO Duplicate code!
|
// TODO Duplicate code!
|
||||||
loadSongs(): void {
|
loadSongs(): void {
|
||||||
this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
|
this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
|
||||||
data => {
|
data => {
|
||||||
console.log(this.moreDataAvailable);
|
|
||||||
this.moreDataAvailable = data.length == ElsService.DEFAULT_SIZE;
|
this.moreDataAvailable = data.length == ElsService.DEFAULT_SIZE;
|
||||||
|
|
||||||
// Erase song array with result for first load, then add elements one by one
|
// Erase song array with result for first load, then add elements one by one
|
||||||
@@ -50,6 +50,7 @@ export class ArtistComponent implements OnInit {
|
|||||||
this.songs.push(song);
|
this.songs.push(song);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
this.lockLoadData = false;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -66,8 +67,9 @@ export class ArtistComponent implements OnInit {
|
|||||||
* @param event scroll event
|
* @param event scroll event
|
||||||
*/
|
*/
|
||||||
onScroll(event: any) {
|
onScroll(event: any) {
|
||||||
if (this.moreDataAvailable &&
|
if (this.moreDataAvailable && !this.lockLoadData &&
|
||||||
(window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
|
(window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
|
||||||
|
this.lockLoadData = true;
|
||||||
this.loadSongs();
|
this.loadSongs();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import 'rxjs/add/operator/map';
|
|||||||
|
|
||||||
import { Song } from './object/song';
|
import { Song } from './object/song';
|
||||||
import { Album } from './object/album';
|
import { Album } from './object/album';
|
||||||
|
import { Artist } from './object/artist';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class ElsService {
|
export class ElsService {
|
||||||
@@ -118,17 +119,17 @@ export class ElsService {
|
|||||||
return this.http
|
return this.http
|
||||||
.post(this.elsUrl + "song/_search",
|
.post(this.elsUrl + "song/_search",
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
"query": {
|
"query": {
|
||||||
"bool": {
|
"bool": {
|
||||||
"should": [
|
"should": [
|
||||||
{"match_phrase" : { "Album Artist" : artistName }},
|
{"match_phrase" : { "Album Artist" : artistName }},
|
||||||
{"match_phrase" : { "Artist" : artistName }}
|
{"match_phrase" : { "Artist" : artistName }}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"size": ElsService.DEFAULT_SIZE,
|
"size": ElsService.DEFAULT_SIZE,
|
||||||
"from": from
|
"from": from
|
||||||
}),
|
}),
|
||||||
{headers: this.headers})
|
{headers: this.headers})
|
||||||
.map(res => {
|
.map(res => {
|
||||||
return res.json().hits.hits;
|
return res.json().hits.hits;
|
||||||
@@ -162,10 +163,10 @@ export class ElsService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
getArtistAlbums(artistName: string): Observable<string[]> {
|
getArtist(artistName: string): Observable<Artist> {
|
||||||
return this.http
|
return this.http
|
||||||
.post(this.elsUrl + "artist/_search",
|
.post(this.elsUrl + "artist/_search",
|
||||||
JSON.stringify({"fields": "Album","query":{"match_phrase":{"Artist":artistName}},"size": ElsService.DEFAULT_SIZE}),
|
JSON.stringify({"query":{"match_phrase":{"Artist":artistName}},"size": ElsService.DEFAULT_SIZE}),
|
||||||
{headers: this.headers})
|
{headers: this.headers})
|
||||||
.map(res => res.json().hits.hits)
|
.map(res => res.json().hits.hits)
|
||||||
.map((hits: Array<any>) => {
|
.map((hits: Array<any>) => {
|
||||||
@@ -179,7 +180,7 @@ export class ElsService {
|
|||||||
console.error('More than one artist "' + artistName + '" found, return the first.');
|
console.error('More than one artist "' + artistName + '" found, return the first.');
|
||||||
console.error('This is not normal!')
|
console.error('This is not normal!')
|
||||||
}
|
}
|
||||||
return hits[0].fields.Album;
|
return hits[0]._source;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
10
dashboard/src/app/object/artist.ts
Normal file
10
dashboard/src/app/object/artist.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
export class Artist {
|
||||||
|
Name: string;
|
||||||
|
Album: string[];
|
||||||
|
Artist: string;
|
||||||
|
Rating: number;
|
||||||
|
Genre: Array<string>;
|
||||||
|
"Track Count": number;
|
||||||
|
"Persistent ID": string;
|
||||||
|
"Play Count": number;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user