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

Big improvements to the media cards, scrollable card menu in the works

Browse Source
This commit is contained in:
Eclypsed
2024-01-12 02:44:06 -05:00
parent 838b2fa062
commit 8acf9b3c46
12 changed files with 133 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/media/mediaCard.svelte
+60 -26
View File
@@ -1,8 +1,22 @@
<script>
export let mediaData
import Services from '$lib/services.json'
import IconButton from '$lib/components/utility/iconButton.svelte'
import { onMount } from 'svelte'
let card, cardGlare, cardWidth, cardHeight
const iconClasses = {
song: 'fa-solid fa-music',
album: 'fa-solid fa-compact-disc',
artist: 'fa-solid fa-user',
playlist: 'fa-solid fa-forward-fast',
}
let card,
cardGlare,
cardWidth,
cardHeight,
icon = iconClasses[mediaData.mediaType]
onMount(() => {
const cardRect = card.getBoundingClientRect()
@@ -17,45 +31,65 @@
const x = ((event.x - cardCenterX) * 2) / cardWidth
const y = ((cardCenterY - event.y) * 2) / cardHeight
let angle = Math.atan(x / y) // <-- This is NOT how you convert to polar cooridates, well it kinda is exept now x is y and y is x because we want to calculate the direction the glare should be comming from
const distanceFromCorner = Math.sqrt((x - 1) ** 2 + (y - 1) ** 2) // <-- This is a cool little trick, the -1 on the x an y coordinate is effective the same as saying "make the origin of the glare [1, 1]"
cardGlare.style.backgroundImage = `linear-gradient(${angle}rad, rgba(255, 255, 255, 0) ${distanceFromCorner * 50 + 50}%, rgba(255, 255, 255, 0.15) ${
distanceFromCorner * 50 + 60
}%, rgba(255, 255, 255, 0.05) 100%)`
let angle = Math.atan(x / y) // You'd think it should be y / x but it's actually the inverse
const distanceFromCorner = Math.sqrt((x - 1) ** 2 + (y - 1) ** 2) // This is a cool little trick, the -1 on the x an y coordinate is effective the same as saying "make the origin of the glare [1, 1]"
cardGlare.style.backgroundImage = `linear-gradient(${angle}rad, transparent ${distanceFromCorner * 50 + 50}%, rgba(255, 255, 255, 0.1) ${distanceFromCorner * 50 + 60}%, transparent 100%)`
card.style.transform = `rotateX(${y * 10}deg) rotateY(${x * 10}deg)`
}
// TEST IMAGES (Remember to refresh! Vite doesn't retrigger the onMount calculation) ---> https://f4.bcbits.com/img/a2436961975_10.jpg | {mediaData.image} | https://i.ytimg.com/vi/yvFgNP9iqd4/maxresdefault.jpg
</script>
<div id="song-card-wrapper" class="h-fit" on:mousemove={(event) => rotateCard(event)} role="button" tabindex="0" on:mouseleave={() => (card.style.transform = null)}>
<div bind:this={card} id="song-card" class="relative w-56 transition-all duration-200 ease-out">
<img id="card-image" class="aspect-square w-full rounded-md object-cover" src="{mediaData.image}?width=224&height=224" alt="{mediaData.name} art" />
<div bind:this={cardGlare} id="song-glare" class="absolute top-0 aspect-square w-full opacity-0 transition-opacity duration-1000 ease-out"></div>
<div id="card-label" class="items-end p-2 text-sm">
<span>
{mediaData.name}
<div class="text-neutral-400">{Array.from(mediaData.artists, (artist) => artist.name).join(', ')}</div>
<a id="card-wrapper" on:mousedown|preventDefault on:mousemove={(event) => rotateCard(event)} on:mouseleave={() => (card.style.transform = null)} href="/details?id={mediaData.id}&service={mediaData.connectionId}">
<div bind:this={card} id="card" class="relative h-56 transition-all duration-200 ease-out">
{#if mediaData.image}
<img id="card-image" class="h-full max-w-none rounded-lg transition-all" src={mediaData.image} alt="{mediaData.name} thumbnail" />
{:else}
<div id="card-image" class="grid aspect-square h-full place-items-center rounded-lg bg-lazuli-primary transition-all">
<i class="fa-solid fa-compact-disc text-7xl" />
</div>
{/if}
<div bind:this={cardGlare} id="card-glare" class="absolute top-0 grid h-full w-full place-items-center rounded-lg opacity-0 transition-opacity duration-200 ease-out">
<span class="relative h-14">
<IconButton on:click={() => console.log(`Play ${mediaData.name}`)}>
<i slot="icon" class="fa-solid fa-play text-xl" />
</IconButton>
</span>
</div>
<div id="card-label" class="absolute -bottom-3 w-full px-2.5 text-sm">
<div class="overflow-hidden text-ellipsis whitespace-nowrap" title={mediaData.name}>{mediaData.name}</div>
<div class="flex w-full items-center gap-1.5 overflow-hidden text-neutral-400">
<span class="overflow-hidden text-ellipsis">{Array.from(mediaData.artists, (artist) => artist.name).join(', ')}</span>
{#if mediaData.mediaType}
<span>&bull;</span>
<i class="{icon} text-xs" style="color: var({Services[mediaData.serviceType].primaryColor});" />
{/if}
</div>
</div>
</div>
</div>
</a>
<style>
#song-card-wrapper {
#card-wrapper {
perspective: 1000px;
perspective-origin: center;
}
#song-card:hover {
scale: 1.05;
#card-wrapper:focus-within #card-image {
filter: brightness(50%);
}
#song-card:hover > #song-glare {
#card-wrapper:focus-within #card-glare {
opacity: 1;
}
/* #card-image {
mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0));
#card:hover {
scale: 1.05;
}
#card:hover > #card-image {
filter: brightness(50%);
}
#card:hover > #card-glare {
opacity: 1;
}
#card-image {
mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
}
#card-label {
background-image: linear-gradient(to top, black 0%, transparent 30%);
} */
</style>