@openbrf/display 0.0.0-stage → 0.1.1

package/src/styles.ts

@@ -0,0 +1,113 @@
+/**
+ * The renderer's stylesheet.
+ *
+ * Its colours, type, shape and motion are the default theme's (Porttavlan,
+ * from `@openbrf/tokens`), so a screen looks like the association's own pages,
+ * and every pair it sets on another is one the token contract holds to WCAG
+ * AA. Dates, times and apartment numbers are in the data face, as everywhere
+ * else (DESIGN.md, the Mono-Grid Rule).
+ * A screen is read from across a stairwell, so every size is a fraction of the
+ * canvas's shorter side (`--obrf-display-u`, a hundredth of it), which the
+ * renderer sets from the element it is mounted on.
+ *
+ * Every class starts with `obrf-display`, so the sheet restyles nothing of the
+ * page it is mounted in.
+ */
+import {
+  PORTTAVLAN_DARK,
+  PORTTAVLAN_LIGHT,
+  type TokenSet,
+} from "@openbrf/tokens";
+import { ELSEWHERE_ATTRIBUTE } from "./fit.ts";
+
+function palette(tokens: TokenSet): string {
+  return [
+    `--obrf-display-ground: ${tokens["surface-page"]};`,
+    `--obrf-display-panel: ${tokens["surface-raised"]};`,
+    `--obrf-display-ink: ${tokens["text-primary"]};`,
+    `--obrf-display-muted: ${tokens["text-secondary"]};`,
+    `--obrf-display-accent: ${tokens["accent-trust"]};`,
+    `--obrf-display-danger: ${tokens["status-danger"]};`,
+    `--obrf-display-on-danger: ${tokens["on-status-danger"]};`,
+    `--obrf-display-rule: ${tokens["border-subtle"]};`,
+    `--obrf-display-font: ${tokens["font-ui"]};`,
+    `--obrf-display-data-font: ${tokens["font-data"]};`,
+    `--obrf-display-radius-control: ${tokens["radius-control"]};`,
+    `--obrf-display-radius-panel: ${tokens["radius-panel"]};`,
+    `--obrf-display-motion-duration: ${tokens["motion-duration"]};`,
+    `--obrf-display-motion-easing: ${tokens["motion-easing"]};`,
+  ].join(" ");
+}
+
+const u = (times: number): string => `calc(var(--obrf-display-u) * ${times})`;
+
+/**
+ * The stylesheet `mountRenderer` adds to the document once, as a `<style>`
+ * element with the attribute `data-obrf-display`. Exported for a page that
+ * would rather serve it as a file of its own, as a page under a strict content
+ * security policy has to: it passes `stylesheet: false` to `mountRenderer` and
+ * links the file with the same attribute. Written for Chromium 85, so a
+ * selector list inside `:not()`, `inset` and the like stay out of it.
+ */
+export const DISPLAY_STYLESHEET = `
+.obrf-display { --obrf-display-u: 1vmin; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--obrf-display-ground); color: var(--obrf-display-ink); font-family: var(--obrf-display-font); }
+.obrf-display--light { ${palette(PORTTAVLAN_LIGHT)} color-scheme: light; }
+.obrf-display--dark { ${palette(PORTTAVLAN_DARK)} color-scheme: dark; }
+.obrf-display [hidden] { display: none !important; }
+.obrf-display [${ELSEWHERE_ATTRIBUTE}]:not(td):not(th) { display: none !important; }
+.obrf-display *, .obrf-display *::before, .obrf-display *::after { box-sizing: border-box; }
+.obrf-display-canvas { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: ${u(2.5)}; padding: ${u(4)} ${u(5)}; font-size: ${u(3.4)}; line-height: 1.3; }
+.obrf-display-clock { display: flex; justify-content: space-between; align-items: baseline; gap: ${u(3)}; padding-bottom: ${u(1.5)}; border-bottom: ${u(0.25)} solid var(--obrf-display-rule); color: var(--obrf-display-muted); font-size: ${u(3.6)}; }
+.obrf-display-clock, .obrf-display-date, .obrf-display-when, .obrf-display-door-apartment, .obrf-display-data { font-family: var(--obrf-display-data-font); }
+.obrf-display-clock-time { color: var(--obrf-display-ink); font-size: ${u(5)}; font-weight: 700; font-variant-numeric: tabular-nums; }
+.obrf-display-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
+.obrf-display-slide { display: flex; flex-direction: column; gap: ${u(2.5)}; height: 100%; min-height: 0; overflow: hidden; font-size: ${u(3.4)}; }
+.obrf-display-slide--enter { animation: obrf-display-enter var(--obrf-display-motion-duration) var(--obrf-display-motion-easing); }
+@keyframes obrf-display-enter { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .obrf-display-slide--enter { animation: none; } }
+.obrf-display-heading { margin: 0; font-size: ${u(6.5)}; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
+.obrf-display-subheading { margin: 0; font-size: ${u(4)}; font-weight: 700; color: var(--obrf-display-muted); }
+.obrf-display-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
+.obrf-display-muted { color: var(--obrf-display-muted); }
+.obrf-display-date { margin: 0; color: var(--obrf-display-accent); font-weight: 700; }
+.obrf-display-news { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
+.obrf-display-news--picture { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: ${u(5)}; }
+.obrf-display--portrait .obrf-display-news--picture { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
+.obrf-display-copy { display: flex; flex-direction: column; gap: ${u(2)}; min-height: 0; overflow: hidden; }
+.obrf-display-picture { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
+.obrf-display-figure { display: flex; flex-direction: column; gap: ${u(2)}; height: 100%; margin: 0; }
+.obrf-display-figure .obrf-display-picture { flex: 1 1 auto; }
+.obrf-display-caption { font-size: ${u(4)}; text-align: center; }
+.obrf-display-list { display: flex; flex-direction: column; gap: ${u(2)}; margin: 0; padding: 0; list-style: none; }
+.obrf-display-event { display: grid; grid-template-columns: ${u(24)} minmax(0, 1fr); gap: ${u(3)}; padding-bottom: ${u(1.5)}; border-bottom: ${u(0.2)} solid var(--obrf-display-rule); }
+.obrf-display-when { display: flex; flex-direction: column; color: var(--obrf-display-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
+.obrf-display-what { grid-column: 2; display: flex; flex-direction: column; gap: ${u(0.5)}; min-width: 0; }
+.obrf-display-title { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
+.obrf-display-event--called-off .obrf-display-title { text-decoration: line-through; }
+.obrf-display-description { margin: 0; color: var(--obrf-display-muted); font-size: ${u(2.8)}; white-space: pre-line; overflow-wrap: anywhere; }
+.obrf-display-badge { align-self: flex-start; padding: 0 ${u(1)}; border-radius: var(--obrf-display-radius-control); background: var(--obrf-display-danger); color: var(--obrf-display-on-danger); font-weight: 700; }
+.obrf-display-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: ${u(1)} ${u(3)}; margin: 0; }
+.obrf-display-facts dt { grid-column: 1; color: var(--obrf-display-muted); }
+.obrf-display-facts dd { grid-column: 2; margin: 0; font-weight: 700; white-space: pre-line; overflow-wrap: anywhere; }
+.obrf-display-agenda { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: ${u(5)}; font-size: ${u(3)}; }
+.obrf-display--portrait .obrf-display-agenda { columns: 1; }
+.obrf-display-agenda li { break-inside: avoid; display: flex; gap: ${u(1.5)}; }
+.obrf-display-agenda-position { min-width: ${u(4)}; color: var(--obrf-display-muted); font-variant-numeric: tabular-nums; }
+.obrf-display-resources { display: grid; grid-template-columns: repeat(auto-fill, minmax(${u(52)}, 1fr)); gap: ${u(2)}; margin: 0; padding: 0; list-style: none; }
+.obrf-display-resource { display: flex; flex-direction: column; gap: ${u(0.8)}; padding: ${u(1.5)} ${u(2)}; border-radius: var(--obrf-display-radius-panel); background: var(--obrf-display-panel); }
+.obrf-display-day { display: flex; margin: 0; flex-wrap: wrap; gap: ${u(0.5)} ${u(1.5)}; font-size: ${u(2.8)}; }
+.obrf-display-day-label { min-width: ${u(14)}; color: var(--obrf-display-muted); }
+.obrf-display-busy { font-weight: 700; font-variant-numeric: tabular-nums; }
+.obrf-display-table { width: 100%; border-collapse: collapse; }
+.obrf-display-table th, .obrf-display-table td { padding: ${u(0.8)} ${u(1.5)}; border-bottom: ${u(0.2)} solid var(--obrf-display-rule); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+.obrf-display-table th { color: var(--obrf-display-muted); }
+.obrf-display-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(${u(30)}, 1fr)); gap: ${u(1.5)}; margin: 0; padding: 0; list-style: none; font-size: ${u(2.8)}; }
+.obrf-display-door { display: flex; flex-direction: column; padding: ${u(1)} ${u(1.5)}; border-radius: var(--obrf-display-radius-panel); background: var(--obrf-display-panel); }
+.obrf-display-door-apartment { font-weight: 700; }
+.obrf-display-message { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${u(3)}; height: 100%; text-align: center; }
+.obrf-display-message-title { margin: 0; font-size: ${u(7)}; font-weight: 700; }
+.obrf-display-empty { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; color: var(--obrf-display-muted); font-size: ${u(4)}; }
+.obrf-display-message-detail { max-width: 40ch; margin: 0; color: var(--obrf-display-muted); font-size: ${u(4)}; }
+.obrf-display-note { position: absolute; right: ${u(2)}; bottom: ${u(1.2)}; color: var(--obrf-display-muted); font-size: ${u(2.2)}; }
+.obrf-display-off { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: black; }
+`;

package/src/text.ts

@@ -0,0 +1,65 @@
+/**
+ * Shortening a text to a limit of the contract, the way the contract says:
+ * ending it with "…", the ellipsis counted within the limit.
+ *
+ * Measured in UTF-16 code units, which is never more lenient than the
+ * contract's code points, and never cutting a surrogate pair in two.
+ */
+
+const ELLIPSIS = "…";
+
+/** The text cut to leave room for the ellipsis within `max`, and the ellipsis. */
+function withEllipsis(text: string, max: number): string {
+  if (max < 1) {
+    return "";
+  }
+  let base = text.trimEnd();
+  if (base.length + 1 > max) {
+    let cut = max - 1;
+    const last = base.charCodeAt(cut - 1);
+    if (last >= 0xd800 && last <= 0xdbff) {
+      cut -= 1;
+    }
+    base = base.slice(0, cut).trimEnd();
+  }
+  return `${base}${ELLIPSIS}`;
+}
+
+/** The text as it is when within `max`, and otherwise shortened to it with "…". */
+export function shortenText(text: string, max: number): string {
+  return text.length <= max ? text : withEllipsis(text, max);
+}
+
+/** Below this, the start of a further paragraph says nothing worth its room. */
+const SHORTEST_FRAGMENT = 20;
+
+/**
+ * Texts that are at most `max` together: blank ones dropped, and the first one
+ * that does not fit shortened with "…", or left out with the ellipsis on the
+ * one before it when too little room is left to say anything.
+ */
+export function shortenTexts(texts: readonly string[], max: number): string[] {
+  const kept: string[] = [];
+  let left = max;
+  for (const text of texts) {
+    if (text.trim() === "") {
+      continue;
+    }
+    if (text.length <= left) {
+      kept.push(text);
+      left -= text.length;
+      continue;
+    }
+    if (left >= SHORTEST_FRAGMENT || kept.length === 0) {
+      const fragment = withEllipsis(text, left);
+      if (fragment !== "") {
+        kept.push(fragment);
+      }
+    } else {
+      const last = kept.pop() ?? "";
+      kept.push(withEllipsis(last, last.length + left));
+    }
+    break;
+  }
+  return kept;
+}

package/src/time.ts

@@ -0,0 +1,147 @@
+/**
+ * Instants and the calendar day of a time zone, with nothing but `Intl`.
+ *
+ * The association's day is the document's `timeZone`, never the browser's:
+ * a screen whose clock is set to another zone still shows Stockholm's today.
+ */
+import type { Instant, IsoWeekday } from "./contract.ts";
+
+/** A calendar date and a time of day, as a wall clock in one zone shows it. */
+export interface ZonedParts {
+  year: number;
+  /** 1 to 12. */
+  month: number;
+  day: number;
+  /** 0 to 23. */
+  hour: number;
+  minute: number;
+  second: number;
+  weekday: IsoWeekday;
+}
+
+const MINUTE = 60 * 1000;
+const DAY = 24 * 60 * MINUTE;
+
+const partFormatters = new Map<string, Intl.DateTimeFormat>();
+
+function partFormatter(timeZone: string): Intl.DateTimeFormat {
+  let formatter = partFormatters.get(timeZone);
+  if (formatter === undefined) {
+    formatter = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      hourCycle: "h23",
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+    });
+    partFormatters.set(timeZone, formatter);
+  }
+  return formatter;
+}
+
+/** Whether `Intl` knows the zone. */
+export function isTimeZone(timeZone: string): boolean {
+  try {
+    partFormatter(timeZone);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** The wall clock of `timeZone` at an instant. */
+export function zonedParts(time: number, timeZone: string): ZonedParts {
+  const values: Record<string, number> = {};
+  for (const part of partFormatter(timeZone).formatToParts(time)) {
+    if (part.type !== "literal") {
+      values[part.type] = Number(part.value);
+    }
+  }
+  const year = values["year"] ?? 1970;
+  const month = values["month"] ?? 1;
+  const day = values["day"] ?? 1;
+  return {
+    year,
+    month,
+    day,
+    hour: (values["hour"] ?? 0) % 24,
+    minute: values["minute"] ?? 0,
+    second: values["second"] ?? 0,
+    weekday: isoWeekday(year, month, day),
+  };
+}
+
+function isoWeekday(year: number, month: number, day: number): IsoWeekday {
+  const weekday = new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+  return (weekday === 0 ? 7 : weekday) as IsoWeekday;
+}
+
+/** How far the zone's wall clock is ahead of UTC at an instant, in ms. */
+function offset(time: number, timeZone: string): number {
+  const parts = zonedParts(time, timeZone);
+  const wall = Date.UTC(
+    parts.year,
+    parts.month - 1,
+    parts.day,
+    parts.hour,
+    parts.minute,
+    parts.second,
+  );
+  return wall - Math.floor(time / 1000) * 1000;
+}
+
+/**
+ * The first instant of a calendar date in `timeZone`: its midnight, or, in a
+ * zone that skips midnight on the day the clocks go forward, the moment the
+ * day begins.
+ */
+export function zonedDayStart(
+  year: number,
+  month: number,
+  day: number,
+  timeZone: string,
+): number {
+  const wall = Date.UTC(year, month - 1, day);
+  const first = wall - offset(wall, timeZone);
+  const second = wall - offset(first, timeZone);
+  const onTheDay = [first, second]
+    .filter((candidate) => {
+      const parts = zonedParts(candidate, timeZone);
+      return parts.year === year && parts.month === month && parts.day === day;
+    })
+    .sort((a, b) => a - b);
+  return onTheDay[0] ?? Math.max(first, second);
+}
+
+/** The first instant of the calendar day `days` after the one `time` falls on. */
+export function zonedDayStartAfter(
+  time: number,
+  days: number,
+  timeZone: string,
+): number {
+  const today = zonedParts(time, timeZone);
+  const date = new Date(
+    Date.UTC(today.year, today.month - 1, today.day + days),
+  );
+  return zonedDayStart(
+    date.getUTCFullYear(),
+    date.getUTCMonth() + 1,
+    date.getUTCDate(),
+    timeZone,
+  );
+}
+
+/** An instant floored to its minute. */
+export function floorToMinute(time: number): number {
+  return Math.floor(time / MINUTE) * MINUTE;
+}
+
+/** An instant as the contract writes one: UTC, whole seconds, "Z". */
+export function toInstant(time: number): Instant {
+  return `${new Date(Math.floor(time / 1000) * 1000).toISOString().slice(0, 19)}Z`;
+}
+
+export { DAY, MINUTE };

package/src/translate.ts

@@ -0,0 +1,56 @@
+/**
+ * The renderer's words in a screen's locale, with i18next's interpolation and
+ * plural keys, so the translations read the same here as in packages/i18n.
+ */
+import type { ScreenLocale } from "./contract.ts";
+import { WORDS, type WordKey } from "./words.ts";
+
+type PluralCategory = "zero" | "one" | "two" | "few" | "many" | "other";
+
+type PluralBase<Key> = Key extends `${infer Base}_other` ? Base : never;
+
+/** A word to look up: a key, or the base of a plural key such as `placesLeft`. */
+export type Phrase =
+  Exclude<WordKey, `${string}_${PluralCategory}`> | PluralBase<WordKey>;
+
+const pluralRules = new Map<ScreenLocale, Intl.PluralRules>();
+
+function pluralCategory(locale: ScreenLocale, count: number): string {
+  let rules = pluralRules.get(locale);
+  if (rules === undefined) {
+    rules = new Intl.PluralRules(locale);
+    pluralRules.set(locale, rules);
+  }
+  return rules.select(count);
+}
+
+function lookup(locale: ScreenLocale, key: string): string | undefined {
+  const words: Readonly<Record<string, string>> = WORDS[locale];
+  return Object.prototype.hasOwnProperty.call(words, key)
+    ? words[key]
+    : undefined;
+}
+
+/**
+ * The word for `phrase` in `locale`, its `{{name}}` placeholders filled from
+ * `values`. A numeric `count` picks the plural form, `<phrase>_one` or
+ * `<phrase>_other`, by the locale's plural rules.
+ */
+export function translate(
+  locale: ScreenLocale,
+  phrase: Phrase,
+  values: Readonly<Record<string, string | number>> = {},
+): string {
+  const count = values["count"];
+  const text =
+    (typeof count === "number"
+      ? (lookup(locale, `${phrase}_${pluralCategory(locale, count)}`) ??
+        lookup(locale, `${phrase}_other`))
+      : undefined) ??
+    lookup(locale, phrase) ??
+    phrase;
+  return text.replace(/\{\{\s*(\w+)\s*\}\}/g, (placeholder, name: string) => {
+    const value = values[name];
+    return value === undefined ? placeholder : String(value);
+  });
+}

package/src/words.ts

@@ -0,0 +1,91 @@
+// Generated by scripts/words.mjs from the screenContent namespace of
+// packages/i18n/src/locales/en.json and sv.json. Do not edit it by hand:
+// change the translations there and run `pnpm --filter @openbrf/display words`.
+import type { ScreenLocale } from "./contract.ts";
+
+const en = {
+  loading: "Loading",
+  comingEvents: "Coming events",
+  calledOff: "Called off",
+  placesLeft_one: "{{count}} place left",
+  placesLeft_other: "{{count}} places left",
+  fullyBooked: "Fully booked",
+  ordinaryMeeting: "Ordinary general meeting",
+  extraordinaryMeeting: "Extraordinary general meeting",
+  meetingWhen: "When",
+  meetingWhere: "Where",
+  digitalParticipation: "Taking part digitally",
+  agenda: "Agenda",
+  freeAndBusy: "Free and busy",
+  today: "Today",
+  tomorrow: "Tomorrow",
+  busy: "Busy",
+  busyAllDay: "Busy all day",
+  freeAllDay: "Free all day",
+  freeRestOfDay: "Free for the rest of the day",
+  freeBetween: "Free {{from}}–{{to}}",
+  timeRange: "{{from}}–{{to}}",
+  floor: "Floor {{floor}}",
+  nothingToShow: "Nothing to show right now",
+  lastUpdated: "Last updated {{time}}",
+  notConnected: "Not connected",
+  notConnectedDetail:
+    "The screen has no connection just now. It keeps trying by itself.",
+  linkInvalid: "This display link is no longer valid",
+  linkInvalidDetail:
+    "Ask the board for a new display link and open it on this screen.",
+  linkMissing: "The display link is not complete",
+  linkMissingDetail:
+    "Open the whole display link from the board on this screen, everything after the # sign included.",
+  paused: "The screen is paused",
+  pausedDetail:
+    "Screen content is switched off for now. The screen starts again by itself when it is switched back on.",
+} as const;
+
+/** A word the renderer shows that is not in the document. */
+export type WordKey = keyof typeof en;
+
+/** The renderer's own words in every screen language, English the canonical one. */
+export const WORDS: Readonly<
+  Record<ScreenLocale, Readonly<Record<WordKey, string>>>
+> = {
+  en,
+  sv: {
+    loading: "Laddar",
+    comingEvents: "Kommande evenemang",
+    calledOff: "Inställt",
+    placesLeft_one: "{{count}} plats kvar",
+    placesLeft_other: "{{count}} platser kvar",
+    fullyBooked: "Fullbokat",
+    ordinaryMeeting: "Ordinarie föreningsstämma",
+    extraordinaryMeeting: "Extra föreningsstämma",
+    meetingWhen: "När",
+    meetingWhere: "Var",
+    digitalParticipation: "Delta digitalt",
+    agenda: "Dagordning",
+    freeAndBusy: "Ledigt och bokat",
+    today: "I dag",
+    tomorrow: "I morgon",
+    busy: "Bokat",
+    busyAllDay: "Bokat hela dagen",
+    freeAllDay: "Ledigt hela dagen",
+    freeRestOfDay: "Ledigt resten av dagen",
+    freeBetween: "Ledigt {{from}}–{{to}}",
+    timeRange: "{{from}}–{{to}}",
+    floor: "Våning {{floor}}",
+    nothingToShow: "Inget att visa just nu",
+    lastUpdated: "Senast uppdaterad {{time}}",
+    notConnected: "Inte ansluten",
+    notConnectedDetail:
+      "Skärmen har ingen anslutning just nu. Den fortsätter att försöka av sig själv.",
+    linkInvalid: "Visningslänken gäller inte längre",
+    linkInvalidDetail:
+      "Be styrelsen om en ny visningslänk och öppna den på den här skärmen.",
+    linkMissing: "Visningslänken är inte hel",
+    linkMissingDetail:
+      "Öppna hela visningslänken från styrelsen på den här skärmen, även allt efter tecknet #.",
+    paused: "Skärmen är pausad",
+    pausedDetail:
+      "Skärminnehållet är avstängt just nu. Skärmen startar igen av sig själv när det slås på.",
+  },
+};