@7365admin1/layer-common 4.56.0 → 4.57.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.57.0
+
+### Minor Changes
+
+- 611dd38: Robots: the live view shows the PadBot (EZVIZ) camera's H.265 picture. HLS now plays through hls.js wherever the browser has Media Source Extensions (native HLS only as the Safari fallback), the player owns `video.src` so a re-render can no longer reset the stream (the cause of the fatal bufferAppendError / black picture), and it recovers by itself: media-error recovery, then a fresh URL with backoff on network errors, expired URLs and stalls. When no picture can be shown it says so in plain words with a Retry button. The robot detail gains an inline Live view panel that plays automatically, with an "Always show live view" switch remembered per browser; it releases the stream while the tab is hidden, the panel is far off-screen or the robot is offline, and Full screen reuses the same stream.
+
 ## 4.56.0
 
 ### Minor Changes
@@ -1587,11 +1593,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

@@ -1273,3 +1273,7 @@ div.hero-editor__wp.hero-editor__sel, div.hero-editor__fid.hero-editor__sel { ou
 .hero-drive__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .hero-pick__group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
 .hero-pick__point:disabled { opacity: 0.45; cursor: not-allowed; }
+.hero-livepanel { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--hero-surface); border: 1px solid color-mix(in srgb, var(--hero-text) 12%, transparent); }
+.hero-livepanel .hero-live__head { flex-wrap: wrap; }
+.hero-livepanel .hero-dialog__actions { margin-top: 0; }
+.hero-live__stage .hero-notice { color: var(--hero-text); font-size: 13px; max-width: 90%; }

package/components/Robot/Detail.vue

@@ -31,7 +31,7 @@
         <template v-for="ph in faultPhotos(fault)" :key="ph.label"> · <a :href="ph.url" target="_blank" rel="noopener noreferrer">{{ ph.label }}</a></template>
       </div>
     </div>
-    <v-btn v-if="caps?.liveVideo === true && online" variant="outlined" size="small" @click="liveOpen = true">Live view</v-btn>
+    <v-btn v-if="caps?.liveVideo === true && online" variant="outlined" size="small" @click="livePanel?.show()">Live view</v-btn>
     <v-btn v-if="canResolve" variant="outlined" size="small" :loading="resolving" @click="resolveFault">Mark resolved</v-btn>
     <span class="hero-faultbar__badge">{{ faultBadge(fault) }}</span>
   </div>
@@ -153,11 +153,10 @@
 
   <div v-if="caps?.liveVideo === true || canDrive">
     <div class="hero-section__title">Camera</div>
-    <div v-if="online || canDrive" class="hero-detail__video">
-      <v-btn v-if="caps?.liveVideo === true && online" variant="outlined" @click="liveOpen = true">Live view</v-btn>
-      <v-btn v-if="canDrive" variant="outlined" @click="driveOpen = true">Manual control</v-btn>
+    <RobotLiveView v-if="caps?.liveVideo === true" ref="livePanel" panel :robot-id="robotId" :name="record?.name" :offline="!online" />
+    <div v-if="canDrive" class="hero-detail__video">
+      <v-btn variant="outlined" @click="driveOpen = true">Manual control</v-btn>
     </div>
-    <div v-else class="hero-notreported">Live view opens when the robot is online.</div>
   </div>
 
   <v-dialog v-model="confirmOpen" width="440">
@@ -198,9 +197,6 @@
     </div>
   </v-dialog>
 
-  <v-dialog v-model="liveOpen" width="860">
-    <RobotLiveView v-if="liveOpen" :robot-id="robotId" :name="record?.name" @close="liveOpen = false" />
-  </v-dialog>
   <v-dialog v-model="driveOpen" width="520" persistent>
     <RobotManualDrive v-if="driveOpen" :robot-id="robotId" :name="record?.name" @close="driveOpen = false" />
   </v-dialog>
@@ -600,7 +596,7 @@ function onPick(p: TSavedPoint) {
 }
 
 /* ---- security-robot extras: live view (minted per open, never kept), manual control, resolve an alarm ---- */
-const liveOpen = ref(false);
+const livePanel = ref<{ show(): void } | null>(null);
 const driveOpen = ref(false);
 const canDrive = computed(() => props.canCommand && caps.value?.manualDrive === true && online.value);
 const canResolve = computed(

package/components/Robot/LiveView.vue

@@ -1,24 +1,37 @@
 <template>
   <!--
-    The robot's current camera stream, in the page (security robots, liveVideo).
+    The robot's current camera stream (security robots, liveVideo).
+    Two shapes, one player: the pop-up dialog (`panel` unset) and the inline
+    panel on the robot detail (`panel`), which plays by itself, remembers
+    "Always show live view" per browser, and releases the stream while the tab
+    is hidden, the panel is far off-screen, or the robot is offline.
     The URL is minted per open and re-minted shortly before it expires; it is
-    never stored. What the browser cannot play in place opens in a new tab.
+    never stored. Full screen reuses the same stream - never a second fetch.
   -->
-  <div class="hero-dialog hero-live" role="dialog" aria-labelledby="hero-live-title">
+  <div
+    ref="root"
+    :class="panel ? 'hero-livepanel' : 'hero-dialog hero-live'"
+    :role="panel ? 'region' : 'dialog'"
+    :aria-labelledby="titleId"
+  >
     <div class="hero-live__head">
-      <div id="hero-live-title" class="hero-dialog__title">Live view · {{ name }}</div>
+      <div :id="titleId" class="hero-dialog__title">{{ panel ? "Live view" : `Live view · ${name ?? ""}` }}</div>
       <span class="hero-head__spacer" />
-      <div class="hero-live__quality" role="group" aria-label="Quality">
+      <v-switch v-if="panel" v-model="on" label="Always show live view" density="compact" color="primary" hide-details inset />
+      <div v-if="on" class="hero-live__quality" role="group" aria-label="Quality">
         <button type="button" :aria-pressed="quality === 'smooth'" @click="quality = 'smooth'">Smooth</button>
         <button type="button" :aria-pressed="quality === 'hd'" @click="quality = 'hd'">HD</button>
       </div>
     </div>
 
-    <div class="hero-live__stage">
-      <div v-if="loading && !url" class="hero-muted">Connecting to the robot's camera…</div>
+    <div v-if="on" class="hero-live__stage">
+      <div v-if="offline" class="hero-muted">Robot offline — live view resumes when it reconnects</div>
       <div v-else-if="error" class="hero-notice" role="alert">{{ error }}</div>
-      <template v-else-if="url">
-        <video v-if="plays" :key="url" class="hero-live__video" :src="url" controls autoplay muted playsinline @error="error = CAMERA_DOWN" />
+      <div v-else-if="retrying" class="hero-muted" role="status">Reconnecting to the robot's camera…</div>
+      <div v-else-if="!active" class="hero-muted">Live view paused while it is off screen.</div>
+      <div v-else-if="!url" class="hero-muted" role="status">Connecting to the robot's camera…</div>
+      <template v-else>
+        <video v-if="plays" ref="videoEl" class="hero-live__video" controls autoplay muted playsinline />
         <iframe
           v-else-if="kind === 'page'"
           :key="url"
@@ -40,56 +53,139 @@
       </template>
     </div>
 
-    <div class="hero-dialog__actions">
-      <a v-if="url && kind !== 'rtmp'" class="hero-live__open" :href="url" target="_blank" rel="noopener noreferrer">Open in new tab</a>
+    <div v-if="on || !panel" class="hero-dialog__actions">
+      <v-btn v-if="error && !offline" variant="outlined" size="small" @click="restart">Retry</v-btn>
+      <v-btn v-if="url && plays && !error" variant="outlined" size="small" @click="fullScreen">Full screen</v-btn>
+      <a v-if="url && !plays && kind !== 'rtmp'" class="hero-live__open" :href="url" target="_blank" rel="noopener noreferrer">Open in new tab</a>
       <span class="hero-head__spacer" />
-      <v-btn variant="outlined" @click="emit('close')">Close</v-btn>
+      <v-btn v-if="!panel" variant="outlined" @click="emit('close')">Close</v-btn>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from "vue";
-import { liveVideoKind, remintDelayMs } from "../../utils/robot-control";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
+  LIVE_DOWN,
+  LIVE_NO_PICTURE,
+  LIVE_RETRY_LIMIT,
+  liveRetryDelayMs,
+  liveVideoKind,
+  liveViewActive,
+  readLivePref,
+  remintDelayMs,
+  startLivePlayer,
+  writeLivePref,
+} from "../../utils/robot-control";
 
-const props = defineProps<{ robotId: string; name?: string }>();
+const props = defineProps<{ robotId: string; name?: string; panel?: boolean; offline?: boolean }>();
 const emit = defineEmits<{ close: [] }>();
 const { getLiveVideo } = useRobots();
 
-const CAMERA_DOWN = "The robot's camera isn't available right now.";
+const titleId = `hero-live-title-${Math.random().toString(36).slice(2, 8)}`;
+// "Always show live view": one choice per browser, like a dashboard layout. ponytail: localStorage, no table.
+const storage = () => (typeof localStorage === "undefined" ? undefined : localStorage);
+const on = ref(props.panel ? readLivePref(storage()) : true);
+watch(on, (v) => writeLivePref(storage(), v));
+
 const quality = ref<"hd" | "smooth">("smooth");
 const url = ref("");
 const error = ref("");
-const loading = ref(false);
-let timer: ReturnType<typeof setTimeout> | undefined;
-let alive = true;
-
+const retrying = ref(false);
+const pageVisible = ref(typeof document === "undefined" || document.visibilityState !== "hidden");
+const inView = ref(true);
+const root = ref<HTMLElement | null>(null);
+const videoEl = ref<HTMLVideoElement | null>(null);
+const active = computed(() => liveViewActive({ on: on.value, offline: props.offline, visible: pageVisible.value, inView: inView.value }));
 const kind = computed(() => liveVideoKind(url.value));
-const plays = computed(
-  () =>
-    kind.value === "video" ||
-    (kind.value === "hls" && typeof document !== "undefined" && !!document.createElement("video").canPlayType("application/vnd.apple.mpegurl")),
-);
+// HLS always goes to the player: hls.js where the browser has MSE, native HLS otherwise.
+const plays = computed(() => kind.value === "video" || kind.value === "hls");
 
+let timer: ReturnType<typeof setTimeout> | undefined;
+let gen = 0; // bumps on every mint/release so a late answer for an old quality/robot is dropped
+let attempts = 0;
+let stopPlayer: (() => void) | undefined;
+
+function stopStream() {
+  stopPlayer?.();
+  stopPlayer = undefined;
+}
+/** Free everything: player, connection, timers, pending answers. */
+function release() {
+  gen++;
+  clearTimeout(timer);
+  stopStream();
+  url.value = "";
+  retrying.value = false;
+}
 async function mint() {
+  const my = ++gen;
   clearTimeout(timer);
-  loading.value = true;
   error.value = "";
   try {
     const res = await getLiveVideo(props.robotId, quality.value);
-    if (!alive) return;
-    if (liveVideoKind(res?.url) === "bad") throw new Error(CAMERA_DOWN);
+    if (my !== gen) return;
+    if (liveVideoKind(res?.url) === "bad") throw new Error(LIVE_DOWN);
     url.value = res.url;
     const wait = remintDelayMs(res?.expiresAt);
     if (wait !== null) timer = setTimeout(mint, wait);
   } catch {
-    if (alive) {
-      url.value = "";
-      error.value = CAMERA_DOWN;
-    }
-  } finally {
-    loading.value = false;
+    if (my === gen) reconnectLater();
+  }
+}
+/** Automatic reconnect with backoff; after LIVE_RETRY_LIMIT tries, stop and offer Retry. */
+function reconnectLater() {
+  const my = ++gen;
+  clearTimeout(timer);
+  stopStream();
+  url.value = "";
+  if (attempts >= LIVE_RETRY_LIMIT) {
+    retrying.value = false;
+    error.value = LIVE_DOWN;
+    return;
+  }
+  retrying.value = true;
+  timer = setTimeout(() => {
+    if (my !== gen) return;
+    retrying.value = false;
+    mint();
+  }, liveRetryDelayMs(attempts++));
+}
+/** Clean slate: destroy the player and, when showing, fetch a fresh URL. Also the Retry button. */
+function restart() {
+  release();
+  attempts = 0;
+  error.value = "";
+  if (active.value) mint();
+}
+
+// The player starts only when the <video> exists and a URL is in hand, and is
+// re-created only when either changes - never on an ordinary re-render.
+watch([videoEl, url], ([el, src]) => {
+  stopStream();
+  if (!el || !src) return;
+  stopPlayer = startLivePlayer(el, src, onPlayerFail, { onPicture: () => (attempts = 0) });
+});
+function onPlayerFail(message: string) {
+  stopPlayer = undefined;
+  if (message === LIVE_NO_PICTURE) {
+    // The browser can't show H.265: no silent retries behind the message; Retry is the user's.
+    gen++;
+    clearTimeout(timer);
+    error.value = message;
+    return;
   }
+  reconnectLater(); // network, expired URL, stall: fetch a fresh URL and go again
+}
+
+watch(active, restart, { immediate: true });
+watch([quality, () => props.robotId], restart);
+
+function fullScreen() {
+  const v = videoEl.value as (HTMLVideoElement & { webkitEnterFullscreen?: () => void }) | null;
+  if (!v) return;
+  if (v.requestFullscreen) v.requestFullscreen().catch(() => {});
+  else v.webkitEnterFullscreen?.();
 }
 async function copy() {
   try {
@@ -98,10 +194,27 @@ async function copy() {
     /* the link is still shown by the browser's own copy */
   }
 }
-watch(quality, mint, { immediate: true });
+
+const onVisibility = () => (pageVisible.value = document.visibilityState !== "hidden");
+let observer: IntersectionObserver | undefined;
+onMounted(() => {
+  document.addEventListener("visibilitychange", onVisibility);
+  if (props.panel && root.value && typeof IntersectionObserver !== "undefined") {
+    // "Far" off-screen = more than a screen's height away; scrolling briefly past keeps it playing.
+    observer = new IntersectionObserver(([e]) => (inView.value = !!e?.isIntersecting), { rootMargin: "100% 0px" });
+    observer.observe(root.value);
+  }
+});
+/** For the detail page's "Live view" buttons: switch the panel on and bring it into view. */
+defineExpose({
+  show() {
+    on.value = true;
+    root.value?.scrollIntoView({ behavior: "smooth", block: "center" });
+  },
+});
 onBeforeUnmount(() => {
-  alive = false;
-  clearTimeout(timer);
-  url.value = "";
+  document.removeEventListener("visibilitychange", onVisibility);
+  observer?.disconnect();
+  release();
 });
 </script>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.56.0",
+  "version": "4.57.0",
   "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.",
@@ -57,6 +57,7 @@
     "@mdi/font": "^7.4.47",
     "@types/qrcode": "^1.5.6",
     "ckeditor5": "47.4.0",
+    "hls.js": "^1.6.13",
     "html2pdf.js": "^0.10.2",
     "html5-qrcode": "^2.3.8",
     "moment-timezone": "^0.6.0",

package/utils/robot-control.ts

@@ -11,9 +11,9 @@ export type TVideoKind = "hls" | "video" | "flv" | "rtmp" | "page" | "bad";
 
 /**
  * What kind of stream URL the robot's cloud handed us.
- * ponytail: no hls.js / mpegts.js yet - the real PadBot URL type is unknown;
- * HLS plays natively where the browser can (Safari), FLV and HLS elsewhere
- * get "Open in new tab". Add the player library once a real URL is seen.
+ * PadBot sends HLS (MPEG-TS, H.265 video + AAC audio). HLS plays through
+ * hls.js wherever the browser has Media Source Extensions, native HLS
+ * otherwise (Safari). FLV gets "Open in new tab".
  */
 export function liveVideoKind(url: unknown): TVideoKind {
   if (typeof url !== "string") return "bad";
@@ -33,6 +33,163 @@ export function remintDelayMs(expiresAt: unknown, now: number = Date.now()): num
   return Math.max(5_000, t - now - 30_000);
 }
 
+export const LIVE_NO_PICTURE =
+  "This robot's camera sends H.265 video, which this browser can't show. Try Microsoft Edge or Safari, or the PadBot app.";
+export const LIVE_DOWN = "The robot's camera isn't available right now.";
+
+/** Wait before automatic reconnect attempt n (0-based): 2 s, 4 s, 8 s, 16 s, then 30 s. */
+export const liveRetryDelayMs = (n: number) => Math.min(30_000, 2_000 * 2 ** n);
+/** Automatic reconnects before the dialog stops and offers Retry. */
+export const LIVE_RETRY_LIMIT = 6;
+
+type THls = {
+  on(event: string, fn: (event: string, data: { fatal?: boolean; type?: string; details?: string }) => void): void;
+  loadSource(url: string): void;
+  attachMedia(video: HTMLVideoElement): void;
+  recoverMediaError(): void;
+  swapAudioCodec(): void;
+  destroy(): void;
+};
+export type THlsCtor = { isSupported(): boolean; new (config?: Record<string, unknown>): THls };
+
+/** The inline panel streams only while it is switched on, the robot is online, the tab is visible and the panel is near the screen. */
+export const liveViewActive = (s: { on: boolean; offline?: boolean; visible: boolean; inView: boolean }) =>
+  s.on && !s.offline && s.visible && s.inView;
+
+/** "Always show live view", remembered per browser (default on). Storage can throw (private window, blocked site data). */
+const LIVE_PREF_KEY = "hero-robot-live-view";
+export function readLivePref(storage: Pick<Storage, "getItem"> | undefined): boolean {
+  try {
+    return storage?.getItem(LIVE_PREF_KEY) !== "off";
+  } catch {
+    return true;
+  }
+}
+export function writeLivePref(storage: Pick<Storage, "setItem"> | undefined, on: boolean) {
+  try {
+    storage?.setItem(LIVE_PREF_KEY, on ? "on" : "off");
+  } catch {
+    /* the switch still works for this visit */
+  }
+}
+
+/** hls.js errors that mean "this browser cannot decode the codec", not "the camera is down". */
+const CODEC_ERRORS = new Set(["manifestIncompatibleCodecsError", "bufferAddCodecError", "bufferIncompatibleCodecsError"]);
+
+/**
+ * Plays one live-view URL into `video`. Returns a stop function that frees the
+ * player and the connection.
+ *
+ * `video.src` is owned here and must never be bound by the template: a
+ * re-render that re-sets `src` under hls.js detaches its MediaSource, and
+ * hls.js 1.6 then fails with a fatal bufferAppendError ("SourceBuffer has been
+ * removed") and a black picture - the 2026-09-26 production bug.
+ *
+ * `onFail` fires once, with LIVE_NO_PICTURE when the stream plays but no
+ * picture ever decodes (Chrome's native HLS takes H.265-in-TS audio but shows
+ * no video, videoWidth stays 0) or the codec is refused; LIVE_DOWN for
+ * everything else (network, expired URL, repeated media errors, a stall) -
+ * the caller fetches a fresh URL and starts again.
+ */
+export function startLivePlayer(
+  video: HTMLVideoElement,
+  url: string,
+  onFail: (message: string) => void,
+  opts: {
+    loadHls?: () => Promise<THlsCtor>;
+    hasMse?: boolean;
+    onPicture?: () => void;
+    noPictureMs?: number;
+    stallMs?: number;
+    tickMs?: number;
+  } = {},
+): () => void {
+  const noPictureMs = opts.noPictureMs ?? 15_000;
+  const stallMs = opts.stallMs ?? 20_000;
+  const tickMs = opts.tickMs ?? 1_000;
+  let stopped = false;
+  let hls: THls | undefined;
+  let waited = 0;
+  let pictured = false;
+  let lastTime = -1;
+  let still = 0;
+
+  const fail = (message: string) => {
+    if (stopped) return;
+    stop();
+    onFail(message);
+  };
+  // ponytail: one 1 s poll instead of juggling media events - videoWidth has no reliable event everywhere.
+  const tick = setInterval(() => {
+    waited += tickMs;
+    if (!pictured) {
+      if (video.videoWidth > 0) {
+        pictured = true;
+        opts.onPicture?.();
+      } else if (waited >= noPictureMs) {
+        // Time moving with no picture = the codec; nothing moving = no stream.
+        return fail(video.currentTime > 0 ? LIVE_NO_PICTURE : LIVE_DOWN);
+      }
+      return;
+    }
+    if (video.paused) return (still = 0);
+    if (video.currentTime !== lastTime) {
+      lastTime = video.currentTime;
+      still = 0;
+    } else if ((still += tickMs) >= stallMs) fail(LIVE_DOWN);
+  }, tickMs);
+  const onError = () => fail(LIVE_DOWN);
+
+  function stop() {
+    stopped = true;
+    clearInterval(tick);
+    video.removeEventListener("error", onError);
+    hls?.destroy();
+    hls = undefined;
+    video.removeAttribute("src");
+    video.load();
+  }
+
+  function native() {
+    video.addEventListener("error", onError);
+    video.src = url;
+    video.play().catch(() => {});
+  }
+
+  const mse =
+    opts.hasMse ?? (typeof window !== "undefined" && !!((window as any).MediaSource || (window as any).ManagedMediaSource));
+  if (liveVideoKind(url) !== "hls" || !mse) {
+    native();
+  } else {
+    (opts.loadHls ?? (() => import("hls.js").then((m) => m.default as unknown as THlsCtor)))()
+      .then((Hls) => {
+        if (stopped) return;
+        if (!Hls.isSupported()) return native();
+        let recoveries = 0;
+        const h = (hls = new Hls({ enableWorker: true, lowLatencyMode: false }));
+        h.on("hlsError", (_e, data) => {
+          if (!data.fatal) return;
+          if (CODEC_ERRORS.has(data.details ?? "")) return fail(LIVE_NO_PICTURE);
+          // The standard hls.js ladder: recover, then swap audio codec and recover, then give up.
+          if (data.type === "mediaError" && recoveries < 2) {
+            if (recoveries++ === 1) h.swapAudioCodec();
+            return h.recoverMediaError();
+          }
+          fail(LIVE_DOWN);
+        });
+        h.loadSource(url);
+        h.attachMedia(video);
+        video.play().catch(() => {});
+      })
+      .catch(() => {
+        if (!stopped) native();
+      });
+  }
+  return () => {
+    if (!stopped) stop();
+  };
+}
+
 /* ======================================================== manual drive */
 
 export type TDriveLimits = {