From 2535a320aae064efccb5a4aae174a432e90c0f67 Mon Sep 17 00:00:00 2001
From: zuma <lucien@shenanigans.cc>
Date: Sat, 15 Mar 2025 15:24:34 +0100
Subject: [PATCH] Feat: Volume Slider

---
 README.md      |   5 +++
 src/App.svelte | 101 +++++++++++++++++++++++++++++++++----------------
 2 files changed, 74 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 33ab8c0..b3c4818 100644
--- a/README.md
+++ b/README.md
@@ -32,3 +32,8 @@ go build server.go
 ```
 
 Lorsque vous lancerez le serveur avec `./server` le programme viendra chercher tous les mp3 à la racine du dossier **music** et l'UI compilée devra être dans le dossier **dist**. Vous pouvez simplement copier le dossier dist produit par `npm run build` au même endroit que l'executable `server`.
+
+# Crédits
+
+Le compteur de personnes connectées utilise un artwork de Keith Haring.
+La police d'écriture utilisée pour le titre est [Momentz](https://www.dafont.com/momentz.font) de [Khurasan Studio](https://khurasanstudio.com/).
diff --git a/src/App.svelte b/src/App.svelte
index 5e9c202..33c4fa5 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -22,7 +22,6 @@
   const eventSource = new EventSource(basePath + '/metadata')
   eventSource.onmessage = function(event) {
     let receivedData = JSON.parse(event.data)
-    console.log(receivedData)
     title = receivedData.title
     url = receivedData.url
     imageData = receivedData.artwork
@@ -31,7 +30,6 @@
   const listenerSource = new EventSource(basePath + '/listeners')
   listenerSource.onmessage = function(event) {
     let receivedData = event.data
-    console.log(receivedData)
     numberOfListeners = parseInt(receivedData)
   }
 
@@ -42,7 +40,6 @@
   }
 
   async function buttonClick() {
-    console.log(audioPlayer.duration)
     if(isPlaying) {
       audioPlayer.pause()
       isPlaying = false
@@ -75,40 +72,46 @@
     </div>
     <img class="w-96 -mb-48 md:w-xl md:-mr-56 md:-mt-64 md:-mb-80" src={menthealeauLogo} alt="Logo d'une menthe à l'eau" />
   </div>
-  <div class="p-4 bg-[#f97095] rounded-md border-white border-5 drop-shadow-md flex flex-col gap-4 max-w-96 w-full">
-    <h1 class="font-[Momentz] text-white font-bold text-4xl">Menthe à l'eau</h1>
-    <p class="text-white font-[Inter] font-bold">Créée à l'origine pour être un énorme dump de musique en tout genre. Cette playlist est contre toute attente devenue un énorme dump de musique en tout genre. Enjoy the radio. 📻</p>
-    {#if imageData == ""}
-      <div class="block w-full pb-[26%] pt-[26%] flex flex-col items-center justify-center bg-[#ff99b4] rounded-md">
-        <svg class="mr-3 -ml-1 size-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+  <div class="flex flex-row md:items-center gap-2">
+    <div class="p-4 bg-[#f97095] rounded-md border-white border-5 drop-shadow-md flex flex-col gap-4 max-w-96 w-full">
+      <h1 class="font-[Momentz] text-white font-bold text-4xl">Menthe à l'eau</h1>
+      <p class="text-white font-[Inter] font-bold">Créée à l'origine pour être un énorme dump de musique en tout genre. Cette playlist est contre toute attente devenue un énorme dump de musique en tout genre. Enjoy the radio. 📻</p>
+      {#if imageData == ""}
+        <div class="block w-full pb-[26%] pt-[26%] flex flex-col items-center justify-center bg-[#ff99b4] rounded-md">
+          <svg class="mr-3 -ml-1 size-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+        </div>
+      {:else}
+        <a href={url} target="_blank">
+          <img class="w-full rounded" src={imageData} alt="current song artwork" />
+        </a>
+      {/if}
+      <span class="text-white font-[Inter] font-bold w-full text-ellipsis truncate">{#if title == ""}Loading...{:else}{title}{/if}</span>
+      <audio bind:this={audioPlayer}>
+        <source src={basePath + "/stream"} type="audio/mp3">
+      </audio>
+      <div class="flex flex-row w-full mt-16 -mb-24 flex-wrap">
+        {#each {length: numberOfListeners} as _,i}
+          <img src={dancing_guys[getRandomInt(0,4)]} class="max-h-6 max-w-6 animate-bounce">
+        {/each}
       </div>
-    {:else}
-      <a href={url} target="_blank">
-        <img class="w-full rounded" src={imageData} alt="current song artwork" />
-      </a>
-    {/if}
-    <span class="text-white font-[Inter] font-bold w-full text-ellipsis truncate">{#if title == ""}Loading...{:else}{title}{/if}</span>
-    <audio bind:this={audioPlayer}>
-      <source src={basePath + "/stream"} type="audio/mp3">
-    </audio>
-    <div class="flex flex-row w-full mt-16 -mb-24 h-6">
-      {#each {length: numberOfListeners} as _,i}
-        <img src={dancing_guys[getRandomInt(0,4)]} class="max-h-6 max-w-6 animate-bounce">
-      {/each}
-    </div>
-    <div class="flex flex-col items-center w-full">
-      <div class="bg-[#ff99b4] w-32 rounded-full -mb-12">
-        {#if loadingSound}
-          <svg class="mr-3 -ml-1 w-full animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-        {:else}
-          {#if isPlaying}
-            <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M6 16V8q0-.825.588-1.412T8 6h8q.825 0 1.413.588T18 8v8q0 .825-.587 1.413T16 18H8q-.825 0-1.412-.587T6 16"/></svg>
+      <div class="flex flex-col items-center w-full">
+        <div class="bg-[#ff99b4] w-32 rounded-full -mb-12 z-20">
+          {#if loadingSound}
+            <svg class="mr-3 -ml-1 w-full animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
           {:else}
-            <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"/></svg>
+            {#if isPlaying}
+              <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M6 16V8q0-.825.588-1.412T8 6h8q.825 0 1.413.588T18 8v8q0 .825-.587 1.413T16 18H8q-.825 0-1.412-.587T6 16"/></svg>
+            {:else}
+              <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"/></svg>
+            {/if}
           {/if}
-        {/if}
+        </div>
       </div>
     </div>
+    <div class="flex flex-col bg-white rounded-md items-center justify-center h-fit mt-12 pt-4 pb-1 gap-2">
+      <input id="volume-slider" type="range" value="100" style="" onchange={(e) => audioPlayer.volume = parseInt(e.target.value) / 100}/>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 text-[#ff99b4]" viewBox="0 0 24 24"><path fill="currentColor" d="M9 15H6q-.425 0-.712-.288T5 14v-4q0-.425.288-.712T6 9h3l3.3-3.3q.475-.475 1.088-.213t.612.938v11.15q0 .675-.612.938T12.3 18.3zm9.5-3q0 1.05-.475 1.988t-1.25 1.537q-.25.15-.512.013T16 15.1V8.85q0-.3.263-.437t.512.012q.775.625 1.25 1.575t.475 2"/></svg>
+    </div>
   </div>
   <div class="w-fit h-fit flex mt-12 mb-24 md:mb-12 flex-col visible md:w-0 md:h-0 md:invisible items-end gap-4">
     <span class="speech-bubble arrow-left">Et t'écoutes quoi comme musique ?</span>
@@ -120,6 +123,40 @@
 </div>
 
 <style>
+#volume-slider {
+  border-radius:5px;
+  width: 5px;
+  height: 9rem;
+  background: #d3d3d3;
+  -webkit-appearance: none;
+  outline: none;
+  writing-mode: vertical-lr;
+  direction: rtl;
+  vertical-align: middle;
+}
+
+#volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: none;
+  outline: none;
+  border-radius: 50%;
+  background: #ff99b4;
+  cursor: pointer;
+}
+
+#volume-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border: none;
+  outline: none;
+  border-radius: 50%;
+  background: #ff99b4;
+  cursor: pointer;
+}
+
 .speech-bubble {
   width: fit-content;
   padding: 1rem;