b86dcfbb8d
- Implement main.js for the master display functionality, including WebSocket connection, audio output management, and state handling. - Create style.css for the master display's visual design, ensuring a cohesive look and feel with a dark theme and responsive layout. - Integrate device management with a fallback for non-Electron environments, allowing users to select audio outputs. - Add features for managing favorites, including toggling favorites and filtering by genre. - Enhance user experience with a responsive favorites grid and drag-to-scroll functionality.
724 lines
14 KiB
CSS
724 lines
14 KiB
CSS
/* Master display: dedicated big-screen UI that owns the audio output for a room.
|
|
* In Phase 3 this same page is loaded inside an Electron window; the audio
|
|
* device picker below is a faked stand-in for the real OS device enumerator.
|
|
*
|
|
* Visual language mirrors the kiosk: flat panels, sharp corners, single accent.
|
|
*/
|
|
|
|
:root {
|
|
--bg-0: #07080b;
|
|
--bg-1: #0e1116;
|
|
--bg-2: #161a22;
|
|
--bg-3: #1f242e;
|
|
--fg: #e9ecf2;
|
|
--muted: #8a90a0;
|
|
--muted-2: #5d6373;
|
|
--line: #262b36;
|
|
--accent: #ff7a3d;
|
|
--accent-2: #ffb37a;
|
|
--accent-glow: rgba(255, 122, 61, 0.35);
|
|
--ok: #4ec9a6;
|
|
--warn: #ffd166;
|
|
--err: #ec6a6a;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
background:
|
|
radial-gradient(1200px 600px at 30% -10%, rgba(255, 122, 61, 0.06), transparent 60%),
|
|
var(--bg-0);
|
|
color: var(--fg);
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#app {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.login {
|
|
display: grid;
|
|
place-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.login form {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 24px;
|
|
background: var(--bg-1);
|
|
border: 1px solid var(--line);
|
|
min-width: 280px;
|
|
}
|
|
|
|
.login input,
|
|
.login button {
|
|
padding: 10px 12px;
|
|
background: var(--bg-2);
|
|
color: var(--fg);
|
|
border: 1px solid var(--line);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.login button {
|
|
background: var(--accent);
|
|
color: #1a0a00;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.login .err {
|
|
color: var(--err);
|
|
font-size: 12px;
|
|
min-height: 1em;
|
|
}
|
|
|
|
/* ---------- Master shell ----------
|
|
* Top bar | now-playing (height = cover art) | stations grid (rest, horizontal scroll)
|
|
*/
|
|
.master {
|
|
display: grid;
|
|
grid-template-rows: 56px auto 1fr;
|
|
height: 100%;
|
|
gap: 0;
|
|
}
|
|
|
|
.master .topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--bg-1);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.master .topbar h1 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: .06em;
|
|
}
|
|
|
|
.master .topbar .grow {
|
|
flex: 1;
|
|
}
|
|
|
|
.master .topbar .pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
height: 32px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.master .topbar select,
|
|
.master .topbar input,
|
|
.master .topbar button {
|
|
background: var(--bg-2);
|
|
color: var(--fg);
|
|
border: 1px solid var(--line);
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.master .topbar button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.master .topbar .peers {
|
|
color: var(--muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.master .topbar .status-on {
|
|
color: var(--ok);
|
|
}
|
|
|
|
.master .topbar .status-off {
|
|
color: var(--muted-2);
|
|
}
|
|
|
|
/* ---------- Stage: now-playing block ---------- */
|
|
.master .stage {
|
|
padding: 12px 16px 8px;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Block height is dictated by the square cover art — the meta column simply
|
|
* fills the same height. */
|
|
.master .np {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 20px;
|
|
align-items: stretch;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
|
|
var(--bg-1);
|
|
border: 1px solid var(--line);
|
|
padding: 14px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.master .np::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(600px 220px at 0% 0%, var(--accent-glow), transparent 70%);
|
|
opacity: 0.35;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.master .np > * {
|
|
position: relative;
|
|
}
|
|
|
|
.master .np .art {
|
|
height: clamp(180px, 28vh, 300px);
|
|
aspect-ratio: 1 / 1;
|
|
width: auto;
|
|
background: var(--bg-2);
|
|
background-size: cover;
|
|
background-position: center;
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
|
|
border: 1px solid var(--line);
|
|
position: relative;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.master .np .art .art-img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.master .np .art.empty::after {
|
|
content: "♪";
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 64px;
|
|
color: var(--muted-2);
|
|
}
|
|
|
|
.master .np .meta {
|
|
display: grid;
|
|
gap: 6px;
|
|
align-content: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.master .np .meta .tiny {
|
|
color: var(--muted-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: .14em;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.master .np .meta h2 {
|
|
margin: 0;
|
|
font-size: clamp(20px, 2.4vw, 34px);
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
letter-spacing: -.01em;
|
|
}
|
|
|
|
.master .np .meta .genres {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.master .np .meta .tag {
|
|
padding: 3px 10px;
|
|
background: rgba(255, 179, 122, 0.10);
|
|
color: var(--accent-2);
|
|
border: 1px solid rgba(255, 179, 122, 0.18);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.master .np .meta .stats {
|
|
display: flex;
|
|
gap: 16px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.master .np .meta .stats b {
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* ---------- Transport (embedded in now-playing) ---------- */
|
|
.master .np .transport {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.master .ctrl {
|
|
width: 38px;
|
|
height: 38px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
color: var(--fg);
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
transition: background 120ms, border-color 120ms, transform 80ms;
|
|
}
|
|
|
|
.master .ctrl:hover:not(:disabled) {
|
|
background: var(--bg-3);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.master .ctrl:active:not(:disabled) {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.master .ctrl:disabled {
|
|
opacity: 0.35;
|
|
cursor: default;
|
|
}
|
|
|
|
.master .ctrl.primary {
|
|
width: 46px;
|
|
height: 46px;
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: #1a0a00;
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
box-shadow: 0 6px 20px var(--accent-glow);
|
|
}
|
|
|
|
.master .ctrl.primary:hover:not(:disabled) {
|
|
background: #ff8a55;
|
|
border-color: #ff8a55;
|
|
}
|
|
|
|
.master .vol {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 12px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
flex: 1;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.master .vol .vol-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.master .vol input[type=range] {
|
|
flex: 1;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.master .vol .val {
|
|
width: 36px;
|
|
text-align: right;
|
|
color: var(--muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- Peers line inside meta ---------- */
|
|
.master .np .peer-line {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.master .np .peer-line-label {
|
|
color: var(--muted-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: .1em;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.master .peer {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.master .peer .role-tag {
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
}
|
|
|
|
.master .peer.role-display .role-tag {
|
|
color: var(--accent-2);
|
|
border-color: rgba(255, 122, 61, 0.4);
|
|
}
|
|
|
|
/* ---------- Bottom stations bar (two rows of tiles) ---------- */
|
|
.master .stations-bar {
|
|
padding: 0 24px 20px;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
.master .err-banner {
|
|
background: rgba(236, 106, 106, 0.12);
|
|
border: 1px solid rgba(236, 106, 106, 0.4);
|
|
color: var(--err);
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
/* ---------- Cover art now-playing extras ---------- */
|
|
.master .np .meta .title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.master .np .meta .title-row h2 {
|
|
margin: 0;
|
|
flex: 1;
|
|
min-width: 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.master .np .meta .fav-toggle {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
transition: background 120ms, color 120ms, border-color 120ms;
|
|
}
|
|
|
|
.master .np .meta .fav-toggle:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent-2);
|
|
}
|
|
|
|
.master .np .meta .fav-toggle.on {
|
|
background: linear-gradient(180deg, rgba(255, 122, 61, 0.25), rgba(255, 122, 61, 0.12));
|
|
border-color: rgba(255, 122, 61, 0.5);
|
|
color: var(--accent);
|
|
text-shadow: 0 0 12px var(--accent-glow);
|
|
}
|
|
|
|
/* ---------- Output picker (hidden behind button) ---------- */
|
|
.master .topbar .out-btn {
|
|
cursor: pointer;
|
|
max-width: 280px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.master .topbar .out-btn.active {
|
|
border-color: var(--accent);
|
|
color: var(--accent-2);
|
|
}
|
|
|
|
.out-popover-wrap {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
display: grid;
|
|
place-items: start center;
|
|
padding-top: 64px;
|
|
z-index: 50;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.out-popover {
|
|
width: min(440px, 92vw);
|
|
max-height: 70vh;
|
|
overflow: auto;
|
|
background: var(--bg-1);
|
|
border: 1px solid var(--line);
|
|
padding: 14px;
|
|
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.out-popover-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.out-popover-head h3 {
|
|
flex: 1;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: .12em;
|
|
}
|
|
|
|
.out-popover .close {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
color: var(--fg);
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.out-popover .device-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.out-popover .device {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: var(--fg);
|
|
text-align: left;
|
|
}
|
|
|
|
.out-popover .device:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.out-popover .device.active {
|
|
background: linear-gradient(180deg, rgba(255, 122, 61, 0.18), rgba(255, 122, 61, 0.08));
|
|
border-color: rgba(255, 122, 61, 0.4);
|
|
color: var(--accent-2);
|
|
}
|
|
|
|
.out-popover .device .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--muted-2);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.out-popover .device.active .dot {
|
|
background: var(--accent);
|
|
box-shadow: 0 0 8px var(--accent-glow);
|
|
}
|
|
|
|
.out-popover .device .name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.out-popover .device .kind {
|
|
color: var(--muted-2);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
}
|
|
|
|
/* ---------- Favorites browser (bottom 2-row touch grid) ---------- */
|
|
.master .favs-card {
|
|
background: var(--bg-1);
|
|
border: 1px solid var(--line);
|
|
padding: 10px 12px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.master .favs-card .favs-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.master .favs-card .favs-header h3 {
|
|
flex: 1;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: .12em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.master .favs-card .genre-filter {
|
|
background: var(--bg-2);
|
|
color: var(--fg);
|
|
border: 1px solid var(--line);
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.master .favs-nav {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
color: var(--fg);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: background 120ms, border-color 120ms, transform 80ms;
|
|
}
|
|
|
|
.master .favs-nav:hover {
|
|
background: var(--bg-3);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.master .favs-nav:active {
|
|
transform: scale(0.94);
|
|
}
|
|
|
|
/* Two-row horizontal-scrolling grid of square tiles. Tile height = half the
|
|
* container height; aspect-ratio 1/1 makes them visually square. */
|
|
.master .favs-grid {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
gap: 8px;
|
|
padding: 2px 2px 8px;
|
|
scroll-snap-type: x proximity;
|
|
scrollbar-gutter: stable;
|
|
cursor: grab;
|
|
user-select: none;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.master .favs-grid.dragging {
|
|
cursor: grabbing;
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
.master .favs-grid.dragging .fav-tile {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.master .favs-grid::-webkit-scrollbar {
|
|
height: 10px;
|
|
}
|
|
|
|
.master .fav-tile {
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line);
|
|
color: var(--fg);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: transform 80ms ease, border-color 120ms, background 120ms;
|
|
height: calc((100% - 8px) / 2);
|
|
aspect-ratio: 1 / 1;
|
|
flex-shrink: 0;
|
|
scroll-snap-align: start;
|
|
min-height: 0;
|
|
}
|
|
|
|
.master .fav-tile:hover {
|
|
border-color: var(--accent);
|
|
background: var(--bg-3);
|
|
}
|
|
|
|
.master .fav-tile:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.master .fav-tile.active {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 1px var(--accent) inset, 0 0 16px var(--accent-glow);
|
|
}
|
|
|
|
.master .fav-art {
|
|
width: 100%;
|
|
min-height: 0;
|
|
background: var(--bg-1) center/cover no-repeat;
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
justify-self: center;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.master .fav-art.empty::after {
|
|
content: "♪";
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--muted-2);
|
|
font-size: 28px;
|
|
}
|
|
|
|
.master .fav-name {
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
color: var(--fg);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.master .favs-empty {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
padding: 12px 4px;
|
|
text-align: center;
|
|
width: 100%;
|