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

package/components/CameraWall.vue

@@ -0,0 +1,650 @@
+<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" />
+
+      <div v-if="pages > 1" class="vms__pager">
+        <button type="button" class="vms__tool" :disabled="page === 1" @click="page--">
+          Prev
+        </button>
+        <span class="vms__range">{{ pageRange || `Page ${page} of ${pages}` }}</span>
+        <button type="button" class="vms__tool" :disabled="page >= pages" @click="page++">
+          Next
+        </button>
+      </div>
+
+      <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 { getAllSiteCameras } = useSiteSettings();
+
+const cameras = ref<TWallCamera[]>([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("");
+const loading = ref(true);
+const failed = ref("");
+
+async function load() {
+  loading.value = true;
+  failed.value = "";
+  try {
+    const res = await getAllSiteCameras({
+      site: props.site,
+      // The server is asked for IP cameras only, and `wallCameras` filters
+      // again on the way in: an ANPR unit belongs to visitor and vehicle
+      // management and must never appear on a monitoring wall.
+      type: "ip",
+      page: page.value,
+    });
+    cameras.value = wallCameras(res?.items);
+    pages.value = Number(res?.pages) || 0;
+    pageRange.value = String(res?.pageRange || "");
+  } catch {
+    // The reason an API call failed is rarely something an operator can act on,
+    // and the raw message is often a stack trace. Say what is true and offer
+    // the one useful action.
+    cameras.value = [];
+    failed.value = "The list of cameras did not load. Check your connection and try again.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+watch(page, load);
+watch(() => props.site, () => {
+  page.value = 1;
+  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__pager {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vms__range {
+  font-size: 12px;
+  color: var(--vms-text-dim);
+  white-space: nowrap;
+}
+
+.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>

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/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.55",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/utils/camera-wall.test.ts

@@ -0,0 +1,121 @@
+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.");
+});

package/utils/camera-wall.ts

@@ -0,0 +1,281 @@
+/**
+ * THE CAMERA WALL'S RULES, WITH NO MARKUP IN THEM.
+ *
+ * `CameraWall.vue` draws the wall; this file decides what it is allowed to draw.
+ * Keeping the two apart is not tidiness — every rule below is one somebody can
+ * get wrong in a way nobody notices until a supervisor is looking at the wrong
+ * picture, so each one is stated once, here, and pinned by `camera-wall.test.ts`.
+ *
+ * ## The four rules
+ *
+ * 1. **Only `type: "ip"` cameras go on a wall.** An ANPR unit belongs to visitor
+ *    and vehicle management: it is pointed at a number plate, it is wired to a
+ *    barrier, and its record carries a real device address and a real credential.
+ *    Putting one on a monitoring wall is a defect, not a feature. The request
+ *    already asks the server for `type=ip`; `wallCameras()` filters again on the
+ *    way in, because "the caller passed the right query" is an assumption and
+ *    this is the rule.
+ * 2. **A capability we have not been told about is NOT available.** An absent or
+ *    malformed descriptor reads as `unknown`, and `unknown` counts as no — so a
+ *    browser talking to an older API cannot draw a control that would do nothing.
+ * 3. **A control that is off is drawn, dimmed, and says why** — never hidden. The
+ *    sentence shown is the SERVER'S own sentence, never rewritten here, so a
+ *    camera cannot explain itself two different ways on two screens.
+ * 4. **"Live" means a picture is arriving**, not "we asked for one". The tile
+ *    says `Connecting…` until the player page is actually up, and `No signal`
+ *    when it never comes.
+ *
+ * These match the iSecure365 mobile monitoring build one for one, deliberately:
+ * the same product should not answer the same question differently on a phone
+ * and on a laptop.
+ */
+
+/** One capability's answer, as the API returns it (core's `CameraCapabilityEntry`). */
+export type TWallCapability = {
+  state?: "supported" | "unsupported" | "unknown";
+  transport?: string | null;
+  reason?: string | null;
+  /** The server's own sentence. Displayed verbatim; never rewritten here. */
+  detail?: string | null;
+};
+
+/** A camera as the wall needs it. Extra fields on the record are ignored. */
+export type TWallCamera = {
+  _id: string;
+  name?: string;
+  /**
+   * The stored address. For a `type: "ip"` camera this is a complete, directly
+   * renderable live-video page — it is the picture, not a fragment to resolve.
+   */
+  host?: string;
+  type?: string;
+  status?: string;
+  capabilities?: Record<string, TWallCapability>;
+};
+
+/* -------------------------------------------------------------------------- */
+/* Layouts                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The three wall sizes.
+ *
+ * Square only, and only three of them. A VMS layout picker exists so a
+ * supervisor can change what they are watching in one click; a list of eleven
+ * arrangements is a settings screen wearing a toolbar's clothes.
+ */
+export const WALL_LAYOUTS = [
+  { key: "1x1", columns: 1, tiles: 1, label: "Single" },
+  { key: "2x2", columns: 2, tiles: 4, label: "Four" },
+  { key: "3x3", columns: 3, tiles: 9, label: "Nine" },
+] as const;
+
+export type TWallLayoutKey = (typeof WALL_LAYOUTS)[number]["key"];
+
+/** Four tiles: enough to be a wall, small enough to still be readable. */
+export const DEFAULT_WALL_LAYOUT: TWallLayoutKey = "2x2";
+
+export function wallLayout(key: string | undefined) {
+  return WALL_LAYOUTS.find((l) => l.key === key) ?? WALL_LAYOUTS[1];
+}
+
+/**
+ * At three columns a tile is small enough that the chrome starts eating the
+ * picture, so the tile drops its status WORD and keeps the dot.
+ */
+export function isDenseLayout(key: string | undefined) {
+  return wallLayout(key).columns >= 3;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Which cameras, and in what order                                            */
+/* -------------------------------------------------------------------------- */
+
+/** Rule 1. Only `type: "ip"`. See the note at the top of this file. */
+export function wallCameras(items: unknown): TWallCamera[] {
+  if (!Array.isArray(items)) return [];
+  return items.filter(
+    (c): c is TWallCamera => !!c && typeof c === "object" && (c as TWallCamera).type === "ip"
+  );
+}
+
+/**
+ * The tiles, in order, padded with `null` to the layout's size.
+ *
+ * An empty selection is **not** "no cameras" — it is "nobody has chosen yet",
+ * and the wall falls back to the site's own order. A supervisor who clears the
+ * picker gets their site back, not a black screen.
+ */
+export function wallTiles(
+  cameras: TWallCamera[],
+  selectedIds: string[] | undefined,
+  layoutKey: string | undefined
+): Array<TWallCamera | null> {
+  const { tiles } = wallLayout(layoutKey);
+  const byId = new Map(cameras.map((c) => [c._id, c]));
+  const chosen =
+    selectedIds && selectedIds.length
+      ? selectedIds.map((id) => byId.get(id)).filter((c): c is TWallCamera => !!c)
+      : cameras;
+
+  const out: Array<TWallCamera | null> = chosen.slice(0, tiles);
+  while (out.length < tiles) out.push(null);
+  return out;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Capabilities                                                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The two words a switched-off control wears.
+ *
+ * Lifted unchanged from the mobile build, and the "yet" is the whole point: it
+ * is the difference between a feature that is broken and a feature that is
+ * waiting on something somebody has to switch on.
+ */
+export const CAPABILITY_TAGS = {
+  unsupported: "Not set up yet",
+  unknown: "Not checked yet",
+} as const;
+
+/**
+ * What a client with no descriptor at all should say. This is the server's own
+ * `device-not-probed` sentence, reused rather than reinvented, so an older API
+ * that sends no descriptor still explains itself in the product's own words.
+ */
+const NOT_PROBED = "This camera has not been asked what it can do yet.";
+
+/** The four capabilities the wall draws a control for, and their plain names. */
+export const WALL_CAPABILITY_CONTROLS = [
+  { key: "playback", title: "Recorded footage" },
+  { key: "events", title: "Events and alarms" },
+  { key: "ptz", title: "Move camera" },
+  { key: "presets", title: "Stored positions" },
+] as const;
+
+export type TCapabilityView = {
+  state: "supported" | "unsupported" | "unknown";
+  available: boolean;
+  /** `null` when the capability works — a working control needs no tag. */
+  tag: string | null;
+  /** The server's sentence, or the not-probed one. Never empty. */
+  detail: string;
+};
+
+/** Rule 2 and rule 3, in one place. */
+export function capabilityView(
+  camera: TWallCamera | null | undefined,
+  key: string
+): TCapabilityView {
+  const entry = camera?.capabilities?.[key];
+  const state =
+    entry?.state === "supported" || entry?.state === "unsupported"
+      ? entry.state
+      : "unknown";
+
+  return {
+    state,
+    available: state === "supported",
+    tag: state === "supported" ? null : CAPABILITY_TAGS[state],
+    detail: (entry?.detail || "").trim() || NOT_PROBED,
+  };
+}
+
+/* -------------------------------------------------------------------------- */
+/* Tile state                                                                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * How long a player page may take to load before the tile stops claiming it is
+ * coming. Deliberately generous — lifted from the mobile build, where the
+ * argument is that reporting a working video service as dead is the worse of
+ * the two mistakes.
+ */
+export const LIVE_CONNECT_TIMEOUT_MS = 15_000;
+
+export type TTileState =
+  | "live"
+  | "connecting"
+  | "no-signal"
+  | "offline"
+  | "unavailable";
+
+/**
+ * The four words a tile may say about itself.
+ *
+ * `offline` and `no-signal` are two different facts and used to share one word:
+ * "Offline" on every tile at once means the BROWSER lost the network; "No
+ * signal" on one tile means that camera is not answering. A supervisor needs to
+ * know which of those they are looking at.
+ */
+export const TILE_LABELS = {
+  live: "Live",
+  connecting: "Connecting…",
+  "no-signal": "No signal",
+  offline: "No connection",
+  unavailable: "Not set up yet",
+} as const;
+
+/** What the browser knows about the embedded player page. */
+export type TPlayerState = "loading" | "ready" | "timeout";
+
+export type TTileView = {
+  state: TTileState;
+  label: string;
+  /** A sentence for the states that need explaining; `null` when live. */
+  detail: string | null;
+  /** Whether the player page may be embedded at all. */
+  showPlayer: boolean;
+};
+
+/**
+ * Rule 4, plus every reason a tile may have nothing to show.
+ *
+ * Order matters: the browser being offline beats everything (it explains every
+ * tile at once), then the record's own problems, then the server's verdict on
+ * live video, and only then what the embedded page is actually doing.
+ */
+export function tileView(
+  camera: TWallCamera | null | undefined,
+  opts: { online?: boolean; player?: TPlayerState } = {}
+): TTileView {
+  const online = opts.online !== false;
+  const dead = (state: TTileState, detail: string | null): TTileView => ({
+    state,
+    label: TILE_LABELS[state],
+    detail,
+    showPlayer: false,
+  });
+
+  if (!camera) return dead("unavailable", "No camera in this position.");
+  if (!online)
+    return dead("offline", "This browser has no internet connection.");
+  if (camera.status && camera.status !== "active")
+    return dead("unavailable", "This camera is not active.");
+  if (!camera.host) return dead("unavailable", "This camera has no address configured.");
+
+  const live = capabilityView(camera, "liveVideo");
+  if (live.state === "unsupported") return dead("unavailable", live.detail);
+
+  const player = opts.player ?? "loading";
+  if (player === "timeout")
+    return {
+      state: "no-signal",
+      label: TILE_LABELS["no-signal"],
+      // Invented: only the browser can know the page never loaded, so the
+      // server has no reason code for it. Worded as a fact, not a diagnosis —
+      // we genuinely cannot tell a dead camera from a dead video service.
+      detail: "The live view did not load. The camera or the video service may be down.",
+      showPlayer: true,
+    };
+  if (player === "loading")
+    return {
+      state: "connecting",
+      label: TILE_LABELS.connecting,
+      detail: null,
+      showPlayer: true,
+    };
+
+  return { state: "live", label: TILE_LABELS.live, detail: null, showPlayer: true };
+}