@chatwarden/player-react 0.0.0-stage → 0.1.3

package/dist/src/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/ui.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui.js

@@ -0,0 +1,116 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { WARNING_DAYS } from './constants.js';
+import { dayText, timeLeft, untilText } from './format.js';
+import { createT, en } from './i18n.js';
+import { safeHref } from './safeHref.js';
+const DAY = 86_400_000;
+export function useUi({ t, locale = 'en', now, timeZone }) {
+    const words = useMemo(() => t ?? createT(en, locale), [t, locale]);
+    return { t: words, locale, now: now ?? Date.now, timeZone };
+}
+/** Renders `children` where they are, or into `container` when one is given. */
+export function Portal({ container, children }) {
+    return container === undefined || container === null ? _jsx(_Fragment, { children: children }) : createPortal(children, container);
+}
+/** The root every component renders: the one class all the stylesheet's rules are scoped under. */
+export function Root({ theme, className, children }) {
+    return (_jsx("div", { className: className === undefined ? 'cw-player' : `cw-player ${className}`, ...(theme === undefined ? {} : { 'data-cw-theme': theme }), children: children }));
+}
+const CARD_OF = { warning: 'warning', chat: 'restriction', area: 'restriction', ban: 'ban', note: 'note' };
+/**
+ * The referee card: a yellow card for a warning, half yellow and half red for a restriction, red for a ban, and a dashed outline
+ * for a note. The same card as the moderator hub's, so a sanction looks the same to staff and player. Decoration: the kind is
+ * always written beside it. A kind with no card (a thank-you for a report) draws nothing.
+ */
+export function Card({ kind }) {
+    const card = Object.hasOwn(CARD_OF, kind) ? CARD_OF[kind] : undefined;
+    return card === undefined ? null : _jsx("span", { className: `cw-card cw-card--${card}`, "aria-hidden": "true" });
+}
+/** The plain sentence for a failed call. The server's own message is never shown. */
+export function errorText(t, e) {
+    if (e.status === 0)
+        return e.code === 'network' ? t('player.error.network') : t('player.error.generic');
+    if (e.status === 401)
+        return t('player.error.unauthorized');
+    if (e.status === 403)
+        return t('player.error.forbidden');
+    if (e.status === 404)
+        return t('player.error.notFound');
+    if (e.status === 429)
+        return e.retryAfter === undefined ? t('player.error.rateLimited') : t('player.error.rateLimited.after', { count: e.retryAfter });
+    if (e.status >= 500)
+        return t('player.error.server');
+    return t('player.error.generic');
+}
+/** A failed load: what could not be loaded, why, and a way to try again. */
+export function ErrorBlock({ ui, what, error, onRetry }) {
+    return (_jsxs("div", { className: "cw-error", role: "alert", children: [_jsxs("p", { children: [_jsx("strong", { children: what }), " ", errorText(ui.t, error)] }), _jsx("button", { type: "button", className: "cw-btn", onClick: onRetry, children: ui.t('player.state.retry') })] }));
+}
+/** "Think this is a mistake?", when the adopter gave an address that is safe to link to. */
+export function AppealLink({ ui, href }) {
+    const safe = safeHref(href);
+    if (safe === null)
+        return null;
+    return (_jsx("p", { className: "cw-appeal", children: _jsx("a", { className: "cw-link", href: safe, target: "_blank", rel: "noopener noreferrer", children: ui.t('player.notice.appeal') }) }));
+}
+const TITLE = {
+    warning: 'player.notice.title.warning',
+    chat: 'player.notice.title.chat',
+    area: 'player.notice.title.area',
+    ban: 'player.notice.title.ban',
+    report_outcome: 'player.notice.title.report_outcome',
+};
+const BODY = {
+    warning: 'player.notice.body.warning',
+    chat: 'player.notice.body.chat',
+    area: 'player.notice.body.area',
+    ban: 'player.notice.body.ban',
+    report_outcome: 'player.notice.body.report_outcome',
+};
+const KIND = {
+    warning: 'player.record.kind.warning',
+    chat: 'player.record.kind.chat',
+    area: 'player.record.kind.area',
+    ban: 'player.record.kind.ban',
+};
+export const titleKey = (kind) => (Object.hasOwn(TITLE, kind) ? TITLE[kind] : 'player.notice.title.fallback');
+export const bodyKey = (kind) => (Object.hasOwn(BODY, kind) ? BODY[kind] : 'player.notice.body.fallback');
+export const kindKey = (kind) => (Object.hasOwn(KIND, kind) ? KIND[kind] : 'player.record.kind.fallback');
+/** A sanction a player can contest (a thank-you for a report is not one). */
+export const isSanction = (kind) => kind === 'warning' || kind === 'chat' || kind === 'area' || kind === 'ban';
+/** The facts of a notice, as a term list: the rule, when it was given (the record only), until when, and the reference code. */
+export function Facts({ ui, notice, record = false }) {
+    const { t, locale, timeZone } = ui;
+    const rows = [];
+    if (notice.ruleLabel !== null)
+        rows.push([t('player.notice.rule'), notice.ruleLabel]);
+    if (record)
+        rows.push([t('player.notice.given'), untilText(notice.createdAt, locale, timeZone)]);
+    if (notice.kind === 'warning') {
+        // A warning has no end of its own: it stays on the record for 90 days from when it was made.
+        rows.push([t('player.notice.onRecordUntil'), untilText(notice.createdAt + WARNING_DAYS * DAY, locale, timeZone)]);
+    }
+    else if (isSanction(notice.kind) || notice.until !== null) {
+        if (notice.until === null)
+            rows.push([t('player.notice.until'), t('player.notice.noEnd')]);
+        else {
+            const when = untilText(notice.until, locale, timeZone);
+            const left = timeLeft(notice.until, ui.now(), locale);
+            rows.push(left === null ? [t('player.notice.ended'), when] : [t('player.notice.until'), t('player.notice.untilLeft', { when, left })]);
+        }
+    }
+    if (notice.refCode !== null)
+        rows.push([t('player.notice.ref'), notice.refCode]);
+    if (rows.length === 0)
+        return null;
+    return (_jsx("dl", { className: "cw-facts", children: rows.map(([term, value]) => (_jsxs("div", { className: "cw-fact", children: [_jsx("dt", { children: term }), _jsx("dd", { children: value })] }, term))) }));
+}
+/** The player's own lines that led to a notice, as text with their day. Never HTML. */
+export function Lines({ ui, notice, id }) {
+    if (notice.excerpt.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("p", { id: id, className: "cw-lines-label", children: ui.t('player.notice.lines') }), _jsx("ul", { className: "cw-lines", "aria-labelledby": id, children: notice.excerpt.map((line, i) => (_jsxs("li", { children: [_jsx("span", { className: "cw-line-day", children: dayText(line.day, ui.locale) }), _jsx("span", { className: "cw-line-text", children: line.text })] }, i))) })] }));
+}
+//# sourceMappingURL=ui.js.map

package/dist/src/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/ui.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@chatwarden/player-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.3",
+  "private": false,
+  "description": "Player-facing React components for Chatwarden: the notice dialog, My record, the rules page, a report dialog and a restricted-chat line, over the player HTTP routes.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "engines": {
+    "node": ">=22.13"
+  },
+  "keywords": [
+    "chatwarden",
+    "moderation",
+    "chat",
+    "react",
+    "player",
+    "notices"
+  ],
+  "homepage": "https://github.com/hainix/chatwarden/tree/main/packages/player-react#readme",
+  "bugs": {
+    "url": "https://github.com/hainix/chatwarden/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hainix/chatwarden.git",
+    "directory": "packages/player-react"
+  },
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "sideEffects": [
+    "./src/styles.css"
+  ],
+  "files": [
+    "dist/src",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "prepack": "tsc -b"
+  },
+  "peerDependencies": {
+    "@chatwarden/core": "^0.1.2",
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@chatwarden/core": "0.1.3",
+    "@chatwarden/http": "0.1.3",
+    "@chatwarden/hub-react": "0.1.3",
+    "@chatwarden/store-memory": "0.1.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.9",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "axe-core": "^4.14.0",
+    "esbuild": "0.28.2",
+    "jsdom": "^29.1.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "~5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Dialog.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import type { KeyboardEvent, ReactNode, RefObject } from 'react';
+
+// A modal window: it takes focus when it opens, keeps focus inside, and hands focus back to what had it. It is a plain ARIA dialog
+// (not <dialog>), so it works the same in every embedded browser a game may use. A click outside never closes it: a notice has to
+// be acknowledged, and a half-written report is not lost by a stray click.
+//
+// Focus is kept in three ways, because Tab alone is not enough: the keydown handler wraps Tab at the ends, a click on the backdrop
+// does not move focus (mousedown is cancelled), and a document-wide `focusin` guard pulls focus back if anything outside the window
+// gets it (a script, a click on a game control that is still reachable).
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/** The controls Tab visits, in order. */
+const tabStops = (box: HTMLElement): HTMLElement[] => [...box.querySelectorAll<HTMLElement>(FOCUSABLE)];
+
+export function Dialog({
+  labelledBy,
+  initialFocus,
+  onEscape,
+  returnFocusTo,
+  children,
+}: {
+  /** The id of the heading that names the window. */
+  labelledBy: string;
+  /** What takes focus when it opens: the heading. */
+  initialFocus: RefObject<HTMLElement | null>;
+  /** Called on Escape. Leave it out when the window must not be dismissed. */
+  onEscape?: () => void;
+  /** Where focus goes on close when the element that had it before is gone. */
+  returnFocusTo?: () => HTMLElement | null;
+  children: ReactNode;
+}) {
+  const box = useRef<HTMLDivElement>(null);
+  const fallback = useRef(returnFocusTo);
+  fallback.current = returnFocusTo;
+  // What had focus before the window opened, read while rendering for the first time: a child's own effect (which moves focus to
+  // its heading) runs before this component's effects, so reading it in an effect would find the heading.
+  const [before] = useState<Element | null>(() => (typeof document === 'undefined' ? null : document.activeElement));
+
+  useEffect(() => {
+    (initialFocus.current ?? box.current)?.focus();
+    const onFocusIn = (e: FocusEvent): void => {
+      const target = e.target;
+      const inner = box.current;
+      if (inner !== null && target instanceof Node && !inner.contains(target)) (initialFocus.current ?? inner).focus();
+    };
+    document.addEventListener('focusin', onFocusIn);
+    return () => {
+      // Stop guarding first, so giving focus back is not pulled in again.
+      document.removeEventListener('focusin', onFocusIn);
+      // Give focus back, unless what had it is gone (the page moved on while the window was open): then to `returnFocusTo()`, if
+      // the host gave one, and otherwise to wherever the browser leaves it (the page body).
+      if (before instanceof HTMLElement && before.isConnected) before.focus();
+      else {
+        try {
+          fallback.current?.()?.focus();
+        } catch {
+          // A host callback that throws must not stop the window closing.
+        }
+      }
+    };
+    // Once, when the window opens.
+  }, []);
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {
+    if (e.key === 'Escape') {
+      if (onEscape === undefined) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onEscape();
+      return;
+    }
+    if (e.key !== 'Tab' || box.current === null) return;
+    const items = tabStops(box.current);
+    if (items.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = items[0] as HTMLElement;
+    const last = items[items.length - 1] as HTMLElement;
+    const active = document.activeElement;
+    // From the heading (or the box), which is not in the list, Tab goes to the first control and Shift+Tab to the last.
+    const inList = items.includes(active as HTMLElement);
+    if (e.shiftKey && (active === first || !inList)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && (active === last || !inList)) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+
+  return (
+    <div
+      className="cw-scrim"
+      onMouseDown={(e) => {
+        // A press on the backdrop would drop focus to the page body, and the next Tab would leave the window: keep it where it is.
+        if (e.target === e.currentTarget) e.preventDefault();
+      }}
+    >
+      <div ref={box} className="cw-dialog" role="dialog" aria-modal="true" aria-labelledby={labelledBy} tabIndex={-1} onKeyDown={onKeyDown}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/MyRecord.tsx

@@ -0,0 +1,60 @@
+import { useId } from 'react';
+import type { PlayerClient } from './client.js';
+import { usePlayerData } from './hooks.js';
+import { WARNING_DAYS } from './constants.js';
+import { AppealLink, Card, ErrorBlock, Facts, kindKey, Lines, Root, useUi } from './ui.js';
+import type { PlayerUiProps } from './ui.js';
+
+export interface MyRecordProps extends PlayerUiProps {
+  client: PlayerClient;
+  /** Where "Think this is a mistake?" goes: an `http(s)` address or a path starting with `/`. Left out when absent or unsafe. */
+  appealUrl?: string;
+  /** Change it to load the record again. */
+  refreshKey?: number | string;
+}
+
+/** "My record": what is on the player's record now, newest first, from `GET /record`; or a calm line when it is clear. */
+export function MyRecord(props: MyRecordProps) {
+  const { client, appealUrl, refreshKey, theme, className } = props;
+  const ui = useUi(props);
+  const { t } = ui;
+  const state = usePlayerData(() => client.record(), refreshKey);
+  const titleId = useId();
+  const linesId = useId();
+  const items = state.data === undefined ? [] : [...state.data].sort((a, b) => b.createdAt - a.createdAt);
+
+  return (
+    <Root theme={theme} className={className}>
+      <section className="cw-section" aria-labelledby={titleId}>
+        <h2 id={titleId} className="cw-title">
+          {t('player.record.title')}
+        </h2>
+        {state.error !== null && <ErrorBlock ui={ui} what={t('player.record.loadFailed')} error={state.error} onRetry={state.reload} />}
+        {state.data === undefined && state.error === null && (
+          <p className="cw-state" role="status">
+            {t('player.record.loading')}
+          </p>
+        )}
+        {state.data !== undefined && items.length === 0 && <p className="cw-state">{t('player.record.empty')}</p>}
+        {items.length > 0 && (
+          <>
+            <p className="cw-body">{t('player.record.intro', { days: WARNING_DAYS })}</p>
+            <AppealLink ui={ui} href={appealUrl} />
+            <ul className="cw-items" aria-labelledby={titleId}>
+              {items.map((notice, i) => (
+                <li key={notice.id} className="cw-item">
+                  <div className="cw-head">
+                    <Card kind={notice.kind} />
+                    <h3 className="cw-kind">{t(kindKey(notice.kind))}</h3>
+                  </div>
+                  <Facts ui={ui} notice={notice} record />
+                  <Lines ui={ui} notice={notice} id={`${linesId}-${i}`} />
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </section>
+    </Root>
+  );
+}

package/src/NoticeQueue.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { RefObject } from 'react';
+import type { PlayerNotice } from '@chatwarden/core';
+import { toPlayerError } from './client.js';
+import type { PlayerClient, PlayerError } from './client.js';
+import { Dialog } from './Dialog.js';
+import { usePlayerData } from './hooks.js';
+import { AppealLink, bodyKey, Card, errorText, Facts, isSanction, Lines, Portal, Root, titleKey, useUi } from './ui.js';
+import type { DialogHostProps, PlayerUiProps, Ui } from './ui.js';
+
+export interface NoticeQueueProps extends PlayerUiProps, DialogHostProps {
+  client: PlayerClient;
+  /**
+   * Whether a notice may appear now. Pass `false` during a match: notices are held (kept, not dropped, not acknowledged) and
+   * appear, oldest first, when it turns `true` again; the list is asked for once more at that moment, so a notice that arrived during
+   * the match is not missed. Default: `true`.
+   */
+  canShow?: boolean;
+  /** Where "Think this is a mistake?" goes: an `https` address or a relative one (`/appeal`). Left out when absent or unsafe. */
+  appealUrl?: string;
+  /** Change it to ask the server again (for example when your own push channel says a notice is pending). */
+  refreshKey?: number | string;
+  /** Called once for each notice the player acknowledged. */
+  onAcknowledged?: (notice: PlayerNotice) => void;
+  /** Called with how many notices are waiting (shown or held) each time that number changes, after the first load. */
+  onPendingChange?: (count: number) => void;
+}
+
+/**
+ * Shows the player's pending notices, oldest first, one at a time in a modal dialog. Every notice is acknowledged (a warning with
+ * "Acknowledge", the others with "Got it"); the dialog closes after the last one and focus returns to where it was.
+ */
+export function NoticeQueue(props: NoticeQueueProps) {
+  const { client, canShow = true, appealUrl, refreshKey, onAcknowledged, onPendingChange, theme, className, container, returnFocusTo } = props;
+  const ui = useUi(props);
+  const state = usePlayerData(() => client.notices(), refreshKey);
+  // The ids acknowledged since this list arrived. A newer list replaces both, so the server stays the truth.
+  const [done, setDone] = useState<{ list: PlayerNotice[] | undefined; ids: readonly string[] }>({ list: undefined, ids: [] });
+  const gone = done.list === state.data ? done.ids : [];
+  const queue = (state.data ?? []).filter((n) => !gone.includes(n.id)).sort((a, b) => a.createdAt - b.createdAt);
+  const count = queue.length;
+  const loaded = state.data !== undefined;
+  // "Close for now" after a failed acknowledge hides the queue until a newer list arrives (a refresh, or the next release of a hold).
+  const [later, setLater] = useState<PlayerNotice[] | undefined>(undefined);
+  const titleId = useId();
+  const heading = useRef<HTMLHeadingElement>(null);
+  const reload = state.reload;
+
+  // Releasing a hold asks the server once more: a warning that landed during the match must be seen before the next one.
+  const wasShown = useRef(canShow);
+  useEffect(() => {
+    if (canShow && !wasShown.current) reload();
+    wasShown.current = canShow;
+  }, [canShow, reload]);
+
+  const told = useRef(onPendingChange);
+  told.current = onPendingChange;
+  useEffect(() => {
+    if (loaded) told.current?.(count);
+  }, [loaded, count]);
+
+  if (!canShow) return null;
+  if (state.data === undefined) {
+    if (state.error === null) return null;
+    return (
+      <Root theme={theme} className={className}>
+        <div className="cw-error" role="alert">
+          <p>
+            <strong>{ui.t('player.notices.loadFailed')}</strong> {errorText(ui.t, state.error)}
+          </p>
+          <button type="button" className="cw-btn" onClick={state.reload}>
+            {ui.t('player.state.retry')}
+          </button>
+        </div>
+      </Root>
+    );
+  }
+  const current = queue[0];
+  if (current === undefined || later === state.data) return null;
+
+  const acknowledged = (notice: PlayerNotice): void => {
+    setDone({ list: state.data, ids: [...gone, notice.id] });
+    onAcknowledged?.(notice);
+  };
+
+  return (
+    <Portal container={container}>
+    <Root theme={theme} className={className}>
+      {/* One dialog for the whole queue: it opens once and closes once, so focus comes back to where it was after the last notice. */}
+      <Dialog labelledBy={titleId} initialFocus={heading} {...(returnFocusTo === undefined ? {} : { returnFocusTo })}>
+        <NoticeCard
+          key={current.id}
+          ui={ui}
+          client={client}
+          notice={current}
+          total={count}
+          appealUrl={appealUrl}
+          titleId={titleId}
+          heading={heading}
+          onDone={acknowledged}
+          onLater={() => setLater(state.data)}
+        />
+      </Dialog>
+    </Root>
+    </Portal>
+  );
+}
+
+function NoticeCard({
+  ui,
+  client,
+  notice,
+  total,
+  appealUrl,
+  titleId,
+  heading,
+  onDone,
+  onLater,
+}: {
+  ui: Ui;
+  client: PlayerClient;
+  notice: PlayerNotice;
+  /** How many notices are waiting, this one included. It is always the first. */
+  total: number;
+  appealUrl: string | undefined;
+  titleId: string;
+  heading: RefObject<HTMLHeadingElement | null>;
+  onDone: (notice: PlayerNotice) => void;
+  onLater: () => void;
+}) {
+  const { t } = ui;
+  const linesId = useId();
+  const sending = useRef(false);
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState<PlayerError | null>(null);
+
+  // Each notice, not only the first, takes focus at its heading: it is what a screen reader should read next.
+  useEffect(() => heading.current?.focus(), []);
+
+  const acknowledge = async (): Promise<void> => {
+    // One request at a time: a second click, or a second Enter, while one is on its way does nothing.
+    if (sending.current) return;
+    sending.current = true;
+    setBusy(true);
+    setFailure(null);
+    try {
+      await client.ack(notice.id);
+      // `false` (a 200 that is not ours) and a 404 both mean the notice is no longer pending: it is done.
+      onDone(notice);
+    } catch (e) {
+      const error = toPlayerError(e);
+      if (error.status === 404) onDone(notice);
+      else setFailure(error);
+    } finally {
+      sending.current = false;
+      setBusy(false);
+    }
+  };
+
+  const mustAck = notice.kind === 'warning' || notice.mustAcknowledge;
+  return (
+    <>
+      {/* Always drawn, so a screen reader that has seen it empty hears it when a second notice arrives. */}
+      <p className="cw-position" aria-live="polite">
+        {total > 1 ? t('player.notice.position', { n: 1, total }) : null}
+      </p>
+      <div className="cw-head">
+        <Card kind={notice.kind} />
+        <h2 id={titleId} ref={heading} className="cw-title" tabIndex={-1}>
+          {t(titleKey(notice.kind))}
+        </h2>
+      </div>
+      <p className="cw-body">{t(bodyKey(notice.kind))}</p>
+      <Facts ui={ui} notice={notice} />
+      {notice.refCode !== null && <p className="cw-hint">{t('player.notice.refHint')}</p>}
+      <Lines ui={ui} notice={notice} id={linesId} />
+      {isSanction(notice.kind) && <AppealLink ui={ui} href={appealUrl} />}
+      {mustAck && <p className="cw-hint">{t('player.notice.todo.warning')}</p>}
+      {failure !== null && (
+        <div className="cw-error" role="alert">
+          <p>
+            {t('player.notice.ackFailed')} {errorText(t, failure)}
+          </p>
+          {/* The main button below tries again; this is the way out when it keeps failing. The notice stays pending. */}
+          <button type="button" className="cw-btn" onClick={onLater}>
+            {t('player.notice.closeForNow')}
+          </button>
+        </div>
+      )}
+      <div className="cw-actions">
+        <button
+          type="button"
+          className="cw-btn cw-btn--primary"
+          aria-disabled={busy || undefined}
+          aria-busy={busy || undefined}
+          onClick={() => void acknowledge()}
+        >
+          {t(mustAck ? 'player.notice.acknowledge' : 'player.notice.gotIt')}
+        </button>
+      </div>
+    </>
+  );
+}