add song cooldonw

This commit is contained in:
Simone Tesini 2025-08-02 12:51:50 +02:00
parent 85bb34328d
commit efcabd2ee4

View file

@ -1,20 +1,33 @@
<script lang="ts"> <script lang="ts">
import { LoaderCircle } from "@lucide/svelte" import { LoaderCircle } from "@lucide/svelte"
const COOLDOWN_SECS = 30
let { roomId } = $props() let { roomId } = $props()
let input = $state("") let input = $state("")
let disabled: boolean = $state(false) let loading: boolean = $state(false)
let cooldowned: boolean = $state(false)
$effect(() => {
console.log("cooldowned is now", cooldowned)
})
async function sendSong() { async function sendSong() {
disabled = true loading = true
await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" }) await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
input = "" input = ""
disabled = false loading = false
cooldowned = true
setTimeout(() => {
cooldowned = false
console.log("unset cooldown")
}, COOLDOWN_SECS * 1000)
} }
</script> </script>
<div <div
class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${disabled ? "disabled" : ""}`} class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${loading ? "disabled" : ""}`}
> >
<input <input
type="text" type="text"
@ -26,16 +39,20 @@
sendSong() sendSong()
} }
}} }}
{disabled} disabled={loading}
/> />
{#if disabled} {#if loading}
<span class="animate-spin"> <span class="animate-spin">
<LoaderCircle /> <LoaderCircle />
</span> </span>
{/if} {/if}
<button class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border border-0 font-semibold shadow-xl duration-100 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={sendSong} <button
>Add</button disabled={cooldowned}
class="i-lucide-check h-[40px] w-1/4 rounded font-semibold shadow-xl duration-100 active:scale-90 {!cooldowned
? 'cursor-pointer bg-light-pine-blue hover:scale-105 dark:bg-dark-pine-blue '
: 'bg-light-pine-muted dark:bg-light-pine-muted'}"
onclick={sendSong}>Add</button
> >
<span class="i-lucide-chevrons-left"></span> <span class="i-lucide-chevrons-left"></span>
</div> </div>