@7365admin1/layer-common 3.1.4-staging.54 → 3.1.4-staging.56

package/components/CameraWallTile.vue

@@ -0,0 +1,333 @@
+<template>
+  <div
+    ref="root"
+    class="vms-tile"
+    :class="{ 'vms-tile--dense': dense, 'vms-tile--focused': focused, 'vms-tile--empty': !camera }"
+    :tabindex="camera ? 0 : -1"
+    :aria-label="camera ? `${camera.name || camera._id}, ${view.label}` : 'Empty position'"
+    @click="camera && $emit('focus', camera)"
+    @dblclick="camera && toggleFullscreen()"
+    @keydown.enter="camera && toggleFullscreen()"
+  >
+    <!--
+      The picture, when there is one to show. This is an embed of the video
+      service's own player page: the stored address IS the live view, and there
+      is no other transport for live web video today.
+    -->
+    <iframe
+      v-if="camera && view.showPlayer"
+      :key="camera.host"
+      :src="camera.host"
+      class="vms-tile__frame"
+      :title="`Live view of ${camera.name || 'camera'}`"
+      allowfullscreen
+      referrerpolicy="no-referrer"
+      @load="onPlayerLoad"
+    />
+
+    <!--
+      A tile with nothing to show says so across the whole tile, not in a
+      corner. At nine tiles a supervisor is scanning, and a one-line reason
+      tucked under a black rectangle is exactly the thing that gets missed.
+    -->
+    <div v-if="view.detail" class="vms-tile__overlay">
+      <p class="vms-tile__reason">{{ view.detail }}</p>
+    </div>
+
+    <!-- Chrome sits OVER the picture, never around it. -->
+    <div v-if="camera" class="vms-tile__status">
+      <span class="vms-tile__dot" :class="`vms-tile__dot--${view.state}`" />
+      <!--
+        At nine tiles the badge is the DOT ALONE: a status word beside a 6 px
+        dot on a small tile is unreadable at the distance a wall is scanned
+        from, and the dot is what is being read anyway. The word returns at
+        four tiles and one.
+      -->
+      <span v-if="!dense" class="vms-tile__state">{{ view.label }}</span>
+    </div>
+
+    <div v-if="camera" class="vms-tile__chrome">
+      <!-- The NAME wins the fight for room: it is the tile's entire job. -->
+      <span class="vms-tile__name">{{ camera.name || camera._id }}</span>
+    </div>
+
+    <button
+      v-if="camera"
+      type="button"
+      class="vms-tile__expand"
+      title="Fill the screen with this camera"
+      aria-label="Fill the screen with this camera"
+      @click.stop="toggleFullscreen()"
+    >
+      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+        <path
+          d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="square"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+
+import {
+  LIVE_CONNECT_TIMEOUT_MS,
+  tileView,
+  type TPlayerState,
+  type TWallCamera,
+} from "../utils/camera-wall";
+
+/**
+ * ONE TILE OF THE CAMERA WALL.
+ *
+ * Everything this component decides comes from `utils/camera-wall.ts`; what is
+ * left here is the picture, the chrome over it, and the one thing only a
+ * browser can know — whether the player page ever loaded.
+ *
+ * ## The ceiling worth knowing before "improving" the live badge
+ *
+ * We can tell when the player PAGE loads. We cannot tell when a FRAME decodes:
+ * the page belongs to the video service, not to us, and learning more would
+ * mean reaching into another origin's document — which is both blocked by the
+ * browser and would break silently the day that page changes. So **"Live" means
+ * the player page is up**. If the service is up and the camera behind it is
+ * dead, the operator sees that service's own empty player, exactly as they do
+ * in the app they use today. Closing that honestly is a change on the video
+ * service's side, not here.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    camera: TWallCamera | null;
+    /** Nine tiles: drop the status word, keep the dot. */
+    dense?: boolean;
+    /** Browser connectivity. One dead tile and a dead browser look identical otherwise. */
+    online?: boolean;
+    focused?: boolean;
+  }>(),
+  { dense: false, online: true, focused: false }
+);
+
+defineEmits<{ (e: "focus", camera: TWallCamera): void }>();
+
+const root = ref<HTMLElement | null>(null);
+const player = ref<TPlayerState>("loading");
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const view = computed(() =>
+  tileView(props.camera, { online: props.online, player: player.value })
+);
+
+function onPlayerLoad() {
+  player.value = "ready";
+  clearTimer();
+}
+
+function clearTimer() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+}
+
+/**
+ * Restart the clock whenever the address changes — a tile reused for a
+ * different camera must not inherit the previous one's verdict, in either
+ * direction.
+ */
+watch(
+  () => props.camera?.host,
+  (host) => {
+    clearTimer();
+    player.value = "loading";
+    if (!host) return;
+    timer = setTimeout(() => {
+      if (player.value === "loading") player.value = "timeout";
+    }, LIVE_CONNECT_TIMEOUT_MS);
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(clearTimer);
+
+/** The browser's own fullscreen. Nothing to build, and it survives the F11 key. */
+async function toggleFullscreen() {
+  const el = root.value;
+  if (!el) return;
+  try {
+    if (document.fullscreenElement) await document.exitFullscreen();
+    else await el.requestFullscreen();
+  } catch {
+    // A browser that refuses fullscreen (permissions policy, an iframe, an old
+    // Safari) is not an error worth interrupting a supervisor over — the tile
+    // keeps working exactly as it did.
+  }
+}
+</script>
+
+<style scoped>
+.vms-tile {
+  position: relative;
+  overflow: hidden;
+  background: var(--vms-tile, #101418);
+  border-radius: var(--vms-radius, 3px);
+  outline: none;
+  min-height: 0;
+}
+
+.vms-tile--focused {
+  box-shadow: inset 0 0 0 2px var(--vms-accent, #5b9be0);
+}
+
+.vms-tile:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--vms-accent, #5b9be0);
+}
+
+.vms-tile--empty {
+  background: transparent;
+  border: 1px dashed var(--vms-line, #232b36);
+}
+
+.vms-tile__frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  background: #000;
+}
+
+.vms-tile__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  background: var(--vms-scrim-solid, rgba(7, 9, 12, 0.82));
+  pointer-events: none;
+}
+
+.vms-tile__reason {
+  margin: 0;
+  text-align: center;
+  color: var(--vms-text-dim, #94a0b0);
+  font-size: 12px;
+  line-height: 16px;
+  max-width: 32ch;
+}
+
+.vms-tile--dense .vms-tile__reason {
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.vms-tile__status {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  pointer-events: none;
+}
+
+.vms-tile__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--vms-text-faint, #5c6675);
+  flex: none;
+}
+
+/* State colours only. The chrome itself stays achromatic on purpose. */
+.vms-tile__dot--live {
+  background: #4caf50;
+}
+.vms-tile__dot--connecting {
+  background: #fb8c00;
+}
+.vms-tile__dot--no-signal,
+.vms-tile__dot--offline {
+  background: #e0241c;
+}
+.vms-tile__dot--unavailable {
+  background: var(--vms-text-faint, #5c6675);
+}
+
+.vms-tile__state {
+  color: var(--vms-text, #e8ecf1);
+  font-size: 11px;
+  line-height: 14px;
+  white-space: nowrap;
+}
+
+.vms-tile__chrome {
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  bottom: 5px;
+  display: flex;
+  pointer-events: none;
+}
+
+.vms-tile__name {
+  color: var(--vms-text, #e8ecf1);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vms-tile--dense .vms-tile__name {
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.vms-tile__expand {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  color: var(--vms-text, #e8ecf1);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+/* The control is always THERE; it only stops competing with the picture. */
+.vms-tile:hover .vms-tile__expand,
+.vms-tile:focus-within .vms-tile__expand {
+  opacity: 1;
+}
+
+.vms-tile__expand:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--vms-accent, #5b9be0);
+}
+
+/* Fullscreen: the picture takes the whole screen, the chrome stays legible. */
+.vms-tile:fullscreen {
+  border-radius: 0;
+  background: #000;
+}
+</style>

package/composables/useSiteSettings.ts

@@ -99,6 +99,33 @@ export default function () {
     });
   }
 
+  /**
+   * The monitoring wall for one site.
+   *
+   * A different endpoint from `getAllSiteCameras`, and the difference is the
+   * point. That one is the Settings panel's paginated CRUD list; this one is
+   * purpose-built for a wall and is what the React Native app already uses:
+   *
+   * - it is **site-scoped and authorised server-side** — the caller must be a
+   *   member of the site, of its owning organisation, or work for an
+   *   organisation engaged to serve it;
+   * - it returns `type: "ip"` cameras only, so an ANPR unit can never land on a
+   *   monitoring wall;
+   * - it returns each camera's **capability descriptor** and the server's own
+   *   `unavailableReason`, so a tile explains itself instead of showing a black
+   *   rectangle;
+   * - it never returns a credential, and it contacts no device.
+   *
+   * Unpaginated by design: a wall shows a site's cameras, and paging them was
+   * an artefact of borrowing the CRUD list.
+   */
+  async function getSiteWall(siteId: string) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/site-cameras/site/${siteId}/wall`,
+      { method: "GET" }
+    );
+  }
+
   async function updateSiteInformation(
     siteId: string,
     payload: { bgImage: string; description: string; docs: { id: string; name: string }[] }
@@ -175,6 +202,7 @@ export default function () {
     updateSite,
     addCamera,
     getAllSiteCameras,
+    getSiteWall,
     setSiteGuardPosts,
     updateSiteCamera,
     deleteSiteCameraById,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.1.4-staging.54",
+  "version": "3.1.4-staging.56",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/utils/camera-wall.test.ts

@@ -0,0 +1,149 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import {
+  capabilityView,
+  isDenseLayout,
+  tileView,
+  wallCameras,
+  wallLayout,
+  wallTiles,
+} from "./camera-wall.ts";
+
+const ip = (over: Record<string, unknown> = {}) => ({
+  _id: "c1",
+  name: "GYM AREA",
+  type: "ip",
+  status: "active",
+  host: "https://example.invalid/4",
+  ...over,
+});
+
+/* ---------------------------------------------------------------- rule 1 */
+
+test("an ANPR camera can never reach the wall", () => {
+  const items = [ip(), { _id: "c2", type: "anpr", host: "http://example.invalid:1234" }];
+  const kept = wallCameras(items);
+  assert.equal(kept.length, 1);
+  assert.equal(kept[0]._id, "c1");
+});
+
+test("a junk response is an empty wall, not a crash", () => {
+  assert.deepEqual(wallCameras(undefined), []);
+  assert.deepEqual(wallCameras([null, 3, "x"]), []);
+});
+
+/* ---------------------------------------------------------- layout + order */
+
+test("an unknown layout key falls back to four tiles", () => {
+  assert.equal(wallLayout("7x7").tiles, 4);
+  assert.equal(isDenseLayout("3x3"), true);
+  assert.equal(isDenseLayout("2x2"), false);
+});
+
+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);
+  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", () => {
+  const cams = [ip({ _id: "a" }), ip({ _id: "b" })];
+  const tiles = wallTiles(cams, ["b", "gone", "a"], "1x1");
+  assert.equal(tiles.length, 1);
+  assert.equal(tiles[0]._id, "b");
+});
+
+/* ---------------------------------------------------------------- rule 2/3 */
+
+test("no descriptor at all counts as NOT available", () => {
+  const v = capabilityView(ip(), "ptz");
+  assert.equal(v.available, false);
+  assert.equal(v.tag, "Not checked yet");
+  assert.match(v.detail, /has not been asked/);
+});
+
+test("the server's own sentence is shown, never rewritten", () => {
+  const cam = ip({
+    capabilities: {
+      playback: {
+        state: "unsupported",
+        detail: "No direct connection to this camera's recorder is configured on this server.",
+      },
+    },
+  });
+  const v = capabilityView(cam, "playback");
+  assert.equal(v.tag, "Not set up yet");
+  assert.equal(
+    v.detail,
+    "No direct connection to this camera's recorder is configured on this server."
+  );
+});
+
+test("a supported capability wears no tag", () => {
+  const cam = ip({ capabilities: { playback: { state: "supported", detail: null } } });
+  assert.equal(capabilityView(cam, "playback").available, true);
+  assert.equal(capabilityView(cam, "playback").tag, null);
+});
+
+/* ------------------------------------------------------------------ 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");
+});
+
+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");
+});
+
+test("an inactive camera, a camera with no address, and an empty tile all explain themselves", () => {
+  assert.match(tileView(ip({ status: "inactive" })).detail, /not active/);
+  assert.match(tileView(ip({ host: "" })).detail, /no address/);
+  assert.match(tileView(null).detail, /No camera in this position/);
+  assert.equal(tileView(ip({ host: "" })).showPlayer, false);
+});
+
+test("a server that says live video is unsupported is believed", () => {
+  const cam = ip({
+    capabilities: {
+      liveVideo: { state: "unsupported", detail: "This camera is not active." },
+    },
+  });
+  const v = tileView(cam, { player: "ready" });
+  assert.equal(v.showPlayer, false);
+  assert.equal(v.detail, "This camera is not active.");
+});
+
+/* ------------------------------------------- the server's reason wins */
+
+test("the server's own refusal is shown verbatim, not replaced with a guess", () => {
+  // The one that matters: the browser cannot know this, and until the API host
+  // is configured it is the true answer for every camera in the estate.
+  const noRecorder = "No recorder is configured for this camera's relay.";
+  const view = tileView(ip({ unavailableReason: noRecorder }));
+  assert.equal(view.detail, noRecorder);
+  assert.equal(view.state, "unavailable");
+  assert.equal(view.showPlayer, false);
+});
+
+test("the server's reason beats the reasons the wall could work out itself", () => {
+  const reason = "This camera has no address configured.";
+  assert.equal(tileView(ip({ status: "inactive", unavailableReason: reason })).detail, reason);
+});
+
+test("an absent or blank reason changes nothing", () => {
+  assert.equal(tileView(ip({ unavailableReason: null })).state, "connecting");
+  assert.equal(tileView(ip({ unavailableReason: "   " })).state, "connecting");
+  assert.equal(tileView(ip()).state, "connecting");
+});
+
+test("being offline still explains every tile at once, ahead of the server's reason", () => {
+  const view = tileView(ip({ unavailableReason: "Something server-side." }), { online: false });
+  assert.equal(view.state, "offline");
+});