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

Layout is looking pretty slick now!

Browse Source
This commit is contained in:
Eclypsed
2024-01-20 16:41:53 -05:00
parent 215ff9a8d8
commit 54309d06cf
4 changed files with 138 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/lib/components/media/miniPlayer.svelte
View File

@@ -17,71 +17,73 @@
</script> </script>
{#if song && displayMode === 'horizontal'} {#if song && displayMode === 'horizontal'}
<div class="grid w-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden bg-black px-6 text-lg" style="height: 80px;" transition:slide={{ axis: 'y' }}> <div class="w-full p-4">
<section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm"> <div class="grid w-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden rounded-xl bg-neutral-950 px-6 text-lg" style="height: 80px;" transition:slide={{ axis: 'y' }}>
<img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" /> <section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm">
<div class="flex h-full flex-col justify-center gap-1 overflow-hidden"> <img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
<span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span> <div class="flex h-full flex-col justify-center gap-1 overflow-hidden">
<span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;"> <span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
{#each song.artists as artist} <span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;">
{@const listIndex = song.artists.indexOf(artist)} {#each song.artists as artist}
<a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a> {@const listIndex = song.artists.indexOf(artist)}
{#if listIndex === song.artists.length - 2} <a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a>
<span class="mx-0.5 text-xs">&</span> {#if listIndex === song.artists.length - 2}
{:else if listIndex < song.artists.length - 2} <span class="mx-0.5 text-xs">&</span>
<span class="mr-0.5 text-xs">,</span> {:else if listIndex < song.artists.length - 2}
{/if} <span class="mr-0.5 text-xs">,</span>
{/each} {/if}
</span> {/each}
</div> </span>
<button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}> </div>
{#if songLiked} <button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}>
<i class="fa-solid fa-heart text-fuchsia-400" /> {#if songLiked}
{:else} <i class="fa-solid fa-heart text-fuchsia-400" />
<i class="fa-regular fa-heart text-neutral-400 hover:text-white" /> {:else}
{/if} <i class="fa-regular fa-heart text-neutral-400 hover:text-white" />
</button> {/if}
</section> </button>
<section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center"> </section>
<div class="flex h-6 items-center justify-center gap-4"> <section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center">
<div class="flex h-6 items-center justify-center gap-4">
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-backward-step" />
</IconButton>
<IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
<i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
</IconButton>
<IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
<i slot="icon" class="fa-solid fa-stop" />
</IconButton>
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-forward-step" />
</IconButton>
</div>
<div class="flex items-center gap-2 text-sm text-neutral-400">
<div class="whitespace-nowrap">0:00</div>
<Slider />
<div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
</div>
</section>
<section class="flex h-full items-center justify-end gap-1 py-5">
<VolumeSlider bind:volume />
<IconButton halo={false}> <IconButton halo={false}>
<i slot="icon" class="fa-solid fa-backward-step" /> <i slot="icon" class="fa-solid fa-shuffle" />
</IconButton>
<IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
<i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
</IconButton>
<IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
<i slot="icon" class="fa-solid fa-stop" />
</IconButton> </IconButton>
<IconButton halo={false}> <IconButton halo={false}>
<i slot="icon" class="fa-solid fa-forward-step" /> <i slot="icon" class="fa-solid fa-repeat" />
</IconButton> </IconButton>
</div> <IconButton halo={false}>
<div class="flex items-center gap-2 text-sm text-neutral-400"> <i slot="icon" class="fa-solid fa-ellipsis-vertical" />
<div class="whitespace-nowrap">0:00</div> </IconButton>
<Slider /> <IconButton halo={false} on:click={() => (fullplayerOpen = !fullplayerOpen)}>
<div class="whitespace-nowrap">{formatDuration(song.duration)}</div> <i slot="icon" class="fa-solid {fullplayerOpen ? 'fa-caret-down' : 'fa-caret-up'}" />
</div> </IconButton>
</section> </section>
<section class="flex h-full items-center justify-end gap-1 py-5"> </div>
<VolumeSlider bind:volume />
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-shuffle" />
</IconButton>
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-repeat" />
</IconButton>
<IconButton halo={false}>
<i slot="icon" class="fa-solid fa-ellipsis-vertical" />
</IconButton>
<IconButton halo={false} on:click={() => (fullplayerOpen = !fullplayerOpen)}>
<i slot="icon" class="fa-solid {fullplayerOpen ? 'fa-caret-down' : 'fa-caret-up'}" />
</IconButton>
</section>
</div> </div>
{:else if song && displayMode === 'vertical'} {:else if song && displayMode === 'vertical'}
<div class="w-full p-2" style="height: 80px;" transition:slide={{ axis: 'y' }}> <div class="w-full p-2" style="height: 80px;" transition:slide={{ axis: 'y' }}>
<div class="flex h-full justify-between rounded-xl bg-slate-900 p-2.5"> <div class="flex h-full justify-between rounded-xl bg-neutral-950 p-2.5">
<section class="flex gap-4"> <section class="flex gap-4">
<img class="h-full rounded-xl object-contain" src={song.image} alt="{song.name} thumbnail" /> <img class="h-full rounded-xl object-contain" src={song.image} alt="{song.name} thumbnail" />
<div class="flex h-full flex-col justify-center gap-1 overflow-hidden text-lg"> <div class="flex h-full flex-col justify-center gap-1 overflow-hidden text-lg">

8
src/lib/components/utility/searchBar.svelte
View File

@@ -24,7 +24,7 @@
<search <search
role="search" role="search"
bind:this={searchBar} bind:this={searchBar}
class="relative flex h-full w-full max-w-xl items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-1.5" class="relative flex h-full w-full items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent bg-black px-4 py-2"
on:focusout={() => { on:focusout={() => {
setTimeout(() => { setTimeout(() => {
// This is a completely stupid thing you have to do, if there is not timeout, the active element will be the body of the document and not the newly focused element // This is a completely stupid thing you have to do, if there is not timeout, the active element will be the body of the document and not the newly focused element
@@ -68,9 +68,3 @@
</div> </div>
{/if} {/if}
</search> </search>
<style>
search {
background-color: rgba(100, 100, 100, 0.25);
}
</style>

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

@@ -1,5 +1,4 @@
<script> <script>
import Navbar from '$lib/components/utility/navbar.svelte'
import MiniPlayer from '$lib/components/media/miniPlayer.svelte' import MiniPlayer from '$lib/components/media/miniPlayer.svelte'
import { fly, fade } from 'svelte/transition' import { fly, fade } from 'svelte/transition'
import { goto } from '$app/navigation' import { goto } from '$app/navigation'
@@ -12,17 +11,13 @@
header: 'Home', header: 'Home',
icon: 'fa-solid fa-house', icon: 'fa-solid fa-house',
}, },
'/artist': {
header: 'Artists',
icon: 'fa-solid fa-guitar',
},
'/playlist': {
header: 'Playlists',
icon: 'fa-solid fa-bars-staggered',
},
'/library': { '/library': {
header: 'Libray', header: 'Libray',
icon: 'fa-solid fa-book-open', icon: 'fa-solid fa-bars-staggered',
},
'/search': {
header: 'Search',
icon: 'fa-solid fa-search',
}, },
} }
@@ -49,66 +44,94 @@
const calculateBar = (activeTab) => { const calculateBar = (activeTab) => {
if (activeTab && indicatorBar && tabList) { if (activeTab && indicatorBar && tabList) {
const listRect = tabList.getBoundingClientRect() if ($pageWidth >= 768) {
const tabRec = activeTab.getBoundingClientRect() const listRect = tabList.getBoundingClientRect()
indicatorBar.style.top = `${listRect.height}px` const tabRec = activeTab.getBoundingClientRect()
if (direction === 1) { if (direction === 1) {
indicatorBar.style.right = `${listRect.right - tabRec.right}px` indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`
setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), pageTransitionTime) setTimeout(() => (indicatorBar.style.top = `${tabRec.top - listRect.top}px`), pageTransitionTime)
} else {
indicatorBar.style.top = `${tabRec.top - listRect.top}px`
setTimeout(() => (indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`), pageTransitionTime)
}
} else { } else {
indicatorBar.style.left = `${tabRec.left - listRect.left}px` const listRect = tabList.getBoundingClientRect()
setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), pageTransitionTime) const tabRec = activeTab.getBoundingClientRect()
if (direction === 1) {
indicatorBar.style.right = `${listRect.right - tabRec.right}px`
setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), pageTransitionTime)
} else {
indicatorBar.style.left = `${tabRec.left - listRect.left}px`
setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), pageTransitionTime)
}
} }
} }
} }
</script> </script>
<div id="main-grid" class="h-full"> {#if $pageWidth >= 768}
<Navbar /> <div id="content-grid" class="h-full overflow-hidden">
<section id="content-grid" class="overflow-hidden"> <section class="relative mr-4 flex h-full flex-col gap-6 rounded-lg px-3 py-6" bind:this={tabList}>
<section id="sidebar"> {#each Object.entries(contentTabs) as [page, tabData]}
{#if $pageWidth >= 768} {#if data.url === page}
<div class="mr-4 flex h-full flex-col gap-8 rounded-lg px-3 py-6"> <button bind:this={activeTab} class="pointer-events-none aspect-square w-14 text-white transition-colors" disabled="true">
{#each Object.entries(contentTabs) as [page, tabData]} <i class="{tabData.icon} text-xl" />
<button <span class="text-xs">{tabData.header}</span>
class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} aspect-square w-14 transition-colors" </button>
disabled={data.url === page} {:else}
on:click={() => goto(page)} <button class="aspect-square w-14 text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
> <i class="{tabData.icon} text-xl" />
<i class="{tabData.icon} text-xl" /> <span class="text-xs">{tabData.header}</span>
<span class="text-xs">{tabData.header}</span> </button>
</button> {/if}
{/each} {/each}
<!-- {#if data.url in contentTabs} {#if data.url in contentTabs}
<div bind:this={indicatorBar} transition:fade class="absolute h-0.5 bg-lazuli-primary transition-all duration-300 ease-in-out" /> <div bind:this={indicatorBar} transition:fade class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
{/if} -->
</div>
{/if} {/if}
</section> </section>
<section class="no-scrollbar relative overflow-y-scroll">
{#key previousPage}
<div in:fly={{ y: -50 * direction, duration: pageTransitionTime, delay: pageTransitionTime }} out:fly={{ y: 50 * direction, duration: pageTransitionTime }} class="absolute w-full pr-[5vw] pt-16">
<slot />
</div>
{/key}
</section>
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
<MiniPlayer displayMode={'horizontal'} />
</footer>
</div>
{:else}
<div class="h-full overflow-hidden">
{#key previousPage} {#key previousPage}
<section <section
id="page"
in:fly={{ x: 200 * direction, duration: pageTransitionTime, delay: pageTransitionTime }} in:fly={{ x: 200 * direction, duration: pageTransitionTime, delay: pageTransitionTime }}
out:fly={{ x: -200 * direction, duration: pageTransitionTime }} out:fly={{ x: -200 * direction, duration: pageTransitionTime }}
class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-4 md:pl-[0rem]" class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-16"
> >
<slot /> <slot />
</section> </section>
{/key} {/key}
</section> <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center"> <MiniPlayer displayMode={'vertical'} />
<MiniPlayer displayMode={$pageWidth > 768 ? 'horizontal' : 'vertical'} /> <div bind:this={tabList} id="bottom-tab-list" class="relative flex w-full items-center justify-around bg-black">
{#if $pageWidth < 768}
<h1 id="tabList" class="relative flex w-full items-center justify-around bg-black">
{#each Object.entries(contentTabs) as [page, tabData]} {#each Object.entries(contentTabs) as [page, tabData]}
<button class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} transition-colors" disabled={data.url === page} on:click={() => goto(page)}> {#if data.url === page}
<i class={tabData.icon} /> <button bind:this={activeTab} class="pointer-events-none text-white transition-colors" disabled="true">
</button> <i class={tabData.icon} />
</button>
{:else}
<button class="text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
<i class={tabData.icon} />
</button>
{/if}
{/each} {/each}
</h1> {#if data.url in contentTabs}
{/if} <div bind:this={indicatorBar} transition:fade class="absolute bottom-0 h-1 rounded-full bg-white transition-all duration-300 ease-in-out" />
</footer> {/if}
</div> </div>
</footer>
</div>
{/if}
<style> <style>
#content-grid { #content-grid {
@@ -116,12 +139,7 @@
grid-template-columns: max-content auto; grid-template-columns: max-content auto;
grid-template-rows: 100%; grid-template-rows: 100%;
} }
#main-grid { #bottom-tab-list {
display: grid;
grid-template-rows: max-content auto;
grid-template-columns: 100%;
}
#tabList {
padding: 16px 0px; padding: 16px 0px;
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;

1
src/routes/(app)/search/+page.svelte Normal file
View File

@@ -0,0 +1 @@
<h1>Search Page</h1>