Toegevoegd:

-Play Button + CSS + Events
-Previous Button + CSS + Events
-Changed interface for AudioResource to include a pause button which works really well with mediaplayer, however now SoundEffectAsset has an unnessescary pause

app/src/main/java/org/toop/app/view/displays/SongDisplay.java

@@ -3,6 +3,7 @@ package org.toop.app.view.displays;
 import javafx.application.Platform;
 import javafx.scene.control.Button;
 import javafx.scene.control.ProgressBar;
+import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 import javafx.scene.paint.Color;
 import org.toop.framework.audio.AudioEventListener;
@@ -38,12 +39,30 @@ public class SongDisplay extends VBox {
         // TODO ADD BETTER CSS FOR THE SKIPBUTTON WHERE ITS AT A NICER POSITION
 
         Button skipButton = new Button(">>");
+        Button pauseButton = new Button("⏸");
+        Button previousButton = new Button("<<");
+
         skipButton.getStyleClass().setAll("skip-button");
+        pauseButton.getStyleClass().setAll("pause-button");
+        previousButton.getStyleClass().setAll("previous-button");
+
         skipButton.setOnAction( event -> {
             GlobalEventBus.post(new AudioEvents.SkipMusic());
         });
 
-        getChildren().addAll(songTitle, progressBar, progressText, skipButton);
+        pauseButton.setOnAction(event -> {
+            GlobalEventBus.post(new AudioEvents.PauseMusic());
+        });
+
+        previousButton.setOnAction( event -> {
+            GlobalEventBus.post(new AudioEvents.PreviousMusic());
+        });
+
+        HBox control = new HBox(10, previousButton, pauseButton, skipButton);
+        control.setAlignment(Pos.CENTER);
+        control.getStyleClass().add("controls");
+
+        getChildren().addAll(songTitle, progressBar, progressText, control);
     }
 
     private void updateTheSong(AudioEvents.PlayingMusic event) {

app/src/main/resources/assets/style/dark.css

@@ -55,6 +55,28 @@
     -fx-fill: white;
 }
 
+.pause-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: white;
+ 	}
+
+.pause-button .text {
+    -fx-fill: white;
+}
+
+.previous-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: white;
+ 	}
+
+.previous-button .text {
+    -fx-fill: white;
+}
+
 .button {
 	-fx-background-color: linear-gradient(to bottom, #1f5e20, #2e7d2e);
 	-fx-background-radius: 8;

app/src/main/resources/assets/style/high-contrast.css

@@ -55,6 +55,28 @@
     -fx-fill: white;
 }
 
+.pause-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: white;
+ 	}
+
+.pause-button .text {
+    -fx-fill: white;
+}
+
+.previous-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: white;
+ 	}
+
+.previous-button .text {
+    -fx-fill: white;
+}
+
 .button {
 	-fx-background-color: linear-gradient(to bottom, #1b7a1b, #2da32d);
 	-fx-background-radius: 8;

app/src/main/resources/assets/style/light.css

@@ -56,6 +56,28 @@
     -fx-fill: black;
 }
 
+.pause-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: black;
+ 	}
+
+.pause-button .text {
+    -fx-fill: black;
+}
+
+.previous-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: black;
+ 	}
+
+.previous-button .text {
+    -fx-fill: black;
+}
+
 .button {
 	-fx-background-color: linear-gradient(to bottom, #7ac27a, #90d090);
 	-fx-background-radius: 8;