From b4f861e79b43c8c24bb3577da8fa024914e236c8 Mon Sep 17 00:00:00 2001
From: Agahnim <naguiagahnim@proton.me>
Date: Fri, 20 Mar 2026 13:48:15 +0100
Subject: [PATCH] mini-player: wip implementation

---
 static/assets/svgs/pause.svg        |  2 ++
 static/assets/svgs/play.svg         |  2 ++
 static/assets/svgs/skip-back.svg    |  2 ++
 static/assets/svgs/skip-forward.svg |  2 ++
 static/assets/svgs/volume-2.svg     |  2 ++
 static/style.css                    | 40 ++++++++++++++++++++++++-----
 templates/partials/miniplayer.html  | 11 ++++++++
 7 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 static/assets/svgs/pause.svg
 create mode 100644 static/assets/svgs/play.svg
 create mode 100644 static/assets/svgs/skip-back.svg
 create mode 100644 static/assets/svgs/skip-forward.svg
 create mode 100644 static/assets/svgs/volume-2.svg

diff --git a/static/assets/svgs/pause.svg b/static/assets/svgs/pause.svg
new file mode 100644
index 0000000..08af7e2
--- /dev/null
+++ b/static/assets/svgs/pause.svg
@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause-icon lucide-pause"><rect x="14" y="3" width="5" height="18" rx="1"/><rect x="5" y="3" width="5" height="18" rx="1"/></svg>
diff --git a/static/assets/svgs/play.svg b/static/assets/svgs/play.svg
new file mode 100644
index 0000000..4cf7760
--- /dev/null
+++ b/static/assets/svgs/play.svg
@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play-icon lucide-play"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>
diff --git a/static/assets/svgs/skip-back.svg b/static/assets/svgs/skip-back.svg
new file mode 100644
index 0000000..cdd7bbd
--- /dev/null
+++ b/static/assets/svgs/skip-back.svg
@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-back-icon lucide-skip-back"><path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z"/><path d="M3 20V4"/></svg>
diff --git a/static/assets/svgs/skip-forward.svg b/static/assets/svgs/skip-forward.svg
new file mode 100644
index 0000000..54f13fe
--- /dev/null
+++ b/static/assets/svgs/skip-forward.svg
@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-forward-icon lucide-skip-forward"><path d="M21 4v16"/><path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z"/></svg>
diff --git a/static/assets/svgs/volume-2.svg b/static/assets/svgs/volume-2.svg
new file mode 100644
index 0000000..87d2e88
--- /dev/null
+++ b/static/assets/svgs/volume-2.svg
@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volume2-icon lucide-volume-2"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 18.364a9 9 0 0 0 0-12.728"/></svg>
diff --git a/static/style.css b/static/style.css
index 0b47b47..6783349 100644
--- a/static/style.css
+++ b/static/style.css
@@ -7,6 +7,7 @@
   --darker-pink: #ff75a7;
   --darkerer-pink: #ff4287;
   --win-bg-grey: #c0c0c0;
+  --grey-500: oklch(55.1% 0.027 264.364);
 }
 
 body {
@@ -44,11 +45,9 @@ crt {
   }
 
   &::before {
-    background: linear-gradient(
-      to bottom,
-      transparent 50%,
-      rgba(0, 0, 0, 0.2) 51%
-    );
+    background: linear-gradient(to bottom,
+        transparent 50%,
+        rgba(0, 0, 0, 0.2) 51%);
     background-size: 100% 4px;
     animation: scanlines 1s steps(60) infinite;
   }
@@ -157,9 +156,38 @@ miniplayer {
   left: 0;
   z-index: 100;
   background-color: var(--win-bg-grey);
-  border: 2px solid oklch(55.1% 0.027 264.364);
+  border: 2px solid var(--grey-500);
 
   ominous-message {
     font-style: italic;
   }
+
+  controls {
+
+    display: flex;
+    flex-direction: row;
+    gap: 5rem;
+
+    state {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    volume {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+
+      input {
+        height: 4px;
+        width: 5rem;
+        appearance: none;
+        background-color: white;
+        border: 1px solid var(--grey-500);
+      }
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/templates/partials/miniplayer.html b/templates/partials/miniplayer.html
index 60a90cf..92d80f9 100644
--- a/templates/partials/miniplayer.html
+++ b/templates/partials/miniplayer.html
@@ -7,6 +7,17 @@
     <p>{{ track.title }} - {{ track.artist }}</p>
     <audio controls src="{{ track.src }}"></audio>
   </div>
+  <controls>
+    <state>
+      <img src="/static/assets/svgs/skip-back.svg" width="12" height="12" />
+      <img src="/static/assets/svgs/play.svg" width="12" height="12" />
+      <img src="/static/assets/svgs/skip-forward.svg" width="12" height="12" />
+    </state>
+    <volume>
+      <img src="/static/assets/svgs/volume-2.svg" width="12" height="12" />
+      <input type="range" min="0" max="1" step="0.01" />
+    </volume>
+  </controls>
   {% endfor %}
   {% endif %}
 </miniplayer>
\ No newline at end of file