/* Display Screens — port of prototype display-screens.jsx, wired to /api/screens.
The prototype carries lots of fake fields (uptime, brightness, IP, hardware,
playing) that the real DB doesn't have. We render '—' for missing values
and derive what we can (orientation, size, theme from zone). */
/* ─── Table of contents ─────────────────────────────────────────────
File: public/cms/displays.jsx
Total top-level defs: 13
Line numbers are post-TOC (jump directly to them).
────────────────────────────────────────────────────────────────
Helpers + tiles:
DSP_StatusPill, DSP_ScreenTile, DSP_DetailPanel
Modals:
RegisterScreenModal, BulkAssignSpeciesModal,
BulkMoveZoneModal, SwapScreenModal
(AttachDeviceModal + PendingDevicesPanel removed Jun 2026 —
device assignment is kiosk-side self-claim only, no CMS attach.)
Page root:
L2919 DisplayScreensScreen
Other / page-level:
L34 DSP_THEMES
L92 DSP_SIZE_PRESETS
L1431 SCREEN_SIZE_PRESETS
──────────────────────────────────────────────────────────────── */
const DSP_THEMES = {
reef: { fg: '#5DD3D3', grad: 'linear-gradient(135deg, #1f5961 0%, #0d2a30 100%)' },
jellyfish: { fg: '#C99BFF', grad: 'linear-gradient(135deg, #3a2454 0%, #15102a 100%)' },
shark: { fg: '#9DBCFF', grad: 'linear-gradient(135deg, #1a2748 0%, #0a1024 100%)' },
pelagic: { fg: '#7DC0E0', grad: 'linear-gradient(135deg, #14384c 0%, #08182a 100%)' },
touchpool: { fg: '#F2C879', grad: 'linear-gradient(135deg, #4a3618 0%, #1f1608 100%)' },
cold: { fg: '#A6E3FA', grad: 'linear-gradient(135deg, #1a4456 0%, #0a1d28 100%)' },
};
/* "Last seen" was DATETIME in the DB; map age to a status label. */
function statusFromLastSeen(iso) {
if (!iso) return 'offline';
const ageMs = Date.now() - new Date(iso).getTime();
if (ageMs < 5 * 60 * 1000) return 'online';
if (ageMs < 60 * 60 * 1000) return 'idle';
return 'offline';
}
/* Per-screen status that knows about the pair-by-code lifecycle.
Without this, a placeholder row created by the platform admin's
Assign-screens flow shows as "Offline" — which is wrong because
there's never been a device. Three distinct states now:
• 'waiting' — paired_via_code=true, paired_at=null (slot
allocated, hardware not yet attached)
• 'legacy' — paired_via_code=false, paired_at=null, no
last_seen yet (created via the old typed-code
flow, never had a device check in)
• everything else falls through to last-seen heuristic above.
The display tile + status pill use this string. */
function screenStatus(screen) {
if (screen.paired_via_code && !screen.paired_at) return 'waiting';
if (!screen.paired_at && !screen.last_seen_at && !screen.paired_via_code) return 'legacy';
/* Liveness audit (2026-06-12): this previously keyed off last_seen_at,
which is the FEED-FETCH timestamp — bumped by the snapshotter cycle
and CMS preview iframes, so powered-off panels showed Online/Idle
forever. is_online (written by real heartbeats, cleared by the
2-min sweep) is authoritative; last_heartbeat freshness is the
fallback for rows that pre-date the is_online column. last_seen_at
no longer drives status — it's metadata ("feed last loaded"). */
if (screen.is_online === true || screen.is_online === 1) return 'online';
if (screen.is_online === false || screen.is_online === 0) {
/* Heartbeat lost within the hour reads as 'idle' so a just-dropped
panel is distinguishable from one that's been dark for days. */
if (screen.last_heartbeat) {
const age = Date.now() - new Date(screen.last_heartbeat).getTime();
if (age >= 2 * 60 * 1000 && age < 60 * 60 * 1000) return 'idle';
}
return 'offline';
}
/* is_online never reported (pre-migration rows): heartbeat freshness. */
return statusFromLastSeen(screen.last_heartbeat);
}
function lastSeenLabel(iso) {
if (!iso) return 'never';
const ageMs = Date.now() - new Date(iso).getTime();
const m = Math.round(ageMs / 60000);
if (m < 1) return 'just now';
if (m < 60) return `${m} min ago`;
const h = Math.round(m / 60);
if (h < 24) return `${h} h ago`;
const d = Math.round(h / 24);
return `${d} d ago`;
}
function inchesFromResolution(r) {
if (!r) return '—';
if (r.height >= 2160) return '55"';
if (r.height >= 1440) return '32"';
return '24"';
}
/* Screen-size presets — mirrors EDIT_SIZE_PRESETS in single-screen.jsx
so the inline settings popup on Displays can edit the same field
the standalone EditScreenModal exposes. Kept in sync manually since
single-screen.jsx doesn't export it. */
const DSP_SIZE_PRESETS = [
{ id: '24', label: '24" Full HD', width: 1920, height: 1080 },
{ id: '32', label: '32" Full HD', width: 1920, height: 1080 },
{ id: '43', label: '43" Full HD', width: 1920, height: 1080 },
{ id: '55', label: '55" 4K UHD', width: 3840, height: 2160 },
{ id: '65', label: '65" 4K UHD', width: 3840, height: 2160 },
{ id: '75', label: '75" 4K UHD', width: 3840, height: 2160 },
{ id: '85', label: '85" 4K UHD', width: 3840, height: 2160 },
{ id: 'custom', label: 'Custom / unknown', width: null, height: null },
];
function dspResolvePresetId(screen) {
if (!screen) return 'custom';
const fromInches = screen.display_size_inches ? String(screen.display_size_inches) : null;
if (fromInches && DSP_SIZE_PRESETS.find((p) => p.id === fromInches)) return fromInches;
const rw = screen.resolution_width || (screen.resolution && screen.resolution.width);
const rh = screen.resolution_height || (screen.resolution && screen.resolution.height);
if (!rw || !rh) return 'custom';
// Landscape-normalise — portrait flips them.
const w = Math.max(rw, rh);
const h = Math.min(rw, rh);
if (w === 1920 && h === 1080) return '43'; // common-default heuristic
if (w === 3840 && h === 2160) return '55'; // common-default heuristic
return 'custom';
}
/* Compact bytes formatter for the offline-cache section.
Mirrors the kiosk-side helper in display/index.html so the fleet
view and the on-screen Settings overlay show numbers in the same
units (no awkward switch from MB to GB between the two surfaces). */
function formatBytesShort(n) {
if (!n && n !== 0) return '—';
if (n < 1024) return n + ' B';
if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
if (n < 1024 * 1024 * 1024) return (n / (1024 * 1024)).toFixed(1) + ' MB';
return (n / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
}
function DSP_StatusPill({ status }) {
const map = {
/* Semantic tokens (2026-06-12) — the old rgba/hex literals here
didn't flip with light mode. --aq-*-soft variants are defined
per-theme in styles.css. */
online: { fg: 'var(--aq-success)', bg: 'var(--aq-success-soft)', label: 'Online' },
offline: { fg: 'var(--aq-danger)', bg: 'var(--aq-danger-soft)', label: 'Offline' },
idle: { fg: 'var(--aq-warn)', bg: 'var(--aq-warn-soft)', label: 'Idle' },
/* 'waiting' is a placeholder slot allocated by the platform
admin — paired_via_code=true, no device attached yet. Amber
so it reads as "needs attention" rather than "broken". */
waiting: { fg: 'var(--aq-warn)', bg: 'var(--aq-warn-soft)', label: 'Waiting for hardware' },
/* 'legacy' is a pre-pair-by-code screen with no heartbeat ever.
Distinct from "never" (last_seen=null but device attached). */
legacy: { fg: 'var(--aq-text-faint)', bg: 'rgba(255,255,255,0.04)', label: 'Unpaired (legacy)' },
never: { fg: 'var(--aq-text-faint)', bg: 'rgba(255,255,255,0.04)', label: 'Never seen' },
};
const t = map[status] || map.online;
return (
{t.label}
);
}
function DSP_ScreenTile({ screen, selected, onClick, onOpen, media, onSetup, dataId }) {
const t = DSP_THEMES[screen.zone_theme] || DSP_THEMES.reef;
const portrait = screen.orientation === 'portrait';
/* "Awaiting device" = a prepared content slot with no hardware bound
yet — i.e. no device is bound. The reliable signal is paired_at
(a device self-claims → paired_at stamped) + the allocated/legacy
statuses; last_seen_at is NOT reliable here (allocated slots can pick
up a last_seen from snapshot/preview hits without a real device). So
a 'waiting' slot with a stray last_seen still reads as awaiting.
These render as a dashed ghost tile (Empty → guided setup, or
Prepared → waiting for a kiosk). Jun 2026 three-state re-cut. */
const awaitingDevice = !screen.paired_at
&& (screen.status === 'waiting' || screen.status === 'legacy' || screen.status === 'never');
/* Tile backdrop priority (Concept A, Jun 2026):
1. Real screen snapshot (last_snapshot_url) — what is literally
on the screen, captured server-side by the screen-snapshot
worker every ~60s. Rendered as a plain static , so a
100-screen fleet costs the same as any photo grid: no live
iframes, no video, no per-tile GPU. (The one live iframe lives
only in the detail panel for the selected screen.)
2. Featured species photo — short-lived cold-start fallback,
before the first snapshot lands.
3. Zone gradient — when there is neither (e.g. 'waiting' slots).
The old species-photo-as-wallpaper look was decorative, not
informative, and aspect-cropping an animal into 16:9 read as
clip-art. The snapshot turns each tile into a true fleet monitor. */
/* Simplified (2026-06-06): the tile shows the screen's featured species
photo on the zone theme, not a live screenshot. Live capture (device
getScreenshot / headless Chromium) was removed — it couldn't reliably
capture video-background kiosks and didn't scale. The photo is already
fetched (featured-media) and is a clean, instant representation of
what's on the screen. */
const showSpecies = media && media.image_url && screen.status !== 'waiting';
const hasMedia = showSpecies;
const bgUrl = showSpecies ? media.image_url : null;
const bgAlt = (media && media.common_name) || '';
/* An "empty" slot = allocated, no content yet. Clicking it launches the
guided Set-up flow (zone, name, size, orientation, then species)
rather than the near-useless detail panel. */
const isEmpty = awaitingDevice && !(media && media.common_name);
/* "prepared" = content sits ready in a zone but no device has claimed
it. Shown as its own species art, dimmed (standby) — distinct from
the dashed empty slot and the bright live screen. */
const isPrepared = awaitingDevice && !!(media && media.common_name);
const tileClick = (isEmpty && onSetup) ? () => onSetup(screen) : onClick;
/* "Asleep" = the device is online (heartbeating) but it has reported its
physical panel OFF — e.g. it's inside a scheduled off-window, or was
turned off manually. Without this it read as "Live" with a dark panel.
screen_on is INTEGER 0/1 on SQLite, BOOLEAN on PG; null = not reported
(older kiosk), which we treat as on. */
const isAsleep = screen.status === 'online'
&& (screen.screen_on === false || screen.screen_on === 0);
/* A screen rotates through many species, so a Live tile shows a montage
("contact sheet") of their photos + a count when there are 2+, rather
than one misleading photo. Single-species screens keep the full image;
non-live states fall back to the dimmed single image + overlay. */
const speciesList = (media && Array.isArray(media.species))
? media.species.filter((s) => s && s.image_url) : [];
const speciesCount = (media && Number(media.species_count)) || speciesList.length;
const showSheet = screen.status === 'online' && !isAsleep && speciesList.length >= 2;
/* One consistent status cue under every tile — scan the dots alone to
read the fleet: grey = empty, amber = ready/standby, green = live,
slate = asleep, red = offline. */
const dotColor = isEmpty ? 'var(--aq-text-faint)'
: isPrepared ? 'var(--aq-warn)'
: isAsleep ? '#6b86b0'
: screen.status === 'online' ? 'var(--aq-success)'
: screen.status === 'offline' ? 'var(--aq-danger)'
: screen.status === 'idle' ? 'var(--aq-warn)'
: 'var(--aq-text-faint)';
/* The status now lives in the caption (right side), so the tile itself
stays clean — no on-screen pill/badge. */
const stateLabel = isEmpty ? 'Empty'
: isPrepared ? 'Waiting for device'
: isAsleep ? 'Asleep'
: screen.status === 'online' ? 'Live'
: screen.status === 'offline' ? 'Offline'
: screen.status === 'idle' ? 'Standby'
: '';
/* Exception flags — surfaced ONLY on a Live screen, ONLY when something
needs attention, so a healthy fleet stays calm. Each = a small icon
top-right of the tile + a one-line reason in the caption. All from data
the heartbeat already stores. Severity (sev) sorts which reason wins. */
/* Exception flags removed in the 2026-06-06 simplification. They keyed off
heartbeat fields (network_label, device_control, cached_assets,
last_snapshot_at) that aren't reliably reported by the fleet, so they
added noise more than signal. The status dot + label carry the essential
state; richer per-screen diagnostics live in the detail panel. */
const exceptions = [];
const topException = null;
const flagIcon = (type) => {
const p = { width: 13, height: 13, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
if (type === 'wifi') return ();
if (type === 'ban') return ();
if (type === 'sync') return ();
if (type === 'clock') return ();
return null;
};
/* Status overlay text for non-online states — still shown on top of
the dimmed image so the operator can't mistake "Standby with a
pretty fish" for "playing fine". */
const statusOverlay = (
screen.status === 'offline' ? 'No signal'
: screen.status === 'idle' ? 'Standby'
: screen.status === 'never' ? 'Awaiting first boot'
: null
);
return (
);
}
function DSP_DetailPanel({ screen, zonesList, onClose, onChanged, onOpenSchedules }) {
// Edit modal opens inline so the curator can change name /
// orientation / auto-rotate without navigating away from the
// displays grid. EditScreenModal is exposed by single-screen.jsx
// as window.EditScreenModal — guarded so the file still parses
// even if that script hasn't loaded.
const [editOpen, setEditOpen] = useState(false);
/* Manage species modal — same component used by the bulk-select bar
at the bottom of the grid. When opened from here we pass a single
screen ID and the modal renders the current-assignments list
+ an "add more" picker. */
const [manageSpeciesOpen, setManageSpeciesOpen] = useState(false);
/* Settings popover — anchors below the gear icon and holds the
less-frequent actions (rename, restart, device lifecycle, swap).
Closed state is `null`; open state is `{}` so we can extend with
anchor info later if needed. */
const [settingsMenuOpen, setSettingsMenuOpen] = useState(false);
/* Tab inside the Screen settings popup. Mirrors the CMS Settings
page's sidebar-nav pattern (settings.jsx) so curators don't have
to scroll through one long stack of unrelated sections — Identity,
Audio tour, Maintenance, Device each get their own panel. Default
'identity' because that's the most common entry-point ("rename
this tank", "move it to a different zone"). Reset on every open. */
const [popupTab, setPopupTab] = useState('identity');
const settingsBtnRef = useRef(null);
const settingsMenuRef = useRef(null);
/* Swap menu — picks another screen to exchange content or device
with. See POST /api/screens/:id/swap-content + /swap-device.
`mode` is 'content' or 'device' once a target is picked. */
const [swapMode, setSwapMode] = useState(null);
/* Close the settings popover on outside-click / Escape. Standard
popover pattern; ref-guarded so the click on the gear button
itself (which toggles) doesn't immediately re-close. */
useEffect(() => {
if (!settingsMenuOpen) return undefined;
const onKey = (e) => { if (e.key === 'Escape') setSettingsMenuOpen(false); };
document.addEventListener('keydown', onKey);
return () => { document.removeEventListener('keydown', onKey); };
}, [settingsMenuOpen]);
/* Hover-to-enlarge popup. Mirrors the campaign-editor's layout-card
hover pattern (CE_LayoutPicker.onCardEnter): 250ms debounce, then
a fixed-position 750px-wide kiosk preview anchored to the right
of the small preview (flips left if it would overflow). The
popup hosts its own iframe so the user sees a true high-fidelity
mini-canvas at design resolution, not a CSS-upscaled blurry copy
of the small preview. Entry uses AquaOSSpring.animate with the
'magicMove' preset — the same spring config Apple uses for
shared-element transitions in iOS / macOS Sequoia+. */
const hoverTimerRef = useRef(null);
const popupRef = useRef(null);
const [hoverPos, setHoverPos] = useState(null); // { left, top, w, h, srcLeft, srcTop, srcW, srcH }
/* Live-iframe scale. The detail-panel preview is ~400px wide but
the kiosk inside is designed for 1920×1080 (or 1080×1920 for
portrait). Without scaling, the kiosk's container queries fire
the small-viewport branch and the chrome reads oversized
("ONLINE" pill, EN flag, General/Kids/Expert tabs etc. all huge
relative to the species art). The fix: render the iframe at
the design resolution and CSS-scale the whole thing down to
fit. The kiosk inside thinks it's on a full TV; visually it's
a true miniature. ResizeObserver keeps the scale honest as the
panel resizes (e.g. when the curator drags the window). */
const previewBodyRef = useRef(null);
const [livePreviewScale, setLivePreviewScale] = useState(0);
useEffect(() => {
const el = previewBodyRef.current;
if (!el || typeof ResizeObserver === 'undefined') return undefined;
const isPortrait = screen && screen.orientation === 'portrait';
const designW = isPortrait ? 1080 : 1920;
const designH = isPortrait ? 1920 : 1080;
const compute = () => {
const r = el.getBoundingClientRect();
if (!r.width || !r.height) return;
// "Cover" semantics: pick the LARGER of the two ratios so the
// scaled iframe always fills the container completely. Math.min
// (contain) left a 1-2px gap on the right edge from sub-pixel
// rounding — the body's blue gradient showed through. With
// Math.max the iframe slightly overshoots, and overflow:hidden
// on .ds-preview-body clips the micro-overhang. The parent
// already shares the kiosk aspect ratio so the visible crop
// is sub-pixel; if the ratios ever drift the kiosk content
// still fills edge-to-edge rather than letterboxing.
const s = Math.max(r.width / designW, r.height / designH);
setLivePreviewScale(s);
};
compute();
const ro = new ResizeObserver(compute);
ro.observe(el);
return () => ro.disconnect();
}, [screen && screen.id, screen && screen.orientation, screen && screen.status]);
/* Hover handlers for the enlarged kiosk popup. Mirrors the campaign
editor's onCardEnter/onCardLeave (CE_LayoutPicker at line ~2563):
250ms debounce, prefer right of the small preview, flip to left
if it would overflow, clamp vertically to viewport. The popup
sizes from a fixed long-side of 600px so portrait kiosks read
correctly (337×600) and landscape kiosks read at 600×337. */
function onPreviewEnter(ev) {
if (!screen || screen.status !== 'online') return;
const target = ev.currentTarget;
if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
// Tiny 40ms debounce — swallows accidental mouse crossings (a
// pointer just grazing the tile shouldn't flash the popup) but
// reads as essentially instant. 250ms (the campaign-editor
// value) felt sluggish per feedback. The persistent-iframe
// architecture (popup div is always mounted, just visibility-
// hidden) means there's no load cost to firing immediately.
hoverTimerRef.current = setTimeout(() => {
const rect = target.getBoundingClientRect();
const isPortrait = screen && screen.orientation === 'portrait';
// 25% bigger than the campaign editor's 600px — 750 reads as
// a confident "second canvas" without dominating the viewport.
const LONG_SIDE = 750;
const w = isPortrait ? Math.round(LONG_SIDE * 9 / 16) : LONG_SIDE;
const h = isPortrait ? LONG_SIDE : Math.round(LONG_SIDE * 9 / 16);
// Prefer right; flip to left if overflowing the viewport.
let left = rect.right + 16;
if (left + w > window.innerWidth - 16) left = rect.left - w - 16;
// Clamp inside the main panel — when flipped left at narrow
// widths the popup used to land on top of the sidebar, which
// read as a rendering glitch rather than a preview.
const mainEl = document.querySelector('.aq-main');
const mainLeft = mainEl ? mainEl.getBoundingClientRect().left : 0;
left = Math.max(mainLeft + 12, left);
// Center vertically against the source preview, clamp to gutter.
let top = rect.top + (rect.height / 2) - (h / 2);
top = Math.max(16, Math.min(top, window.innerHeight - h - 16));
// Source rect captured for FLIP morph — keyframes use these to
// synthesise the "appearing FROM the small preview" effect.
setHoverPos({
left, top, w, h,
srcLeft: rect.left, srcTop: rect.top,
srcW: rect.width, srcH: rect.height,
});
}, 40);
}
function onPreviewLeave() {
if (hoverTimerRef.current) {
clearTimeout(hoverTimerRef.current);
hoverTimerRef.current = null;
}
setHoverPos(null);
}
// Clean the timer if the screen changes underneath us.
useEffect(() => () => {
if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
}, []);
/* Guardrails (2026-06-12): the popup previously dismissed ONLY on
mouseleave — if the pointer never crossed the source again (page
loaded under the cursor, scroll moved content beneath it) the
popup stuck open at a stale position. Escape and any scroll now
dismiss it; both listeners only exist while it's visible. */
useEffect(() => {
if (!hoverPos) return undefined;
const dismiss = () => setHoverPos(null);
const onKey = (e) => { if (e.key === 'Escape') dismiss(); };
window.addEventListener('keydown', onKey);
window.addEventListener('scroll', dismiss, { capture: true, passive: true });
return () => {
window.removeEventListener('keydown', onKey);
window.removeEventListener('scroll', dismiss, { capture: true });
};
}, [hoverPos]);
/* Fire the spring-physics entrance the moment the popup mounts.
useLayoutEffect (not useEffect) so the animation kicks BEFORE
the browser paints — otherwise the first frame shows the popup
in its final state and the animation looks like it starts a
frame late. Reads the source rect + destination rect from
hoverPos and constructs the FLIP-from-source transform. */
React.useLayoutEffect(() => {
if (!hoverPos || !popupRef.current) return;
if (!window.AquaOSSpring) return;
const el = popupRef.current;
const tx = hoverPos.srcLeft - hoverPos.left;
const ty = hoverPos.srcTop - hoverPos.top;
const sx = hoverPos.srcW / hoverPos.w;
const sy = hoverPos.srcH / hoverPos.h;
window.AquaOSSpring.animate(el, [
{
transform: `translate(${tx}px, ${ty}px) scale(${sx}, ${sy})`,
opacity: 0,
},
{
transform: 'translate(0, 0) scale(1, 1)',
opacity: 1,
},
], { spring: 'snappy' });
}, [hoverPos]);
/* Inline form state for the screen-settings popup. Replaces the
"Edit screen settings…" button that previously chained out to a
separate EditScreenModal — per user feedback the settings popup
should be the one-stop control surface, not a menu of links to
other popups. Initialised from the screen prop when the popup
opens so the curator always sees the current values. */
const [ssName, setSsName] = useState('');
const [ssLocHint, setSsLocHint] = useState('');
const [ssOrient, setSsOrient] = useState('landscape');
const [ssRotate, setSsRotate] = useState('12');
const [ssTouch, setSsTouch] = useState(false);
const [ssZoneId, setSsZoneId] = useState('');
const [ssSizeId, setSsSizeId] = useState('43');
const [ssBusy, setSsBusy] = useState(false);
const [ssErr, setSsErr] = useState(null);
/* Live device control (Device tab) — drives POST /api/screens/command
(Fully Cloud). Sliders are "set" controls; we don't read brightness
back (no telemetry column), so they default to sensible values. */
const [dcBright, setDcBright] = useState(80);
const [dcVol, setDcVol] = useState(50);
const [dcBusy, setDcBusy] = useState(null);
const [dcFid, setDcFid] = useState(''); // manual Fully device id entry
/* Inline "are you sure?" rows for the irreversible actions
(restart, retire, migrate). Each one toggles a confirmation row
under the relevant button rather than firing window.confirm. */
const [confirmRestart, setConfirmRestart] = useState(false);
const [confirmRetire, setConfirmRetire] = useState(false);
const [confirmMigrate, setConfirmMigrate] = useState(false);
const [confirmDelete, setConfirmDelete] = useState(false);
useEffect(() => {
if (!settingsMenuOpen || !screen) return;
setSsName(screen.name || '');
setSsLocHint(screen.location_hint || '');
setSsOrient(screen.orientation || 'landscape');
setSsRotate(String(screen.auto_rotate_seconds || 12));
setSsTouch(!!screen.is_touch);
setSsZoneId(screen.zone_id || '');
setSsSizeId(dspResolvePresetId(screen));
setDcFid(screen.fully_device_id || '');
setSsBusy(false); setSsErr(null);
setConfirmRestart(false); setConfirmRetire(false); setConfirmMigrate(false);
setConfirmDelete(false);
// Admins re-open on Identity (the common "rename / re-zone" entry).
// Non-admins have no Identity tab, so land them on Device — the only
// tab they can see — rather than a blank pane.
setPopupTab((Auth.canManageOrg() || Auth.isSiteManager()) ? 'identity' : 'device');
}, [settingsMenuOpen, screen && screen.id]);
async function saveScreenSettings() {
// Validation runs against fields owned by the Identity tab. If the
// curator is on a different tab when they hit Save, the inline
// error inside Identity is hidden — so we also surface failures via
// the footer (rendered below) AND a toast, regardless of which tab
// is active. Toast covers the silent-validation-failure case.
if (!ssName.trim()) {
const msg = 'Display name is required — switch to Identity to fix it.';
setSsErr(msg);
setPopupTab('identity');
if (window.toast) (window.toast.error ? window.toast.error(msg) : window.toast(msg));
return;
}
const rot = Number(ssRotate);
if (!Number.isFinite(rot) || rot < 3 || rot > 600) {
const msg = 'Auto-rotate must be a number between 3 and 600 seconds.';
setSsErr(msg);
setPopupTab('identity');
if (window.toast) (window.toast.error ? window.toast.error(msg) : window.toast(msg));
return;
}
// Resolve the size preset → resolution. Custom leaves the field
// alone so we don't overwrite a curator-set native pixel grid.
// Portrait orientation swaps the dimensions so the kiosk knows
// the panel is rotated.
const preset = DSP_SIZE_PRESETS.find((p) => p.id === ssSizeId) || DSP_SIZE_PRESETS[0];
let presetW = preset.width;
let presetH = preset.height;
if (ssOrient === 'portrait' && presetW && presetH && presetW > presetH) {
[presetW, presetH] = [presetH, presetW];
}
setSsBusy(true); setSsErr(null);
try {
await apiFetch(`/api/screens/${screen.id}`, {
method: 'PUT',
body: JSON.stringify({
name: ssName.trim(),
orientation: ssOrient,
auto_rotate_seconds: rot,
is_touch: ssTouch ? 1 : 0,
// Only send zone when it differs from the current value.
...(ssZoneId && ssZoneId !== screen.zone_id ? { zone_id: ssZoneId } : {}),
// Only send resolution when the preset isn't 'custom'.
...(preset.id !== 'custom' && presetW && presetH
? { resolution_width: presetW, resolution_height: presetH }
: {}),
// v100: persist the exact inch size too — resolution alone is
// ambiguous (24/32/43 = 1080p; 55/65/75/85 = 4K), so without this
// the picker collapsed back to 43"/55" on reopen. Mirrors the
// detail-page Edit modal + the Register modal.
...(preset.id !== 'custom'
? { display_size_inches: parseInt(preset.id, 10) }
: {}),
}),
});
if (window.toast) window.toast.success
? window.toast.success('Screen updated')
: window.toast('Screen updated');
if (onChanged) onChanged();
setSettingsMenuOpen(false);
} catch (e) {
setSsErr(e.message);
} finally {
setSsBusy(false);
}
}
/* Live device command → POST /api/screens/command (Fully Cloud dispatch).
action ∈ on|off|reboot|restart|clearCache|brightness|volume|day|
evening|night. Returns targeted:0 when no device is linked to Fully
Cloud yet, which we surface rather than pretending it worked. */
async function dcCmd(action, value, label) {
if (!screen) return;
const tag = action + (value != null ? ':' + value : '');
setDcBusy(tag);
try {
const r = await apiFetch('/api/screens/command', {
method: 'POST',
body: JSON.stringify({ scope: 'screen', screen_id: screen.id, action, value }),
});
const queued = r && r.targeted === 0;
const msg = (label || action) + (queued ? ' — no live device linked yet' : ' sent');
if (window.toast) (window.toast.success ? window.toast.success(msg) : window.toast(msg));
} catch (e) {
const m = (label || action) + ' failed: ' + ((e && e.message) || e);
if (window.toast) (window.toast.error ? window.toast.error(m) : window.toast(m, 'error'));
} finally {
setDcBusy(null);
}
}
/* Manually set the Fully Cloud device id (paste from the Fully dashboard)
when the panel's JS interface won't auto-report it. PUT /api/screens/:id;
onChanged refreshes the row so the controls light up. */
async function saveFullyId() {
if (!screen) return;
try {
await apiFetch(`/api/screens/${screen.id}`, {
method: 'PUT',
body: JSON.stringify({ fully_device_id: (dcFid || '').trim() || null }),
});
if (window.toast) (window.toast.success ? window.toast.success('Fully device id saved') : window.toast('Saved'));
if (onChanged) onChanged();
} catch (e) {
const m = 'Save failed: ' + ((e && e.message) || e);
if (window.toast) (window.toast.error ? window.toast.error(m) : window.toast(m, 'error'));
}
}
/* Zone choices for the inline dropdown — filtered to the screen's
own site so the curator can't move the screen across sites here
(that's a separate flow). */
const ssZoneChoices = useMemo(() => {
if (!screen || !Array.isArray(zonesList)) return [];
const siteId = screen.site_id;
return siteId ? zonesList.filter((z) => z.site_id === siteId) : zonesList;
}, [screen, zonesList]);
if (!screen) return null;
const t = DSP_THEMES[screen.zone_theme] || DSP_THEMES.reef;
const portrait = screen.orientation === 'portrait';
return (