rvms-vue 0.1.4

package/dist/lib/rvms-vue.js

@@ -0,0 +1,757 @@
+import { defineComponent as N, ref as x, onMounted as q, onBeforeUnmount as F, watch as J, openBlock as d, createElementBlock as f, normalizeStyle as j, createElementVNode as s, toDisplayString as B, createCommentVNode as S, createTextVNode as K, Fragment as Y, renderList as G } from "vue";
+const X = {
+  width: "64",
+  height: "64",
+  viewBox: "0 0 64 64",
+  fill: "none",
+  style: { opacity: "0.8" }
+}, Z = {
+  key: 1,
+  class: "rvms-overlay"
+}, ee = {
+  key: 2,
+  class: "rvms-overlay"
+}, te = {
+  key: 3,
+  class: "rvms-overlay"
+}, ne = {
+  key: 0,
+  style: { color: "#fca5a5", "font-size": "0.8em", "text-align": "center", padding: "0 1em", "max-width": "80%" }
+}, re = {
+  key: 4,
+  class: "rvms-overlay"
+}, oe = { style: { position: "absolute", top: "8px", left: "8px", display: "flex", gap: "6px", "align-items": "center", "pointer-events": "none" } }, ae = {
+  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 = {
+  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 = {
+  key: 5,
+  style: { position: "absolute", bottom: "12px", right: "12px", display: "flex", gap: "6px" }
+}, ie = ["title"], ue = {
+  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 = {
+  key: 0,
+  style: { color: "#94a3b8" }
+}, ge = { style: { color: "#94a3b8", "font-size": "10px", "white-space": "nowrap", overflow: "hidden", "text-overflow": "ellipsis" } }, Re = /* @__PURE__ */ N({
+  __name: "RvmsVideoPlayer",
+  props: {
+    nvrId: {},
+    deviceId: {},
+    initialProfile: { default: "main" },
+    mode: { default: "live" },
+    from: {},
+    to: {},
+    showAlarms: { type: Boolean, default: !0 },
+    width: { default: "100%" },
+    height: { default: "auto" }
+  },
+  emits: ["alarm", "stream-status", "alarm-click"],
+  setup($, { expose: U, emit: k }) {
+    const u = $, v = k, l = x(null), a = x("idle"), g = x(null), w = x(null), h = x(!1), C = x(u.initialProfile);
+    function I() {
+      C.value = C.value === "main" ? "sub" : "main", h.value && m();
+    }
+    const E = x(null), L = x([]);
+    function H(e) {
+      return `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}${e}`;
+    }
+    function D() {
+      M();
+      const e = new WebSocket(H("/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)));
+              break;
+            case "alarm":
+              r.event && (L.value.unshift(r.event), L.value.length > 50 && (L.value.length = 50), v("alarm", r.event));
+              break;
+            default:
+              break;
+          }
+        } catch {
+        }
+      }, e.onclose = () => {
+        E.value = null, setTimeout(D, 3e3);
+      }, e.onerror = () => {
+      };
+    }
+    function M() {
+      if (E.value) {
+        try {
+          E.value.onclose = null, E.value.close();
+        } catch {
+        }
+        E.value = null;
+      }
+    }
+    async function A() {
+      try {
+        const e = await fetch("/api/alarms/recent");
+        if (e.ok) {
+          const t = await e.json();
+          L.value = t;
+        }
+      } catch {
+      }
+    }
+    let P = null;
+    function O() {
+      return {
+        cancelled: !1,
+        ws: null,
+        mediaSource: null,
+        sourceBuffer: null,
+        preBuffer: [],
+        appendQueue: [],
+        updateEndHandler: null,
+        sourceOpenHandler: null
+      };
+    }
+    function z() {
+      var t;
+      const e = P;
+      if (e) {
+        e.cancelled = !0;
+        try {
+          (t = e.ws) == null || t.close();
+        } catch {
+        }
+        if (e.ws = null, e.sourceBuffer && e.updateEndHandler)
+          try {
+            e.sourceBuffer.removeEventListener("updateend", e.updateEndHandler);
+          } catch {
+          }
+        if (e.mediaSource && e.sourceOpenHandler)
+          try {
+            e.mediaSource.removeEventListener("sourceopen", e.sourceOpenHandler);
+          } catch {
+          }
+        if (e.sourceBuffer && e.mediaSource && e.mediaSource.readyState === "open" && !e.sourceBuffer.updating)
+          try {
+            e.mediaSource.endOfStream();
+          } catch {
+          }
+        if (e.sourceBuffer = null, e.mediaSource = null, e.appendQueue.length = 0, e.preBuffer.length = 0, P = null, l.value)
+          try {
+            l.value.pause(), l.value.removeAttribute("src"), l.value.load();
+          } catch {
+          }
+      }
+    }
+    function W(e) {
+      if (!l.value) return;
+      if (!("MediaSource" in window)) {
+        g.value = "MediaSource Extensions not supported", a.value = "error", v("stream-status", "error");
+        return;
+      }
+      a.value = "connecting", g.value = null, w.value = null, v("stream-status", "connecting");
+      const t = O();
+      P = 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));
+      };
+      t.sourceOpenHandler = p, r.addEventListener("sourceopen", p);
+      const i = new WebSocket(e);
+      i.binaryType = "arraybuffer", t.ws = i, i.onmessage = (b) => {
+        if (t.cancelled) return;
+        if (typeof b.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());
+          } catch {
+          }
+          return;
+        }
+        const _ = new Uint8Array(b.data);
+        if (!t.sourceBuffer) {
+          t.preBuffer.push(_), T(t);
+          return;
+        }
+        t.appendQueue.push(
+          _.buffer.slice(_.byteOffset, _.byteOffset + _.byteLength)
+        ), o(t);
+      }, i.onerror = () => {
+        t.cancelled || a.value !== "error" && (g.value = "WebSocket error", a.value = "error", v("stream-status", "error"));
+      }, i.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")));
+      };
+    }
+    function V(e) {
+      const t = (i) => i.toString(16).padStart(2, "0").toUpperCase();
+      let r = null, p = null;
+      for (let i = 0; i + 7 < e.length; i++) {
+        const b = String.fromCharCode(e[i], e[i + 1], e[i + 2], e[i + 3]);
+        if (b === "avcC") {
+          const _ = e[i + 5], R = e[i + 6], Q = e[i + 7];
+          _ !== void 0 && R !== void 0 && Q !== void 0 && (r = `avc1.${t(_)}${t(R)}${t(Q)}`);
+        }
+        b === "hvcC" && (r = "hev1.1.6.L93.B0"), b === "mp4a" && (p = "mp4a.40.2");
+      }
+      return r ? p ? `${r}, ${p}` : r : null;
+    }
+    function T(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();
+        return;
+      }
+      let i;
+      try {
+        i = e.mediaSource.addSourceBuffer(p);
+      } catch (_) {
+        g.value = `addSourceBuffer failed: ${_.message}`, a.value = "error", z();
+        return;
+      }
+      i.mode = "segments";
+      const b = () => {
+        e.cancelled || o(e);
+      };
+      e.updateEndHandler = b, i.addEventListener("updateend", b), i.addEventListener("error", () => {
+        e.cancelled || (g.value = "SourceBuffer error", a.value = "error");
+      }), e.sourceBuffer = i, 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((i, b) => i + b.byteLength, 0), r = new Uint8Array(t);
+      let p = 0;
+      for (const i of e)
+        r.set(i, p), p += i.byteLength;
+      return r;
+    }
+    function o(e) {
+      var i;
+      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)
+        try {
+          t.appendBuffer(p), a.value !== "playing" && (a.value = "playing", v("stream-status", "playing"));
+        } catch (b) {
+          const _ = b;
+          if (_.name === "QuotaExceededError") {
+            const R = ((i = l.value) == null ? void 0 : i.currentTime) ?? 0, Q = Math.max(0, R - 5);
+            try {
+              t.buffered.length > 0 && t.buffered.start(0) < Q && t.remove(t.buffered.start(0), Q);
+            } catch {
+            }
+            e.appendQueue.unshift(p);
+          } else
+            g.value = `appendBuffer failed: ${_.message}`, a.value = "error", z();
+        }
+    }
+    async function m() {
+      if (z(), h.value = !0, !u.nvrId || !u.deviceId) {
+        g.value = "nvrId and deviceId are required", a.value = "error", h.value = !1, v("stream-status", "error");
+        return;
+      }
+      a.value = "connecting", g.value = null, w.value = null, v("stream-status", "connecting");
+      try {
+        const e = new URLSearchParams({
+          nvrId: u.nvrId,
+          deviceId: u.deviceId,
+          mode: u.mode,
+          profile: C.value
+        });
+        u.from && e.set("from", u.from), u.to && e.set("to", u.to);
+        const r = `${location.protocol === "https:" ? "wss:" : "ws:"}//${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);
+      }
+    }
+    function y() {
+      h.value = !1, z(), a.value = "idle", g.value = null, v("stream-status", "idle");
+    }
+    function c(e) {
+      return e || "";
+    }
+    return q(() => {
+      D(), A();
+    }), F(() => {
+      M(), y();
+    }), J(
+      () => [u.nvrId, u.deviceId, u.mode].join("|"),
+      () => {
+        h.value && u.nvrId && u.deviceId && m();
+      }
+    ), U({ start: m, stop: y }), (e, t) => (d(), f("div", {
+      class: "rvms-player-wrapper",
+      style: j({ width: $.width, height: $.height, position: "relative", background: "#000", overflow: "hidden", borderRadius: "8px" })
+    }, [
+      s("video", {
+        ref_key: "videoEl",
+        ref: l,
+        muted: "",
+        playsinline: "",
+        controls: "",
+        style: { width: "100%", height: "100%", "object-fit": "contain", display: "block" }
+      }, null, 512),
+      a.value === "idle" ? (d(), f("div", {
+        key: 0,
+        class: "rvms-overlay",
+        style: { cursor: "pointer" },
+        onClick: m
+      }, [
+        (d(), f("svg", X, [...t[2] || (t[2] = [
+          s("circle", {
+            cx: "32",
+            cy: "32",
+            r: "28",
+            stroke: "rgba(255,255,255,0.7)",
+            "stroke-width": "2",
+            fill: "rgba(0,0,0,0.3)"
+          }, null, -1),
+          s("polygon", {
+            points: "26,20 26,44 46,32",
+            fill: "rgba(255,255,255,0.85)"
+          }, null, -1)
+        ])])),
+        t[3] || (t[3] = s("span", { style: { color: "#94a3b8", "font-size": "0.85rem" } }, "Click to play", -1))
+      ])) : a.value === "connecting" ? (d(), f("div", Z, [...t[4] || (t[4] = [
+        s("span", { style: { color: "#93c5fd", animation: "rvms-pulse 1.5s infinite" } }, "Connecting…", -1)
+      ])])) : a.value === "buffering" ? (d(), f("div", ee, [...t[5] || (t[5] = [
+        s("span", { style: { color: "#93c5fd", animation: "rvms-pulse 1.5s infinite" } }, "Buffering…", -1)
+      ])])) : a.value === "error" ? (d(), f("div", te, [
+        t[6] || (t[6] = s("span", { style: { color: "#f87171", "font-weight": "600" } }, "Stream error", -1)),
+        g.value ? (d(), f("span", ne, B(g.value), 1)) : S("", !0),
+        s("button", {
+          class: "rvms-btn",
+          onClick: m
+        }, " Retry ")
+      ])) : a.value === "ended" ? (d(), f("div", re, [
+        t[7] || (t[7] = s("span", { style: { color: "#94a3b8" } }, "Stream ended", -1)),
+        s("button", {
+          class: "rvms-btn",
+          onClick: m
+        }, " Reconnect ")
+      ])) : S("", !0),
+      s("div", oe, [
+        a.value !== "idle" ? (d(), f("span", {
+          key: 0,
+          style: j({
+            padding: "2px 8px",
+            borderRadius: "4px",
+            fontSize: "10px",
+            fontWeight: 700,
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+            background: $.mode === "live" && a.value === "playing" ? "#dc2626" : "#334155",
+            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] = [
+          s("span", { style: { width: "6px", height: "6px", "border-radius": "50%", background: "#22c55e", display: "inline-block" } }, null, -1),
+          K(" Alarms ", -1)
+        ])])) : S("", !0)
+      ]),
+      a.value !== "idle" ? (d(), f("div", se, [
+        s("button", {
+          class: "rvms-btn",
+          title: "Stop stream",
+          onClick: y
+        }, " ⏹ Stop "),
+        s("button", {
+          class: "rvms-btn",
+          title: `Switch to ${C.value === "main" ? "sub" : "main"} stream`,
+          onClick: I
+        }, B(C.value === "main" ? "HD" : "SD"), 9, ie)
+      ])) : 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", {
+          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)")
+        }, [
+          r.snapshotUrl ? (d(), f("img", {
+            key: 0,
+            src: c(r.snapshotUrl),
+            alt: "snapshot",
+            style: { width: "32px", height: "24px", "border-radius": "2px", "object-fit": "cover", background: "#1e293b" },
+            loading: "lazy"
+          }, null, 8, de)) : S("", !0),
+          s("div", fe, [
+            s("div", pe, [
+              s("span", ve, B(r.type), 1),
+              r.channel ? (d(), f("span", me, " ch" + B(r.channel), 1)) : S("", !0)
+            ]),
+            s("div", ge, B(new Date(r.timestamp).toLocaleString()), 1),
+            t[9] || (t[9] = s("div", { style: { color: "#60a5fa", "font-size": "9px", "margin-top": "1px" } }, " Click to view playback ", -1))
+          ])
+        ], 40, ce))), 128))
+      ])) : S("", !0)
+    ], 4));
+  }
+}), ye = {
+  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 = {
+  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" } }, 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" }
+}, ke = { 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 = {
+  key: 0,
+  class: "rvms-chip",
+  style: { background: "rgba(51, 65, 85, 0.8)", color: "#cbd5e1", "font-family": "monospace" }
+}, _e = ["value"], Ce = {
+  key: 2,
+  class: "rvms-chip",
+  style: { background: "rgba(15, 23, 42, 0.85)", color: "#94a3b8", cursor: "default", "pointer-events": "auto" }
+}, Ie = {
+  key: 4,
+  style: { position: "absolute", bottom: "44px", left: "8px", display: "flex", gap: "6px", "align-items": "center", "z-index": "11", "pointer-events": "none" }
+}, Ee = {
+  key: 5,
+  style: { position: "absolute", bottom: "8px", right: "8px", display: "flex", gap: "6px", "z-index": "11" }
+}, Le = /* @__PURE__ */ N({
+  __name: "RvmsVideo",
+  props: {
+    nvrId: {},
+    channelId: {},
+    initialProfile: { default: "main" },
+    width: { default: "100%" },
+    height: { default: "auto" }
+  },
+  emits: ["status-change"],
+  setup($, { emit: U }) {
+    const k = $, u = U, v = x(null), l = x("idle"), a = x(null), g = x(null), w = x(!1), h = x("live"), C = x(k.initialProfile), I = x("");
+    let E = null;
+    function L() {
+      return {
+        cancelled: !1,
+        ws: null,
+        mediaSource: null,
+        sourceBuffer: null,
+        preBuffer: [],
+        appendQueue: [],
+        updateEndHandler: null,
+        sourceOpenHandler: null
+      };
+    }
+    function H() {
+      var o;
+      const n = E;
+      if (n) {
+        n.cancelled = !0;
+        try {
+          (o = n.ws) == null || o.close();
+        } catch {
+        }
+        if (n.ws = null, n.sourceBuffer && n.updateEndHandler)
+          try {
+            n.sourceBuffer.removeEventListener("updateend", n.updateEndHandler);
+          } catch {
+          }
+        if (n.mediaSource && n.sourceOpenHandler)
+          try {
+            n.mediaSource.removeEventListener("sourceopen", n.sourceOpenHandler);
+          } catch {
+          }
+        if (n.sourceBuffer && n.mediaSource && n.mediaSource.readyState === "open" && !n.sourceBuffer.updating)
+          try {
+            n.mediaSource.endOfStream();
+          } catch {
+          }
+        if (n.sourceBuffer = null, n.mediaSource = null, n.appendQueue.length = 0, n.preBuffer.length = 0, E = null, v.value)
+          try {
+            v.value.pause(), v.value.removeAttribute("src"), v.value.load();
+          } catch {
+          }
+      }
+    }
+    function D(n) {
+      if (!v.value) return;
+      if (!("MediaSource" in window)) {
+        a.value = "MediaSource Extensions not supported", l.value = "error", u("status-change", "error");
+        return;
+      }
+      l.value = "connecting", a.value = null, g.value = null, u("status-change", "connecting");
+      const o = L();
+      E = o;
+      const m = new MediaSource();
+      o.mediaSource = m, v.value.src = URL.createObjectURL(m);
+      const y = () => {
+        o.cancelled || o.mediaSource !== m || (l.value = "buffering", u("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) => {
+        if (o.cancelled) return;
+        if (typeof e.data == "string") {
+          try {
+            const r = JSON.parse(e.data);
+            r.type === "error" && r.message && (a.value = r.message, l.value = "error", u("status-change", "error"), H());
+          } catch {
+          }
+          return;
+        }
+        const t = new Uint8Array(e.data);
+        if (!o.sourceBuffer) {
+          o.preBuffer.push(t), A(o);
+          return;
+        }
+        o.appendQueue.push(
+          t.buffer.slice(t.byteOffset, t.byteOffset + t.byteLength)
+        ), P(o);
+      }, c.onerror = () => {
+        o.cancelled || l.value !== "error" && (a.value = "WebSocket error", l.value = "error", u("status-change", "error"));
+      }, c.onclose = (e) => {
+        o.cancelled || (l.value === "connecting" || l.value === "buffering" ? (a.value = e.reason || `Stream closed (code ${e.code})`, l.value = "error", u("status-change", "error")) : l.value === "playing" && (l.value = "ended", u("status-change", "ended")));
+      };
+    }
+    function M(n) {
+      const o = (c) => c.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]);
+        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)}`);
+        }
+        e === "hvcC" && (m = "hev1.1.6.L93.B0"), e === "mp4a" && (y = "mp4a.40.2");
+      }
+      return m ? y ? `${m}, ${y}` : m : null;
+    }
+    function A(n) {
+      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);
+        if (e) {
+          g.value = e, m = `video/mp4; codecs="${e}"`;
+          break;
+        }
+      }
+      try {
+        n.sourceBuffer = n.mediaSource.addSourceBuffer(m);
+      } catch {
+        for (const c of o)
+          try {
+            n.sourceBuffer = n.mediaSource.addSourceBuffer(`video/mp4; codecs="${c}"`);
+            break;
+          } catch {
+          }
+      }
+      if (!n.sourceBuffer) {
+        a.value = "No compatible video codec", l.value = "error";
+        return;
+      }
+      for (const c of n.preBuffer)
+        try {
+          n.sourceBuffer.appendBuffer(c);
+        } catch {
+        }
+      n.preBuffer.length = 0;
+      const y = () => {
+        P(n);
+      };
+      n.updateEndHandler = y, n.sourceBuffer.addEventListener("updateend", y);
+    }
+    function P(n) {
+      var y;
+      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", u("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);
+          try {
+            o.buffered.length > 0 && o.buffered.start(0) < r && o.remove(o.buffered.start(0), r);
+          } catch {
+          }
+          n.appendQueue.unshift(m);
+        } else
+          a.value = `appendBuffer failed: ${e.message}`, l.value = "error", H();
+      }
+    }
+    async function O() {
+      if (h.value === "playback" && !I.value && (I.value = (/* @__PURE__ */ new Date()).toISOString()), H(), w.value = !0, !k.nvrId || !k.channelId) {
+        a.value = "nvrId and channelId are required", l.value = "error", w.value = !1, u("status-change", "error");
+        return;
+      }
+      l.value = "connecting", a.value = null, g.value = null, u("status-change", "connecting");
+      try {
+        const n = new URLSearchParams({
+          nvrId: k.nvrId,
+          deviceId: k.channelId,
+          mode: h.value,
+          profile: C.value
+        });
+        if (h.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 m = `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}/ws/stream?${n.toString()}`;
+        D(m);
+      } catch (n) {
+        a.value = n.message, l.value = "error", w.value = !1, u("status-change", "error");
+      }
+    }
+    function z() {
+      w.value = !1, H(), l.value = "idle", a.value = null, u("status-change", "idle");
+    }
+    function W() {
+      h.value = h.value === "live" ? "playback" : "live", w.value && O();
+    }
+    function V() {
+      C.value = C.value === "main" ? "sub" : "main", w.value && O();
+    }
+    function T(n) {
+      const o = n.target;
+      o.value && (I.value = new Date(o.value).toISOString());
+    }
+    return F(() => {
+      z();
+    }), J(
+      () => [k.nvrId, k.channelId].join("|"),
+      () => {
+        w.value && k.nvrId && k.channelId && O();
+      }
+    ), (n, o) => (d(), f("div", {
+      class: "rvms-video",
+      style: j({
+        width: $.width,
+        height: $.height,
+        position: "relative",
+        background: "#000",
+        overflow: "hidden",
+        borderRadius: "8px"
+      })
+    }, [
+      s("video", {
+        ref_key: "videoEl",
+        ref: v,
+        muted: "",
+        playsinline: "",
+        style: { width: "100%", height: "100%", display: "block", "object-fit": "contain" }
+      }, null, 512),
+      l.value === "idle" ? (d(), f("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
+      }, [...o[0] || (o[0] = [
+        s("svg", {
+          width: "64",
+          height: "64",
+          viewBox: "0 0 64 64",
+          fill: "none"
+        }, [
+          s("circle", {
+            cx: "32",
+            cy: "32",
+            r: "30",
+            stroke: "rgba(255,255,255,0.8)",
+            "stroke-width": "3",
+            fill: "rgba(255,255,255,0.15)"
+          }),
+          s("polygon", {
+            points: "26,20 26,44 46,32",
+            fill: "rgba(255,255,255,0.9)"
+          })
+        ], -1),
+        s("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, [
+        o[1] || (o[1] = s("div", { class: "rvms-spinner" }, null, -1)),
+        s("span", he, B(l.value === "connecting" ? "Connecting…" : "Buffering…"), 1)
+      ])) : l.value === "error" ? (d(), f("div", be, [
+        s("span", xe, B(a.value || "Stream error"), 1),
+        s("button", {
+          class: "rvms-btn",
+          onClick: O
+        }, " Retry ")
+      ])) : l.value === "ended" ? (d(), f("div", Se, [
+        o[2] || (o[2] = s("span", { style: { color: "#94a3b8" } }, "Stream ended", -1)),
+        s("button", {
+          class: "rvms-btn",
+          onClick: O
+        }, "Reconnect")
+      ])) : S("", !0),
+      s("div", ke, [
+        s("button", {
+          class: "rvms-chip",
+          title: `Switch to ${h.value === "live" ? "playback" : "live"} mode`,
+          onClick: W,
+          style: j({
+            background: h.value === "live" ? "#dc2626" : "#2563eb",
+            pointerEvents: "auto"
+          })
+        }, B(h.value === "live" ? "🔴 LIVE" : "🔵 PLAYBACK"), 13, we),
+        s("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", {
+          key: 1,
+          type: "datetime-local",
+          value: I.value ? I.value.slice(0, 16) : "",
+          onInput: T,
+          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)
+      ]),
+      l.value !== "idle" ? (d(), f("div", Ie, [
+        s("span", {
+          style: j({
+            padding: "2px 8px",
+            borderRadius: "4px",
+            fontSize: "10px",
+            fontWeight: 700,
+            textTransform: "uppercase",
+            background: l.value === "playing" ? "rgba(34, 197, 94, 0.8)" : "rgba(100, 116, 139, 0.6)",
+            color: l.value === "playing" ? "#052e16" : "#e2e8f0"
+          })
+        }, B(l.value), 5)
+      ])) : S("", !0),
+      l.value !== "idle" ? (d(), f("div", Ee, [
+        w.value ? (d(), f("button", {
+          key: 0,
+          class: "rvms-btn",
+          title: "Stop stream",
+          onClick: z
+        }, " ⏹ Stop ")) : (d(), f("button", {
+          key: 1,
+          class: "rvms-btn",
+          title: "Start stream",
+          onClick: O
+        }, " ▶ Play "))
+      ])) : S("", !0)
+    ], 4));
+  }
+}), Oe = ($, U) => {
+  const k = $.__vccOpts || $;
+  for (const [u, v] of U)
+    k[u] = v;
+  return k;
+}, He = /* @__PURE__ */ Oe(Le, [["__scopeId", "data-v-e485aa9d"]]);
+export {
+  He as RvmsVideo,
+  Re as RvmsVideoPlayer
+};

package/dist/lib/style.css

@@ -0,0 +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-e485aa9d{to{transform:rotate(360deg)}}.rvms-spinner[data-v-e485aa9d]{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#60a5fa;border-radius:50%;animation:rvms-spin-e485aa9d .8s linear infinite}.rvms-btn[data-v-e485aa9d]{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-e485aa9d]:hover{background:#1e293bf2}.rvms-chip[data-v-e485aa9d]{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-e485aa9d]:hover{opacity:.85}.rvms-datetime[data-v-e485aa9d]{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-e485aa9d]:focus{outline:none;border-color:#60a5fa}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "rvms-vue",
+  "version": "0.1.4",
+  "type": "module",
+  "description": "RVMS (Video-MS) Vue 3 components — RvmsVideoPlayer, RvmsVideo",
+  "main": "./dist/lib/index.js",
+  "types": "./dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/lib/index.js",
+      "types": "./dist/lib/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/lib"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "vue": "^3.5.12"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vue-tsc": "^2.1.6"
+  },
+  "peerDependencies": {
+    "vue": "^3.x"
+  },
+  "license": "MIT"
+}