Feat: Volume Slider
This commit is contained in:
zuma
parent
1b1f272a5d
commit
2535a320aa
2 changed files with 74 additions and 32 deletions
|
|
@ -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/).
|
||||
|
|
|
|||
101
src/App.svelte
101
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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue