Skip Button

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

@@ -1,13 +1,16 @@
 package org.toop.app.view.displays;
 
 import javafx.application.Platform;
+import javafx.scene.control.Button;
 import javafx.scene.control.ProgressBar;
 import javafx.scene.layout.VBox;
 import javafx.scene.paint.Color;
+import org.toop.framework.audio.AudioEventListener;
 import org.toop.framework.audio.events.AudioEvents;
 import org.toop.framework.eventbus.EventFlow;
 import javafx.geometry.Pos;
 import javafx.scene.text.Text;
+import org.toop.framework.eventbus.GlobalEventBus;
 
 public class SongDisplay extends VBox {
 
@@ -19,27 +22,26 @@ public class SongDisplay extends VBox {
         new EventFlow()
                 .listen(this::updateTheSong);
 
-        //TODO ADD NICER CSS
-
         setAlignment(Pos.CENTER);
         getStyleClass().add("song-display");
 
-
         // TODO ADD GOOD SONG TITLES WITH ARTISTS DISPLAYED
         songTitle = new Text("song playing");
-        songTitle.setFill(Color.WHITE);
         songTitle.getStyleClass().add("song-title");
 
         progressBar = new ProgressBar(0);
         progressBar.getStyleClass().add("progress-bar");
 
         progressText = new Text("0:00/0:00");
-        progressText.setFill(Color.WHITE);
         progressText.getStyleClass().add("progress-text");
 
-        //TODO ADD SKIP BUTTON
+        Button skipButton = new Button(">>");
+        skipButton.getStyleClass().setAll("skip-button");
+        skipButton.setOnAction( event -> {
+            GlobalEventBus.post(new AudioEvents.SkipMusic());
+        });
 
-        getChildren().addAll(songTitle, progressBar, progressText);
+        getChildren().addAll(songTitle, progressBar, progressText, skipButton);
     }
 
     private void updateTheSong(AudioEvents.PlayingMusic event) {

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

@@ -13,31 +13,46 @@
 }
 
 .song-display {
-    -fx-background-color: rgba(30, 60, 30, 0.85);
-    -fx-background-radius: 10px;
     -fx-padding: 8 12 8 12;
     -fx-spacing: 6px;
     -fx-alignment: center;
     -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 6, 0.5, 0, 2);
     -fx-min-width: 220px;
     -fx-max-width: 260px;
-    -fx-text-fill: white;
 }
 
 .song-title {
     -fx-font-size: 14px;
-    -fx-font-weight: bold;
-    -fx-text-fill: white;
+    -fx-fill: white;
 }
 
 .progress-bar {
-    -fx-pref-width: 150px;
+    -fx-pref-width: 200px;
     -fx-accent: red;
 }
 
+.progress-bar > .track {
+    -fx-background-radius: 30;
+}
+
+.progress-bar > .bar {
+    -fx-background-radius: 30px;
+}
+
 .progress-text {
     -fx-font-size: 11px;
-    -fx-text-fill: white;
+    -fx-fill: white;
+}
+
+.skip-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: white;
+ 	}
+
+.skip-button .text {
+    -fx-fill: white;
 }
 
 .button {

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

@@ -13,31 +13,46 @@
 }
 
 .song-display {
-    -fx-background-color: rgba(30, 60, 30, 0.85);
-    -fx-background-radius: 10px;
     -fx-padding: 8 12 8 12;
     -fx-spacing: 6px;
     -fx-alignment: center;
     -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 6, 0.5, 0, 2);
     -fx-min-width: 220px;
     -fx-max-width: 260px;
-    -fx-text-fill: white;
 }
 
 .song-title {
     -fx-font-size: 14px;
-    -fx-font-weight: bold;
-    -fx-text-fill: white;
+    -fx-fill: white;
 }
 
 .progress-bar {
-    -fx-pref-width: 150px;
+    -fx-pref-width: 200px;
     -fx-accent: red;
 }
 
+.progress-bar > .track {
+    -fx-background-radius: 30;
+}
+
+.progress-bar > .bar {
+    -fx-background-radius: 30px;
+}
+
 .progress-text {
     -fx-font-size: 11px;
-    -fx-text-fill: white;
+    -fx-fill: white;
+}
+
+.skip-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: white;
+ 	}
+
+.skip-button .text {
+    -fx-fill: white;
 }
 
 .button {

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

@@ -13,31 +13,47 @@
 }
 
 .song-display {
-    -fx-background-color: rgba(30, 60, 30, 0.85);
-    -fx-background-radius: 10px;
     -fx-padding: 8 12 8 12;
     -fx-spacing: 6px;
     -fx-alignment: center;
     -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 6, 0.5, 0, 2);
     -fx-min-width: 220px;
     -fx-max-width: 260px;
-    -fx-text-fill: white;
 }
 
 .song-title {
     -fx-font-size: 14px;
-    -fx-font-weight: bold;
-    -fx-text-fill: white;
+    -fx-fill: black;
 }
 
 .progress-bar {
-    -fx-pref-width: 150px;
+    -fx-inner-background-color: black;
+    -fx-pref-width: 200px;
     -fx-accent: red;
 }
 
+.progress-bar > .track {
+    -fx-background-radius: 30;
+}
+
+.progress-bar > .bar {
+    -fx-background-radius: 30px;
+}
+
 .progress-text {
     -fx-font-size: 11px;
-    -fx-text-fill: white;
+    -fx-fill: black;
+}
+
+.skip-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0;
+ 	-fx-cursor: hand;
+ 	-fx-text-fill: black;
+ 	}
+
+.skip-button .text {
+    -fx-fill: black;
 }
 
 .button {