@7365admin1/layer-common 3.2.1-staging.63 → 3.2.1-staging.65

package/components/CameraWallTile.vue

@@ -13,16 +13,49 @@
       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.
+
+      The STAGE around it is what zooms: the transform is on our own element,
+      so magnifying the picture needs nothing from inside that page and reaches
+      into no other origin.
+    -->
+    <div
+      v-if="camera && view.showPlayer"
+      class="vms-tile__stage"
+      :style="stageStyle"
+    >
+      <iframe
+        ref="frameEl"
+        :key="camera.host"
+        :src="camera.host"
+        class="vms-tile__frame"
+        :title="`Live view of ${camera.name || 'camera'}`"
+        allowfullscreen
+        referrerpolicy="no-referrer"
+        @load="onPlayerLoad"
+        @error="onPlayerError"
+      />
+    </div>
+
+    <!--
+      THE LAYER THAT MAKES THE TILE A TILE AGAIN.
+
+      An iframe swallows every pointer event that lands on it, so before this
+      existed a click on a tile that was actually showing a picture never
+      reached us: selecting a camera only worked on the tiles with no video in
+      them, which is the opposite of useful. This transparent layer sits over
+      the picture so a click selects, a double-click goes full screen, and —
+      when the server says this camera supports it — a wheel zooms and a drag
+      pans. The player page underneath has no controls of its own to lose.
     -->
-    <iframe
+    <div
       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"
+      class="vms-tile__grab"
+      :class="{ 'vms-tile__grab--zoomed': zoom > 1 }"
+      @wheel="onWheel"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerEnd"
+      @pointercancel="onPointerEnd"
     />
 
     <!--
@@ -35,20 +68,60 @@
     </div>
 
     <!-- Chrome sits OVER the picture, never around it. -->
-    <div v-if="camera" class="vms-tile__status">
+    <!--
+      THE STATUS WORD IS NEVER DROPPED, AT ANY LAYOUT.
+
+      It used to be: at nine tiles the badge became a bare 7 px dot, on the
+      argument that the word was unreadable at wall-scanning distance. That is
+      a phone's argument. Nine tiles on a desktop wall is the layout a
+      supervisor watches from furthest away and the one where a dying camera is
+      most likely to go unnoticed, so it is the last place to remove the only
+      words that say whether a camera is alive. The type shrinks; the fact
+      stays.
+    -->
+    <div v-if="camera" class="vms-tile__status" :title="view.note || undefined">
       <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>
+      <span 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>
+      <!--
+        RULE 6: the RECORDER's state, kept apart from the badge above, which is
+        about the player page. At nine tiles it keeps its phrase and loses only
+        the timestamp — a dropped recorder is not a detail to hide on the
+        busiest layout.
+      -->
+      <span
+        v-if="healthLine"
+        class="vms-tile__health"
+        :title="healthTitle"
+      >
+        <span class="vms-tile__dot" :class="`vms-tile__dot--h-${recorder.tone}`" />
+        {{ healthLine }}
+      </span>
+
+      <!--
+        THE ZOOM READOUT AND THE WAY BACK.
+
+        Only drawn once the picture is actually magnified. A supervisor who has
+        zoomed into a corner needs one obvious control out, and needs to be
+        able to tell a magnified picture from a camera that has been moved —
+        hence the "2.0x" reading rather than a bare arrow. In the same row as
+        the name, so it can never sit on top of it.
+      -->
+      <span v-if="zoom > 1" class="vms-tile__zoom">
+        <span class="vms-tile__zoom-level">{{ zoom.toFixed(1) }}x</span>
+        <button
+          type="button"
+          class="vms-tile__zoom-reset"
+          title="Back to the whole picture"
+          @click.stop="resetZoom"
+        >
+          Reset
+        </button>
+      </span>
     </div>
 
     <button
@@ -73,13 +146,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
+  capabilityView,
+  clampPan,
+  clampZoom,
+  healthView,
   LIVE_CONNECT_TIMEOUT_MS,
+  LIVE_FRAME_TIMEOUT_MS,
+  playerOrigin,
+  playerSignal,
   tileView,
+  zoomStep,
   type TPlayerState,
   type TWallCamera,
+  type TWallCameraHealth,
 } from "../utils/camera-wall";
 
 /**
@@ -89,16 +171,26 @@ import {
  * 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
+ * ## The ceiling, and what the badge is now allowed to claim
  *
  * 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.
+ * the page belongs to the video service, not to us, and reaching into another
+ * origin's document is blocked by the browser — correctly.
+ *
+ * That ceiling has not moved. What has changed is that the badge no longer
+ * pretends otherwise. A loaded page earns **"Not verified"**, not "Live"; only
+ * a frame the video service itself reports over `postMessage` earns "Live".
+ * The service sends nothing today, so every tile on this estate sits at "Not
+ * verified" — which is the true answer. It went in because on the live wall two
+ * cameras rendered a blank rectangle under a green "Live" badge, which is the
+ * one thing a monitoring screen must never do.
+ *
+ * The listener below is inert until the video service emits. The change needed
+ * there is small — jsmpeg already calls back on every decoded frame, so
+ * `parent.postMessage({ event: "frame" }, "*")` from its `onVideoDecode` and
+ * `{ event: "stalled" }` from `onStalled` is the whole of it — but it lives in
+ * another repository and another team's deployment, and is written up in the
+ * PR rather than done here.
  */
 
 const props = withDefaults(
@@ -109,23 +201,208 @@ const props = withDefaults(
     /** Browser connectivity. One dead tile and a dead browser look identical otherwise. */
     online?: boolean;
     focused?: boolean;
+    /** The recorder's own state, from the health sweep. Separate fact — rule 6. */
+    health?: TWallCameraHealth | null;
+    /** Recomputed by the wall on its own clock so "4 min ago" does not freeze. */
+    now?: number;
   }>(),
-  { dense: false, online: true, focused: false }
+  { dense: false, online: true, focused: false, health: null, now: 0 }
 );
 
 defineEmits<{ (e: "focus", camera: TWallCamera): void }>();
 
 const root = ref<HTMLElement | null>(null);
+const frameEl = ref<HTMLIFrameElement | null>(null);
 const player = ref<TPlayerState>("loading");
 let timer: ReturnType<typeof setTimeout> | null = null;
+let frameTimer: ReturnType<typeof setTimeout> | null = null;
 
 const view = computed(() =>
   tileView(props.camera, { online: props.online, player: player.value })
 );
 
+/* ------------------------------------------------------------------ health */
+
+const recorder = computed(() => healthView(props.health, props.now || Date.now()));
+
+/**
+ * One line, and the last-picture time only when there is one. A tile that has
+ * never served a picture must not read as "last picture: never" — it has its
+ * own reason across the tile already, and repeating it small and grey is noise.
+ */
+const healthLine = computed(() => {
+  if (!props.health) return "";
+  const { label, lastFrame } = recorder.value;
+  // Nine tiles: the phrase stays, the timestamp goes. "Recorder not responding"
+  // is the fact; "· 4 min ago" is the detail, and detail is what a small tile
+  // gives up.
+  return lastFrame && !props.dense ? `${label} · ${lastFrame}` : label;
+});
+
+/** Everything the line had no room for, on hover. */
+const healthTitle = computed(() =>
+  [recorder.value.detail, recorder.value.deviceDetail].filter(Boolean).join(" ")
+);
+
+/* -------------------------------------------------------------------- zoom */
+
+/**
+ * DIGITAL ZOOM — armed by the SERVER, not by this component.
+ *
+ * `digitalZoom` is a capability like any other, and `unknown` counts as no: a
+ * browser talking to an API that predates the descriptor gets no zoom rather
+ * than a gesture that silently does nothing. Nothing here contacts a device —
+ * this crops and enlarges the picture already on the screen — but the rule is
+ * the rule, and honouring it is what keeps zoom and "Move camera" visibly
+ * different things.
+ */
+const canZoom = computed(
+  () => view.value.showPlayer && capabilityView(props.camera, "digitalZoom").available
+);
+
+const zoom = ref(1);
+const pan = ref({ x: 0, y: 0 });
+const frame = ref({ width: 0, height: 0 });
+
+/** Live pointers, by id: two of them is a pinch, one is a drag. */
+const pointers = new Map<number, { x: number; y: number }>();
+let dragFrom = { x: 0, y: 0, pan: { x: 0, y: 0 }, distance: 0, zoom: 1 };
+
+const stageStyle = computed(() => ({
+  transform: `translate(${pan.value.x}px, ${pan.value.y}px) scale(${zoom.value})`,
+}));
+
+function resetZoom() {
+  zoom.value = 1;
+  pan.value = { x: 0, y: 0 };
+}
+
+function measure(el: HTMLElement | null) {
+  if (!el) return;
+  const box = el.getBoundingClientRect();
+  frame.value = { width: box.width, height: box.height };
+}
+
+function setZoom(next: number) {
+  const scale = clampZoom(next);
+  zoom.value = scale;
+  pan.value = clampPan(pan.value, scale, frame.value);
+}
+
+function onWheel(event: WheelEvent) {
+  if (!canZoom.value) return;
+  // At 1x, scrolling DOWN is somebody scrolling the page and must stay that
+  // way — a wall two thirds of the way down a page that traps the wheel is
+  // a page you cannot get past.
+  if (zoom.value <= 1 && event.deltaY > 0) return;
+
+  event.preventDefault();
+  measure(event.currentTarget as HTMLElement);
+  setZoom(zoomStep(zoom.value, event.deltaY));
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (!canZoom.value) return;
+  const el = event.currentTarget as HTMLElement;
+  pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+  measure(el);
+
+  const two = [...pointers.values()];
+  dragFrom = {
+    x: event.clientX,
+    y: event.clientY,
+    pan: { ...pan.value },
+    distance: two.length >= 2 ? Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y) : 0,
+    zoom: zoom.value,
+  };
+
+  // Only capture once there is something to drag. At 1x the tile must keep
+  // behaving like a button: click selects, double-click goes full screen.
+  if (zoom.value > 1 || pointers.size >= 2) el.setPointerCapture?.(event.pointerId);
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!canZoom.value || !pointers.has(event.pointerId)) return;
+  pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+
+  const two = [...pointers.values()];
+  if (two.length >= 2) {
+    // Pinch. The starting distance is re-anchored on every release, because a
+    // second finger lifting mid-pinch otherwise leaves a stale one and the
+    // next move jumps.
+    const distance = Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y);
+    if (dragFrom.distance > 0) setZoom((dragFrom.zoom * distance) / dragFrom.distance);
+    return;
+  }
+
+  if (zoom.value <= 1) return;
+  event.preventDefault();
+  pan.value = clampPan(
+    {
+      x: dragFrom.pan.x + (event.clientX - dragFrom.x),
+      y: dragFrom.pan.y + (event.clientY - dragFrom.y),
+    },
+    zoom.value,
+    frame.value
+  );
+}
+
+function onPointerEnd(event: PointerEvent) {
+  pointers.delete(event.pointerId);
+  dragFrom = { ...dragFrom, distance: 0, zoom: zoom.value, pan: { ...pan.value } };
+}
+
+/**
+ * A tile reused for a different camera must not inherit the previous one's
+ * magnification, and a camera that stops supporting zoom must not stay stuck
+ * in a crop nobody can now reset.
+ */
+watch([() => props.camera?._id, canZoom], () => resetZoom());
+
+/**
+ * The document arrived. That is ALL this proves — the video service answers
+ * with the same player page for a channel that has no camera behind it — so it
+ * buys `page-up` and no more. Only `onPlayerMessage` can reach "Live".
+ */
 function onPlayerLoad() {
-  player.value = "ready";
   clearTimer();
+  if (player.value !== "playing") player.value = "page-up";
+}
+
+/** Rare for a cross-origin frame, but free, and unambiguous when it happens. */
+function onPlayerError() {
+  clearTimer();
+  player.value = "failed";
+}
+
+/**
+ * THE ONLY ROUTE TO A GREEN BADGE.
+ *
+ * Two checks before a message is believed, and both matter: the message must
+ * come from the window we embedded (any page can `postMessage` this one), and
+ * it must come from the camera's own origin. An unrecognised payload returns
+ * `null` and leaves the tile exactly where it was — a message we do not
+ * understand must never be able to turn a badge green.
+ */
+function onPlayerMessage(event: MessageEvent) {
+  const origin = playerOrigin(props.camera?.host);
+  if (!origin || event.origin !== origin) return;
+  if (frameEl.value && event.source !== frameEl.value.contentWindow) return;
+
+  const signal = playerSignal(event.data);
+  if (!signal) return;
+
+  clearTimer();
+  if (signal === "playing") {
+    player.value = "playing";
+    // A picture that arrived once and stopped must not stay green. This is the
+    // mobile app's "Live over a nine-second-old still" defect, and the clock is
+    // the only thing standing between us and repeating it.
+    restartFrameClock();
+  } else {
+    clearFrameTimer();
+    player.value = signal === "stalled" ? "stalled" : "failed";
+  }
 }
 
 function clearTimer() {
@@ -135,25 +412,51 @@ function clearTimer() {
   }
 }
 
+function clearFrameTimer() {
+  if (frameTimer) {
+    clearTimeout(frameTimer);
+    frameTimer = null;
+  }
+}
+
+function restartFrameClock() {
+  clearFrameTimer();
+  frameTimer = setTimeout(() => {
+    if (player.value === "playing") player.value = "stalled";
+  }, LIVE_FRAME_TIMEOUT_MS);
+}
+
 /**
  * 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.
+ *
+ * The timeout only fires while nothing at all has been heard: a page that
+ * loaded is already at `page-up` and stays there. Sitting on "Not verified"
+ * indefinitely is deliberate — declaring a camera dead on a timer, with no
+ * evidence, is the same mistake as declaring it live on a timer.
  */
 watch(
   () => props.camera?.host,
   (host) => {
     clearTimer();
+    clearFrameTimer();
     player.value = "loading";
     if (!host) return;
     timer = setTimeout(() => {
-      if (player.value === "loading") player.value = "timeout";
+      if (player.value === "loading") player.value = "failed";
     }, LIVE_CONNECT_TIMEOUT_MS);
   },
   { immediate: true }
 );
 
-onBeforeUnmount(clearTimer);
+onMounted(() => window.addEventListener("message", onPlayerMessage));
+
+onBeforeUnmount(() => {
+  window.removeEventListener("message", onPlayerMessage);
+  clearTimer();
+  clearFrameTimer();
+});
 
 /** The browser's own fullscreen. Nothing to build, and it survives the F11 key. */
 async function toggleFullscreen() {
@@ -193,6 +496,18 @@ async function toggleFullscreen() {
   border: 1px dashed var(--vms-line, #232b36);
 }
 
+/*
+  The stage is what the transform is applied to; the tile clips it. No
+  transition: a supervisor dragging a magnified picture expects it under their
+  pointer, and 150 ms of easing on every move reads as lag, not polish.
+*/
+.vms-tile__stage {
+  position: absolute;
+  inset: 0;
+  transform-origin: center center;
+  will-change: transform;
+}
+
 .vms-tile__frame {
   width: 100%;
   height: 100%;
@@ -201,6 +516,25 @@ async function toggleFullscreen() {
   background: #000;
 }
 
+/*
+  Transparent, and over the picture. It is what gives the tile its clicks back
+  from the iframe; `touch-action: none` is what lets a pinch be a pinch rather
+  than the browser zooming the whole page.
+*/
+.vms-tile__grab {
+  position: absolute;
+  inset: 0;
+  touch-action: none;
+}
+
+.vms-tile__grab--zoomed {
+  cursor: grab;
+}
+
+.vms-tile__grab--zoomed:active {
+  cursor: grabbing;
+}
+
 .vms-tile__overlay {
   position: absolute;
   inset: 0;
@@ -254,6 +588,17 @@ async function toggleFullscreen() {
 .vms-tile__dot--connecting {
   background: #fb8c00;
 }
+/*
+  NOT VERIFIED is deliberately not amber and deliberately not green. Amber is
+  "something is wrong", and nothing is known to be wrong; green is the claim
+  being withdrawn. A hollow ring reads as "no answer here", which is exactly
+  the fact. #7a8697 measures 5.0:1 on a tile — a dot nobody can see is a state
+  nobody knows about.
+*/
+.vms-tile__dot--unverified {
+  background: transparent;
+  box-shadow: inset 0 0 0 2px #7a8697;
+}
 .vms-tile__dot--no-signal,
 .vms-tile__dot--offline {
   background: #e0241c;
@@ -269,15 +614,119 @@ async function toggleFullscreen() {
   white-space: nowrap;
 }
 
+/* Nine tiles: smaller and tighter, still a word. */
+.vms-tile--dense .vms-tile__status {
+  top: 4px;
+  right: 4px;
+  gap: 4px;
+  padding: 1px 5px;
+}
+
+.vms-tile--dense .vms-tile__state {
+  font-size: 10px;
+  line-height: 13px;
+}
+
+/*
+  `wrap` is what keeps the promise that the name and the recorder line both
+  survive a narrow tile: on a cramped nine-tile wall the health phrase drops to
+  its own line instead of squeezing the name into an ellipsis.
+*/
 .vms-tile__chrome {
   position: absolute;
   left: 6px;
   right: 6px;
   bottom: 5px;
   display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 3px 6px;
   pointer-events: none;
 }
 
+.vms-tile--dense .vms-tile__chrome {
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
+}
+
+/*
+  The RECORDER's state, and deliberately quieter than the name and the badge:
+  it is a second-order fact a supervisor reads when something looks wrong, not
+  something that should compete with the picture every second it is fine.
+*/
+.vms-tile__health {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: 0 1 auto;
+  min-width: 0;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  color: var(--vms-text-dim, #94a0b0);
+  font-size: 11px;
+  line-height: 15px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vms-tile--dense .vms-tile__health {
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.vms-tile__dot--h-ok {
+  background: #4caf50;
+}
+.vms-tile__dot--h-warn {
+  background: #fb8c00;
+}
+.vms-tile__dot--h-down {
+  background: #e0241c;
+}
+.vms-tile__dot--h-unknown {
+  background: var(--vms-text-faint, #5c6675);
+}
+
+/* --------------------------------------------------------------- the zoom */
+
+.vms-tile__zoom {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  /* Pushed to the far end of the chrome row, opposite the name. */
+  margin-left: auto;
+  flex: none;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  font-size: 11px;
+  line-height: 15px;
+  /* The row is click-through; this one control is not. */
+  pointer-events: auto;
+}
+
+.vms-tile__zoom-level {
+  color: var(--vms-text, #e8ecf1);
+  font-variant-numeric: tabular-nums;
+}
+
+.vms-tile__zoom-reset {
+  background: none;
+  border: none;
+  padding: 2px 2px;
+  color: var(--vms-accent, #5b9be0);
+  font-size: 11px;
+  line-height: 15px;
+  cursor: pointer;
+}
+
+.vms-tile__zoom-reset:focus-visible {
+  outline: 2px solid var(--vms-accent, #5b9be0);
+}
+
 .vms-tile__name {
   color: var(--vms-text, #e8ecf1);
   font-size: 12px;