mini-player: wip implementation

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>

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>

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>

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>

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>

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,
+    background: linear-gradient(to bottom,
         transparent 50%,
-      rgba(0, 0, 0, 0.2) 51%
-    );
+        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);
+      }
+    }
+  }
+
 }

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>