diff --git a/src/app/components/controls/controls.component.ts b/src/app/components/controls/controls.component.ts
index 97bafc6..30c0bdf 100644
--- a/src/app/components/controls/controls.component.ts
+++ b/src/app/components/controls/controls.component.ts
@@ -35,7 +35,7 @@ export class ControlsComponent implements OnInit {
) { }
ngOnInit() {
- this.audio.currentSong.subscribe(async id => {
+ this.audio.currentSong$.subscribe(async id => {
this.currentSong = await this.api.getSong(id);
this.currentArtist = await this.currentSong.getArtist();
this.currentAlbum = await this.currentSong.getAlbum();
diff --git a/src/app/components/songlist/songlist.component.html b/src/app/components/songlist/songlist.component.html
index 09ce74b..a1e6ec3 100644
--- a/src/app/components/songlist/songlist.component.html
+++ b/src/app/components/songlist/songlist.component.html
@@ -12,7 +12,7 @@
{{ i + 1 }} |
- |
+
|
{{ song.name }} |
{{ song.artistInfo.name }} |
{{ song.albumInfo.name }} |
diff --git a/src/app/components/songlist/songlist.component.scss b/src/app/components/songlist/songlist.component.scss
index e69de29..afc42aa 100644
--- a/src/app/components/songlist/songlist.component.scss
+++ b/src/app/components/songlist/songlist.component.scss
@@ -0,0 +1,17 @@
+.spinning {
+ width: min-content;
+ height: min-content;
+ animation-name: spin;
+ animation-duration: 3000ms;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+@keyframes spin {
+ from {
+ transform:rotate(0deg);
+ }
+ to {
+ transform:rotate(360deg);
+ }
+}
diff --git a/src/app/components/songlist/songlist.component.ts b/src/app/components/songlist/songlist.component.ts
index 451aaf0..f0746a1 100644
--- a/src/app/components/songlist/songlist.component.ts
+++ b/src/app/components/songlist/songlist.component.ts
@@ -1,6 +1,6 @@
import { Component, OnInit, Input } from '@angular/core';
import { Song, Artist, Album } from '../../classes/entities';
-import { faPlay } from '@fortawesome/free-solid-svg-icons';
+import { faPlay, faPlayCircle, faCompactDisc } from '@fortawesome/free-solid-svg-icons';
import { AudioService } from 'src/app/services/audio.service';
@Component({
@@ -12,13 +12,20 @@ export class SonglistComponent implements OnInit {
@Input() songs: Song[];
songsInfo = [];
+ currentSongId: number;
// ? fontAwesome imports
faPlay = faPlay;
+ faPlayCircle = faPlayCircle;
+ faCompactDisc = faCompactDisc;
constructor(public audio: AudioService) { }
ngOnInit() {
+
+ this.currentSongId = this.audio.currentSong;
+ this.audio.currentSong$.subscribe(id => this.currentSongId = id);
+
this.songs.forEach(song => {
const index = this.songsInfo.push({}) - 1;
const result = {
diff --git a/src/app/services/audio.service.ts b/src/app/services/audio.service.ts
index 8230500..f5e1a16 100644
--- a/src/app/services/audio.service.ts
+++ b/src/app/services/audio.service.ts
@@ -23,11 +23,15 @@ export class AudioService {
this.player.addEventListener('timeupdate', () => {
this.currentTime = this.player.currentTime;
});
+
+ // Make sure that the currentSong property equals the current song id.
+ this.currentSong$.subscribe(id => this.currentSong = id);
}
player = new Audio();
- currentSong = new Subject();
+ currentSong$ = new Subject();
+ currentSong: number;
currentTime: number;
// Use audio.time to set the time
@@ -82,6 +86,6 @@ export class AudioService {
*/
setSong(song: Song) {
this.player.src = this.data.apiUrl + '/play/' + song.path;
- this.currentSong.next(song.id);
+ this.currentSong$.next(song.id);
}
}