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

feat: align Signage with platform display and design

Browse Source
This commit is contained in:
ekklesia
2026-09-30 18:21:42 -05:00
parent af0f0adadc
commit 1bf89a3942
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 { EkklesiaUiStyles, EmptyState, Tabs } from "@ekklesia/ui";
import { EkklesiaUiStyles, EmptyState, PageHeader, Tabs } from "@ekklesia/ui";
import { type ReactElement, useMemo, useState } from "react";
import { DesktopOnly } from "../browser/desktop-gate.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.
*/
export function SignageDashboard({
context,
copyText,
displaySetupUrl,
context,
copyText,
}: {
readonly context: ModuleUiHostContext;
readonly copyText: (value: string) => Promise<void>;
readonly displaySetupUrl: string;
readonly context: ModuleUiHostContext;
readonly copyText: (value: string) => Promise<void>;
}): ReactElement {
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.
// 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],
);
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 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.
// 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],
);
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");
const mayManageTimelines = context.permissions.has("signage.timelines.manage");
const mayControl = context.permissions.has("signage.playback.control");
const mayManageDisplays = context.permissions.has("signage.displays.manage");
const mayManageAssets = context.permissions.has("signage.assets.manage");
const mayManageTimelines = context.permissions.has(
"signage.timelines.manage",
);
const mayControl = context.permissions.has("signage.playback.control");
const mayManageDisplays = context.permissions.has("signage.displays.manage");
if (!mayView) {
return (
<EmptyState
description="Ask an administrator for the signage.view permission."
title="No access to Signage"
/>
);
}
if (!mayView) {
return (
<EmptyState
description="Ask an administrator for the signage.view permission."
title="No access to Signage"
/>
);
}
const selectedGroupId =
groupId ?? (groups.state.status === "ready" ? groups.state.value?.groups[0]?.id : undefined);
const selectedGroup =
groups.state.status === "ready"
? groups.state.value?.groups.find((candidate) => candidate.id === selectedGroupId)
: undefined;
const selectedGroupId =
groupId ??
(groups.state.status === "ready"
? groups.state.value?.groups[0]?.id
: undefined);
const selectedGroup =
groups.state.status === "ready"
? groups.state.value?.groups.find(
(candidate) => candidate.id === selectedGroupId,
)
: undefined;
return (
<>
<EkklesiaUiStyles />
<DesktopOnly>
{renderLoadable(
settings.state,
(loaded) =>
loaded === undefined ? undefined : (
<Tabs
label="Signage sections"
onSelect={setTab}
selectedId={tab}
tabs={[
{
content: (
<PlaybackPanel
api={api}
canControl={mayControl}
context={context}
groupId={selectedGroupId}
onGroupChange={setGroupId}
settings={loaded}
/>
),
id: "playback",
label: "Playback",
},
{
content: (
<TimelinesPanel
{...(selectedGroup
? {
activeGroupName: selectedGroup.name,
activeTimelineId: selectedGroup.playback.activeTimelineId,
}
: {})}
api={api}
canManage={mayManageTimelines}
onActivate={
mayControl && selectedGroupId !== undefined
? async (timelineId) => {
await api.send("POST", `playback/${selectedGroupId}/activate`, {
timelineId,
when: "now",
});
groups.reload();
setTab("playback");
}
: undefined
}
settings={loaded}
/>
),
id: "timelines",
label: "Timelines",
},
{
content: (
<ImagesPanel api={api} canManage={mayManageAssets} settings={loaded} />
),
id: "images",
label: "Images",
},
{
content: (
<DisplaysPanel
api={api}
canManage={mayManageDisplays}
copyText={copyText}
displaySetupUrl={displaySetupUrl}
onGroupsChanged={() => {
setGroupId(undefined);
groups.reload();
}}
/>
),
id: "displays",
label: "Displays",
},
{
content: <ProvidersPanel api={api} context={context} settings={loaded} />,
id: "providers",
label: "Providers",
},
]}
/>
),
{ label: "Loading Signage…", onRetry: settings.reload },
)}
</DesktopOnly>
</>
);
return (
<>
<EkklesiaUiStyles />
<DesktopOnly>
<PageHeader
description="Plan visual content, operate playback, and keep every screen connected."
eyebrow="Media"
title="Signage"
/>
{renderLoadable(
settings.state,
(loaded) =>
loaded === undefined ? undefined : (
<div className="signage-workspace">
<Tabs
label="Signage sections"
onSelect={setTab}
selectedId={tab}
tabs={[
{
content: (
<PlaybackPanel
api={api}
canControl={mayControl}
context={context}
groupId={selectedGroupId}
onGroupChange={setGroupId}
settings={loaded}
/>
),
id: "playback",
label: "Playback",
},
{
content: (
<TimelinesPanel
{...(selectedGroup
? {
activeGroupName: selectedGroup.name,
activeTimelineId:
selectedGroup.playback.activeTimelineId,
}
: {})}
api={api}
canManage={mayManageTimelines}
onActivate={
mayControl && selectedGroupId !== undefined
? async (timelineId) => {
await api.send(
"POST",
`playback/${selectedGroupId}/activate`,
{
timelineId,
when: "now",
},
);
groups.reload();
setTab("playback");
}
: undefined
}
settings={loaded}
/>
),
id: "timelines",
label: "Timelines",
},
{
content: (
<ImagesPanel
api={api}
canManage={mayManageAssets}
settings={loaded}
/>
),
id: "images",
label: "Images",
},
{
content: (
<DisplaysPanel
api={api}
canManage={mayManageDisplays}
copyText={copyText}
displaySetupUrl={context.display?.url}
onGroupsChanged={() => {
setGroupId(undefined);
groups.reload();
}}
/>
),
id: "displays",
label: "Displays",
},
{
content: (
<ProvidersPanel
api={api}
context={context}
settings={loaded}
/>
),
id: "providers",
label: "Providers",
},
]}
/>
</div>
),
{ label: "Loading Signage…", onRetry: settings.reload },
)}
</DesktopOnly>
</>
);
}