2025-summer/team-1
12
Fork 0
Code Issues Pull requests Projects Releases Activity

fix: pause & unpause + timeline bar + stock image as not found

Browse source
This commit is contained in:
Mat12143 2025-08-02 11:19:09 +02:00
parent cd9d47ad8d
commit ec36ea3feb
3 changed files with 28 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/lib/components/QueueSlider.svelte
View file

@ -25,7 +25,13 @@
{#if i === 1}
<div class="absolute z-20 h-16 w-16 rounded-full border-2 border-black bg-light-pine-base dark:bg-dark-pine-base"></div>
{/if}
<img class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`} src={`https://lastfm.freetls.fastly.net/i/u/174s/${song.image_id}.png`} alt="Song cover" />
<img
class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`}
src={song.image_id != ""
? `https://lastfm.freetls.fastly.net/i/u/174s/${song.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"}
alt="Song cover"
/>
</div>
{#if i === 1}
<h1 class="mt-5">{song.title} - {song.artist}</h1>

8
frontend/src/lib/components/SuggestionList.svelte
View file

@ -20,7 +20,13 @@
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" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
<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>

16
frontend/src/routes/admin/[id]/+page.svelte
View file

@ -73,6 +73,15 @@
queueSongs = songs
playingIndex = index
}
function seek(e: Event) {
const target = e.target as HTMLInputElement
const seekTime = parseFloat(target.value)
playerInfo.currentTime = seekTime
if (audioController) {
audioController.currentTime = seekTime
}
}
</script>
{#if returnError}
@ -85,9 +94,12 @@
<div class="flex w-[30vw] flex-col items-start justify-start gap-4 p-2">
<p>{formatTime(playerInfo.currentTime)} - {formatTime(playerInfo.duration)}</p>
<input type="range" min="0" max={playerInfo.duration} disabled step="0.1" value={playerInfo.currentTime} class="w-full accent-blue-500" />
<input type="range" min="0" max={playerInfo.duration} step="0.1" value={playerInfo.currentTime} class="w-full accent-blue-500" oninput={seek} />
<div class="flex w-full flex-row items-center justify-center gap-6">
<button class="rounded-md border border-dark-pine-muted p-2 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={audioController.pause}>Pause</button>
<button
class="rounded-md border border-dark-pine-muted p-2 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue"
onclick={() => (playerInfo.playing ? audioController?.pause() : audioController?.play())}>{playerInfo.playing ? "Pause" : "Unpause"}</button
>
<button class="rounded-md border border-dark-pine-muted p-2 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={playNext}>Next</button>
</div>
</div>