@7365admin1/layer-common 3.2.0 → 3.2.1-staging.60

package/.changeset/camera-wall-gated-endpoint.md

@@ -0,0 +1,47 @@
+---
+"@7365admin1/layer-common": patch
+---
+
+Draw the camera wall from the gated wall endpoint, and show the server's own
+reason on a tile.
+
+`CameraWall` fetched its cameras from `GET /api/site-cameras` - the Settings
+panel's paginated CRUD list, which took its site from an optional query
+parameter and checked nothing about the caller. Any signed-in user from any
+organisation could read every camera in the estate through it, `host` and
+`username` included.
+
+It now calls `GET /api/site-cameras/site/:siteId/wall`, which already exists,
+which the React Native monitoring app was built against, and which is
+authorised server-side: the caller must be a member of the site, of its owning
+organisation, or work for an organisation actively engaged to serve it. That
+endpoint also returns `type: "ip"` cameras only and each camera's capability
+descriptor, so a wall cannot be handed an ANPR unit and a tile can explain
+itself.
+
+Two consequences worth stating:
+
+- **The pager is gone.** The wall endpoint returns the site's cameras in one
+  answer. Paging a video wall was an artefact of borrowing the CRUD list.
+- **A tile now prefers the server's `unavailableReason`** over the reason it
+  used to work out itself. The server knows things the browser cannot - chiefly
+  "No recorder is configured for this camera's relay", which is the true answer
+  for every camera in the estate until the API host is configured, and which the
+  wall used to replace with its own guess. Offline still beats everything, since
+  it explains every tile at once.
+
+No permission gate was invented here. Each application still gates its own menu
+entry; this component draws what it is given, and the server decides.
+
+Two smaller things in the same area:
+
+- **A refused wall now says so.** The catch-all message told every failure to
+  "check your connection", which sends somebody who simply may not see that
+  site off to debug their wifi. A 401/403/404 now reads "You do not have access
+  to this site's cameras." The server answers "not yours" and "does not exist"
+  identically, so this wording does not distinguish them either.
+- **`middleware/member.ts` is removed.** It read a cookie into an unused
+  variable and did nothing else - a file named like a membership gate that was
+  not one. No page in any of the eleven web apps referenced it. The real check
+  is `plugins/secure-member.client.ts`, driven by `memberOnly` page meta, which
+  is untouched.

package/components/CameraWall.vue

@@ -0,0 +1,625 @@
+<template>
+  <div ref="root" class="vms">
+    <!-- ------------------------------------------------------------ toolbar -->
+    <div class="vms__bar">
+      <button
+        type="button"
+        class="vms__tool"
+        :class="{ 'vms__tool--on': showPicker }"
+        :aria-pressed="showPicker"
+        @click="showPicker = !showPicker"
+      >
+        Cameras<span v-if="cameras.length" class="vms__count">{{ cameras.length }}</span>
+      </button>
+
+      <div class="vms__layouts" role="group" aria-label="Wall layout">
+        <button
+          v-for="l in WALL_LAYOUTS"
+          :key="l.key"
+          type="button"
+          class="vms__tool vms__tool--icon"
+          :class="{ 'vms__tool--on': layoutKey === l.key }"
+          :aria-pressed="layoutKey === l.key"
+          :title="`${l.label} (${l.key})`"
+          :aria-label="`${l.label} camera layout`"
+          @click="layoutKey = l.key"
+        >
+          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+            <rect
+              v-for="cell in l.tiles"
+              :key="cell"
+              :x="((cell - 1) % l.columns) * (16 / l.columns) + 1"
+              :y="Math.floor((cell - 1) / l.columns) * (16 / l.columns) + 1"
+              :width="16 / l.columns - 2"
+              :height="16 / l.columns - 2"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div class="vms__spacer" />
+
+      <button
+        type="button"
+        class="vms__tool"
+        title="Fill the screen with the wall"
+        @click="toggleFullscreen"
+      >
+        Full screen
+      </button>
+    </div>
+
+    <!-- -------------------------------------------------------------- body -->
+    <div class="vms__body">
+      <!--
+        THE CAMERA BROWSER. Beside the wall, not on top of it: a supervisor
+        changing what they watch should still be able to see what they are
+        watching.
+      -->
+      <aside v-if="showPicker" class="vms__picker" aria-label="Cameras on this site">
+        <p class="vms__picker-head">
+          On the wall
+          <button
+            v-if="selectedIds.length"
+            type="button"
+            class="vms__link"
+            @click="selectedIds = []"
+          >
+            Reset
+          </button>
+        </p>
+        <p v-if="!cameras.length && !loading" class="vms__picker-empty">
+          No cameras yet.
+        </p>
+        <label v-for="c in cameras" :key="c._id" class="vms__pick">
+          <input
+            type="checkbox"
+            :checked="isPicked(c._id)"
+            :disabled="!isPicked(c._id) && selectedIds.length >= layout.tiles"
+            @change="togglePick(c._id)"
+          >
+          <span class="vms__pick-name">{{ c.name || c._id }}</span>
+          <span
+            class="vms__pick-dot"
+            :class="c.status === 'active' ? 'vms__pick-dot--on' : 'vms__pick-dot--off'"
+          />
+        </label>
+        <p v-if="selectedIds.length >= layout.tiles" class="vms__picker-note">
+          This layout holds {{ layout.tiles }}. Choose a bigger layout for more.
+        </p>
+      </aside>
+
+      <div class="vms__stage">
+        <!-- Loading, empty and failed are real states, not a blank rectangle. -->
+        <div v-if="loading" class="vms__state">
+          <p class="vms__state-head">Loading cameras…</p>
+        </div>
+
+        <div v-else-if="failed" class="vms__state">
+          <p class="vms__state-head">Cameras could not be loaded</p>
+          <p class="vms__state-body">{{ failed }}</p>
+          <button type="button" class="vms__tool" @click="load()">Try again</button>
+        </div>
+
+        <div v-else-if="!cameras.length" class="vms__state">
+          <p class="vms__state-head">No cameras set up yet</p>
+          <p class="vms__state-body">
+            CCTV cameras are added in Site Settings, under CCTV. Ask whoever manages
+            this site's settings to add one.
+          </p>
+        </div>
+
+        <div
+          v-else
+          class="vms__grid"
+          :style="{
+            gridTemplateColumns: `repeat(${layout.columns}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+          }"
+        >
+          <CameraWallTile
+            v-for="(camera, i) in tiles"
+            :key="camera ? camera._id : `empty-${i}`"
+            :camera="camera"
+            :dense="dense"
+            :online="online"
+            :focused="!!camera && camera._id === focusedId"
+            @focus="focusedId = $event._id"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- ------------------------------------------------------- capabilities -->
+    <!--
+      THE CONTROLS THAT ARE NOT SWITCHED ON YET.
+
+      Drawn, dimmed, and carrying the server's own reason — never hidden. A
+      supervisor who cannot see that recorded footage exists as an idea cannot
+      ask for it, and hiding it is what stops anyone asking.
+    -->
+    <div v-if="focused" class="vms__caps">
+      <p class="vms__caps-head">{{ focused.name || focused._id }}</p>
+      <div class="vms__caps-row">
+        <div
+          v-for="c in WALL_CAPABILITY_CONTROLS"
+          :key="c.key"
+          class="vms__cap"
+          :class="{ 'vms__cap--off': !capability(c.key).available }"
+        >
+          <p class="vms__cap-title">
+            {{ c.title }}
+            <span v-if="capability(c.key).tag" class="vms__cap-tag">
+              {{ capability(c.key).tag }}
+            </span>
+          </p>
+          <p class="vms__cap-detail">{{ capability(c.key).detail }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+import {
+  capabilityView,
+  DEFAULT_WALL_LAYOUT,
+  isDenseLayout,
+  wallCameras,
+  wallLayout,
+  wallTiles,
+  WALL_CAPABILITY_CONTROLS,
+  WALL_LAYOUTS,
+  type TWallCamera,
+  type TWallLayoutKey,
+} from "../utils/camera-wall";
+
+/**
+ * THE CAMERA WALL — one component, both applications.
+ *
+ * Security has had a wall for a while and Property Management has had none, so
+ * the same product answered the same question two different ways depending on
+ * which tab you were in. This is that wall, once, in the shared layer: the
+ * apps supply the site and nothing else.
+ *
+ * ## What it is, in one paragraph
+ *
+ * A dark video wall: a layout switcher, a camera browser beside the grid, tiles
+ * that carry a name and a live status, any tile expandable to the whole screen,
+ * and — under it — the camera controls that exist but are not switched on in
+ * this deployment yet, drawn and dimmed with the server's own explanation. It
+ * is the same shape as the monitoring surfaces in the iSecure365 mobile app,
+ * on purpose.
+ *
+ * ## Why the wall is dark in a light application
+ *
+ * A supervisor scanning tiles is judging PICTURES, and every bright surface
+ * beside a picture steals the contrast the picture needs. So the wall is dark
+ * in both themes, deliberately — the rest of the application is untouched, and
+ * a light-theme user getting a dark wall is the intended answer, not a missed
+ * token.
+ *
+ * ## What it deliberately does NOT do
+ *
+ * It does not decide who may see cameras. There is no camera-VIEWING permission
+ * in the product today — only the two `site-settings:manage-*-camera` strings,
+ * which govern SETUP — so each application gates its own menu entry with a
+ * permission that actually resolves, and this component draws what it is given.
+ * Inventing a gate here would silently deny people access they have today.
+ */
+
+const props = defineProps<{ site: string }>();
+
+/* ---------------------------------------------------------------- the data */
+
+const { getSiteWall } = useSiteSettings();
+
+const cameras = ref<TWallCamera[]>([]);
+const loading = ref(true);
+const failed = ref("");
+
+async function load() {
+  loading.value = true;
+  failed.value = "";
+  try {
+    // The site's wall, from the endpoint built for it. `wallCameras` still
+    // filters on the way in — the server already returns `type: "ip"` only, and
+    // an ANPR unit must never reach a monitoring wall even if that ever changes.
+    const res = await getSiteWall(props.site);
+    cameras.value = wallCameras(res?.cameras);
+  } catch (error: any) {
+    // The raw message is often a stack trace and rarely something an operator
+    // can act on — but "you may not see this site" and "your connection
+    // dropped" are genuinely different problems with different next steps, and
+    // telling a refused caller to check their connection sends them off to
+    // debug their wifi. The server answers a site that is not the caller's the
+    // same way as a site that does not exist, on purpose, so this wording does
+    // not distinguish them either.
+    cameras.value = [];
+    const status = Number(error?.statusCode ?? error?.response?.status ?? 0);
+    failed.value =
+      status === 401 || status === 403 || status === 404
+        ? "You do not have access to this site's cameras."
+        : "The list of cameras did not load. Check your connection and try again.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+watch(() => props.site, () => {
+  selectedIds.value = [];
+  load();
+});
+
+/* -------------------------------------------------------------- the layout */
+
+const layoutKey = ref<TWallLayoutKey>(DEFAULT_WALL_LAYOUT);
+const layout = computed(() => wallLayout(layoutKey.value));
+const rows = computed(() => Math.ceil(layout.value.tiles / layout.value.columns));
+const dense = computed(() => isDenseLayout(layoutKey.value));
+
+const selectedIds = ref<string[]>([]);
+const showPicker = ref(false);
+
+const tiles = computed(() => wallTiles(cameras.value, selectedIds.value, layoutKey.value));
+
+function isPicked(id: string) {
+  return selectedIds.value.includes(id);
+}
+
+function togglePick(id: string) {
+  if (isPicked(id)) selectedIds.value = selectedIds.value.filter((x) => x !== id);
+  else if (selectedIds.value.length < layout.value.tiles)
+    selectedIds.value = [...selectedIds.value, id];
+}
+
+/* --------------------------------------------------------- what is focused */
+
+const focusedId = ref("");
+const focused = computed(
+  () => tiles.value.find((c) => c && c._id === focusedId.value) || tiles.value.find(Boolean) || null
+);
+
+function capability(key: string) {
+  return capabilityView(focused.value, key);
+}
+
+/* ------------------------------------------------------- browser condition */
+
+const online = ref(true);
+const setOnline = () => {
+  online.value = typeof navigator === "undefined" ? true : navigator.onLine !== false;
+};
+
+onMounted(() => {
+  setOnline();
+  window.addEventListener("online", setOnline);
+  window.addEventListener("offline", setOnline);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("online", setOnline);
+  window.removeEventListener("offline", setOnline);
+});
+
+/* ------------------------------------------------------------- fullscreen */
+
+const root = ref<HTMLElement | null>(null);
+
+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 is not worth interrupting anyone over.
+  }
+}
+</script>
+
+<style scoped>
+/*
+  The near-black ramp, the gutter and the radius are the same values the mobile
+  monitoring build uses, so the two surfaces read as one product. They are
+  literals rather than theme tokens because this surface is dark in BOTH themes
+  and therefore cannot read one.
+*/
+.vms {
+  --vms-screen: #07090c;
+  --vms-tile: #101418;
+  --vms-chrome: #161b22;
+  --vms-chrome-active: #232b36;
+  --vms-line: #232b36;
+  --vms-scrim: rgba(7, 9, 12, 0.62);
+  --vms-scrim-solid: rgba(7, 9, 12, 0.82);
+  --vms-text: #e8ecf1;
+  --vms-text-dim: #94a0b0;
+  --vms-text-faint: #5c6675;
+  --vms-accent: #5b9be0;
+  --vms-radius: 3px;
+
+  display: flex;
+  flex-direction: column;
+  background: var(--vms-screen);
+  border-radius: var(--vms-radius);
+  overflow: hidden;
+  color: var(--vms-text);
+  font-family: inherit;
+}
+
+.vms__bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px;
+  background: var(--vms-chrome);
+  border-bottom: 1px solid var(--vms-line);
+  flex-wrap: wrap;
+}
+
+.vms__spacer {
+  flex: 1 1 auto;
+}
+
+.vms__layouts {
+  display: flex;
+  gap: 2px;
+}
+
+.vms__tool {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 4px 10px;
+  border: 1px solid var(--vms-line);
+  border-radius: var(--vms-radius);
+  background: transparent;
+  color: var(--vms-text);
+  font-size: 12px;
+  line-height: 16px;
+  cursor: pointer;
+}
+
+.vms__tool:hover:not(:disabled) {
+  background: var(--vms-chrome-active);
+}
+
+.vms__tool:disabled {
+  /* Legible, not ghosted: see the note on the capability panel below. */
+  opacity: 0.55;
+  cursor: default;
+}
+
+.vms__tool--icon {
+  padding: 4px 8px;
+}
+
+/*
+  A SELECTED TOOL IS NOT PAINTED IN THE BRAND RED. On this screen red already
+  means "this camera is down"; a permanent red block in the toolbar of a
+  monitoring wall competes with the alarms the wall exists to show. Selection is
+  a raised neutral fill and a 2 px accent underline instead.
+*/
+.vms__tool--on {
+  background: var(--vms-chrome-active);
+  box-shadow: inset 0 -2px 0 var(--vms-accent);
+}
+
+.vms__tool:focus-visible {
+  outline: 2px solid var(--vms-accent);
+  outline-offset: 1px;
+}
+
+.vms__count {
+  color: var(--vms-text-dim);
+}
+
+.vms__body {
+  display: flex;
+  min-height: 0;
+  height: 68vh;
+}
+
+.vms__picker {
+  width: 220px;
+  flex: none;
+  overflow-y: auto;
+  padding: 8px;
+  background: var(--vms-chrome);
+  border-right: 1px solid var(--vms-line);
+}
+
+.vms__picker-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 6px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--vms-text-dim);
+}
+
+.vms__picker-empty,
+.vms__picker-note {
+  margin: 6px 0 0;
+  font-size: 11px;
+  line-height: 15px;
+  color: var(--vms-text-dim);
+}
+
+.vms__link {
+  background: none;
+  border: none;
+  color: var(--vms-accent);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.vms__pick {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* Dense chrome, but a 40 px row so a checkbox is not a lottery to hit. */
+  min-height: 40px;
+  padding: 0 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.vms__pick-name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vms__pick-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.vms__pick-dot--on {
+  background: #4caf50;
+}
+
+.vms__pick-dot--off {
+  background: var(--vms-text-faint);
+}
+
+.vms__stage {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+}
+
+.vms__grid {
+  flex: 1 1 auto;
+  display: grid;
+  /* 2 px: on a nine-tile wall the usual 8 px rhythm costs real picture. */
+  gap: 2px;
+  padding: 2px;
+  min-width: 0;
+}
+
+.vms__state {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  text-align: center;
+}
+
+.vms__state-head {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.vms__state-body {
+  margin: 0;
+  max-width: 46ch;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--vms-text-dim);
+}
+
+/* ------------------------------------------------------------ capabilities */
+
+.vms__caps {
+  padding: 10px;
+  background: var(--vms-chrome);
+  border-top: 1px solid var(--vms-line);
+}
+
+.vms__caps-head {
+  margin: 0 0 8px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--vms-text-dim);
+}
+
+.vms__caps-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 8px;
+}
+
+/*
+  A CONTROL THAT IS OFF IS OUTLINED, NOT FADED.
+
+  A faded fill is a live control with the lights down; an outline is the shape
+  of a control that is not there yet. The accent rail on the left says the same
+  thing again: a defined slot, waiting to be filled — which is literally true.
+*/
+.vms__cap {
+  padding: 8px 10px;
+  border: 1px solid var(--vms-line);
+  border-left: 2px solid var(--vms-accent);
+  border-radius: var(--vms-radius);
+  background: transparent;
+}
+
+.vms__cap-title {
+  margin: 0 0 2px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  /* The TITLE stays legible even when the control is off: somebody who cannot
+     read "Recorded footage" cannot ask for it. */
+  color: var(--vms-text);
+}
+
+.vms__cap-tag {
+  font-size: 11px;
+  font-weight: 400;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius);
+  background: var(--vms-chrome-active);
+  color: var(--vms-text-dim);
+  white-space: nowrap;
+}
+
+/*
+  0.55, not the Material 0.38. Every switched-off control here carries a
+  SENTENCE, and 0.38 measures about 3.3:1 against this surface — under the 4.5:1
+  a sentence needs. 0.55 measures about 5.2:1. A reason nobody can read is the
+  same as no reason at all.
+*/
+.vms__cap--off .vms__cap-detail {
+  opacity: 0.55;
+}
+
+.vms__cap-detail {
+  margin: 0;
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--vms-text-dim);
+}
+
+.vms:fullscreen .vms__body {
+  height: auto;
+  flex: 1 1 auto;
+}
+
+.vms:fullscreen {
+  height: 100vh;
+}
+</style>