65 lines
3.3 KiB
Svelte
65 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import type { Suggestion } from "$lib/types"
|
|
import { ThumbsUp, ThumbsDown } from "@lucide/svelte"
|
|
import { onMount } from "svelte"
|
|
|
|
let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
|
|
|
|
let picked_suggestions: string[] = $state([])
|
|
|
|
async function vote(idx: number, amount: number, songId: string) {
|
|
if (picked_suggestions.includes(songId)) return console.log("rejecting vote")
|
|
suggestions[idx].upvote += amount
|
|
await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
|
|
picked_suggestions.push(songId)
|
|
console.log("accepted vote")
|
|
sessionStorage.setItem("picked_suggestions", JSON.stringify(picked_suggestions))
|
|
}
|
|
|
|
onMount(() => {
|
|
picked_suggestions = JSON.parse(sessionStorage.getItem("picked_suggestions") ?? "[]")
|
|
})
|
|
</script>
|
|
|
|
<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
|
|
{#if suggestions.length == 0}
|
|
<p>No suggestions yet! Try to add a new one using the Add button</p>
|
|
{/if}
|
|
|
|
{#each suggestions as sug, idx}
|
|
<div
|
|
class="flex h-[80px] w-full flex-row gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay p-2 shadow-md duration-100 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
|
|
>
|
|
<div class="flex w-3/4 flex-row items-center gap-2">
|
|
<img
|
|
class="w-[60px] min-w-[60px] rounded"
|
|
alt="Song cover"
|
|
src={sug.image_id != ""
|
|
? `https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`
|
|
: "https://s2.qwant.com/thumbr/474x474/f/6/b50687db1ebb262ac78b98a8f3c56a1e62235aaeebe0346dd27d4fbf1edec8/OIP.kXN41HyriW5dLTkjm0QQoAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.kXN41HyriW5dLTkjm0QQoAHaHa%3Fpid%3DApi&q=0&b=1&p=0&a=0"}
|
|
/>
|
|
<div class="h-fit w-fit flex-col text-white">
|
|
<b>{sug.title}</b>
|
|
<p>{sug.artist}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex w-1/4 flex-row items-center justify-center gap-2">
|
|
<button
|
|
class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-green duration-100 hover:scale-150 dark:text-dark-pine-green" : "text-light-pine-muted dark:text-dark-pine-muted"}
|
|
disabled={!!picked_suggestions.includes(sug.uuid)}
|
|
onclick={async () => {
|
|
await vote(idx, 1, sug.uuid)
|
|
}}><ThumbsUp /></button
|
|
>
|
|
<p class="font-semibold text-light-pine-text dark:text-dark-pine-text">{sug.upvote}</p>
|
|
<button
|
|
class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-red duration-100 hover:scale-150 dark:text-dark-pine-red" : "text-light-pine-muted dark:text-dark-pine-muted"}
|
|
disabled={!!picked_suggestions.includes(sug.uuid)}
|
|
onclick={async () => {
|
|
await vote(idx, -1, sug.uuid)
|
|
}}><ThumbsDown /></button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|