Compare commits
8
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ekklesiaandClaude Opus 5.5
|
b479ae9296 | ||
|
ekklesiaandClaude Opus 5.5
|
f8b131f4ed | ||
|
ekklesiaandClaude Opus 5.5
|
649114ba1d | ||
|
ekklesiaandClaude Opus 5.5
|
073fbc5855 | ||
|
ekklesiaandClaude Opus 5.5
|
97de441b5f | ||
|
ekklesiaandClaude Opus 5.5
|
7c17282616 | ||
|
ekklesiaandClaude Opus 5.5
|
67d89f1020 | ||
|
ekklesiaandClaude Opus 5.5
|
6bf9167f85 |
@@ -1,3 +1,3 @@
|
||||
# Ekklesia's module-development packages (@ekklesia/*) come from Ekklesia's public package registry
|
||||
# (platform ADRs 0053 and 0054). Reading needs no account and no token; never put a credential here.
|
||||
@ekklesia:registry=https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/
|
||||
@ekklesia:registry=https://git.zayin.net/api/packages/Zayin/npm/
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
# CLAUDE.md
|
||||
|
||||
Guidance for Claude Code (and other coding agents) working in this repository. It points at
|
||||
authoritative sources rather than restating them, because restated details drift. Inspect the actual
|
||||
source, tests, `package.json`, and CI workflow before relying on anything here or on memory of a
|
||||
prior session.
|
||||
|
||||
## What this repository is
|
||||
|
||||
Signage is a first-party Ekklesia **module** in its own repository (`Zayin/Signage`). It is not part of
|
||||
the platform monorepo and vendors none of it: it builds against the published `@ekklesia/*`
|
||||
module-development packages (platform ADRs 0053 and 0054), ships as one Ekklesia Module Package
|
||||
(ADR 0049), and reaches PostgreSQL only through the Module Database ABI v1 executor the host hands it
|
||||
(ADR 0050). Read `README.md` for what exists and the scope boundaries.
|
||||
|
||||
Signage owns its domain: channel groups, audience channels, timelines, slots, signage assignments,
|
||||
playback rules, native images, and **its own management and display UI**. The platform shell hosts
|
||||
that UI through the generic module loader and never rebuilds it; do not move Signage screens into the
|
||||
platform.
|
||||
|
||||
## Product direction lives beside this repository
|
||||
|
||||
The current roadmap and product/interface design contract are `ROADMAP.md` and `DESIGN.md` in the
|
||||
parent development directory (`../ROADMAP.md` and `../DESIGN.md` in the standard
|
||||
`~/development/ekklesia/` layout). They are deliberately **not** committed here; do not copy them in.
|
||||
They are authoritative for product direction. If this repository's documentation disagrees with them,
|
||||
flag the conflict and correct the repository-local documentation; never silently follow stale text.
|
||||
|
||||
Rules from those documents that apply to every change here:
|
||||
|
||||
- **Shared resources belong to the platform.** Displays/devices, identity, branding, mail, storage,
|
||||
and module lifecycle are the platform's. Signage *consumes* displays; it assigns content to them.
|
||||
- **The current display management is transitional.** Signage's viewer roster, display naming, and
|
||||
pairing instructions, together with the platform's sidebar *Display devices* panel, are what exists
|
||||
today. Stage 1 moves pairing and the one global display name to the platform's
|
||||
**Settings → Displays**, and Signage then selects an existing display. Fix defects in the current
|
||||
flow, keep existing paired displays, viewer identities, cached content, and assignments working, and
|
||||
do **not** implement the Stage 1 Settings/Displays architecture early.
|
||||
- **Branding.** Normal user-facing UI never hard-codes "Ekklesia" (platform ADR 0046).
|
||||
- **Visual direction.** Simple and minimal; responsive; light, dark, and system modes. Normal UI
|
||||
colours come only from the shared design tokens (`@ekklesia/design-tokens`) and shared elements
|
||||
(`@ekklesia/ui`) — never a hard-coded colour. The display artifact's pure-black stage, blackout,
|
||||
and slate are content presentation, not themed UI.
|
||||
- **No browser-native dialogs.** `window.alert`, `window.confirm`, and `window.prompt` are prohibited.
|
||||
Destructive actions use in-product confirmation proportional to impact: a two-step in-place
|
||||
confirmation for moderate actions, the shared `Dialog` for significant ones.
|
||||
- **Plain language.** Normal church staff must understand the UI without implementation terms; do not
|
||||
expose an internal identifier merely because it exists.
|
||||
|
||||
## ADRs
|
||||
|
||||
`docs/architecture/decisions/` holds Signage's own ADRs; the platform's ADRs live in the Ekklesia
|
||||
repository. Accepted ADRs are immutable except for status and cross-reference corrections. A changed
|
||||
decision gets a new ADR that supersedes the old one; never rewrite a historical ADR to fit a change.
|
||||
|
||||
## Working conventions
|
||||
|
||||
- Canonical remote: `ssh://[email protected]:2222/Zayin/Signage.git` (the platform is
|
||||
`Zayin/Ekklesia.git`). Local clones can be behind: `git fetch --prune --tags` and branch from
|
||||
`origin/main`.
|
||||
- One branch per PR off an up-to-date `origin/main`. Never push to `main`, never merge your own PR,
|
||||
and never create or push a release tag — release tags belong to the human maintainer.
|
||||
- A fix that needs a platform contract change is two PRs: the Ekklesia change first, then Signage,
|
||||
with the compatibility boundary explicit. Do not copy platform logic into Signage to avoid it.
|
||||
- Every defect fix gets a regression test. Signage never reads the environment, opens its own socket,
|
||||
builds an Ekklesia URL, or applies a migration; all of that reaches it through the host.
|
||||
|
||||
## Verification
|
||||
|
||||
`package.json` and `.gitea/workflows/ci.yml` are the source of truth. From a clean checkout:
|
||||
|
||||
```bash
|
||||
pnpm install --frozen-lockfile
|
||||
pnpm lint && pnpm typecheck && pnpm test && pnpm build && pnpm validate
|
||||
bash ci/check-cleanup.sh
|
||||
```
|
||||
|
||||
The CI `integration` job installs the real Module Package into the pinned platform
|
||||
(`ci/platform.env`) and drives the Dashboard and a kiosk display in real browsers, running the display
|
||||
scenarios listed in `ci/display-scenarios` (`bash ci/package.sh`, `bash ci/fetch-platform.sh`,
|
||||
`bash ci/integration.sh`; it needs Docker). Unit tests passing is not evidence that a display or
|
||||
browser behaviour works: verify display behaviour through the integration harness.
|
||||
@@ -139,8 +139,25 @@ description of the platform ABI.
|
||||
| Transitions, offline continuation, playback controls | Dynamic change within one slide |
|
||||
| The management and display UI | Its own internal multi-stage behaviour |
|
||||
|
||||
## Displays today, and what Stage 1 changes
|
||||
|
||||
Displays are platform-owned. What exists now is transitional: a screen is paired in the Dashboard
|
||||
sidebar's *Display devices* panel, and Signage keeps its own roster of the screens that have checked
|
||||
in — their names, the group and audience each is assigned to, and their health. A running display
|
||||
follows its assignment as soon as an administrator changes it, and a revoked display returns to its
|
||||
pairing code. Entries for screens that are offline (a retired television, a test tab) can be removed
|
||||
from the roster.
|
||||
|
||||
The product roadmap moves pairing and the one global display name to the platform's
|
||||
**Settings → Displays** in Stage 1; Signage will then select an existing display instead of naming its
|
||||
own. Until then, existing paired displays, their viewer identities, cached content, and assignments are
|
||||
preserved across every Signage upgrade.
|
||||
|
||||
The management screen is currently desktop-only (the narrow-screen notice below 1024 px). The product
|
||||
design requires phone and tablet administration and dark mode; that arrives with the Stage 1 shared
|
||||
responsive Dashboard and design system rather than as a Signage-only layout.
|
||||
|
||||
## Licence and scope
|
||||
|
||||
Deployment, the module store, a theme editor, a mobile management UI, video and audio, MQTT, Home
|
||||
Assistant, Companion, and any migration of legacy Announcements data are explicitly out of scope for
|
||||
this repository.
|
||||
Deployment, the module store, a theme editor, video and audio, MQTT, Home Assistant, Companion, and any
|
||||
migration of legacy Announcements data are explicitly out of scope for this repository.
|
||||
|
||||
@@ -5,3 +5,6 @@ two-pages
|
||||
session-blip
|
||||
stream-failure
|
||||
stream-recycle
|
||||
connectivity-blip
|
||||
caching-probe
|
||||
revoke
|
||||
|
||||
+3
-3
@@ -1,5 +1,5 @@
|
||||
# The companion Core harness Signage uses to install and run its real external package. The pull ref
|
||||
# remains reachable after its branch is deleted; the full commit pin makes the checkout immutable.
|
||||
EKKLESIA_PLATFORM_REPOSITORY=https://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia.git
|
||||
EKKLESIA_PLATFORM_REF=refs/pull/90/head
|
||||
EKKLESIA_PLATFORM_COMMIT=40ef0ff802c124ae5a3a0b9aa51a1502a7b72644
|
||||
EKKLESIA_PLATFORM_REPOSITORY=https://git.zayin.net/Zayin/Ekklesia.git
|
||||
EKKLESIA_PLATFORM_REF=refs/pull/92/head
|
||||
EKKLESIA_PLATFORM_COMMIT=5e9433d96b413117374a6132d89400867414c2c8
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
- Status: Accepted
|
||||
- Date: 2026-08-27
|
||||
- Related: Ekklesia [ADR 0006](https://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia)
|
||||
(versioned capabilities), [ADR 0041](https://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia)
|
||||
- Related: Ekklesia [ADR 0006](https://git.zayin.net/Zayin/Ekklesia)
|
||||
(versioned capabilities), [ADR 0041](https://git.zayin.net/Zayin/Ekklesia)
|
||||
(browser contributions)
|
||||
|
||||
## Context
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
- Status: Accepted
|
||||
- Date: 2026-08-27
|
||||
- Related: [0005](0005-authoritative-playback.md), Ekklesia
|
||||
[ADR 0043](https://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia) (display offline code)
|
||||
[ADR 0043](https://git.zayin.net/Zayin/Ekklesia) (display offline code)
|
||||
|
||||
## Context
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
- Status: Accepted
|
||||
- Date: 2026-08-27
|
||||
- Related: [0001](0001-signage-owns-timing-providers-own-content.md), Ekklesia
|
||||
[ADR 0030](https://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia) (host-provided storage),
|
||||
[ADR 0042](https://git.riverofglorymn.org/River_of_Glory_Church/Ekklesia) (streaming bodies)
|
||||
[ADR 0030](https://git.zayin.net/Zayin/Ekklesia) (host-provided storage),
|
||||
[ADR 0042](https://git.zayin.net/Zayin/Ekklesia) (streaming bodies)
|
||||
|
||||
## Context
|
||||
|
||||
|
||||
Generated
+9
-9
@@ -136,13 +136,13 @@ packages:
|
||||
resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-h1kwuurRp2sOdrVxVtU7TbDx3NoOKEj1G7jhLRawFsWrlqkuhtcBgRXXfHgC5cbEwh5VRfXT3viLwwHnFIRjdw==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Fcontracts/-/0.2.3/contracts-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-h1kwuurRp2sOdrVxVtU7TbDx3NoOKEj1G7jhLRawFsWrlqkuhtcBgRXXfHgC5cbEwh5VRfXT3viLwwHnFIRjdw==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Fcontracts/-/0.2.3/contracts-0.2.3.tgz}
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-ZN4x/qehXxnWccWrICyMMDgHXvXoKyicFc/qm8wmf3513PTBzM9lDtfrgnfBLEoc+mjeEfTTnfOyigX97U56XA==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Fdesign-tokens/-/0.2.3/design-tokens-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-ZN4x/qehXxnWccWrICyMMDgHXvXoKyicFc/qm8wmf3513PTBzM9lDtfrgnfBLEoc+mjeEfTTnfOyigX97U56XA==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Fdesign-tokens/-/0.2.3/design-tokens-0.2.3.tgz}
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-xGwFPPD/wjbfWqgB45TpGVdLNC7eUb6j5l2wgRdpGCpTScnVsS30EJmgwsplPi6uHErUiNIZBwuN6YV5jVcZDg==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Fmodule-database/-/0.2.3/module-database-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-xGwFPPD/wjbfWqgB45TpGVdLNC7eUb6j5l2wgRdpGCpTScnVsS30EJmgwsplPi6uHErUiNIZBwuN6YV5jVcZDg==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Fmodule-database/-/0.2.3/module-database-0.2.3.tgz}
|
||||
peerDependencies:
|
||||
drizzle-orm: '>=0.45.2 <0.46.0'
|
||||
peerDependenciesMeta:
|
||||
@@ -150,24 +150,24 @@ packages:
|
||||
optional: true
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-U755u1sctmLm1bS9uaWQjcHPZw8WCYSTY5Ddi4QTbLVB3QzqYaWCaOyeeKJyEtoI+iZQNFkTAjAQPMSCVbCj8g==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Fmodule-pack/-/0.2.3/module-pack-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-U755u1sctmLm1bS9uaWQjcHPZw8WCYSTY5Ddi4QTbLVB3QzqYaWCaOyeeKJyEtoI+iZQNFkTAjAQPMSCVbCj8g==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Fmodule-pack/-/0.2.3/module-pack-0.2.3.tgz}
|
||||
hasBin: true
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-H6g2F2xfA/akmzWBfSQTtUtgIrGkHxzPpvbJk4EqUJ6eXllHtn82hAw9r0S7vjLWE9IMD9m9KLAJ3Xil3mZsig==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Fmodule-sdk/-/0.2.3/module-sdk-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-H6g2F2xfA/akmzWBfSQTtUtgIrGkHxzPpvbJk4EqUJ6eXllHtn82hAw9r0S7vjLWE9IMD9m9KLAJ3Xil3mZsig==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Fmodule-sdk/-/0.2.3/module-sdk-0.2.3.tgz}
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-rSymIjPeoDzxpXpTC7D74/g8MV5PgUP56dHGXxe/jrvlvfdFeNa7pSMUYa4lKc3DvlcJucvq4BjwGXRuDUCdEA==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Fmodule-ui-build/-/0.2.3/module-ui-build-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-rSymIjPeoDzxpXpTC7D74/g8MV5PgUP56dHGXxe/jrvlvfdFeNa7pSMUYa4lKc3DvlcJucvq4BjwGXRuDUCdEA==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Fmodule-ui-build/-/0.2.3/module-ui-build-0.2.3.tgz}
|
||||
hasBin: true
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-zSvI3gfnqBiBt7h0Xbs6xmsLYP9E8M0xpLGVno+OaC1cyrKVUvlwq78as2zoiTGFHl2aoI5Mz9V4/KJOVxyByg==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Fmodule-ui-sdk/-/0.2.3/module-ui-sdk-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-zSvI3gfnqBiBt7h0Xbs6xmsLYP9E8M0xpLGVno+OaC1cyrKVUvlwq78as2zoiTGFHl2aoI5Mz9V4/KJOVxyByg==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Fmodule-ui-sdk/-/0.2.3/module-ui-sdk-0.2.3.tgz}
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-dm8d8hJtdwwaMpsIwXcPXdCu616RQu3Y3/5OacPS1L2eb7Bhnxfl5SQJMuee8CtUSs45kBr0KXN8VWHl+AxSXg==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Ftypescript-config/-/0.2.3/typescript-config-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-dm8d8hJtdwwaMpsIwXcPXdCu616RQu3Y3/5OacPS1L2eb7Bhnxfl5SQJMuee8CtUSs45kBr0KXN8VWHl+AxSXg==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Ftypescript-config/-/0.2.3/typescript-config-0.2.3.tgz}
|
||||
|
||||
'@ekklesia/[email protected]':
|
||||
resolution: {integrity: sha512-9xNOnp47VvARP91+XFG8mo/F5ln1Zi+w2RVY0mBeyf6qO5P39nyOAzwxunsD44Mb3E1o+fCTTgZoSJbLMaRtMA==, tarball: https://git.riverofglorymn.org/api/packages/River_of_Glory_Church/npm/%40ekklesia%2Fui/-/0.2.3/ui-0.2.3.tgz}
|
||||
resolution: {integrity: sha512-9xNOnp47VvARP91+XFG8mo/F5ln1Zi+w2RVY0mBeyf6qO5P39nyOAzwxunsD44Mb3E1o+fCTTgZoSJbLMaRtMA==, tarball: https://git.zayin.net/api/packages/Zayin/npm/%40ekklesia%2Fui/-/0.2.3/ui-0.2.3.tgz}
|
||||
peerDependencies:
|
||||
react: ^19.2.0
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ export function DesktopOnly({ children }: { readonly children: ReactNode }): Rea
|
||||
<div className="signage-narrow-notice" data-testid="signage-narrow-notice" role="note">
|
||||
<h2 className="signage-narrow-notice__title">Signage needs a desktop screen</h2>
|
||||
<p className="signage-narrow-notice__body">
|
||||
{`Open 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>
|
||||
</div>
|
||||
<div className="signage-desktop" data-testid="signage-desktop">
|
||||
|
||||
+153
-21
@@ -20,6 +20,7 @@ import {
|
||||
signageMediaKey,
|
||||
} from "../browser/storage.js";
|
||||
import {
|
||||
assignedChannelOf,
|
||||
type DisplayChannelState,
|
||||
type DisplayHeartbeat,
|
||||
type DisplayRealtimeGroup,
|
||||
@@ -110,6 +111,8 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
let stage: SceneStage | undefined;
|
||||
let session: DisplaySessionView | undefined;
|
||||
let subscription: { close(): void } | undefined;
|
||||
/** Identifies the one subscription whose callbacks may still act. */
|
||||
let activeSubscription: symbol | undefined;
|
||||
let heartbeatHandle: unknown;
|
||||
let refreshHandle: unknown;
|
||||
let stopped = false;
|
||||
@@ -127,6 +130,13 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
* each resets once its request works again. */
|
||||
let sessionHandle: unknown;
|
||||
let sessionAttempt = 0;
|
||||
/** One registration in flight at a time. A refresh and a heartbeat can both discover that this
|
||||
* viewer was removed from the roster; registering twice would open two realtime subscriptions and
|
||||
* two heartbeat timers for one screen. */
|
||||
let registering = false;
|
||||
/** Consecutive times this screen found itself removed from the roster without a working fetch in
|
||||
* between. Resets once a state fetch succeeds. */
|
||||
let rosterAttempt = 0;
|
||||
let refreshAttempt = 0;
|
||||
let realtimeHandle: unknown;
|
||||
let realtimeAttempt = 0;
|
||||
@@ -347,6 +357,9 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
// The crossfade is part of the persisted state too, so a screen that resumes offline fades the
|
||||
// way its operator configured rather than the way this file happened to default.
|
||||
stage.setCrossfade(snapshot.crossfadeMs);
|
||||
// A deliberate blackout is persisted state like any other. Restoring it first means a kiosk that
|
||||
// reloads mid-blackout stays black while it reconnects, instead of flashing the hidden frame.
|
||||
stage.setBlackout(snapshot.playback.blackout);
|
||||
const atMs = serverNowFrom(snapshot, now());
|
||||
const evaluation = resolveOffline({ atMs, snapshot, unusableSelectionIds: unusable });
|
||||
const resolution = evaluation.resolution;
|
||||
@@ -500,22 +513,96 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
if (stopped || !session) {
|
||||
return;
|
||||
}
|
||||
const viewerId = session.viewerId;
|
||||
try {
|
||||
const response = await options.context.api.request(
|
||||
`channels/${session.channelId}/display-state`,
|
||||
);
|
||||
// Asked by viewer, not by channel: the server resolves where this screen is assigned *now*,
|
||||
// so a reassignment or a deleted channel reaches a display that is already running.
|
||||
const response = await options.context.api.request(`viewers/${viewerId}/display-state`);
|
||||
if (await removedFromRoster(response)) {
|
||||
// This screen was removed from the roster. It registers again with the identity it keeps,
|
||||
// and keeps its frame meanwhile.
|
||||
reregister(viewerId);
|
||||
return;
|
||||
}
|
||||
if (!response.ok) {
|
||||
await refreshFailed();
|
||||
return;
|
||||
}
|
||||
const state = (await response.json()) as DisplayChannelStateView;
|
||||
refreshAttempt = 0;
|
||||
rosterAttempt = 0;
|
||||
adoptAssignment(state.channel);
|
||||
await apply(state);
|
||||
} catch {
|
||||
await refreshFailed();
|
||||
}
|
||||
}
|
||||
|
||||
/** The server's answer about where this screen belongs wins, exactly as its playback state does. */
|
||||
function adoptAssignment(channel: DisplayChannelStateView["channel"]): void {
|
||||
if (!session || (session.channelId === channel.id && session.groupId === channel.groupId)) {
|
||||
return;
|
||||
}
|
||||
session = {
|
||||
...session,
|
||||
channelId: channel.id,
|
||||
channelKey: channel.key,
|
||||
groupId: channel.groupId,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Only Signage's own "no such viewer" means the roster entry is gone. Any other 404 — a proxy, a
|
||||
* route this server does not have — is an ordinary failure, retried with backoff like the rest;
|
||||
* treating it as removal would re-register in a loop.
|
||||
*/
|
||||
async function removedFromRoster(response: Response): Promise<boolean> {
|
||||
if (response.status !== 404) {
|
||||
return false;
|
||||
}
|
||||
const body = (await response
|
||||
.clone()
|
||||
.json()
|
||||
.catch(() => null)) as { code?: unknown } | null;
|
||||
return body?.code === "SIGNAGE_NOT_FOUND";
|
||||
}
|
||||
|
||||
/** Drops a session the server no longer recognizes and registers again, once, on backoff. */
|
||||
function reregister(viewerId: string): void {
|
||||
if (stopped || session?.viewerId !== viewerId) {
|
||||
return;
|
||||
}
|
||||
endSession();
|
||||
// Backed off as well: a server that keeps forgetting this screen the moment it registers must
|
||||
// cost a request a minute, not a tight loop.
|
||||
const delay = rosterAttempt === 0 ? 0 : displayRetryDelayMs(rosterAttempt);
|
||||
rosterAttempt += 1;
|
||||
if (delay === 0) {
|
||||
void register();
|
||||
return;
|
||||
}
|
||||
sessionHandle = setTimer(() => {
|
||||
sessionHandle = undefined;
|
||||
void register();
|
||||
}, delay);
|
||||
}
|
||||
|
||||
/** Releases everything a registration started: realtime, heartbeats, and pending retries. */
|
||||
function endSession(): void {
|
||||
session = undefined;
|
||||
activeSubscription = undefined;
|
||||
subscription?.close();
|
||||
subscription = undefined;
|
||||
if (heartbeatHandle !== undefined) {
|
||||
clearInterval(heartbeatHandle as never);
|
||||
heartbeatHandle = undefined;
|
||||
}
|
||||
if (realtimeHandle !== undefined) {
|
||||
clearTimer(realtimeHandle);
|
||||
realtimeHandle = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The server is unreachable, or answered with an error. The frame stays and local continuation
|
||||
* takes over — nothing about a network failure belongs on a lobby wall — and the refresh is tried
|
||||
@@ -545,26 +632,17 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
* state — exactly as if it had worked the first time.
|
||||
*/
|
||||
async function register(): Promise<void> {
|
||||
if (stopped || session) {
|
||||
if (stopped || session || registering) {
|
||||
return;
|
||||
}
|
||||
registering = true;
|
||||
let registered: DisplaySessionView | undefined;
|
||||
try {
|
||||
const response = await options.context.api.request("viewers/session", {
|
||||
body: JSON.stringify({ viewerKey: await viewerKey() }),
|
||||
headers: { "content-type": "application/json" },
|
||||
method: "POST",
|
||||
});
|
||||
if (response.ok) {
|
||||
// Read, not cast: a registration the display cannot understand is no registration, and is
|
||||
// tried again like any other failure.
|
||||
const parsed = parseViewerSessionResponse(await response.json());
|
||||
registered = parsed.ok ? parsed.value : undefined;
|
||||
}
|
||||
} catch {
|
||||
registered = undefined;
|
||||
registered = await requestSession();
|
||||
} finally {
|
||||
registering = false;
|
||||
}
|
||||
if (stopped) {
|
||||
if (stopped || session) {
|
||||
return;
|
||||
}
|
||||
if (!registered) {
|
||||
@@ -590,6 +668,26 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
report();
|
||||
}
|
||||
|
||||
async function requestSession(): Promise<DisplaySessionView | undefined> {
|
||||
let registered: DisplaySessionView | undefined;
|
||||
try {
|
||||
const response = await options.context.api.request("viewers/session", {
|
||||
body: JSON.stringify({ viewerKey: await viewerKey() }),
|
||||
headers: { "content-type": "application/json" },
|
||||
method: "POST",
|
||||
});
|
||||
if (response.ok) {
|
||||
// Read, not cast: a registration the display cannot understand is no registration, and is
|
||||
// tried again like any other failure.
|
||||
const parsed = parseViewerSessionResponse(await response.json());
|
||||
registered = parsed.ok ? parsed.value : undefined;
|
||||
}
|
||||
} catch {
|
||||
registered = undefined;
|
||||
}
|
||||
return registered;
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribes to the display's realtime channel, and again whenever the host reports that a
|
||||
* subscription has ended for good. The host retries ordinary disconnects itself; a stream that
|
||||
@@ -600,10 +698,21 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
if (stopped || !session) {
|
||||
return;
|
||||
}
|
||||
// Only the newest subscription may act. Closing the old one can report "closed" synchronously,
|
||||
// and that report must not schedule a second resubscription on top of this one.
|
||||
const token = Symbol("subscription");
|
||||
activeSubscription = token;
|
||||
subscription?.close();
|
||||
subscription = options.context.realtime.subscribe("display-state", {
|
||||
onSnapshot: (state) => onRealtime(state),
|
||||
onSnapshot: (state) => {
|
||||
if (activeSubscription === token) {
|
||||
onRealtime(state);
|
||||
}
|
||||
},
|
||||
onStatus: (status) => {
|
||||
if (activeSubscription !== token) {
|
||||
return;
|
||||
}
|
||||
online = status === "connected";
|
||||
if (status === "connected") {
|
||||
realtimeAttempt = 0;
|
||||
@@ -616,7 +725,11 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
}
|
||||
report();
|
||||
},
|
||||
onUpdate: (state) => onRealtime(state),
|
||||
onUpdate: (state) => {
|
||||
if (activeSubscription === token) {
|
||||
onRealtime(state);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -639,11 +752,29 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
reportedSelectionId: renderedSelectionId ?? null,
|
||||
reportedTimelineId: lastState?.playback.activeTimelineId ?? null,
|
||||
};
|
||||
await options.context.api.request(`viewers/${session.viewerId}/heartbeat`, {
|
||||
const viewerId = session.viewerId;
|
||||
const response = await options.context.api.request(`viewers/${viewerId}/heartbeat`, {
|
||||
body: JSON.stringify(report),
|
||||
headers: { "content-type": "application/json" },
|
||||
method: "POST",
|
||||
});
|
||||
if (await removedFromRoster(response)) {
|
||||
reregister(viewerId);
|
||||
return;
|
||||
}
|
||||
if (!response.ok) {
|
||||
return;
|
||||
}
|
||||
// The heartbeat is also how a screen learns it was reassigned while its slot is long, paused,
|
||||
// or held — times when no state fetch is otherwise due.
|
||||
const assigned = assignedChannelOf(await response.json().catch(() => undefined));
|
||||
if (
|
||||
assigned !== undefined &&
|
||||
session?.viewerId === viewerId &&
|
||||
assigned !== session.channelId
|
||||
) {
|
||||
void refresh();
|
||||
}
|
||||
} catch {
|
||||
// Telemetry is best effort and never affects what is on screen.
|
||||
}
|
||||
@@ -695,6 +826,7 @@ export function createDisplayController(options: DisplayControllerOptions): Disp
|
||||
|
||||
async stop(): Promise<void> {
|
||||
stopped = true;
|
||||
activeSubscription = undefined;
|
||||
subscription?.close();
|
||||
subscription = undefined;
|
||||
if (heartbeatHandle !== undefined) {
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
describeViewerHealth,
|
||||
openViewerSession,
|
||||
recordViewerHeartbeat,
|
||||
resolveViewerSession,
|
||||
SIGNAGE_VIEWER_NAME_MAX,
|
||||
updateViewerAssignment,
|
||||
} from "../viewers/service.js";
|
||||
@@ -123,12 +124,50 @@ export function registerViewerRoutes(
|
||||
});
|
||||
// The response says what a display needs to keep itself honest, and nothing about other
|
||||
// displays or the installation.
|
||||
const response: DisplayHeartbeatResponse = { acknowledged: true, recorded: result.written };
|
||||
const assigned = await resolveViewerSession(store(context), result.viewer);
|
||||
const response: DisplayHeartbeatResponse = {
|
||||
acknowledged: true,
|
||||
channelId: assigned.channel.id,
|
||||
recorded: result.written,
|
||||
};
|
||||
return Response.json(response);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
http.route({
|
||||
method: "GET",
|
||||
path: "/viewers/:viewerId/display-state",
|
||||
permission: "signage.display.view",
|
||||
maxBodyBytes: 0,
|
||||
handler(_request, context) {
|
||||
return signageBoundary(async () => {
|
||||
const viewerId = requireUuidParam(context, "viewerId");
|
||||
const signageStore = store(context);
|
||||
const viewer = await signageStore.findViewer(viewerId);
|
||||
if (!viewer) {
|
||||
// Removed from the roster. The display registers again with the identity it keeps.
|
||||
throw new SignageError("SIGNAGE_NOT_FOUND");
|
||||
}
|
||||
// Resolved on every fetch, never remembered from registration: an administrator who moves
|
||||
// a screen, or deletes the channel it was on, changes what it shows without a reboot.
|
||||
const { channel } = await resolveViewerSession(signageStore, viewer);
|
||||
const snapshot = await playback().snapshot(channel.groupId);
|
||||
return Response.json(
|
||||
await buildDisplayChannelState({
|
||||
atMs: Date.now(),
|
||||
channel,
|
||||
playback: snapshot,
|
||||
registry: registry(),
|
||||
settings: readSignageSettings(context.config),
|
||||
storage: context.storage,
|
||||
store: signageStore,
|
||||
}),
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
http.route({
|
||||
method: "GET",
|
||||
path: "/channels/:channelId/display-state",
|
||||
|
||||
@@ -87,7 +87,7 @@ export async function openViewerSession(input: ViewerSessionInput): Promise<View
|
||||
if (!refreshed) {
|
||||
throw new SignageError("SIGNAGE_OPERATION_FAILED");
|
||||
}
|
||||
return resolveSession(input.store, refreshed);
|
||||
return resolveViewerSession(input.store, refreshed);
|
||||
}
|
||||
|
||||
const channel = defaultChannelOf(group.channels);
|
||||
@@ -121,7 +121,16 @@ function defaultChannelOf(channels: readonly StoredChannel[]): StoredChannel {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
async function resolveSession(store: SignageStore, viewer: StoredViewer): Promise<ViewerSession> {
|
||||
/**
|
||||
* Where a known viewer is assigned **now**: its own channel, or the default channel of the default
|
||||
* group when that channel no longer exists. A display asks this on every state fetch, which is what
|
||||
* makes an administrator's reassignment — or deleting the channel a screen was on — reach a display
|
||||
* that is already running, rather than only the next time it boots.
|
||||
*/
|
||||
export async function resolveViewerSession(
|
||||
store: SignageStore,
|
||||
viewer: StoredViewer,
|
||||
): Promise<ViewerSession> {
|
||||
const groups = await store.listChannelGroups();
|
||||
for (const group of groups) {
|
||||
const channel = group.channels.find((candidate) => candidate.id === viewer.channelId);
|
||||
|
||||
@@ -206,9 +206,28 @@ export function parseDisplayHeartbeat(raw: unknown): ProtocolResult<DisplayHeart
|
||||
export interface DisplayHeartbeatResponse {
|
||||
readonly acknowledged: true;
|
||||
readonly recorded: boolean;
|
||||
/** The channel an administrator has this viewer assigned to now. A display whose own idea of its
|
||||
* channel differs refetches its state, so a reassignment reaches a running screen within one
|
||||
* heartbeat. Optional: a display ignores a response without it. */
|
||||
readonly channelId?: string;
|
||||
}
|
||||
|
||||
// --- Channel state: GET channels/:channelId/display-state -----------------------------------------
|
||||
/** The assigned channel from a heartbeat response, if it carried a usable one. */
|
||||
export function assignedChannelOf(raw: unknown): string | undefined {
|
||||
if (typeof raw !== "object" || raw === null) {
|
||||
return undefined;
|
||||
}
|
||||
const channelId = (raw as { readonly channelId?: unknown }).channelId;
|
||||
return typeof channelId === "string" && channelId.length > 0 && channelId.length <= 64
|
||||
? channelId
|
||||
: undefined;
|
||||
}
|
||||
|
||||
// --- Channel state: GET viewers/:viewerId/display-state (and channels/:channelId/display-state) -----
|
||||
//
|
||||
// A registered display asks by its own viewer id, so the server resolves which channel it is assigned
|
||||
// to at that moment. The channel route remains for the management preview and for display code a
|
||||
// kiosk cached before the viewer route existed.
|
||||
|
||||
/** A fresh, signed delivery URL. A bearer capability with an expiry: never persisted by a display. */
|
||||
export interface DisplayMedia {
|
||||
|
||||
+165
-168
@@ -1,9 +1,9 @@
|
||||
import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
|
||||
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 { createSignageApi } from "./api.js";
|
||||
import { useResource } from "./hooks.js";
|
||||
import { createResourceCache, ResourceCacheContext, useResource } from "./hooks.js";
|
||||
import { DisplaysPanel } from "./panels/DisplaysPanel.js";
|
||||
import { ImagesPanel } from "./panels/ImagesPanel.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
|
||||
* hidden button is a courtesy, and every route is enforced regardless of what this believes.
|
||||
*/
|
||||
export function SignageDashboard({
|
||||
context,
|
||||
copyText,
|
||||
}: {
|
||||
readonly context: ModuleUiHostContext;
|
||||
readonly copyText: (value: string) => Promise<void>;
|
||||
export function SignageDashboard(props: {
|
||||
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);
|
||||
// One cache for the life of this screen: everything the panels have loaded, shared between them.
|
||||
const [cache] = useState(createResourceCache);
|
||||
return (
|
||||
<ResourceCacheContext.Provider value={cache}>
|
||||
<SignageWorkspace {...props} />
|
||||
</ResourceCacheContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
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");
|
||||
function SignageWorkspace({
|
||||
context,
|
||||
copyText,
|
||||
}: {
|
||||
readonly context: ModuleUiHostContext;
|
||||
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) {
|
||||
return (
|
||||
<EmptyState
|
||||
description="Ask an administrator for the signage.view permission."
|
||||
title="No access to Signage"
|
||||
/>
|
||||
);
|
||||
}
|
||||
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 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;
|
||||
if (!mayView) {
|
||||
return (
|
||||
<EmptyState
|
||||
description="Ask an administrator for the signage.view permission."
|
||||
title="No access to Signage"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
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>
|
||||
<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",
|
||||
});
|
||||
// Playback opens on what is now true, not on the
|
||||
// timeline it was showing before.
|
||||
cache?.write(
|
||||
`playback/${selectedGroupId}`,
|
||||
await api.get(`playback/${selectedGroupId}`),
|
||||
);
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+71
-4
@@ -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";
|
||||
|
||||
/**
|
||||
@@ -21,15 +21,76 @@ export interface Resource<Value> {
|
||||
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>(
|
||||
load: () => Promise<Value>,
|
||||
dependencies: readonly unknown[],
|
||||
/** Shares this resource with every other panel that names the same key. */
|
||||
key?: string,
|
||||
): 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 loadRef = useRef(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(() => {
|
||||
generation.current += 1;
|
||||
const token = generation.current;
|
||||
@@ -38,7 +99,13 @@ export function useResource<Value>(
|
||||
.then((value) => {
|
||||
// A response from a request the panel has already moved on from must never overwrite a
|
||||
// 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 });
|
||||
}
|
||||
})
|
||||
@@ -58,7 +125,7 @@ export function useResource<Value>(
|
||||
status: "failed",
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
}, [cache, key]);
|
||||
|
||||
// The caller's dependency list is spread deliberately: a resource reloads when *its* inputs
|
||||
// change, which is the whole reason this takes one.
|
||||
|
||||
+18
-20
@@ -14,24 +14,22 @@ import ownStyles from "./styles.css";
|
||||
* rather than bundled (ADR 0039).
|
||||
*/
|
||||
export default defineModuleUi({
|
||||
id: "signage",
|
||||
version: "0.1.4",
|
||||
styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`,
|
||||
mount(container, context) {
|
||||
const root = createRoot(container);
|
||||
root.render(
|
||||
<SignageDashboard
|
||||
context={context}
|
||||
copyText={async (value) => {
|
||||
if (globalThis.navigator.clipboard === undefined) {
|
||||
throw new Error(
|
||||
"Clipboard access is not available in this browser.",
|
||||
);
|
||||
}
|
||||
await globalThis.navigator.clipboard.writeText(value);
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
return () => root.unmount();
|
||||
},
|
||||
id: "signage",
|
||||
version: "0.1.4",
|
||||
styles: `${EKKLESIA_UI_STYLESHEET}\n${ownStyles}`,
|
||||
mount(container, context) {
|
||||
const root = createRoot(container);
|
||||
root.render(
|
||||
<SignageDashboard
|
||||
context={context}
|
||||
copyText={async (value) => {
|
||||
if (globalThis.navigator.clipboard === undefined) {
|
||||
throw new Error("Clipboard access is not available in this browser.");
|
||||
}
|
||||
await globalThis.navigator.clipboard.writeText(value);
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
return () => root.unmount();
|
||||
},
|
||||
});
|
||||
|
||||
+503
-536
File diff suppressed because it is too large
Load Diff
@@ -9,7 +9,7 @@ import {
|
||||
import type { SignageApi } from "../api.js";
|
||||
import { useAction, useResource } from "../hooks.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.
|
||||
@@ -28,7 +28,11 @@ export function ImagesPanel({
|
||||
readonly settings: SettingsResponse;
|
||||
readonly canManage: boolean;
|
||||
}): 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 queueRef = useRef<UploadQueue | undefined>(undefined);
|
||||
const [renaming, setRenaming] = useState<{ id: string; value: string } | undefined>(undefined);
|
||||
@@ -204,13 +208,15 @@ export function ImagesPanel({
|
||||
Rename
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
<ConfirmButton
|
||||
confirmLabel="Delete this image"
|
||||
disabled={remove.pending}
|
||||
onClick={() => remove.run(() => api.send("DELETE", `images/${image.id}`))}
|
||||
variant="danger"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
label="Delete"
|
||||
onConfirm={() =>
|
||||
remove.run(() => api.send("DELETE", `images/${image.id}`))
|
||||
}
|
||||
testId={`signage-image-delete-${image.id}`}
|
||||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
</li>
|
||||
|
||||
+326
-331
@@ -1,29 +1,16 @@
|
||||
import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
|
||||
import {
|
||||
ActionBar,
|
||||
Badge,
|
||||
Button,
|
||||
EmptyState,
|
||||
Field,
|
||||
Panel,
|
||||
Select,
|
||||
} from "@ekklesia/ui";
|
||||
import { type ReactElement, useState } from "react";
|
||||
import { ActionBar, Badge, Button, EmptyState, Field, Panel, Select } from "@ekklesia/ui";
|
||||
import { type ReactElement, useEffect, useRef, useState } from "react";
|
||||
import type { SignageApi } from "../api.js";
|
||||
import { useAction, useResource, useTick } from "../hooks.js";
|
||||
import type {
|
||||
ChannelGroupView,
|
||||
PlaybackDetailView,
|
||||
SettingsResponse,
|
||||
TimelineSummary,
|
||||
ChannelGroupView,
|
||||
PlaybackDetailView,
|
||||
SettingsResponse,
|
||||
TimelineSummary,
|
||||
} from "../types.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.
|
||||
@@ -33,325 +20,333 @@ import {
|
||||
* button, and neither can produce a state the other did not ask for.
|
||||
*/
|
||||
export function PlaybackPanel({
|
||||
api,
|
||||
context,
|
||||
settings,
|
||||
canControl,
|
||||
groupId,
|
||||
onGroupChange,
|
||||
api,
|
||||
context,
|
||||
settings,
|
||||
canControl,
|
||||
groupId,
|
||||
onGroupChange,
|
||||
}: {
|
||||
readonly api: SignageApi;
|
||||
readonly context: ModuleUiHostContext;
|
||||
readonly settings: SettingsResponse;
|
||||
readonly canControl: boolean;
|
||||
readonly groupId: string | undefined;
|
||||
readonly onGroupChange: (groupId: string) => void;
|
||||
readonly api: SignageApi;
|
||||
readonly context: ModuleUiHostContext;
|
||||
readonly settings: SettingsResponse;
|
||||
readonly canControl: boolean;
|
||||
readonly groupId: string | undefined;
|
||||
readonly onGroupChange: (groupId: string) => void;
|
||||
}): ReactElement {
|
||||
const groups = useResource(
|
||||
() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
|
||||
[],
|
||||
);
|
||||
const timelines = useResource(
|
||||
() => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"),
|
||||
[],
|
||||
);
|
||||
const detail = useResource(
|
||||
() =>
|
||||
groupId === undefined
|
||||
? Promise.resolve(undefined)
|
||||
: api.get<PlaybackDetailView>(`playback/${groupId}`),
|
||||
[groupId],
|
||||
);
|
||||
const command = useAction(() => {
|
||||
detail.reload();
|
||||
groups.reload();
|
||||
});
|
||||
const [activateId, setActivateId] = useState("");
|
||||
const previewChannelId =
|
||||
groups.state.status === "ready"
|
||||
? (groups.state.value.groups
|
||||
.find((group) => group.id === groupId)
|
||||
?.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);
|
||||
const groups = useResource(
|
||||
() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
|
||||
[],
|
||||
"channel-groups",
|
||||
);
|
||||
const timelines = useResource(
|
||||
() => api.get<{ timelines: readonly TimelineSummary[] }>("timelines"),
|
||||
[],
|
||||
"timelines",
|
||||
);
|
||||
const detail = useResource(
|
||||
() =>
|
||||
groupId === undefined
|
||||
? Promise.resolve(undefined)
|
||||
: api.get<PlaybackDetailView>(`playback/${groupId}`),
|
||||
[groupId],
|
||||
groupId === undefined ? undefined : `playback/${groupId}`,
|
||||
);
|
||||
const command = useAction(() => {
|
||||
detail.reload();
|
||||
groups.reload();
|
||||
});
|
||||
const [activateId, setActivateId] = useState("");
|
||||
const previewChannelId =
|
||||
groups.state.status === "ready"
|
||||
? (groups.state.value.groups
|
||||
.find((group) => group.id === groupId)
|
||||
?.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 {
|
||||
if (groupId === undefined) {
|
||||
return;
|
||||
}
|
||||
command.run(() => api.send("POST", `playback/${groupId}/${path}`, body));
|
||||
}
|
||||
function run(path: string, body?: unknown): void {
|
||||
if (groupId === undefined) {
|
||||
return;
|
||||
}
|
||||
command.run(() => api.send("POST", `playback/${groupId}/${path}`, body));
|
||||
}
|
||||
|
||||
function timelineLabel(timelineId: string): string {
|
||||
if (timelines.state.status !== "ready") {
|
||||
return timelineId;
|
||||
}
|
||||
return (
|
||||
timelines.state.value.timelines.find(
|
||||
(timeline) => timeline.id === timelineId,
|
||||
)?.name ?? timelineId
|
||||
);
|
||||
}
|
||||
function timelineLabel(timelineId: string): string {
|
||||
if (timelines.state.status !== "ready") {
|
||||
return timelineId;
|
||||
}
|
||||
return (
|
||||
timelines.state.value.timelines.find((timeline) => timeline.id === timelineId)?.name ??
|
||||
timelineId
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="signage-columns signage-playback-layout">
|
||||
<Panel
|
||||
actions={renderLoadable(
|
||||
groups.state,
|
||||
(value) => (
|
||||
<Field label="Channel group">
|
||||
{(control) => (
|
||||
<Select
|
||||
{...control}
|
||||
onChange={(event) => onGroupChange(event.target.value)}
|
||||
value={groupId ?? ""}
|
||||
>
|
||||
{value.groups.map((group) => (
|
||||
<option key={group.id} value={group.id}>
|
||||
{group.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
</Field>
|
||||
),
|
||||
{ label: "Loading groups…" },
|
||||
)}
|
||||
description="One clock for every channel in the group."
|
||||
title="Playback"
|
||||
>
|
||||
{groupId === undefined ? (
|
||||
<EmptyState title="No channel group selected" />
|
||||
) : (
|
||||
renderLoadable(
|
||||
detail.state,
|
||||
(value) =>
|
||||
value === undefined ? (
|
||||
<EmptyState title="No channel group selected" />
|
||||
) : (
|
||||
<div
|
||||
className="signage-playback"
|
||||
data-testid="signage-playback"
|
||||
>
|
||||
<div className="signage-playback__status">
|
||||
{value.snapshot.activeTimelineId === null ? undefined : (
|
||||
<Badge tone="success">
|
||||
{`Active: ${timelineLabel(value.snapshot.activeTimelineId)}`}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge
|
||||
tone={
|
||||
value.snapshot.transport === "playing"
|
||||
? "success"
|
||||
: value.snapshot.transport === "idle"
|
||||
? "warning"
|
||||
: "info"
|
||||
}
|
||||
>
|
||||
{value.snapshot.transport}
|
||||
</Badge>
|
||||
{value.snapshot.blackout ? (
|
||||
<Badge tone="danger">Blackout</Badge>
|
||||
) : undefined}
|
||||
{value.current?.stale === true ? (
|
||||
<Badge tone="warning">Stale</Badge>
|
||||
) : undefined}
|
||||
{value.current?.withdrawn === true ? (
|
||||
<Badge tone="warning">Withdrawn</Badge>
|
||||
) : undefined}
|
||||
{value.snapshot.pendingTimelineId === null ? undefined : (
|
||||
<Badge tone="info">Activation queued</Badge>
|
||||
)}
|
||||
</div>
|
||||
return (
|
||||
<div className="signage-columns signage-playback-layout">
|
||||
<Panel
|
||||
actions={renderLoadable(
|
||||
groups.state,
|
||||
(value) => (
|
||||
<Field label="Channel group">
|
||||
{(control) => (
|
||||
<Select
|
||||
{...control}
|
||||
onChange={(event) => onGroupChange(event.target.value)}
|
||||
value={groupId ?? ""}
|
||||
>
|
||||
{value.groups.map((group) => (
|
||||
<option key={group.id} value={group.id}>
|
||||
{group.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
</Field>
|
||||
),
|
||||
{ label: "Loading groups…" },
|
||||
)}
|
||||
description="One clock for every channel in the group."
|
||||
title="Playback"
|
||||
>
|
||||
{groupId === undefined ? (
|
||||
<EmptyState title="No channel group selected" />
|
||||
) : (
|
||||
renderLoadable(
|
||||
detail.state,
|
||||
(value) =>
|
||||
value === undefined ? (
|
||||
<EmptyState title="No channel group selected" />
|
||||
) : (
|
||||
<div className="signage-playback" data-testid="signage-playback">
|
||||
<div className="signage-playback__status">
|
||||
{value.snapshot.activeTimelineId === null ? undefined : (
|
||||
<Badge tone="success">
|
||||
{`Active: ${timelineLabel(value.snapshot.activeTimelineId)}`}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge
|
||||
tone={
|
||||
value.snapshot.transport === "playing"
|
||||
? "success"
|
||||
: value.snapshot.transport === "idle"
|
||||
? "warning"
|
||||
: "info"
|
||||
}
|
||||
>
|
||||
{value.snapshot.transport}
|
||||
</Badge>
|
||||
{value.snapshot.blackout ? <Badge tone="danger">Blackout</Badge> : undefined}
|
||||
{value.current?.stale === true ? (
|
||||
<Badge tone="warning">Stale</Badge>
|
||||
) : undefined}
|
||||
{value.current?.withdrawn === true ? (
|
||||
<Badge tone="warning">Withdrawn</Badge>
|
||||
) : undefined}
|
||||
{value.snapshot.pendingTimelineId === null ? undefined : (
|
||||
<Badge tone="info">Activation queued</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{value.current === null ? (
|
||||
<EmptyState
|
||||
description="Nothing is currently resolvable. A display shows its safe slate."
|
||||
title="Nothing on screen"
|
||||
/>
|
||||
) : (
|
||||
<section className="signage-playback__now">
|
||||
<h3>Now showing</h3>
|
||||
<dl
|
||||
className="signage-playback__current"
|
||||
data-testid="signage-current"
|
||||
>
|
||||
<dt>Provider</dt>
|
||||
<dd>{value.current.providerId}</dd>
|
||||
<dt>Item</dt>
|
||||
<dd>{value.current.itemId}</dd>
|
||||
<dt>Renderer</dt>
|
||||
<dd>{value.current.rendererContributionId ?? "—"}</dd>
|
||||
<dt>Duration</dt>
|
||||
<dd>{formatDuration(value.current.durationMs)}</dd>
|
||||
<dt>Remaining</dt>
|
||||
<dd data-testid="signage-remaining">
|
||||
{value.snapshot.remainingMs === null
|
||||
? "—"
|
||||
: formatDuration(value.snapshot.remainingMs)}
|
||||
</dd>
|
||||
<dt>Started</dt>
|
||||
<dd>
|
||||
{formatInstant(
|
||||
value.current.startedAtMs,
|
||||
settings.timezone,
|
||||
)}
|
||||
</dd>
|
||||
</dl>
|
||||
</section>
|
||||
)}
|
||||
{value.current === null ? (
|
||||
<EmptyState
|
||||
description="Nothing is currently resolvable. A display shows its safe slate."
|
||||
title="Nothing on screen"
|
||||
/>
|
||||
) : (
|
||||
<section className="signage-playback__now">
|
||||
<h3>Now showing</h3>
|
||||
<dl className="signage-playback__current" data-testid="signage-current">
|
||||
<dt>Provider</dt>
|
||||
<dd>{value.current.providerId}</dd>
|
||||
<dt>Item</dt>
|
||||
<dd>{value.current.itemId}</dd>
|
||||
<dt>Renderer</dt>
|
||||
<dd>{value.current.rendererContributionId ?? "—"}</dd>
|
||||
<dt>Duration</dt>
|
||||
<dd>{formatDuration(value.current.durationMs)}</dd>
|
||||
<dt>Remaining</dt>
|
||||
<dd data-testid="signage-remaining">
|
||||
{value.snapshot.remainingMs === null
|
||||
? "—"
|
||||
: formatDuration(value.snapshot.remainingMs)}
|
||||
</dd>
|
||||
<dt>Started</dt>
|
||||
<dd>{formatInstant(value.current.startedAtMs, settings.timezone)}</dd>
|
||||
</dl>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{canControl ? (
|
||||
<ActionBar
|
||||
className="signage-playback__controls"
|
||||
data-testid="signage-controls"
|
||||
label="Playback controls"
|
||||
>
|
||||
<Button
|
||||
disabled={command.pending}
|
||||
onClick={() => run("previous")}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
{value.snapshot.transport === "paused" ? (
|
||||
<Button
|
||||
disabled={command.pending}
|
||||
onClick={() => run("resume")}
|
||||
variant="primary"
|
||||
>
|
||||
Resume
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
disabled={command.pending}
|
||||
onClick={() => run("pause")}
|
||||
>
|
||||
Pause
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
disabled={command.pending}
|
||||
onClick={() => run("next")}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
<Button
|
||||
disabled={command.pending}
|
||||
onClick={() =>
|
||||
run("blackout", { on: !value.snapshot.blackout })
|
||||
}
|
||||
variant={
|
||||
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 ? (
|
||||
<ActionBar
|
||||
className="signage-playback__controls"
|
||||
data-testid="signage-controls"
|
||||
label="Playback controls"
|
||||
>
|
||||
<Button disabled={command.pending} onClick={() => run("previous")}>
|
||||
Previous
|
||||
</Button>
|
||||
{value.snapshot.transport === "paused" ? (
|
||||
<Button
|
||||
disabled={command.pending}
|
||||
onClick={() => run("resume")}
|
||||
variant="primary"
|
||||
>
|
||||
Resume
|
||||
</Button>
|
||||
) : (
|
||||
<Button disabled={command.pending} onClick={() => run("pause")}>
|
||||
Pause
|
||||
</Button>
|
||||
)}
|
||||
<Button disabled={command.pending} onClick={() => run("next")}>
|
||||
Next
|
||||
</Button>
|
||||
<Button
|
||||
disabled={command.pending}
|
||||
onClick={() => run("blackout", { on: !value.snapshot.blackout })}
|
||||
variant={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 ? (
|
||||
<div className="signage-playback__activate">
|
||||
{renderLoadable(
|
||||
timelines.state,
|
||||
(loaded) => (
|
||||
<>
|
||||
<Field label="Activate timeline">
|
||||
{(control) => (
|
||||
<Select
|
||||
{...control}
|
||||
onChange={(event) =>
|
||||
setActivateId(event.target.value)
|
||||
}
|
||||
value={activateId}
|
||||
>
|
||||
<option value="">Choose a timeline…</option>
|
||||
{loaded.timelines.map((timeline) => (
|
||||
<option
|
||||
key={timeline.id}
|
||||
value={timeline.id}
|
||||
>
|
||||
{timeline.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
</Field>
|
||||
<Button
|
||||
disabled={command.pending || activateId === ""}
|
||||
onClick={() =>
|
||||
run("activate", {
|
||||
timelineId: activateId,
|
||||
when: "now",
|
||||
})
|
||||
}
|
||||
variant="primary"
|
||||
>
|
||||
Now
|
||||
</Button>
|
||||
<Button
|
||||
disabled={command.pending || activateId === ""}
|
||||
onClick={() =>
|
||||
run("activate", {
|
||||
timelineId: activateId,
|
||||
when: "next-boundary",
|
||||
})
|
||||
}
|
||||
>
|
||||
At next slot
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
{ label: "Loading timelines…" },
|
||||
)}
|
||||
</div>
|
||||
) : undefined}
|
||||
{canControl ? (
|
||||
<div className="signage-playback__activate">
|
||||
{renderLoadable(
|
||||
timelines.state,
|
||||
(loaded) => (
|
||||
<>
|
||||
<Field label="Activate timeline">
|
||||
{(control) => (
|
||||
<Select
|
||||
{...control}
|
||||
onChange={(event) => setActivateId(event.target.value)}
|
||||
value={activateId}
|
||||
>
|
||||
<option value="">Choose a timeline…</option>
|
||||
{loaded.timelines.map((timeline) => (
|
||||
<option key={timeline.id} value={timeline.id}>
|
||||
{timeline.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
</Field>
|
||||
<Button
|
||||
disabled={command.pending || activateId === ""}
|
||||
onClick={() =>
|
||||
run("activate", {
|
||||
timelineId: activateId,
|
||||
when: "now",
|
||||
})
|
||||
}
|
||||
variant="primary"
|
||||
>
|
||||
Now
|
||||
</Button>
|
||||
<Button
|
||||
disabled={command.pending || activateId === ""}
|
||||
onClick={() =>
|
||||
run("activate", {
|
||||
timelineId: activateId,
|
||||
when: "next-boundary",
|
||||
})
|
||||
}
|
||||
>
|
||||
At next slot
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
{ label: "Loading timelines…" },
|
||||
)}
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{value.history.length === 0 ? undefined : (
|
||||
<div className="signage-playback__history">
|
||||
<h4 className="signage-editor__subtitle">
|
||||
Recently played
|
||||
</h4>
|
||||
<ul className="ek-list">
|
||||
{value.history.slice(0, 8).map((entry) => (
|
||||
<li
|
||||
className="ek-list__item signage-row"
|
||||
key={entry.id}
|
||||
>
|
||||
<span className="signage-row__name">
|
||||
{entry.itemId}
|
||||
</span>
|
||||
<span className="signage-playback__history-meta">
|
||||
{`${entry.providerId} · ${formatInstant(entry.startedAtMs, settings.timezone)}`}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
{ label: "Loading playback…", onRetry: detail.reload },
|
||||
)
|
||||
)}
|
||||
<FailureNote failure={command.failure} />
|
||||
</Panel>
|
||||
{value.history.length === 0 ? undefined : (
|
||||
<div className="signage-playback__history">
|
||||
<h4 className="signage-editor__subtitle">Recently played</h4>
|
||||
<ul className="ek-list">
|
||||
{value.history.slice(0, 8).map((entry) => (
|
||||
<li className="ek-list__item signage-row" key={entry.id}>
|
||||
<span className="signage-row__name">{entry.itemId}</span>
|
||||
<span className="signage-playback__history-meta">
|
||||
{`${entry.providerId} · ${formatInstant(entry.startedAtMs, settings.timezone)}`}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
{ label: "Loading playback…", onRetry: detail.reload },
|
||||
)
|
||||
)}
|
||||
<FailureNote failure={command.failure} />
|
||||
</Panel>
|
||||
|
||||
<PreviewPanel api={api} channelId={previewChannelId} context={context} />
|
||||
</div>
|
||||
);
|
||||
<PreviewPanel api={api} channelId={previewChannelId} context={context} />
|
||||
</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]);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
|
||||
import { EmptyState, Panel } from "@ekklesia/ui";
|
||||
import { type ReactElement, useEffect, useRef } from "react";
|
||||
import { SignageSlate } from "../../browser/slate.js";
|
||||
import { createMemoryMediaCache, createMemoryStore } from "../../browser/storage.js";
|
||||
import { createDisplayController, type DisplayChannelStateView } from "../../display/controller.js";
|
||||
import type { SignageApi } from "../api.js";
|
||||
|
||||
@@ -36,7 +37,16 @@ export function PreviewPanel({
|
||||
return;
|
||||
}
|
||||
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;
|
||||
|
||||
async function pump(): Promise<void> {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import type { ModuleUiHostContext } from "@ekklesia/module-ui-sdk";
|
||||
import {
|
||||
Badge,
|
||||
EmptyState,
|
||||
Panel,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Badge,
|
||||
EmptyState,
|
||||
Panel,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@ekklesia/ui";
|
||||
import type { ReactElement } from "react";
|
||||
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".
|
||||
*/
|
||||
export function ProvidersPanel({
|
||||
api,
|
||||
context,
|
||||
settings,
|
||||
api,
|
||||
context,
|
||||
settings,
|
||||
}: {
|
||||
readonly api: SignageApi;
|
||||
readonly context: ModuleUiHostContext;
|
||||
readonly settings: SettingsResponse;
|
||||
readonly api: SignageApi;
|
||||
readonly context: ModuleUiHostContext;
|
||||
readonly settings: SettingsResponse;
|
||||
}): ReactElement {
|
||||
const providers = useResource(
|
||||
() => api.get<{ providers: readonly ProviderHealth[] }>("providers"),
|
||||
[],
|
||||
);
|
||||
const published = new Set(
|
||||
context.contributions
|
||||
.list(SLIDE_RENDERER_CAPABILITY)
|
||||
.map((contribution) => contribution.id),
|
||||
);
|
||||
const providers = useResource(
|
||||
() => api.get<{ providers: readonly ProviderHealth[] }>("providers"),
|
||||
[],
|
||||
"providers",
|
||||
);
|
||||
const published = new Set(
|
||||
context.contributions.list(SLIDE_RENDERER_CAPABILITY).map((contribution) => contribution.id),
|
||||
);
|
||||
|
||||
return (
|
||||
<Panel
|
||||
actions={
|
||||
<Badge tone="neutral">{`Contract ${settings.rendererInputVersion}`}</Badge>
|
||||
}
|
||||
description="Running content sources available to timelines."
|
||||
title="Content providers"
|
||||
>
|
||||
{renderLoadable(
|
||||
providers.state,
|
||||
(value) =>
|
||||
value.providers.length === 0 ? (
|
||||
<EmptyState
|
||||
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>
|
||||
<TableRow>
|
||||
<TableCell header>Provider</TableCell>
|
||||
<TableCell header>Contract</TableCell>
|
||||
<TableCell header>Renderer</TableCell>
|
||||
<TableCell header>Health</TableCell>
|
||||
<TableCell header>Last success</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{value.providers.map((provider) => {
|
||||
const rendererPublished = published.has(
|
||||
provider.renderer.contributionId,
|
||||
);
|
||||
const isNative =
|
||||
provider.renderer.contributionId === "signage.native-image";
|
||||
return (
|
||||
<TableRow key={provider.providerId}>
|
||||
<TableCell>
|
||||
<span className="signage-provider__id">
|
||||
{provider.providerId}
|
||||
</span>
|
||||
<span className="signage-provider__version">{`v${provider.providerVersion}`}</span>
|
||||
</TableCell>
|
||||
<TableCell>{provider.contractVersion}</TableCell>
|
||||
<TableCell>
|
||||
{isNative ? (
|
||||
<Badge tone="info">Built in</Badge>
|
||||
) : rendererPublished ? (
|
||||
<Badge tone="success">
|
||||
{provider.renderer.contributionId}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge tone="warning">Renderer not published</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{provider.consecutiveFailures === 0 ? (
|
||||
<Badge tone="success">Healthy</Badge>
|
||||
) : (
|
||||
<Badge tone="danger">
|
||||
{`${provider.consecutiveFailures} failures · ${provider.lastFailureCode ?? "unknown"}`}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{formatInstant(
|
||||
provider.lastSuccessAt,
|
||||
settings.timezone,
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
),
|
||||
{ label: "Loading providers…", onRetry: providers.reload },
|
||||
)}
|
||||
</Panel>
|
||||
);
|
||||
return (
|
||||
<Panel
|
||||
actions={<Badge tone="neutral">{`Contract ${settings.rendererInputVersion}`}</Badge>}
|
||||
description="Running content sources available to timelines."
|
||||
title="Content providers"
|
||||
>
|
||||
{renderLoadable(
|
||||
providers.state,
|
||||
(value) =>
|
||||
value.providers.length === 0 ? (
|
||||
<EmptyState
|
||||
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>
|
||||
<TableRow>
|
||||
<TableCell header>Provider</TableCell>
|
||||
<TableCell header>Contract</TableCell>
|
||||
<TableCell header>Renderer</TableCell>
|
||||
<TableCell header>Health</TableCell>
|
||||
<TableCell header>Last success</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{value.providers.map((provider) => {
|
||||
const rendererPublished = published.has(provider.renderer.contributionId);
|
||||
const isNative = provider.renderer.contributionId === "signage.native-image";
|
||||
return (
|
||||
<TableRow key={provider.providerId}>
|
||||
<TableCell>
|
||||
<span className="signage-provider__id">{provider.providerId}</span>
|
||||
<span className="signage-provider__version">{`v${provider.providerVersion}`}</span>
|
||||
</TableCell>
|
||||
<TableCell>{provider.contractVersion}</TableCell>
|
||||
<TableCell>
|
||||
{isNative ? (
|
||||
<Badge tone="info">Built in</Badge>
|
||||
) : rendererPublished ? (
|
||||
<Badge tone="success">{provider.renderer.contributionId}</Badge>
|
||||
) : (
|
||||
<Badge tone="warning">Renderer not published</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{provider.consecutiveFailures === 0 ? (
|
||||
<Badge tone="success">Healthy</Badge>
|
||||
) : (
|
||||
<Badge tone="danger">
|
||||
{`${provider.consecutiveFailures} failures · ${provider.lastFailureCode ?? "unknown"}`}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{formatInstant(provider.lastSuccessAt, settings.timezone)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
),
|
||||
{ label: "Loading providers…", onRetry: providers.reload },
|
||||
)}
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
+470
-525
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
import { Badge, ErrorState, LoadingState } from "@ekklesia/ui";
|
||||
import type { ReactElement, ReactNode } from "react";
|
||||
import { Badge, Button, ErrorState, LoadingState } from "@ekklesia/ui";
|
||||
import { type ReactElement, type ReactNode, useEffect, useState } from "react";
|
||||
import type { SignageApiFailure } from "../api.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 {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
+422
-414
File diff suppressed because it is too large
Load Diff
@@ -200,7 +200,8 @@ describe("display ↔ server contract", () => {
|
||||
|
||||
const sent = calls.map((call) => `${call.method} ${call.path}`);
|
||||
expect(sent).toContain("POST /viewers/session");
|
||||
expect(sent).toContain("GET /channels/:channelId/display-state");
|
||||
// By viewer, so the server — not the display's memory of its registration — decides the channel.
|
||||
expect(sent).toContain("GET /viewers/:viewerId/display-state");
|
||||
expect(sent).toContain("POST /viewers/:viewerId/heartbeat");
|
||||
// Not one refusal, of any kind, for anything the display built itself.
|
||||
expect(calls.filter((call) => call.status >= 400)).toEqual([]);
|
||||
@@ -220,4 +221,48 @@ describe("display ↔ server contract", () => {
|
||||
expect(viewer?.reportedProviderId).toBe(SIGNAGE_NATIVE_PROVIDER_ID);
|
||||
expect(viewer?.reportedContributionId).toBeNull();
|
||||
});
|
||||
|
||||
it("a display moved to another channel group is served that group's state on its next fetch", async () => {
|
||||
const display = controller();
|
||||
await display.start();
|
||||
await settle();
|
||||
const viewerId = display.diagnostics().viewerId;
|
||||
const firstChannel = display.diagnostics().channelId;
|
||||
expect(viewerId).toBeDefined();
|
||||
|
||||
// An administrator creates a second group and moves this screen to it while it is running.
|
||||
const groupId = newId();
|
||||
const channelId = newId();
|
||||
await store.createChannelGroup({ channelId, channelName: "Default", groupId, name: "Nursery" });
|
||||
await store.updateViewer(viewerId as string, { channelId });
|
||||
|
||||
const response = await host.context.api.request(`viewers/${viewerId}/display-state`);
|
||||
const state = (await response.json()) as { channel: { id: string; groupId: string } };
|
||||
expect(state.channel).toMatchObject({ groupId, id: channelId });
|
||||
expect(channelId).not.toBe(firstChannel);
|
||||
|
||||
// And the heartbeat names the new assignment, which is how a display with a long slot hears.
|
||||
const beat = await host.context.api.request(`viewers/${viewerId}/heartbeat`, {
|
||||
body: JSON.stringify({}),
|
||||
headers: { "content-type": "application/json" },
|
||||
method: "POST",
|
||||
});
|
||||
expect(((await beat.json()) as { channelId?: string }).channelId).toBe(channelId);
|
||||
await display.stop();
|
||||
});
|
||||
|
||||
it("a display whose channel was deleted falls back to the default channel, not to nothing", async () => {
|
||||
const display = controller();
|
||||
await display.start();
|
||||
await settle();
|
||||
const viewerId = display.diagnostics().viewerId as string;
|
||||
await store.updateViewer(viewerId, { channelId: null });
|
||||
|
||||
const response = await host.context.api.request(`viewers/${viewerId}/display-state`);
|
||||
expect(response.status).toBe(200);
|
||||
const [group] = await store.listChannelGroups();
|
||||
const fallback = group?.channels.find((channel) => channel.isDefault);
|
||||
expect(((await response.json()) as { channel: { id: string } }).channel.id).toBe(fallback?.id);
|
||||
await display.stop();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -145,7 +145,7 @@ describe("a display recovers from every failed request without a reload", () =>
|
||||
},
|
||||
{
|
||||
method: "GET",
|
||||
path: "channels/chan-1/display-state",
|
||||
path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
|
||||
respond: () => {
|
||||
server.stateRequests += 1;
|
||||
if (server.stateFailing) {
|
||||
|
||||
@@ -174,7 +174,7 @@ describe("display controller", () => {
|
||||
},
|
||||
{
|
||||
method: "GET",
|
||||
path: "channels/chan-1/display-state",
|
||||
path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
|
||||
respond: () => jsonResponse(state()),
|
||||
},
|
||||
{ method: "POST", path: /^viewers\/.*\/heartbeat$/u, respond: () => jsonResponse({}) },
|
||||
@@ -205,7 +205,7 @@ describe("display controller", () => {
|
||||
{ method: "POST", path: "viewers/session", respond: () => jsonResponse(SESSION) },
|
||||
{
|
||||
method: "GET",
|
||||
path: "channels/chan-1/display-state",
|
||||
path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
|
||||
respond: () => jsonResponse(state()),
|
||||
},
|
||||
{ method: "POST", path: /^viewers\/.*\/heartbeat$/u, respond: () => jsonResponse({}) },
|
||||
@@ -376,6 +376,28 @@ describe("display controller", () => {
|
||||
await controller.stop();
|
||||
});
|
||||
|
||||
it("restores a blackout before the server answers, so a reload never flashes content", async () => {
|
||||
const store = createMemoryStore();
|
||||
const media = createMemoryMediaCache();
|
||||
const online = createFakeHost({ permissions: [], routes: [] });
|
||||
const before = build({ host: online, media, store, telemetry: false });
|
||||
await before.start();
|
||||
await before.apply(state({ playback: { blackout: true } as never }));
|
||||
await settle();
|
||||
await before.stop();
|
||||
|
||||
// A kiosk reloads mid-blackout and its first request has not been answered yet.
|
||||
root.dataset.blackout = "false";
|
||||
const pending = createFakeHost({ permissions: ["signage.display.view"], routes: [] });
|
||||
Object.assign(pending.context.api, { request: () => new Promise<Response>(() => undefined) });
|
||||
const after = build({ host: pending, media, store });
|
||||
void after.start();
|
||||
await settle();
|
||||
|
||||
expect(root.dataset.blackout).toBe("true");
|
||||
await after.stop();
|
||||
});
|
||||
|
||||
it("reports a bounded, sanitized heartbeat and nothing else", async () => {
|
||||
const beats: unknown[] = [];
|
||||
const host = createFakeHost({
|
||||
@@ -384,7 +406,7 @@ describe("display controller", () => {
|
||||
{ method: "POST", path: "viewers/session", respond: () => jsonResponse(SESSION) },
|
||||
{
|
||||
method: "GET",
|
||||
path: "channels/chan-1/display-state",
|
||||
path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
|
||||
respond: () => jsonResponse(state()),
|
||||
},
|
||||
{
|
||||
@@ -428,7 +450,7 @@ describe("display controller", () => {
|
||||
{ method: "POST", path: "viewers/session", respond: () => jsonResponse(SESSION) },
|
||||
{
|
||||
method: "GET",
|
||||
path: "channels/chan-1/display-state",
|
||||
path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
|
||||
respond: () => jsonResponse(state()),
|
||||
},
|
||||
{ method: "POST", path: /^viewers\/.*\/heartbeat$/u, respond: () => jsonResponse({}) },
|
||||
@@ -471,4 +493,146 @@ describe("display controller", () => {
|
||||
expect(controller.diagnostics().renderedSelectionId).toBe("sel-1");
|
||||
await controller.stop();
|
||||
});
|
||||
|
||||
it("follows the server when an administrator moves it to another channel", async () => {
|
||||
const moved = { groupId: "group-2", id: "chan-2", key: "online" };
|
||||
let stateFetches = 0;
|
||||
let realtimeHandlers: { onUpdate?: (state: unknown) => void } | undefined;
|
||||
const host = createFakeHost({
|
||||
permissions: ["signage.display.view"],
|
||||
routes: [
|
||||
{ method: "POST", path: "viewers/session", respond: () => jsonResponse(SESSION) },
|
||||
{
|
||||
method: "GET",
|
||||
path: /^viewers\/[^/]+\/display-state$/u,
|
||||
respond: () => {
|
||||
stateFetches += 1;
|
||||
// Registered on chan-1; moved by an administrator right after its first fetch.
|
||||
return jsonResponse(state(stateFetches === 1 ? {} : { channel: moved }));
|
||||
},
|
||||
},
|
||||
{
|
||||
method: "POST",
|
||||
path: /^viewers\/.*\/heartbeat$/u,
|
||||
respond: () => jsonResponse({ acknowledged: true, channelId: moved.id, recorded: true }),
|
||||
},
|
||||
],
|
||||
});
|
||||
Object.assign(host.context.realtime, {
|
||||
subscribe: (_channel: string, handlers: { onUpdate?: (state: unknown) => void }) => {
|
||||
realtimeHandlers = handlers;
|
||||
return { close: () => undefined };
|
||||
},
|
||||
});
|
||||
const controller = build({ host });
|
||||
await controller.start();
|
||||
await settle();
|
||||
|
||||
// The heartbeat named a different channel, so the display refetched and adopted it.
|
||||
expect(stateFetches).toBe(2);
|
||||
expect(controller.diagnostics().channelId).toBe("chan-2");
|
||||
|
||||
// A change in the old group no longer concerns it; a change in the new one does.
|
||||
realtimeHandlers?.onUpdate?.({
|
||||
groups: [{ groupId: "group-1", revision: 99, selectionRevision: 1 }],
|
||||
});
|
||||
await settle();
|
||||
expect(stateFetches).toBe(2);
|
||||
realtimeHandlers?.onUpdate?.({
|
||||
groups: [{ groupId: "group-2", revision: 99, selectionRevision: 1 }],
|
||||
});
|
||||
await settle();
|
||||
expect(stateFetches).toBe(3);
|
||||
await controller.stop();
|
||||
});
|
||||
|
||||
it("registers again, exactly once, when it was removed from the roster", async () => {
|
||||
let sessions = 0;
|
||||
let subscriptions = 0;
|
||||
let closes = 0;
|
||||
let removed = false;
|
||||
const host = createFakeHost({
|
||||
permissions: ["signage.display.view"],
|
||||
routes: [
|
||||
{
|
||||
method: "POST",
|
||||
path: "viewers/session",
|
||||
respond: () => {
|
||||
sessions += 1;
|
||||
removed = false;
|
||||
return jsonResponse(SESSION);
|
||||
},
|
||||
},
|
||||
{
|
||||
method: "GET",
|
||||
path: /^viewers\/[^/]+\/display-state$/u,
|
||||
respond: () =>
|
||||
removed ? jsonResponse({ code: "SIGNAGE_NOT_FOUND" }, 404) : jsonResponse(state()),
|
||||
},
|
||||
{
|
||||
method: "POST",
|
||||
path: /^viewers\/.*\/heartbeat$/u,
|
||||
respond: () =>
|
||||
removed
|
||||
? jsonResponse({ code: "SIGNAGE_NOT_FOUND" }, 404)
|
||||
: jsonResponse({ acknowledged: true }),
|
||||
},
|
||||
],
|
||||
});
|
||||
let onUpdate: ((state: unknown) => void) | undefined;
|
||||
Object.assign(host.context.realtime, {
|
||||
subscribe: (_channel: string, handlers: { onUpdate?: (state: unknown) => void }) => {
|
||||
subscriptions += 1;
|
||||
onUpdate = handlers.onUpdate;
|
||||
return { close: () => (closes += 1) };
|
||||
},
|
||||
});
|
||||
const controller = build({ host });
|
||||
await controller.start();
|
||||
await settle();
|
||||
expect(sessions).toBe(1);
|
||||
|
||||
// Removed from the roster; a realtime nudge and a heartbeat both discover it at once.
|
||||
removed = true;
|
||||
onUpdate?.({ groups: [{ groupId: "group-1", revision: 50, selectionRevision: 1 }] });
|
||||
onUpdate?.({ groups: [{ groupId: "group-1", revision: 51, selectionRevision: 1 }] });
|
||||
await settle();
|
||||
|
||||
expect(sessions).toBe(2);
|
||||
// One live subscription: the old one closed, exactly one new one opened.
|
||||
expect(subscriptions - closes).toBe(1);
|
||||
expect(controller.diagnostics().renderedSelectionId).toBe("sel-1");
|
||||
await controller.stop();
|
||||
});
|
||||
|
||||
it("treats a 404 that is not Signage's own as an ordinary failure, never a re-registration loop", async () => {
|
||||
let sessions = 0;
|
||||
const host = createFakeHost({
|
||||
permissions: ["signage.display.view"],
|
||||
routes: [
|
||||
{
|
||||
method: "POST",
|
||||
path: "viewers/session",
|
||||
respond: () => {
|
||||
sessions += 1;
|
||||
return jsonResponse(SESSION);
|
||||
},
|
||||
},
|
||||
{
|
||||
method: "GET",
|
||||
path: /^viewers\/[^/]+\/display-state$/u,
|
||||
// A proxy, or a server without this route — not "this viewer is gone".
|
||||
respond: () => jsonResponse({ code: "NOT_FOUND" }, 404),
|
||||
},
|
||||
{ method: "POST", path: /^viewers\/.*\/heartbeat$/u, respond: () => jsonResponse({}) },
|
||||
],
|
||||
});
|
||||
const controller = build({ host });
|
||||
await controller.start();
|
||||
await settle();
|
||||
await settle();
|
||||
|
||||
expect(sessions).toBe(1);
|
||||
await controller.stop();
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -391,7 +391,7 @@ describe("a display that loses its network", () => {
|
||||
},
|
||||
{
|
||||
method: "GET",
|
||||
path: "channels/chan-1/display-state",
|
||||
path: /^(viewers\/[^/]+|channels\/chan-1)\/display-state$/u,
|
||||
respond: () => {
|
||||
if (!reachable) {
|
||||
throw new Error("network is gone");
|
||||
|
||||
@@ -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,
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
+103
-113
@@ -1,10 +1,10 @@
|
||||
import type {
|
||||
ModuleContributionDescriptor,
|
||||
ModuleUiApiClient,
|
||||
ModuleUiContributions,
|
||||
ModuleUiHostContext,
|
||||
MountedModuleContribution,
|
||||
MountModuleContributionOptions,
|
||||
ModuleContributionDescriptor,
|
||||
ModuleUiApiClient,
|
||||
ModuleUiContributions,
|
||||
ModuleUiHostContext,
|
||||
MountedModuleContribution,
|
||||
MountModuleContributionOptions,
|
||||
} from "@ekklesia/module-ui-sdk";
|
||||
|
||||
/**
|
||||
@@ -15,132 +15,122 @@ import type {
|
||||
* simply never match.
|
||||
*/
|
||||
export interface FakeHostRoute {
|
||||
readonly method: string;
|
||||
readonly path: string | RegExp;
|
||||
readonly respond: (request: {
|
||||
readonly path: string;
|
||||
readonly init: RequestInit | undefined;
|
||||
}) => Response | Promise<Response>;
|
||||
readonly method: string;
|
||||
readonly path: string | RegExp;
|
||||
readonly respond: (request: {
|
||||
readonly path: string;
|
||||
readonly init: RequestInit | undefined;
|
||||
}) => Response | Promise<Response>;
|
||||
}
|
||||
|
||||
export interface FakeHost {
|
||||
readonly context: ModuleUiHostContext;
|
||||
readonly requests: { method: string; path: string }[];
|
||||
/** Contributions this host published against Signage's renderer capability. */
|
||||
readonly mounted: { contributionId: string; input: unknown }[];
|
||||
readonly context: ModuleUiHostContext;
|
||||
readonly requests: { method: string; path: string }[];
|
||||
/** Contributions this host published against Signage's renderer capability. */
|
||||
readonly mounted: { contributionId: string; input: unknown }[];
|
||||
}
|
||||
|
||||
export function jsonResponse(body: unknown, status = 200): Response {
|
||||
return new Response(JSON.stringify(body), {
|
||||
headers: { "content-type": "application/json" },
|
||||
status,
|
||||
});
|
||||
return new Response(JSON.stringify(body), {
|
||||
headers: { "content-type": "application/json" },
|
||||
status,
|
||||
});
|
||||
}
|
||||
|
||||
export function errorResponse(
|
||||
code: string,
|
||||
message: string,
|
||||
status = 400,
|
||||
): Response {
|
||||
return jsonResponse({ code, message }, status);
|
||||
export function errorResponse(code: string, message: string, status = 400): Response {
|
||||
return jsonResponse({ code, message }, status);
|
||||
}
|
||||
|
||||
export interface FakeHostOptions {
|
||||
readonly permissions: readonly string[];
|
||||
readonly routes: readonly FakeHostRoute[];
|
||||
readonly contributions?: readonly ModuleContributionDescriptor[];
|
||||
readonly displayUrl?: string;
|
||||
readonly principal?: ModuleUiHostContext["principal"];
|
||||
readonly mount?: (
|
||||
options: MountModuleContributionOptions,
|
||||
) => Promise<MountedModuleContribution> | MountedModuleContribution;
|
||||
readonly permissions: readonly string[];
|
||||
readonly routes: readonly FakeHostRoute[];
|
||||
readonly contributions?: readonly ModuleContributionDescriptor[];
|
||||
readonly displayUrl?: string;
|
||||
readonly principal?: ModuleUiHostContext["principal"];
|
||||
readonly mount?: (
|
||||
options: MountModuleContributionOptions,
|
||||
) => Promise<MountedModuleContribution> | MountedModuleContribution;
|
||||
}
|
||||
|
||||
export function createFakeHost(options: FakeHostOptions): FakeHost {
|
||||
const requests: { method: string; path: string }[] = [];
|
||||
const mounted: { contributionId: string; input: unknown }[] = [];
|
||||
const requests: { method: string; path: string }[] = [];
|
||||
const mounted: { contributionId: string; input: unknown }[] = [];
|
||||
|
||||
const api: ModuleUiApiClient = {
|
||||
async request(path, init) {
|
||||
const method = (init?.method ?? "GET").toUpperCase();
|
||||
const normalized = path.replace(/^\//u, "");
|
||||
requests.push({ method, path: normalized });
|
||||
for (const route of options.routes) {
|
||||
const matches =
|
||||
typeof route.path === "string"
|
||||
? route.path === normalized.split("?")[0]
|
||||
: route.path.test(normalized);
|
||||
if (route.method === method && matches) {
|
||||
return route.respond({ init, path: normalized });
|
||||
}
|
||||
}
|
||||
return errorResponse(
|
||||
"SIGNAGE_NOT_FOUND",
|
||||
"The requested resource was not found.",
|
||||
404,
|
||||
);
|
||||
},
|
||||
};
|
||||
const api: ModuleUiApiClient = {
|
||||
async request(path, init) {
|
||||
const method = (init?.method ?? "GET").toUpperCase();
|
||||
const normalized = path.replace(/^\//u, "");
|
||||
requests.push({ method, path: normalized });
|
||||
for (const route of options.routes) {
|
||||
const matches =
|
||||
typeof route.path === "string"
|
||||
? route.path === normalized.split("?")[0]
|
||||
: route.path.test(normalized);
|
||||
if (route.method === method && matches) {
|
||||
return route.respond({ init, path: normalized });
|
||||
}
|
||||
}
|
||||
return errorResponse("SIGNAGE_NOT_FOUND", "The requested resource was not found.", 404);
|
||||
},
|
||||
};
|
||||
|
||||
const contributions: ModuleUiContributions = {
|
||||
list: (capabilityId) =>
|
||||
capabilityId === "signage.slide-renderer"
|
||||
? (options.contributions ?? [])
|
||||
: [],
|
||||
async mount(mountOptions) {
|
||||
mounted.push({
|
||||
contributionId: mountOptions.contributionId,
|
||||
input: mountOptions.input,
|
||||
});
|
||||
if (options.mount) {
|
||||
return options.mount(mountOptions);
|
||||
}
|
||||
return {
|
||||
contributionId: mountOptions.contributionId,
|
||||
mounted: true,
|
||||
unmount: () => Promise.resolve(),
|
||||
update: () => Promise.resolve(),
|
||||
version: "1.0.0",
|
||||
};
|
||||
},
|
||||
};
|
||||
const contributions: ModuleUiContributions = {
|
||||
list: (capabilityId) =>
|
||||
capabilityId === "signage.slide-renderer" ? (options.contributions ?? []) : [],
|
||||
async mount(mountOptions) {
|
||||
mounted.push({
|
||||
contributionId: mountOptions.contributionId,
|
||||
input: mountOptions.input,
|
||||
});
|
||||
if (options.mount) {
|
||||
return options.mount(mountOptions);
|
||||
}
|
||||
return {
|
||||
contributionId: mountOptions.contributionId,
|
||||
mounted: true,
|
||||
unmount: () => Promise.resolve(),
|
||||
update: () => Promise.resolve(),
|
||||
version: "1.0.0",
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
context: {
|
||||
api,
|
||||
contributions,
|
||||
display: {
|
||||
url: options.displayUrl ?? "https://api.example.test/display/signage",
|
||||
},
|
||||
moduleId: "signage",
|
||||
permissions: {
|
||||
has: (permission) => options.permissions.includes(permission),
|
||||
},
|
||||
principal: options.principal ?? { kind: "anonymous" },
|
||||
realtime: { subscribe: () => ({ close: () => undefined }) },
|
||||
},
|
||||
mounted,
|
||||
requests,
|
||||
};
|
||||
return {
|
||||
context: {
|
||||
api,
|
||||
contributions,
|
||||
display: {
|
||||
url: options.displayUrl ?? "https://api.example.test/display/signage",
|
||||
},
|
||||
moduleId: "signage",
|
||||
permissions: {
|
||||
has: (permission) => options.permissions.includes(permission),
|
||||
},
|
||||
principal: options.principal ?? { kind: "anonymous" },
|
||||
realtime: { subscribe: () => ({ close: () => undefined }) },
|
||||
},
|
||||
mounted,
|
||||
requests,
|
||||
};
|
||||
}
|
||||
|
||||
/** The settings payload every screen loads first. */
|
||||
export const FAKE_SETTINGS = Object.freeze({
|
||||
crossfadeMs: 1000,
|
||||
moduleVersion: "0.1.4",
|
||||
nativeImageDurationMs: 7000,
|
||||
nativePresentation: {
|
||||
backgroundColor: "#000000",
|
||||
backgroundDarkened: false,
|
||||
backgroundMode: "blurred",
|
||||
blurPixels: 20,
|
||||
},
|
||||
rendererInputVersion: "1.0.0",
|
||||
timezone: "America/Chicago",
|
||||
uploads: {
|
||||
batchMaxFiles: 20,
|
||||
concurrency: 3,
|
||||
maxBytes: 26_214_400,
|
||||
maxPixels: 40_000_000,
|
||||
},
|
||||
crossfadeMs: 1000,
|
||||
moduleVersion: "0.1.4",
|
||||
nativeImageDurationMs: 7000,
|
||||
nativePresentation: {
|
||||
backgroundColor: "#000000",
|
||||
backgroundDarkened: false,
|
||||
backgroundMode: "blurred",
|
||||
blurPixels: 20,
|
||||
},
|
||||
rendererInputVersion: "1.0.0",
|
||||
timezone: "America/Chicago",
|
||||
uploads: {
|
||||
batchMaxFiles: 20,
|
||||
concurrency: 3,
|
||||
maxBytes: 26_214_400,
|
||||
maxPixels: 40_000_000,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -65,7 +65,8 @@ function constraintDatabase(existing: readonly { id: string; position: number }[
|
||||
};
|
||||
return {
|
||||
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,
|
||||
positions,
|
||||
};
|
||||
|
||||
@@ -177,6 +177,7 @@ describe("Signage server runtime", () => {
|
||||
"GET /timelines",
|
||||
"GET /timelines/:timelineId",
|
||||
"GET /viewers",
|
||||
"GET /viewers/:viewerId/display-state",
|
||||
"PATCH /images/:imageId",
|
||||
"PATCH /timelines/:timelineId",
|
||||
"PATCH /timelines/:timelineId/slots/:slotId",
|
||||
|
||||
Reference in New Issue
Block a user