Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started on search results page

Browse Source
This commit is contained in:
Eclypsed
2024-04-15 09:24:28 -04:00
parent 2ea07ba9fe
commit 2848000d3c
3 changed files with 59 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/media/mediaPlayer.svelte
View File

@@ -47,7 +47,7 @@
</script>
{#if $currentlyPlaying}
<main transition:slide class="relative m-4 grid h-20 grid-cols-[1fr_26rem_1fr] gap-4 overflow-clip rounded-xl bg-neutral-925 text-white transition-colors duration-1000">
<main transition:slide class="relative m-4 grid h-20 grid-cols-[minmax(auto,_20rem)_auto_minmax(auto,_20rem)] gap-4 overflow-clip rounded-xl bg-neutral-925 text-white transition-colors duration-1000">
<section class="flex gap-3">
<div class="relative h-full w-20 min-w-20">
{#key $currentlyPlaying}
@@ -59,7 +59,7 @@
<div class="text-xs">{$currentlyPlaying.artists?.map((artist) => artist.name).join(', ') || $currentlyPlaying.createdBy?.name}</div>
</section>
</section>
<section class="flex flex-col items-center justify-center gap-1">
<section class="flex min-w-max flex-col items-center justify-center gap-1">
<div class="flex items-center gap-3 text-lg">
<button on:click={() => (shuffle = !shuffle)} class="aspect-square h-8">
<i class="fa-solid fa-shuffle" />
@@ -77,8 +77,9 @@
<i class="fa-solid fa-repeat" />
</button>
</div>
<div class="grid w-full grid-cols-[1fr_18rem_1fr] items-center justify-items-center gap-2">
<span bind:this={currentTimeTimestamp} class="w-full text-right" />
<div class="flex items-center justify-items-center gap-2">
<span bind:this={currentTimeTimestamp} class="w-8 text-right" />
<div class="w-72">
<Slider
bind:this={progressBar}
max={duration}
@@ -91,10 +92,11 @@
seeking = false
}}
/>
<span bind:this={durationTimestamp} class="w-full text-left" />
</div>
<span bind:this={durationTimestamp} class="w-8 text-left" />
</div>
</section>
<section class="flex items-center justify-end px-3 text-lg">
<section class="flex items-center justify-end pr-2 text-lg">
<div id="volume-slider" class="flex h-10 w-fit flex-shrink-0 flex-row-reverse items-center gap-2">
<button on:click={() => (muted = !muted)} class="aspect-square h-8">
<i class="fa-solid {volume > 0.5 ? 'fa-volume-high' : volume > 0 ? 'fa-volume-low' : 'fa-volume-xmark'} w-full text-center text-base" />
@@ -107,7 +109,7 @@
<i class="fa-solid fa-xmark" />
</button>
</section>
<audio autoplay bind:paused bind:volume bind:currentTime bind:duration on:ended={() => ($currentlyPlaying = null)} src="/api/audio?connection={$currentlyPlaying.connection}&id={$currentlyPlaying.id}" />
<audio bind:paused bind:volume bind:currentTime bind:duration on:ended={() => ($currentlyPlaying = null)} src="/api/audio?connection={$currentlyPlaying.connection}&id={$currentlyPlaying.id}" />
</main>
{/if}

4
src/routes/(app)/+layout.svelte
View File

@@ -38,8 +38,8 @@
<div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
</div>
</div>
<section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)]">
<div class="my-6 max-w-xl">
<section class="no-scrollbar h-full overflow-y-scroll px-[max(7rem,_7vw)]">
<div class="sticky top-0 max-w-xl py-6">
<SearchBar />
</div>
<slot />

30
src/routes/(app)/search/+page.svelte
View File

@@ -7,13 +7,41 @@
{#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') $currentlyPlaying = searchResult
}}
class="block bg-neutral-925">{searchResult.name} - {searchResult.type}</button
class="grid aspect-square h-full place-items-center bg-cover bg-center bg-no-repeat"
style="--thumbnail: url('/api/remoteImage?url={searchResult.thumbnail}')"
>
<i class="fa-solid fa-play opacity-0" />
</button>
<div>
<div>{searchResult.name}</div>
{#if 'artists' in searchResult && searchResult.artists}
<div>{searchResult.artists.map((artist) => artist.name).join(', ')}</div>
{:else if 'createdBy' in searchResult && searchResult.createdBy}
<div>{searchResult.createdBy?.name}</div>
{/if}
</div>
</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>