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