Zayin/Signage
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 4 Wiki Activity

fix: Stage 0 Signage production readiness #18

Open
ekklesia-bot wants to merge 8 commits from stage0/signage-production-readiness into main
pull from: stage0/signage-production-readiness
merge into: :main
Conversation 0 Commits 8 Files Changed 34
+3446 -3034
16 changed files with 3446 additions and 3034 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7c17282616 - Show all commits
src/browser/desktop-gate.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export function DesktopOnly({ children }: { readonly children: ReactNode }): Rea
<div className="signage-narrow-notice" data-testid="signage-narrow-notice" role="note"> <div className="signage-narrow-notice" data-testid="signage-narrow-notice" role="note">
<h2 className="signage-narrow-notice__title">Signage needs a desktop screen</h2> <h2 className="signage-narrow-notice__title">Signage needs a desktop screen</h2>
<p className="signage-narrow-notice__body"> <p className="signage-narrow-notice__body">
{`Open the Ekklesia Dashboard on a display at least ${SIGNAGE_MIN_DESKTOP_WIDTH_PX} pixels wide to manage timelines, images, channels, and playback.`} {`Open this page on a screen at least ${SIGNAGE_MIN_DESKTOP_WIDTH_PX} pixels wide to manage timelines, images, displays, and playback.`}
</p> </p>
</div> </div>
<div className="signage-desktop" data-testid="signage-desktop"> <div className="signage-desktop" data-testid="signage-desktop">
src/ui/SignageDashboard.tsx
+165 -168
View File
@@ -1,9 +1,9 @@
import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk"; import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
import { EkklesiaUiStyles, EmptyState, PageHeader, Tabs } from "@ekklesia/ui"; import { EkklesiaUiStyles, EmptyState, PageHeader, Tabs } from "@ekklesia/ui";
import { type ReactElement, useMemo, useState } from "react"; import { type ReactElement, useContext, useMemo, useState } from "react";
import { DesktopOnly } from "../browser/desktop-gate.js"; import { DesktopOnly } from "../browser/desktop-gate.js";
import { createSignageApi } from "./api.js"; import { createSignageApi } from "./api.js";
import { useResource } from "./hooks.js"; import { createResourceCache, ResourceCacheContext, useResource } from "./hooks.js";
import { DisplaysPanel } from "./panels/DisplaysPanel.js"; import { DisplaysPanel } from "./panels/DisplaysPanel.js";
import { ImagesPanel } from "./panels/ImagesPanel.js"; import { ImagesPanel } from "./panels/ImagesPanel.js";
import { PlaybackPanel } from "./panels/PlaybackPanel.js"; import { PlaybackPanel } from "./panels/PlaybackPanel.js";
@@ -22,175 +22,172 @@ import type { ChannelGroupView, SettingsResponse } from "./types.js";
* Permission checks here decide what an operator is *offered*. The server decides what happens: a * Permission checks here decide what an operator is *offered*. The server decides what happens: a
* hidden button is a courtesy, and every route is enforced regardless of what this believes. * hidden button is a courtesy, and every route is enforced regardless of what this believes.
*/ */
export function SignageDashboard({ export function SignageDashboard(props: {
context, readonly context: ModuleUiHostContext;
copyText, readonly copyText: (value: string) => Promise<void>;
}: {
readonly context: ModuleUiHostContext;
readonly copyText: (value: string) => Promise<void>;
}): ReactElement { }): ReactElement {
const api = useMemo(() => createSignageApi(context.api), [context.api]); // One cache for the life of this screen: everything the panels have loaded, shared between them.
// Read before the resources below, so a viewer who may not see Signage at all asks for nothing. const [cache] = useState(createResourceCache);
// A hidden screen is a usability choice; the server is what actually refuses, and making a return (
// request it will certainly refuse is noise in a log rather than security. <ResourceCacheContext.Provider value={cache}>
const mayView = context.permissions.has("signage.view"); <SignageWorkspace {...props} />
const settings = useResource( </ResourceCacheContext.Provider>
() => );
mayView }
? api.get<SettingsResponse>("settings")
: Promise.resolve(undefined),
[mayView],
);
const groups = useResource(
() =>
mayView
? api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups")
: Promise.resolve(undefined),
[mayView],
);
const [tab, setTab] = useState("playback");
const [groupId, setGroupId] = useState<string | undefined>(undefined);
const mayManageAssets = context.permissions.has("signage.assets.manage"); function SignageWorkspace({
const mayManageTimelines = context.permissions.has( context,
"signage.timelines.manage", copyText,
); }: {
const mayControl = context.permissions.has("signage.playback.control"); readonly context: ModuleUiHostContext;
const mayManageDisplays = context.permissions.has("signage.displays.manage"); readonly copyText: (value: string) => Promise<void>;
}): ReactElement {
const api = useMemo(() => createSignageApi(context.api), [context.api]);
const cache = useContext(ResourceCacheContext);
// Read before the resources below, so a viewer who may not see Signage at all asks for nothing.
// A hidden screen is a usability choice; the server is what actually refuses, and making a
// request it will certainly refuse is noise in a log rather than security.
const mayView = context.permissions.has("signage.view");
const settings = useResource(
() => (mayView ? api.get<SettingsResponse>("settings") : Promise.resolve(undefined)),
[mayView],
mayView ? "settings" : undefined,
);
const groups = useResource(
() =>
mayView
? api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups")
: Promise.resolve(undefined),
[mayView],
mayView ? "channel-groups" : undefined,
);
const [tab, setTab] = useState("playback");
const [groupId, setGroupId] = useState<string | undefined>(undefined);
if (!mayView) { const mayManageAssets = context.permissions.has("signage.assets.manage");
return ( const mayManageTimelines = context.permissions.has("signage.timelines.manage");
<EmptyState const mayControl = context.permissions.has("signage.playback.control");
description="Ask an administrator for the signage.view permission." const mayManageDisplays = context.permissions.has("signage.displays.manage");
title="No access to Signage"
/>
);
}
const selectedGroupId = if (!mayView) {
groupId ?? return (
(groups.state.status === "ready" <EmptyState
? groups.state.value?.groups[0]?.id description="Ask an administrator for the signage.view permission."
: undefined); title="No access to Signage"
const selectedGroup = />
groups.state.status === "ready" );
? groups.state.value?.groups.find( }
(candidate) => candidate.id === selectedGroupId,
)
: undefined;
return ( const selectedGroupId =
<> groupId ?? (groups.state.status === "ready" ? groups.state.value?.groups[0]?.id : undefined);
<EkklesiaUiStyles /> const selectedGroup =
<DesktopOnly> groups.state.status === "ready"
<PageHeader ? groups.state.value?.groups.find((candidate) => candidate.id === selectedGroupId)
description="Plan visual content, operate playback, and keep every screen connected." : undefined;
eyebrow="Media"
title="Signage" return (
/> <>
{renderLoadable( <EkklesiaUiStyles />
settings.state, <DesktopOnly>
(loaded) => <PageHeader
loaded === undefined ? undefined : ( description="Plan visual content, operate playback, and keep every screen connected."
<div className="signage-workspace"> eyebrow="Media"
<Tabs title="Signage"
label="Signage sections" />
onSelect={setTab} {renderLoadable(
selectedId={tab} settings.state,
tabs={[ (loaded) =>
{ loaded === undefined ? undefined : (
content: ( <div className="signage-workspace">
<PlaybackPanel <Tabs
api={api} label="Signage sections"
canControl={mayControl} onSelect={setTab}
context={context} selectedId={tab}
groupId={selectedGroupId} tabs={[
onGroupChange={setGroupId} {
settings={loaded} content: (
/> <PlaybackPanel
), api={api}
id: "playback", canControl={mayControl}
label: "Playback", context={context}
}, groupId={selectedGroupId}
{ onGroupChange={setGroupId}
content: ( settings={loaded}
<TimelinesPanel />
{...(selectedGroup ),
? { id: "playback",
activeGroupName: selectedGroup.name, label: "Playback",
activeTimelineId: },
selectedGroup.playback.activeTimelineId, {
} content: (
: {})} <TimelinesPanel
api={api} {...(selectedGroup
canManage={mayManageTimelines} ? {
onActivate={ activeGroupName: selectedGroup.name,
mayControl && selectedGroupId !== undefined activeTimelineId: selectedGroup.playback.activeTimelineId,
? async (timelineId) => { }
await api.send( : {})}
"POST", api={api}
`playback/${selectedGroupId}/activate`, canManage={mayManageTimelines}
{ onActivate={
timelineId, mayControl && selectedGroupId !== undefined
when: "now", ? async (timelineId) => {
}, await api.send("POST", `playback/${selectedGroupId}/activate`, {
); timelineId,
groups.reload(); when: "now",
setTab("playback"); });
} // Playback opens on what is now true, not on the
: undefined // timeline it was showing before.
} cache?.write(
settings={loaded} `playback/${selectedGroupId}`,
/> await api.get(`playback/${selectedGroupId}`),
), );
id: "timelines", groups.reload();
label: "Timelines", setTab("playback");
}, }
{ : undefined
content: ( }
<ImagesPanel settings={loaded}
api={api} />
canManage={mayManageAssets} ),
settings={loaded} id: "timelines",
/> label: "Timelines",
), },
id: "images", {
label: "Images", content: (
}, <ImagesPanel api={api} canManage={mayManageAssets} settings={loaded} />
{ ),
content: ( id: "images",
<DisplaysPanel label: "Images",
api={api} },
canManage={mayManageDisplays} {
copyText={copyText} content: (
displaySetupUrl={context.display?.url} <DisplaysPanel
onGroupsChanged={() => { api={api}
setGroupId(undefined); canManage={mayManageDisplays}
groups.reload(); copyText={copyText}
}} displaySetupUrl={context.display?.url}
/> onGroupsChanged={() => {
), setGroupId(undefined);
id: "displays", groups.reload();
label: "Displays", }}
}, />
{ ),
content: ( id: "displays",
<ProvidersPanel label: "Displays",
api={api} },
context={context} {
settings={loaded} content: <ProvidersPanel api={api} context={context} settings={loaded} />,
/> id: "providers",
), label: "Providers",
id: "providers", },
label: "Providers", ]}
}, />
]} </div>
/> ),
</div> { label: "Loading Signage…", onRetry: settings.reload },
), )}
{ label: "Loading Signage…", onRetry: settings.reload }, </DesktopOnly>
)} </>
</DesktopOnly> );
</>
);
} }
src/ui/hooks.ts
+71 -4
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
import { type SignageApiFailure, SignageRequestError } from "./api.js"; import { type SignageApiFailure, SignageRequestError } from "./api.js";
/** /**
@@ -21,15 +21,76 @@ export interface Resource<Value> {
reload(): void; reload(): void;
} }
/**
* The last value each Signage resource loaded, shared by every panel on the screen.
*
* The tabs mount only the selected panel, so without this every tab switch threw its data away,
* flashed a spinner, and collapsed the page to its height before growing again — the "jumping" an
* operator saw. It also let two panels disagree: activating a timeline from Playback left Timelines
* showing the old one as inactive until a reload. Now a remounted panel starts from what was last
* known and refreshes quietly, and a reload anywhere updates every panel reading the same resource.
*/
export interface ResourceCache {
read(key: string): { readonly value: unknown } | undefined;
write(key: string, value: unknown): void;
subscribe(key: string, listener: (value: unknown) => void): () => void;
}
export function createResourceCache(): ResourceCache {
const values = new Map<string, { readonly value: unknown }>();
const listeners = new Map<string, Set<(value: unknown) => void>>();
return {
read: (key) => values.get(key),
subscribe(key, listener) {
const set = listeners.get(key) ?? new Set();
set.add(listener);
listeners.set(key, set);
return () => {
set.delete(listener);
if (set.size === 0) {
listeners.delete(key);
}
};
},
write(key, value) {
values.set(key, { value });
for (const listener of [...(listeners.get(key) ?? [])]) {
listener(value);
}
},
};
}
export const ResourceCacheContext = createContext<ResourceCache | undefined>(undefined);
export function useResource<Value>( export function useResource<Value>(
load: () => Promise<Value>, load: () => Promise<Value>,
dependencies: readonly unknown[], dependencies: readonly unknown[],
/** Shares this resource with every other panel that names the same key. */
key?: string,
): Resource<Value> { ): Resource<Value> {
const [state, setState] = useState<Loadable<Value>>({ status: "loading" }); const cache = useContext(ResourceCacheContext);
const cached = key === undefined ? undefined : cache?.read(key);
const [state, setState] = useState<Loadable<Value>>(
cached === undefined
? { status: "loading" }
: { status: "ready", value: cached.value as Value },
);
const generation = useRef(0); const generation = useRef(0);
const loadRef = useRef(load); const loadRef = useRef(load);
loadRef.current = load; loadRef.current = load;
useEffect(() => {
if (key === undefined || !cache) {
return;
}
const current = cache.read(key);
if (current !== undefined) {
setState({ status: "ready", value: current.value as Value });
}
return cache.subscribe(key, (value) => setState({ status: "ready", value: value as Value }));
}, [cache, key]);
const run = useCallback(() => { const run = useCallback(() => {
generation.current += 1; generation.current += 1;
const token = generation.current; const token = generation.current;
@@ -38,7 +99,13 @@ export function useResource<Value>(
.then((value) => { .then((value) => {
// A response from a request the panel has already moved on from must never overwrite a // A response from a request the panel has already moved on from must never overwrite a
// newer one. // newer one.
if (token === generation.current) { if (token !== generation.current) {
return;
}
if (key !== undefined && cache) {
// Every panel subscribed to this key, including this one, is updated by the write.
cache.write(key, value);
} else {
setState({ status: "ready", value }); setState({ status: "ready", value });
} }
}) })
@@ -58,7 +125,7 @@ export function useResource<Value>(
status: "failed", status: "failed",
}); });
}); });
}, []); }, [cache, key]);
// The caller's dependency list is spread deliberately: a resource reloads when *its* inputs // The caller's dependency list is spread deliberately: a resource reloads when *its* inputs
// change, which is the whole reason this takes one. // change, which is the whole reason this takes one.
src/ui/index.tsx
+18 -20
View File
@@ -14,24 +14,22 @@ import ownStyles from "./styles.css";
* rather than bundled (ADR 0039). * rather than bundled (ADR 0039).
*/ */
export default defineModuleUi({ export default defineModuleUi({
id: "signage", id: "signage",
version: "0.1.4", version: "0.1.4",
styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`, styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`,
mount(container, context) { mount(container, context) {
const root = createRoot(container); const root = createRoot(container);
root.render( root.render(
<SignageDashboard <SignageDashboard
context={context} context={context}
copyText={async (value) => { copyText={async (value) => {
if (globalThis.navigator.clipboard === undefined) { if (globalThis.navigator.clipboard === undefined) {
throw new Error( throw new Error("Clipboard access is not available in this browser.");
"Clipboard access is not available in this browser.", }
); await globalThis.navigator.clipboard.writeText(value);
} }}
await globalThis.navigator.clipboard.writeText(value); />,
}} );
/>, return () => root.unmount();
); },
return () => root.unmount();
},
}); });
src/ui/panels/DisplaysPanel.tsx
+503 -536
View File
File diff suppressed because it is too large Load Diff
src/ui/panels/ImagesPanel.tsx
+14 -8
View File
@@ -9,7 +9,7 @@ import {
import type { SignageApi } from "../api.js"; import type { SignageApi } from "../api.js";
import { useAction, useResource } from "../hooks.js"; import { useAction, useResource } from "../hooks.js";
import type { ImageRecord, SettingsResponse } from "../types.js"; import type { ImageRecord, SettingsResponse } from "../types.js";
import { FailureNote, formatInstant, renderLoadable } from "./shared.js"; import { ConfirmButton, FailureNote, formatInstant, renderLoadable } from "./shared.js";
/** /**
* The native image library and its upload queue. * The native image library and its upload queue.
@@ -28,7 +28,11 @@ export function ImagesPanel({
readonly settings: SettingsResponse; readonly settings: SettingsResponse;
readonly canManage: boolean; readonly canManage: boolean;
}): ReactElement { }): ReactElement {
const images = useResource(() => api.get<{ images: readonly ImageRecord[] }>("images"), []); const images = useResource(
() => api.get<{ images: readonly ImageRecord[] }>("images"),
[],
"images",
);
const [uploads, setUploads] = useState<readonly UploadItem[]>([]); const [uploads, setUploads] = useState<readonly UploadItem[]>([]);
const queueRef = useRef<UploadQueue | undefined>(undefined); const queueRef = useRef<UploadQueue | undefined>(undefined);
const [renaming, setRenaming] = useState<{ id: string; value: string } | undefined>(undefined); const [renaming, setRenaming] = useState<{ id: string; value: string } | undefined>(undefined);
@@ -204,13 +208,15 @@ export function ImagesPanel({
Rename Rename
</Button> </Button>
)} )}
<Button <ConfirmButton
confirmLabel="Delete this image"
disabled={remove.pending} disabled={remove.pending}
onClick={() => remove.run(() => api.send("DELETE", `images/${image.id}`))} label="Delete"
variant="danger" onConfirm={() =>
> remove.run(() => api.send("DELETE", `images/${image.id}`))
Delete }
</Button> testId={`signage-image-delete-${image.id}`}
/>
</div> </div>
) : undefined} ) : undefined}
</li> </li>
src/ui/panels/PlaybackPanel.tsx
+326 -331
View File
@@ -1,29 +1,16 @@
import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk"; import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
import { import { ActionBar, Badge, Button, EmptyState, Field, Panel, Select } from "@ekklesia/ui";
ActionBar, import { type ReactElement, useEffect, useRef, useState } from "react";
Badge,
Button,
EmptyState,
Field,
Panel,
Select,
} from "@ekklesia/ui";
import { type ReactElement, useState } from "react";
import type { SignageApi } from "../api.js"; import type { SignageApi } from "../api.js";
import { useAction, useResource, useTick } from "../hooks.js"; import { useAction, useResource, useTick } from "../hooks.js";
import type { import type {
ChannelGroupView, ChannelGroupView,
PlaybackDetailView, PlaybackDetailView,
SettingsResponse, SettingsResponse,
TimelineSummary, TimelineSummary,
} from "../types.js"; } from "../types.js";
import { PreviewPanel } from "./PreviewPanel.js"; import { PreviewPanel } from "./PreviewPanel.js";
import { import { FailureNote, formatDuration, formatInstant, renderLoadable } from "./shared.js";
FailureNote,
formatDuration,
formatInstant,
renderLoadable,
} from "./shared.js";
/** /**
* Live transport for one channel group. * Live transport for one channel group.
@@ -33,325 +20,333 @@ import {
* button, and neither can produce a state the other did not ask for. * button, and neither can produce a state the other did not ask for.
*/ */
export function PlaybackPanel({ export function PlaybackPanel({
api, api,
context, context,
settings, settings,
canControl, canControl,
groupId, groupId,
onGroupChange, onGroupChange,
}: { }: {
readonly api: SignageApi; readonly api: SignageApi;
readonly context: ModuleUiHostContext; readonly context: ModuleUiHostContext;
readonly settings: SettingsResponse; readonly settings: SettingsResponse;
readonly canControl: boolean; readonly canControl: boolean;
readonly groupId: string | undefined; readonly groupId: string | undefined;
readonly onGroupChange: (groupId: string) => void; readonly onGroupChange: (groupId: string) => void;
}): ReactElement { }): ReactElement {
const groups = useResource( const groups = useResource(
() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"), () => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
[], [],
); "channel-groups",
const timelines = useResource( );
() => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"), const timelines = useResource(
[], () => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"),
); [],
const detail = useResource( "timelines",
() => );
groupId === undefined const detail = useResource(
? Promise.resolve(undefined) () =>
: api.get<PlaybackDetailView>(`playback/${groupId}`), groupId === undefined
[groupId], ? Promise.resolve(undefined)
); : api.get<PlaybackDetailView>(`playback/${groupId}`),
const command = useAction(() => { [groupId],
detail.reload(); groupId === undefined ? undefined : `playback/${groupId}`,
groups.reload(); );
}); const command = useAction(() => {
const [activateId, setActivateId] = useState(""); detail.reload();
const previewChannelId = groups.reload();
groups.state.status === "ready" });
? (groups.state.value.groups const [activateId, setActivateId] = useState("");
.find((group) => group.id === groupId) const previewChannelId =
?.channels.find((channel) => channel.isDefault)?.id ?? undefined) groups.state.status === "ready"
: undefined; ? (groups.state.value.groups
// A one-second tick so the remaining time counts down rather than sitting still between refreshes. .find((group) => group.id === groupId)
useTick(1000); ?.channels.find((channel) => channel.isDefault)?.id ?? undefined)
: undefined;
// A one-second tick so the remaining time counts down rather than sitting still between refreshes.
useTick(1000);
useManagementUpdates(context, groupId, () => {
detail.reload();
groups.reload();
});
function run(path: string, body?: unknown): void { function run(path: string, body?: unknown): void {
if (groupId === undefined) { if (groupId === undefined) {
return; return;
} }
command.run(() => api.send("POST", `playback/${groupId}/${path}`, body)); command.run(() => api.send("POST", `playback/${groupId}/${path}`, body));
} }
function timelineLabel(timelineId: string): string { function timelineLabel(timelineId: string): string {
if (timelines.state.status !== "ready") { if (timelines.state.status !== "ready") {
return timelineId; return timelineId;
} }
return ( return (
timelines.state.value.timelines.find( timelines.state.value.timelines.find((timeline) => timeline.id === timelineId)?.name ??
(timeline) => timeline.id === timelineId, timelineId
)?.name ?? timelineId );
); }
}
return ( return (
<div className="signage-columns signage-playback-layout"> <div className="signage-columns signage-playback-layout">
<Panel <Panel
actions={renderLoadable( actions={renderLoadable(
groups.state, groups.state,
(value) => ( (value) => (
<Field label="Channel group"> <Field label="Channel group">
{(control) => ( {(control) => (
<Select <Select
{...control} {...control}
onChange={(event) => onGroupChange(event.target.value)} onChange={(event) => onGroupChange(event.target.value)}
value={groupId ?? ""} value={groupId ?? ""}
> >
{value.groups.map((group) => ( {value.groups.map((group) => (
<option key={group.id} value={group.id}> <option key={group.id} value={group.id}>
{group.name} {group.name}
</option> </option>
))} ))}
</Select> </Select>
)} )}
</Field> </Field>
), ),
{ label: "Loading groups…" }, { label: "Loading groups…" },
)} )}
description="One clock for every channel in the group." description="One clock for every channel in the group."
title="Playback" title="Playback"
> >
{groupId === undefined ? ( {groupId === undefined ? (
<EmptyState title="No channel group selected" /> <EmptyState title="No channel group selected" />
) : ( ) : (
renderLoadable( renderLoadable(
detail.state, detail.state,
(value) => (value) =>
value === undefined ? ( value === undefined ? (
<EmptyState title="No channel group selected" /> <EmptyState title="No channel group selected" />
) : ( ) : (
<div <div className="signage-playback" data-testid="signage-playback">
className="signage-playback" <div className="signage-playback__status">
data-testid="signage-playback" {value.snapshot.activeTimelineId === null ? undefined : (
> <Badge tone="success">
<div className="signage-playback__status"> {`Active: ${timelineLabel(value.snapshot.activeTimelineId)}`}
{value.snapshot.activeTimelineId === null ? undefined : ( </Badge>
<Badge tone="success"> )}
{`Active: ${timelineLabel(value.snapshot.activeTimelineId)}`} <Badge
</Badge> tone={
)} value.snapshot.transport === "playing"
<Badge ? "success"
tone={ : value.snapshot.transport === "idle"
value.snapshot.transport === "playing" ? "warning"
? "success" : "info"
: value.snapshot.transport === "idle" }
? "warning" >
: "info" {value.snapshot.transport}
} </Badge>
> {value.snapshot.blackout ? <Badge tone="danger">Blackout</Badge> : undefined}
{value.snapshot.transport} {value.current?.stale === true ? (
</Badge> <Badge tone="warning">Stale</Badge>
{value.snapshot.blackout ? ( ) : undefined}
<Badge tone="danger">Blackout</Badge> {value.current?.withdrawn === true ? (
) : undefined} <Badge tone="warning">Withdrawn</Badge>
{value.current?.stale === true ? ( ) : undefined}
<Badge tone="warning">Stale</Badge> {value.snapshot.pendingTimelineId === null ? undefined : (
) : undefined} <Badge tone="info">Activation queued</Badge>
{value.current?.withdrawn === true ? ( )}
<Badge tone="warning">Withdrawn</Badge> </div>
) : undefined}
{value.snapshot.pendingTimelineId === null ? undefined : (
<Badge tone="info">Activation queued</Badge>
)}
</div>
{value.current === null ? ( {value.current === null ? (
<EmptyState <EmptyState
description="Nothing is currently resolvable. A display shows its safe slate." description="Nothing is currently resolvable. A display shows its safe slate."
title="Nothing on screen" title="Nothing on screen"
/> />
) : ( ) : (
<section className="signage-playback__now"> <section className="signage-playback__now">
<h3>Now showing</h3> <h3>Now showing</h3>
<dl <dl className="signage-playback__current" data-testid="signage-current">
className="signage-playback__current" <dt>Provider</dt>
data-testid="signage-current" <dd>{value.current.providerId}</dd>
> <dt>Item</dt>
<dt>Provider</dt> <dd>{value.current.itemId}</dd>
<dd>{value.current.providerId}</dd> <dt>Renderer</dt>
<dt>Item</dt> <dd>{value.current.rendererContributionId ?? "—"}</dd>
<dd>{value.current.itemId}</dd> <dt>Duration</dt>
<dt>Renderer</dt> <dd>{formatDuration(value.current.durationMs)}</dd>
<dd>{value.current.rendererContributionId ?? "—"}</dd> <dt>Remaining</dt>
<dt>Duration</dt> <dd data-testid="signage-remaining">
<dd>{formatDuration(value.current.durationMs)}</dd> {value.snapshot.remainingMs === null
<dt>Remaining</dt> ? "—"
<dd data-testid="signage-remaining"> : formatDuration(value.snapshot.remainingMs)}
{value.snapshot.remainingMs === null </dd>
? "—" <dt>Started</dt>
: formatDuration(value.snapshot.remainingMs)} <dd>{formatInstant(value.current.startedAtMs, settings.timezone)}</dd>
</dd> </dl>
<dt>Started</dt> </section>
<dd> )}
{formatInstant(
value.current.startedAtMs,
settings.timezone,
)}
</dd>
</dl>
</section>
)}
{canControl ? ( {canControl ? (
<ActionBar <ActionBar
className="signage-playback__controls" className="signage-playback__controls"
data-testid="signage-controls" data-testid="signage-controls"
label="Playback controls" label="Playback controls"
> >
<Button <Button disabled={command.pending} onClick={() => run("previous")}>
disabled={command.pending} Previous
onClick={() => run("previous")} </Button>
> {value.snapshot.transport === "paused" ? (
Previous <Button
</Button> disabled={command.pending}
{value.snapshot.transport === "paused" ? ( onClick={() => run("resume")}
<Button variant="primary"
disabled={command.pending} >
onClick={() => run("resume")} Resume
variant="primary" </Button>
> ) : (
Resume <Button disabled={command.pending} onClick={() => run("pause")}>
</Button> Pause
) : ( </Button>
<Button )}
disabled={command.pending} <Button disabled={command.pending} onClick={() => run("next")}>
onClick={() => run("pause")} Next
> </Button>
Pause <Button
</Button> disabled={command.pending}
)} onClick={() => run("blackout", { on: !value.snapshot.blackout })}
<Button variant={value.snapshot.blackout ? "primary" : "secondary"}
disabled={command.pending} >
onClick={() => run("next")} {value.snapshot.blackout ? "End blackout" : "Blackout"}
> </Button>
Next {value.snapshot.staticAssetId === null ? undefined : (
</Button> <Button
<Button disabled={command.pending}
disabled={command.pending} onClick={() => run("static", { assetId: null })}
onClick={() => >
run("blackout", { on: !value.snapshot.blackout }) Release hold
} </Button>
variant={ )}
value.snapshot.blackout ? "primary" : "secondary" <Button disabled={command.pending} onClick={() => run("reload")}>
} Reload content
> </Button>
{value.snapshot.blackout ? "End blackout" : "Blackout"} </ActionBar>
</Button> ) : undefined}
{value.snapshot.staticAssetId === null ? undefined : (
<Button
disabled={command.pending}
onClick={() => run("static", { assetId: null })}
>
Release hold
</Button>
)}
<Button
disabled={command.pending}
onClick={() => run("reload")}
>
Reload content
</Button>
</ActionBar>
) : undefined}
{canControl ? ( {canControl ? (
<div className="signage-playback__activate"> <div className="signage-playback__activate">
{renderLoadable( {renderLoadable(
timelines.state, timelines.state,
(loaded) => ( (loaded) => (
<> <>
<Field label="Activate timeline"> <Field label="Activate timeline">
{(control) => ( {(control) => (
<Select <Select
{...control} {...control}
onChange={(event) => onChange={(event) => setActivateId(event.target.value)}
setActivateId(event.target.value) value={activateId}
} >
value={activateId} <option value="">Choose a timeline…</option>
> {loaded.timelines.map((timeline) => (
<option value="">Choose a timeline…</option> <option key={timeline.id} value={timeline.id}>
{loaded.timelines.map((timeline) => ( {timeline.name}
<option </option>
key={timeline.id} ))}
value={timeline.id} </Select>
> )}
{timeline.name} </Field>
</option> <Button
))} disabled={command.pending || activateId === ""}
</Select> onClick={() =>
)} run("activate", {
</Field> timelineId: activateId,
<Button when: "now",
disabled={command.pending || activateId === ""} })
onClick={() => }
run("activate", { variant="primary"
timelineId: activateId, >
when: "now", Now
}) </Button>
} <Button
variant="primary" disabled={command.pending || activateId === ""}
> onClick={() =>
Now run("activate", {
</Button> timelineId: activateId,
<Button when: "next-boundary",
disabled={command.pending || activateId === ""} })
onClick={() => }
run("activate", { >
timelineId: activateId, At next slot
when: "next-boundary", </Button>
}) </>
} ),
> { label: "Loading timelines…" },
At next slot )}
</Button> </div>
</> ) : undefined}
),
{ label: "Loading timelines…" },
)}
</div>
) : undefined}
{value.history.length === 0 ? undefined : ( {value.history.length === 0 ? undefined : (
<div className="signage-playback__history"> <div className="signage-playback__history">
<h4 className="signage-editor__subtitle"> <h4 className="signage-editor__subtitle">Recently played</h4>
Recently played <ul className="ek-list">
</h4> {value.history.slice(0, 8).map((entry) => (
<ul className="ek-list"> <li className="ek-list__item signage-row" key={entry.id}>
{value.history.slice(0, 8).map((entry) => ( <span className="signage-row__name">{entry.itemId}</span>
<li <span className="signage-playback__history-meta">
className="ek-list__item signage-row" {`${entry.providerId} · ${formatInstant(entry.startedAtMs, settings.timezone)}`}
key={entry.id} </span>
> </li>
<span className="signage-row__name"> ))}
{entry.itemId} </ul>
</span> </div>
<span className="signage-playback__history-meta"> )}
{`${entry.providerId} · ${formatInstant(entry.startedAtMs, settings.timezone)}`} </div>
</span> ),
</li> { label: "Loading playback…", onRetry: detail.reload },
))} )
</ul> )}
</div> <FailureNote failure={command.failure} />
)} </Panel>
</div>
),
{ label: "Loading playback…", onRetry: detail.reload },
)
)}
<FailureNote failure={command.failure} />
</Panel>
<PreviewPanel api={api} channelId={previewChannelId} context={context} /> <PreviewPanel api={api} channelId={previewChannelId} context={context} />
</div> </div>
); );
}
/**
* Follows Signage's management realtime channel, which carries revisions only (ADR 0005), and asks
* for fresh detail when this group's playback actually changed — so "Now showing" follows the wall
* instead of freezing until an operator presses something. One subscription per mounted panel,
* closed when the panel goes away.
*/
function useManagementUpdates(
context: ModuleUiHostContext,
groupId: string | undefined,
onChange: () => void,
): void {
const onChangeRef = useRef(onChange);
onChangeRef.current = onChange;
useEffect(() => {
if (groupId === undefined) {
return;
}
let seen: string | undefined;
const subscription = context.realtime.subscribe("management-state", {
onSnapshot: (payload) => observe(payload),
onUpdate: (payload) => observe(payload),
});
function observe(payload: unknown): void {
const groups = (payload as { groups?: unknown } | null)?.groups;
if (!Array.isArray(groups)) {
return;
}
const mine = groups.find((group: { groupId?: unknown }) => group?.groupId === groupId) as
| { revision?: unknown; selectionRevision?: unknown }
| undefined;
if (!mine) {
return;
}
const marker = `${String(mine.revision)}:${String(mine.selectionRevision)}`;
if (seen !== undefined && marker !== seen) {
onChangeRef.current();
}
seen = marker;
}
return () => subscription.close();
}, [context, groupId]);
} }
src/ui/panels/PreviewPanel.tsx
+11 -1
View File
@@ -2,6 +2,7 @@ import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
import { EmptyState, Panel } from "@ekklesia/ui"; import { EmptyState, Panel } from "@ekklesia/ui";
import { type ReactElement, useEffect, useRef } from "react"; import { type ReactElement, useEffect, useRef } from "react";
import { SignageSlate } from "../../browser/slate.js"; import { SignageSlate } from "../../browser/slate.js";
import { createMemoryMediaCache, createMemoryStore } from "../../browser/storage.js";
import { createDisplayController, type DisplayChannelStateView } from "../../display/controller.js"; import { createDisplayController, type DisplayChannelStateView } from "../../display/controller.js";
import type { SignageApi } from "../api.js"; import type { SignageApi } from "../api.js";
@@ -36,7 +37,16 @@ export function PreviewPanel({
return; return;
} }
let stopped = false; let stopped = false;
const controller = createDisplayController({ context, root, telemetry: false }); // The display's own rendering code, but nothing it keeps: a management browser is not a wall,
// so it persists no snapshot and caches no image bytes, and never restores one channel's last
// frame into another channel's preview.
const controller = createDisplayController({
context,
media: createMemoryMediaCache(),
root,
store: createMemoryStore(),
telemetry: false,
});
let handle: ReturnType<typeof setTimeout> | undefined; let handle: ReturnType<typeof setTimeout> | undefined;
async function pump(): Promise<void> { async function pump(): Promise<void> {
src/ui/panels/ProvidersPanel.tsx
+89 -102
View File
@@ -1,13 +1,13 @@
import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk"; import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
import { import {
Badge, Badge,
EmptyState, EmptyState,
Panel, Panel,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow, TableRow,
} from "@ekklesia/ui"; } from "@ekklesia/ui";
import type { ReactElement } from "react"; import type { ReactElement } from "react";
import type { SignageApi } from "../api.js"; import type { SignageApi } from "../api.js";
@@ -31,101 +31,88 @@ const SLIDE_RENDERER_CAPABILITY = "signage.slide-renderer";
* exactly that, which is the difference between "this is broken" and "this needs an update". * exactly that, which is the difference between "this is broken" and "this needs an update".
*/ */
export function ProvidersPanel({ export function ProvidersPanel({
api, api,
context, context,
settings, settings,
}: { }: {
readonly api: SignageApi; readonly api: SignageApi;
readonly context: ModuleUiHostContext; readonly context: ModuleUiHostContext;
readonly settings: SettingsResponse; readonly settings: SettingsResponse;
}): ReactElement { }): ReactElement {
const providers = useResource( const providers = useResource(
() => api.get<{ providers: readonly ProviderHealth[] }>("providers"), () => api.get<{ providers: readonly ProviderHealth[] }>("providers"),
[], [],
); "providers",
const published = new Set( );
context.contributions const published = new Set(
.list(SLIDE_RENDERER_CAPABILITY) context.contributions.list(SLIDE_RENDERER_CAPABILITY).map((contribution) => contribution.id),
.map((contribution) => contribution.id), );
);
return ( return (
<Panel <Panel
actions={ actions={<Badge tone="neutral">{`Contract ${settings.rendererInputVersion}`}</Badge>}
<Badge tone="neutral">{`Contract ${settings.rendererInputVersion}`}</Badge> description="Running content sources available to timelines."
} title="Content providers"
description="Running content sources available to timelines." >
title="Content providers" {renderLoadable(
> providers.state,
{renderLoadable( (value) =>
providers.state, value.providers.length === 0 ? (
(value) => <EmptyState
value.providers.length === 0 ? ( description="Signage works on its own with native images. Install a content module to add more."
<EmptyState title="No content providers registered"
description="Signage works on its own with native images. Install a content module to add more." />
title="No content providers registered" ) : (
/> <Table label="Provider health">
) : ( <TableHead>
<Table label="Provider health"> <TableRow>
<TableHead> <TableCell header>Provider</TableCell>
<TableRow> <TableCell header>Contract</TableCell>
<TableCell header>Provider</TableCell> <TableCell header>Renderer</TableCell>
<TableCell header>Contract</TableCell> <TableCell header>Health</TableCell>
<TableCell header>Renderer</TableCell> <TableCell header>Last success</TableCell>
<TableCell header>Health</TableCell> </TableRow>
<TableCell header>Last success</TableCell> </TableHead>
</TableRow> <TableBody>
</TableHead> {value.providers.map((provider) => {
<TableBody> const rendererPublished = published.has(provider.renderer.contributionId);
{value.providers.map((provider) => { const isNative = provider.renderer.contributionId === "signage.native-image";
const rendererPublished = published.has( return (
provider.renderer.contributionId, <TableRow key={provider.providerId}>
); <TableCell>
const isNative = <span className="signage-provider__id">{provider.providerId}</span>
provider.renderer.contributionId === "signage.native-image"; <span className="signage-provider__version">{`v${provider.providerVersion}`}</span>
return ( </TableCell>
<TableRow key={provider.providerId}> <TableCell>{provider.contractVersion}</TableCell>
<TableCell> <TableCell>
<span className="signage-provider__id"> {isNative ? (
{provider.providerId} <Badge tone="info">Built in</Badge>
</span> ) : rendererPublished ? (
<span className="signage-provider__version">{`v${provider.providerVersion}`}</span> <Badge tone="success">{provider.renderer.contributionId}</Badge>
</TableCell> ) : (
<TableCell>{provider.contractVersion}</TableCell> <Badge tone="warning">Renderer not published</Badge>
<TableCell> )}
{isNative ? ( </TableCell>
<Badge tone="info">Built in</Badge> <TableCell>
) : rendererPublished ? ( {provider.consecutiveFailures === 0 ? (
<Badge tone="success"> <Badge tone="success">Healthy</Badge>
{provider.renderer.contributionId} ) : (
</Badge> <Badge tone="danger">
) : ( {`${provider.consecutiveFailures} failures · ${provider.lastFailureCode ?? "unknown"}`}
<Badge tone="warning">Renderer not published</Badge> </Badge>
)} )}
</TableCell> </TableCell>
<TableCell> <TableCell>
{provider.consecutiveFailures === 0 ? ( {formatInstant(provider.lastSuccessAt, settings.timezone)}
<Badge tone="success">Healthy</Badge> </TableCell>
) : ( </TableRow>
<Badge tone="danger"> );
{`${provider.consecutiveFailures} failures · ${provider.lastFailureCode ?? "unknown"}`} })}
</Badge> </TableBody>
)} </Table>
</TableCell> ),
<TableCell> { label: "Loading providers…", onRetry: providers.reload },
{formatInstant( )}
provider.lastSuccessAt, </Panel>
settings.timezone, );
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
),
{ label: "Loading providers…", onRetry: providers.reload },
)}
</Panel>
);
} }
src/ui/panels/TimelinesPanel.tsx
+470 -525
View File
File diff suppressed because it is too large Load Diff
src/ui/panels/shared.tsx
+79 -2
View File
@@ -1,5 +1,5 @@
import { Badge, ErrorState, LoadingState } from "@ekklesia/ui"; import { Badge, Button, ErrorState, LoadingState } from "@ekklesia/ui";
import type { ReactElement, ReactNode } from "react"; import { type ReactElement, type ReactNode, useEffect, useState } from "react";
import type { SignageApiFailure } from "../api.js"; import type { SignageApiFailure } from "../api.js";
import type { Loadable } from "../hooks.js"; import type { Loadable } from "../hooks.js";
@@ -89,3 +89,80 @@ export function formatSince(atMs: number | null, nowMs: number): string {
export function OnlineBadge({ online }: { readonly online: boolean }): ReactElement { export function OnlineBadge({ online }: { readonly online: boolean }): ReactElement {
return <Badge tone={online ? "success" : "danger"}>{online ? "Online" : "Offline"}</Badge>; return <Badge tone={online ? "success" : "danger"}>{online ? "Online" : "Offline"}</Badge>;
} }
/** How long an armed destructive button waits for its second press before standing down. */
export const CONFIRM_RESET_MS = 6000;
/**
* A moderate destructive action, confirmed in place (DESIGN §21.3) — never with a browser dialog.
*
* The first press arms it: the button says plainly what will happen and a Cancel appears beside it.
* A second, deliberate press performs the action. Walking away, pressing Cancel, or Escape disarms
* it, so an armed button can never be left waiting for an accidental click.
*/
export function ConfirmButton({
label,
confirmLabel,
disabled,
onConfirm,
testId,
}: {
readonly label: string;
/** What the second press does, in words: "Delete this image", not "Are you sure?". */
readonly confirmLabel: string;
readonly disabled?: boolean;
readonly onConfirm: () => void;
readonly testId?: string;
}): ReactElement {
const [armed, setArmed] = useState(false);
useEffect(() => {
if (!armed) {
return;
}
const timer = setTimeout(() => setArmed(false), CONFIRM_RESET_MS);
return () => clearTimeout(timer);
}, [armed]);
if (!armed) {
return (
<Button
data-testid={testId}
disabled={disabled}
onClick={() => setArmed(true)}
variant="danger"
>
{label}
</Button>
);
}
return (
<fieldset
className="signage-confirm-inline"
onKeyDown={(event) => {
if (event.key === "Escape") {
setArmed(false);
}
}}
>
<Button
autoFocus
data-testid={testId === undefined ? undefined : `${testId}-confirm`}
disabled={disabled}
onClick={() => {
setArmed(false);
onConfirm();
}}
variant="danger"
>
{confirmLabel}
</Button>
<Button
data-testid={testId === undefined ? undefined : `${testId}-cancel`}
onClick={() => setArmed(false)}
variant="quiet"
>
Cancel
</Button>
</fieldset>
);
}
src/ui/styles.css
+422 -414
View File
File diff suppressed because it is too large Load Diff
tests/browser/management-ui.test.tsx
+758 -808
View File
File diff suppressed because it is too large Load Diff
tests/browser/stage0-management.test.tsx
+414
View File
@@ -0,0 +1,414 @@
// @vitest-environment happy-dom
import { readdirSync, readFileSync, statSync } from "node:fs";
import { join } from "node:path";
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it } from "vitest";
import { audienceKeyFor } from "../../src/ui/panels/DisplaysPanel.js";
import { SignageDashboard } from "../../src/ui/SignageDashboard.js";
import {
createFakeHost,
FAKE_SETTINGS,
type FakeHostRoute,
jsonResponse,
} from "./support/fake-host.js";
/**
* Stage 0 production-readiness regressions for the management screen.
*
* Each case is a defect an operator met: an activation that looked lost after changing tabs, a
* screen that collapsed to a spinner on every tab switch, deletions with no confirmation, an
* internal key presented as something to fill in, and test displays nobody could remove.
*/
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
let container: HTMLElement;
let root: Root;
beforeEach(() => {
container = document.createElement("div");
document.body.append(container);
root = createRoot(container);
});
afterEach(async () => {
await act(async () => root.unmount());
container.remove();
});
async function settle(): Promise<void> {
for (let index = 0; index < 8; index += 1) {
await act(async () => {
await new Promise((resolve) => setTimeout(resolve, 0));
});
}
}
async function click(element: Element | null | undefined): Promise<void> {
if (!element) {
throw new Error("Expected an element to click.");
}
await act(async () => (element as HTMLElement).click());
await settle();
}
function button(label: string): HTMLButtonElement | undefined {
return [...container.querySelectorAll("button")].find(
(candidate) => candidate.textContent?.trim() === label,
) as HTMLButtonElement | undefined;
}
function tab(label: string): Element | undefined {
return [...container.querySelectorAll("[role='tab']")].find(
(candidate) => candidate.textContent === label,
);
}
async function choose(select: HTMLSelectElement, value: string): Promise<void> {
const setter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")?.set;
await act(async () => {
setter?.call(select, value);
select.dispatchEvent(new Event("change", { bubbles: true }));
});
}
async function type(input: HTMLInputElement, value: string): Promise<void> {
const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
await act(async () => {
setter?.call(input, value);
input.dispatchEvent(new Event("input", { bubbles: true }));
});
}
function timeline(id: string, name: string) {
return {
description: null,
eligibleFrom: null,
eligibleUntil: null,
id,
name,
revision: 1,
updatedAt: "2026-10-01T15:00:00.000Z",
};
}
function group(activeTimelineId: string | null) {
return {
channels: [{ id: "chan-1", isDefault: true, key: "default", name: "Default" }],
id: "group-1",
name: "Main",
playback: {
activeTimelineId,
blackout: false,
currentSelectionId: null,
currentSlotId: null,
deadlineAtMs: null,
groupId: "group-1",
pendingTimelineId: null,
remainingMs: null,
revision: activeTimelineId === null ? 1 : 2,
scheduledActivationAtMs: null,
scheduledTimelineId: null,
selectionRevision: null,
serverNowMs: 1_700_000_000_000,
startedAtMs: null,
staticAssetId: null,
transport: activeTimelineId === null ? ("idle" as const) : ("playing" as const),
},
revision: 1,
};
}
/** A small, stateful Signage backend: activation really changes what later reads return. */
function backend(extra: readonly FakeHostRoute[] = []) {
let active: string | null = null;
const sent: string[] = [];
const routes: FakeHostRoute[] = [
...extra,
{ method: "GET", path: "settings", respond: () => jsonResponse(FAKE_SETTINGS) },
{
method: "GET",
path: "channel-groups",
respond: () => jsonResponse({ groups: [group(active)] }),
},
{
method: "GET",
path: "timelines",
respond: () =>
jsonResponse({
timelines: [timeline("timeline-1", "Sunday"), timeline("timeline-2", "Easter")],
}),
},
{ method: "GET", path: "providers", respond: () => jsonResponse({ providers: [] }) },
{ method: "GET", path: "images", respond: () => jsonResponse({ images: [] }) },
{ method: "GET", path: "viewers", respond: () => jsonResponse({ viewers: [] }) },
{
method: "GET",
path: "playback/group-1",
respond: () => jsonResponse({ current: null, history: [], snapshot: group(active).playback }),
},
{ method: "GET", path: /^channels\/.*\/display-state$/u, respond: () => jsonResponse({}) },
{
method: "POST",
path: "playback/group-1/activate",
respond: ({ init }) => {
active = (JSON.parse(String(init?.body)) as { timelineId: string }).timelineId;
sent.push(`activate ${active}`);
return jsonResponse(group(active).playback);
},
},
];
return { routes, sent };
}
function mount(host: ReturnType<typeof createFakeHost>) {
return act(async () => {
root.render(<SignageDashboard context={host.context} copyText={() => Promise.resolve()} />);
});
}
describe("Signage dashboard — Stage 0 regressions", () => {
it("shows a timeline activated on Playback as active on Timelines too", async () => {
const server = backend();
const host = createFakeHost({
permissions: ["signage.view", "signage.playback.control", "signage.timelines.manage"],
routes: server.routes,
});
await mount(host);
await settle();
const activate = [...container.querySelectorAll("select")].find((select) =>
[...select.options].some((option) => option.textContent === "Choose a timeline…"),
) as HTMLSelectElement;
await choose(activate, "timeline-2");
await click(button("Now"));
expect(server.sent).toEqual(["activate timeline-2"]);
await click(tab("Timelines"));
const row = [...container.querySelectorAll("tr")].find((candidate) =>
candidate.textContent?.includes("Easter"),
);
expect(row?.textContent).toContain("Active in Main");
expect(container.querySelector("tr")?.parentElement).not.toBeNull();
});
it("keeps what it loaded when switching tabs, instead of flashing back to a loading state", async () => {
let slow = false;
const server = backend([
{
method: "GET",
path: "timelines",
respond: () =>
slow
? new Promise<Response>(() => undefined)
: jsonResponse({ timelines: [timeline("timeline-1", "Sunday")] }),
},
]);
const host = createFakeHost({ permissions: ["signage.view"], routes: server.routes });
await mount(host);
await settle();
await click(tab("Timelines"));
expect(container.textContent).toContain("Sunday");
// The next load never finishes. Coming back must still show the last known list.
slow = true;
await click(tab("Images"));
await click(tab("Timelines"));
expect(container.textContent).toContain("Sunday");
expect(container.textContent).not.toContain("Loading timelines…");
});
it("deletes an image only after a second, deliberate press, and Cancel stands it down", async () => {
const deleted: string[] = [];
const image = {
byteSize: 1000,
contentType: "image/png",
createdAt: "2026-10-01T15:00:00.000Z",
displayName: "Welcome",
expiresAt: null,
height: 1080,
id: "image-1",
originalFilename: "welcome.png",
renditions: [],
status: "ready",
width: 1920,
};
const server = backend([
{ method: "GET", path: "images", respond: () => jsonResponse({ images: [image] }) },
{
method: "DELETE",
path: "images/image-1",
respond: ({ path }) => {
deleted.push(path);
return new Response(null, { status: 204 });
},
},
]);
const host = createFakeHost({
permissions: ["signage.view", "signage.assets.manage"],
routes: server.routes,
});
await mount(host);
await settle();
await click(tab("Images"));
await click(container.querySelector("[data-testid='signage-image-delete-image-1']"));
expect(deleted).toEqual([]);
expect(button("Delete this image")).toBeDefined();
await click(container.querySelector("[data-testid='signage-image-delete-image-1-cancel']"));
expect(button("Delete this image")).toBeUndefined();
expect(deleted).toEqual([]);
await click(container.querySelector("[data-testid='signage-image-delete-image-1']"));
await click(container.querySelector("[data-testid='signage-image-delete-image-1-confirm']"));
expect(deleted).toEqual(["images/image-1"]);
});
it("adds an audience from its name alone, deriving the content key", async () => {
const posted: unknown[] = [];
const server = backend([
{
method: "POST",
path: "channel-groups/group-1/channels",
respond: ({ init }) => {
posted.push(JSON.parse(String(init?.body)));
return jsonResponse({}, 201);
},
},
]);
const host = createFakeHost({
permissions: ["signage.view", "signage.displays.manage"],
routes: server.routes,
});
await mount(host);
await settle();
await click(tab("Displays"));
const name = container.querySelector("input[placeholder='Online']") as HTMLInputElement;
await type(name, "Watching Online");
await click(button("Add audience"));
expect(posted).toEqual([{ key: "watching-online", name: "Watching Online" }]);
});
it("labels a signed-in browser and removes an offline entry only after confirmation", async () => {
const removed: string[] = [];
const viewer = {
cachedAssetCount: 0,
channelId: "chan-1",
deviceId: null,
id: "viewer-1",
lastError: null,
lastSeenAtMs: Date.now() - 600_000,
name: "New display",
offlineReady: false,
online: false,
reportedContributionId: null,
reportedProviderId: null,
reportedSelectionId: null,
reportedTimelineId: null,
};
const server = backend([
{ method: "GET", path: "viewers", respond: () => jsonResponse({ viewers: [viewer] }) },
{
method: "DELETE",
path: "viewers/viewer-1",
respond: ({ path }) => {
removed.push(path);
return new Response(null, { status: 204 });
},
},
]);
const host = createFakeHost({
permissions: ["signage.view", "signage.displays.manage"],
routes: server.routes,
});
await mount(host);
await settle();
await click(tab("Displays"));
expect(container.textContent).toContain("Signed-in browser");
await click(container.querySelector("[data-testid='signage-display-remove-viewer-1']"));
expect(removed).toEqual([]);
await click(container.querySelector("[data-testid='signage-display-remove-viewer-1-confirm']"));
expect(removed).toEqual(["viewers/viewer-1"]);
});
it("follows playback changes on the management channel, and stops when Playback is left", async () => {
const subscriptions: { closed: boolean; onUpdate: ((payload: unknown) => void) | undefined }[] =
[];
const server = backend();
const host = createFakeHost({ permissions: ["signage.view"], routes: server.routes });
Object.assign(host.context.realtime, {
subscribe(channel: string, handlers: { onUpdate?: (payload: unknown) => void }) {
const entry = { closed: false, onUpdate: handlers.onUpdate };
if (channel === "management-state") {
subscriptions.push(entry);
}
return { close: () => (entry.closed = true) };
},
});
await mount(host);
await settle();
const detailReads = () =>
host.requests.filter((request) => request.path === "playback/group-1").length;
const before = detailReads();
const live = subscriptions.find((entry) => !entry.closed);
await act(async () => {
live?.onUpdate?.({ groups: [{ groupId: "group-1", revision: 1, selectionRevision: null }] });
live?.onUpdate?.({ groups: [{ groupId: "group-1", revision: 2, selectionRevision: 4 }] });
});
await settle();
expect(detailReads()).toBeGreaterThan(before);
await click(tab("Images"));
expect(subscriptions.every((entry) => entry.closed)).toBe(true);
});
});
describe("audience content keys", () => {
it("derives a valid, unique key that is never the reserved default", () => {
expect(audienceKeyFor("Online", [])).toBe("online");
expect(audienceKeyFor("Online", ["online"])).toBe("online-2");
expect(audienceKeyFor("Default", [])).toBe("default-2");
expect(audienceKeyFor("2nd service", [])).toBe("audience-2nd-service");
expect(audienceKeyFor(" ", [])).toBe("audience");
expect(audienceKeyFor("Café — Room!", [])).toBe("cafe-room");
});
});
/** Source-level guards for two product-wide rules (DESIGN §2.1 and §21.1). */
describe("product rules in the browser source", () => {
function sources(directory: string): string[] {
return readdirSync(directory).flatMap((entry) => {
const path = join(directory, entry);
if (statSync(path).isDirectory()) {
return sources(path);
}
return /\.(ts|tsx)$/u.test(entry) ? [path] : [];
});
}
const files = ["src/ui", "src/browser", "src/display"].flatMap(sources);
it("never uses a browser-native alert, confirm, or prompt", () => {
for (const file of files) {
expect(readFileSync(file, "utf8"), file).not.toMatch(
/\b(?:window\.|globalThis\.)?(?:alert|confirm|prompt)\s*\(/u,
);
}
});
it("never puts the platform's name in user-facing text", () => {
for (const file of files) {
const code = readFileSync(file, "utf8")
.replace(/\/\*[\s\S]*?\*\//gu, "")
.replace(/^\s*\/\/.*$/gmu, "")
.replace(/\{\/\*[\s\S]*?\*\/\}/gu, "");
// Quoted strings and JSX text; identifiers such as `EkklesiaUiStyles` are not text.
expect(code, file).not.toMatch(
/["'`][^"'`\n]*\bEkklesia\b[^"'`\n]*["'`]|>[^<{]*\bEkklesia\b/u,
);
}
});
});
tests/browser/support/fake-host.ts
+103 -113
View File
@@ -1,10 +1,10 @@
import type { import type {
ModuleContributionDescriptor, ModuleContributionDescriptor,
ModuleUiApiClient, ModuleUiApiClient,
ModuleUiContributions, ModuleUiContributions,
ModuleUiHostContext, ModuleUiHostContext,
MountedModuleContribution, MountedModuleContribution,
MountModuleContributionOptions, MountModuleContributionOptions,
} from "@ekklesia/module-ui-sdk"; } from "@ekklesia/module-ui-sdk";
/** /**
@@ -15,132 +15,122 @@ import type {
* simply never match. * simply never match.
*/ */
export interface FakeHostRoute { export interface FakeHostRoute {
readonly method: string; readonly method: string;
readonly path: string | RegExp; readonly path: string | RegExp;
readonly respond: (request: { readonly respond: (request: {
readonly path: string; readonly path: string;
readonly init: RequestInit | undefined; readonly init: RequestInit | undefined;
}) => Response | Promise<Response>; }) => Response | Promise<Response>;
} }
export interface FakeHost { export interface FakeHost {
readonly context: ModuleUiHostContext; readonly context: ModuleUiHostContext;
readonly requests: { method: string; path: string }[]; readonly requests: { method: string; path: string }[];
/** Contributions this host published against Signage's renderer capability. */ /** Contributions this host published against Signage's renderer capability. */
readonly mounted: { contributionId: string; input: unknown }[]; readonly mounted: { contributionId: string; input: unknown }[];
} }
export function jsonResponse(body: unknown, status = 200): Response { export function jsonResponse(body: unknown, status = 200): Response {
return new Response(JSON.stringify(body), { return new Response(JSON.stringify(body), {
headers: { "content-type": "application/json" }, headers: { "content-type": "application/json" },
status, status,
}); });
} }
export function errorResponse( export function errorResponse(code: string, message: string, status = 400): Response {
code: string, return jsonResponse({ code, message }, status);
message: string,
status = 400,
): Response {
return jsonResponse({ code, message }, status);
} }
export interface FakeHostOptions { export interface FakeHostOptions {
readonly permissions: readonly string[]; readonly permissions: readonly string[];
readonly routes: readonly FakeHostRoute[]; readonly routes: readonly FakeHostRoute[];
readonly contributions?: readonly ModuleContributionDescriptor[]; readonly contributions?: readonly ModuleContributionDescriptor[];
readonly displayUrl?: string; readonly displayUrl?: string;
readonly principal?: ModuleUiHostContext["principal"]; readonly principal?: ModuleUiHostContext["principal"];
readonly mount?: ( readonly mount?: (
options: MountModuleContributionOptions, options: MountModuleContributionOptions,
) => Promise<MountedModuleContribution> | MountedModuleContribution; ) => Promise<MountedModuleContribution> | MountedModuleContribution;
} }
export function createFakeHost(options: FakeHostOptions): FakeHost { export function createFakeHost(options: FakeHostOptions): FakeHost {
const requests: { method: string; path: string }[] = []; const requests: { method: string; path: string }[] = [];
const mounted: { contributionId: string; input: unknown }[] = []; const mounted: { contributionId: string; input: unknown }[] = [];
const api: ModuleUiApiClient = { const api: ModuleUiApiClient = {
async request(path, init) { async request(path, init) {
const method = (init?.method ?? "GET").toUpperCase(); const method = (init?.method ?? "GET").toUpperCase();
const normalized = path.replace(/^\//u, ""); const normalized = path.replace(/^\//u, "");
requests.push({ method, path: normalized }); requests.push({ method, path: normalized });
for (const route of options.routes) { for (const route of options.routes) {
const matches = const matches =
typeof route.path === "string" typeof route.path === "string"
? route.path === normalized.split("?")[0] ? route.path === normalized.split("?")[0]
: route.path.test(normalized); : route.path.test(normalized);
if (route.method === method && matches) { if (route.method === method && matches) {
return route.respond({ init, path: normalized }); return route.respond({ init, path: normalized });
} }
} }
return errorResponse( return errorResponse("SIGNAGE_NOT_FOUND", "The requested resource was not found.", 404);
"SIGNAGE_NOT_FOUND", },
"The requested resource was not found.", };
404,
);
},
};
const contributions: ModuleUiContributions = { const contributions: ModuleUiContributions = {
list: (capabilityId) => list: (capabilityId) =>
capabilityId === "signage.slide-renderer" capabilityId === "signage.slide-renderer" ? (options.contributions ?? []) : [],
? (options.contributions ?? []) async mount(mountOptions) {
: [], mounted.push({
async mount(mountOptions) { contributionId: mountOptions.contributionId,
mounted.push({ input: mountOptions.input,
contributionId: mountOptions.contributionId, });
input: mountOptions.input, if (options.mount) {
}); return options.mount(mountOptions);
if (options.mount) { }
return options.mount(mountOptions); return {
} contributionId: mountOptions.contributionId,
return { mounted: true,
contributionId: mountOptions.contributionId, unmount: () => Promise.resolve(),
mounted: true, update: () => Promise.resolve(),
unmount: () => Promise.resolve(), version: "1.0.0",
update: () => Promise.resolve(), };
version: "1.0.0", },
}; };
},
};
return { return {
context: { context: {
api, api,
contributions, contributions,
display: { display: {
url: options.displayUrl ?? "https://api.example.test/display/signage", url: options.displayUrl ?? "https://api.example.test/display/signage",
}, },
moduleId: "signage", moduleId: "signage",
permissions: { permissions: {
has: (permission) => options.permissions.includes(permission), has: (permission) => options.permissions.includes(permission),
}, },
principal: options.principal ?? { kind: "anonymous" }, principal: options.principal ?? { kind: "anonymous" },
realtime: { subscribe: () => ({ close: () => undefined }) }, realtime: { subscribe: () => ({ close: () => undefined }) },
}, },
mounted, mounted,
requests, requests,
}; };
} }
/** The settings payload every screen loads first. */ /** The settings payload every screen loads first. */
export const FAKE_SETTINGS = Object.freeze({ export const FAKE_SETTINGS = Object.freeze({
crossfadeMs: 1000, crossfadeMs: 1000,
moduleVersion: "0.1.4", moduleVersion: "0.1.4",
nativeImageDurationMs: 7000, nativeImageDurationMs: 7000,
nativePresentation: { nativePresentation: {
backgroundColor: "#000000", backgroundColor: "#000000",
backgroundDarkened: false, backgroundDarkened: false,
backgroundMode: "blurred", backgroundMode: "blurred",
blurPixels: 20, blurPixels: 20,
}, },
rendererInputVersion: "1.0.0", rendererInputVersion: "1.0.0",
timezone: "America/Chicago", timezone: "America/Chicago",
uploads: { uploads: {
batchMaxFiles: 20, batchMaxFiles: 20,
concurrency: 3, concurrency: 3,
maxBytes: 26_214_400, maxBytes: 26_214_400,
maxPixels: 40_000_000, maxPixels: 40_000_000,
}, },
}); });
tests/drizzle-timelines.test.ts
+2 -1
View File
@@ -65,7 +65,8 @@ function constraintDatabase(existing: readonly { id: string; position: number }[
}; };
return { return {
database: { database: {
transaction: async (operation: (value: typeof transaction) => Promise<unknown>) => operation(transaction), transaction: async (operation: (value: typeof transaction) => Promise<unknown>) =>
operation(transaction),
} as unknown as ModuleDrizzleDatabase, } as unknown as ModuleDrizzleDatabase,
positions, positions,
}; };