Feat: Added listener count

src/App.svelte

@@ -1,10 +1,18 @@
 <script>
   import { basePath } from './lib/router.tsx'
   import menthealeauLogo from './assets/menthealeau.svg'
+  import dancing_1 from './assets/d1.svg'
+  import dancing_2 from './assets/d2.svg'
+  import dancing_3 from './assets/d3.svg'
+  import dancing_4 from './assets/d4.svg'
+  import dancing_5 from './assets/d5.svg'
+
+  let dancing_guys = [dancing_1, dancing_2, dancing_3, dancing_4, dancing_5]
 
   let isPlaying = $state(false)
   let title = $state("")
   let url = $state("")
+  let numberOfListeners = $state(0)
   let imageData = $state("")
   let loadingSound = $state(false)
   let firstTimePlaying = $state(true)
@@ -20,6 +28,19 @@
     imageData = receivedData.artwork
   }
 
+  const listenerSource = new EventSource(basePath + '/listeners')
+  listenerSource.onmessage = function(event) {
+    let receivedData = event.data
+    console.log(receivedData)
+    numberOfListeners = parseInt(receivedData)
+  }
+
+  function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
   async function buttonClick() {
     console.log(audioPlayer.duration)
     if(isPlaying) {
@@ -70,15 +91,20 @@
     <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" 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>
+            <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" 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>
+            <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}
       </div>
@@ -89,7 +115,7 @@
     <span class="speech-bubble arrow-right">Oh ... De tout.</span>
   </div>
   <div class="w-full opacity-50">
-    <span>Créé par Zuma · <a href="https://git.shenanigans.cc/globuzma/mentalaradio">Source</a></span>
+    <span>Créé par Zuma · <a class="underline" href="https://git.shenanigans.cc/globuzma/mentalaradio">Source</a></span>
   </div>
 </div>