jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Album to use new Svelte 5 motion

Browse source
This commit is contained in:
Justin Edmund 2025-06-14 14:17:59 -04:00
parent 4a99aca101
commit 188e95f597
3 changed files with 27 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/assets/icons/pause.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<rect x="6" y="4" width="4" height="16" rx="2" />
<rect x="14" y="4" width="4" height="16" rx="2" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 199 B

3
src/assets/icons/play.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M8 5v14c0 1.1 1.2 1.8 2.2 1.2l11-7c.8-.5.8-1.9 0-2.4l-11-7C9.2 3.2 8 3.9 8 5z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 187 B

37
src/lib/components/Album.svelte
View file

@ -1,9 +1,11 @@
<script lang="ts"> <script lang="ts">
import { spring } from 'svelte/motion' import { Spring } from 'svelte/motion'
import type { Album } from '$lib/types/lastfm' import type { Album } from '$lib/types/lastfm'
import { audioPreview } from '$lib/stores/audio-preview' import { audioPreview } from '$lib/stores/audio-preview'
import { nowPlayingStream } from '$lib/stores/now-playing-stream' import { nowPlayingStream } from '$lib/stores/now-playing-stream'
import NowPlaying from './NowPlaying.svelte' import NowPlaying from './NowPlaying.svelte'
import PlayIcon from '$icons/play.svg'
import PauseIcon from '$icons/pause.svg'
interface AlbumProps { interface AlbumProps {
album?: Album album?: Album
@ -26,16 +28,16 @@
return unsubscribe return unsubscribe
}) })
const scale = spring(1, { const scale = new Spring(1, {
stiffness: 0.2, stiffness: 0.1,
damping: 0.145 damping: 0.25
}) })
$effect(() => { $effect(() => {
if (isHovering) { if (isHovering) {
scale.set(1.1) scale.target = 1.1
} else { } else {
scale.set(1) scale.target = 1
} }
}) })
@ -116,7 +118,7 @@
<img <img
src={artworkUrl} src={artworkUrl}
alt={album.name} alt={album.name}
style="transform: scale({$scale})" style="transform: scale({scale.current})"
loading="lazy" loading="lazy"
/> />
{#if isNowPlaying} {#if isNowPlaying}
@ -130,9 +132,9 @@
class:playing={isPlaying} class:playing={isPlaying}
> >
{#if isPlaying} {#if isPlaying}
<span aria-hidden="true">❚❚</span> <PauseIcon />
{:else} {:else}
<span aria-hidden="true">▶</span> <PlayIcon />
{/if} {/if}
</button> </button>
{/if} {/if}
@ -190,11 +192,12 @@
.preview-button { .preview-button {
position: absolute; position: absolute;
bottom: $unit; top: 50%;
right: $unit; left: 50%;
width: 40px; transform: translate(-50%, -50%);
height: 40px; width: 60px;
background: rgba(0, 0, 0, 0.8); height: 60px;
background: rgba(0, 0, 0, 0.4);
color: white; color: white;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
@ -202,13 +205,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 24px;
transition: all 0.2s ease; transition: all 0.2s ease;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
&:hover { &:hover {
background: rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.5);
transform: scale(1.1); transform: translate(-50%, -50%) scale(1.1);
} }
&.playing { &.playing {