klevze/RadioPlayerWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add managed catalog sync and player UX improvements

Browse Source
This commit is contained in:
Gregor Klevže
2026-04-29 13:49:16 +02:00
parent b866845b6a
commit c8f8c76e8a
21 changed files with 71429 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
src/styles.css
View File

@@ -177,10 +177,6 @@ input:focus-visible,
margin-right: 0;
}
.player-layout.library-collapsed {
/* desktop collapse handled by .sidebar-wrap */
}
.station-library {
position: relative;
min-width: 0;
@@ -261,6 +257,11 @@ input:focus-visible,
gap: 10px;
}
.library-select-sort-icon {
flex: 0 0 auto;
opacity: 0.7;
}
.library-select {
min-width: 0;
position: relative;
@@ -709,6 +710,32 @@ input:focus-visible,
gap: 6px;
}
.station-info-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1px solid rgba(255, 132, 132, 0.32);
border-radius: 999px;
background: rgba(255, 132, 132, 0.14);
color: #ffc2c2;
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
cursor: help;
user-select: none;
}
.station-info-indicator:focus-visible {
outline: 2px solid rgba(255, 184, 184, 0.62);
outline-offset: 2px;
}
.station-info-indicator-inline {
flex: 0 0 auto;
}
.library-tag {
max-width: 100%;
padding: 4px 8px;
@@ -721,6 +748,24 @@ input:focus-visible,
line-height: 1.2;
}
.library-tag-healthy {
border-color: rgba(132,242,168,0.34);
background: rgba(132,242,168,0.14);
color: #b6ffd0;
}
.library-tag-warning {
border-color: rgba(255, 184, 77, 0.34);
background: rgba(255, 184, 77, 0.14);
color: #ffd99a;
}
.library-tag-proxy {
border-color: rgba(255, 132, 132, 0.32);
background: rgba(255, 132, 132, 0.14);
color: #ffc2c2;
}
.library-tag.muted {
color: var(--text-soft);
}
@@ -1267,6 +1312,82 @@ header {
border-color: rgba(255,255,255,0.28);
}
/* ── Coverflow sparkle effects (box-shadow / border — no ::after needed) ── */
.coverflow-item.icon-flash,
.coverflow-item.icon-gradient-sweep,
.coverflow-item.icon-glow-pulse {
/* Disable transition so CSS animation isn't fought by transition interpolation */
transition: none !important;
}
.coverflow-item.icon-flash {
animation: icon-flash 0.8s ease-out forwards;
}
.coverflow-item.icon-gradient-sweep {
animation: icon-gradient-sweep 1.1s ease-out forwards;
}
.coverflow-item.icon-glow-pulse {
animation: icon-glow-pulse 1.4s ease-out forwards;
}
/* Selected variants — start/end from the accent-tinted baseline */
.coverflow-item.selected.icon-flash {
animation: icon-flash-selected 0.8s ease-out forwards;
}
.coverflow-item.selected.icon-gradient-sweep {
animation: icon-gradient-sweep-selected 1.1s ease-out forwards;
}
.coverflow-item.selected.icon-glow-pulse {
animation: icon-glow-pulse-selected 1.4s ease-out forwards;
}
/* Non-selected */
@keyframes icon-flash {
0% { box-shadow: 0 12px 28px rgba(0,0,0,0.28); border-color: var(--border); }
20% { box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 22px 4px rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.95); }
55% { box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 12px 2px rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }
100% { box-shadow: 0 12px 28px rgba(0,0,0,0.28); border-color: var(--border); }
}
@keyframes icon-gradient-sweep {
0% { box-shadow: 0 12px 28px rgba(0,0,0,0.28); border-color: var(--border); background: rgba(255,255,255,0.08); }
15% { border-color: rgba(var(--accent-rgb), 0.9); }
40% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.8), 0 0 24px 6px rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 1); }
80% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3), 0 12px 28px rgba(0,0,0,0.28); background: rgba(255,255,255,0.08); }
100% { box-shadow: 0 12px 28px rgba(0,0,0,0.28); border-color: var(--border); background: rgba(255,255,255,0.08); }
}
@keyframes icon-glow-pulse {
0% { box-shadow: 0 12px 28px rgba(0,0,0,0.28); border-color: var(--border); }
30% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.85), 0 0 28px 8px rgba(var(--accent-rgb), 0.5); border-color: rgba(var(--accent-rgb), 1); }
65% { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.4), 0 8px 28px rgba(var(--accent-rgb), 0.25); border-color: rgba(var(--accent-rgb), 0.55); }
100% { box-shadow: 0 12px 28px rgba(0,0,0,0.28); border-color: var(--border); }
}
/* Selected variants */
@keyframes icon-flash-selected {
0% { box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.48); }
20% { box-shadow: 0 0 0 3px rgba(255,255,255,0.95), 0 0 26px 6px rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.95); }
55% { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.6), 0 0 16px 3px rgba(var(--accent-rgb), 0.35); border-color: rgba(var(--accent-rgb), 0.75); }
100% { box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.48); }
}
@keyframes icon-gradient-sweep-selected {
0% { box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.48); }
40% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 1), 0 0 32px 8px rgba(var(--accent-rgb), 0.6); border-color: rgba(var(--accent-rgb), 1); }
100% { box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.48); }
}
@keyframes icon-glow-pulse-selected {
0% { box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.48); }
30% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 1), 0 0 32px 10px rgba(var(--accent-rgb), 0.65); border-color: rgba(var(--accent-rgb), 1); }
65% { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55), 0 8px 28px rgba(var(--accent-rgb), 0.38); border-color: rgba(var(--accent-rgb), 0.7); }
100% { box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.48); }
}
.coverflow-item img {
width: 100%;
height: 100%;
@@ -1361,6 +1482,67 @@ header {
font-size: 0.98rem;
}
.station-health-summary {
display: inline-flex;
align-items: center;
width: fit-content;
margin-top: 12px;
padding: 5px 10px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
background: rgba(255,255,255,0.06);
color: var(--text-main);
font-size: 0.76rem;
font-weight: 800;
line-height: 1.2;
}
.station-health-summary-info {
padding: 0;
border: 0;
background: transparent;
}
.station-info-indicator-player {
width: 24px;
height: 24px;
font-size: 0.8rem;
}
.station-health-summary-healthy {
border-color: rgba(132,242,168,0.34);
background: rgba(132,242,168,0.14);
color: #b6ffd0;
}
.station-health-summary-warning {
border-color: rgba(255, 184, 77, 0.34);
background: rgba(255, 184, 77, 0.14);
color: #ffd99a;
}
.station-health-summary-proxy {
border-color: rgba(255, 132, 132, 0.32);
background: rgba(255, 132, 132, 0.14);
color: #ffc2c2;
}
.station-health-detail {
margin-top: 7px;
color: var(--text-soft);
font-size: 0.82rem;
line-height: 1.35;
max-width: 54ch;
}
.station-health-detail-warning {
color: #ffd99a;
}
.station-health-detail-proxy {
color: #ffc2c2;
}
.status-indicator-wrap {
display: flex;
flex-wrap: wrap;
@@ -1371,6 +1553,14 @@ header {
font-size: 0.88rem;
}
.managed-catalog-status {
margin-top: 8px;
color: var(--text-soft);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.status-dot {
width: 8px;
height: 8px;
@@ -1404,6 +1594,11 @@ header {
box-shadow: 0 0 14px rgba(143,179,255,0.12);
}
.engine-airplay {
border-color: rgba(77,215,200,0.52);
box-shadow: 0 0 14px rgba(77,215,200,0.14);
}
.engine-html {
border-color: rgba(255,255,255,0.18);
}
@@ -1736,6 +1931,39 @@ input[type=range]::-webkit-slider-thumb {
white-space: nowrap;
}
.station-card-health {
margin-top: 7px;
display: inline-flex;
align-items: center;
width: fit-content;
padding: 3px 8px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
background: rgba(255,255,255,0.06);
color: var(--text-main);
font-size: 0.7rem;
font-weight: 800;
line-height: 1.2;
}
.station-card-health-healthy {
border-color: rgba(132,242,168,0.34);
background: rgba(132,242,168,0.14);
color: #b6ffd0;
}
.station-card-health-warning {
border-color: rgba(255, 184, 77, 0.34);
background: rgba(255, 184, 77, 0.14);
color: #ffd99a;
}
.station-card-health-proxy {
border-color: rgba(255, 132, 132, 0.32);
background: rgba(255, 132, 132, 0.14);
color: #ffc2c2;
}
.device {
margin-bottom: 10px;
padding: 13px 14px;
@@ -1773,6 +2001,52 @@ input[type=range]::-webkit-slider-thumb {
gap: 8px;
}
.editor-tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.editor-tools .btn {
flex: 1 1 160px;
}
.hidden-file-input {
display: none;
}
.editor-note {
margin: 0 0 12px;
color: var(--text-muted);
font-size: 0.82rem;
}
.editor-note strong {
color: var(--text-main);
}
.editor-note-subtle {
margin-top: -4px;
font-size: 0.78rem;
}
.editor-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
margin: -4px 0 16px;
color: var(--text-muted);
font-size: 0.82rem;
}
.editor-checkbox input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--accent);
}
.field-row {
margin-bottom: 10px;
}
@@ -1861,6 +2135,12 @@ input[type=range]::-webkit-slider-thumb {
background: rgba(143,179,255,0.14);
}
.cast-btn.cast-airplay-active,
.cast-btn.cast-airplay-active:hover {
border-color: rgba(77,215,200,0.56);
background: rgba(77,215,200,0.15);
}
@media (max-width: 1100px) {
body.library-open {
overflow: hidden;
@@ -1937,7 +2217,7 @@ input[type=range]::-webkit-slider-thumb {
min-height: 100dvh;
width: 100%;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto auto;
grid-template-rows: auto auto auto auto auto auto auto auto;
grid-template-areas:
"header"
"artwork"
@@ -2131,13 +2411,18 @@ input[type=range]::-webkit-slider-thumb {
align-self: center;
}
#station-health-detail {
display: none !important;
}
.artwork-stack {
width: 100%;
gap: 6px;
}
.artwork-container {
width: min(34vw, 132px);
width: min(34vw, 132px, 22dvh);
max-height: min(132px, 22dvh);
padding: 4px;
border-radius: 18px;
}
@@ -2183,7 +2468,7 @@ input[type=range]::-webkit-slider-thumb {
}
.track-info {
min-height: 108px;
min-height: 72px;
align-items: center;
justify-content: center;
text-align: center;
@@ -2363,10 +2648,12 @@ input[type=range]::-webkit-slider-thumb {
.editor-station-actions,
.editor-actions {
width: 100%;
flex-wrap: wrap;
}
.editor-station-actions .btn,
.editor-actions .btn {
.editor-actions .btn,
.editor-tools .btn {
flex: 1;
}
}
@@ -2395,6 +2682,54 @@ input[type=range]::-webkit-slider-thumb {
}
}
@media (min-width: 761px) and (max-height: 860px) {
#station-subtitle,
#managed-catalog-status,
#cast-output-row,
#station-health-detail {
display: none !important;
}
.artwork-container {
width: min(100%, 360px);
}
.track-info h2 {
font-size: clamp(1.9rem, 4vw, 2.8rem);
}
.status-indicator-wrap {
margin-top: 10px;
}
.station-health-summary {
margin-top: 8px;
}
}
@media (max-width: 760px) and (max-height: 650px) {
.artwork-container {
width: min(26vw, 100px, 16dvh);
}
.artwork-coverflow {
height: 56px;
}
.coverflow-item {
width: 50px;
height: 44px;
}
.track-info {
min-height: 72px;
}
.track-info h2 {
font-size: clamp(1.25rem, 7vw, 1.8rem);
}
}
@media (max-width: 380px) {
.glass-card {
padding: 13px;