I offer a unique service.
handler.ts
import { Observable,of,Subject } from 'rxjs';
import { PlayerService } from "./../../core/services/player.service";
import { Injectable } from "@angular/core";
import { DeezerService } from "../services/deezer.service";
import { Track } from "../models/Track";
@Injectable({
providedIn: "root"
})
export class Handler {
isPlaying: boolean = false;
index: number;
constructor(
private playerService: PlayerService,
private deezer: DeezerService
) { }
initTracks(tracks): void {
this.playerService.init(tracks);
}
play() {
this.isPlaying = true;
this.playerService.play();
}
pause() {
this.playerService.pause();
}
stop() {
this.playerService.stop();
}
next() {
this.playerService.playNext();
}
previous() {
this.playerService.playPrevious();
}
playing(playing) {
this.isPlaying = playing;
}
onEnd() {
this.playerService.playNext();
}
start(album) {
if (this.isPlaying) this.stop();
this.deezer.getTrackList(album.tracklist)
.subscribe((tracks: Track[]) => {
this.initTracks(tracks);
this.playerService.index = 0;
this.play();
});
}
startSelectedTrack(tracks,trackIndex) {
if (this.isPlaying) this.stop();
this.initTracks(tracks);
this.playerService.playNew(trackIndex);
this.isPlaying = true;
}
}
The initTracks(tracks) function updates with fresh data each time a user clicks to play an album or track. This can be observed in the last two functions. I have a queue component that should display the current playlist of tracks passed into the initTracks(tracks) method. My challenge lies in implementing this functionality. I have attempted using an observable of the tracks utilizing of(tracks) within the initTracks function without success. Additionally, I experimented with a Subject for subscription purposes, but also encountered issues. How can I successfully pass any new data sent to the initTracks(tracks) into the queue component? Thank you.
If required, here is the link to the current source code. source code