✨ Basis for controls working!

It still needs a ton of work, though.

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { HttpClientModule } from '@angular/common/http';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -25,7 +26,8 @@ import { ControlsComponent } from './components/controls/controls.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    FontAwesomeModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/controls/controls.component.html

@@ -1 +1,19 @@
-<p>controls works!</p>
+<div class="container">
+
+  <div *ngIf="( currentSong | async ) as song" class="songInfo">
+    {{ song.result[0].name }}
+  </div>
+
+  <div class="buttons">
+    <fa-icon (click)="audio.isCurrentlyPlaying ? audio.pause() : audio.play()" [icon]="audio.isCurrentlyPlaying ? faPause : faPlay"></fa-icon>
+  </div>
+
+  <div class="time">
+
+  </div>
+
+  <div class="volume">
+
+  </div>
+
+</div>

src/app/components/controls/controls.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
+import { AudioService } from 'src/app/services/audio.service';
+import { DataService } from 'src/app/services/data.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-controls',
@@ -7,9 +11,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ControlsComponent implements OnInit {
 
-  constructor() { }
+  // ? Fontawesome imports
+  faPlay = faPlay;
+  faPause = faPause;
+
+  currentSong: Observable<any>;
+
+  constructor(
+    public audio: AudioService,
+    private data: DataService
+  ) { }
 
   ngOnInit() {
+    this.audio.currentSong.subscribe(id => {
+      this.currentSong = this.data.getSong(id);
+    });
   }
 
 }

src/app/components/home/home.component.html

@@ -1 +1,3 @@
-<p>{{ (song | async) | json }}</p>
+<p *ngIf="( song | async ) as song">
+  <span (click)="audio.setSong(song.result[0].id)">{{ song.result[0].name }}</span>
+</p>

src/app/components/home/home.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { DataService } from 'src/app/services/data.service';
 import { Observable } from 'rxjs';
+import { AudioService } from 'src/app/services/audio.service';
 
 @Component({
   selector: 'app-home',
@@ -11,7 +12,10 @@ export class HomeComponent implements OnInit {
 
   song: Observable<object>;
 
-  constructor(private data: DataService) { }
+  constructor(
+    private data: DataService,
+    public audio: AudioService
+  ) { }
 
   ngOnInit() {
     // Load the first song from the API

src/app/services/audio.service.ts

@@ -1,29 +1,51 @@
 import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
 import { DataService } from './data.service';
 
+/**
+ * The audio service handles all logic that has to do with the audio player.
+ */
 @Injectable({
   providedIn: 'root'
 })
 export class AudioService {
 
-  player = new Audio();
-
-  currentlyPlaying;
+  /**
+   * The isCurrentlyPlaying property is equal to the current playstate of the player.
+   */
+  get isCurrentlyPlaying() {
+    return !this.player.paused;
+  }
 
   constructor(private data: DataService) { }
 
+  player = new Audio();
+
+  currentSong = new Subject<number>();
+
+  /**
+   * The play function sets the playstate of the player to playing.
+   */
   play() {
     this.player.play();
   }
 
+/**
+ * The pause function sets the playstate of the player to paused.
+ */
   pause() {
     this.player.pause();
   }
 
+  /**
+   * The setSong function set the song for the player.
+   * @param id The id of the song that needs to be played
+   */
   setSong(id: number) {
     this.data.getSong(id).subscribe((res: any) => {
+      console.log(this.data.apiUrl + '/play/' + res.result[0].path);
       this.player.src = this.data.apiUrl + '/play/' + res.result[0].path;
-      this.currentlyPlaying = id;
+      this.currentSong.next(id);
     });
   }
 }