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

Merge pull request 'feat: align Signage with platform display and design' (#3) from fix/signage-playback-and-displays into main

Browse Source 
Reviewed-on: http://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia_Signage/pulls/3
This commit was merged in pull request #3.
This commit is contained in:
The_River
2026-10-01 21:36:31 +00:00
parent a68d7ebaee 1bf89a3942
commit 5e418bf941
9 changed files with 3043 additions and 2386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/SignageDashboard.tsx
+165 -135
View File
@@ -1,5 +1,5 @@
import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk"; import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
import { EkklesiaUiStyles, EmptyState, Tabs } from "@ekklesia/ui"; import { EkklesiaUiStyles, EmptyState, PageHeader, Tabs } from "@ekklesia/ui";
import { type ReactElement, useMemo, useState } from "react"; import { type ReactElement, 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";
@@ -23,144 +23,174 @@ import type { ChannelGroupView, SettingsResponse } from "./types.js";
* 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({
context, context,
copyText, copyText,
displaySetupUrl,
}: { }: {
readonly context: ModuleUiHostContext; readonly context: ModuleUiHostContext;
readonly copyText: (value: string) => Promise<void>; readonly copyText: (value: string) => Promise<void>;
readonly displaySetupUrl: string;
}): ReactElement { }): ReactElement {
const api = useMemo(() => createSignageApi(context.api), [context.api]); const api = useMemo(() => createSignageApi(context.api), [context.api]);
// Read before the resources below, so a viewer who may not see Signage at all asks for nothing. // 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 // 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. // request it will certainly refuse is noise in a log rather than security.
const mayView = context.permissions.has("signage.view"); const mayView = context.permissions.has("signage.view");
const settings = useResource( const settings = useResource(
() => (mayView ? api.get<SettingsResponse>("settings") : Promise.resolve(undefined)), () =>
[mayView], mayView
); ? api.get<SettingsResponse>("settings")
const groups = useResource( : Promise.resolve(undefined),
() => [mayView],
mayView );
? api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups") const groups = useResource(
: Promise.resolve(undefined), () =>
[mayView], mayView
); ? api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups")
const [tab, setTab] = useState("playback"); : Promise.resolve(undefined),
const [groupId, setGroupId] = useState<string | undefined>(undefined); [mayView],
);
const [tab, setTab] = useState("playback");
const [groupId, setGroupId] = useState<string | undefined>(undefined);
const mayManageAssets = context.permissions.has("signage.assets.manage"); const mayManageAssets = context.permissions.has("signage.assets.manage");
const mayManageTimelines = context.permissions.has("signage.timelines.manage"); const mayManageTimelines = context.permissions.has(
const mayControl = context.permissions.has("signage.playback.control"); "signage.timelines.manage",
const mayManageDisplays = context.permissions.has("signage.displays.manage"); );
const mayControl = context.permissions.has("signage.playback.control");
const mayManageDisplays = context.permissions.has("signage.displays.manage");
if (!mayView) { if (!mayView) {
return ( return (
<EmptyState <EmptyState
description="Ask an administrator for the signage.view permission." description="Ask an administrator for the signage.view permission."
title="No access to Signage" title="No access to Signage"
/> />
); );
} }
const selectedGroupId = const selectedGroupId =
groupId ?? (groups.state.status === "ready" ? groups.state.value?.groups[0]?.id : undefined); groupId ??
const selectedGroup = (groups.state.status === "ready"
groups.state.status === "ready" ? groups.state.value?.groups[0]?.id
? groups.state.value?.groups.find((candidate) => candidate.id === selectedGroupId) : undefined);
: undefined; const selectedGroup =
groups.state.status === "ready"
? groups.state.value?.groups.find(
(candidate) => candidate.id === selectedGroupId,
)
: undefined;
return ( return (
<> <>
<EkklesiaUiStyles /> <EkklesiaUiStyles />
<DesktopOnly> <DesktopOnly>
{renderLoadable( <PageHeader
settings.state, description="Plan visual content, operate playback, and keep every screen connected."
(loaded) => eyebrow="Media"
loaded === undefined ? undefined : ( title="Signage"
<Tabs />
label="Signage sections" {renderLoadable(
onSelect={setTab} settings.state,
selectedId={tab} (loaded) =>
tabs={[ loaded === undefined ? undefined : (
{ <div className="signage-workspace">
content: ( <Tabs
<PlaybackPanel label="Signage sections"
api={api} onSelect={setTab}
canControl={mayControl} selectedId={tab}
context={context} tabs={[
groupId={selectedGroupId} {
onGroupChange={setGroupId} content: (
settings={loaded} <PlaybackPanel
/> api={api}
), canControl={mayControl}
id: "playback", context={context}
label: "Playback", groupId={selectedGroupId}
}, onGroupChange={setGroupId}
{ settings={loaded}
content: ( />
<TimelinesPanel ),
{...(selectedGroup id: "playback",
? { label: "Playback",
activeGroupName: selectedGroup.name, },
activeTimelineId: selectedGroup.playback.activeTimelineId, {
} content: (
: {})} <TimelinesPanel
api={api} {...(selectedGroup
canManage={mayManageTimelines} ? {
onActivate={ activeGroupName: selectedGroup.name,
mayControl && selectedGroupId !== undefined activeTimelineId:
? async (timelineId) => { selectedGroup.playback.activeTimelineId,
await api.send("POST", `playback/${selectedGroupId}/activate`, { }
timelineId, : {})}
when: "now", api={api}
}); canManage={mayManageTimelines}
groups.reload(); onActivate={
setTab("playback"); mayControl && selectedGroupId !== undefined
} ? async (timelineId) => {
: undefined await api.send(
} "POST",
settings={loaded} `playback/${selectedGroupId}/activate`,
/> {
), timelineId,
id: "timelines", when: "now",
label: "Timelines", },
}, );
{ groups.reload();
content: ( setTab("playback");
<ImagesPanel api={api} canManage={mayManageAssets} settings={loaded} /> }
), : undefined
id: "images", }
label: "Images", settings={loaded}
}, />
{ ),
content: ( id: "timelines",
<DisplaysPanel label: "Timelines",
api={api} },
canManage={mayManageDisplays} {
copyText={copyText} content: (
displaySetupUrl={displaySetupUrl} <ImagesPanel
onGroupsChanged={() => { api={api}
setGroupId(undefined); canManage={mayManageAssets}
groups.reload(); settings={loaded}
}} />
/> ),
), id: "images",
id: "displays", label: "Images",
label: "Displays", },
}, {
{ content: (
content: <ProvidersPanel api={api} context={context} settings={loaded} />, <DisplaysPanel
id: "providers", api={api}
label: "Providers", canManage={mayManageDisplays}
}, copyText={copyText}
]} displaySetupUrl={context.display?.url}
/> onGroupsChanged={() => {
), setGroupId(undefined);
{ label: "Loading Signage…", onRetry: settings.reload }, groups.reload();
)} }}
</DesktopOnly> />
</> ),
); id: "displays",
label: "Displays",
},
{
content: (
<ProvidersPanel
api={api}
context={context}
settings={loaded}
/>
),
id: "providers",
label: "Providers",
},
]}
/>
</div>
),
{ label: "Loading Signage…", onRetry: settings.reload },
)}
</DesktopOnly>
</>
);
} }
src/ui/index.tsx
+20 -20
View File
@@ -14,24 +14,24 @@ 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.1", version: "0.1.1",
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);
const displaySetupUrl = new URL("/display/signage", globalThis.location.origin).href; 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);
displaySetupUrl={displaySetupUrl} }}
/>, />,
); );
return () => root.unmount(); return () => root.unmount();
}, },
}); });
src/ui/panels/DisplaysPanel.tsx
+536 -403
View File
@@ -1,78 +1,102 @@
import { Badge, Button, Field, Panel, Select, TextInput } from "@ekklesia/ui"; import {
Badge,
Button,
Field,
InlineNotice,
Panel,
Select,
TextInput,
} from "@ekklesia/ui";
import { type ReactElement, useState } from "react"; 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 { ChannelGroupView, ViewerHealthView } from "../types.js"; import type { ChannelGroupView, ViewerHealthView } from "../types.js";
import { FailureNote, formatSince, OnlineBadge, renderLoadable } from "./shared.js"; import {
FailureNote,
formatSince,
OnlineBadge,
renderLoadable,
} from "./shared.js";
const AUDIENCE_KEY = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/u; const AUDIENCE_KEY = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/u;
function DisplayRow({ function DisplayRow({
canManage, canManage,
groups, groups,
nowMs, nowMs,
onChannelChange, onChannelChange,
onNameChange, onNameChange,
viewer, viewer,
}: { }: {
readonly canManage: boolean; readonly canManage: boolean;
readonly groups: readonly ChannelGroupView[]; readonly groups: readonly ChannelGroupView[];
readonly nowMs: number; readonly nowMs: number;
readonly onChannelChange: (channelId: string) => void; readonly onChannelChange: (channelId: string) => void;
readonly onNameChange: (name: string) => void; readonly onNameChange: (name: string) => void;
readonly viewer: ViewerHealthView; readonly viewer: ViewerHealthView;
}): ReactElement { }): ReactElement {
return ( return (
<div className="signage-display-row" data-testid={`signage-display-${viewer.id}`}> <div
<div className="signage-display-row__identity"> className="signage-display-row"
{canManage ? ( data-testid={`signage-display-${viewer.id}`}
<TextInput >
aria-label={`Name for ${viewer.name}`} <div className="signage-display-row__identity">
defaultValue={viewer.name} {canManage ? (
onBlur={(event) => event.target.value !== viewer.name && onNameChange(event.target.value)} <TextInput
/> aria-label={`Name for ${viewer.name}`}
) : ( defaultValue={viewer.name}
<strong>{viewer.name}</strong> onBlur={(event) =>
)} event.target.value !== viewer.name &&
<OnlineBadge online={viewer.online} /> onNameChange(event.target.value)
</div> }
<div className="signage-display-row__assignment"> />
{canManage ? ( ) : (
<Field label="Audience channel"> <strong>{viewer.name}</strong>
{(control) => ( )}
<Select <OnlineBadge online={viewer.online} />
{...control} </div>
aria-label={`Channel for ${viewer.name}`} <div className="signage-display-row__assignment">
onChange={(event) => onChannelChange(event.target.value)} {canManage ? (
value={viewer.channelId ?? ""} <Field label="Audience channel">
> {(control) => (
{groups.map((group) => ( <Select
<optgroup key={group.id} label={group.name}> {...control}
{group.channels.map((channel) => ( aria-label={`Channel for ${viewer.name}`}
<option key={channel.id} value={channel.id}> onChange={(event) => onChannelChange(event.target.value)}
{channel.name} value={viewer.channelId ?? ""}
</option> >
))} {groups.map((group) => (
</optgroup> <optgroup key={group.id} label={group.name}>
))} {group.channels.map((channel) => (
</Select> <option key={channel.id} value={channel.id}>
)} {channel.name}
</Field> </option>
) : undefined} ))}
</div> </optgroup>
<div className="signage-display-row__health"> ))}
<span>{`Seen ${formatSince(viewer.lastSeenAtMs, nowMs)}`}</span> </Select>
<Badge tone={viewer.offlineReady ? "success" : "neutral"}> )}
{viewer.offlineReady ? `${viewer.cachedAssetCount} cached` : "Not offline ready"} </Field>
</Badge> ) : undefined}
{viewer.lastError === null ? undefined : ( </div>
<span className="signage-display-row__error" title={viewer.lastError.detail ?? undefined}> <div className="signage-display-row__health">
{viewer.lastError.code} <span>{`Seen ${formatSince(viewer.lastSeenAtMs, nowMs)}`}</span>
</span> <Badge tone={viewer.offlineReady ? "success" : "neutral"}>
)} {viewer.offlineReady
</div> ? `${viewer.cachedAssetCount} cached`
</div> : "Not offline ready"}
); </Badge>
{viewer.lastError === null ? undefined : (
<span
className="signage-display-row__error"
title={viewer.lastError.detail ?? undefined}
>
{viewer.lastError.code}
</span>
)}
</div>
</div>
);
} }
/** /**
@@ -80,350 +104,459 @@ function DisplayRow({
* time: one group clock, one audience variant per channel, then the screens assigned to it. * time: one group clock, one audience variant per channel, then the screens assigned to it.
*/ */
export function DisplaysPanel({ export function DisplaysPanel({
api, api,
canManage, canManage,
copyText, copyText,
displaySetupUrl, displaySetupUrl,
onGroupsChanged, onGroupsChanged,
}: { }: {
readonly api: SignageApi; readonly api: SignageApi;
readonly canManage: boolean; readonly canManage: boolean;
readonly copyText: (value: string) => Promise<void>; readonly copyText: (value: string) => Promise<void>;
readonly displaySetupUrl: string; readonly displaySetupUrl: string | undefined;
readonly onGroupsChanged?: () => void; readonly onGroupsChanged?: () => void;
}): ReactElement { }): ReactElement {
const groups = useResource(() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"), []); const groups = useResource(
const viewers = useResource(() => api.get<{ viewers: readonly ViewerHealthView[] }>("viewers"), []); () => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
const edit = useAction(() => { [],
groups.reload(); );
viewers.reload(); const viewers = useResource(
onGroupsChanged?.(); () => api.get<{ viewers: readonly ViewerHealthView[] }>("viewers"),
}); [],
const viewerEdit = useAction(viewers.reload); );
const [groupName, setGroupName] = useState(""); const edit = useAction(() => {
const [copyStatus, setCopyStatus] = useState<"copied" | "failed" | "idle">("idle"); groups.reload();
const [confirmGroupId, setConfirmGroupId] = useState<string | undefined>(undefined); viewers.reload();
const [channelDraft, setChannelDraft] = useState<{ onGroupsChanged?.();
groupId: string; });
key: string; const viewerEdit = useAction(viewers.reload);
name: string; const [groupName, setGroupName] = useState("");
}>({ const [copyStatus, setCopyStatus] = useState<"copied" | "failed" | "idle">(
groupId: "", "idle",
key: "", );
name: "", const [confirmGroupId, setConfirmGroupId] = useState<string | undefined>(
}); undefined,
useTick(5000); );
const nowMs = Date.now(); const [channelDraft, setChannelDraft] = useState<{
const readyViewers = viewers.state.status === "ready" ? viewers.state.value.viewers : []; groupId: string;
key: string;
name: string;
}>({
groupId: "",
key: "",
name: "",
});
useTick(5000);
const nowMs = Date.now();
const readyViewers =
viewers.state.status === "ready" ? viewers.state.value.viewers : [];
const updateViewer = (viewerId: string, changes: Record<string, string>): void => { const updateViewer = (
viewerEdit.run(() => api.send("PATCH", `viewers/${viewerId}`, changes)); viewerId: string,
}; changes: Record<string, string>,
): void => {
viewerEdit.run(() => api.send("PATCH", `viewers/${viewerId}`, changes));
};
return ( return (
<div className="signage-columns"> <div className="signage-columns">
<Panel <Panel
actions={ actions={
<div className="signage-pairing-actions"> displaySetupUrl === undefined ? undefined : (
<a <div className="signage-pairing-actions">
className="ek-button ek-focusable ek-button--primary" <a
href={displaySetupUrl} className="ek-button ek-focusable ek-button--primary"
rel="noopener noreferrer" href={displaySetupUrl}
target="_blank" rel="noopener noreferrer"
> target="_blank"
Open display setup >
</a> Open display setup
<Button </a>
onClick={() => { <Button
setCopyStatus("idle"); onClick={() => {
void copyText(displaySetupUrl).then( setCopyStatus("idle");
() => setCopyStatus("copied"), void copyText(displaySetupUrl).then(
() => setCopyStatus("failed"), () => setCopyStatus("copied"),
); () => setCopyStatus("failed"),
}} );
> }}
Copy URL >
</Button> Copy URL
</div> </Button>
} </div>
description="Connect a screen in three short steps." )
title="Pair a display" }
> description="Connect a screen in three short steps."
<ol className="signage-pairing-steps" aria-label="Display pairing steps"> title="Pair a display"
<li> >
<span className="signage-pairing-steps__number">1</span> <ol
<span>Open display setup on the screen that will show signage.</span> className="signage-pairing-steps"
</li> aria-label="Display pairing steps"
<li> >
<span className="signage-pairing-steps__number">2</span> <li>
<span>Enter its six-digit code under Display devices in the Dashboard sidebar.</span> <span className="signage-pairing-steps__number">1</span>
</li> <span>
<li> Open display setup on the screen that will show signage.
<span className="signage-pairing-steps__number">3</span> </span>
<span>Name the display and choose its audience channel below.</span> </li>
</li> <li>
</ol> <span className="signage-pairing-steps__number">2</span>
<span className="signage-copy-status" aria-live="polite"> <span>
{copyStatus === "copied" Enter its six-digit code under Display devices in the Dashboard
? "Display setup URL copied." sidebar.
: copyStatus === "failed" </span>
? "Could not copy the URL. Copy it from the newly opened setup page." </li>
: ""} <li>
</span> <span className="signage-pairing-steps__number">3</span>
{viewers.state.status === "ready" && viewers.state.value.viewers.length === 0 ? ( <span>Name the display and choose its audience channel below.</span>
<div className="signage-display-empty"> </li>
<strong>No displays paired yet</strong> </ol>
<span>A newly approved screen appears below in its assigned channel.</span> {displaySetupUrl === undefined ? (
</div> <InlineNotice tone="warning" title="Display setup unavailable">
) : undefined} This host did not provide a display setup address.
</Panel> </InlineNotice>
) : undefined}
<span className="signage-copy-status" aria-live="polite">
{copyStatus === "copied"
? "Display setup URL copied."
: copyStatus === "failed"
? "Could not copy the URL. Copy it from the newly opened setup page."
: ""}
</span>
{viewers.state.status === "ready" &&
viewers.state.value.viewers.length === 0 ? (
<div className="signage-display-empty">
<strong>No displays paired yet</strong>
<span>
A newly approved screen appears below in its assigned channel.
</span>
</div>
) : undefined}
</Panel>
<Panel <Panel
actions={ actions={
canManage ? ( canManage ? (
<div className="signage-inline-form signage-new-group"> <div className="signage-inline-form signage-new-group">
<Field label="New channel group"> <Field label="New channel group">
{(control) => ( {(control) => (
<TextInput <TextInput
{...control} {...control}
onChange={(event) => setGroupName(event.target.value)} onChange={(event) => setGroupName(event.target.value)}
placeholder="Nursery hallway" placeholder="Nursery hallway"
value={groupName} value={groupName}
/> />
)} )}
</Field> </Field>
<Button <Button
disabled={edit.pending || groupName.trim().length === 0} disabled={edit.pending || groupName.trim().length === 0}
onClick={() => onClick={() =>
edit.run(async () => { edit.run(async () => {
await api.send("POST", "channel-groups", { await api.send("POST", "channel-groups", {
name: groupName.trim(), name: groupName.trim(),
}); });
setGroupName(""); setGroupName("");
}) })
} }
variant="primary" variant="primary"
> >
Create group Create group
</Button> </Button>
</div> </div>
) : undefined ) : undefined
} }
description="A channel group shares one playback clock. Each audience channel can receive a different content variant." description="A channel group shares one playback clock. Each audience channel can receive a different content variant."
title="Channel groups and displays" title="Channel groups and displays"
> >
{renderLoadable( {renderLoadable(
groups.state, groups.state,
(value) => { (value) => {
const knownChannelIds = new Set( const knownChannelIds = new Set(
value.groups.flatMap((group) => group.channels.map((channel) => channel.id)), value.groups.flatMap((group) =>
); group.channels.map((channel) => channel.id),
const unassigned = readyViewers.filter( ),
(viewer) => viewer.channelId === null || !knownChannelIds.has(viewer.channelId), );
); const unassigned = readyViewers.filter(
return ( (viewer) =>
<div className="signage-groups" data-testid="signage-groups"> viewer.channelId === null ||
{value.groups.map((group) => ( !knownChannelIds.has(viewer.channelId),
<article className="signage-group" key={group.id}> );
<header className="signage-group__header"> return (
<div className="signage-group__identity"> <div className="signage-groups" data-testid="signage-groups">
<span className="signage-hierarchy-label">Channel group</span> {value.groups.map((group) => (
<h3>{group.name}</h3> <article className="signage-group" key={group.id}>
</div> <header className="signage-group__header">
<Badge tone="info">{group.playback.transport}</Badge> <div className="signage-group__identity">
{canManage && value.groups.length > 1 ? ( <span className="signage-hierarchy-label">
<Button disabled={edit.pending} onClick={() => setConfirmGroupId(group.id)} variant="danger"> Channel group
Delete group </span>
</Button> <h3>{group.name}</h3>
) : canManage ? ( </div>
<Badge tone="neutral">Required group</Badge> <Badge tone="info">{group.playback.transport}</Badge>
) : undefined} {canManage && value.groups.length > 1 ? (
</header> <Button
{confirmGroupId === group.id ? ( disabled={edit.pending}
<div className="signage-confirm" role="alert"> onClick={() => setConfirmGroupId(group.id)}
<p> variant="danger"
Delete {group.name}? Its playback history will be removed. Displays assigned here will move to >
the default channel of another group. Delete group
</p> </Button>
<Button disabled={edit.pending} onClick={() => setConfirmGroupId(undefined)}> ) : canManage ? (
Cancel <Badge tone="neutral">Required group</Badge>
</Button> ) : undefined}
<Button </header>
disabled={edit.pending} {confirmGroupId === group.id ? (
onClick={() => <div className="signage-confirm" role="alert">
edit.run(async () => { <p>
await api.send("DELETE", `channel-groups/${group.id}`); Delete {group.name}? Its playback history will be
setConfirmGroupId(undefined); removed. Displays assigned here will move to the
}) default channel of another group.
} </p>
variant="danger" <Button
> disabled={edit.pending}
Confirm delete onClick={() => setConfirmGroupId(undefined)}
</Button> >
</div> Cancel
) : undefined} </Button>
<Button
disabled={edit.pending}
onClick={() =>
edit.run(async () => {
await api.send(
"DELETE",
`channel-groups/${group.id}`,
);
setConfirmGroupId(undefined);
})
}
variant="danger"
>
Confirm delete
</Button>
</div>
) : undefined}
<section className="signage-audiences"> <section className="signage-audiences">
<div className="signage-audiences__heading"> <div className="signage-audiences__heading">
<div> <div>
<span className="signage-hierarchy-label">Audience channels</span> <span className="signage-hierarchy-label">
<h4>Who this group renders for</h4> Audience channels
</div> </span>
<span>Displays inherit the channel they are assigned to.</span> <h4>Who this group renders for</h4>
</div> </div>
<div className="signage-channel-list"> <span>
{group.channels.map((channel) => { Displays inherit the channel they are assigned to.
const assigned = readyViewers.filter((viewer) => viewer.channelId === channel.id); </span>
return ( </div>
<article className="signage-channel" key={channel.id}> <div className="signage-channel-list">
<header className="signage-channel__header"> {group.channels.map((channel) => {
<div> const assigned = readyViewers.filter(
<h5>{channel.name}</h5> (viewer) => viewer.channelId === channel.id,
<div className="signage-channel__meta"> );
{channel.isDefault ? <Badge tone="success">Default channel</Badge> : undefined} return (
<span>Audience key</span> <article
<code>{channel.key}</code> className="signage-channel"
<Badge tone="neutral"> key={channel.id}
{`${assigned.length} display${assigned.length === 1 ? "" : "s"}`} >
</Badge> <header className="signage-channel__header">
</div> <div>
</div> <h5>{channel.name}</h5>
{canManage && !channel.isDefault ? ( <div className="signage-channel__meta">
<Button {channel.isDefault ? (
disabled={edit.pending} <Badge tone="success">
onClick={() => edit.run(() => api.send("DELETE", `channels/${channel.id}`))} Default channel
variant="danger" </Badge>
> ) : undefined}
Remove channel <span>Audience key</span>
</Button> <code>{channel.key}</code>
) : undefined} <Badge tone="neutral">
</header> {`${assigned.length} display${assigned.length === 1 ? "" : "s"}`}
<div className="signage-channel__displays"> </Badge>
<span className="signage-hierarchy-label">Displays</span> </div>
{assigned.length === 0 ? ( </div>
<p className="signage-channel__empty">No displays assigned.</p> {canManage && !channel.isDefault ? (
) : ( <Button
assigned.map((viewer) => ( disabled={edit.pending}
<DisplayRow onClick={() =>
canManage={canManage} edit.run(() =>
groups={value.groups} api.send(
key={viewer.id} "DELETE",
nowMs={nowMs} `channels/${channel.id}`,
onChannelChange={(channelId) => updateViewer(viewer.id, { channelId })} ),
onNameChange={(name) => updateViewer(viewer.id, { name })} )
viewer={viewer} }
/> variant="danger"
)) >
)} Remove channel
</div> </Button>
</article> ) : undefined}
); </header>
})} <div className="signage-channel__displays">
</div> <span className="signage-hierarchy-label">
Displays
</span>
{assigned.length === 0 ? (
<p className="signage-channel__empty">
No displays assigned.
</p>
) : (
assigned.map((viewer) => (
<DisplayRow
canManage={canManage}
groups={value.groups}
key={viewer.id}
nowMs={nowMs}
onChannelChange={(channelId) =>
updateViewer(viewer.id, { channelId })
}
onNameChange={(name) =>
updateViewer(viewer.id, { name })
}
viewer={viewer}
/>
))
)}
</div>
</article>
);
})}
</div>
{canManage ? ( {canManage ? (
<div className="signage-channel-form" data-testid="signage-add-channel"> <div
<div className="signage-channel-form__heading"> className="signage-channel-form"
<h5>Add an audience channel</h5> data-testid="signage-add-channel"
<span>The default channel always remains available.</span> >
</div> <div className="signage-channel-form__heading">
<Field hint="Shown to administrators and when assigning displays." label="Channel name"> <h5>Add an audience channel</h5>
{(control) => ( <span>
<TextInput The default channel always remains available.
{...control} </span>
maxLength={120} </div>
onChange={(event) => <Field
setChannelDraft((current) => ({ hint="Shown to administrators and when assigning displays."
groupId: group.id, label="Channel name"
key: current.groupId === group.id ? current.key : "", >
name: event.target.value, {(control) => (
})) <TextInput
} {...control}
placeholder="Online audience" maxLength={120}
value={channelDraft.groupId === group.id ? channelDraft.name : ""} onChange={(event) =>
/> setChannelDraft((current) => ({
)} groupId: group.id,
</Field> key:
<Field current.groupId === group.id
hint="Advanced: lowercase ID sent to content providers, e.g. online." ? current.key
label="Audience key" : "",
> name: event.target.value,
{(control) => ( }))
<TextInput }
{...control} placeholder="Online audience"
maxLength={64} value={
onChange={(event) => channelDraft.groupId === group.id
setChannelDraft((current) => ({ ? channelDraft.name
groupId: group.id, : ""
key: event.target.value, }
name: current.groupId === group.id ? current.name : "", />
})) )}
} </Field>
pattern="[a-z][a-z0-9]*(?:-[a-z0-9]+)*" <Field
placeholder="online" hint="Advanced: lowercase ID sent to content providers, e.g. online."
value={channelDraft.groupId === group.id ? channelDraft.key : ""} label="Audience key"
/> >
)} {(control) => (
</Field> <TextInput
<Button {...control}
disabled={ maxLength={64}
edit.pending || onChange={(event) =>
channelDraft.groupId !== group.id || setChannelDraft((current) => ({
!AUDIENCE_KEY.test(channelDraft.key.trim()) || groupId: group.id,
channelDraft.key.trim() === "default" || key: event.target.value,
channelDraft.name.trim() === "" name:
} current.groupId === group.id
onClick={() => ? current.name
edit.run(async () => { : "",
await api.send("POST", `channel-groups/${group.id}/channels`, { }))
key: channelDraft.key.trim(), }
name: channelDraft.name.trim(), pattern="[a-z][a-z0-9]*(?:-[a-z0-9]+)*"
}); placeholder="online"
setChannelDraft({ value={
groupId: "", channelDraft.groupId === group.id
key: "", ? channelDraft.key
name: "", : ""
}); }
}) />
} )}
variant="primary" </Field>
> <Button
Add channel disabled={
</Button> edit.pending ||
</div> channelDraft.groupId !== group.id ||
) : undefined} !AUDIENCE_KEY.test(channelDraft.key.trim()) ||
</section> channelDraft.key.trim() === "default" ||
</article> channelDraft.name.trim() === ""
))} }
onClick={() =>
edit.run(async () => {
await api.send(
"POST",
`channel-groups/${group.id}/channels`,
{
key: channelDraft.key.trim(),
name: channelDraft.name.trim(),
},
);
setChannelDraft({
groupId: "",
key: "",
name: "",
});
})
}
variant="primary"
>
Add channel
</Button>
</div>
) : undefined}
</section>
</article>
))}
{unassigned.length === 0 ? undefined : ( {unassigned.length === 0 ? undefined : (
<section className="signage-unassigned"> <section className="signage-unassigned">
<span className="signage-hierarchy-label">Needs assignment</span> <span className="signage-hierarchy-label">
{unassigned.map((viewer) => ( Needs assignment
<DisplayRow </span>
canManage={canManage} {unassigned.map((viewer) => (
groups={value.groups} <DisplayRow
key={viewer.id} canManage={canManage}
nowMs={nowMs} groups={value.groups}
onChannelChange={(channelId) => updateViewer(viewer.id, { channelId })} key={viewer.id}
onNameChange={(name) => updateViewer(viewer.id, { name })} nowMs={nowMs}
viewer={viewer} onChannelChange={(channelId) =>
/> updateViewer(viewer.id, { channelId })
))} }
</section> onNameChange={(name) =>
)} updateViewer(viewer.id, { name })
</div> }
); viewer={viewer}
}, />
{ label: "Loading channel groups…", onRetry: groups.reload }, ))}
)} </section>
{renderLoadable(viewers.state, () => null, { )}
label: "Loading displays…", </div>
onRetry: viewers.reload, );
})} },
<FailureNote failure={edit.failure} /> { label: "Loading channel groups…", onRetry: groups.reload },
<FailureNote failure={viewerEdit.failure} /> )}
</Panel> {renderLoadable(viewers.state, () => null, {
</div> label: "Loading displays…",
); onRetry: viewers.reload,
})}
<FailureNote failure={edit.failure} />
<FailureNote failure={viewerEdit.failure} />
</Panel>
</div>
);
} }
src/ui/panels/PlaybackPanel.tsx
+330 -262
View File
@@ -1,16 +1,29 @@
import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk"; import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
import { Badge, Button, EmptyState, Field, Panel, Select } from "@ekklesia/ui"; import {
ActionBar,
Badge,
Button,
EmptyState,
Field,
Panel,
Select,
} from "@ekklesia/ui";
import { type ReactElement, useState } from "react"; 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 { FailureNote, formatDuration, formatInstant, renderLoadable } from "./shared.js"; import {
FailureNote,
formatDuration,
formatInstant,
renderLoadable,
} from "./shared.js";
/** /**
* Live transport for one channel group. * Live transport for one channel group.
@@ -20,270 +33,325 @@ import { FailureNote, formatDuration, formatInstant, renderLoadable } from "./sh
* 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"),
[], [],
); );
const timelines = useResource( const timelines = useResource(
() => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"), () => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"),
[], [],
); );
const detail = useResource( const detail = useResource(
() => () =>
groupId === undefined groupId === undefined
? Promise.resolve(undefined) ? Promise.resolve(undefined)
: api.get<PlaybackDetailView>(`playback/${groupId}`), : api.get<PlaybackDetailView>(`playback/${groupId}`),
[groupId], [groupId],
); );
const command = useAction(() => { const command = useAction(() => {
detail.reload(); detail.reload();
groups.reload(); groups.reload();
}); });
const [activateId, setActivateId] = useState(""); const [activateId, setActivateId] = useState("");
const previewChannelId = const previewChannelId =
groups.state.status === "ready" groups.state.status === "ready"
? (groups.state.value.groups ? (groups.state.value.groups
.find((group) => group.id === groupId) .find((group) => group.id === groupId)
?.channels.find((channel) => channel.isDefault)?.id ?? undefined) ?.channels.find((channel) => channel.isDefault)?.id ?? undefined)
: undefined; : undefined;
// A one-second tick so the remaining time counts down rather than sitting still between refreshes. // A one-second tick so the remaining time counts down rather than sitting still between refreshes.
useTick(1000); useTick(1000);
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((timeline) => timeline.id === timelineId)?.name ?? timelines.state.value.timelines.find(
timelineId (timeline) => timeline.id === timelineId,
); )?.name ?? timelineId
} );
}
return ( return (
<div className="signage-columns"> <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 className="signage-playback" data-testid="signage-playback"> <div
<div className="signage-playback__status"> className="signage-playback"
{value.snapshot.activeTimelineId === null ? undefined : ( data-testid="signage-playback"
<Badge tone="success"> >
{`Active: ${timelineLabel(value.snapshot.activeTimelineId)}`} <div className="signage-playback__status">
</Badge> {value.snapshot.activeTimelineId === null ? undefined : (
)} <Badge tone="success">
<Badge {`Active: ${timelineLabel(value.snapshot.activeTimelineId)}`}
tone={ </Badge>
value.snapshot.transport === "playing" )}
? "success" <Badge
: value.snapshot.transport === "idle" tone={
? "warning" value.snapshot.transport === "playing"
: "info" ? "success"
} : value.snapshot.transport === "idle"
> ? "warning"
{value.snapshot.transport} : "info"
</Badge> }
{value.snapshot.blackout ? <Badge tone="danger">Blackout</Badge> : undefined} >
{value.current?.stale === true ? ( {value.snapshot.transport}
<Badge tone="warning">Stale</Badge> </Badge>
) : undefined} {value.snapshot.blackout ? (
{value.current?.withdrawn === true ? ( <Badge tone="danger">Blackout</Badge>
<Badge tone="warning">Withdrawn</Badge> ) : undefined}
) : undefined} {value.current?.stale === true ? (
{value.snapshot.pendingTimelineId === null ? undefined : ( <Badge tone="warning">Stale</Badge>
<Badge tone="info">Activation queued</Badge> ) : undefined}
)} {value.current?.withdrawn === true ? (
</div> <Badge tone="warning">Withdrawn</Badge>
) : 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"
/> />
) : ( ) : (
<dl className="signage-playback__current" data-testid="signage-current"> <section className="signage-playback__now">
<dt>Provider</dt> <h3>Now showing</h3>
<dd>{value.current.providerId}</dd> <dl
<dt>Item</dt> className="signage-playback__current"
<dd>{value.current.itemId}</dd> data-testid="signage-current"
<dt>Renderer</dt> >
<dd>{value.current.rendererContributionId ?? "—"}</dd> <dt>Provider</dt>
<dt>Duration</dt> <dd>{value.current.providerId}</dd>
<dd>{formatDuration(value.current.durationMs)}</dd> <dt>Item</dt>
<dt>Remaining</dt> <dd>{value.current.itemId}</dd>
<dd data-testid="signage-remaining"> <dt>Renderer</dt>
{value.snapshot.remainingMs === null <dd>{value.current.rendererContributionId ?? "—"}</dd>
? "—" <dt>Duration</dt>
: formatDuration(value.snapshot.remainingMs)} <dd>{formatDuration(value.current.durationMs)}</dd>
</dd> <dt>Remaining</dt>
<dt>Started</dt> <dd data-testid="signage-remaining">
<dd>{formatInstant(value.current.startedAtMs, settings.timezone)}</dd> {value.snapshot.remainingMs === null
</dl> ? "—"
)} : formatDuration(value.snapshot.remainingMs)}
</dd>
<dt>Started</dt>
<dd>
{formatInstant(
value.current.startedAtMs,
settings.timezone,
)}
</dd>
</dl>
</section>
)}
{canControl ? ( {canControl ? (
<div className="signage-playback__controls" data-testid="signage-controls"> <ActionBar
<Button disabled={command.pending} onClick={() => run("previous")}> className="signage-playback__controls"
Previous data-testid="signage-controls"
</Button> label="Playback controls"
{value.snapshot.transport === "paused" ? ( >
<Button <Button
disabled={command.pending} disabled={command.pending}
onClick={() => run("resume")} onClick={() => run("previous")}
variant="primary" >
> Previous
Resume </Button>
</Button> {value.snapshot.transport === "paused" ? (
) : ( <Button
<Button disabled={command.pending} onClick={() => run("pause")}> disabled={command.pending}
Pause onClick={() => run("resume")}
</Button> variant="primary"
)} >
<Button disabled={command.pending} onClick={() => run("next")}> Resume
Next </Button>
</Button> ) : (
<Button <Button
disabled={command.pending} disabled={command.pending}
onClick={() => run("blackout", { on: !value.snapshot.blackout })} onClick={() => run("pause")}
variant={value.snapshot.blackout ? "primary" : "secondary"} >
> Pause
{value.snapshot.blackout ? "End blackout" : "Blackout"} </Button>
</Button> )}
{value.snapshot.staticAssetId === null ? undefined : ( <Button
<Button disabled={command.pending}
disabled={command.pending} onClick={() => run("next")}
onClick={() => run("static", { assetId: null })} >
> Next
Release hold </Button>
</Button> <Button
)} disabled={command.pending}
<Button disabled={command.pending} onClick={() => run("reload")}> onClick={() =>
Reload content run("blackout", { on: !value.snapshot.blackout })
</Button> }
</div> variant={
) : undefined} value.snapshot.blackout ? "primary" : "secondary"
}
>
{value.snapshot.blackout ? "End blackout" : "Blackout"}
</Button>
{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) => setActivateId(event.target.value)} onChange={(event) =>
value={activateId} setActivateId(event.target.value)
> }
<option value="">Choose a timeline…</option> value={activateId}
{loaded.timelines.map((timeline) => ( >
<option key={timeline.id} value={timeline.id}> <option value="">Choose a timeline…</option>
{timeline.name} {loaded.timelines.map((timeline) => (
</option> <option
))} key={timeline.id}
</Select> value={timeline.id}
)} >
</Field> {timeline.name}
<Button </option>
disabled={command.pending || activateId === ""} ))}
onClick={() => </Select>
run("activate", { timelineId: activateId, when: "now" }) )}
} </Field>
variant="primary" <Button
> disabled={command.pending || activateId === ""}
Now onClick={() =>
</Button> run("activate", {
<Button timelineId: activateId,
disabled={command.pending || activateId === ""} when: "now",
onClick={() => })
run("activate", { timelineId: activateId, when: "next-boundary" }) }
} variant="primary"
> >
At next slot Now
</Button> </Button>
</> <Button
), disabled={command.pending || activateId === ""}
{ label: "Loading timelines…" }, onClick={() =>
)} run("activate", {
</div> timelineId: activateId,
) : undefined} when: "next-boundary",
})
}
>
At next slot
</Button>
</>
),
{ 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">Recently played</h4> <h4 className="signage-editor__subtitle">
<ul className="ek-list"> Recently played
{value.history.slice(0, 8).map((entry) => ( </h4>
<li className="ek-list__item signage-row" key={entry.id}> <ul className="ek-list">
<span className="signage-row__name">{entry.itemId}</span> {value.history.slice(0, 8).map((entry) => (
<span className="signage-playback__history-meta"> <li
{`${entry.providerId} · ${formatInstant(entry.startedAtMs, settings.timezone)}`} className="ek-list__item signage-row"
</span> key={entry.id}
</li> >
))} <span className="signage-row__name">
</ul> {entry.itemId}
</div> </span>
)} <span className="signage-playback__history-meta">
</div> {`${entry.providerId} · ${formatInstant(entry.startedAtMs, settings.timezone)}`}
), </span>
{ label: "Loading playback…", onRetry: detail.reload }, </li>
) ))}
)} </ul>
<FailureNote failure={command.failure} /> </div>
</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>
); );
} }
src/ui/panels/ProvidersPanel.tsx
+102 -87
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,86 +31,101 @@ 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"),
[], [],
); );
const published = new Set( const published = new Set(
context.contributions.list(SLIDE_RENDERER_CAPABILITY).map((contribution) => contribution.id), context.contributions
); .list(SLIDE_RENDERER_CAPABILITY)
.map((contribution) => contribution.id),
);
return ( return (
<Panel <Panel
description={`Renderer input contract ${settings.rendererInputVersion}. Only providers that are actually running appear here.`} actions={
title="Content providers" <Badge tone="neutral">{`Contract ${settings.rendererInputVersion}`}</Badge>
> }
{renderLoadable( description="Running content sources available to timelines."
providers.state, title="Content providers"
(value) => >
value.providers.length === 0 ? ( {renderLoadable(
<EmptyState providers.state,
description="Signage works on its own with native images. Install a content module to add more." (value) =>
title="No content providers registered" value.providers.length === 0 ? (
/> <EmptyState
) : ( description="Signage works on its own with native images. Install a content module to add more."
<Table label="Provider health"> title="No content providers registered"
<TableHead> />
<TableRow> ) : (
<TableCell header>Provider</TableCell> <Table label="Provider health">
<TableCell header>Contract</TableCell> <TableHead>
<TableCell header>Renderer</TableCell> <TableRow>
<TableCell header>Health</TableCell> <TableCell header>Provider</TableCell>
<TableCell header>Last success</TableCell> <TableCell header>Contract</TableCell>
</TableRow> <TableCell header>Renderer</TableCell>
</TableHead> <TableCell header>Health</TableCell>
<TableBody> <TableCell header>Last success</TableCell>
{value.providers.map((provider) => { </TableRow>
const rendererPublished = published.has(provider.renderer.contributionId); </TableHead>
const isNative = provider.renderer.contributionId === "signage.native-image"; <TableBody>
return ( {value.providers.map((provider) => {
<TableRow key={provider.providerId}> const rendererPublished = published.has(
<TableCell> provider.renderer.contributionId,
<span className="signage-provider__id">{provider.providerId}</span> );
<span className="signage-provider__version">{`v${provider.providerVersion}`}</span> const isNative =
</TableCell> provider.renderer.contributionId === "signage.native-image";
<TableCell>{provider.contractVersion}</TableCell> return (
<TableCell> <TableRow key={provider.providerId}>
{isNative ? ( <TableCell>
<Badge tone="success">Signage renders this</Badge> <span className="signage-provider__id">
) : rendererPublished ? ( {provider.providerId}
<Badge tone="success">{provider.renderer.contributionId}</Badge> </span>
) : ( <span className="signage-provider__version">{`v${provider.providerVersion}`}</span>
<Badge tone="warning">Renderer not published</Badge> </TableCell>
)} <TableCell>{provider.contractVersion}</TableCell>
</TableCell> <TableCell>
<TableCell> {isNative ? (
{provider.consecutiveFailures === 0 ? ( <Badge tone="info">Built in</Badge>
<Badge tone="success">Healthy</Badge> ) : rendererPublished ? (
) : ( <Badge tone="success">
<Badge tone="danger"> {provider.renderer.contributionId}
{`${provider.consecutiveFailures} failures · ${provider.lastFailureCode ?? "unknown"}`} </Badge>
</Badge> ) : (
)} <Badge tone="warning">Renderer not published</Badge>
</TableCell> )}
<TableCell> </TableCell>
{formatInstant(provider.lastSuccessAt, settings.timezone)} <TableCell>
</TableCell> {provider.consecutiveFailures === 0 ? (
</TableRow> <Badge tone="success">Healthy</Badge>
); ) : (
})} <Badge tone="danger">
</TableBody> {`${provider.consecutiveFailures} failures · ${provider.lastFailureCode ?? "unknown"}`}
</Table> </Badge>
), )}
{ label: "Loading providers…", onRetry: providers.reload }, </TableCell>
)} <TableCell>
</Panel> {formatInstant(
); provider.lastSuccessAt,
settings.timezone,
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
),
{ label: "Loading providers…", onRetry: providers.reload },
)}
</Panel>
);
} }
src/ui/panels/TimelinesPanel.tsx
+527 -453
View File
File diff suppressed because it is too large Load Diff
src/ui/styles.css
+441 -379
View File
File diff suppressed because it is too large Load Diff
tests/browser/management-ui.test.tsx
+809 -558
View File
File diff suppressed because it is too large Load Diff
tests/browser/support/fake-host.ts
+113 -89
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,108 +15,132 @@ 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(code: string, message: string, status = 400): Response { export function errorResponse(
return jsonResponse({ code, message }, status); code: string,
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 principal?: ModuleUiHostContext["principal"]; readonly displayUrl?: string;
readonly mount?: ( readonly principal?: ModuleUiHostContext["principal"];
options: MountModuleContributionOptions, readonly mount?: (
) => Promise<MountedModuleContribution> | MountedModuleContribution; options: MountModuleContributionOptions,
) => 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("SIGNAGE_NOT_FOUND", "The requested resource was not found.", 404); return errorResponse(
}, "SIGNAGE_NOT_FOUND",
}; "The requested resource was not found.",
404,
);
},
};
const contributions: ModuleUiContributions = { const contributions: ModuleUiContributions = {
list: (capabilityId) => list: (capabilityId) =>
capabilityId === "signage.slide-renderer" ? (options.contributions ?? []) : [], capabilityId === "signage.slide-renderer"
async mount(mountOptions) { ? (options.contributions ?? [])
mounted.push({ contributionId: mountOptions.contributionId, input: mountOptions.input }); : [],
if (options.mount) { async mount(mountOptions) {
return options.mount(mountOptions); mounted.push({
} contributionId: mountOptions.contributionId,
return { input: mountOptions.input,
contributionId: mountOptions.contributionId, });
mounted: true, if (options.mount) {
unmount: () => Promise.resolve(), return options.mount(mountOptions);
update: () => Promise.resolve(), }
version: "1.0.0", return {
}; contributionId: mountOptions.contributionId,
}, mounted: true,
}; unmount: () => Promise.resolve(),
update: () => Promise.resolve(),
version: "1.0.0",
};
},
};
return { return {
context: { context: {
api, api,
contributions, contributions,
moduleId: "signage", display: {
permissions: { has: (permission) => options.permissions.includes(permission) }, url: options.displayUrl ?? "https://api.example.test/display/signage",
principal: options.principal ?? { kind: "anonymous" }, },
realtime: { subscribe: () => ({ close: () => undefined }) }, moduleId: "signage",
}, permissions: {
mounted, has: (permission) => options.permissions.includes(permission),
requests, },
}; principal: options.principal ?? { kind: "anonymous" },
realtime: { subscribe: () => ({ close: () => undefined }) },
},
mounted,
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.1", moduleVersion: "0.1.1",
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: { batchMaxFiles: 20, concurrency: 3, maxBytes: 26_214_400, maxPixels: 40_000_000 }, uploads: {
batchMaxFiles: 20,
concurrency: 3,
maxBytes: 26_214_400,
maxPixels: 40_000_000,
},
}); });