GnosysLabs/Resonant
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Persist song favorites through OpenSubsonic star and unstar, save demo favorites locally, and add optimistic rollback and player-bar controls.

Browse Source 
Hop-State: A_06FNPKJ6RJ17D6321FWJY20
Hop-Proposal: R_06FNPKHE0EJYS4NQAHM3560
Hop-Task: T_06FNPJ4Z3FCWESRBBWVMSY0
Hop-Attempt: AT_06FNPJ4Z3CC4EBG8RK6VXP8
This commit is contained in:
cyph3rasi
2026-07-13 04:48:04 -07:00
committed by Hop
parent 34af86bfc3
commit 2b4c4743e4
4 changed files with 130 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+8 -5
View File
@@ -221,13 +221,13 @@ main { min-width: 0; height: calc(100vh - var(--player-height)); overflow-y: aut
.privacy-note p { max-width: 64ch; margin: 5px 0 0; font-size: 0.72rem; line-height: 1.55; }
.player-bar { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; height: var(--player-height); grid-template-columns: minmax(210px, 1fr) minmax(320px, 1.5fr) minmax(210px, 1fr); align-items: center; gap: 18px; padding: 10px 21px; border-top: 1px solid oklch(0.36 0.018 275 / 0.78); background: oklch(0.16 0.01 275); box-shadow: 0 -16px 45px oklch(0.05 0.016 275 / 0.28); }
.now-playing { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 0; border: 0; background: transparent; text-align: left; }
.now-playing > span { min-width: 0; }
.now-playing { display: flex; min-width: 0; align-items: center; gap: 5px; }
.now-playing-main { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; padding: 0; border: 0; background: transparent; text-align: left; }
.now-playing-main > span { min-width: 0; }
.now-playing strong, .now-playing small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-playing strong { color: var(--ink); font-size: 0.75rem; }
.now-playing small { margin-top: 3px; color: var(--faint); font-size: 0.65rem; }
.now-playing > svg { flex: 0 0 auto; margin-left: 6px; color: var(--muted); }
.now-playing > svg.filled-heart { color: var(--accent-bright); }
.now-playing-favorite { margin-left: 3px; }
.transport { display: grid; justify-items: center; gap: 7px; }
.transport-buttons { display: flex; align-items: center; gap: 8px; }
.play-button { display: grid; width: 37px; height: 37px; margin: 0 3px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: oklch(0.17 0.012 275); background: oklch(0.93 0.008 275); transition: transform 150ms ease, background 150ms ease; }
@@ -262,12 +262,16 @@ input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visib
.queue-item strong { font-size: 0.72rem; }
.queue-item small { margin-top: 3px; color: var(--faint); font-size: 0.63rem; }
.queue-remainder { margin: 0; padding: 15px 0; color: var(--faint); font-size: 0.68rem; text-align: center; }
.action-toast { position: fixed; z-index: 60; right: 20px; bottom: calc(var(--player-height) + 16px); display: flex; max-width: min(390px, calc(100vw - 32px)); align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface-raised); box-shadow: 0 14px 38px oklch(0.05 0.016 275 / 0.42); font-size: 0.72rem; animation: toast-in 180ms cubic-bezier(.22, 1, .36, 1); }
.action-toast--error { border-color: oklch(0.53 0.09 24 / 0.7); color: oklch(0.84 0.07 25); }
.action-toast svg { flex: 0 0 auto; }
.nav-scrim { display: none; }
@keyframes pulse { 50% { opacity: 0.45; transform: scale(0.82); } }
@keyframes scan-turn { to { transform: rotate(360deg); } }
@keyframes scan-pulse { 50% { opacity: 0.3; transform: translateY(-2px); } }
@keyframes queue-confirm { from { opacity: 0.45; transform: scale(0.62); } to { opacity: 1; transform: scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1080px) {
.album-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
@@ -329,7 +333,6 @@ input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visib
.form-actions button { width: 100%; }
.player-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 8px 10px; }
.now-playing .cover { width: 46px; min-width: 46px; }
.now-playing > svg { display: none; }
.transport-buttons { gap: 0; }
.transport-buttons .icon-button:nth-child(2), .transport-buttons .icon-button:nth-child(4) { display: none; }
.player-tools { right: 63px; }