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

New Miniplaer + ScrollingText && ArtistList components

Browse Source
This commit is contained in:
Eclypsed
2024-06-11 03:55:34 -04:00
parent 9dab826e53
commit ca80a6476f
9 changed files with 272 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,8 @@
import { goto } from '$app/navigation'
import { itemDisplayState } from '$lib/stores'
import type { LayoutData } from './$types.js'
import { fly, fade } from 'svelte/transition'
import { fade } from 'svelte/transition'
import IconButton from '$lib/components/util/iconButton.svelte'
export let data: LayoutData
@@ -17,13 +18,13 @@
<button disabled={/^\/library\/artists.*$/.test(currentPathname)} class="library-tab h-full px-1" on:click={() => goto('/library/artists')}>Artists</button>
<button disabled={/^\/library\/collection.*$/.test(currentPathname)} class="library-tab h-full px-1" on:click={() => goto('/library/collection')}>My Collection</button>
</section>
<section class="h-full justify-self-end">
<button disabled={$itemDisplayState === 'list'} class="view-toggle aspect-square h-full" on:click={() => ($itemDisplayState = 'list')}>
<i class="fa-solid fa-list" />
</button>
<button disabled={$itemDisplayState === 'grid'} class="view-toggle aspect-square h-full" on:click={() => ($itemDisplayState = 'grid')}>
<i class="fa-solid fa-grip" />
</button>
<section class="flex h-full justify-self-end">
<IconButton disabled={$itemDisplayState === 'list'} on:click={() => ($itemDisplayState = 'list')}>
<i slot="icon" class="fa-solid fa-list {$itemDisplayState === 'list' ? 'text-lazuli-primary' : 'text-white'}" />
</IconButton>
<IconButton disabled={$itemDisplayState === 'grid'} on:click={() => ($itemDisplayState = 'grid')}>
<i slot="icon" class="fa-solid fa-grip {$itemDisplayState === 'grid' ? 'text-lazuli-primary' : 'text-white'}" />
</IconButton>
</section>
</nav>
{#key currentPathname}
@@ -34,9 +35,6 @@
</main>
<style>
button.view-toggle[disabled] {
color: var(--lazuli-primary);
}
button.library-tab[disabled] {
color: var(--lazuli-primary);
border-top: 2px solid var(--lazuli-primary);

16
src/routes/(app)/library/albums/albumCard.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import LazyImage from '$lib/components/media/lazyImage.svelte'
import IconButton from '$lib/components/util/iconButton.svelte'
import ArtistList from '$lib/components/media/artistList.svelte'
import { goto } from '$app/navigation'
import { queue, newestAlert } from '$lib/stores'
@@ -26,7 +27,7 @@
<div class="p-3">
<div id="thumbnail-wrapper" class="relative aspect-square w-full overflow-clip rounded-lg">
<button id="thumbnail" class="h-full w-full" on:click={() => goto(`/details/album?id=${album.id}&connection=${album.connection.id}`)}>
<LazyImage thumbnailUrl={album.thumbnailUrl} alt={`${album.name} jacket`} />
<LazyImage thumbnailUrl={album.thumbnailUrl} alt={`${album.name} jacket`} objectFit={'cover'} />
</button>
<div id="play-button" class="absolute left-1/2 top-1/2 h-1/4 -translate-x-1/2 -translate-y-1/2 opacity-0">
<IconButton halo={true} on:click={playAlbum}>
@@ -36,17 +37,8 @@
</div>
<div class="py-2 text-center text-sm">
<div class="line-clamp-2">{album.name}</div>
<div class="line-clamp-2 flex justify-center text-neutral-400">
{#if album.artists === 'Various Artists'}
<span>Various Artists</span>
{:else}
{#each album.artists as artist, index}
<a class="hover:underline focus:underline" href="/details/artist?id={artist.id}&connection={album.connection.id}">{artist.name}</a>
{#if index < album.artists.length - 1}
&#44&#160
{/if}
{/each}
{/if}
<div class="line-clamp-2 text-neutral-400">
<ArtistList mediaItem={album} />
</div>
</div>
</div>