Web: redesign, logo, PWA, QR codes, Spotify guidance
- Album-art-tinted cards that crossfade on song change, equalizer bars, live avatar rings, drifting ambient colour, Space Grotesk display font, brand purple-to-blue gradient from the logo - Feed cards rise in and glide to new positions (motion); respects reduced-motion - New logo as nav mark, favicon and Apple touch icon - Installable PWA: manifest, maskable icons, small service worker (cached build assets + offline page), security headers - Show-QR-code on your own profile; centred profile header with stats - Settings explains connecting Spotify via Last.fm or ListenBrainz Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8
This commit is contained in:
Claude Opus 5.5
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
+184
-77
@@ -1,133 +1,230 @@
|
||||
:root {
|
||||
--bg: #0e0f13;
|
||||
--surface: #171920;
|
||||
--surface-2: #20232c;
|
||||
--border: #2a2e39;
|
||||
--text: #eceef3;
|
||||
--muted: #9097a6;
|
||||
--accent: #7c5cff;
|
||||
--bg: #07070b;
|
||||
--surface: rgba(255, 255, 255, 0.045);
|
||||
--surface-solid: #12121a;
|
||||
--surface-2: rgba(255, 255, 255, 0.08);
|
||||
--border: rgba(255, 255, 255, 0.09);
|
||||
--border-strong: rgba(255, 255, 255, 0.16);
|
||||
--text: #f4f3fa;
|
||||
--muted: #9b99ae;
|
||||
/* Brand: the logo's purple-to-blue. */
|
||||
--accent: #7c4dff;
|
||||
--accent-2: #2f8cff;
|
||||
--grad: linear-gradient(135deg, #7b2ff7 0%, #5b4cf0 50%, #2f8cff 100%);
|
||||
--accent-text: #fff;
|
||||
--live: #3ddc84;
|
||||
--danger: #ff5c6c;
|
||||
--radius: 14px;
|
||||
--live: #34d399;
|
||||
--pin: #fbbf24;
|
||||
--danger: #fb7185;
|
||||
--radius: 20px;
|
||||
--font-display: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-body: var(--font-inter), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { background: var(--bg); }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
font: 15px/1.55 var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Slowly drifting colour behind everything, so the app never feels static. */
|
||||
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
|
||||
.ambient::before, .ambient::after {
|
||||
content: ''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
|
||||
filter: blur(90px); opacity: 0.34;
|
||||
}
|
||||
.ambient::before { background: #6d28d9; top: -25vmax; left: -15vmax; animation: drift-a 28s ease-in-out infinite alternate; }
|
||||
.ambient::after { background: #1d6fe0; bottom: -30vmax; right: -20vmax; animation: drift-b 34s ease-in-out infinite alternate; }
|
||||
@keyframes drift-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
|
||||
@keyframes drift-b { to { transform: translate(-16vmax, -10vmax) scale(0.9); } }
|
||||
|
||||
a { color: inherit; }
|
||||
h1 { font-size: 1.6rem; margin: 0; }
|
||||
h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
|
||||
h1, h2, .brand, .display { font-family: var(--font-display); letter-spacing: -0.02em; }
|
||||
h1 { font-size: 1.85rem; margin: 0; line-height: 1.15; }
|
||||
h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
|
||||
input, textarea, select {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
padding: 0.7rem 0.85rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
}
|
||||
input:focus, textarea:focus, select:focus {
|
||||
outline: none; border-color: var(--accent); background: rgba(124, 77, 255, 0.08);
|
||||
box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.2);
|
||||
}
|
||||
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
|
||||
|
||||
.container { max-width: 680px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
|
||||
.container { max-width: 680px; margin: 0 auto; padding: 1.75rem 1rem 5rem; }
|
||||
.stack { display: flex; flex-direction: column; gap: 1rem; }
|
||||
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
|
||||
.grow { flex: 1; min-width: 0; }
|
||||
.muted { color: var(--muted); }
|
||||
.error { color: var(--danger); margin: 0; }
|
||||
.notice { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; margin: 0; }
|
||||
.section-label { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
|
||||
.narrow { max-width: 420px; margin: 2rem auto; }
|
||||
.notice {
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0.85rem 1rem; margin: 0;
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.section-label { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; }
|
||||
.narrow { max-width: 420px; margin: 2.5rem auto; }
|
||||
|
||||
.nav {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border);
|
||||
position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); z-index: 10;
|
||||
padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border);
|
||||
position: sticky; top: 0; background: rgba(7, 7, 11, 0.65); backdrop-filter: blur(18px) saturate(1.4); z-index: 10;
|
||||
}
|
||||
.brand { font-weight: 800; letter-spacing: -0.02em; text-decoration: none; font-size: 1.1rem; }
|
||||
.nav-links { display: flex; gap: 1rem; align-items: center; }
|
||||
.nav-links a { text-decoration: none; color: var(--muted); }
|
||||
.brand { font-weight: 700; text-decoration: none; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.brand-logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 14px -4px rgba(47, 140, 255, 0.6); }
|
||||
.nav-links { display: flex; gap: 1.1rem; align-items: center; }
|
||||
.nav-links a { text-decoration: none; color: var(--muted); transition: color 0.2s; }
|
||||
.nav-links a:hover { color: var(--text); }
|
||||
.nav-links a.btn-primary { color: var(--accent-text); }
|
||||
.nav-links a.support-link { color: #ff7aa8; }
|
||||
.nav-links a.support-link { color: #f9a8d4; }
|
||||
@media (max-width: 480px) { .nav-links a.support-link { display: none; } }
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--border);
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
|
||||
padding: 0.55rem 1.05rem; border-radius: 999px; border: 1px solid var(--border-strong);
|
||||
background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600;
|
||||
text-decoration: none; cursor: pointer; white-space: nowrap;
|
||||
transition: transform 0.25s var(--spring), border-color 0.2s, background 0.2s, box-shadow 0.25s, filter 0.2s;
|
||||
}
|
||||
.btn:hover { border-color: var(--muted); }
|
||||
.btn:disabled { opacity: 0.6; cursor: default; }
|
||||
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
|
||||
.btn-primary:hover { border-color: var(--accent); filter: brightness(1.1); }
|
||||
.btn:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
|
||||
.btn:active { transform: scale(0.96); }
|
||||
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
|
||||
.btn-primary {
|
||||
background: var(--grad); border-color: transparent; color: var(--accent-text);
|
||||
box-shadow: 0 6px 22px -6px rgba(91, 76, 240, 0.6);
|
||||
}
|
||||
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); box-shadow: 0 10px 28px -6px rgba(47, 140, 255, 0.65); }
|
||||
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
|
||||
.link-button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; }
|
||||
.btn-small { padding: 0.3rem 0.75rem; font-size: 0.82rem; }
|
||||
.link-button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; transition: color 0.2s; }
|
||||
.link-button:hover { color: var(--text); }
|
||||
|
||||
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
|
||||
.card-pinned { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
|
||||
.pin { background: none; border: 0; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--muted); padding: 0.1rem 0.2rem; }
|
||||
.pin:hover, .pin.pinned { color: #f5c542; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
|
||||
.form { display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
.form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; }
|
||||
|
||||
.user-chip { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 600; }
|
||||
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
|
||||
.avatar-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-weight: 700; }
|
||||
|
||||
.status { font-size: 0.85rem; color: var(--muted); }
|
||||
.status-live { color: var(--live); }
|
||||
.status-live::before {
|
||||
content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--live); margin-right: 6px; animation: pulse 1.6s ease-in-out infinite;
|
||||
.card {
|
||||
position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 1.1rem; backdrop-filter: blur(20px) saturate(1.3); overflow: hidden;
|
||||
}
|
||||
@keyframes pulse { 50% { opacity: 0.35; } }
|
||||
.card-header { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
|
||||
.card-header .user-chip { flex-shrink: 0; }
|
||||
.card-header > .row { flex-wrap: nowrap; min-width: 0; justify-content: flex-end; margin-left: auto; }
|
||||
.card-header .status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-block; }
|
||||
.card-header .status .eq { vertical-align: -1px; margin-right: 0.4rem; }
|
||||
.card-header .pin { flex-shrink: 0; }
|
||||
.form { display: flex; flex-direction: column; gap: 0.8rem; }
|
||||
.form label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.9rem; }
|
||||
|
||||
/* Now-playing cards take their colour from the album art. */
|
||||
.np-card { border-color: rgba(255, 255, 255, 0.11); }
|
||||
.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;
|
||||
filter: blur(40px) saturate(2.2) brightness(1.1); opacity: 0.6; transform: scale(1.1); transition: opacity 0.6s;
|
||||
}
|
||||
.np-card.playing .np-backdrop { animation: breathe 9s ease-in-out infinite alternate; }
|
||||
@keyframes breathe { to { transform: scale(1.3) rotate(8deg); opacity: 0.75; } }
|
||||
.np-card::after {
|
||||
content: ''; position: absolute; inset: 0; z-index: 0;
|
||||
background: linear-gradient(180deg, rgba(7, 7, 11, 0.05), rgba(7, 7, 11, 0.45));
|
||||
}
|
||||
.np-card > *:not(.np-backdrop) { position: relative; z-index: 1; }
|
||||
|
||||
.pin {
|
||||
background: none; border: 0; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--muted);
|
||||
padding: 0.15rem 0.25rem; transition: color 0.2s;
|
||||
}
|
||||
.pin:hover, .pin.pinned { color: var(--pin); }
|
||||
.pin.pinned { text-shadow: 0 0 14px rgba(251, 191, 36, 0.6); }
|
||||
|
||||
.user-chip { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 600; }
|
||||
.user-chip:hover .user-name { text-decoration: underline; }
|
||||
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
|
||||
.avatar-empty { display: grid; place-items: center; background: linear-gradient(135deg, #4a1278, #1872cf); color: #fff; font-weight: 700; font-family: var(--font-display); }
|
||||
/* A spinning gradient ring while someone is listening. */
|
||||
.avatar-ring { position: relative; display: inline-grid; place-items: center; border-radius: 50%; padding: 2px; flex-shrink: 0; }
|
||||
.avatar-ring.live::before {
|
||||
content: ''; position: absolute; inset: 0; border-radius: 50%;
|
||||
background: conic-gradient(from 0deg, #7b2ff7, #2f8cff, #34d399, #7b2ff7); animation: spin 3.5s linear infinite;
|
||||
}
|
||||
.avatar-ring > * { position: relative; border: 2px solid var(--bg); border-radius: 50%; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.status { font-size: 0.85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.45rem; }
|
||||
.status-live { color: var(--live); font-weight: 600; }
|
||||
|
||||
/* Equalizer bars: dancing while playing, resting when paused. */
|
||||
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
|
||||
.eq span { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; transform: scaleY(0.3); }
|
||||
.eq.playing span { animation: eq 1s ease-in-out infinite alternate; }
|
||||
.eq.playing span:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
|
||||
.eq.playing span:nth-child(3) { animation-duration: 1.2s; animation-delay: -0.6s; }
|
||||
.eq.playing span:nth-child(4) { animation-duration: 0.85s; animation-delay: -0.15s; }
|
||||
@keyframes eq { 0% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.45); } }
|
||||
|
||||
.track { display: flex; gap: 1rem; align-items: flex-start; }
|
||||
.artwork { width: 104px; height: 104px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
|
||||
.artwork-empty { display: grid; place-items: center; font-size: 2rem; color: var(--muted); }
|
||||
.artwork-sm { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
|
||||
.artwork {
|
||||
width: 112px; height: 112px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: var(--surface-2);
|
||||
box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
|
||||
transition: transform 0.4s var(--spring);
|
||||
}
|
||||
.track:hover .artwork { transform: scale(1.04) rotate(-1deg); }
|
||||
.artwork-empty { display: grid; place-items: center; font-size: 2rem; color: rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, #4a1278, #1872cf); }
|
||||
.artwork-sm { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.8); }
|
||||
.track-body { min-width: 0; flex: 1; }
|
||||
.track-title { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.track-artist { color: var(--text); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.track-actions { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; margin-top: 0.65rem; }
|
||||
.service-link { font-size: 0.8rem; color: var(--muted); text-decoration: none; }
|
||||
.service-link:hover { color: var(--text); text-decoration: underline; }
|
||||
.service-link.inexact { opacity: 0.6; }
|
||||
.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; }
|
||||
.track-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.8rem; }
|
||||
.service-link {
|
||||
font-size: 0.76rem; color: var(--text); text-decoration: none; padding: 0.2rem 0.55rem; border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.2s, transform 0.25s var(--spring);
|
||||
}
|
||||
.service-link:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
|
||||
.service-link.inexact { opacity: 0.55; }
|
||||
|
||||
.profile-header { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
|
||||
.profile-header p { margin: 0.4rem 0 0; }
|
||||
.featured blockquote { margin: 0.85rem 0 0; padding-left: 0.85rem; border-left: 3px solid var(--accent); font-style: italic; }
|
||||
.profile-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 0.5rem 0 0.75rem; }
|
||||
.profile-header h1 { font-size: 2.1rem; }
|
||||
.profile-header .bio { margin: 0; max-width: 30rem; }
|
||||
.stats { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
|
||||
.stats span { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; }
|
||||
.stats strong { color: var(--text); font-family: var(--font-display); }
|
||||
.featured blockquote {
|
||||
margin: 0.9rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid transparent; font-style: italic;
|
||||
border-image: var(--grad) 1; background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.search { position: relative; }
|
||||
.search-results { list-style: none; margin: 0.4rem 0 0; padding: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
|
||||
.search-results li { padding: 0.35rem 0.4rem; }
|
||||
.search-results { list-style: none; margin: 0.5rem 0 0; padding: 0.4rem; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 14px; }
|
||||
.search-results li { padding: 0.4rem 0.45rem; border-radius: 10px; transition: background 0.15s; }
|
||||
.search-results li:hover { background: var(--surface-2); }
|
||||
.result { display: flex; gap: 0.6rem; align-items: center; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; width: 100%; text-align: left; padding: 0; }
|
||||
.result:hover { color: var(--accent); }
|
||||
.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
|
||||
.recent-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0; text-decoration: none; border-radius: 8px; }
|
||||
a.recent-row:hover .recent-title { color: var(--accent); }
|
||||
.recent-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.4rem; text-decoration: none; border-radius: 12px; transition: background 0.15s, transform 0.25s var(--spring); }
|
||||
a.recent-row:hover { background: var(--surface-2); transform: translateX(3px); }
|
||||
.recent li + li { border-top: 1px solid var(--border); }
|
||||
.recent-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
|
||||
.recent-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.recent-title { font-weight: 600; }
|
||||
.credit { margin: 0.6rem 0 0; font-size: 0.8rem; }
|
||||
.recent-time { font-size: 0.8rem; white-space: nowrap; }
|
||||
.artwork-sm.artwork-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
|
||||
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
|
||||
.qr { border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(47, 140, 255, 0.6); }
|
||||
.credit { margin: 0.6rem 0 0; font-size: 0.8rem; }
|
||||
.picked { display: flex; gap: 0.75rem; align-items: center; }
|
||||
|
||||
.connections { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
|
||||
.connection { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
|
||||
.connection { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
|
||||
.connection form input { width: 160px; }
|
||||
.connection.disabled { opacity: 0.55; }
|
||||
.steps { margin: 0.5rem 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
|
||||
.jellyfin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; }
|
||||
.jellyfin-form input[name='serverUrl'] { grid-column: 1 / -1; }
|
||||
.jellyfin-form .btn { justify-self: start; }
|
||||
@@ -135,15 +232,25 @@ a.recent-row:hover .recent-title { color: var(--accent); }
|
||||
.webhook summary { cursor: pointer; color: var(--muted); }
|
||||
.webhook p { margin: 0.35rem 0; }
|
||||
.webhook code { font-size: 0.75rem; background: var(--surface-2); padding: 0.3rem 0.5rem; border-radius: 6px; word-break: break-all; flex: 1; min-width: 0; }
|
||||
.btn-small { padding: 0.25rem 0.65rem; font-size: 0.8rem; }
|
||||
@media (max-width: 480px) { .jellyfin-form { grid-template-columns: 1fr; } }
|
||||
|
||||
.hero { padding: 3rem 0; display: flex; flex-direction: column; gap: 1rem; }
|
||||
.hero h1 { font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1.1; }
|
||||
.hero p { color: var(--muted); font-size: 1.1rem; margin: 0; }
|
||||
.hero { padding: 4.5rem 0 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
|
||||
.hero h1 { font-size: 3.2rem; letter-spacing: -0.04em; line-height: 1.02; }
|
||||
.gradient-text {
|
||||
background: linear-gradient(90deg, #a78bfa, #7dd3fc, #60a5fa, #a78bfa); background-size: 300% 100%;
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite;
|
||||
}
|
||||
@keyframes shimmer { to { background-position: 300% 0; } }
|
||||
.hero p { color: var(--muted); font-size: 1.15rem; margin: 0; max-width: 34rem; }
|
||||
.hero .eq { height: 42px; gap: 5px; color: #8b9dff; }
|
||||
.hero .eq span { width: 8px; border-radius: 4px; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.artwork { width: 76px; height: 76px; }
|
||||
.nav-links { gap: 0.7rem; font-size: 0.9rem; }
|
||||
.hero h1 { font-size: 1.9rem; }
|
||||
.artwork { width: 84px; height: 84px; }
|
||||
.nav-links { gap: 0.75rem; font-size: 0.9rem; }
|
||||
.hero h1 { font-size: 2.3rem; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
@@ -1,18 +1,34 @@
|
||||
import type { Metadata } from 'next';
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import { Inter, Space_Grotesk } from 'next/font/google';
|
||||
import { Nav } from '@/components/Nav';
|
||||
import { Providers } from '@/components/Providers';
|
||||
import './globals.css';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' });
|
||||
const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-space-grotesk', display: 'swap' });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'musicshare',
|
||||
description: "See what your friends are listening to, and play it on your own service.",
|
||||
applicationName: 'musicshare',
|
||||
// iOS "Add to Home Screen": open full-screen with a dark status bar.
|
||||
appleWebApp: { capable: true, title: 'musicshare', statusBarStyle: 'black-translucent' },
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: '#07070b',
|
||||
viewportFit: 'cover',
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" className={`${inter.variable} ${spaceGrotesk.variable}`}>
|
||||
<body>
|
||||
<Nav />
|
||||
<main className="container">{children}</main>
|
||||
<div className="ambient" aria-hidden />
|
||||
<Providers>
|
||||
<Nav />
|
||||
<main className="container">{children}</main>
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { MetadataRoute } from 'next';
|
||||
|
||||
/** Makes the website installable ("Add to Home Screen") as a standalone app. Needs HTTPS in production. */
|
||||
export default function manifest(): MetadataRoute.Manifest {
|
||||
return {
|
||||
name: 'musicshare',
|
||||
short_name: 'musicshare',
|
||||
description: 'See what your friends are listening to, and play it on your own service.',
|
||||
start_url: '/',
|
||||
scope: '/',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait',
|
||||
background_color: '#07070b',
|
||||
theme_color: '#07070b',
|
||||
categories: ['music', 'social'],
|
||||
icons: [
|
||||
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
|
||||
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
|
||||
{ src: '/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
|
||||
],
|
||||
};
|
||||
}
|
||||
+35
-14
@@ -1,8 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import Link from 'next/link';
|
||||
import useSWR from 'swr';
|
||||
import { sortFeed, type FeedItemDTO, type ProfileDTO } from '@musicshare/shared';
|
||||
import { Equalizer } from '@/components/Equalizer';
|
||||
import { NowPlayingCard } from '@/components/NowPlayingCard';
|
||||
import { SharingControls } from '@/components/SharingControls';
|
||||
import { UserSearch } from '@/components/UserSearch';
|
||||
@@ -70,26 +72,45 @@ function Feed() {
|
||||
{feed?.length === 0 && (
|
||||
<p className="muted">Nothing yet. Follow some friends and their music will show up here live.</p>
|
||||
)}
|
||||
{feed?.map((np) => (
|
||||
<NowPlayingCard
|
||||
key={np.user.id}
|
||||
np={np}
|
||||
preferred={me?.preferredService}
|
||||
pinned={Boolean(np.pinnedAt)}
|
||||
onTogglePin={() => togglePin(np)}
|
||||
/>
|
||||
))}
|
||||
{/* Cards rise in on load and glide to new positions when someone pins or starts playing. */}
|
||||
<AnimatePresence initial={true}>
|
||||
{feed?.map((np, i) => (
|
||||
<motion.div
|
||||
key={np.user.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 24, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.96 }}
|
||||
transition={{ type: 'spring', stiffness: 380, damping: 32, delay: Math.min(i, 8) * 0.05 }}
|
||||
>
|
||||
<NowPlayingCard
|
||||
np={np}
|
||||
preferred={me?.preferredService}
|
||||
pinned={Boolean(np.pinnedAt)}
|
||||
onTogglePin={() => togglePin(np)}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Landing() {
|
||||
return (
|
||||
<section className="hero">
|
||||
<h1>See what your friends are playing.</h1>
|
||||
<motion.section
|
||||
className="hero"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
<Equalizer playing />
|
||||
<h1>
|
||||
See what your friends are <span className="gradient-text">playing.</span>
|
||||
</h1>
|
||||
<p>
|
||||
Connect Spotify, Last.fm, ListenBrainz and more. When a friend on Apple Music is playing something you like,
|
||||
one tap opens it in your app.
|
||||
Share what you play on Spotify, Apple Music, YouTube Music, Plex and more. When a friend on Apple Music is
|
||||
playing something you like, one tap opens it in your app.
|
||||
</p>
|
||||
<div className="row">
|
||||
<Link href="/register" className="btn btn-primary">
|
||||
@@ -99,6 +120,6 @@ function Landing() {
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</motion.section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -99,9 +99,7 @@ function ProfileForm({ me }: { me: MeDTO }) {
|
||||
function Connections() {
|
||||
const params = useSearchParams();
|
||||
const { data: connections = [], mutate } = useSWR<ConnectionDTO[]>('/connections', fetcher);
|
||||
const errorParam = params.get('error');
|
||||
const spotifyLimited = errorParam === 'spotify_limited';
|
||||
const [error, setError] = useState<string | null>(spotifyLimited ? null : errorParam);
|
||||
const [error, setError] = useState<string | null>(params.get('error'));
|
||||
const byProvider = new Map(connections.map((c) => [c.provider, c]));
|
||||
|
||||
const run = async (fn: () => Promise<unknown>) => {
|
||||
@@ -114,7 +112,7 @@ function Connections() {
|
||||
}
|
||||
};
|
||||
|
||||
const connectOAuth = (provider: 'spotify' | 'plex' | 'lastfm') =>
|
||||
const connectOAuth = (provider: 'plex' | 'lastfm') =>
|
||||
run(async () => {
|
||||
const { url } = await api<{ url: string }>(`/connections/${provider}/authorize`, { body: { client: 'web' } });
|
||||
window.location.href = url;
|
||||
@@ -153,24 +151,50 @@ function Connections() {
|
||||
<p className="muted">Connect where you listen. Your friends see what you're playing in real time.</p>
|
||||
{error && <p className="error">{error}</p>}
|
||||
<div className="connections">
|
||||
{(['spotify', 'plex'] as const).map((p) => (
|
||||
<div className="connection" key={p}>
|
||||
<div>
|
||||
<strong>{SERVICE_LABELS[p]}</strong>
|
||||
<div>{status(p) ?? (p === 'plex' && <span className="muted">Music you play from your Plex servers</span>)}</div>
|
||||
<WebhookHint connection={byProvider.get(p)} />
|
||||
{/* Spotify caps new apps at a handful of accounts; Spotify's own Last.fm/ListenBrainz link works for everyone. */}
|
||||
<div className="connection spotify-how">
|
||||
<div>
|
||||
<strong>Spotify</strong>
|
||||
<div className="muted">
|
||||
Spotify sends everything you play to <strong>Last.fm</strong> or <strong>ListenBrainz</strong>, and we share it from
|
||||
there. Connect one of them below, then link Spotify on their site:
|
||||
</div>
|
||||
{byProvider.get(p)?.status === 'active' ? (
|
||||
<button className="btn" onClick={() => disconnect(p)}>
|
||||
Disconnect
|
||||
</button>
|
||||
) : (
|
||||
<button className="btn btn-primary" onClick={() => connectOAuth(p)}>
|
||||
{byProvider.has(p) ? 'Reconnect' : 'Connect'}
|
||||
</button>
|
||||
)}
|
||||
<ol className="steps">
|
||||
<li>
|
||||
<strong>Last.fm</strong> (most popular): sign in below, then{' '}
|
||||
<a href={SPOTIFY_LINK_PAGES.lastfm} target="_blank" rel="noreferrer">
|
||||
connect “Spotify Scrobbling” on Last.fm
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
<li>
|
||||
<strong>ListenBrainz</strong> (open source): add your username below, then{' '}
|
||||
<a href={SPOTIFY_LINK_PAGES.listenbrainz} target="_blank" rel="noreferrer">
|
||||
connect Spotify on ListenBrainz
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
</ol>
|
||||
<div className="muted">On Android, the musicshare app shares Spotify automatically.</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="connection">
|
||||
<div>
|
||||
<strong>Plex</strong>
|
||||
<div>{status('plex') ?? <span className="muted">Music you play from your Plex servers</span>}</div>
|
||||
<WebhookHint connection={byProvider.get('plex')} />
|
||||
</div>
|
||||
{byProvider.get('plex')?.status === 'active' ? (
|
||||
<button className="btn" onClick={() => disconnect('plex')}>
|
||||
Disconnect
|
||||
</button>
|
||||
) : (
|
||||
<button className="btn btn-primary" onClick={() => connectOAuth('plex')}>
|
||||
{byProvider.has('plex') ? 'Reconnect' : 'Connect'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="connection">
|
||||
<div className="grow">
|
||||
@@ -203,16 +227,6 @@ function Connections() {
|
||||
.
|
||||
</div>
|
||||
))}
|
||||
{spotifyLimited && (
|
||||
<div className="notice">
|
||||
<strong>Spotify sign-in is limited during beta.</strong> Spotify only lets a few accounts sign in to new apps
|
||||
directly. You can still share Spotify through Last.fm: sign in to Last.fm below, then{' '}
|
||||
<a href="https://www.last.fm/settings/applications" target="_blank" rel="noreferrer">
|
||||
connect “Spotify Scrobbling” on Last.fm
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
)}
|
||||
{(['lastfm', 'listenbrainz'] as const).map((p) => (
|
||||
<div className="connection" key={p}>
|
||||
<div>
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'motion/react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import type { ProfileDTO } from '@musicshare/shared';
|
||||
import { profileUrl, type ProfileDTO } from '@musicshare/shared';
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { NowPlayingCard } from '@/components/NowPlayingCard';
|
||||
import { QrCode } from '@/components/QrCode';
|
||||
import { RecentPlays } from '@/components/RecentPlays';
|
||||
import { TrackCard } from '@/components/TrackCard';
|
||||
import { api, fetcher, useMe } from '@/lib/api';
|
||||
@@ -17,6 +19,7 @@ export default function ProfilePage() {
|
||||
const { me } = useMe();
|
||||
const { data: profile, error, mutate } = useSWR<ProfileDTO>(`/users/${username}`, fetcher);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [showQr, setShowQr] = useState(false);
|
||||
|
||||
// Live updates arrive for people you follow (and yourself)
|
||||
useRealtime(Boolean(me), (msg) => {
|
||||
@@ -53,19 +56,35 @@ export default function ProfilePage() {
|
||||
|
||||
return (
|
||||
<div className="stack">
|
||||
<section className="profile-header">
|
||||
<Avatar user={user} size={72} />
|
||||
<div className="grow">
|
||||
<motion.section
|
||||
className="profile-header"
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
<Avatar user={user} size={96} live={Boolean(profile.nowPlaying?.isPlaying)} />
|
||||
<div>
|
||||
<h1>{user.displayName ?? user.username}</h1>
|
||||
<div className="muted">
|
||||
@{user.username} · {profile.followerCount} followers · {profile.followingCount} following
|
||||
</div>
|
||||
{user.bio && <p>{user.bio}</p>}
|
||||
<div className="muted">@{user.username}</div>
|
||||
</div>
|
||||
<div className="stats">
|
||||
<span>
|
||||
<strong>{profile.followerCount}</strong> {profile.followerCount === 1 ? 'follower' : 'followers'}
|
||||
</span>
|
||||
<span>
|
||||
<strong>{profile.followingCount}</strong> following
|
||||
</span>
|
||||
</div>
|
||||
{user.bio && <p className="bio">{user.bio}</p>}
|
||||
{profile.isSelf ? (
|
||||
<Link href="/settings" className="btn">
|
||||
Edit profile
|
||||
</Link>
|
||||
<div className="row">
|
||||
<button className="btn" onClick={() => setShowQr((v) => !v)}>
|
||||
{showQr ? 'Hide QR code' : 'Show QR code'}
|
||||
</button>
|
||||
<Link href="/settings" className="btn">
|
||||
Edit profile
|
||||
</Link>
|
||||
</div>
|
||||
) : me ? (
|
||||
<div className="row">
|
||||
{profile.isFollowing && (
|
||||
@@ -82,7 +101,14 @@ export default function ProfilePage() {
|
||||
Sign up to follow
|
||||
</Link>
|
||||
)}
|
||||
</section>
|
||||
</motion.section>
|
||||
|
||||
{profile.isSelf && showQr && (
|
||||
<section className="card qr-card">
|
||||
<QrCode value={profileUrl(window.location.origin, user.username)} size={220} />
|
||||
<p className="muted">Friends scan this in the musicshare app (or their camera) to open your profile.</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{profile.featured && (
|
||||
<section className="card featured">
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import type { UserSummaryDTO } from '@musicshare/shared';
|
||||
|
||||
export function Avatar({ user, size = 40 }: { user: UserSummaryDTO; size?: number }) {
|
||||
/** `live` wraps the avatar in a spinning gradient ring (someone is listening right now). */
|
||||
export function Avatar({ user, size = 40, live }: { user: UserSummaryDTO; size?: number; live?: boolean }) {
|
||||
const label = (user.displayName ?? user.username).slice(0, 1).toUpperCase();
|
||||
return user.avatarUrl ? (
|
||||
const face = user.avatarUrl ? (
|
||||
<img className="avatar" src={user.avatarUrl} alt="" style={{ width: size, height: size }} />
|
||||
) : (
|
||||
<div className="avatar avatar-empty" style={{ width: size, height: size, fontSize: size * 0.45 }}>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
return <span className={`avatar-ring ${live ? 'live' : ''}`}>{face}</span>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
/** Four bars that dance while music is playing and rest when it isn't. */
|
||||
export function Equalizer({ playing, className = '' }: { playing: boolean; className?: string }) {
|
||||
return (
|
||||
<span className={`eq ${playing ? 'playing' : ''} ${className}`} aria-hidden>
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -16,6 +16,7 @@ export function Nav() {
|
||||
return (
|
||||
<nav className="nav">
|
||||
<Link href="/" className="brand">
|
||||
<img className="brand-logo" src="/logo.png" alt="" width={30} height={30} />
|
||||
musicshare
|
||||
</Link>
|
||||
<div className="nav-links">
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import Link from 'next/link';
|
||||
import { SERVICE_LABELS, type NowPlayingDTO, type StreamingService } from '@musicshare/shared';
|
||||
import { timeAgo } from '@musicshare/shared';
|
||||
import { SERVICE_LABELS, timeAgo, type NowPlayingDTO, type StreamingService } from '@musicshare/shared';
|
||||
import { Avatar } from './Avatar';
|
||||
import { Equalizer } from './Equalizer';
|
||||
import { TrackCard } from './TrackCard';
|
||||
|
||||
export function NowPlayingCard({
|
||||
@@ -19,42 +20,71 @@ export function NowPlayingCard({
|
||||
pinned?: boolean;
|
||||
onTogglePin?: () => void;
|
||||
}) {
|
||||
const sourceLabel = np.sourceApp ?? SERVICE_LABELS[np.source];
|
||||
return (
|
||||
<article className={`card ${pinned ? 'card-pinned' : ''}`}>
|
||||
<article className={`card np-card ${pinned ? 'pinned' : ''} ${np.isPlaying ? 'playing' : ''}`}>
|
||||
{/* The card glows with its album art; crossfades when the song changes. */}
|
||||
<AnimatePresence initial={false}>
|
||||
{np.track.artworkUrl && (
|
||||
<motion.div
|
||||
key={np.track.artworkUrl}
|
||||
className="np-backdrop"
|
||||
style={{ backgroundImage: `url("${np.track.artworkUrl}")` }}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 0.6 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<header className="card-header">
|
||||
{showUser && (
|
||||
<Link href={`/u/${np.user.username}`} className="user-chip">
|
||||
<Avatar user={np.user} size={28} />
|
||||
<span>{np.user.displayName ?? np.user.username}</span>
|
||||
<Avatar user={np.user} size={30} live={np.isPlaying} />
|
||||
<span className="user-name">{np.user.displayName ?? np.user.username}</span>
|
||||
</Link>
|
||||
)}
|
||||
<span className="row">
|
||||
<span className={`status ${np.isPlaying ? 'status-live' : ''}`}>
|
||||
{np.isPlaying && <Equalizer playing />}
|
||||
{np.isPlaying ? 'Listening now' : `Played ${timeAgo(np.updatedAt)}`}
|
||||
<span className="muted">
|
||||
{' via '}
|
||||
{' · '}
|
||||
{np.sourceUrl ? (
|
||||
<a href={np.sourceUrl} target="_blank" rel="noreferrer">
|
||||
{np.sourceApp ?? SERVICE_LABELS[np.source]}
|
||||
{sourceLabel}
|
||||
</a>
|
||||
) : (
|
||||
(np.sourceApp ?? SERVICE_LABELS[np.source])
|
||||
sourceLabel
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
{onTogglePin && (
|
||||
<button
|
||||
<motion.button
|
||||
className={`pin ${pinned ? 'pinned' : ''}`}
|
||||
onClick={onTogglePin}
|
||||
aria-pressed={pinned}
|
||||
title={pinned ? 'Unpin from top of feed' : 'Pin to top of feed'}
|
||||
whileTap={{ scale: 0.7 }}
|
||||
animate={pinned ? { scale: [1, 1.45, 1], rotate: [0, -18, 0] } : { scale: 1, rotate: 0 }}
|
||||
transition={{ duration: 0.45, ease: 'easeOut' }}
|
||||
>
|
||||
{pinned ? '★' : '☆'}
|
||||
</button>
|
||||
</motion.button>
|
||||
)}
|
||||
</span>
|
||||
</header>
|
||||
<TrackCard track={np.track} preferred={preferred} />
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
key={np.track.id}
|
||||
initial={{ opacity: 0, y: 12, filter: 'blur(6px)' }}
|
||||
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
|
||||
exit={{ opacity: 0, y: -12, filter: 'blur(6px)' }}
|
||||
transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
<TrackCard track={np.track} preferred={preferred} />
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
'use client';
|
||||
|
||||
import { MotionConfig } from 'motion/react';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
/** Animations follow the OS "reduce motion" setting; registers the PWA service worker in production. */
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
useEffect(() => {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js', { scope: '/', updateViaCache: 'none' }).catch(() => {});
|
||||
}
|
||||
}, []);
|
||||
return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { qrShape } from '@musicshare/shared';
|
||||
|
||||
/** Black-on-white QR code (scanners need the contrast) with the standard 4-module quiet zone. */
|
||||
export function QrCode({ value, size = 240 }: { value: string; size?: number }) {
|
||||
const shape = useMemo(() => qrShape(value), [value]);
|
||||
const quiet = 4;
|
||||
const total = shape.size + quiet * 2;
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`${-quiet} ${-quiet} ${total} ${total}`}
|
||||
role="img"
|
||||
aria-label={`QR code for ${value}`}
|
||||
shapeRendering="crispEdges"
|
||||
className="qr"
|
||||
>
|
||||
<rect x={-quiet} y={-quiet} width={total} height={total} fill="#fff" />
|
||||
<path d={shape.path} fill="#000" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user