rvms-vue 0.1.11 → 0.1.12

package/dist/lib/index.js

@@ -1,41 +1,41 @@
-import { defineComponent as N, ref as k, onMounted as q, onBeforeUnmount as F, watch as J, openBlock as d, createElementBlock as f, normalizeStyle as j, createElementVNode as i, toDisplayString as B, createCommentVNode as S, createTextVNode as K, Fragment as Y, renderList as G } from "vue";
-const X = {
+import { defineComponent as F, ref as k, onMounted as K, onBeforeUnmount as J, watch as q, openBlock as f, createElementBlock as p, normalizeStyle as Q, createElementVNode as i, toDisplayString as B, createCommentVNode as S, createTextVNode as Y, Fragment as G, renderList as X } from "vue";
+const Z = {
   width: "64",
   height: "64",
   viewBox: "0 0 64 64",
   fill: "none",
   style: { opacity: "0.8" }
-}, Z = {
+}, ee = {
   key: 1,
   class: "rvms-overlay"
-}, ee = {
+}, te = {
   key: 2,
   class: "rvms-overlay"
-}, te = {
+}, ne = {
   key: 3,
   class: "rvms-overlay"
-}, ne = {
+}, re = {
   key: 0,
   style: { color: "#fca5a5", "font-size": "0.8em", "text-align": "center", padding: "0 1em", "max-width": "80%" }
-}, re = {
+}, oe = {
   key: 4,
   class: "rvms-overlay"
-}, oe = { style: { position: "absolute", top: "8px", left: "8px", display: "flex", gap: "6px", "align-items": "center", "pointer-events": "none" } }, ae = {
+}, ae = { style: { position: "absolute", top: "8px", left: "8px", display: "flex", gap: "6px", "align-items": "center", "pointer-events": "none" } }, le = {
   key: 1,
   style: { padding: "2px 6px", "border-radius": "4px", "font-size": "10px", "font-family": "monospace", background: "rgba(51, 65, 85, 0.8)", color: "#cbd5e1" }
-}, le = {
+}, se = {
   key: 2,
   style: { display: "inline-flex", "align-items": "center", gap: "4px", padding: "2px 8px", "border-radius": "4px", "font-size": "10px", background: "#065f46", color: "#6ee7b7" }
-}, se = {
+}, ie = {
   key: 5,
   style: { position: "absolute", bottom: "12px", right: "12px", display: "flex", gap: "6px" }
-}, ie = ["title"], ue = {
+}, ue = ["title"], ce = {
   key: 6,
   style: { position: "absolute", bottom: "48px", left: "8px", right: "8px", "max-height": "140px", "overflow-y": "auto", display: "flex", "flex-direction": "column", gap: "4px" }
-}, ce = ["title", "onClick"], de = ["src"], fe = { style: { flex: "1", "min-width": "0" } }, pe = { style: { display: "flex", gap: "6px", "align-items": "baseline" } }, ve = { style: { color: "#fbbf24", "font-weight": "600", "text-transform": "uppercase", "font-size": "10px" } }, me = {
+}, de = ["title", "onClick"], fe = ["src"], pe = { style: { flex: "1", "min-width": "0" } }, ve = { style: { display: "flex", gap: "6px", "align-items": "baseline" } }, me = { style: { color: "#fbbf24", "font-weight": "600", "text-transform": "uppercase", "font-size": "10px" } }, ge = {
   key: 0,
   style: { color: "#94a3b8" }
-}, ge = { style: { color: "#94a3b8", "font-size": "10px", "white-space": "nowrap", overflow: "hidden", "text-overflow": "ellipsis" } }, Re = /* @__PURE__ */ N({
+}, ye = { style: { color: "#94a3b8", "font-size": "10px", "white-space": "nowrap", overflow: "hidden", "text-overflow": "ellipsis" } }, Ue = /* @__PURE__ */ F({
   __name: "RvmsVideoPlayer",
   props: {
     nvrId: {},
@@ -51,26 +51,26 @@ const X = {
   },
   emits: ["alarm", "stream-status", "alarm-click"],
   setup($, { expose: P, emit: x }) {
-    const s = $, v = x, l = k(null), a = k("idle"), g = k(null), w = k(null), h = k(!1), C = k(s.initialProfile);
+    const s = $, v = x, l = k(null), a = k("idle"), g = k(null), w = k(null), b = k(!1), C = k(s.initialProfile);
     function I() {
-      C.value = C.value === "main" ? "sub" : "main", h.value && m();
+      C.value = C.value === "main" ? "sub" : "main", b.value && m();
     }
-    const E = k(null), L = k([]);
+    const E = k(null), O = k([]);
     function U(e) {
       return `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}${e}`;
     }
-    function D() {
-      M();
+    function j() {
+      D();
       const e = new WebSocket(s.token ? `/ws/alarms?token=${encodeURIComponent(s.token)}` : U("/ws/alarms"));
       E.value = e, e.onmessage = (t) => {
         try {
           const r = JSON.parse(t.data);
           switch (r.type) {
             case "snapshot":
-              r.events && (L.value = r.events, r.events.forEach((p) => v("alarm", p)));
+              r.events && (O.value = r.events, r.events.forEach((d) => v("alarm", d)));
               break;
             case "alarm":
-              r.event && (L.value.unshift(r.event), L.value.length > 50 && (L.value.length = 50), v("alarm", r.event));
+              r.event && (O.value.unshift(r.event), O.value.length > 50 && (O.value.length = 50), v("alarm", r.event));
               break;
             default:
               break;
@@ -78,11 +78,11 @@ const X = {
         } catch {
         }
       }, e.onclose = () => {
-        E.value = null, setTimeout(D, 3e3);
+        E.value = null, setTimeout(j, 3e3);
       }, e.onerror = () => {
       };
     }
-    function M() {
+    function D() {
       if (E.value) {
         try {
           E.value.onclose = null, E.value.close();
@@ -98,13 +98,13 @@ const X = {
         const t = await fetch("/api/alarms/recent", { headers: e });
         if (t.ok) {
           const r = await t.json();
-          L.value = r;
+          O.value = r;
         }
       } catch {
       }
     }
     let H = null;
-    function O() {
+    function z() {
       return {
         cancelled: !1,
         ws: null,
@@ -116,7 +116,7 @@ const X = {
         sourceOpenHandler: null
       };
     }
-    function z() {
+    function R() {
       var t;
       const e = H;
       if (e) {
@@ -154,109 +154,111 @@ const X = {
         return;
       }
       a.value = "connecting", g.value = null, w.value = null, v("stream-status", "connecting");
-      const t = O();
+      const t = z();
       H = t;
       const r = new MediaSource();
       t.mediaSource = r, l.value.src = URL.createObjectURL(r);
-      const p = () => {
-        t.cancelled || t.mediaSource !== r || (a.value = "buffering", v("stream-status", "buffering"), T(t));
+      const d = () => {
+        t.cancelled || t.mediaSource !== r || (a.value = "buffering", v("stream-status", "buffering"), M(t));
       };
-      t.sourceOpenHandler = p, r.addEventListener("sourceopen", p);
-      const u = new WebSocket(e);
-      u.binaryType = "arraybuffer", t.ws = u, u.onmessage = (b) => {
+      t.sourceOpenHandler = d, r.addEventListener("sourceopen", d);
+      const c = new WebSocket(e);
+      c.binaryType = "arraybuffer", t.ws = c, c.onmessage = (h) => {
         if (t.cancelled) return;
-        if (typeof b.data == "string") {
+        if (typeof h.data == "string") {
           try {
-            const R = JSON.parse(b.data);
-            R.type === "error" && R.message && (g.value = R.message, a.value = "error", v("stream-status", "error"), z());
+            const L = JSON.parse(h.data);
+            L.type === "error" && L.message && (g.value = L.message, a.value = "error", v("stream-status", "error"), R());
           } catch {
           }
           return;
         }
-        const _ = new Uint8Array(b.data);
+        const _ = new Uint8Array(h.data);
         if (!t.sourceBuffer) {
-          t.preBuffer.push(_), T(t);
+          t.preBuffer.push(_), M(t);
           return;
         }
         t.appendQueue.push(
           _.buffer.slice(_.byteOffset, _.byteOffset + _.byteLength)
         ), o(t);
-      }, u.onerror = () => {
+      }, c.onerror = () => {
         t.cancelled || a.value !== "error" && (g.value = "WebSocket error", a.value = "error", v("stream-status", "error"));
-      }, u.onclose = (b) => {
-        t.cancelled || (a.value === "connecting" || a.value === "buffering" ? (g.value = b.reason || `Stream closed (code ${b.code})`, a.value = "error", v("stream-status", "error")) : a.value === "playing" && (a.value = "ended", v("stream-status", "ended")));
+      }, c.onclose = (h) => {
+        t.cancelled || (a.value === "connecting" || a.value === "buffering" ? (g.value = h.reason || `Stream closed (code ${h.code})`, a.value = "error", v("stream-status", "error")) : a.value === "playing" && (a.value = "ended", v("stream-status", "ended")));
       };
     }
     function V(e) {
-      const t = (u) => u.toString(16).padStart(2, "0").toUpperCase();
-      let r = null, p = null;
-      for (let u = 0; u + 7 < e.length; u++) {
-        const b = String.fromCharCode(e[u], e[u + 1], e[u + 2], e[u + 3]);
-        if (b === "avcC") {
-          const _ = e[u + 5], R = e[u + 6], Q = e[u + 7];
-          _ !== void 0 && R !== void 0 && Q !== void 0 && (r = `avc1.${t(_)}${t(R)}${t(Q)}`);
+      const t = (c) => c.toString(16).padStart(2, "0").toUpperCase();
+      let r = null, d = null;
+      for (let c = 0; c + 7 < e.length; c++) {
+        const h = String.fromCharCode(e[c], e[c + 1], e[c + 2], e[c + 3]);
+        if (h === "avcC") {
+          const _ = e[c + 5], L = e[c + 6], T = e[c + 7];
+          _ !== void 0 && L !== void 0 && T !== void 0 && (r = `avc1.${t(_)}${t(L)}${t(T)}`);
         }
-        b === "hvcC" && (r = "hev1.1.6.L93.B0"), b === "mp4a" && (p = "mp4a.40.2");
+        h === "hvcC" && (r = "hev1.1.6.L93.B0"), h === "mp4a" && (d = "mp4a.40.2");
       }
-      return r ? p ? `${r}, ${p}` : r : null;
+      return r ? d ? `${r}, ${d}` : r : null;
     }
-    function T(e) {
+    function M(e) {
       if (e.cancelled || e.sourceBuffer || !e.mediaSource || e.mediaSource.readyState !== "open") return;
       const t = n(e.preBuffer), r = V(t);
       if (!r) return;
       w.value = r;
-      const p = `video/mp4; codecs="${r}"`;
-      if (!MediaSource.isTypeSupported(p)) {
-        g.value = `Codec not supported: ${p}`, a.value = "error", z();
+      const d = `video/mp4; codecs="${r}"`;
+      if (!MediaSource.isTypeSupported(d)) {
+        g.value = `Codec not supported: ${d}`, a.value = "error", R();
         return;
       }
-      let u;
+      let c;
       try {
-        u = e.mediaSource.addSourceBuffer(p);
+        c = e.mediaSource.addSourceBuffer(d);
       } catch (_) {
-        g.value = `addSourceBuffer failed: ${_.message}`, a.value = "error", z();
+        g.value = `addSourceBuffer failed: ${_.message}`, a.value = "error", R();
         return;
       }
-      u.mode = "segments";
-      const b = () => {
+      c.mode = "segments";
+      const h = () => {
         e.cancelled || o(e);
       };
-      e.updateEndHandler = b, u.addEventListener("updateend", b), u.addEventListener("error", () => {
+      e.updateEndHandler = h, c.addEventListener("updateend", h), c.addEventListener("error", () => {
         e.cancelled || (g.value = "SourceBuffer error", a.value = "error");
-      }), e.sourceBuffer = u, e.appendQueue.unshift(t.buffer.slice(t.byteOffset, t.byteOffset + t.byteLength)), e.preBuffer.length = 0, o(e);
+      }), e.sourceBuffer = c, e.appendQueue.unshift(t.buffer.slice(t.byteOffset, t.byteOffset + t.byteLength)), e.preBuffer.length = 0, o(e);
     }
     function n(e) {
-      const t = e.reduce((u, b) => u + b.byteLength, 0), r = new Uint8Array(t);
-      let p = 0;
-      for (const u of e)
-        r.set(u, p), p += u.byteLength;
+      const t = e.reduce((c, h) => c + h.byteLength, 0), r = new Uint8Array(t);
+      let d = 0;
+      for (const c of e)
+        r.set(c, d), d += c.byteLength;
       return r;
     }
     function o(e) {
-      var u;
+      var c, h;
       if (e.cancelled) return;
       const t = e.sourceBuffer, r = e.mediaSource;
       if (!t || !r || r.readyState !== "open" || t.updating) return;
-      const p = e.appendQueue.shift();
-      if (p)
+      const d = e.appendQueue.shift();
+      if (d)
         try {
-          t.appendBuffer(p), a.value !== "playing" && (a.value = "playing", v("stream-status", "playing"));
-        } catch (b) {
-          const _ = b;
-          if (_.name === "QuotaExceededError") {
-            const R = ((u = l.value) == null ? void 0 : u.currentTime) ?? 0, Q = Math.max(0, R - 5);
+          t.appendBuffer(d), a.value !== "playing" && (a.value = "playing", v("stream-status", "playing"));
+        } catch (_) {
+          const L = _;
+          if (e.cancelled || (c = L.message) != null && c.includes("removed from the parent"))
+            return;
+          if (L.name === "QuotaExceededError") {
+            const T = ((h = l.value) == null ? void 0 : h.currentTime) ?? 0, N = Math.max(0, T - 5);
             try {
-              t.buffered.length > 0 && t.buffered.start(0) < Q && t.remove(t.buffered.start(0), Q);
+              t.buffered.length > 0 && t.buffered.start(0) < N && t.remove(t.buffered.start(0), N);
             } catch {
             }
-            e.appendQueue.unshift(p);
+            e.appendQueue.unshift(d);
           } else
-            g.value = `appendBuffer failed: ${_.message}`, a.value = "error", z();
+            g.value = `appendBuffer failed: ${L.message}`, a.value = "error", R();
         }
     }
     async function m() {
-      if (z(), h.value = !0, !s.nvrId || !s.deviceId) {
-        g.value = "nvrId and deviceId are required", a.value = "error", h.value = !1, v("stream-status", "error");
+      if (R(), b.value = !0, !s.nvrId || !s.deviceId) {
+        g.value = "nvrId and deviceId are required", a.value = "error", b.value = !1, v("stream-status", "error");
         return;
       }
       a.value = "connecting", g.value = null, w.value = null, v("stream-status", "connecting");
@@ -273,27 +275,27 @@ const X = {
         const r = `${t}//${location.host}/ws/stream?${e.toString()}`;
         W(r), A();
       } catch (e) {
-        g.value = e.message, a.value = "error", h.value = !1, v("stream-status", "error"), console.error("[RvmsVideoPlayer] start failed:", e.message);
+        g.value = e.message, a.value = "error", b.value = !1, v("stream-status", "error"), console.error("[RvmsVideoPlayer] start failed:", e.message);
       }
     }
     function y() {
-      h.value = !1, z(), a.value = "idle", g.value = null, v("stream-status", "idle");
+      b.value = !1, R(), a.value = "idle", g.value = null, v("stream-status", "idle");
     }
-    function c(e) {
+    function u(e) {
       return e || "";
     }
-    return q(() => {
-      D(), A();
-    }), F(() => {
-      M(), y();
-    }), J(
+    return K(() => {
+      j(), A();
+    }), J(() => {
+      D(), y();
+    }), q(
       () => [s.nvrId, s.deviceId, s.mode].join("|"),
       () => {
-        h.value && s.nvrId && s.deviceId && m();
+        b.value && s.nvrId && s.deviceId && m();
       }
-    ), P({ start: m, stop: y }), (e, t) => (d(), f("div", {
+    ), P({ start: m, stop: y }), (e, t) => (f(), p("div", {
       class: "rvms-player-wrapper",
-      style: j({ width: $.width, height: $.height, position: "relative", background: "#000", overflow: "hidden", borderRadius: "8px" })
+      style: Q({ width: $.width, height: $.height, position: "relative", background: "#000", overflow: "hidden", borderRadius: "8px" })
     }, [
       i("video", {
         ref_key: "videoEl",
@@ -303,13 +305,13 @@ const X = {
         controls: "",
         style: { width: "100%", height: "100%", "object-fit": "contain", display: "block" }
       }, null, 512),
-      a.value === "idle" ? (d(), f("div", {
+      a.value === "idle" ? (f(), p("div", {
         key: 0,
         class: "rvms-overlay",
         style: { cursor: "pointer" },
         onClick: m
       }, [
-        (d(), f("svg", X, [...t[2] || (t[2] = [
+        (f(), p("svg", Z, [...t[2] || (t[2] = [
           i("circle", {
             cx: "32",
             cy: "32",
@@ -324,28 +326,28 @@ const X = {
           }, null, -1)
         ])])),
         t[3] || (t[3] = i("span", { style: { color: "#94a3b8", "font-size": "0.85rem" } }, "Click to play", -1))
-      ])) : a.value === "connecting" ? (d(), f("div", Z, [...t[4] || (t[4] = [
+      ])) : a.value === "connecting" ? (f(), p("div", ee, [...t[4] || (t[4] = [
         i("span", { style: { color: "#93c5fd", animation: "rvms-pulse 1.5s infinite" } }, "Connecting…", -1)
-      ])])) : a.value === "buffering" ? (d(), f("div", ee, [...t[5] || (t[5] = [
+      ])])) : a.value === "buffering" ? (f(), p("div", te, [...t[5] || (t[5] = [
         i("span", { style: { color: "#93c5fd", animation: "rvms-pulse 1.5s infinite" } }, "Buffering…", -1)
-      ])])) : a.value === "error" ? (d(), f("div", te, [
+      ])])) : a.value === "error" ? (f(), p("div", ne, [
         t[6] || (t[6] = i("span", { style: { color: "#f87171", "font-weight": "600" } }, "Stream error", -1)),
-        g.value ? (d(), f("span", ne, B(g.value), 1)) : S("", !0),
+        g.value ? (f(), p("span", re, B(g.value), 1)) : S("", !0),
         i("button", {
           class: "rvms-btn",
           onClick: m
         }, " Retry ")
-      ])) : a.value === "ended" ? (d(), f("div", re, [
+      ])) : a.value === "ended" ? (f(), p("div", oe, [
         t[7] || (t[7] = i("span", { style: { color: "#94a3b8" } }, "Stream ended", -1)),
         i("button", {
           class: "rvms-btn",
           onClick: m
         }, " Reconnect ")
       ])) : S("", !0),
-      i("div", oe, [
-        a.value !== "idle" ? (d(), f("span", {
+      i("div", ae, [
+        a.value !== "idle" ? (f(), p("span", {
           key: 0,
-          style: j({
+          style: Q({
             padding: "2px 8px",
             borderRadius: "4px",
             fontSize: "10px",
@@ -356,13 +358,13 @@ const X = {
             color: "#fff"
           })
         }, B($.mode === "live" ? "LIVE" : "PLAYBACK"), 5)) : S("", !0),
-        w.value ? (d(), f("span", ae, B(w.value), 1)) : S("", !0),
-        E.value ? (d(), f("span", le, [...t[8] || (t[8] = [
+        w.value ? (f(), p("span", le, B(w.value), 1)) : S("", !0),
+        E.value ? (f(), p("span", se, [...t[8] || (t[8] = [
           i("span", { style: { width: "6px", height: "6px", "border-radius": "50%", background: "#22c55e", display: "inline-block" } }, null, -1),
-          K(" Alarms ", -1)
+          Y(" Alarms ", -1)
         ])])) : S("", !0)
       ]),
-      a.value !== "idle" ? (d(), f("div", se, [
+      a.value !== "idle" ? (f(), p("div", ie, [
         i("button", {
           class: "rvms-btn",
           title: "Stop stream",
@@ -372,60 +374,60 @@ const X = {
           class: "rvms-btn",
           title: `Switch to ${C.value === "main" ? "sub" : "main"} stream`,
           onClick: I
-        }, B(C.value === "main" ? "HD" : "SD"), 9, ie)
+        }, B(C.value === "main" ? "HD" : "SD"), 9, ue)
       ])) : S("", !0),
-      $.showAlarms && L.value.length > 0 ? (d(), f("div", ue, [
-        (d(!0), f(Y, null, G(L.value.slice(0, 5), (r) => (d(), f("div", {
+      $.showAlarms && O.value.length > 0 ? (f(), p("div", ce, [
+        (f(!0), p(G, null, X(O.value.slice(0, 5), (r) => (f(), p("div", {
           key: r.id,
           title: (r.description || r.type) + " — click to view playback",
           style: { display: "flex", "align-items": "center", gap: "8px", padding: "4px 8px", "border-radius": "4px", background: "rgba(0, 0, 0, 0.65)", "font-size": "11px", "backdrop-filter": "blur(4px)", cursor: "pointer", transition: "background 0.15s" },
-          onClick: (p) => v("alarm-click", r),
-          onMouseenter: t[0] || (t[0] = (p) => p.target.style.background = "rgba(51, 65, 85, 0.8)"),
-          onMouseleave: t[1] || (t[1] = (p) => p.target.style.background = "rgba(0, 0, 0, 0.65)")
+          onClick: (d) => v("alarm-click", r),
+          onMouseenter: t[0] || (t[0] = (d) => d.target.style.background = "rgba(51, 65, 85, 0.8)"),
+          onMouseleave: t[1] || (t[1] = (d) => d.target.style.background = "rgba(0, 0, 0, 0.65)")
         }, [
-          r.snapshotUrl ? (d(), f("img", {
+          r.snapshotUrl ? (f(), p("img", {
             key: 0,
-            src: c(r.snapshotUrl),
+            src: u(r.snapshotUrl),
             alt: "snapshot",
             style: { width: "32px", height: "24px", "border-radius": "2px", "object-fit": "cover", background: "#1e293b" },
             loading: "lazy"
-          }, null, 8, de)) : S("", !0),
-          i("div", fe, [
-            i("div", pe, [
-              i("span", ve, B(r.type), 1),
-              r.channel ? (d(), f("span", me, " ch" + B(r.channel), 1)) : S("", !0)
+          }, null, 8, fe)) : S("", !0),
+          i("div", pe, [
+            i("div", ve, [
+              i("span", me, B(r.type), 1),
+              r.channel ? (f(), p("span", ge, " ch" + B(r.channel), 1)) : S("", !0)
             ]),
-            i("div", ge, B(new Date(r.timestamp).toLocaleString()), 1),
+            i("div", ye, B(new Date(r.timestamp).toLocaleString()), 1),
             t[9] || (t[9] = i("div", { style: { color: "#60a5fa", "font-size": "9px", "margin-top": "1px" } }, " Click to view playback ", -1))
           ])
-        ], 40, ce))), 128))
+        ], 40, de))), 128))
       ])) : S("", !0)
     ], 4));
   }
-}), ye = {
+}), he = {
   key: 1,
   style: { position: "absolute", inset: "0", display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", gap: "8px", background: "rgba(0, 0, 0, 0.4)", "z-index": "10" }
-}, he = { style: { color: "#e2e8f0", "font-size": "0.85rem" } }, be = {
+}, be = { style: { color: "#e2e8f0", "font-size": "0.85rem" } }, xe = {
   key: 2,
   style: { position: "absolute", inset: "0", display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", gap: "12px", background: "rgba(0, 0, 0, 0.5)", "z-index": "10" }
-}, xe = { style: { color: "#ef4444", "font-size": "0.85rem", "text-align": "center", padding: "0 16px" } }, ke = {
+}, ke = { style: { color: "#ef4444", "font-size": "0.85rem", "text-align": "center", padding: "0 16px" } }, Se = {
   key: 3,
   style: { position: "absolute", inset: "0", display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", gap: "12px", background: "rgba(0, 0, 0, 0.4)", "z-index": "10" }
-}, Se = { style: { position: "absolute", top: "8px", left: "8px", right: "8px", display: "flex", gap: "6px", "align-items": "center", "flex-wrap": "wrap", "z-index": "11", "pointer-events": "none" } }, we = ["title"], Be = ["title"], $e = {
+}, we = { style: { position: "absolute", top: "8px", left: "8px", right: "8px", display: "flex", gap: "6px", "align-items": "center", "flex-wrap": "wrap", "z-index": "11", "pointer-events": "none" } }, Be = ["title"], $e = ["title"], _e = {
   key: 0,
   class: "rvms-chip",
   style: { background: "rgba(51, 65, 85, 0.8)", color: "#cbd5e1", "font-family": "monospace" }
-}, _e = ["value"], Ce = {
+}, Ce = ["value"], Ie = {
   key: 2,
   class: "rvms-chip",
   style: { background: "rgba(15, 23, 42, 0.85)", color: "#94a3b8", cursor: "default", "pointer-events": "auto" }
-}, Ie = {
+}, Ee = {
   key: 4,
   style: { position: "absolute", bottom: "44px", left: "8px", display: "flex", gap: "6px", "align-items": "center", "z-index": "11", "pointer-events": "none" }
-}, Ee = {
+}, Le = {
   key: 5,
   style: { position: "absolute", bottom: "8px", right: "8px", display: "flex", gap: "6px", "z-index": "11" }
-}, Le = /* @__PURE__ */ N({
+}, Oe = /* @__PURE__ */ F({
   __name: "RvmsVideo",
   props: {
     nvrId: {},
@@ -437,9 +439,9 @@ const X = {
   },
   emits: ["status-change"],
   setup($, { emit: P }) {
-    const x = $, s = P, v = k(null), l = k("idle"), a = k(null), g = k(null), w = k(!1), h = k("live"), C = k(x.initialProfile), I = k("");
+    const x = $, s = P, v = k(null), l = k("idle"), a = k(null), g = k(null), w = k(!1), b = k("live"), C = k(x.initialProfile), I = k("");
     let E = null;
-    function L() {
+    function O() {
       return {
         cancelled: !1,
         ws: null,
@@ -482,14 +484,14 @@ const X = {
           }
       }
     }
-    function D(n) {
+    function j(n) {
       if (!v.value) return;
       if (!("MediaSource" in window)) {
         a.value = "MediaSource Extensions not supported", l.value = "error", s("status-change", "error");
         return;
       }
       l.value = "connecting", a.value = null, g.value = null, s("status-change", "connecting");
-      const o = L();
+      const o = O();
       E = o;
       const m = new MediaSource();
       o.mediaSource = m, v.value.src = URL.createObjectURL(m);
@@ -497,8 +499,8 @@ const X = {
         o.cancelled || o.mediaSource !== m || (l.value = "buffering", s("status-change", "buffering"), A(o));
       };
       o.sourceOpenHandler = y, m.addEventListener("sourceopen", y);
-      const c = new WebSocket(n);
-      c.binaryType = "arraybuffer", o.ws = c, c.onmessage = (e) => {
+      const u = new WebSocket(n);
+      u.binaryType = "arraybuffer", o.ws = u, u.onmessage = (e) => {
         if (o.cancelled) return;
         if (typeof e.data == "string") {
           try {
@@ -516,20 +518,20 @@ const X = {
         o.appendQueue.push(
           t.buffer.slice(t.byteOffset, t.byteOffset + t.byteLength)
         ), H(o);
-      }, c.onerror = () => {
+      }, u.onerror = () => {
         o.cancelled || l.value !== "error" && (a.value = "WebSocket error", l.value = "error", s("status-change", "error"));
-      }, c.onclose = (e) => {
+      }, u.onclose = (e) => {
         o.cancelled || (l.value === "connecting" || l.value === "buffering" ? (a.value = e.reason || `Stream closed (code ${e.code})`, l.value = "error", s("status-change", "error")) : l.value === "playing" && (l.value = "ended", s("status-change", "ended")));
       };
     }
-    function M(n) {
-      const o = (c) => c.toString(16).padStart(2, "0").toUpperCase();
+    function D(n) {
+      const o = (u) => u.toString(16).padStart(2, "0").toUpperCase();
       let m = null, y = null;
-      for (let c = 0; c + 7 < n.length; c++) {
-        const e = String.fromCharCode(n[c], n[c + 1], n[c + 2], n[c + 3]);
+      for (let u = 0; u + 7 < n.length; u++) {
+        const e = String.fromCharCode(n[u], n[u + 1], n[u + 2], n[u + 3]);
         if (e === "avcC") {
-          const t = n[c + 5], r = n[c + 6], p = n[c + 7];
-          t !== void 0 && r !== void 0 && p !== void 0 && (m = `avc1.${o(t)}${o(r)}${o(p)}`);
+          const t = n[u + 5], r = n[u + 6], d = n[u + 7];
+          t !== void 0 && r !== void 0 && d !== void 0 && (m = `avc1.${o(t)}${o(r)}${o(d)}`);
         }
         e === "hvcC" && (m = "hev1.1.6.L93.B0"), e === "mp4a" && (y = "mp4a.40.2");
       }
@@ -539,8 +541,8 @@ const X = {
       if (n.sourceBuffer || !n.mediaSource || n.mediaSource.readyState !== "open") return;
       const o = ["avc1.64001F", "avc1.4D0028", "avc1.42001E", "hev1.1.6.L93.B0"];
       let m = 'video/mp4; codecs="avc1.64001F"';
-      for (const c of n.preBuffer) {
-        const e = M(c);
+      for (const u of n.preBuffer) {
+        const e = D(u);
         if (e) {
           g.value = e, m = `video/mp4; codecs="${e}"`;
           break;
@@ -549,9 +551,9 @@ const X = {
       try {
         n.sourceBuffer = n.mediaSource.addSourceBuffer(m);
       } catch {
-        for (const c of o)
+        for (const u of o)
           try {
-            n.sourceBuffer = n.mediaSource.addSourceBuffer(`video/mp4; codecs="${c}"`);
+            n.sourceBuffer = n.mediaSource.addSourceBuffer(`video/mp4; codecs="${u}"`);
             break;
           } catch {
           }
@@ -560,9 +562,9 @@ const X = {
         a.value = "No compatible video codec", l.value = "error";
         return;
       }
-      for (const c of n.preBuffer)
+      for (const u of n.preBuffer)
         try {
-          n.sourceBuffer.appendBuffer(c);
+          n.sourceBuffer.appendBuffer(u);
         } catch {
         }
       n.preBuffer.length = 0;
@@ -572,27 +574,29 @@ const X = {
       n.updateEndHandler = y, n.sourceBuffer.addEventListener("updateend", y);
     }
     function H(n) {
-      var y;
+      var y, u;
       const o = n.sourceBuffer;
       if (!o || o.updating || n.appendQueue.length === 0) return;
       const m = n.appendQueue.shift();
       try {
         o.appendBuffer(m), l.value !== "playing" && (l.value = "playing", s("status-change", "playing"));
-      } catch (c) {
-        const e = c;
-        if (e.name === "QuotaExceededError") {
-          const t = ((y = v.value) == null ? void 0 : y.currentTime) ?? 0, r = Math.max(0, t - 5);
+      } catch (e) {
+        const t = e;
+        if (n.cancelled || (y = t.message) != null && y.includes("removed from the parent"))
+          return;
+        if (t.name === "QuotaExceededError") {
+          const r = ((u = v.value) == null ? void 0 : u.currentTime) ?? 0, d = Math.max(0, r - 5);
           try {
-            o.buffered.length > 0 && o.buffered.start(0) < r && o.remove(o.buffered.start(0), r);
+            o.buffered.length > 0 && o.buffered.start(0) < d && o.remove(o.buffered.start(0), d);
           } catch {
           }
           n.appendQueue.unshift(m);
         } else
-          a.value = `appendBuffer failed: ${e.message}`, l.value = "error", U();
+          a.value = `appendBuffer failed: ${t.message}`, l.value = "error", U();
       }
     }
-    async function O() {
-      if (h.value === "playback" && !I.value && (I.value = (/* @__PURE__ */ new Date()).toISOString()), U(), w.value = !0, !x.nvrId || !x.channelId) {
+    async function z() {
+      if (b.value === "playback" && !I.value && (I.value = (/* @__PURE__ */ new Date()).toISOString()), U(), w.value = !0, !x.nvrId || !x.channelId) {
         a.value = "nvrId and channelId are required", l.value = "error", w.value = !1, s("status-change", "error");
         return;
       }
@@ -601,46 +605,46 @@ const X = {
         const n = new URLSearchParams({
           nvrId: x.nvrId,
           deviceId: x.channelId,
-          mode: h.value,
+          mode: b.value,
           profile: C.value
         });
-        if (h.value === "playback") {
+        if (b.value === "playback") {
           let y = I.value;
           y || (y = (/* @__PURE__ */ new Date()).toISOString(), I.value = y);
-          const c = new Date(y).getTime();
-          n.set("from", new Date(c - 3e4).toISOString()), n.set("to", new Date(c + 3e4).toISOString());
+          const u = new Date(y).getTime();
+          n.set("from", new Date(u - 3e4).toISOString()), n.set("to", new Date(u + 3e4).toISOString());
         }
         const o = location.protocol === "https:" ? "wss:" : "ws:";
         x.token && n.set("token", x.token);
         const m = `${o}//${location.host}/ws/stream?${n.toString()}`;
-        D(m);
+        j(m);
       } catch (n) {
         a.value = n.message, l.value = "error", w.value = !1, s("status-change", "error");
       }
     }
-    function z() {
+    function R() {
       w.value = !1, U(), l.value = "idle", a.value = null, s("status-change", "idle");
     }
     function W() {
-      h.value = h.value === "live" ? "playback" : "live", w.value && O();
+      b.value = b.value === "live" ? "playback" : "live", w.value && z();
     }
     function V() {
-      C.value = C.value === "main" ? "sub" : "main", w.value && O();
+      C.value = C.value === "main" ? "sub" : "main", w.value && z();
     }
-    function T(n) {
+    function M(n) {
       const o = n.target;
       o.value && (I.value = new Date(o.value).toISOString());
     }
-    return F(() => {
-      z();
-    }), J(
+    return J(() => {
+      R();
+    }), q(
       () => [x.nvrId, x.channelId].join("|"),
       () => {
-        w.value && x.nvrId && x.channelId && O();
+        w.value && x.nvrId && x.channelId && z();
       }
-    ), (n, o) => (d(), f("div", {
+    ), (n, o) => (f(), p("div", {
       class: "rvms-video",
-      style: j({
+      style: Q({
         width: $.width,
         height: $.height,
         position: "relative",
@@ -656,10 +660,10 @@ const X = {
         playsinline: "",
         style: { width: "100%", height: "100%", display: "block", "object-fit": "contain" }
       }, null, 512),
-      l.value === "idle" ? (d(), f("div", {
+      l.value === "idle" ? (f(), p("div", {
         key: 0,
         style: { position: "absolute", inset: "0", display: "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", gap: "12px", background: "rgba(0, 0, 0, 0.5)", cursor: "pointer", "z-index": "10" },
-        onClick: O
+        onClick: z
       }, [...o[0] || (o[0] = [
         i("svg", {
           width: "64",
@@ -681,53 +685,53 @@ const X = {
           })
         ], -1),
         i("span", { style: { color: "#e2e8f0", "font-size": "0.9rem", "font-weight": "600" } }, "Click to play", -1)
-      ])])) : l.value === "connecting" || l.value === "buffering" ? (d(), f("div", ye, [
+      ])])) : l.value === "connecting" || l.value === "buffering" ? (f(), p("div", he, [
         o[1] || (o[1] = i("div", { class: "rvms-spinner" }, null, -1)),
-        i("span", he, B(l.value === "connecting" ? "Connecting…" : "Buffering…"), 1)
-      ])) : l.value === "error" ? (d(), f("div", be, [
-        i("span", xe, B(a.value || "Stream error"), 1),
+        i("span", be, B(l.value === "connecting" ? "Connecting…" : "Buffering…"), 1)
+      ])) : l.value === "error" ? (f(), p("div", xe, [
+        i("span", ke, B(a.value || "Stream error"), 1),
         i("button", {
           class: "rvms-btn",
-          onClick: O
+          onClick: z
         }, " Retry ")
-      ])) : l.value === "ended" ? (d(), f("div", ke, [
+      ])) : l.value === "ended" ? (f(), p("div", Se, [
         o[2] || (o[2] = i("span", { style: { color: "#94a3b8" } }, "Stream ended", -1)),
         i("button", {
           class: "rvms-btn",
-          onClick: O
+          onClick: z
         }, "Reconnect")
       ])) : S("", !0),
-      i("div", Se, [
+      i("div", we, [
         i("button", {
           class: "rvms-chip",
-          title: `Switch to ${h.value === "live" ? "playback" : "live"} mode`,
+          title: `Switch to ${b.value === "live" ? "playback" : "live"} mode`,
           onClick: W,
-          style: j({
-            background: h.value === "live" ? "#dc2626" : "#2563eb",
+          style: Q({
+            background: b.value === "live" ? "#dc2626" : "#2563eb",
             pointerEvents: "auto"
           })
-        }, B(h.value === "live" ? "🔴 LIVE" : "🔵 PLAYBACK"), 13, we),
+        }, B(b.value === "live" ? "🔴 LIVE" : "🔵 PLAYBACK"), 13, Be),
         i("button", {
           class: "rvms-chip",
           title: `Switch to ${C.value === "main" ? "sub" : "main"} stream`,
           onClick: V,
           style: { pointerEvents: "auto" }
-        }, B(C.value === "main" ? "HD" : "SD"), 9, Be),
-        g.value ? (d(), f("span", $e, B(g.value), 1)) : S("", !0),
-        h.value === "playback" ? (d(), f("input", {
+        }, B(C.value === "main" ? "HD" : "SD"), 9, $e),
+        g.value ? (f(), p("span", _e, B(g.value), 1)) : S("", !0),
+        b.value === "playback" ? (f(), p("input", {
           key: 1,
           type: "datetime-local",
           value: I.value ? I.value.slice(0, 16) : "",
-          onInput: T,
+          onInput: M,
           class: "rvms-datetime",
           title: "Playback timestamp",
           style: { "pointer-events": "auto" }
-        }, null, 40, _e)) : S("", !0),
-        h.value === "playback" && I.value ? (d(), f("span", Ce, B(new Date(I.value).toLocaleString()), 1)) : S("", !0)
+        }, null, 40, Ce)) : S("", !0),
+        b.value === "playback" && I.value ? (f(), p("span", Ie, B(new Date(I.value).toLocaleString()), 1)) : S("", !0)
       ]),
-      l.value !== "idle" ? (d(), f("div", Ie, [
+      l.value !== "idle" ? (f(), p("div", Ee, [
         i("span", {
-          style: j({
+          style: Q({
             padding: "2px 8px",
             borderRadius: "4px",
             fontSize: "10px",
@@ -738,28 +742,28 @@ const X = {
           })
         }, B(l.value), 5)
       ])) : S("", !0),
-      l.value !== "idle" ? (d(), f("div", Ee, [
-        w.value ? (d(), f("button", {
+      l.value !== "idle" ? (f(), p("div", Le, [
+        w.value ? (f(), p("button", {
           key: 0,
           class: "rvms-btn",
           title: "Stop stream",
-          onClick: z
-        }, " ⏹ Stop ")) : (d(), f("button", {
+          onClick: R
+        }, " ⏹ Stop ")) : (f(), p("button", {
           key: 1,
           class: "rvms-btn",
           title: "Start stream",
-          onClick: O
+          onClick: z
         }, " ▶ Play "))
       ])) : S("", !0)
     ], 4));
   }
-}), Oe = ($, P) => {
+}), ze = ($, P) => {
   const x = $.__vccOpts || $;
   for (const [s, v] of P)
     x[s] = v;
   return x;
-}, Ue = /* @__PURE__ */ Oe(Le, [["__scopeId", "data-v-bfc7094e"]]);
+}, He = /* @__PURE__ */ ze(Oe, [["__scopeId", "data-v-650bbebf"]]);
 export {
-  Ue as RvmsVideo,
-  Re as RvmsVideoPlayer
+  He as RvmsVideo,
+  Ue as RvmsVideoPlayer
 };

package/dist/lib/style.css

@@ -1 +1 @@
-@keyframes rvms-pulse{0%,to{opacity:1}50%{opacity:.4}}.rvms-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#00000080;font-size:14px}.rvms-btn{padding:4px 12px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#1e293bcc;color:#e2e8f0;font-size:11px;font-weight:600;cursor:pointer;pointer-events:auto;transition:background .15s}.rvms-btn:hover{background:#334155e6}@keyframes rvms-spin-bfc7094e{to{transform:rotate(360deg)}}.rvms-spinner[data-v-bfc7094e]{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#60a5fa;border-radius:50%;animation:rvms-spin-bfc7094e .8s linear infinite}.rvms-btn[data-v-bfc7094e]{padding:6px 14px;border:none;border-radius:6px;background:#0f172ad9;color:#e2e8f0;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .15s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.rvms-btn[data-v-bfc7094e]:hover{background:#1e293bf2}.rvms-chip[data-v-bfc7094e]{padding:2px 8px;border:none;border-radius:4px;font-size:10px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .15s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:uppercase;letter-spacing:.05em}.rvms-chip[data-v-bfc7094e]:hover{opacity:.85}.rvms-datetime[data-v-bfc7094e]{padding:2px 6px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#0f172ad9;color:#e2e8f0;font-size:11px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.rvms-datetime[data-v-bfc7094e]:focus{outline:none;border-color:#60a5fa}
+@keyframes rvms-pulse{0%,to{opacity:1}50%{opacity:.4}}.rvms-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#00000080;font-size:14px}.rvms-btn{padding:4px 12px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#1e293bcc;color:#e2e8f0;font-size:11px;font-weight:600;cursor:pointer;pointer-events:auto;transition:background .15s}.rvms-btn:hover{background:#334155e6}@keyframes rvms-spin-650bbebf{to{transform:rotate(360deg)}}.rvms-spinner[data-v-650bbebf]{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#60a5fa;border-radius:50%;animation:rvms-spin-650bbebf .8s linear infinite}.rvms-btn[data-v-650bbebf]{padding:6px 14px;border:none;border-radius:6px;background:#0f172ad9;color:#e2e8f0;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .15s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.rvms-btn[data-v-650bbebf]:hover{background:#1e293bf2}.rvms-chip[data-v-650bbebf]{padding:2px 8px;border:none;border-radius:4px;font-size:10px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .15s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:uppercase;letter-spacing:.05em}.rvms-chip[data-v-650bbebf]:hover{opacity:.85}.rvms-datetime[data-v-650bbebf]{padding:2px 6px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#0f172ad9;color:#e2e8f0;font-size:11px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.rvms-datetime[data-v-650bbebf]:focus{outline:none;border-color:#60a5fa}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rvms-vue",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "description": "RVMS (Video-MS) Vue 3 components — RvmsVideoPlayer, RvmsVideo",
   "main": "./dist/lib/index.js",

package/src/components/RvmsVideo.vue

@@ -312,6 +312,10 @@ function flushQueue(s: Session): void {
     }
   } catch (err) {
     const e = err as DOMException;
+    // SourceBuffer was removed during teardown — stream already ended, ignore.
+    if (s.cancelled || e.message?.includes('removed from the parent')) {
+      return;
+    }
     if (e.name === 'QuotaExceededError') {
       const ct = videoEl.value?.currentTime ?? 0;
       const cutoff = Math.max(0, ct - 5);

package/src/components/RvmsVideoPlayer.vue

@@ -456,6 +456,10 @@ function flushQueue(session: Session): void {
     }
   } catch (err) {
     const e = err as DOMException;
+    // SourceBuffer was removed during teardown — stream already ended, ignore.
+    if (session.cancelled || e.message?.includes('removed from the parent')) {
+      return;
+    }
     if (e.name === 'QuotaExceededError') {
       const ct = videoEl.value?.currentTime ?? 0;
       const cutoff = Math.max(0, ct - 5);