christianandClaude Opus 5.5
2893316a1a
Vista 3 reports nothing about what it is playing — its OSC only takes commands — so a booth with no lighting operator can't see the lighting computer. ProPresenter, the tracks rig and Companion fire Vista's cue lists with notes over macOS network MIDI sessions, and a session sends every note to every participant, so the module joins those sessions as one more listener (RTP-MIDI in plain Node, no helper) and hears what Vista hears. The admin's cue sheet turns notes into Go / release / pause / back / flash on named lists. Sheets with no release notes use [groups]: a Go replaces its group's live list, and the first group is the headline — the main scene — which takes over the look and clears the FX below it. The tile shows the headline list large with how long ago and who fired it, the other live lists as tags, recent notes, and which senders are connected. The module invites each configured sender and keeps re-inviting, accepts invitations from anyone, and advertises itself over Bonjour on macOS. A busy port (a config save re-initing before the old sockets close) is retried rather than failing. Default session port is 5040/5041, clear of the 5009 session on NA Ingest. tools/vista-midi-mock.js is a stand-in sender for development; modules/vista-cues/vista.test.js covers the parser, packet decoding and real loopback sessions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
186 lines
6.2 KiB
CSS
186 lines
6.2 KiB
CSS
/* Vista Cues. Sizes hang off the tile (container units) times the tile's
|
||
own text scale (--vc-scale, the title bar's − / +), so one tile reads the
|
||
same at 3×2 on a laptop as at 8×5 on a wall. Colours are the shell's. */
|
||
|
||
[data-module="vista-cues"] .vc-root {
|
||
--tone: var(--text);
|
||
--vc-scale: 1;
|
||
position: absolute;
|
||
inset: 0;
|
||
container-type: size;
|
||
overflow: hidden;
|
||
color: var(--text);
|
||
font-variant-numeric: tabular-nums;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
}
|
||
[data-module="vista-cues"] .vc-root[data-tone="ok"] { --tone: var(--accent); }
|
||
[data-module="vista-cues"] .vc-root[data-tone="warn"] { --tone: var(--warn); }
|
||
[data-module="vista-cues"] .vc-root[data-tone="muted"] { --tone: var(--muted); }
|
||
[data-module="vista-cues"] [hidden] { display: none !important; }
|
||
|
||
[data-module="vista-cues"] .vc-body {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: calc(clamp(3px, 2.5cqh, 14px) * var(--vc-scale));
|
||
padding: clamp(6px, 3.5cqmin, 22px);
|
||
min-width: 0;
|
||
}
|
||
|
||
[data-module="vista-cues"] .vc-offline {
|
||
position: absolute;
|
||
top: clamp(4px, 3cqmin, 14px);
|
||
right: clamp(6px, 3.5cqmin, 22px);
|
||
z-index: 2;
|
||
font-size: calc(clamp(9px, 4.5cqmin, 14px) * var(--vc-scale));
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: var(--danger);
|
||
}
|
||
[data-module="vista-cues"] .vc-root.is-offline .vc-now { opacity: 0.45; filter: grayscale(0.6); }
|
||
|
||
/* ── now ── */
|
||
|
||
[data-module="vista-cues"] .vc-now {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
padding-left: clamp(6px, 2cqmin, 14px);
|
||
border-left: clamp(3px, 1.1cqmin, 7px) solid var(--tone);
|
||
}
|
||
[data-module="vista-cues"] .vc-kicker {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6em;
|
||
font-size: calc(clamp(10px, 5cqmin, 18px) * var(--vc-scale));
|
||
color: var(--muted);
|
||
}
|
||
[data-module="vista-cues"] .vc-pill {
|
||
padding: 0.05em 0.55em;
|
||
border-radius: 999px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
background: var(--tone);
|
||
color: var(--accent-text);
|
||
}
|
||
[data-module="vista-cues"] .vc-root[data-tone="warn"] .vc-pill { color: var(--bg); }
|
||
[data-module="vista-cues"] .vc-ago { font-weight: 600; }
|
||
[data-module="vista-cues"] .vc-name-wrap { min-width: 0; }
|
||
[data-module="vista-cues"] .vc-name {
|
||
font-size: calc(clamp(16px, 14cqmin, 96px) * var(--vc-scale));
|
||
line-height: 1.12;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: var(--text);
|
||
}
|
||
[data-module="vista-cues"] .vc-root[data-tone="muted"] .vc-name { color: var(--muted); font-weight: 600; }
|
||
[data-module="vista-cues"] .vc-meta {
|
||
font-size: calc(clamp(10px, 4.6cqmin, 18px) * var(--vc-scale));
|
||
color: var(--muted);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
[data-module="vista-cues"] .vc-meta:empty { display: none; }
|
||
|
||
/* ── other live lists ── */
|
||
|
||
[data-module="vista-cues"] .vc-active {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.4em;
|
||
flex: 0 0 auto;
|
||
font-size: calc(clamp(10px, 4.4cqmin, 17px) * var(--vc-scale));
|
||
}
|
||
[data-module="vista-cues"] .vc-chip {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.5em;
|
||
max-width: 100%;
|
||
padding: 0.2em 0.65em;
|
||
border-radius: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
|
||
background: color-mix(in srgb, var(--accent) 14%, transparent);
|
||
}
|
||
[data-module="vista-cues"] .vc-chip.is-paused {
|
||
border-color: color-mix(in srgb, var(--warn) 55%, transparent);
|
||
background: color-mix(in srgb, var(--warn) 14%, transparent);
|
||
}
|
||
[data-module="vista-cues"] .vc-chip-name {
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
[data-module="vista-cues"] .vc-chip-ago,
|
||
[data-module="vista-cues"] .vc-chip-group { color: var(--muted); }
|
||
[data-module="vista-cues"] .vc-chip-group { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; }
|
||
|
||
/* ── recent ── */
|
||
|
||
[data-module="vista-cues"] .vc-recent {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
font-size: calc(clamp(10px, 3.8cqmin, 15px) * var(--vc-scale));
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 0.35em;
|
||
}
|
||
[data-module="vista-cues"] .vc-row {
|
||
display: grid;
|
||
grid-template-columns: auto 6.2em minmax(0, 1fr) auto;
|
||
gap: 0.8em;
|
||
align-items: baseline;
|
||
padding: 0.12em 0;
|
||
white-space: nowrap;
|
||
}
|
||
[data-module="vista-cues"] .vc-row > span { overflow: hidden; text-overflow: ellipsis; }
|
||
[data-module="vista-cues"] .vc-row-time,
|
||
[data-module="vista-cues"] .vc-row-source { color: var(--muted); }
|
||
[data-module="vista-cues"] .vc-row-action { font-weight: 700; color: var(--accent); }
|
||
[data-module="vista-cues"] .vc-row[data-action="release"] .vc-row-action,
|
||
[data-module="vista-cues"] .vc-row[data-action="releaseAll"] .vc-row-action,
|
||
[data-module="vista-cues"] .vc-row[data-action="cleared"] .vc-row-action { color: var(--muted); }
|
||
[data-module="vista-cues"] .vc-row[data-action="pause"] .vc-row-action { color: var(--warn); }
|
||
[data-module="vista-cues"] .vc-row[data-action="flash"] .vc-row-action { color: var(--text); }
|
||
[data-module="vista-cues"] .vc-row.is-unmapped { opacity: 0.6; }
|
||
[data-module="vista-cues"] .vc-row.is-unmapped .vc-row-action { color: var(--muted); font-weight: 500; }
|
||
|
||
@container (max-width: 300px) {
|
||
[data-module="vista-cues"] .vc-row { grid-template-columns: 5.2em minmax(0, 1fr); }
|
||
[data-module="vista-cues"] .vc-row-time,
|
||
[data-module="vista-cues"] .vc-row-source { display: none; }
|
||
}
|
||
@container (max-height: 140px) {
|
||
[data-module="vista-cues"] .vc-recent,
|
||
[data-module="vista-cues"] .vc-active { display: none; }
|
||
}
|
||
|
||
/* ── senders ── */
|
||
|
||
[data-module="vista-cues"] .vc-sources {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.9em;
|
||
margin-top: auto;
|
||
font-size: calc(clamp(9px, 3.4cqmin, 13px) * var(--vc-scale));
|
||
color: var(--muted);
|
||
}
|
||
[data-module="vista-cues"] .vc-src { display: inline-flex; align-items: center; gap: 0.4em; }
|
||
[data-module="vista-cues"] .vc-dot {
|
||
width: 0.65em;
|
||
height: 0.65em;
|
||
border-radius: 50%;
|
||
background: var(--danger);
|
||
}
|
||
[data-module="vista-cues"] .vc-src.is-on { color: var(--text); }
|
||
[data-module="vista-cues"] .vc-src.is-on .vc-dot { background: var(--accent); }
|
||
@container (max-height: 140px) {
|
||
[data-module="vista-cues"] .vc-sources { display: none; }
|
||
}
|