@sentinel-nvr/web 0.1.0

package/dist/player/index.js

@@ -0,0 +1,1867 @@
+// src/player/rlog.ts
+var brand = "web";
+var client = null;
+function setRlogClient(c, b) {
+  client = c;
+  if (b) brand = b;
+}
+function rlog(tag, data) {
+  if (!client) return;
+  let line;
+  try {
+    line = JSON.stringify({ tag, b: brand, d: data ?? null, ua: navigator.userAgent.slice(0, 80) });
+  } catch {
+    line = JSON.stringify({ tag, b: brand });
+  }
+  client.postText("api/clientlog", line);
+}
+
+// src/player/webrtc.ts
+var forceRelayGlobal = false;
+function mobileClient() {
+  return /iPhone|iPod|Android|Mobile/i.test(navigator.userAgent) || navigator.maxTouchPoints > 1 && Math.min(screen.width || 9999, screen.height || 9999) < 920;
+}
+function rtcOptions() {
+  let capabilities;
+  try {
+    capabilities = RTCRtpReceiver.getCapabilities ? { audio: RTCRtpReceiver.getCapabilities("audio"), video: RTCRtpReceiver.getCapabilities("video") } : void 0;
+  } catch {
+  }
+  return { userAgent: navigator.userAgent, capabilities, screen: { devicePixelRatio: window.devicePixelRatio || 1, width: screen.width || 1920, height: screen.height || 1080 } };
+}
+var WebRtcSession = class {
+  ws;
+  pc;
+  id;
+  active = false;
+  connectT;
+  trackSig = "";
+  api;
+  opts;
+  cb;
+  constructor(api, opts, cb) {
+    this.api = api;
+    this.opts = opts;
+    this.cb = cb;
+  }
+  get connected() {
+    const s = this.pc?.iceConnectionState;
+    return s === "connected" || s === "completed";
+  }
+  start() {
+    const params = {};
+    if (this.opts.mode === "recorded") {
+      params.mode = "recorded";
+      params.start = String(Math.round(this.opts.startMs || 0));
+    }
+    if (this.opts.compat ?? mobileClient()) params.compat = "1";
+    let ws;
+    try {
+      ws = new WebSocket(this.api.signalingUrl(this.opts.camId, params));
+    } catch {
+      this.cb.onFail("ws");
+      return;
+    }
+    this.ws = ws;
+    this.active = true;
+    this.connectT = window.setTimeout(() => {
+      if (this.active && this.ws === ws && !this.connected) {
+        rlog("connect-timeout", { kind: this.opts.mode, ice: this.pc?.iceConnectionState });
+        if (!forceRelayGlobal) {
+          forceRelayGlobal = true;
+          rlog("retry-relay-only", { kind: this.opts.mode });
+          this.stop();
+          this.start();
+          return;
+        }
+        this.fail("timeout");
+      }
+    }, 12e3);
+    ws.onopen = () => {
+      try {
+        ws.send(JSON.stringify({ type: "options", options: rtcOptions() }));
+      } catch {
+      }
+    };
+    ws.onerror = () => {
+      if (this.active && this.ws === ws && !this.pc) this.fail("ws-error");
+    };
+    ws.onclose = () => {
+      if (this.active && this.ws === ws && !this.connected) this.fail("ws-closed");
+    };
+    ws.onmessage = (ev) => {
+      let msg;
+      try {
+        msg = JSON.parse(ev.data);
+      } catch {
+        return;
+      }
+      if (msg.type === "createLocalDescription") this.createLocal(ws, msg);
+      else if (msg.type === "setRemoteDescription") this.setRemote(ws, msg);
+      else if (msg.type === "addIceCandidate") this.pc?.addIceCandidate(msg.candidate).catch(() => {
+      });
+      else if (msg.type === "sessionStarted") {
+        this.id = msg.id;
+        this.cb.onSessionId?.(msg.id);
+      } else if (msg.type === "error") {
+        if (this.active && this.ws === ws) this.fail(msg.reason || "error");
+      }
+    };
+  }
+  stop() {
+    this.active = false;
+    if (this.connectT) {
+      clearTimeout(this.connectT);
+      this.connectT = void 0;
+    }
+    try {
+      if (this.ws) {
+        this.ws.onmessage = null;
+        this.ws.onclose = null;
+        this.ws.onerror = null;
+        this.ws.close();
+      }
+    } catch {
+    }
+    try {
+      if (this.pc) {
+        this.pc.ontrack = null;
+        this.pc.oniceconnectionstatechange = null;
+        this.pc.onicecandidate = null;
+        this.pc.close();
+      }
+    } catch {
+    }
+    this.ws = void 0;
+    this.pc = void 0;
+    this.id = void 0;
+    this.trackSig = "";
+  }
+  fail(reason) {
+    if (!this.active) return;
+    this.stop();
+    this.cb.onFail(reason);
+  }
+  ensurePc(setup) {
+    if (this.pc) return this.pc;
+    let cfg = setup && setup.configuration || { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] };
+    if (forceRelayGlobal) cfg = { ...cfg, iceTransportPolicy: "relay" };
+    const pc = new RTCPeerConnection(cfg);
+    this.pc = pc;
+    if (setup?.datachannel) {
+      try {
+        const dc = pc.createDataChannel(setup.datachannel.label, setup.datachannel.dict);
+        dc.binaryType = "arraybuffer";
+      } catch {
+      }
+    }
+    if (setup?.audio) {
+      try {
+        pc.addTransceiver("audio", { direction: setup.audio.direction || "recvonly" });
+      } catch {
+      }
+    }
+    if (setup?.video) {
+      try {
+        pc.addTransceiver("video", { direction: setup.video.direction || "recvonly" });
+      } catch {
+      }
+    }
+    pc.ontrack = () => {
+      if (!this.active || this.pc !== pc) return;
+      const ms = new MediaStream();
+      pc.getReceivers().forEach((r) => {
+        if (r.track) ms.addTrack(r.track);
+      });
+      if (!ms.getVideoTracks().length) return;
+      const sig = ms.getTracks().map((t) => t.id).sort().join(",");
+      if (this.trackSig === sig) return;
+      this.trackSig = sig;
+      this.cb.onStream(ms);
+    };
+    pc.oniceconnectionstatechange = () => {
+      if (!this.active || this.pc !== pc) return;
+      const st = pc.iceConnectionState;
+      if (st === "connected" || st === "completed") {
+        if (this.connectT) {
+          clearTimeout(this.connectT);
+          this.connectT = void 0;
+        }
+        window.setTimeout(() => {
+          if (!this.active || this.pc !== pc) return;
+          pc.getStats().then((s) => {
+            let dec = -1, recv = -1, vBytes = -1, aBytes = -1;
+            s.forEach((r) => {
+              if (r.type === "inbound-rtp" && (r.kind || r.mediaType) === "video") {
+                dec = r.framesDecoded || 0;
+                recv = r.framesReceived ?? -1;
+                vBytes = r.bytesReceived || 0;
+              }
+              if (r.type === "inbound-rtp" && (r.kind || r.mediaType) === "audio") aBytes = r.bytesReceived || 0;
+            });
+            if (dec <= 0) {
+              rlog("dec-check-fail", { kind: this.opts.mode, dec, recv, vBytes, aBytes, relayForced: forceRelayGlobal });
+              if (!forceRelayGlobal && vBytes <= 0 && aBytes <= 0) {
+                forceRelayGlobal = true;
+                rlog("retry-relay-only", { kind: this.opts.mode });
+                this.stop();
+                this.start();
+                return;
+              }
+              this.fail("no-decode");
+            } else rlog("dec-ok", { kind: this.opts.mode, dec, relayForced: forceRelayGlobal });
+          }).catch(() => {
+          });
+        }, this.opts.mode === "live" ? 5e3 : 9e3);
+      }
+      if (st === "failed") {
+        rlog("ice-failed", { kind: this.opts.mode });
+        this.fail("ice-failed");
+      }
+    };
+    return pc;
+  }
+  createLocal(ws, msg) {
+    const pc = this.ensurePc(msg.setup);
+    const mid = this.connected;
+    if (mid) rlog("reneg", { dtype: msg.dtype, kind: this.opts.mode });
+    const reply = (desc) => {
+      try {
+        ws.send(JSON.stringify({ type: "response", reqId: msg.reqId, description: { type: desc.type, sdp: desc.sdp } }));
+      } catch {
+      }
+    };
+    pc.onicecandidate = (ev) => {
+      if (ev.candidate) {
+        try {
+          ws.send(JSON.stringify({ type: "iceCandidate", candidate: JSON.parse(JSON.stringify(ev.candidate)) }));
+        } catch {
+        }
+      }
+    };
+    const p = msg.dtype === "offer" ? pc.createOffer({ offerToReceiveAudio: !!msg.setup?.audio, offerToReceiveVideo: !!msg.setup?.video }).then((o) => pc.setLocalDescription(o).then(() => reply(o))) : pc.createAnswer().then((a) => pc.setLocalDescription(a).then(() => reply(a)));
+    p.catch((e) => {
+      rlog("createLocal-fail", { dtype: msg.dtype, name: e?.name, mid });
+      if (!mid) this.fail("createLocal");
+    });
+  }
+  setRemote(ws, msg) {
+    const pc = this.ensurePc(msg.setup);
+    const mid = this.connected;
+    pc.setRemoteDescription(msg.description).then(() => {
+      try {
+        ws.send(JSON.stringify({ type: "response", reqId: msg.reqId, ok: true }));
+      } catch {
+      }
+    }).catch((e) => {
+      rlog("sRD-fail", { name: e?.name, mid });
+      try {
+        ws.send(JSON.stringify({ type: "response", reqId: msg.reqId, ok: false }));
+      } catch {
+      }
+      if (!mid) this.fail("sRD");
+    });
+  }
+};
+
+// src/player/controller.ts
+var MSCls = window.ManagedMediaSource || window.MediaSource;
+var PlayerController = class {
+  v;
+  fz;
+  img;
+  stage;
+  api;
+  opts;
+  camId = "";
+  camName = "";
+  clips = [];
+  codecs = null;
+  rangeStart = 0;
+  rangeEnd = 0;
+  live = false;
+  rate = 1;
+  soundOn = false;
+  recPaused = false;
+  recPausedTs = null;
+  recWebrtcDisabled = false;
+  label = "";
+  transport = "none";
+  // relay session (RW)
+  rw;
+  rwStartMs = 0;
+  rwBase = null;
+  rwPosTs = null;
+  rwPosAt = 0;
+  rwRate = 1;
+  rwSrate = 1;
+  rwScrub = false;
+  rwSeekBusy = false;
+  rwPending = null;
+  rwLastSeekTs = null;
+  rwLastSeekAt = 0;
+  rwRateBusy = false;
+  rwPendingRate = null;
+  rwLastRateAt = 0;
+  relayPoll;
+  wdLastCt = -1;
+  wdLastAt = 0;
+  wdDead = 0;
+  wdGrace = 0;
+  wdResumeLogged = false;
+  recoveries = 0;
+  posterUntilSeek = false;
+  seekTarget = 0;
+  // relay-pos answers are only valid for the command generation they were asked under; a poll sent BEFORE a
+  // seek/rate change and answered after it would drag the playhead back to the old position (and the
+  // auto-follow timeline with it → visible back-and-forth). seekAt: the server may still report the pre-swap
+  // position for a moment after a seek — ignore far-off values in that window.
+  cmdSeq = 0;
+  seekAt = 0;
+  // live session (W) + live MSE (L)
+  w;
+  L = { active: false, ms: null, sb: null, abort: null, queue: [], restarts: 0, lastTrim: 0, stallT: 0 };
+  // recorded MSE (M)
+  M = { ms: null, sb: null, base: 0, nextIdx: -1, end: 0, active: false, feeding: false, abort: null, q: [], segFirst: false, segOff: 0, pendingSeek: null, mmsGo: true };
+  CH = { active: false, target: 0, timer: 0 };
+  curClipId = null;
+  playIndex = -1;
+  lastLoad = 0;
+  pendingTs = null;
+  pendingT;
+  // frame counter / freeze
+  fc = { n: 0, tok: {} };
+  freezeT = 0;
+  freezeTok = null;
+  cad = { t: 0, last: -1, lastNew: 0, stalls: 0, maxStall: 0, frames0: -1, t0: 0, gapMax: 0 };
+  stallTimer = 0;
+  destroyed = false;
+  unlisten = [];
+  arPrefix;
+  constructor(api, opts) {
+    this.api = api;
+    this.opts = opts;
+    this.arPrefix = opts.storagePrefix ?? "snvr-ar-";
+    setRlogClient(api, opts.brand);
+  }
+  attach(r) {
+    this.v = r.video;
+    this.fz = r.freeze;
+    this.img = r.img;
+    this.stage = r.stage;
+    const v = this.v;
+    const on = (n, f) => {
+      v.addEventListener(n, f);
+      this.unlisten.push(() => v.removeEventListener(n, f));
+    };
+    on("timeupdate", () => {
+      if (this.live) return;
+      if (this.rw?.active && this.rwBase == null && v.currentTime > 0) this.rwBase = v.currentTime;
+      const ts = this.currentTs();
+      if (ts == null) return;
+      if (this.M.active || this.rw?.active) {
+        const i = this.clipIndexFor(ts);
+        if (i >= 0) this.playIndex = i;
+      }
+      this.feed();
+      this.emit();
+    });
+    on("waiting", () => {
+      if (this.live) {
+        if (this.L.active && !this.L.stallT) this.L.stallT = window.setTimeout(() => {
+          this.L.stallT = 0;
+          if (this.live && this.L.active && v.readyState < 3) this.liveRestart();
+        }, 4e3);
+        return;
+      }
+      if (!this.rw?.active) this.setLabel("loading");
+      if (!this.M.active || this.stallTimer) return;
+      this.stallTimer = window.setTimeout(() => {
+        this.stallTimer = 0;
+        this.handleStall();
+      }, 600);
+    });
+    on("seeking", () => {
+      if (!this.live && !this.rw?.active) this.setLabel("loading");
+    });
+    for (const n of ["loadeddata", "playing", "canplay", "seeked"]) on(n, () => {
+      if (v.videoWidth) this.freezeHide();
+      if (!this.live && this.label === "loading") this.setLabel("playing");
+      if (this.L.stallT) {
+        clearTimeout(this.L.stallT);
+        this.L.stallT = 0;
+      }
+      this.emit();
+    });
+    on("pause", () => {
+      if (this.L.stallT) {
+        clearTimeout(this.L.stallT);
+        this.L.stallT = 0;
+      }
+      this.emit();
+    });
+    on("play", () => this.emit());
+    on("loadedmetadata", () => this.setAspect(this.v.videoWidth, this.v.videoHeight));
+    on("resize", () => this.setAspect(this.v.videoWidth, this.v.videoHeight));
+    on("volumechange", () => this.emit());
+    on("error", () => {
+      const e = v.error;
+      rlog("video-error", { code: e?.code, msg: e?.message?.slice(0, 120), src: v.getAttribute("src") ? "src" : "srcObject" });
+    });
+    on("ended", () => {
+      if (this.live || this.M.active || this.rw?.active) return;
+      const n = this.playIndex + 1;
+      if (n < this.clips.length) {
+        const c = this.clips[n];
+        this.curClipId = c.id;
+        this.playIndex = n;
+        v.src = this.api.url(`api/segment?id=${encodeURIComponent(c.videoId || c.id)}`);
+        v.load();
+        v.onloadedmetadata = () => {
+          v.playbackRate = this.rate;
+          try {
+            v.currentTime = 0;
+          } catch {
+          }
+          this.safePlay();
+        };
+        this.setLabel("playing");
+      }
+    });
+    this.pendingT = window.setInterval(() => {
+      if (this.pendingTs != null && Date.now() - this.lastLoad >= 200) {
+        const t = this.pendingTs;
+        this.pendingTs = null;
+        this.playAt(t, { scrub: true });
+      }
+    }, 120);
+    const vis = () => this.onVisibility();
+    document.addEventListener("visibilitychange", vis);
+    this.unlisten.push(() => document.removeEventListener("visibilitychange", vis));
+    const edge = window.setInterval(() => {
+      if (this.live && this.L.active) this.liveEdge();
+    }, 1e3);
+    this.unlisten.push(() => clearInterval(edge));
+  }
+  destroy() {
+    this.destroyed = true;
+    this.recWebrtcTeardown();
+    this.webrtcTeardown();
+    this.mseTeardown();
+    this.liveTeardown();
+    this.chaseAbort();
+    if (this.pendingT) clearInterval(this.pendingT);
+    for (const u of this.unlisten) u();
+    try {
+      this.v.pause();
+      this.v.srcObject = null;
+      this.v.removeAttribute("src");
+    } catch {
+    }
+  }
+  setCamera(camId, name) {
+    if (camId !== this.camId) {
+      this.recWebrtcDisabled = false;
+    }
+    this.camId = camId;
+    this.camName = name;
+    let ar = "";
+    try {
+      ar = localStorage.getItem(this.arPrefix + camId) || "";
+    } catch {
+    }
+    if (ar) this.stage.style.setProperty("--stage-ar", ar);
+    else this.stage.style.removeProperty("--stage-ar");
+  }
+  /** picture aspect → stage box (mobile layout uses it); posters and video both report it */
+  setAspect(w, h) {
+    if (!w || !h) return;
+    const ar = `${w} / ${h}`;
+    if (this.stage.style.getPropertyValue("--stage-ar") === ar) return;
+    this.stage.style.setProperty("--stage-ar", ar);
+    try {
+      localStorage.setItem(this.arPrefix + this.camId, ar);
+    } catch {
+    }
+  }
+  /** clips of the loaded range (several days, sorted), codec string, and the range the timeline spans */
+  setClips(clips, codecs, rangeStart, rangeEnd) {
+    this.clips = clips;
+    this.codecs = codecs;
+    this.rangeStart = rangeStart;
+    this.rangeEnd = rangeEnd;
+  }
+  // ---- state ---------------------------------------------------------------------
+  setLabel(l) {
+    this.label = l;
+    this.emit();
+  }
+  emit() {
+    if (this.destroyed) return;
+    this.opts.onState({ live: this.live, label: this.label, playhead: this.live ? null : this.currentTs(), rate: this.rate, sound: this.soundOn, paused: this.recPaused || this.v.paused && !this.live && !this.rw?.active, transport: this.transport, muted: this.v.muted });
+  }
+  clipIndexFor(ts) {
+    for (let i = 0; i < this.clips.length; i++) {
+      const c = this.clips[i];
+      if (ts >= c.startTime && ts < c.startTime + (c.duration || 6e4)) return i;
+    }
+    return -1;
+  }
+  nearNow(ts) {
+    return Date.now() - ts < 8e3;
+  }
+  clampRange(ts) {
+    return Math.min(Math.max(ts, this.rangeStart), Math.min(this.rangeEnd - 1, Date.now()));
+  }
+  /** Wall-clock position of the picture on screen (Scrypted's getRecordingStreamCurrentTime). */
+  currentTs() {
+    if (this.rw?.active) {
+      if (this.rwPosTs != null) return this.rwPosTs + (Date.now() - this.rwPosAt) * (this.rwRate || 1);
+      if (this.rwBase != null && this.v.currentTime > 0) return this.rwStartMs + (this.v.currentTime - this.rwBase) * 1e3 * (this.rwRate || 1);
+      return this.rwStartMs;
+    }
+    if (this.recPaused) return this.recPausedTs;
+    if (this.live) return null;
+    if (this.M.active) return this.M.base + this.v.currentTime * 1e3;
+    const pc = this.playIndex >= 0 ? this.clips[this.playIndex] : void 0;
+    if (pc) return pc.startTime + this.v.currentTime * 1e3;
+    return null;
+  }
+  // ---- presented frames / freeze / poster -----------------------------------------
+  fcArm() {
+    const v = this.v;
+    if (!v.requestVideoFrameCallback) return;
+    const tok = {};
+    this.fc.tok = tok;
+    const tick = () => {
+      if (this.fc.tok !== tok) return;
+      this.fc.n++;
+      try {
+        v.requestVideoFrameCallback(tick);
+      } catch {
+      }
+    };
+    try {
+      v.requestVideoFrameCallback(tick);
+    } catch {
+    }
+  }
+  presentedFrames() {
+    if (this.v.requestVideoFrameCallback) return this.fc.n;
+    try {
+      return this.v.getVideoPlaybackQuality().totalVideoFrames;
+    } catch {
+      return -1;
+    }
+  }
+  freezeArm(hold) {
+    if (this.freezeT) clearTimeout(this.freezeT);
+    this.freezeT = window.setTimeout(() => this.freezeHide(), hold ? 9e4 : 5e3);
+    const v = this.v;
+    if (hold && v.requestVideoFrameCallback) {
+      const tok = {};
+      this.freezeTok = tok;
+      try {
+        v.requestVideoFrameCallback(() => {
+          if (this.freezeTok === tok && this.v.videoWidth) this.freezeHide();
+        });
+      } catch {
+      }
+    }
+  }
+  freezeShow(hold = false) {
+    try {
+      const v = this.v, fc = this.fz;
+      if (!v.videoWidth || !v.videoHeight || v.readyState < 2) return;
+      if (fc.width !== v.videoWidth) fc.width = v.videoWidth;
+      if (fc.height !== v.videoHeight) fc.height = v.videoHeight;
+      fc.getContext("2d").drawImage(v, 0, 0, fc.width, fc.height);
+      fc.classList.remove("hidden");
+      fc.dataset.src = "video";
+      this.freezeArm(hold);
+    } catch {
+    }
+  }
+  freezeFromImage(img, hold, untilSeek = false, kind = "image") {
+    try {
+      if (!img.naturalWidth || !img.naturalHeight) return false;
+      const fc = this.fz;
+      fc.width = img.naturalWidth;
+      fc.height = img.naturalHeight;
+      fc.getContext("2d").drawImage(img, 0, 0);
+      fc.classList.remove("hidden");
+      fc.dataset.src = kind;
+      this.setAspect(img.naturalWidth, img.naturalHeight);
+      if (untilSeek) {
+        if (this.freezeT) clearTimeout(this.freezeT);
+        this.freezeTok = null;
+        this.posterUntilSeek = true;
+        this.freezeT = window.setTimeout(() => this.freezeHide(), 6e3);
+      } else this.freezeArm(hold);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  freezeHide() {
+    if (this.freezeT) {
+      clearTimeout(this.freezeT);
+      this.freezeT = 0;
+    }
+    this.posterUntilSeek = false;
+    this.fz.classList.add("hidden");
+    delete this.fz.dataset.src;
+  }
+  posterUp() {
+    return !this.fz.classList.contains("hidden");
+  }
+  freezeHold() {
+    if (this.freezeT) {
+      clearTimeout(this.freezeT);
+      this.freezeT = window.setTimeout(() => this.freezeHide(), 5e3);
+    }
+  }
+  /** Event click: the stored frame is the poster until the seek lands. */
+  posterEvent(ts) {
+    const cam = this.camId;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      if (this.camId !== cam) return;
+      this.freezeFromImage(img, true, !!this.rw?.active && !!this.rw.id, "event");
+    };
+    img.src = this.api.url(`api/evframe?camera=${encodeURIComponent(cam)}&ts=${ts}`);
+  }
+  /** Camera opened: newest snapshot in front of the black stage until live plays. */
+  posterFromSnapshot() {
+    const cam = this.camId;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      if (this.camId !== cam || this.rw?.active || this.recPaused || this.posterUp()) return;
+      if (this.v.readyState >= 2 && this.v.videoWidth && !this.v.paused) return;
+      this.freezeFromImage(img, true, false, "snapshot");
+    };
+    img.src = this.api.url(`api/snapshot?camera=${encodeURIComponent(cam)}`) + `&_=${Date.now()}`;
+  }
+  posterShow(ts) {
+    try {
+      if (this.posterUp()) return;
+      if (this.v.readyState >= 2 && this.v.videoWidth) return;
+      const i = this.clipIndexFor(ts);
+      const c = i >= 0 ? this.clips[i] : void 0;
+      if (!c?.thumbnailId) return;
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        if (!this.posterUp()) this.freezeFromImage(img, true, false, "thumb");
+      };
+      img.src = this.api.url(`api/thumb?id=${encodeURIComponent(c.thumbnailId)}`);
+    } catch {
+    }
+  }
+  safePlay() {
+    let pr;
+    try {
+      pr = this.v.play();
+    } catch {
+      return;
+    }
+    pr.then(() => this.emit()).catch((e1) => {
+      this.v.muted = true;
+      this.v.play().then(() => this.emit()).catch((e2) => rlog("play-fail", { e1: e1?.name, e2: e2?.name, rs: this.v.readyState, paused: this.v.paused }));
+    });
+  }
+  // ---- LIVE ---------------------------------------------------------------------------
+  goLive() {
+    if (!this.camId) return;
+    this.chaseAbort();
+    this.freezeShow(true);
+    this.exitLiveState();
+    this.recWebrtcTeardown();
+    this.recPaused = false;
+    this.live = true;
+    this.playIndex = -1;
+    this.curClipId = null;
+    this.L.restarts = 0;
+    this.setLabel("live");
+    if (document.visibilityState === "hidden") return;
+    if (window.RTCPeerConnection && window.WebSocket) this.liveStartWebrtc();
+    else if (this.liveMseOk()) this.liveStartMse();
+    else {
+      try {
+        this.v.pause();
+      } catch {
+      }
+      this.liveFallbackImg();
+    }
+  }
+  exitLiveState() {
+    if (this.live) {
+      this.live = false;
+      this.webrtcTeardown();
+      this.liveTeardown();
+      try {
+        this.v.srcObject = null;
+      } catch {
+      }
+      this.setMjpeg(false);
+    }
+  }
+  setMjpeg(on) {
+    this.img.classList.toggle("hidden", !on);
+    this.v.classList.toggle("hidden", on);
+    if (!on) this.img.removeAttribute("src");
+  }
+  webrtcTeardown() {
+    this.w?.stop();
+    this.w = void 0;
+  }
+  liveStartWebrtc() {
+    this.webrtcTeardown();
+    this.recWebrtcTeardown();
+    this.mseTeardown();
+    this.liveTeardown();
+    try {
+      this.v.pause();
+    } catch {
+    }
+    try {
+      this.v.srcObject = null;
+    } catch {
+    }
+    this.v.removeAttribute("src");
+    this.setMjpeg(false);
+    const s = new WebRtcSession(this.api, { camId: this.camId, mode: "live" }, {
+      onStream: (ms) => {
+        if (!this.live || this.w !== s) return;
+        this.setMjpeg(false);
+        this.v.muted = !this.soundOn;
+        try {
+          this.v.removeAttribute("src");
+        } catch {
+        }
+        try {
+          this.v.srcObject = ms;
+        } catch {
+        }
+        this.fcArm();
+        this.safePlay();
+        this.transport = "webrtc";
+        this.setLabel("liveWebrtc");
+      },
+      onFail: () => {
+        if (this.w === s) this.liveFallbackMse();
+      }
+    });
+    this.w = s;
+    this.transport = "webrtc";
+    s.start();
+  }
+  liveFallbackMse() {
+    this.webrtcTeardown();
+    if (!this.live) return;
+    try {
+      this.v.srcObject = null;
+    } catch {
+    }
+    if (this.liveMseOk()) this.liveStartMse();
+    else this.liveFallbackImg();
+  }
+  liveCodec() {
+    return this.codecs ? this.codecs.split(",")[0] ?? null : null;
+  }
+  liveMseOk() {
+    try {
+      const c = this.liveCodec();
+      return !!(this.api.corsMedia && MSCls && c && MSCls.isTypeSupported(`video/mp4; codecs="${c}"`));
+    } catch {
+      return false;
+    }
+  }
+  liveTeardown() {
+    const L = this.L;
+    L.active = false;
+    L.queue = [];
+    if (L.stallT) {
+      clearTimeout(L.stallT);
+      L.stallT = 0;
+    }
+    try {
+      L.abort?.abort();
+    } catch {
+    }
+    L.abort = null;
+    if (L.sb && L.ms && L.ms.readyState === "open") {
+      try {
+        L.sb.abort();
+      } catch {
+      }
+    }
+    L.sb = null;
+    L.ms = null;
+  }
+  liveAppend() {
+    const L = this.L;
+    if (!L.active || !L.sb || L.sb.updating || !L.queue.length) return;
+    const buf = L.queue.shift();
+    try {
+      L.sb.appendBuffer(buf);
+    } catch {
+      this.liveRestart();
+    }
+  }
+  liveTrim() {
+    const L = this.L;
+    if (!L.sb || L.sb.updating) return;
+    try {
+      const b = this.v.buffered;
+      if (b.length && this.v.currentTime - b.start(0) > 30) L.sb.remove(0, this.v.currentTime - 10);
+    } catch {
+    }
+  }
+  liveEdge() {
+    try {
+      const b = this.v.buffered;
+      if (!b.length) return;
+      const end = b.end(b.length - 1);
+      if (end - this.v.currentTime > 2.5) this.v.currentTime = end - 0.7;
+      if (this.v.paused) this.safePlay();
+    } catch {
+    }
+  }
+  liveRestart() {
+    if (!this.live || !this.L.active) return;
+    this.liveTeardown();
+    this.L.restarts++;
+    if (this.L.restarts > 5) {
+      this.liveFallbackImg();
+      return;
+    }
+    window.setTimeout(() => {
+      if (this.live) this.liveStartMse();
+    }, 1e3);
+  }
+  liveStartMse() {
+    this.liveTeardown();
+    this.mseTeardown();
+    const L = this.L;
+    L.active = true;
+    this.transport = "mse";
+    this.setLabel("liveMse");
+    this.setMjpeg(false);
+    const ms = new MSCls();
+    L.ms = ms;
+    L.lastTrim = Date.now();
+    if (window.ManagedMediaSource && ms instanceof window.ManagedMediaSource) {
+      try {
+        this.v.disableRemotePlayback = true;
+      } catch {
+      }
+    }
+    const u = URL.createObjectURL(ms);
+    ms.addEventListener("sourceopen", () => {
+      URL.revokeObjectURL(u);
+      if (L.ms !== ms) return;
+      let sb;
+      try {
+        sb = ms.addSourceBuffer(`video/mp4; codecs="${this.liveCodec()}"`);
+      } catch {
+        this.liveFallbackImg();
+        return;
+      }
+      sb.mode = "segments";
+      sb.addEventListener("updateend", () => {
+        if (Date.now() - L.lastTrim > 1e4) {
+          L.lastTrim = Date.now();
+          this.liveTrim();
+        }
+        this.liveAppend();
+      });
+      sb.addEventListener("error", () => this.liveRestart());
+      L.sb = sb;
+      L.abort = new AbortController();
+      fetch(this.api.url(`api/livemse?camera=${encodeURIComponent(this.camId)}`), { credentials: "same-origin", signal: L.abort.signal }).then((r) => {
+        if (!r.ok || !r.body) throw new Error(String(r.status));
+        const rd = r.body.getReader();
+        const loop = () => {
+          rd.read().then((x) => {
+            if (!L.active || L.ms !== ms) return;
+            if (x.done) {
+              this.liveRestart();
+              return;
+            }
+            L.queue.push(x.value);
+            this.liveAppend();
+            loop();
+          }).catch(() => {
+            if (L.active && L.ms === ms) this.liveRestart();
+          });
+        };
+        loop();
+      }).catch(() => {
+        if (L.active && L.ms === ms) this.liveFallbackImg();
+      });
+    });
+    try {
+      this.v.srcObject = null;
+    } catch {
+    }
+    this.v.src = u;
+    this.v.playbackRate = 1;
+    this.v.muted = true;
+    this.safePlay();
+  }
+  liveFallbackImg() {
+    this.liveTeardown();
+    if (!this.live) return;
+    try {
+      this.v.pause();
+    } catch {
+    }
+    this.freezeHide();
+    this.transport = "mjpeg";
+    this.setLabel("liveMjpeg");
+    this.setMjpeg(true);
+    this.img.src = this.api.url(`api/live?camera=${encodeURIComponent(this.camId)}`) + `&_=${Date.now()}`;
+  }
+  // ---- RECORDED via relay -----------------------------------------------------------------
+  recWebrtcOk() {
+    return !this.recWebrtcDisabled && !!(window.RTCPeerConnection && window.WebSocket);
+  }
+  recWebrtcTeardown() {
+    this.posterUntilSeek = false;
+    this.stopRelayPoll();
+    this.rw?.stop();
+    this.rw = void 0;
+    this.rwBase = null;
+    this.rwPosTs = null;
+    this.rwScrub = false;
+    this.rwSeekBusy = false;
+    this.rwPending = null;
+    this.rwLastSeekTs = null;
+    this.rwSrate = 1;
+    this.rwRate = 1;
+    this.rwRateBusy = false;
+    this.rwPendingRate = null;
+  }
+  recWebrtcStart(ts) {
+    this.freezeShow(true);
+    this.posterShow(ts);
+    this.live = false;
+    this.recWebrtcTeardown();
+    this.webrtcTeardown();
+    this.mseTeardown();
+    this.liveTeardown();
+    try {
+      this.v.pause();
+    } catch {
+    }
+    try {
+      this.v.removeAttribute("src");
+      this.v.srcObject = null;
+    } catch {
+    }
+    this.setMjpeg(false);
+    this.transport = "relay";
+    this.setLabel("loading");
+    this.rwStartMs = ts;
+    this.rwBase = null;
+    this.rwRate = this.rate;
+    this.rwSrate = 1;
+    this.seekTarget = ts;
+    const compat = mobileClient();
+    if (compat) rlog("rec-compat-start", { ts: Math.round(ts) });
+    const s = new WebRtcSession(this.api, { camId: this.camId, mode: "recorded", startMs: ts, compat }, {
+      onStream: (ms) => {
+        if (this.rw !== s || this.live) return;
+        try {
+          s.pc?.getReceivers().forEach((r) => {
+            try {
+              r.jitterBufferTarget = 500;
+            } catch {
+            }
+            try {
+              r.playoutDelayHint = 0.5;
+            } catch {
+            }
+          });
+        } catch {
+        }
+        this.setMjpeg(false);
+        this.v.muted = !this.soundOn || this.rate !== 1;
+        try {
+          this.v.removeAttribute("src");
+        } catch {
+        }
+        try {
+          this.v.srcObject = ms;
+        } catch {
+        }
+        this.fcArm();
+        this.rwBase = null;
+        this.safePlay();
+        this.setLabel("playing");
+      },
+      onFail: () => {
+        if (this.rw === s) this.recFallbackMse(ts);
+      },
+      onSessionId: () => {
+        if (this.rw === s && this.rwPending) {
+          const p = this.rwPending;
+          this.rwPending = null;
+          if (Math.abs(p.ts - this.rwStartMs) > 1500) this.recRelaySeek(p.ts, p.rate, p.srate);
+        }
+      }
+    });
+    this.rw = s;
+    s.start();
+    this.startRelayPoll();
+    this.emit();
+  }
+  recFallbackMse(ts) {
+    rlog("rec-fallback-mse", { mseOk: this.mseSupported() });
+    this.recWebrtcDisabled = true;
+    this.recWebrtcTeardown();
+    if (this.live || this.destroyed) return;
+    this.playAt(ts, {});
+  }
+  /** Hard server-side seek, coalesced: one in flight, latest wins, 150 ms floor. */
+  recRelaySeek(ts, rate = 1, srate = 1) {
+    const s = this.rw;
+    if (!s?.id) return;
+    if (this.rwSeekBusy) {
+      this.rwPending = { ts, rate, srate };
+      return;
+    }
+    if (this.rwLastSeekTs === ts && this.rwRate === rate && this.rwSrate === srate && Date.now() - this.rwLastSeekAt < 1e3) return;
+    const wait = 150 - (Date.now() - this.rwLastSeekAt);
+    if (wait > 0) {
+      this.rwSeekBusy = true;
+      this.rwPending = { ts, rate, srate };
+      window.setTimeout(() => {
+        this.rwSeekBusy = false;
+        const p = this.rwPending;
+        this.rwPending = null;
+        if (p && this.rw?.id) this.recRelaySeek(p.ts, p.rate, p.srate);
+      }, wait);
+      return;
+    }
+    this.rwStartMs = ts;
+    this.rwSrate = srate;
+    this.rwRate = this.rwScrub ? srate : rate;
+    this.rwPendingRate = null;
+    this.rwLastSeekTs = ts;
+    this.rwLastSeekAt = Date.now();
+    this.cad.lastNew = Date.now();
+    this.wdLastCt = -1;
+    this.wdLastAt = Date.now();
+    this.wdGrace = Date.now() + 5e3;
+    this.rwPosTs = ts;
+    this.rwPosAt = Date.now();
+    this.setLabel("loading");
+    this.rwSeekBusy = true;
+    this.seekTarget = ts;
+    this.seekAt = Date.now();
+    this.cmdSeq++;
+    const done = (ok) => {
+      this.rwSeekBusy = false;
+      if (!ok) {
+        this.relayRecover();
+        return;
+      }
+      const p = this.rwPending;
+      this.rwPending = null;
+      if (p && this.rw?.id) this.recRelaySeek(p.ts, p.rate, p.srate);
+    };
+    this.api.control(`api/relay-seek?session=${encodeURIComponent(s.id)}&start=${Math.round(ts)}&rate=${rate}&srate=${srate}`).then((ok) => done(ok));
+  }
+  /** Scrub time-lapse rate, coalesced (120 ms floor, 15 % hysteresis). */
+  recRelayRate(r) {
+    const s = this.rw;
+    if (!s?.active || !s.id || !this.rwScrub) return;
+    if (this.rwRateBusy) {
+      this.rwPendingRate = r;
+      return;
+    }
+    if (this.rwSrate === r) return;
+    if (this.rwSrate !== 1 && r > 0 === this.rwSrate > 0 && Math.abs(r - this.rwSrate) < 0.15 * Math.abs(this.rwSrate)) return;
+    const wait = 120 - (Date.now() - this.rwLastRateAt);
+    if (wait > 0) {
+      this.rwRateBusy = true;
+      this.rwPendingRate = r;
+      window.setTimeout(() => {
+        this.rwRateBusy = false;
+        const p = this.rwPendingRate;
+        this.rwPendingRate = null;
+        if (p != null && this.rw?.id) this.recRelayRate(p);
+      }, wait);
+      return;
+    }
+    const c = this.currentTs();
+    this.rwSrate = r;
+    this.rwRate = r;
+    this.rwLastRateAt = Date.now();
+    this.cmdSeq++;
+    if (c != null) {
+      this.rwPosTs = c;
+      this.rwPosAt = Date.now();
+    }
+    this.wdGrace = Date.now() + 8e3;
+    this.cad.lastNew = Date.now();
+    this.rwRateBusy = true;
+    this.api.control(`api/relay-rate?session=${encodeURIComponent(s.id)}&rate=${r}`).then((ok) => {
+      if (!ok) this.relayRecover();
+    }).then(() => {
+      this.rwRateBusy = false;
+      const p = this.rwPendingRate;
+      this.rwPendingRate = null;
+      if (p != null && this.rw?.id && p !== this.rwSrate) this.recRelayRate(p);
+    });
+  }
+  recRelayScrub(on) {
+    const s = this.rw;
+    if (!s?.active || !s.id || this.rwScrub === on) return;
+    this.rwScrub = on;
+    this.cmdSeq++;
+    if (!on) {
+      const c = this.currentTs();
+      this.rwSrate = 1;
+      this.rwRate = this.rate;
+      this.rwPendingRate = null;
+      if (c != null) {
+        this.rwPosTs = c;
+        this.rwPosAt = Date.now();
+      }
+    }
+    this.wdLastCt = -1;
+    this.wdLastAt = Date.now();
+    this.wdGrace = Date.now() + 5e3;
+    this.cad.lastNew = Date.now();
+    this.api.control(`api/relay-scrub?session=${encodeURIComponent(s.id)}&on=${on ? 1 : 0}`).then((ok) => {
+      if (!ok) this.relayRecover();
+    });
+  }
+  relayRecover() {
+    if (!this.rw?.active) return;
+    const t = this.rwPosTs ?? this.rwStartMs;
+    this.recoveries++;
+    rlog("relay-recover", { n: this.recoveries });
+    if (this.recoveries > 2) {
+      this.recFallbackMse(t);
+      return;
+    }
+    this.recWebrtcStart(t);
+  }
+  startRelayPoll() {
+    if (this.relayPoll) return;
+    this.cadStart();
+    this.wdLastCt = -1;
+    this.wdLastAt = Date.now();
+    this.wdDead = 0;
+    this.wdGrace = Date.now() + 8e3;
+    this.relayPoll = window.setInterval(() => {
+      const s = this.rw;
+      const v = this.v;
+      if (!s?.active || !s.id) return;
+      const q = this.presentedFrames();
+      if (v.paused && !this.recPaused && !document.hidden) {
+        if (!this.wdResumeLogged) {
+          this.wdResumeLogged = true;
+          rlog("auto-resume", { rs: v.readyState });
+        }
+        this.safePlay();
+      } else if (!v.paused) this.wdResumeLogged = false;
+      if (!v.paused && !document.hidden && this.rwBase != null) {
+        if (q !== this.wdLastCt) {
+          this.wdLastCt = q;
+          this.wdLastAt = Date.now();
+          this.recoveries = 0;
+          if (!this.posterUntilSeek) this.freezeHide();
+          if (this.label === "loading") this.setLabel("playing");
+        } else if (this.rwScrub) this.wdLastAt = Date.now();
+        else if (Date.now() - this.wdLastAt > 4e3 && Date.now() > this.wdGrace) {
+          this.wdLastAt = Date.now();
+          const o = { ct: Math.round(v.currentTime * 10) / 10, paused: v.paused, muted: v.muted, rs: v.readyState, pf: q, w: v.videoWidth };
+          try {
+            s.pc?.getStats().then((st) => {
+              st.forEach((r) => {
+                if (r.type === "inbound-rtp" && (r.kind || r.mediaType) === "video") {
+                  o.recv = r.framesReceived;
+                  o.dec = r.framesDecoded;
+                  o.drop = r.framesDropped;
+                  o.pli = r.pliCount;
+                }
+              });
+              rlog("stall-snap", o);
+            }).catch(() => {
+            });
+          } catch {
+          }
+          this.relayRecover();
+          return;
+        }
+      } else {
+        this.wdLastCt = q;
+        this.wdLastAt = Date.now();
+      }
+      const seq = this.cmdSeq;
+      fetch(this.api.url(`api/relay-pos?session=${encodeURIComponent(s.id)}`), { cache: "no-store" }).then((r) => r.json()).then((d) => {
+        if (seq !== this.cmdSeq) return;
+        if (d && d.t > 0 && Date.now() - this.seekAt < 2500 && Math.abs(d.t - this.seekTarget) > 5e3) return;
+        if (d && d.t > 0) {
+          this.wdDead = 0;
+          this.rwPosTs = d.t;
+          this.rwPosAt = Date.now();
+          if (this.posterUntilSeek && Math.abs(d.t - this.seekTarget) < 4e3 && !this.rwSeekBusy && !this.rwPending) this.freezeHide();
+          this.emit();
+        } else if (d && d.t <= 0) {
+          if (++this.wdDead >= 3) {
+            this.wdDead = 0;
+            this.relayRecover();
+          }
+        }
+      }).catch(() => {
+      });
+    }, 600);
+  }
+  stopRelayPoll() {
+    this.cadStop();
+    if (this.relayPoll) {
+      clearInterval(this.relayPoll);
+      this.relayPoll = void 0;
+    }
+  }
+  cadStart() {
+    this.cadStop();
+    const C = this.cad;
+    C.last = -1;
+    C.frames0 = -1;
+    C.stalls = 0;
+    C.maxStall = 0;
+    C.gapMax = 0;
+    C.t0 = Date.now();
+    C.t = window.setInterval(() => {
+      if (!this.rw?.active || document.hidden) return;
+      const q = this.presentedFrames(), now = Date.now();
+      if (this.rwScrub) {
+        C.last = q;
+        C.lastNew = now;
+        return;
+      }
+      if (C.frames0 < 0) {
+        C.frames0 = q;
+        C.last = q;
+        C.lastNew = now;
+        return;
+      }
+      if (q === C.frames0 && C.last === C.frames0) {
+        C.lastNew = now;
+        return;
+      }
+      if (q > C.last) {
+        const gap = now - C.lastNew;
+        if (gap > C.gapMax) C.gapMax = gap;
+        if (gap >= 400) {
+          C.stalls++;
+          if (gap > C.maxStall) C.maxStall = gap;
+        }
+        C.last = q;
+        C.lastNew = now;
+      }
+      if (now - C.t0 >= 3e4) {
+        const rep = { sec: Math.round((now - C.t0) / 1e3), frames: C.last - C.frames0, stalls: C.stalls, maxStall: C.maxStall, gapMax: C.gapMax, w: this.v.videoWidth };
+        C.t0 = now;
+        C.frames0 = C.last;
+        C.stalls = 0;
+        C.maxStall = 0;
+        C.gapMax = 0;
+        const pc = this.rw?.pc;
+        if (pc) pc.getStats().then((st) => {
+          st.forEach((r) => {
+            if (r.type === "inbound-rtp" && (r.kind || r.mediaType) === "video") {
+              rep.lost = r.packetsLost;
+              rep.jit = Math.round((r.jitter || 0) * 1e3);
+              rep.recv = r.framesReceived;
+              rep.dec = r.framesDecoded;
+              rep.drop = r.framesDropped;
+            }
+          });
+          rlog("cadence", rep);
+        }).catch(() => rlog("cadence", rep));
+        else rlog("cadence", rep);
+      }
+    }, 100);
+  }
+  cadStop() {
+    if (this.cad.t) {
+      clearInterval(this.cad.t);
+      this.cad.t = 0;
+    }
+  }
+  // ---- playAt: relay first, MSE/native fallback ------------------------------------------------
+  playAt(ts, opts = {}) {
+    const idx0 = this.clipIndexFor(ts);
+    if (this.recWebrtcOk()) {
+      this.chaseAbort();
+      if (idx0 < 0) {
+        this.setLabel("noRecording");
+        return;
+      }
+      this.recPaused = false;
+      const t0 = Math.max(ts, this.clips[idx0].startTime);
+      if (this.rw?.active && this.rw.id) this.recRelaySeek(t0, this.rate || 1, opts.srate || 1);
+      else if (this.rw?.active && !this.live) this.rwPending = { ts: t0, rate: this.rate || 1, srate: opts.srate || 1 };
+      else {
+        if (this.live) {
+          this.freezeShow(true);
+          this.exitLiveState();
+        }
+        this.recWebrtcStart(t0);
+      }
+      return;
+    }
+    const canChase = !opts.noChase && !this.live && this.M.active && !this.recPaused && this.currentTs() != null && idx0 >= 0;
+    this.chaseAbort();
+    if (canChase && !opts.scrub) {
+      this.startChase(ts);
+      return;
+    }
+    if (idx0 < 0) {
+      this.setLabel("noRecording");
+      return;
+    }
+    if (this.live) {
+      this.freezeShow(true);
+      this.exitLiveState();
+    }
+    this.recPaused = false;
+    const clip = this.clips[idx0];
+    if (ts < clip.startTime) ts = clip.startTime;
+    this.playIndex = idx0;
+    this.v.muted = opts.scrub ? true : !this.soundOn;
+    if (this.mseSupported()) {
+      const t = (ts - this.M.base) / 1e3;
+      if (this.M.active && t >= 0 && (this.bufferedContains(t) || t <= this.M.end + 0.5 && this.M.end - t < 95)) {
+        try {
+          this.v.currentTime = t;
+        } catch {
+        }
+        if (this.v.paused) this.safePlay();
+        this.feed();
+      } else {
+        if (opts.scrub && Date.now() - this.lastLoad < 200) {
+          this.pendingTs = ts;
+          return;
+        }
+        this.lastLoad = Date.now();
+        this.mseStart(idx0, (ts - clip.startTime) / 1e3);
+      }
+    } else {
+      const off = Math.min(Math.max((ts - clip.startTime) / 1e3, 0), (clip.duration || 0) / 1e3);
+      if (clip.id === this.curClipId && this.v.src) {
+        try {
+          this.v.currentTime = off;
+        } catch {
+        }
+        if (this.v.paused) this.safePlay();
+      } else {
+        if (opts.scrub && Date.now() - this.lastLoad < 120) {
+          this.pendingTs = ts;
+          return;
+        }
+        this.freezeShow();
+        this.lastLoad = Date.now();
+        this.curClipId = clip.id;
+        this.transport = "native";
+        rlog("native-fallback", { clip: clip.id });
+        this.v.src = this.api.url(`api/segment?id=${encodeURIComponent(clip.videoId || clip.id)}`);
+        this.v.load();
+        this.v.onloadedmetadata = () => {
+          this.v.playbackRate = this.rate;
+          try {
+            this.v.currentTime = off;
+          } catch {
+          }
+          this.safePlay();
+        };
+      }
+    }
+    this.setLabel(opts.scrub ? "scrub" : "playing");
+  }
+  // ---- MSE recorded ------------------------------------------------------------------------
+  mseSupported() {
+    try {
+      return !!(this.api.corsMedia && MSCls && this.codecs && MSCls.isTypeSupported(`video/mp4; codecs="${this.codecs}"`));
+    } catch {
+      return false;
+    }
+  }
+  mseTeardown() {
+    const M = this.M;
+    M.active = false;
+    M.nextIdx = -1;
+    M.feeding = false;
+    M.end = 0;
+    M.pendingSeek = null;
+    M.q = [];
+    M.segFirst = false;
+    try {
+      M.abort?.abort();
+    } catch {
+    }
+    M.abort = null;
+    if (M.sb && M.ms && M.ms.readyState === "open") {
+      try {
+        M.sb.abort();
+      } catch {
+      }
+    }
+    M.sb = null;
+    M.ms = null;
+  }
+  bufferedContains(t) {
+    try {
+      const b = this.v.buffered;
+      for (let i = 0; i < b.length; i++) if (t >= b.start(i) - 0.3 && t <= b.end(i) + 0.3) return true;
+    } catch {
+    }
+    return false;
+  }
+  mseStart(idx, offSec) {
+    this.freezeShow();
+    this.mseTeardown();
+    const M = this.M;
+    const ms = new MSCls();
+    M.ms = ms;
+    M.active = true;
+    M.base = this.clips[idx].startTime;
+    M.nextIdx = idx;
+    M.end = 0;
+    M.mmsGo = true;
+    this.transport = "mse";
+    if (window.ManagedMediaSource && ms instanceof window.ManagedMediaSource) {
+      try {
+        this.v.disableRemotePlayback = true;
+      } catch {
+      }
+      ms.addEventListener("startstreaming", () => {
+        M.mmsGo = true;
+        this.feed();
+      });
+      ms.addEventListener("endstreaming", () => {
+        M.mmsGo = false;
+      });
+    }
+    M.pendingSeek = offSec;
+    const u = URL.createObjectURL(ms);
+    ms.addEventListener("sourceopen", () => {
+      URL.revokeObjectURL(u);
+      if (M.ms !== ms) return;
+      let sb;
+      try {
+        sb = ms.addSourceBuffer(`video/mp4; codecs="${this.codecs}"`);
+      } catch {
+        this.codecs = null;
+        M.active = false;
+        return;
+      }
+      sb.mode = "segments";
+      sb.addEventListener("updateend", () => {
+        if (M.pendingSeek != null && this.v.readyState >= 1) {
+          const t0 = M.pendingSeek;
+          M.pendingSeek = null;
+          try {
+            this.v.currentTime = t0;
+          } catch {
+          }
+        }
+        this.drain();
+        if (!M.feeding && !M.q.length) this.feed();
+      });
+      sb.addEventListener("error", () => {
+        M.active = false;
+      });
+      M.sb = sb;
+      try {
+        this.v.currentTime = offSec;
+      } catch {
+      }
+      this.feed();
+    });
+    try {
+      this.v.srcObject = null;
+    } catch {
+    }
+    this.v.src = u;
+    this.v.playbackRate = this.rate;
+    this.safePlay();
+  }
+  drain() {
+    const M = this.M;
+    if (!M.active || !M.sb || M.sb.updating || !M.q.length) return;
+    if (M.segFirst) {
+      M.segFirst = false;
+      try {
+        M.sb.timestampOffset = M.segOff;
+      } catch {
+        try {
+          M.sb.abort();
+          M.sb.timestampOffset = M.segOff;
+        } catch {
+          M.active = false;
+          return;
+        }
+      }
+    }
+    const buf = M.q.shift();
+    try {
+      M.sb.appendBuffer(buf);
+    } catch {
+      try {
+        M.sb.abort();
+        M.sb.appendBuffer(buf);
+      } catch {
+        M.active = false;
+      }
+    }
+  }
+  feed() {
+    const M = this.M;
+    if (!M.active || M.feeding) return;
+    if (M.mmsGo === false) return;
+    if (M.nextIdx < 0 || M.nextIdx >= this.clips.length) return;
+    if (M.end - this.v.currentTime > 90) return;
+    try {
+      const b = this.v.buffered;
+      if (b.length && this.v.currentTime - b.start(0) > 240 && M.sb && !M.sb.updating && !M.q.length) {
+        M.sb.remove(0, this.v.currentTime - 120);
+        return;
+      }
+    } catch {
+    }
+    const clip = this.clips[M.nextIdx], ms = M.ms;
+    M.feeding = true;
+    M.segFirst = true;
+    M.segOff = (clip.startTime - M.base) / 1e3;
+    M.abort = new AbortController();
+    fetch(this.api.url(`api/segment?id=${encodeURIComponent(clip.videoId || clip.id)}`), { credentials: "same-origin", signal: M.abort.signal }).then((r) => {
+      if (!r.ok || !r.body) throw new Error(String(r.status));
+      const rd = r.body.getReader();
+      const loop = () => {
+        rd.read().then((x) => {
+          if (M.ms !== ms || !M.active) return;
+          if (x.done) {
+            M.feeding = false;
+            M.nextIdx++;
+            M.end = M.segOff + (clip.duration || 6e4) / 1e3;
+            if (!M.q.length) this.feed();
+            return;
+          }
+          M.q.push(x.value);
+          this.drain();
+          loop();
+        }).catch(() => {
+          if (M.ms === ms) M.feeding = false;
+        });
+      };
+      loop();
+    }).catch(() => {
+      if (M.ms !== ms) return;
+      M.feeding = false;
+      M.nextIdx++;
+      this.feed();
+    });
+  }
+  handleStall() {
+    if (this.live || !this.M.active || this.v.paused) return;
+    const t = this.v.currentTime;
+    try {
+      const b = this.v.buffered;
+      for (let i = 0; i < b.length; i++) if (b.start(i) > t && b.start(i) - t < 60) {
+        this.v.currentTime = b.start(i) + 0.05;
+        return;
+      }
+    } catch {
+    }
+    if (this.M.nextIdx >= this.clips.length) this.opts.onClipsRefresh().then((c) => {
+      const cur = this.clips[this.M.nextIdx - 1];
+      this.clips = c;
+      if (cur) {
+        const i = c.findIndex((x) => x.id === cur.id);
+        if (i >= 0) this.M.nextIdx = i + 1;
+      }
+      this.feed();
+    }).catch(() => {
+    });
+    else this.feed();
+  }
+  // trick-play chase inside the MSE buffer
+  chaseAbort() {
+    if (!this.CH.active) return;
+    this.CH.active = false;
+    if (this.CH.timer) {
+      clearInterval(this.CH.timer);
+      this.CH.timer = 0;
+    }
+    this.v.playbackRate = this.rate;
+    this.v.muted = !this.soundOn;
+  }
+  endChase() {
+    const tgt = this.CH.target;
+    this.chaseAbort();
+    try {
+      this.v.currentTime = (tgt - this.M.base) / 1e3;
+    } catch {
+    }
+    this.setLabel("playing");
+    if (this.v.paused) this.safePlay();
+  }
+  startChase(target) {
+    this.chaseAbort();
+    this.freezeHide();
+    this.CH.active = true;
+    this.CH.target = target;
+    try {
+      this.v.pause();
+    } catch {
+    }
+    this.v.muted = true;
+    this.setLabel("scrub");
+    this.CH.timer = window.setInterval(() => {
+      if (!this.CH.active) return;
+      const c = this.currentTs();
+      if (c == null) {
+        this.endChase();
+        return;
+      }
+      const rem = this.CH.target - c;
+      if (Math.abs(rem) <= 250) {
+        this.endChase();
+        return;
+      }
+      let step = rem * 0.2;
+      if (Math.abs(step) < 180) step = rem > 0 ? 180 : -180;
+      const nt = c + step, tt = (nt - this.M.base) / 1e3;
+      if (this.M.active && this.bufferedContains(tt)) {
+        try {
+          this.v.currentTime = tt;
+        } catch {
+        }
+        this.feed();
+      } else {
+        this.endChase();
+        this.playAt(this.CH.target, { noChase: true });
+      }
+    }, 50);
+  }
+  // ---- controls -----------------------------------------------------------------------------
+  togglePlayPause() {
+    if (this.live) return;
+    if (this.CH.active) {
+      this.chaseAbort();
+      try {
+        this.v.pause();
+      } catch {
+      }
+      this.emit();
+      return;
+    }
+    if (this.recPaused) {
+      this.recPaused = false;
+      const t = this.recPausedTs ?? (this.currentTs() ?? Date.now() - 1e3);
+      this.playAt(t, {});
+      return;
+    }
+    if (this.rw?.active) {
+      this.recPausedTs = this.currentTs();
+      this.freezeShow();
+      if (this.freezeT) {
+        clearTimeout(this.freezeT);
+        this.freezeT = 0;
+      }
+      this.recWebrtcTeardown();
+      try {
+        this.v.pause();
+      } catch {
+      }
+      this.recPaused = true;
+      this.transport = "none";
+      this.setLabel("paused");
+      return;
+    }
+    if (this.v.paused) this.safePlay();
+    else this.v.pause();
+  }
+  skip(ms) {
+    const ts = this.live ? Date.now() + ms : (this.currentTs() ?? Date.now()) + ms;
+    if (this.live && ms > 0) return;
+    this.playAt(ts, {});
+  }
+  cycleSpeed() {
+    if (this.live) return this.rate;
+    const rates = [1, 2, 4, 8];
+    this.rate = rates[(rates.indexOf(this.rate) + 1) % rates.length] ?? 1;
+    if (this.rw?.active && this.rw.id) {
+      const c = this.currentTs();
+      this.recRelaySeek(c ?? this.rwStartMs, this.rate);
+      this.v.muted = !this.soundOn || this.rate !== 1;
+    } else this.v.playbackRate = this.rate;
+    this.emit();
+    return this.rate;
+  }
+  setSound(on) {
+    this.soundOn = on;
+    this.v.muted = !on || !!this.rw?.active && this.rate !== 1;
+    if (on && this.v.paused && !this.recPaused) this.safePlay();
+    this.emit();
+  }
+  snapshot() {
+    try {
+      const src = this.live && !this.img.classList.contains("hidden") ? this.img : this.v;
+      const w = src.videoWidth || src.naturalWidth || 1280, h = src.videoHeight || src.naturalHeight || 720;
+      const cv = document.createElement("canvas");
+      cv.width = w;
+      cv.height = h;
+      cv.getContext("2d").drawImage(src, 0, 0, w, h);
+      cv.toBlob((b) => {
+        if (!b) return;
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(b);
+        const ts = this.currentTs() ?? Date.now();
+        const d = new Date(ts);
+        a.download = `${(this.camName || "snapshot").replace(/[^\w.-]+/g, "_")}_${String(d.getHours()).padStart(2, "0")}${String(d.getMinutes()).padStart(2, "0")}${String(d.getSeconds()).padStart(2, "0")}.jpg`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        setTimeout(() => URL.revokeObjectURL(a.href), 4e3);
+      }, "image/jpeg", 0.92);
+    } catch {
+    }
+  }
+  capLog(tag, extra) {
+    try {
+      const v = this.v, st = this.stage;
+      rlog(tag, { fsReq: !!st.requestFullscreen, wkFs: !!st.webkitRequestFullscreen, vEnter: !!v.webkitEnterFullscreen, pipReq: !!v.requestPictureInPicture, wkPip: !!(v.webkitSupportsPresentationMode && v.webkitSupportsPresentationMode("picture-in-picture")), rs: v.readyState, vw: v.videoWidth, ...extra || {} });
+    } catch {
+    }
+  }
+  pip() {
+    const v = this.v;
+    this.capLog("pip-btn");
+    try {
+      if (document.pictureInPictureElement || v.webkitPresentationMode === "picture-in-picture") {
+        if (document.pictureInPictureElement) document.exitPictureInPicture().catch(() => {
+        });
+        else v.webkitSetPresentationMode("inline");
+        return;
+      }
+      if (this.v.classList.contains("hidden")) return;
+      const wk = () => {
+        try {
+          if (v.webkitSupportsPresentationMode && v.webkitSupportsPresentationMode("picture-in-picture")) v.webkitSetPresentationMode("picture-in-picture");
+          else this.capLog("pip-unsupported");
+        } catch (e) {
+          this.capLog("pip-fail", { e: String(e?.name || e) });
+        }
+      };
+      if (v.requestPictureInPicture) v.requestPictureInPicture().catch((e) => {
+        this.capLog("pip-fail", { e: String(e?.name || e) });
+        wk();
+      });
+      else wk();
+    } catch (e) {
+      this.capLog("pip-fail", { e: String(e?.name || e) });
+    }
+  }
+  fullscreen() {
+    const st = this.stage, v = this.v, d = document;
+    this.capLog("fs-btn");
+    try {
+      if (d.fullscreenElement || d.webkitFullscreenElement) {
+        (d.exitFullscreen || d.webkitExitFullscreen).call(d);
+        return;
+      }
+      if (st.requestFullscreen) st.requestFullscreen().catch((e) => this.capLog("fs-fail", { e: String(e?.name || e) }));
+      else if (st.webkitRequestFullscreen) st.webkitRequestFullscreen();
+      else if (v.webkitEnterFullscreen && !this.v.classList.contains("hidden")) v.webkitEnterFullscreen();
+      else this.capLog("fs-unsupported");
+    } catch (e) {
+      this.capLog("fs-fail", { e: String(e?.name || e) });
+    }
+  }
+  // ---- scrub (timeline gesture) ------------------------------------------------------------
+  /** first gesture: scrub profile on (relay); MSE: freeze + pause */
+  scrubBegin() {
+    this.chaseAbort();
+    if (!this.rw?.active) {
+      this.freezeShow();
+      if (!this.live) {
+        try {
+          this.v.pause();
+        } catch {
+        }
+      }
+    }
+    this.recRelayScrub(true);
+  }
+  /** scroll position + velocity (timeline-ms per wall-s) while the gesture runs */
+  scrubMove(_centerTs, vel, smoothTs) {
+    if (!this.rw?.active) {
+      this.freezeHold();
+      return;
+    }
+    if (!this.rw.id) return;
+    let r = vel / 1e3;
+    if (Math.abs(r) < 0.1) return;
+    r = Math.min(3e3, Math.max(-3e3, r));
+    r = Math.abs(r) >= 10 ? Math.round(r) : Math.round(r * 10) / 10;
+    const tgt = this.clampRange(smoothTs), cur = this.currentTs();
+    const drift = cur == null ? null : tgt - cur;
+    if (drift == null || Math.abs(drift) > Math.max(4500, 1200 * Math.abs(r))) this.scrubSeek(tgt, r);
+    else this.recRelayRate(r);
+  }
+  /** hold / release: land exactly on the centre at 1× (or go live near now) */
+  scrubSeek(ts, srate = 1) {
+    if (this.nearNow(ts)) {
+      this.goLive();
+      return;
+    }
+    this.playAt(this.clampRange(ts), { scrub: true, srate });
+  }
+  /** gesture settled → normal profile, base rate */
+  scrubIdle() {
+    this.recRelayScrub(false);
+  }
+  // ---- visibility ---------------------------------------------------------------------------
+  hiddenTs = null;
+  onVisibility() {
+    if (document.visibilityState === "hidden") {
+      if (this.live) {
+        this.hiddenTs = null;
+        this.webrtcTeardown();
+        this.liveTeardown();
+        if (this.transport === "mjpeg") this.img.removeAttribute("src");
+      } else if (this.rw?.active) {
+        this.hiddenTs = this.currentTs();
+        this.freezeShow(true);
+        this.recWebrtcTeardown();
+      }
+    } else {
+      if (this.live) this.goLive();
+      else if (this.hiddenTs != null && !this.recPaused) {
+        const t = this.hiddenTs;
+        this.hiddenTs = null;
+        this.playAt(t, {});
+      }
+    }
+  }
+};
+export {
+  PlayerController,
+  WebRtcSession,
+  mobileClient,
+  rlog,
+  setRlogClient
+};
+//# sourceMappingURL=index.js.map