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

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

@@ -47,7 +47,7 @@
</script> </script>
{#if $currentlyPlaying} {#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"> <section class="flex gap-3">
<div class="relative h-full w-20 min-w-20"> <div class="relative h-full w-20 min-w-20">
{#key $currentlyPlaying} {#key $currentlyPlaying}
@@ -59,7 +59,7 @@
<div class="text-xs">{$currentlyPlaying.artists?.map((artist) => artist.name).join(', ') || $currentlyPlaying.createdBy?.name}</div> <div class="text-xs">{$currentlyPlaying.artists?.map((artist) => artist.name).join(', ') || $currentlyPlaying.createdBy?.name}</div>
</section> </section>
</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"> <div class="flex items-center gap-3 text-lg">
<button on:click={() => (shuffle = !shuffle)} class="aspect-square h-8"> <button on:click={() => (shuffle = !shuffle)} class="aspect-square h-8">
<i class="fa-solid fa-shuffle" /> <i class="fa-solid fa-shuffle" />
@@ -77,24 +77,26 @@
<i class="fa-solid fa-repeat" /> <i class="fa-solid fa-repeat" />
</button> </button>
</div> </div>
<div class="grid w-full grid-cols-[1fr_18rem_1fr] items-center justify-items-center gap-2"> <div class="flex items-center justify-items-center gap-2">
<span bind:this={currentTimeTimestamp} class="w-full text-right" /> <span bind:this={currentTimeTimestamp} class="w-8 text-right" />
<Slider <div class="w-72">
bind:this={progressBar} <Slider
max={duration} bind:this={progressBar}
on:seeking={(event) => { max={duration}
currentTimeTimestamp.innerText = formatTime(event.detail.value) on:seeking={(event) => {
seeking = true currentTimeTimestamp.innerText = formatTime(event.detail.value)
}} seeking = true
on:seeked={(event) => { }}
currentTime = event.detail.value on:seeked={(event) => {
seeking = false currentTime = event.detail.value
}} seeking = false
/> }}
<span bind:this={durationTimestamp} class="w-full text-left" /> />
</div>
<span bind:this={durationTimestamp} class="w-8 text-left" />
</div> </div>
</section> </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"> <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"> <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" /> <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" /> <i class="fa-solid fa-xmark" />
</button> </button>
</section> </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> </main>
{/if} {/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 class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
</div> </div>
</div> </div>
<section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)]"> <section class="no-scrollbar h-full overflow-y-scroll px-[max(7rem,_7vw)]">
<div class="my-6 max-w-xl"> <div class="sticky top-0 max-w-xl py-6">
<SearchBar /> <SearchBar />
</div> </div>
<slot /> <slot />

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

@@ -7,13 +7,41 @@
{#if data.searchResults} {#if data.searchResults}
{#await data.searchResults then searchResults} {#await data.searchResults then searchResults}
{#each searchResults as searchResult} <section class="flex w-full flex-col items-center gap-2">
<button {#each searchResults as searchResult}
on:click={() => { <div class="flex h-20 w-full max-w-screen-md gap-4 bg-black p-2">
if (searchResult.type === 'song') $currentlyPlaying = searchResult <button
}} id="searchResult"
class="block bg-neutral-925">{searchResult.name} - {searchResult.type}</button on:click={() => {
> if (searchResult.type === 'song') $currentlyPlaying = searchResult
{/each} }}
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} {/await}
{/if} {/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>