Update visualizer track info: larger art, artist/album/track order
- Increase artwork to 108px (20% larger) - Reorder info: Artist (bold) > Album (italic) > Track - Add album prop to VisualizerPanel - Adjust text styling hierarchy
This commit is contained in:
1 parent
a46936da53
commit
4b74e1c490
2 files changed
+23
-9
No files matched your search
@@ -375,6 +375,7 @@
|
||||
{artwork}
|
||||
{trackTitle}
|
||||
{artist}
|
||||
{album}
|
||||
/>
|
||||
{:else if activeFocusTab === 'lyrics-focus'}
|
||||
<!-- Lyrics Focus: Single line, large, centered -->
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
artwork?: string;
|
||||
trackTitle?: string;
|
||||
artist?: string;
|
||||
album?: string;
|
||||
}
|
||||
|
||||
let { enabled = true, artwork = '', trackTitle = '', artist = '' }: Props = $props();
|
||||
let { enabled = true, artwork = '', trackTitle = '', artist = '', album = '' }: Props = $props();
|
||||
|
||||
let canvasRef: HTMLCanvasElement | null = $state(null);
|
||||
let ctx: CanvasRenderingContext2D | null = null;
|
||||
@@ -190,8 +191,11 @@
|
||||
|
||||
<div class="track-info">
|
||||
<div class="text">
|
||||
<h1 class="title">{trackTitle}</h1>
|
||||
<p class="artist">{artist}</p>
|
||||
{#if album}
|
||||
<p class="album">{album}</p>
|
||||
{/if}
|
||||
<h1 class="title">{trackTitle}</h1>
|
||||
</div>
|
||||
{#if artwork}
|
||||
<img src={artwork} alt={trackTitle} class="artwork" />
|
||||
@@ -236,8 +240,8 @@
|
||||
}
|
||||
|
||||
.artwork {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
|
||||
object-fit: cover;
|
||||
@@ -253,9 +257,9 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
|
||||
max-width: 200px;
|
||||
@@ -265,9 +269,18 @@
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.album {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user