begin van audio display

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

@@ -0,0 +1,66 @@
+package org.toop.app.view.displays;
+
+import javafx.application.Platform;
+import javafx.scene.control.ProgressBar;
+import javafx.scene.layout.VBox;
+import org.toop.app.App;
+import org.toop.app.view.View;
+import org.toop.framework.audio.AudioEventListener;
+import org.toop.framework.resource.ResourceManager;
+import org.toop.framework.resource.resources.MusicAsset;
+import org.toop.local.AppContext;
+import javafx.geometry.Pos;
+import javafx.scene.control.Button;
+import javafx.scene.text.Text;
+import org.toop.framework.audio.MusicManager;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class SongDisplay extends VBox {
+
+    private final Text songTitle;
+    private final ProgressBar progressBar;
+    private final Text progressText;
+    private MusicManager<MusicAsset> manager;
+
+    public SongDisplay() {
+
+        setAlignment(Pos.CENTER);
+        getStyleClass().add("song-display");
+
+        songTitle = new Text("song playing");
+        songTitle.getStyleClass().add("song-title");
+
+        progressBar = new ProgressBar(0);
+        progressBar.getStyleClass().add("progress-bar");
+
+        progressText = new Text("THIS IS AN EXAMPLE CUZ BAS DIDNT DECIDE TO MAKE EVENTS");
+        progressText.getStyleClass().add("progress-text");
+
+        getChildren().addAll(songTitle, progressBar, progressText);
+
+        setMusicManager();
+    }
+
+    public void updateTheSong(String title, double progress) {
+        songTitle.setText(title);
+        progressBar.setProgress(progress);
+    }
+
+    public String getPlayingSong() {
+        return manager.getCurrentTrack().getName();
+    }
+
+    public void setMusicManager() {
+        List<MusicAsset> tracks = ResourceManager.getAllOfTypeAndRemoveWrapper(MusicAsset.class);
+        this.manager = new MusicManager<>(tracks);
+
+        String song = getPlayingSong();
+        Platform.runLater(() -> songTitle.setText(song));
+    }
+}
+
+
+
+

app/src/main/java/org/toop/app/view/views/MainView.java

@@ -4,7 +4,7 @@ import org.toop.app.App;
 import org.toop.app.view.View;
 import org.toop.app.view.ViewStack;
 import org.toop.local.AppContext;
-
+import org.toop.app.view.displays.SongDisplay;
 import javafx.geometry.Pos;
 import javafx.scene.control.Button;
 
@@ -35,6 +35,14 @@ public final class MainView extends View {
 		quitButton.setText(AppContext.getString("quit"));
 		quitButton.setOnAction(_ -> { App.startQuit(); });
 
+        final SongDisplay songdisplay = new SongDisplay();
+
+
+        add(Pos.BOTTOM_RIGHT,
+            fit(vboxFill(
+                    songdisplay
+                    )));
+
 		add(Pos.CENTER,
 			fit(vboxFill(
 				localButton,

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

@@ -12,6 +12,35 @@
 	-fx-effect: dropshadow(gaussian, #1f6a22ff, 10, 0, 0, 3);
 }
 
+.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;
+}
+
+.song-title {
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-text-fill: white;
+}
+
+.progress-bar {
+    -fx-pref-width: 200px;
+    -fx-pref-height: 6px;
+    -fx-accent: #ff4d4d;
+    -fx-background-color: rgba(255, 255, 255, 0.15);
+    -fx-background-radius: 4px;
+}
+
+.progress-text {
+    -fx-font-size: 11px;
+    -fx-text-fill: white;
+}
 .button {
 	-fx-background-color: linear-gradient(to bottom, #1b7a1b, #2da32d);
 	-fx-background-radius: 8;

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

@@ -12,6 +12,35 @@
 	-fx-effect: dropshadow(gaussian, #a0c4b088, 6, 0, 0, 2);
 }
 
+.song-display {
+    -fx-background-color: rgba(20, 20, 20, 0.75);
+    -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;
+}
+
+.song-title {
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-text-fill: white;
+}
+
+.progress-bar {
+    -fx-pref-width: 200px;
+    -fx-pref-height: 6px;
+    -fx-accent: #4dd0e1; /* bright cyan progress color */
+    -fx-background-color: rgba(255, 255, 255, 0.15);
+    -fx-background-radius: 4px;
+}
+
+.progress-text {
+    -fx-font-size: 11px;
+    -fx-text-fill: #cccccc;
+}
 .button {
 	-fx-background-color: linear-gradient(to bottom, #7ac27a, #90d090);
 	-fx-background-radius: 8;