62 lines
2.8 KiB
Svelte
62 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { queue } from '$lib/stores'
|
|
import type { PageServerData } from './$types'
|
|
|
|
let queueRef = $queue // This nonsense is to prevent an bug that causes svelte to throw an error when setting a property of the queue directly
|
|
|
|
export let data: PageServerData
|
|
|
|
const formatTime = (seconds: number): string => {
|
|
seconds = Math.floor(seconds)
|
|
const hours = Math.floor(seconds / 3600)
|
|
seconds = seconds - hours * 3600
|
|
const minutes = Math.floor(seconds / 60)
|
|
seconds = seconds - minutes * 60
|
|
return hours > 0 ? `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}` : `${minutes}:${seconds.toString().padStart(2, '0')}`
|
|
}
|
|
</script>
|
|
|
|
{#if data.searchResults}
|
|
{#await data.searchResults then searchResults}
|
|
<section class="flex w-full flex-col items-center gap-2">
|
|
{#each searchResults as searchResult}
|
|
<div class="flex h-20 w-full max-w-screen-md gap-4 bg-black p-2">
|
|
<button
|
|
id="searchResult"
|
|
on:click={() => {
|
|
if (searchResult.type === 'song') queueRef.current = searchResult
|
|
}}
|
|
class="grid aspect-square h-full place-items-center bg-cover bg-center bg-no-repeat"
|
|
style="--thumbnail: url('/api/remoteImage?url={'thumbnailUrl' in searchResult ? searchResult.thumbnailUrl : searchResult.profilePicture}')"
|
|
>
|
|
<i class="fa-solid fa-play opacity-0" />
|
|
</button>
|
|
<div>
|
|
<div>{searchResult.name}{searchResult.type === 'song' && searchResult.album?.name ? ` - ${searchResult.album.name}` : ''}</div>
|
|
{#if 'artists' in searchResult && searchResult.artists}
|
|
<div>{searchResult.artists === 'Various Artists' ? searchResult.artists : searchResult.artists.map((artist) => artist.name).join(', ')}</div>
|
|
{:else if 'createdBy' in searchResult && searchResult.createdBy}
|
|
<div>{searchResult.createdBy?.name}</div>
|
|
{/if}
|
|
</div>
|
|
{#if 'duration' in searchResult && searchResult.duration}
|
|
<span class="justify-self-end">{formatTime(searchResult.duration)}</span>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</section>
|
|
{/await}
|
|
{/if}
|
|
|
|
<style>
|
|
#searchResult {
|
|
background-image: var(--thumbnail);
|
|
}
|
|
#searchResult:hover {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--thumbnail);
|
|
}
|
|
#searchResult:hover > i {
|
|
opacity: 100%;
|
|
}
|
|
</style>
|