💄 Added indicator for the song that's currently playing in SongList.

Think about the details...

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();

src/app/components/songlist/songlist.component.html

@@ -12,7 +12,7 @@
   <tbody *ngIf="songsInfo">
     <tr *ngFor="let song of songsInfo; let i = index">
       <th scope="row">{{ i + 1 }}</th>
-      <th><fa-icon (click)="audio.setSong(songs[i])" [icon]="faPlay"></fa-icon></th>
+      <th><div [class]="song.id  === currentSongId ? 'spinning' : ''"><fa-icon (click)="audio.setSong(songs[i])" [icon]="song.id  === currentSongId ? faCompactDisc : faPlay"></fa-icon></div></th>
       <td>{{ song.name }}</td>
       <td *ngIf="song.artistInfo">{{ song.artistInfo.name }}</td>
       <td *ngIf="song.albumInfo">{{ song.albumInfo.name }}</td>

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);
+    }
+}

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 = {

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<number>();
+  currentSong$ = new Subject<number>();
+  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);
   }
 }