add song cooldonw
This commit is contained in:
parent
85bb34328d
commit
efcabd2ee4
1 changed files with 25 additions and 8 deletions
|
@ -1,20 +1,33 @@
|
|||
<script lang="ts">
|
||||
import { LoaderCircle } from "@lucide/svelte"
|
||||
|
||||
const COOLDOWN_SECS = 30
|
||||
|
||||
let { roomId } = $props()
|
||||
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() {
|
||||
disabled = true
|
||||
loading = true
|
||||
await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
|
||||
input = ""
|
||||
disabled = false
|
||||
loading = false
|
||||
|
||||
cooldowned = true
|
||||
setTimeout(() => {
|
||||
cooldowned = false
|
||||
console.log("unset cooldown")
|
||||
}, COOLDOWN_SECS * 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<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
|
||||
type="text"
|
||||
|
@ -26,16 +39,20 @@
|
|||
sendSong()
|
||||
}
|
||||
}}
|
||||
{disabled}
|
||||
disabled={loading}
|
||||
/>
|
||||
{#if disabled}
|
||||
{#if loading}
|
||||
<span class="animate-spin">
|
||||
<LoaderCircle />
|
||||
</span>
|
||||
{/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}
|
||||
>Add</button
|
||||
<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>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue