rvms-vue 0.1.8 → 0.1.10

package/README.md

@@ -53,7 +53,7 @@ function playRecording() {
 </template>
 ```
 
-## Simple player (no alarms)
+## Simple player — live
 
 ```vue
 <script setup>
@@ -70,8 +70,42 @@ import { RvmsVideo } from 'rvms-vue';
 </template>
 ```
 
+## Simple player — playback
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { RvmsVideo } from 'rvms-vue';
+
+const mode = ref('playback');
+const from = '2025-01-15T10:00:00Z';
+const to   = '2025-01-15T11:00:00Z';
+</script>
+
+<template>
+  <RvmsVideo
+    nvr-id="a1b2c3d4-..."
+    channel-id="201"
+    :mode="mode"
+    :from="from"
+    :to="to"
+    width="100%"
+    height="480px"
+  />
+</template>
+```
+
 ## Components
 
+All components accept an optional `token` prop for authenticated backends:
+```vue
+<RvmsVideoPlayer token="your-jwt-token" ... />
+```
+
+The token is sent as:
+- `Authorization: Bearer <token>` header for REST calls (`/api/alarms/recent`)
+- `?token=<token>` query parameter for WebSocket URLs (`/ws/stream`, `/ws/alarms`)
+
 ### `RvmsVideoPlayer`
 
 Full-featured player with alarm overlay. Supports live and playback. Exposes `start()` / `stop()` via template ref.

package/dist/lib/rvms-vue.js

@@ -1,4 +1,4 @@
-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";
+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 = {
   width: "64",
   height: "64",
@@ -46,21 +46,22 @@ const X = {
     to: {},
     showAlarms: { type: Boolean, default: !0 },
     width: { default: "100%" },
-    height: { default: "auto" }
+    height: { default: "auto" },
+    token: {}
   },
   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);
+  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);
     function I() {
       C.value = C.value === "main" ? "sub" : "main", h.value && m();
     }
-    const E = x(null), L = x([]);
-    function H(e) {
+    const E = k(null), L = k([]);
+    function U(e) {
       return `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}${e}`;
     }
     function D() {
       M();
-      const e = new WebSocket(H("/ws/alarms"));
+      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);
@@ -92,15 +93,17 @@ const X = {
     }
     async function A() {
       try {
-        const e = await fetch("/api/alarms/recent");
-        if (e.ok) {
-          const t = await e.json();
-          L.value = t;
+        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();
+          L.value = r;
         }
       } catch {
       }
     }
-    let P = null;
+    let H = null;
     function O() {
       return {
         cancelled: !1,
@@ -115,7 +118,7 @@ const X = {
     }
     function z() {
       var t;
-      const e = P;
+      const e = H;
       if (e) {
         e.cancelled = !0;
         try {
@@ -137,7 +140,7 @@ const X = {
             e.mediaSource.endOfStream();
           } catch {
           }
-        if (e.sourceBuffer = null, e.mediaSource = null, e.appendQueue.length = 0, e.preBuffer.length = 0, P = null, l.value)
+        if (e.sourceBuffer = null, e.mediaSource = null, e.appendQueue.length = 0, e.preBuffer.length = 0, H = null, l.value)
           try {
             l.value.pause(), l.value.removeAttribute("src"), l.value.load();
           } catch {
@@ -152,15 +155,15 @@ const X = {
       }
       a.value = "connecting", g.value = null, w.value = null, v("stream-status", "connecting");
       const t = O();
-      P = t;
+      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));
       };
       t.sourceOpenHandler = p, r.addEventListener("sourceopen", p);
-      const i = new WebSocket(e);
-      i.binaryType = "arraybuffer", t.ws = i, i.onmessage = (b) => {
+      const u = new WebSocket(e);
+      u.binaryType = "arraybuffer", t.ws = u, u.onmessage = (b) => {
         if (t.cancelled) return;
         if (typeof b.data == "string") {
           try {
@@ -178,19 +181,19 @@ const X = {
         t.appendQueue.push(
           _.buffer.slice(_.byteOffset, _.byteOffset + _.byteLength)
         ), o(t);
-      }, i.onerror = () => {
+      }, u.onerror = () => {
         t.cancelled || a.value !== "error" && (g.value = "WebSocket error", a.value = "error", v("stream-status", "error"));
-      }, i.onclose = (b) => {
+      }, 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")));
       };
     }
     function V(e) {
-      const t = (i) => i.toString(16).padStart(2, "0").toUpperCase();
+      const t = (u) => u.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]);
+      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[i + 5], R = e[i + 6], Q = e[i + 7];
+          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)}`);
         }
         b === "hvcC" && (r = "hev1.1.6.L93.B0"), b === "mp4a" && (p = "mp4a.40.2");
@@ -207,30 +210,30 @@ const X = {
         g.value = `Codec not supported: ${p}`, a.value = "error", z();
         return;
       }
-      let i;
+      let u;
       try {
-        i = e.mediaSource.addSourceBuffer(p);
+        u = e.mediaSource.addSourceBuffer(p);
       } catch (_) {
         g.value = `addSourceBuffer failed: ${_.message}`, a.value = "error", z();
         return;
       }
-      i.mode = "segments";
+      u.mode = "segments";
       const b = () => {
         e.cancelled || o(e);
       };
-      e.updateEndHandler = b, i.addEventListener("updateend", b), i.addEventListener("error", () => {
+      e.updateEndHandler = b, u.addEventListener("updateend", b), u.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);
+      }), e.sourceBuffer = u, 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);
+      const t = e.reduce((u, b) => u + b.byteLength, 0), r = new Uint8Array(t);
       let p = 0;
-      for (const i of e)
-        r.set(i, p), p += i.byteLength;
+      for (const u of e)
+        r.set(u, p), p += u.byteLength;
       return r;
     }
     function o(e) {
-      var i;
+      var u;
       if (e.cancelled) return;
       const t = e.sourceBuffer, r = e.mediaSource;
       if (!t || !r || r.readyState !== "open" || t.updating) return;
@@ -241,7 +244,7 @@ const X = {
         } catch (b) {
           const _ = b;
           if (_.name === "QuotaExceededError") {
-            const R = ((i = l.value) == null ? void 0 : i.currentTime) ?? 0, Q = Math.max(0, R - 5);
+            const R = ((u = l.value) == null ? void 0 : u.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 {
@@ -252,20 +255,22 @@ const X = {
         }
     }
     async function m() {
-      if (z(), h.value = !0, !u.nvrId || !u.deviceId) {
+      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");
         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,
+          nvrId: s.nvrId,
+          deviceId: s.deviceId,
+          mode: s.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()}`;
+        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()}`;
         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);
@@ -282,15 +287,15 @@ const X = {
     }), F(() => {
       M(), y();
     }), J(
-      () => [u.nvrId, u.deviceId, u.mode].join("|"),
+      () => [s.nvrId, s.deviceId, s.mode].join("|"),
       () => {
-        h.value && u.nvrId && u.deviceId && m();
+        h.value && s.nvrId && s.deviceId && m();
       }
-    ), U({ start: m, stop: y }), (e, t) => (d(), f("div", {
+    ), P({ 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", {
+      i("video", {
         ref_key: "videoEl",
         ref: l,
         muted: "",
@@ -305,7 +310,7 @@ const X = {
         onClick: m
       }, [
         (d(), f("svg", X, [...t[2] || (t[2] = [
-          s("circle", {
+          i("circle", {
             cx: "32",
             cy: "32",
             r: "28",
@@ -313,31 +318,31 @@ const X = {
             "stroke-width": "2",
             fill: "rgba(0,0,0,0.3)"
           }, null, -1),
-          s("polygon", {
+          i("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))
+        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] = [
-        s("span", { style: { color: "#93c5fd", animation: "rvms-pulse 1.5s infinite" } }, "Connecting…", -1)
+        i("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)
+        i("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)),
+        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),
-        s("button", {
+        i("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", {
+        t[7] || (t[7] = i("span", { style: { color: "#94a3b8" } }, "Stream ended", -1)),
+        i("button", {
           class: "rvms-btn",
           onClick: m
         }, " Reconnect ")
       ])) : S("", !0),
-      s("div", oe, [
+      i("div", oe, [
         a.value !== "idle" ? (d(), f("span", {
           key: 0,
           style: j({
@@ -353,17 +358,17 @@ const X = {
         }, 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),
+          i("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", {
+        i("button", {
           class: "rvms-btn",
           title: "Stop stream",
           onClick: y
         }, " ⏹ Stop "),
-        s("button", {
+        i("button", {
           class: "rvms-btn",
           title: `Switch to ${C.value === "main" ? "sub" : "main"} stream`,
           onClick: I
@@ -385,13 +390,13 @@ const X = {
             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),
+          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)
             ]),
-            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))
+            i("div", ge, 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))
       ])) : S("", !0)
@@ -403,10 +408,10 @@ const X = {
 }, 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 = {
+}, xe = { style: { color: "#ef4444", "font-size": "0.85rem", "text-align": "center", padding: "0 16px" } }, ke = {
   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 = {
+}, 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 = {
   key: 0,
   class: "rvms-chip",
   style: { background: "rgba(51, 65, 85, 0.8)", color: "#cbd5e1", "font-family": "monospace" }
@@ -427,11 +432,12 @@ const X = {
     channelId: {},
     initialProfile: { default: "main" },
     width: { default: "100%" },
-    height: { default: "auto" }
+    height: { default: "auto" },
+    token: {}
   },
   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("");
+  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("");
     let E = null;
     function L() {
       return {
@@ -445,7 +451,7 @@ const X = {
         sourceOpenHandler: null
       };
     }
-    function H() {
+    function U() {
       var o;
       const n = E;
       if (n) {
@@ -479,16 +485,16 @@ const X = {
     function D(n) {
       if (!v.value) return;
       if (!("MediaSource" in window)) {
-        a.value = "MediaSource Extensions not supported", l.value = "error", u("status-change", "error");
+        a.value = "MediaSource Extensions not supported", l.value = "error", s("status-change", "error");
         return;
       }
-      l.value = "connecting", a.value = null, g.value = null, u("status-change", "connecting");
+      l.value = "connecting", a.value = null, g.value = null, s("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.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);
@@ -497,7 +503,7 @@ const X = {
         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());
+            r.type === "error" && r.message && (a.value = r.message, l.value = "error", s("status-change", "error"), U());
           } catch {
           }
           return;
@@ -509,11 +515,11 @@ const X = {
         }
         o.appendQueue.push(
           t.buffer.slice(t.byteOffset, t.byteOffset + t.byteLength)
-        ), P(o);
+        ), H(o);
       }, c.onerror = () => {
-        o.cancelled || l.value !== "error" && (a.value = "WebSocket error", l.value = "error", u("status-change", "error"));
+        o.cancelled || l.value !== "error" && (a.value = "WebSocket error", l.value = "error", s("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")));
+        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) {
@@ -561,17 +567,17 @@ const X = {
         }
       n.preBuffer.length = 0;
       const y = () => {
-        P(n);
+        H(n);
       };
       n.updateEndHandler = y, n.sourceBuffer.addEventListener("updateend", y);
     }
-    function P(n) {
+    function H(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"));
+        o.appendBuffer(m), l.value !== "playing" && (l.value = "playing", s("status-change", "playing"));
       } catch (c) {
         const e = c;
         if (e.name === "QuotaExceededError") {
@@ -582,19 +588,19 @@ const X = {
           }
           n.appendQueue.unshift(m);
         } else
-          a.value = `appendBuffer failed: ${e.message}`, l.value = "error", H();
+          a.value = `appendBuffer failed: ${e.message}`, l.value = "error", U();
       }
     }
     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");
+      if (h.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;
       }
-      l.value = "connecting", a.value = null, g.value = null, u("status-change", "connecting");
+      l.value = "connecting", a.value = null, g.value = null, s("status-change", "connecting");
       try {
         const n = new URLSearchParams({
-          nvrId: k.nvrId,
-          deviceId: k.channelId,
+          nvrId: x.nvrId,
+          deviceId: x.channelId,
           mode: h.value,
           profile: C.value
         });
@@ -604,14 +610,16 @@ const X = {
           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()}`;
+        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);
       } catch (n) {
-        a.value = n.message, l.value = "error", w.value = !1, u("status-change", "error");
+        a.value = n.message, l.value = "error", w.value = !1, s("status-change", "error");
       }
     }
     function z() {
-      w.value = !1, H(), l.value = "idle", a.value = null, u("status-change", "idle");
+      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();
@@ -626,9 +634,9 @@ const X = {
     return F(() => {
       z();
     }), J(
-      () => [k.nvrId, k.channelId].join("|"),
+      () => [x.nvrId, x.channelId].join("|"),
       () => {
-        w.value && k.nvrId && k.channelId && O();
+        w.value && x.nvrId && x.channelId && O();
       }
     ), (n, o) => (d(), f("div", {
       class: "rvms-video",
@@ -641,7 +649,7 @@ const X = {
         borderRadius: "8px"
       })
     }, [
-      s("video", {
+      i("video", {
         ref_key: "videoEl",
         ref: v,
         muted: "",
@@ -653,13 +661,13 @@ const X = {
         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", {
+        i("svg", {
           width: "64",
           height: "64",
           viewBox: "0 0 64 64",
           fill: "none"
         }, [
-          s("circle", {
+          i("circle", {
             cx: "32",
             cy: "32",
             r: "30",
@@ -667,30 +675,30 @@ const X = {
             "stroke-width": "3",
             fill: "rgba(255,255,255,0.15)"
           }),
-          s("polygon", {
+          i("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)
+        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, [
-        o[1] || (o[1] = s("div", { class: "rvms-spinner" }, null, -1)),
-        s("span", he, B(l.value === "connecting" ? "Connecting…" : "Buffering…"), 1)
+        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, [
-        s("span", xe, B(a.value || "Stream error"), 1),
-        s("button", {
+        i("span", xe, B(a.value || "Stream error"), 1),
+        i("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", {
+      ])) : l.value === "ended" ? (d(), f("div", ke, [
+        o[2] || (o[2] = i("span", { style: { color: "#94a3b8" } }, "Stream ended", -1)),
+        i("button", {
           class: "rvms-btn",
           onClick: O
         }, "Reconnect")
       ])) : S("", !0),
-      s("div", ke, [
-        s("button", {
+      i("div", Se, [
+        i("button", {
           class: "rvms-chip",
           title: `Switch to ${h.value === "live" ? "playback" : "live"} mode`,
           onClick: W,
@@ -699,7 +707,7 @@ const X = {
             pointerEvents: "auto"
           })
         }, B(h.value === "live" ? "🔴 LIVE" : "🔵 PLAYBACK"), 13, we),
-        s("button", {
+        i("button", {
           class: "rvms-chip",
           title: `Switch to ${C.value === "main" ? "sub" : "main"} stream`,
           onClick: V,
@@ -718,7 +726,7 @@ const X = {
         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", {
+        i("span", {
           style: j({
             padding: "2px 8px",
             borderRadius: "4px",
@@ -745,13 +753,13 @@ const X = {
       ])) : 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"]]);
+}), Oe = ($, P) => {
+  const x = $.__vccOpts || $;
+  for (const [s, v] of P)
+    x[s] = v;
+  return x;
+}, Ue = /* @__PURE__ */ Oe(Le, [["__scopeId", "data-v-bfc7094e"]]);
 export {
-  He as RvmsVideo,
+  Ue as RvmsVideo,
   Re 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-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}
+@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}

package/package.json

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

package/src/components/RvmsVideo.vue

@@ -65,6 +65,8 @@ interface Props {
   initialProfile?: StreamProfile;
   width?: string;
   height?: string;
+  /** Optional auth token passed as Bearer header to REST and ?token= to WS. */
+  token?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -382,6 +384,7 @@ async function start(): Promise<void> {
 
     // Build proxied WebSocket URL (same origin — goes through Vite/nginx proxy to example backend)
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    if (props.token) params.set('token', props.token);
     const wsUrl = `${proto}//${location.host}/ws/stream?${params.toString()}`;
 
     connectStream(wsUrl);

package/src/components/RvmsVideoPlayer.vue

@@ -77,6 +77,8 @@ interface Props {
   showAlarms?: boolean;
   width?: string;
   height?: string;
+  /** Optional auth token passed as Bearer header to REST and ?token= to WS. */
+  token?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -134,7 +136,7 @@ function beWsUrl(path: string): string {
 function connectAlarmWs(): void {
   disconnectAlarmWs();
 
-  const ws = new WebSocket(beWsUrl('/ws/alarms'));
+  const ws = new WebSocket(props.token ? `/ws/alarms?token=${encodeURIComponent(props.token)}` : beWsUrl('/ws/alarms'));
   alarmWsRef.value = ws;
 
   ws.onmessage = (event) => {
@@ -198,7 +200,9 @@ function disconnectAlarmWs(): void {
 /** Fetch recent alarms via REST as fallback / initial data. */
 async function fetchRecentAlarms(): Promise<void> {
   try {
-    const res = await fetch('/api/alarms/recent');
+    const headers: Record<string, string> = {};
+    if (props.token) headers.Authorization = `Bearer ${props.token}`;
+    const res = await fetch('/api/alarms/recent', { headers });
     if (res.ok) {
       const alarms = (await res.json()) as AlarmEvent[];
       recentAlarms.value = alarms;
@@ -512,6 +516,7 @@ async function start(): Promise<void> {
     if (props.to) params.set('to', props.to);
 
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    if (props.token) params.set('token', props.token);
     const wsUrl = `${proto}//${location.host}/ws/stream?${params.toString()}`;
 
     // ── Step 2: Connect to stream WebSocket via BE proxy ──────────────────