chris/musicshare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Slim song cards with an expand arrow, and lyrics

Browse Source 
Feed and profile cards now show one slim line (small artwork, title,
artist, Open button) with the progress bar and reactions. The arrow
opens the rest: album, your other services, Share, and lyrics.

Lyrics come from LRCLIB (open source; LRCLIB_URL can point at a
self-hosted copy, or be empty to turn lyrics off). The server looks each
song up once and caches it, including misses (retried after a week).
Timed lyrics follow along with the song; otherwise the first lines show
with "All lyrics".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
chris
2026-10-14 21:19:56 -04:00
co-authored by Claude Opus 5.5
parent d00eb6674e
commit 68ec5a8d99
22 changed files with 2299 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+30 -1
View File
@@ -227,7 +227,9 @@ input:focus, textarea:focus, select:focus {
.form label.checkbox { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 500; }
/* Now-playing cards take their colour from the album art. */
.np-card { border-color: rgba(255, 255, 255, 0.11); }
.np-card { border-color: rgba(255, 255, 255, 0.11); padding: 0.9rem 1rem; }
.np-card .card-header { margin-bottom: 0.65rem; }
.np-card .reactions { margin-top: 0.55rem; }
.np-card.pinned { border-color: rgba(251, 191, 36, 0.45); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15), 0 18px 40px -20px rgba(251, 191, 36, 0.35); }
.np-backdrop {
position: absolute; inset: -40%; z-index: 0; background-size: cover; background-position: center;
@@ -286,6 +288,33 @@ input:focus, textarea:focus, select:focus {
.track-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-artist { color: var(--text); opacity: 0.82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { margin-top: 0.85rem; }
.track-row { display: flex; align-items: center; gap: 0.6rem; }
.track-row-main {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.8rem; padding: 0; border: 0; background: none;
color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.track-row-main .track-body { display: flex; flex-direction: column; }
.track-row-main .track-title { font-size: 1.02rem; }
.artwork.artwork-row { width: 56px; height: 56px; border-radius: 10px; font-size: 1.3rem; }
.track-row:hover .artwork { transform: scale(1.04) rotate(-1deg); }
.chevron {
display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; border: 0; cursor: pointer;
background: rgba(255, 255, 255, 0.06); color: var(--muted); transition: transform 0.3s var(--spring), color 0.2s, background 0.2s;
}
.chevron:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.chevron.open { transform: rotate(180deg); }
.np-card .progress { margin-top: 0.65rem; }
.np-details { overflow: hidden; }
.np-details > .track-actions { margin-top: 0.75rem; }
.lyrics { margin-top: 0.9rem; }
.lyrics-lines { display: flex; flex-direction: column; gap: 0.15rem; }
.lyric { margin: 0; line-height: 1.45; transition: opacity 0.3s, font-size 0.3s; }
.lyric-past { opacity: 0.4; }
.lyric-next { opacity: 0.65; }
.lyric-now { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.lyrics-note { margin: 0.9rem 0 0; font-size: 0.85rem; }
.lyrics-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; font-size: 0.82rem; }
.lyrics-source { margin-left: auto; font-size: 0.72rem; }
.progress-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--grad); transition: width 1s linear; }
.progress-times { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }