@7365admin1/layer-common 4.58.0 → 4.58.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @iservice365/layer-common
 
+## 4.58.2
+
+### Patch Changes
+
+- 40a1da2: Robot live view (PadBot S2): the camera's stray H.264 delimiters are now rewritten into real H.265 access-unit delimiters (after a 4-byte start code). The S2 sends VPS/SPS/PPS each in its own PES; without an H.265 delimiter hls.js 1.7.3 dropped the PPS from the init segment and Chrome decoded 0 frames (black picture, clock running).
+
+## 4.58.1
+
+### Patch Changes
+
+- e186caf: Robot live view: no more silent reload every ~6 s. PadBot's video URL expiry comes without a time zone ("2026-09-26 16:26:02"); read as local time it was already past, so the panel fetched a new URL every 5 s forever. An expiry that has no zone, or is under a minute away, no longer schedules a re-fetch (the stream's own failure still reconnects, with capped backoff, then Retry). The no-picture and stall watchdogs no longer count while the page is hidden.
+- c4adb97: Robots: a robot's name tag stays inside the plan. Near the right edge it sits to the robot's left, and near the top it goes below: on robot detail (name + status) and on the building map, as the mini-map already did. Before, the S2 docked at the top-right showed only "HERO-OT".
+
 ## 4.58.0
 
 ### Minor Changes
@@ -1617,11 +1630,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                      GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                      GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                          GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                          GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                      owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                      staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                          owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                          staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/assets/css/robot-hero.css

@@ -829,6 +829,8 @@
 .hero-me { position: absolute; width: 0; height: 0; }
 .hero-me__tag { position: absolute; left: 14px; top: -26px; white-space: nowrap; font-size: 11px; font-weight: 800; padding: 2px 6px; background: var(--hero-text); color: var(--hero-bg); line-height: 1.45; }
 .hero-me__tag > span { font-weight: 400; opacity: 0.75; }
+.hero-me__tag--left { left: auto; right: 14px; }
+.hero-me__tag--below { top: 14px; }
 .hero-me__radar {
   position: absolute;
   left: -36px;
@@ -1009,6 +1011,8 @@
   box-shadow: var(--hero-shadow-sm);
   cursor: pointer;
 }
+/* Near the plan's right edge the name sits to the pin's left (nameTagSide) - never clipped. */
+.hero .hero-bmap__name--left { left: auto; right: 6px; transform-origin: 100% 0; border-left: 0; border-right: 3px solid var(--hero-bot); }
 .hero-bmap__floorlabel { position: absolute; left: -14px; top: 50%; transform-origin: 0 0; font-size: 12px; font-weight: 800; padding: 1px 6px; background: var(--hero-text); color: var(--hero-bg); white-space: nowrap; }
 .hero-bmap__shaft { position: absolute; width: 0; height: 0; transform-style: preserve-3d; transition: opacity 0.6s ease; }
 .hero-bmap__shaftwall { position: absolute; left: 0; top: 0; box-sizing: border-box; transform-origin: top; transform: rotateX(90deg); background: color-mix(in srgb, var(--hero-accent) 28%, transparent); border: 1px solid var(--hero-accent); }

package/components/Robot/BuildingMap.vue

@@ -172,7 +172,14 @@
               <span class="hero-bmap__body" aria-hidden="true" />
               <span class="hero-bmap__pin" :style="{ height: `${look.pinH}px` }" aria-hidden="true" />
               <span class="hero-bmap__pin hero-bmap__pin--y" :style="{ height: `${look.pinH}px` }" aria-hidden="true" />
-              <button type="button" class="hero-bmap__name" :style="{ transform: `translateZ(${look.pinZ}px) ${unskew}` }" @click.stop="emit('open', r.id)" @mousedown.stop>
+              <button
+                type="button"
+                class="hero-bmap__name"
+                :class="{ 'hero-bmap__name--left': nameTagSide(r.left, r.top, r.name, plane.w, plane.h, BUILDING_TAG).flipX }"
+                :style="{ transform: `translateZ(${look.pinZ}px) ${unskew}` }"
+                @click.stop="emit('open', r.id)"
+                @mousedown.stop
+              >
                 {{ r.name }}
               </button>
             </div>
@@ -236,6 +243,8 @@ import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
 import { openDoorNames } from "../../utils/robot-fleet-core";
 import { robotMapViews, robotMapsByFloor, type TRobotMapView } from "../../utils/robot-maps";
 import {
+  BUILDING_TAG,
+  nameTagSide,
   brandName,
   floorName,
   mapFloors,

package/components/Robot/LivePlan.vue

@@ -20,7 +20,7 @@
       <span class="hero-cross hero-cross--v" :style="{ left: point.left, transition: `left ${tickMs}ms linear` }" aria-hidden="true" />
       <div v-if="readout" class="hero-readout">{{ readout }}</div>
       <div class="hero-me" :class="{ 'hero-me--stale': stale }" :style="{ left: point.left, top: point.top, transition: `left ${tickMs}ms linear, top ${tickMs}ms linear` }">
-        <div class="hero-me__tag">{{ name }} <span>{{ statusLabel }}</span></div>
+        <div class="hero-me__tag" :class="tagClass">{{ name }} <span>{{ statusLabel }}</span></div>
         <div class="hero-me__radar" aria-hidden="true" />
         <div class="hero-me__ping" aria-hidden="true" />
         <div class="hero-me__body" :style="{ transform: `rotate(${heading}deg)` }" aria-hidden="true"><div class="hero-me__tick" /></div>
@@ -35,9 +35,10 @@
 import RobotFloorPlan from "./FloorPlan.vue";
 import RobotPatrolRoutes from "./PatrolRoutes.vue";
 import RobotReconnecting from "./Reconnecting.vue";
-import { trailDots, type TPatrolRouteView } from "../../utils/robot-display";
+import { computed } from "vue";
+import { DETAIL_TAG, nameTagSide, trailDots, type TPatrolRouteView } from "../../utils/robot-display";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     name?: string;
     statusLabel?: string;
@@ -69,4 +70,10 @@ withDefaults(
   { stale: false, name: "", statusLabel: "", point: null, heading: 0, trail: () => [], readout: "", lost: false, route: null, routes: null, image: null, aspect: null, points: () => [], routeMoving: false, spot: () => [], pick: false, tickMs: 1200 },
 );
 const emit = defineEmits<{ pick: [point: { x: number; y: number }] }>();
+// The tag stays inside the plan (flipped left near the right edge, below near the top) - never clipped.
+const tagClass = computed(() => {
+  if (!props.point) return {};
+  const side = nameTagSide(props.point.left, props.point.top, `${props.name} ${props.statusLabel}`, 320, 240, DETAIL_TAG);
+  return { "hero-me__tag--left": side.flipX, "hero-me__tag--below": side.below };
+});
 </script>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.58.0",
+  "version": "4.58.2",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/robot-control.ts

@@ -27,11 +27,18 @@ export function liveVideoKind(url: unknown): TVideoKind {
   return "page";
 }
 
-/** When to ask for a fresh URL: 30 s before it expires (never sooner than 5 s); null when it does not expire. */
+/**
+ * When to ask for a fresh URL: 30 s before it expires. Null (no scheduled
+ * re-mint - the stream's own failure re-mints, with capped backoff) when the
+ * expiry is missing, has no time zone, or is under a minute away. PadBot sent
+ * "2026-09-26 16:26:02" (no zone): read as local time it was already past, so
+ * the old 5 s floor re-minted every ~6 s forever, silently (prod 2026-09-26).
+ */
 export function remintDelayMs(expiresAt: unknown, now: number = Date.now()): number | null {
-  const t = typeof expiresAt === "string" ? Date.parse(expiresAt) : NaN;
-  if (!Number.isFinite(t)) return null;
-  return Math.max(5_000, t - now - 30_000);
+  if (typeof expiresAt !== "string" || !/(Z|[+-]\d\d:?\d\d)$/i.test(expiresAt.trim())) return null;
+  const t = Date.parse(expiresAt);
+  if (!Number.isFinite(t) || t - now < 60_000) return null;
+  return Math.max(30_000, t - now - 30_000);
 }
 
 export const LIVE_NO_PICTURE =
@@ -71,9 +78,20 @@ export type THlsCtor = { isSupported(): boolean; new (config?: Record<string, un
  * with these units removed Chrome's own decoder decodes 40/40 frames.
  *
  * Rewrites each such header in place, inside the TS packets of video PIDs
- * only, to an "unspecified" H.265 unit (type 48) that hls.js and decoders
- * ignore. Same length, so the TS stays intact. A valid single-layer H.265
+ * only. Same length, so the TS stays intact. A valid single-layer H.265
  * header never matches (its temporal id is never 0). Returns the count.
+ *
+ * - After a 4-byte start code (the real S2 stream) it becomes a real H.265
+ *   access-unit delimiter (type 35). This matters: the S2 sends every
+ *   parameter set (VPS, SPS, PPS) in its own PES packet. Without an H.265
+ *   delimiter hls.js 1.7.3 treats each PES as a new picture, and its HEVC
+ *   parser forgets the VPS on every picture push (initVPS = null), so the PPS
+ *   is never stored and the hvcC it writes has no PPS: Chrome then decodes
+ *   0 frames with no error - time runs, picture black (prod, 2026-09-26 late;
+ *   the page's own hls.js decoded the real segments once the delimiter was a
+ *   real one: 136 frames, PPS present).
+ * - After a 3-byte start code there is no spare byte: an "unspecified" unit
+ *   (type 48) that hls.js and decoders ignore.
  */
 export function neutraliseStrayAud(data: ArrayBuffer | Uint8Array): number {
   const b = data instanceof Uint8Array ? data : new Uint8Array(data);
@@ -100,8 +118,19 @@ export function neutraliseStrayAud(data: ArrayBuffer | Uint8Array): number {
     const len = t + end - p;
     for (let k = 0; k + 4 < len; k++) {
       if (b[at(k)] === 0 && b[at(k + 1)] === 0 && b[at(k + 2)] === 1 && b[at(k + 3)] === 0x09 && (b[at(k + 4)]! & 7) === 0) {
-        b[at(k + 3)] = 0x60;
-        b[at(k + 4)] = 0x01;
+        if (k > 0 && b[at(k - 1)] === 0) {
+          // 4-byte start code (what the S2 sends): borrow its spare zero and
+          // write a REAL H.265 access-unit delimiter, 00 00 01 46 01 50.
+          b[at(k - 1)] = 0;
+          b[at(k)] = 0;
+          b[at(k + 1)] = 1;
+          b[at(k + 2)] = 0x46;
+          b[at(k + 3)] = 0x01;
+          b[at(k + 4)] = 0x50;
+        } else {
+          b[at(k + 3)] = 0x60;
+          b[at(k + 4)] = 0x01;
+        }
         n++;
         k += 4;
       }
@@ -199,6 +228,9 @@ export function startLivePlayer(
   };
   // ponytail: one 1 s poll instead of juggling media events - videoWidth has no reliable event everywhere.
   const tick = setInterval(() => {
+    // A hidden page gets no frames painted (and Chrome pauses muted background
+    // video): not the camera's fault, so the watchdogs don't count it.
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
     waited += tickMs;
     if (!pictured) {
       if (video.videoWidth > 0) {

package/utils/robot-display.ts

@@ -1609,16 +1609,29 @@ export function credentialPatch(
 }
 
 /**
- * Keep a robot's name tag inside the mini-map plan: flip it to the robot's
- * left near the right edge, and below the robot near the top edge.
- * ponytail: width estimated from the text (10px Archivo 600) against the
- * smallest plan (320px wide, 240 tall); measure if a tag must be exact.
+ * Keep a robot's name tag inside its plan (mini-map, building map, robot
+ * detail): flip it to the robot's left near the right edge, and below the
+ * robot near the top edge.
+ * ponytail: width estimated from the text (default 10px Archivo 600: 6.2 px a
+ * character + 8 px padding; `tag` for bigger tags) against the smallest plan
+ * (320px wide, 240 tall); measure if a tag must be exact.
  */
-export function nameTagSide(left: unknown, top: unknown, name: unknown, planW = 320, planH = 240) {
+export function nameTagSide(
+  left: unknown,
+  top: unknown,
+  name: unknown,
+  planW = 320,
+  planH = 240,
+  tag: { charW?: number; pad?: number; gap?: number; above?: number } = {},
+) {
   const pct = (v: unknown) => (typeof v === "string" ? parseFloat(v) : typeof v === "number" ? v : 0) || 0;
-  const width = String(name ?? "").length * 6.2 + 8;
+  const width = String(name ?? "").length * (tag.charW ?? 6.2) + (tag.pad ?? 8);
   return {
-    flipX: (pct(left) / 100) * planW + 10 + width > planW,
-    below: (pct(top) / 100) * planH < 20,
+    flipX: (pct(left) / 100) * planW + (tag.gap ?? 10) + width > planW,
+    below: (pct(top) / 100) * planH < (tag.above ?? 20),
   };
 }
+
+/** The bigger tags: robot detail's "name + status" (11px 800, 14px from the dot, 26px above) and the building map's name (11px 800). */
+export const DETAIL_TAG = { charW: 7.4, pad: 12, gap: 14, above: 30 };
+export const BUILDING_TAG = { charW: 7.4, pad: 13, gap: 6, above: 0 };