rvms-vue 0.1.13 → 0.1.15

package/dist/lib/index.js

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