ekklesiaandClaude Opus 5.5
7c17282616
Activating a timeline from Playback left Timelines showing it as inactive, because each tab read its own stale copy of the channel groups; operators read that as activation not sticking. Tabs also mounted every panel afresh, so each switch flashed a spinner and collapsed the page before regrowing. Panels now share one stale-while-revalidate resource cache, and Playback follows the management realtime channel so Now showing tracks the wall. Deleting an image, a timeline, a slot, a source, or an audience happened on a single click; each is now a two-step in-place confirmation (DESIGN 21.3). The audience key was presented as a field to fill in. Audiences are now named in plain words, explained (images look the same for every audience), and the content key is derived from the name with an Advanced override. The roster labels signed-in browsers and lets an offline entry be removed after confirmation, so test tabs and retired screens no longer accumulate. The preview keeps nothing in the Dashboard origin's storage, and the narrow-screen notice no longer names the platform. Co-Authored-By: Claude Opus 5.5 <[email protected]>
32 lines
1.4 KiB
TypeScript
32 lines
1.4 KiB
TypeScript
import type { ReactElement, ReactNode } from "react";
|
|
|
|
/**
|
|
* The narrowest viewport the Signage management UI is designed for.
|
|
*
|
|
* Signage's dashboard is a timeline editor, a slot table, a live preview, and a display roster shown
|
|
* together. Compressing that into a phone would not make it usable, it would make it a different
|
|
* product — the mobile application this release deliberately does not build. So below this width the
|
|
* operator is told plainly where to go instead of being handed a broken layout.
|
|
*
|
|
* The switch is a CSS media query rather than a measured width in JavaScript: both branches are
|
|
* always in the DOM and always in the accessibility tree, so a screen reader and a test find the
|
|
* same content regardless of how the environment reports its viewport.
|
|
*/
|
|
export const SIGNAGE_MIN_DESKTOP_WIDTH_PX = 1024;
|
|
|
|
export function DesktopOnly({ children }: { readonly children: ReactNode }): ReactElement {
|
|
return (
|
|
<>
|
|
<div className="signage-narrow-notice" data-testid="signage-narrow-notice" role="note">
|
|
<h2 className="signage-narrow-notice__title">Signage needs a desktop screen</h2>
|
|
<p className="signage-narrow-notice__body">
|
|
{`Open this page on a screen at least ${SIGNAGE_MIN_DESKTOP_WIDTH_PX} pixels wide to manage timelines, images, displays, and playback.`}
|
|
</p>
|
|
</div>
|
|
<div className="signage-desktop" data-testid="signage-desktop">
|
|
{children}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|