@7365admin1/layer-common 3.2.1-staging.64 → 3.2.1-staging.66

package/plugins/vuetify.ts

@@ -42,6 +42,67 @@ import {
 } from "vuetify-pro-tiptap";
 import "vuetify-pro-tiptap/style.css";
 
+/**
+ * Contrast decisions live here rather than inline, because both themes need the
+ * same two opacity corrections and a value that differs by accident between
+ * light and dark is a bug nobody sees until somebody flips the switch.
+ *
+ * `disabled-opacity`: Material's 0.38 measures 2.68:1 on white, below the 4.5:1
+ * a sentence needs, and disabled fields in this product carry sentences people
+ * are expected to read. 0.55 is 4.74:1 on white and 6.21:1 on the dark page -
+ * the same value the camera wall settled on, for the same reason.
+ *
+ * `border-opacity`: 0.12 measures 1.32:1, which is a divider you cannot see.
+ * Dark goes to 0.35 (3.22:1) and carries the boundary properly. Light goes to
+ * 0.26 (1.88:1) - visible, but short of the 3:1 a component boundary wants.
+ * Reaching it on white needs 0.42, which turns every table and card edge into a
+ * mid-grey grid across eleven applications; that is a change somebody should
+ * look at before it ships, not one to slip in behind a contrast fix.
+ */
+const LIGHT_THEME = {
+  dark: false,
+  colors: {
+    primary: "#042134",
+    "primary-button": "#1867C0",
+    "text-primary": "#052439",
+  },
+  variables: {
+    "disabled-opacity": 0.55,
+    "border-opacity": 0.26,
+  },
+};
+
+/**
+ * Only the keys that must differ; Vuetify merges the rest from its stock dark.
+ */
+const DARK_THEME = {
+  dark: true,
+  colors: {
+    /**
+     * Stock dark's #121212 page and #212121 surface measure 1.16:1 apart, so a
+     * card, a dialog and the page behind them were one flat sheet. These are
+     * 1.19:1 - elevation on a dark screen is a genuinely small delta - but they
+     * are tinted towards the brand navy rather than neutral grey, and the
+     * divider opacity above is what actually draws the edges.
+     */
+    background: "#0E1319",
+    surface: "#1B242F",
+    /** Stock dark ships a lavender #ccbfd6 here, which is not our product. */
+    "surface-bright": "#26313E",
+    "surface-light": "#26313E",
+    /** The brand navy lifted until the nav drawer is a surface, not a hole. */
+    primary: "#17506F",
+    /** Unchanged on purpose: it already passes in both themes. */
+    "primary-button": "#1867C0",
+    /** #052439 on a dark page measures 1.18:1. This is 15.72:1. */
+    "text-primary": "#E8ECF1",
+  },
+  variables: {
+    "disabled-opacity": 0.55,
+    "border-opacity": 0.35,
+  },
+};
+
 export default defineNuxtPlugin((app) => {
   const vuetify = createVuetify({
     defaults: {
@@ -69,17 +130,53 @@ export default defineNuxtPlugin((app) => {
       //   hint: "This field is required",
       // },
     },
+    /**
+     * THE PRODUCT HAS TWO THEMES, AND UNTIL NOW ONLY ONE OF THEM WAS OURS.
+     *
+     * Every app shows a light/dark toggle in the app bar (Layout/Header.vue),
+     * and it sets Vuetify's built-in "light" and "dark" themes. Those were left
+     * at Vuetify's factory values, so one click on any screen in any of the
+     * eleven apps threw the brand away: `primary` stopped being the Seven365
+     * navy and became Material blue #2196F3 - and `primary` is the navigation
+     * drawer's fill - while `primary-button` and `text-primary`, used in around
+     * eighty places across the layer and the apps, do not exist in a stock
+     * theme at all, so those components lost their colour to an undefined CSS
+     * variable. There was also no way back to the brand: the toggle only ever
+     * flipped between the two stock themes.
+     *
+     * The fix is to make the stock names OURS rather than to add new names.
+     * Several components already branch on `theme.global.name === "dark"` (this
+     * layer's FormDialog, property-management's facility icons), so a
+     * differently-named dark theme would have left every one of them silently
+     * on their light branch inside a dark app. Overriding `light` and `dark`
+     * means the toggle, `v-theme-provider theme="light"`, the `plain-dark`
+     * layout and all of those comparisons keep working, and start being right.
+     *
+     * Measured, not eyeballed - WCAG 2.1, alpha composited against the surface
+     * each value actually sits on:
+     *
+     *   text-primary on the page       dark   1.18:1 -> 15.72:1
+     *   nav drawer fill vs the page    dark   1.13:1 ->  2.14:1 (+ a real border)
+     *   white label in the nav drawer  dark   3.12:1 ->  8.70:1
+     *   primary-button vs the page     dark   3.34:1 ->  3.32:1 (unchanged)
+     *   white label on that button     both   5.61:1 ->  5.61:1 (unchanged)
+     *   disabled text                  light  2.68:1 ->  4.74:1
+     *   disabled text                  dark   3.57:1 ->  6.21:1
+     *   divider / outline              dark   1.38:1 ->  3.22:1
+     *   divider / outline              light  1.32:1 ->  1.88:1
+     */
     theme: {
-      defaultTheme: "iservice365",
+      defaultTheme: "light",
       themes: {
-        iservice365: {
-          dark: false,
-          colors: {
-            primary: "#042134",
-            "primary-button": "#1867C0",
-            "text-primary": "#052439",
-          },
-        },
+        light: LIGHT_THEME,
+        dark: DARK_THEME,
+        /**
+         * The name this product booted on before the two above carried the
+         * brand. Kept, and identical to `light`, so anything that asks for it
+         * by name - in an app that is not in this repository - still gets a
+         * theme rather than a blank one.
+         */
+        iservice365: LIGHT_THEME,
       },
     },
     icons: {

package/utils/camera-wall.test.ts

@@ -2,12 +2,23 @@ import assert from "node:assert/strict";
 import { test } from "node:test";
 
 import {
+  agoLabel,
   capabilityView,
+  clampPage,
+  clampPan,
+  clampZoom,
+  healthView,
   isDenseLayout,
+  playerOrigin,
+  playerSignal,
   tileView,
   wallCameras,
   wallLayout,
+  wallPageCount,
+  wallRows,
   wallTiles,
+  WALL_CAPABILITY_CONTROLS,
+  zoomStep,
 } from "./camera-wall.ts";
 
 const ip = (over: Record<string, unknown> = {}) => ({
@@ -44,10 +55,11 @@ test("an unknown layout key falls back to four tiles", () => {
 test("no selection means the site's own order, not a blank wall", () => {
   const cams = [ip({ _id: "a" }), ip({ _id: "b" })];
   const tiles = wallTiles(cams, [], "2x2");
-  assert.equal(tiles.length, 4);
+  // Two cameras on a four-tile wall are TWO tiles, not two tiles and two
+  // dashed boxes. The grid packs; see wallRows.
+  assert.equal(tiles.length, 2);
   assert.equal(tiles[0]._id, "a");
   assert.equal(tiles[1]._id, "b");
-  assert.equal(tiles[2], null);
 });
 
 test("a selection sets the order, and a stale id is dropped rather than drawn", () => {
@@ -83,23 +95,132 @@ test("the server's own sentence is shown, never rewritten", () => {
   );
 });
 
-test("a supported capability wears no tag", () => {
+/*
+  CHANGED DELIBERATELY. This asserted `tag === null` for a working capability,
+  and that was fine while every capability on this screen was switched off. It
+  stopped being fine the moment one was on: an untagged panel beside four
+  tagged ones reads as a panel whose tag failed to render, not as good news.
+  It also hid a real defect, which the next test pins.
+*/
+test("a working capability says so, and does not fall back to the not-probed sentence", () => {
   const cam = ip({ capabilities: { playback: { state: "supported", detail: null } } });
-  assert.equal(capabilityView(cam, "playback").available, true);
-  assert.equal(capabilityView(cam, "playback").tag, null);
+  const v = capabilityView(cam, "playback");
+  assert.equal(v.available, true);
+  assert.equal(v.tag, "Ready");
+  // The defect: `detail` used to fall back to "has not been asked what it can
+  // do yet" whenever the server sent none — and the server sends none for a
+  // capability that WORKS. A working control claiming it had never been checked
+  // is a contradiction on screen, and it would have shipped the day zoom landed.
+  assert.equal(v.detail, null);
+  assert.equal(v.nextStep, null);
+});
+
+/* ---------------------------------------------------------------- rule 5 */
+
+test("a switched-off control says what would switch it on and who to ask", () => {
+  const cam = ip({
+    capabilities: {
+      playback: {
+        state: "unsupported",
+        reason: "device-http-not-configured",
+        detail: "No direct connection to this camera's recorder is configured on this server.",
+      },
+    },
+  });
+  const v = capabilityView(cam, "playback");
+  // The server's sentence is still verbatim — rule 3 is not traded away for rule 5.
+  assert.match(v.detail, /^No direct connection/);
+  assert.match(v.nextStep, /Seven365 administrator/);
+  assert.match(v.nextStep, /not something to switch on from this page/i);
+});
+
+test("a reason code this build has never seen still names somebody to ask", () => {
+  const cam = ip({
+    capabilities: { ptz: { state: "unsupported", reason: "invented-later", detail: "Nope." } },
+  });
+  assert.match(capabilityView(cam, "ptz").nextStep, /Seven365 administrator/);
+});
+
+test("every control the wall draws has a sentence for when it works", () => {
+  // Otherwise a capability flipping on shows a panel with a "Ready" tag and no
+  // explanation of what to do with it.
+  for (const control of WALL_CAPABILITY_CONTROLS) {
+    assert.ok(control.ready.length > 0, `${control.key} has no ready sentence`);
+  }
+});
+
+test("zoom is drawn as a capability, and it is the one that works today", () => {
+  const keys = WALL_CAPABILITY_CONTROLS.map((c) => c.key);
+  assert.ok(keys.includes("digitalZoom"));
+  // Digital zoom is cropping, not movement. If these two ever read the same on
+  // screen, somebody will believe they moved a camera that never moved.
+  assert.ok(keys.includes("ptz"));
+  assert.notEqual(
+    WALL_CAPABILITY_CONTROLS.find((c) => c.key === "digitalZoom").title,
+    WALL_CAPABILITY_CONTROLS.find((c) => c.key === "ptz").title
+  );
 });
 
 /* ------------------------------------------------------------------ rule 4 */
 
 test("a page that has not loaded is Connecting, never Live", () => {
   assert.equal(tileView(ip(), { player: "loading" }).state, "connecting");
-  assert.equal(tileView(ip(), { player: "ready" }).label, "Live");
-  assert.equal(tileView(ip(), { player: "timeout" }).state, "no-signal");
+  assert.equal(tileView(ip(), { player: "failed" }).state, "no-signal");
+});
+
+/**
+ * THE DEFECT THIS FILE EXISTS FOR.
+ *
+ * On the live wall two cameras rendered a blank rectangle and both carried a
+ * green "Live". The page had loaded; no picture was arriving. A loaded page is
+ * now worth exactly one thing, and it is not the word "Live".
+ */
+test("a loaded player page is NOT Live - it is Not verified", () => {
+  const v = tileView(ip(), { player: "page-up" });
+  assert.equal(v.state, "unverified");
+  assert.equal(v.label, "Not verified");
+  // No scrim: there may be a perfectly good picture under that badge, and
+  // covering a working camera would be a worse lie than the one being fixed.
+  assert.equal(v.detail, null);
+  assert.equal(v.showPlayer, true);
+  assert.match(v.note, /cannot confirm a picture is arriving/);
+});
+
+test("only a reported frame earns the word Live", () => {
+  assert.equal(tileView(ip(), { player: "playing" }).label, "Live");
+  assert.equal(tileView(ip(), { player: "playing" }).state, "live");
+});
+
+test("a picture that arrived and stopped stops being Live", () => {
+  // The mobile app's "Live over a nine-second-old still", refused here.
+  const v = tileView(ip(), { player: "stalled" });
+  assert.equal(v.state, "no-signal");
+  assert.match(v.detail, /stopped arriving/);
+});
+
+test("only signals the video service could actually send are believed", () => {
+  assert.equal(playerSignal({ event: "frame" }), "playing");
+  assert.equal(playerSignal("videoDecode"), "playing");
+  assert.equal(playerSignal({ type: "stalled" }), "stalled");
+  assert.equal(playerSignal({ event: "error" }), "failed");
+  // Anything else leaves the tile exactly where it was. A message we do not
+  // understand must never be able to turn a badge green.
+  assert.equal(playerSignal({ event: "live" }), null);
+  assert.equal(playerSignal(null), null);
+  assert.equal(playerSignal(42), null);
+  assert.equal(playerSignal({}), null);
+});
+
+test("a message is only believed from the camera's own origin", () => {
+  assert.equal(playerOrigin("https://relay.example.test/7"), "https://relay.example.test");
+  assert.equal(playerOrigin("not a url"), "");
+  assert.equal(playerOrigin(""), "");
+  assert.equal(playerOrigin(null), "");
 });
 
 test("the browser being offline outranks everything and says so differently", () => {
-  assert.equal(tileView(ip(), { online: false, player: "ready" }).label, "No connection");
-  assert.equal(tileView(ip(), { player: "timeout" }).label, "No signal");
+  assert.equal(tileView(ip(), { online: false, player: "playing" }).label, "No connection");
+  assert.equal(tileView(ip(), { player: "failed" }).label, "No signal");
 });
 
 test("an inactive camera, a camera with no address, and an empty tile all explain themselves", () => {
@@ -115,7 +236,7 @@ test("a server that says live video is unsupported is believed", () => {
       liveVideo: { state: "unsupported", detail: "This camera is not active." },
     },
   });
-  const v = tileView(cam, { player: "ready" });
+  const v = tileView(cam, { player: "playing" });
   assert.equal(v.showPlayer, false);
   assert.equal(v.detail, "This camera is not active.");
 });
@@ -147,3 +268,138 @@ test("being offline still explains every tile at once, ahead of the server's rea
   const view = tileView(ip({ unavailableReason: "Something server-side." }), { online: false });
   assert.equal(view.state, "offline");
 });
+
+/* ------------------------------------------------------------------ paging */
+
+test("the fifth camera on a four-tile wall is reachable, not dropped", () => {
+  // The defect this fixes, exactly: a site with five cameras showed four, said
+  // "Cameras 5" in the toolbar, and had nowhere to put the fifth.
+  const cams = ["a", "b", "c", "d", "e"].map((id) => ip({ _id: id }));
+  assert.equal(wallPageCount(cams, [], "2x2"), 2);
+
+  const second = wallTiles(cams, [], "2x2", 1);
+  assert.equal(second[0]._id, "e");
+  // A short last page is short, not padded - and it must never wrap back
+  // round to the first camera, which would show "a" twice on one wall.
+  assert.equal(second.length, 1);
+});
+
+test("the grid packs to the cameras on it instead of drawing holes", () => {
+  // Five cameras on a nine-tile wall: five pictures over two rows, not five
+  // pictures and four dead grey boxes over three.
+  const cams = ["a", "b", "c", "d", "e"].map((id) => ip({ _id: id }));
+  const tiles = wallTiles(cams, [], "3x3");
+  assert.equal(tiles.length, 5);
+  assert.equal(wallRows(tiles.length, "3x3"), 2);
+
+  assert.equal(wallRows(1, "3x3"), 1);
+  assert.equal(wallRows(9, "3x3"), 3);
+  // Never taller than the layout asked for, and never zero rows.
+  assert.equal(wallRows(99, "3x3"), 3);
+  assert.equal(wallRows(0, "2x2"), 1);
+});
+
+test("an exactly-full wall is one page, and an empty one is still one", () => {
+  const four = ["a", "b", "c", "d"].map((id) => ip({ _id: id }));
+  assert.equal(wallPageCount(four, [], "2x2"), 1);
+  assert.equal(wallPageCount([], [], "2x2"), 1);
+});
+
+test("a page number is clamped rather than left pointing past the end", () => {
+  const cams = ["a", "b", "c", "d", "e"].map((id) => ip({ _id: id }));
+  // Going from 2x2 page 2 to a 3x3 wall: page 1 no longer exists.
+  assert.equal(clampPage(1, wallPageCount(cams, [], "3x3")), 0);
+  assert.equal(clampPage(-4, 3), 0);
+  assert.equal(clampPage(99, 3), 2);
+  assert.equal(clampPage(NaN, 3), 0);
+  // Asking for a page past the end returns the last one's tiles, never nothing.
+  assert.equal(wallTiles(cams, [], "2x2", 9)[0]._id, "e");
+});
+
+test("paging respects a selection instead of quietly paging the whole site", () => {
+  const cams = ["a", "b", "c", "d", "e"].map((id) => ip({ _id: id }));
+  assert.equal(wallPageCount(cams, ["a", "b"], "1x1"), 2);
+  assert.equal(wallTiles(cams, ["a", "b"], "1x1", 1)[0]._id, "b");
+});
+
+/* ------------------------------------------------------------------ health */
+
+test("the recorder's state and the player page's state are separate answers", () => {
+  const camera = ip();
+  // The tile badge says the page is up; the recorder says it is not. Both are
+  // true at once when a relay outlives the device behind it, and a wall that
+  // merged them would tell a supervisor only the reassuring half.
+  assert.equal(tileView(camera, { player: "playing" }).label, "Live");
+  assert.equal(healthView({ health: "unreachable", reachable: false }).tone, "down");
+});
+
+test("health that has never been asked for does not read as healthy", () => {
+  assert.equal(healthView(null).tone, "unknown");
+  assert.equal(healthView(undefined).lastFrame, null);
+  assert.match(healthView(null).label, /not checked/i);
+});
+
+test("a drifted clock is a warning, not a failure", () => {
+  assert.equal(healthView({ health: "drifted", reachable: true }).tone, "warn");
+  assert.equal(healthView({ health: "ok", reachable: true }).tone, "ok");
+});
+
+test("reachability alone is enough when the server sends no summary word", () => {
+  assert.equal(healthView({ reachable: true }).tone, "ok");
+  assert.equal(healthView({ reachable: false }).tone, "down");
+});
+
+test("the server's health sentences are carried through, not rewritten", () => {
+  const v = healthView({
+    health: "unreachable",
+    reachable: false,
+    reason: "The recorder did not respond.",
+    detailUnavailableReason:
+      "Firmware and device clock are not available: this recorder is reachable over video only.",
+  });
+  assert.equal(v.detail, "The recorder did not respond.");
+  assert.match(v.deviceDetail, /^Firmware and device clock/);
+});
+
+test("a picture's age is coarse above a minute, and never a fake time", () => {
+  const now = Date.parse("2026-08-11T10:00:00.000Z");
+  const at = (ms) => new Date(now - ms).toISOString();
+  assert.equal(agoLabel(at(1000), now), "just now");
+  assert.equal(agoLabel(at(40_000), now), "40s ago");
+  assert.equal(agoLabel(at(6 * 60_000), now), "6 min ago");
+  assert.equal(agoLabel(at(3 * 3_600_000), now), "3 h ago");
+  // Never invent one: no timestamp and a broken timestamp both mean "no answer".
+  assert.equal(agoLabel(null, now), null);
+  assert.equal(agoLabel("not a date", now), null);
+  // A clock ahead of ours must not read as a picture from the future.
+  assert.equal(agoLabel(at(-5000), now), "just now");
+});
+
+/* -------------------------------------------------------------------- zoom */
+
+test("zoom stops at 4x and never goes below the whole picture", () => {
+  assert.equal(clampZoom(0.2), 1);
+  assert.equal(clampZoom(99), 4);
+  assert.equal(clampZoom(NaN), 1);
+  assert.equal(clampZoom(2.5), 2.5);
+});
+
+test("a wheel notch zooms by direction, not by however much the device reports", () => {
+  assert.ok(zoomStep(1, -120) > 1);
+  assert.ok(zoomStep(2, 3) < 2);
+  // A trackpad's tiny delta and a mouse's huge one take the same step.
+  assert.equal(zoomStep(1, -1), zoomStep(1, -4000));
+  assert.equal(zoomStep(1, 120), 1, "cannot zoom out past the whole picture");
+  assert.equal(zoomStep(4, -120), 4, "cannot zoom in past the ceiling");
+});
+
+test("panning cannot walk the picture off the tile", () => {
+  const frame = { width: 400, height: 200 };
+  // At 2x the picture is twice the frame, so half the frame each way and no more.
+  assert.deepEqual(clampPan({ x: 9999, y: 9999 }, 2, frame), { x: 200, y: 100 });
+  assert.deepEqual(clampPan({ x: -9999, y: -9999 }, 2, frame), { x: -200, y: -100 });
+  // At 1x there is nothing to pan, so every drag resolves to centred.
+  assert.deepEqual(clampPan({ x: 50, y: 50 }, 1, frame), { x: 0, y: 0 });
+  // A tile that has not been measured yet cannot be dragged into the void.
+  assert.deepEqual(clampPan({ x: 50, y: 50 }, 3, { width: 0, height: 0 }), { x: 0, y: 0 });
+});