virtual-human-cf 1.0.7 → 1.0.10

package/README.md

@@ -11,6 +11,11 @@
 - 暗黑模式支持
 - 响应式设计
 
+## 更新日志
+
+  ### 1.0.10
+  - 新增VirtualHumanPersona组件styles属性，用于控制视频容器 宽高 绝对定位位置等
+  
 ## 安装
 
 ```bash
@@ -53,6 +58,7 @@ import { VirtualHumanPersona, VirtualHumanEventAdapter } from 'virtual-human-cf'
 | isDark | Boolean | false | 否 | 是否暗黑模式 |
 | screenClientId | String | - | 否 | 屏幕客户端 ID |
 | wsUrl | String | - | 否 | WebSocket 连接地址 |
+| styles | Object | - | 否 | 组件样式，包含 width、height、left、bottom 等属性 |
 
 #### Events
 
@@ -73,6 +79,7 @@ import { VirtualHumanPersona, VirtualHumanEventAdapter } from 'virtual-human-cf'
     :is-dark="false"
     :screen-client-id="clientId"
     :ws-url="websocketUrl"
+    :styles="styles"
     @update:isPlaying="onPlayingChange"
     @ended="onEnded"
   />
@@ -86,7 +93,12 @@ const videoUrl = ref('https://example.com/video.mp4');
 const playing = ref(false);
 const clientId = ref('screen-123');
 const websocketUrl = ref('ws://localhost:8080/ws');
-
+const styles = ref({
+      width:'400px',
+      height:'500px',
+      left: '16px',
+      bottom:'16px'
+})
 const onPlayingChange = (isPlaying) => {
   console.log('播放状态改变:', isPlaying);
 };
@@ -119,8 +131,9 @@ const onEnded = () => {
 | error | 错误事件 | 错误信息 |
 | playComplete | 播放完成，数字人对话结束，关闭数字人 | - |
 
-```json
-eventNotifaction => 载荷数据 :{
+```js
+// eventNotifaction 载荷数据
+{
   
     "type": "send_event",
     // 自定义事件名称
@@ -192,6 +205,7 @@ const onError = (error) => {
       :is-dark="isDarkMode"
       :screen-client-id="activeScreenClientId"
       :ws-url="websocketUrl"
+      :styles="styles"
       @update:isPlaying="onPersonaPlayingUpdate"
       @update:visible="onPersonaVisibleUpdate"
       @ended="onVideoEnded"

package/dist/components/VirtualHumanPersona.vue.d.ts

@@ -27,6 +27,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         required: false;
     };
+    styles: {
+        type: ObjectConstructor;
+        default: () => {
+            width: string;
+            height: string;
+            left: string;
+            bottom: string;
+        };
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     ended: (...args: any[]) => void;
     "update:isPlaying": (...args: any[]) => void;
@@ -60,6 +69,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         required: false;
     };
+    styles: {
+        type: ObjectConstructor;
+        default: () => {
+            width: string;
+            height: string;
+            left: string;
+            bottom: string;
+        };
+    };
 }>> & Readonly<{
     onEnded?: ((...args: any[]) => any) | undefined;
     "onUpdate:isPlaying"?: ((...args: any[]) => any) | undefined;
@@ -69,5 +87,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     isPlaying: boolean;
     muted: boolean;
     isDark: boolean;
+    styles: Record<string, any>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/style.css

@@ -1 +1 @@
-.fade-enter-active[data-v-6c9e435e],.fade-leave-active[data-v-6c9e435e]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-6c9e435e],.fade-leave-to[data-v-6c9e435e]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-6c9e435e]{position:fixed;z-index:2147483647;overflow:visible}.video-wrapper[data-v-6c9e435e]{position:relative;width:100%;height:100%;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;border:2px solid transparent;transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}.video-wrapper[data-v-6c9e435e]:hover{border-color:#409eff}.virtual-human-container.is-dark .video-wrapper[data-v-6c9e435e]{background:#1f2937;box-shadow:0 10px 25px #00000080}.persona-video[data-v-6c9e435e]{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .1s ease-out}.resize-handle[data-v-6c9e435e]{position:absolute;width:20px;height:20px;background:#00000080;border:2px solid rgba(255,255,255,.8);border-radius:4px;cursor:pointer;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease,background .2s,border-color .2s}.video-wrapper:hover .resize-handle[data-v-6c9e435e]{opacity:1;pointer-events:auto}.resize-handle[data-v-6c9e435e]:hover{background:#000000b3;border-color:#fff}.resize-handle.top-left[data-v-6c9e435e]{top:10px;left:10px;cursor:nwse-resize}.resize-handle.top-right[data-v-6c9e435e]{top:10px;right:10px;cursor:nesw-resize}.resize-handle.bottom-left[data-v-6c9e435e]{bottom:10px;left:10px;cursor:nesw-resize}.resize-handle.bottom-right[data-v-6c9e435e]{bottom:10px;right:10px;cursor:nwse-resize}.overlay[data-v-6c9e435e]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-6c9e435e]{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-badge.paused[data-v-6c9e435e]{background:#ef4444cc}.status-badge.playing[data-v-6c9e435e]{background:#22c55ecc}.dot[data-v-6c9e435e]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-6c9e435e{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-6c9e435e]{animation:pulse-6c9e435e 2s cubic-bezier(.4,0,.6,1) infinite}
+.fade-enter-active[data-v-892abb8d],.fade-leave-active[data-v-892abb8d]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-892abb8d],.fade-leave-to[data-v-892abb8d]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-892abb8d]{position:fixed;z-index:2147483647;overflow:visible}.video-wrapper[data-v-892abb8d]{position:relative;width:100%;height:100%;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;border:2px solid transparent;transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}.video-wrapper[data-v-892abb8d]:hover{border-color:#409eff}.virtual-human-container.is-dark .video-wrapper[data-v-892abb8d]{background:#1f2937;box-shadow:0 10px 25px #00000080}.persona-video[data-v-892abb8d]{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .1s ease-out}.resize-handle[data-v-892abb8d]{position:absolute;width:20px;height:20px;background:#00000080;border:2px solid rgba(255,255,255,.8);border-radius:4px;cursor:pointer;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease,background .2s,border-color .2s}.video-wrapper:hover .resize-handle[data-v-892abb8d]{opacity:1;pointer-events:auto}.resize-handle[data-v-892abb8d]:hover{background:#000000b3;border-color:#fff}.resize-handle.top-left[data-v-892abb8d]{top:10px;left:10px;cursor:nwse-resize}.resize-handle.top-right[data-v-892abb8d]{top:10px;right:10px;cursor:nesw-resize}.resize-handle.bottom-left[data-v-892abb8d]{bottom:10px;left:10px;cursor:nesw-resize}.resize-handle.bottom-right[data-v-892abb8d]{bottom:10px;right:10px;cursor:nwse-resize}.overlay[data-v-892abb8d]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-892abb8d]{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-badge.paused[data-v-892abb8d]{background:#ef4444cc}.status-badge.playing[data-v-892abb8d]{background:#22c55ecc}.dot[data-v-892abb8d]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-892abb8d{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-892abb8d]{animation:pulse-892abb8d 2s cubic-bezier(.4,0,.6,1) infinite}

package/dist/virtual-human-cf.es.js

@@ -1,11 +1,5 @@
-import { defineComponent as j, ref as v, watch as X, onMounted as G, onUnmounted as K, openBlock as S, createBlock as Q, Transition as Z, withCtx as _, createElementBlock as E, normalizeStyle as ee, normalizeClass as te, createElementVNode as R, createCommentVNode as T, createTextVNode as J, renderSlot as ne } from "vue";
-const ae = ["src", "muted"], se = { class: "overlay" }, le = {
-  key: 0,
-  class: "status-badge paused"
-}, oe = {
-  key: 1,
-  class: "status-badge playing"
-}, re = /* @__PURE__ */ j({
+import { defineComponent as H, ref as w, watch as C, onMounted as E, onUnmounted as x, openBlock as A, createBlock as B, Transition as W, withCtx as $, createElementBlock as R, normalizeStyle as F, normalizeClass as N, createElementVNode as U, createCommentVNode as T, renderSlot as q } from "vue";
+const M = ["src", "muted"], z = /* @__PURE__ */ H({
   __name: "VirtualHumanPersona",
   props: {
     // 视频源URL
@@ -43,141 +37,100 @@ const ae = ["src", "muted"], se = { class: "overlay" }, le = {
     wsUrl: {
       type: String,
       required: !1
+    },
+    styles: {
+      type: Object,
+      default: () => ({
+        width: "400px",
+        height: "500px",
+        left: "16px",
+        bottom: "16px"
+      })
     }
   },
   emits: ["update:isPlaying", "ended", "update:visible"],
-  setup(c, { emit: W }) {
-    const t = c, i = W, r = v(null), Y = v(null), n = v(null), p = v(!1), y = v(400), g = v(500), w = v(16), z = v(16), I = v(!1), h = v(null), M = v(0), A = v(0), k = v(0), s = v(0), l = v(0), u = v(0), b = () => {
-      if (n.value && n.value.close(), !(!t.wsUrl || !t.screenClientId))
+  setup(r, { emit: g }) {
+    const e = r, a = g, n = w(null), h = w(null), t = w(null), d = w(!1), f = () => {
+      if (t.value && t.value.close(), !(!e.wsUrl || !e.screenClientId))
         try {
-          const o = new URL(t.wsUrl);
-          o.searchParams.append("sessionId", t.screenClientId + "-persona"), n.value = new WebSocket(o.toString()), n.value.onopen = () => {
-            p.value = !0, console.log(`[VirtualHumanPersona] Connected to ${t.wsUrl} for session ${t.screenClientId}-persona`);
-          }, n.value.onmessage = (e) => {
+          const l = new URL(e.wsUrl);
+          l.searchParams.append("sessionId", e.screenClientId + "-persona"), t.value = new WebSocket(l.toString()), t.value.onopen = () => {
+            d.value = !0, console.log(`[VirtualHumanPersona] Connected to ${e.wsUrl} for session ${e.screenClientId}-persona`);
+          }, t.value.onmessage = (u) => {
             try {
-              const a = JSON.parse(e.data);
-              C(a);
-            } catch (a) {
-              console.error("[VirtualHumanPersona] Failed to parse message:", e.data, a);
+              const i = JSON.parse(u.data);
+              m(i);
+            } catch (i) {
+              console.error("[VirtualHumanPersona] Failed to parse message:", u.data, i);
             }
-          }, n.value.onerror = (e) => {
-            console.error("[VirtualHumanPersona] WebSocket error:", e);
-          }, n.value.onclose = () => {
-            p.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
+          }, t.value.onerror = (u) => {
+            console.error("[VirtualHumanPersona] WebSocket error:", u);
+          }, t.value.onclose = () => {
+            d.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
           };
-        } catch (o) {
-          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", o);
+        } catch (l) {
+          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", l);
         }
-    }, C = (o) => {
-      const { type: e, action: a } = o;
-      e === "control" && (a === "play" || a === "resume" ? (i("update:isPlaying", !0), i("update:visible", !0)) : a === "pause" ? i("update:isPlaying", !1) : a === "stop" && (i("update:isPlaying", !1), i("update:visible", !1), r.value && (r.value.currentTime = 0)));
+    }, m = (l) => {
+      const { type: u, action: i } = l;
+      u === "control" && (i === "play" || i === "resume" ? (a("update:isPlaying", !0), a("update:visible", !0)) : i === "pause" ? a("update:isPlaying", !1) : i === "stop" && (a("update:isPlaying", !1), a("update:visible", !1), n.value && (n.value.currentTime = 0)));
     };
-    X(() => t.screenClientId, () => {
-      t.screenClientId && t.wsUrl && b();
-    }), X(() => t.wsUrl, () => {
-      t.screenClientId && t.wsUrl && b();
-    }), X(() => t.isPlaying, (o) => {
-      r.value && (o ? r.value.play().catch((e) => console.error("Video play failed:", e)) : r.value.pause());
+    C(() => e.screenClientId, () => {
+      e.screenClientId && e.wsUrl && f();
+    }), C(() => e.wsUrl, () => {
+      e.screenClientId && e.wsUrl && f();
+    }), C(() => e.isPlaying, (l) => {
+      n.value && (l ? n.value.play().catch((u) => console.error("Video play failed:", u)) : n.value.pause());
     });
-    const B = () => {
-      t.isPlaying || i("update:isPlaying", !0);
-    }, L = () => {
-      t.isPlaying && i("update:isPlaying", !1);
-    }, U = () => {
-      i("update:isPlaying", !1), i("ended");
-    }, d = (o, e) => {
-      e.preventDefault(), I.value = !0, h.value = o;
-      const a = "clientX" in e ? e.clientX : e.touches[0].clientX, P = "clientY" in e ? e.clientY : e.touches[0].clientY;
-      M.value = a, A.value = P, k.value = y.value, s.value = g.value, l.value = w.value, u.value = z.value, document.addEventListener("mousemove", $), document.addEventListener("mouseup", N), document.addEventListener("touchmove", $, { passive: !1 }), document.addEventListener("touchend", N);
-    }, $ = (o) => {
-      if (!I.value) return;
-      o.preventDefault();
-      const e = "clientX" in o ? o.clientX : o.touches[0].clientX, a = "clientY" in o ? o.clientY : o.touches[0].clientY, P = e - M.value, x = a - A.value, D = 200, F = 250, q = 800, O = 1e3;
-      let f = k.value, m = s.value, H = l.value, V = u.value;
-      h.value === "bottom-right" ? (f = k.value + P, V = u.value - x, m = s.value + x) : h.value === "bottom-left" ? (H = l.value + P, f = k.value - P, V = u.value - x, m = s.value + x) : h.value === "top-right" ? (f = k.value + P, m = s.value - x) : h.value === "top-left" && (H = l.value + P, f = k.value - P, m = s.value - x), f < D && (H !== l.value && (H -= D - f), f = D), m < F && (V !== u.value && (V -= F - m), m = F), f > q && (H !== l.value && (H += f - q), f = q), m > O && (V !== u.value && (V += m - O), m = O), y.value = f, g.value = m, w.value = H, z.value = V;
-    }, N = () => {
-      I.value = !1, h.value = null, document.removeEventListener("mousemove", $), document.removeEventListener("mouseup", N), document.removeEventListener("touchmove", $), document.removeEventListener("touchend", N);
+    const v = () => {
+      e.isPlaying || a("update:isPlaying", !0);
+    }, S = () => {
+      e.isPlaying && a("update:isPlaying", !1);
+    }, k = () => {
+      a("update:isPlaying", !1), a("ended");
     };
-    return G(() => {
-      t.isPlaying && r.value && r.value.play().catch((o) => console.error("Video play failed:", o)), t.screenClientId && t.wsUrl && b();
-    }), K(() => {
-      n.value && n.value.close();
-    }), (o, e) => (S(), Q(Z, { name: "fade" }, {
-      default: _(() => [
-        c.visible ? (S(), E("div", {
+    return E(() => {
+      e.isPlaying && n.value && n.value.play().catch((l) => console.error("Video play failed:", l)), e.screenClientId && e.wsUrl && f();
+    }), x(() => {
+      t.value && t.value.close();
+    }), (l, u) => (A(), B(W, { name: "fade" }, {
+      default: $(() => [
+        r.visible ? (A(), R("div", {
           key: 0,
-          class: te(["virtual-human-container", { "is-dark": c.isDark }]),
-          style: ee({
-            width: y.value + "px",
-            height: g.value + "px",
-            left: w.value + "px",
-            bottom: z.value + "px"
-          })
+          class: N(["virtual-human-container", { "is-dark": r.isDark }]),
+          style: F(r.styles)
         }, [
-          R("div", {
+          U("div", {
             class: "video-wrapper",
             ref_key: "wrapperRef",
-            ref: Y
+            ref: h
           }, [
-            R("video", {
+            U("video", {
               ref_key: "videoRef",
-              ref: r,
-              src: c.videoSrc,
+              ref: n,
+              src: r.videoSrc,
               class: "persona-video",
-              muted: c.muted,
+              muted: r.muted,
               playsinline: "",
               loop: "",
               autoPlay: "",
               disablePictureInPicture: "false",
-              onPlay: B,
-              onPause: L,
-              onEnded: U
-            }, null, 40, ae),
-            c.visible ? (S(), E("div", {
-              key: 0,
-              class: "resize-handle top-left",
-              onMousedown: e[0] || (e[0] = (a) => d("top-left", a)),
-              onTouchstart: e[1] || (e[1] = (a) => d("top-left", a))
-            }, null, 32)) : T("", !0),
-            c.visible ? (S(), E("div", {
-              key: 1,
-              class: "resize-handle top-right",
-              onMousedown: e[2] || (e[2] = (a) => d("top-right", a)),
-              onTouchstart: e[3] || (e[3] = (a) => d("top-right", a))
-            }, null, 32)) : T("", !0),
-            c.visible ? (S(), E("div", {
-              key: 2,
-              class: "resize-handle bottom-left",
-              onMousedown: e[4] || (e[4] = (a) => d("bottom-left", a)),
-              onTouchstart: e[5] || (e[5] = (a) => d("bottom-left", a))
-            }, null, 32)) : T("", !0),
-            c.visible ? (S(), E("div", {
-              key: 3,
-              class: "resize-handle bottom-right",
-              onMousedown: e[6] || (e[6] = (a) => d("bottom-right", a)),
-              onTouchstart: e[7] || (e[7] = (a) => d("bottom-right", a))
-            }, null, 32)) : T("", !0),
-            R("div", se, [
-              c.isPlaying ? (S(), E("div", oe, [...e[9] || (e[9] = [
-                R("span", { class: "dot animate-pulse" }, null, -1),
-                J(" 播放中 ", -1)
-              ])])) : (S(), E("div", le, [...e[8] || (e[8] = [
-                R("span", { class: "dot" }, null, -1),
-                J(" 暂停中 ", -1)
-              ])]))
-            ])
+              onPlay: v,
+              onPause: S,
+              onEnded: k
+            }, null, 40, M)
           ], 512)
         ], 6)) : T("", !0)
       ]),
       _: 1
     }));
   }
-}), ie = (c, W) => {
-  const t = c.__vccOpts || c;
-  for (const [i, r] of W)
-    t[i] = r;
-  return t;
-}, ue = /* @__PURE__ */ ie(re, [["__scopeId", "data-v-6c9e435e"]]), ce = /* @__PURE__ */ j({
+}), D = (r, g) => {
+  const e = r.__vccOpts || r;
+  for (const [a, n] of g)
+    e[a] = n;
+  return e;
+}, O = /* @__PURE__ */ D(z, [["__scopeId", "data-v-892abb8d"]]), J = /* @__PURE__ */ H({
   __name: "VirtualHumanEventAdapter",
   props: {
     // 屏幕客户端ID
@@ -192,114 +145,114 @@ const ae = ["src", "muted"], se = { class: "overlay" }, le = {
     }
   },
   emits: ["eventNotifaction", "end", "pause", "connected", "error", "playComplete"],
-  setup(c, { emit: W }) {
-    const t = c, i = W, r = v(null), Y = v(!1);
-    let n = null, p = 0, y = !1, g = 0, w = !1;
-    const z = () => {
-      n || (n = new (window.AudioContext || window.webkitAudioContext)({
+  setup(r, { emit: g }) {
+    const e = r, a = g, n = w(null), h = w(!1);
+    let t = null, d = 0, f = !1, m = 0, v = !1;
+    const S = () => {
+      t || (t = new (window.AudioContext || window.webkitAudioContext)({
         sampleRate: 24e3
-      })), n.state === "suspended" && !w && n.resume();
-    }, I = () => {
-      y && g === 0 && (i("playComplete", t.screenClientId), y = !1);
-    }, h = (s) => {
-      if (z(), !!n)
+      })), t.state === "suspended" && !v && t.resume();
+    }, k = () => {
+      f && m === 0 && (a("playComplete", e.screenClientId), f = !1);
+    }, l = (s) => {
+      if (S(), !!t)
         try {
-          const l = window.atob(s), u = l.length, b = new Uint8Array(u);
-          for (let d = 0; d < u; d++)
-            b[d] = l.charCodeAt(d);
-          const C = new Int16Array(b.buffer), B = new Float32Array(C.length);
-          for (let d = 0; d < C.length; d++)
-            B[d] = C[d] / 32768;
-          const L = n.createBuffer(1, B.length, 24e3);
-          L.getChannelData(0).set(B);
-          const U = n.createBufferSource();
-          U.buffer = L, U.connect(n.destination), p < n.currentTime && (p = n.currentTime), U.start(p), p += L.duration, g++, U.onended = () => {
-            g--, I();
+          const o = window.atob(s), c = o.length, b = new Uint8Array(c);
+          for (let p = 0; p < c; p++)
+            b[p] = o.charCodeAt(p);
+          const y = new Int16Array(b.buffer), V = new Float32Array(y.length);
+          for (let p = 0; p < y.length; p++)
+            V[p] = y[p] / 32768;
+          const I = t.createBuffer(1, V.length, 24e3);
+          I.getChannelData(0).set(V);
+          const P = t.createBufferSource();
+          P.buffer = I, P.connect(t.destination), d < t.currentTime && (d = t.currentTime), P.start(d), d += I.duration, m++, P.onended = () => {
+            m--, k();
           };
-        } catch (l) {
-          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", l);
+        } catch (o) {
+          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", o);
         }
-    }, M = (s) => {
+    }, u = (s) => {
       switch (s) {
         case "play":
-          y = !1, g = 0, p = 0, w = !1, n && n.state === "suspended" && n.resume();
+          f = !1, m = 0, d = 0, v = !1, t && t.state === "suspended" && t.resume();
           break;
         case "resume":
-          w = !1, n && n.state === "suspended" && n.resume();
+          v = !1, t && t.state === "suspended" && t.resume();
           break;
         case "pause":
-          w = !0, n && n.state === "running" && n.suspend();
+          v = !0, t && t.state === "running" && t.suspend();
           break;
         case "stop":
-          w = !1, n && (n.close(), n = null), p = 0, y = !1, g = 0;
+          v = !1, t && (t.close(), t = null), d = 0, f = !1, m = 0;
           break;
         case "tts_complete":
-          y = !0, I();
+          f = !0, k();
           break;
         default:
           console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${s}`);
       }
-    }, A = () => {
-      r.value && r.value.close();
+    }, i = () => {
+      n.value && n.value.close();
       try {
-        const s = new URL(t.wsUrl);
-        s.searchParams.append("sessionId", t.screenClientId + "-event"), r.value = new WebSocket(s.toString()), r.value.onopen = () => {
-          Y.value = !0, i("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${t.wsUrl} for session ${t.screenClientId}-event`);
-        }, r.value.onmessage = (l) => {
+        const s = new URL(e.wsUrl);
+        s.searchParams.append("sessionId", e.screenClientId + "-event"), n.value = new WebSocket(s.toString()), n.value.onopen = () => {
+          h.value = !0, a("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${e.wsUrl} for session ${e.screenClientId}-event`);
+        }, n.value.onmessage = (o) => {
           try {
-            const u = JSON.parse(l.data);
-            k(u);
-          } catch (u) {
-            console.error("[VirtualHumanEventAdapter] Failed to parse message:", l.data, u);
+            const c = JSON.parse(o.data);
+            _(c);
+          } catch (c) {
+            console.error("[VirtualHumanEventAdapter] Failed to parse message:", o.data, c);
           }
-        }, r.value.onerror = (l) => {
-          console.error("[VirtualHumanEventAdapter] WebSocket error:", l), i("error", l);
-        }, r.value.onclose = () => {
-          Y.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
+        }, n.value.onerror = (o) => {
+          console.error("[VirtualHumanEventAdapter] WebSocket error:", o), a("error", o);
+        }, n.value.onclose = () => {
+          h.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
         };
       } catch (s) {
-        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", s), i("error", s);
+        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", s), a("error", s);
       }
-    }, k = (s) => {
-      const { type: l, payload: u, action: b } = s;
-      switch (console.log("msgmsg-002", s), l) {
+    }, _ = (s) => {
+      const { type: o, payload: c, action: b } = s;
+      switch (console.log("msgmsg-002", s), o) {
         case "audio":
-          const C = (u == null ? void 0 : u.data) || s.data;
-          C && h(C);
+          const y = (c == null ? void 0 : c.data) || s.data;
+          y && l(y);
           break;
         case "send_event":
-          s.event && i("eventNotifaction", s);
+          s.event && a("eventNotifaction", s);
           break;
         case "control":
-          b && M(b);
+          b && u(b);
           break;
         case "end":
-          i("end", u);
+          a("end", c);
           break;
         case "pause":
-          i("pause", u);
+          a("pause", c);
           break;
         default:
-          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${l}`);
+          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${o}`);
       }
     };
-    return X(() => t.screenClientId, () => {
-      t.screenClientId && t.wsUrl && A();
-    }), X(() => t.wsUrl, () => {
-      t.screenClientId && t.wsUrl && A();
-    }), G(() => {
-      t.screenClientId && t.wsUrl && A();
-    }), K(() => {
-      r.value && r.value.close(), n && n.close();
-    }), (s, l) => ne(s.$slots, "default");
+    return C(() => e.screenClientId, () => {
+      e.screenClientId && e.wsUrl && i();
+    }), C(() => e.wsUrl, () => {
+      e.screenClientId && e.wsUrl && i();
+    }), E(() => {
+      e.screenClientId && e.wsUrl && i();
+    }), x(() => {
+      n.value && n.value.close(), t && t.close();
+    }), (s, o) => q(s.$slots, "default");
   }
-}), de = (c) => {
-  c.component("VirtualHumanPersona", ue), c.component("VirtualHumanEventAdapter", ce);
-}, fe = {
-  install: de
+}), L = (r) => {
+  r.component("VirtualHumanPersona", O), r.component("VirtualHumanEventAdapter", J);
+}, G = {
+  install: L
 };
 export {
-  ce as VirtualHumanEventAdapter,
-  ue as VirtualHumanPersona,
-  fe as default
+  J as VirtualHumanEventAdapter,
+  O as VirtualHumanPersona,
+  G as default
 };

package/dist/virtual-human-cf.umd.js

@@ -1 +1 @@
-(function(v,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(v=typeof globalThis<"u"?globalThis:v||self,e(v.VirtualHumanCf={},v.Vue))})(this,function(v,e){"use strict";const F=["src","muted"],O={class:"overlay"},j={key:0,class:"status-badge paused"},J={key:1,class:"status-badge playing"},q=((d,A)=>{const n=d.__vccOpts||d;for(const[c,i]of A)n[c]=i;return n})(e.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!1},isPlaying:{type:Boolean,default:!1},muted:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},screenClientId:{type:String,required:!1},wsUrl:{type:String,required:!1}},emits:["update:isPlaying","ended","update:visible"],setup(d,{emit:A}){const n=d,c=A,i=e.ref(null),W=e.ref(null),a=e.ref(null),y=e.ref(!1),g=e.ref(400),w=e.ref(500),h=e.ref(16),x=e.ref(16),H=e.ref(!1),b=e.ref(null),z=e.ref(0),B=e.ref(0),C=e.ref(0),l=e.ref(0),s=e.ref(0),u=e.ref(0),k=()=>{if(a.value&&a.value.close(),!(!n.wsUrl||!n.screenClientId))try{const r=new URL(n.wsUrl);r.searchParams.append("sessionId",n.screenClientId+"-persona"),a.value=new WebSocket(r.toString()),a.value.onopen=()=>{y.value=!0,console.log(`[VirtualHumanPersona] Connected to ${n.wsUrl} for session ${n.screenClientId}-persona`)},a.value.onmessage=t=>{try{const o=JSON.parse(t.data);V(o)}catch(o){console.error("[VirtualHumanPersona] Failed to parse message:",t.data,o)}},a.value.onerror=t=>{console.error("[VirtualHumanPersona] WebSocket error:",t)},a.value.onclose=()=>{y.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(r){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",r)}},V=r=>{const{type:t,action:o}=r;t==="control"&&(o==="play"||o==="resume"?(c("update:isPlaying",!0),c("update:visible",!0)):o==="pause"?c("update:isPlaying",!1):o==="stop"&&(c("update:isPlaying",!1),c("update:visible",!1),i.value&&(i.value.currentTime=0)))};e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&k()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&k()}),e.watch(()=>n.isPlaying,r=>{i.value&&(r?i.value.play().catch(t=>console.error("Video play failed:",t)):i.value.pause())});const N=()=>{n.isPlaying||c("update:isPlaying",!0)},T=()=>{n.isPlaying&&c("update:isPlaying",!1)},I=()=>{c("update:isPlaying",!1),c("ended")},f=(r,t)=>{t.preventDefault(),H.value=!0,b.value=r;const o="clientX"in t?t.clientX:t.touches[0].clientX,P="clientY"in t?t.clientY:t.touches[0].clientY;z.value=o,B.value=P,C.value=g.value,l.value=w.value,s.value=h.value,u.value=x.value,document.addEventListener("mousemove",L),document.addEventListener("mouseup",M),document.addEventListener("touchmove",L,{passive:!1}),document.addEventListener("touchend",M)},L=r=>{if(!H.value)return;r.preventDefault();const t="clientX"in r?r.clientX:r.touches[0].clientX,o="clientY"in r?r.clientY:r.touches[0].clientY,P=t-z.value,U=o-B.value,R=200,X=250,Y=800,$=1e3;let m=C.value,p=l.value,E=s.value,S=u.value;b.value==="bottom-right"?(m=C.value+P,S=u.value-U,p=l.value+U):b.value==="bottom-left"?(E=s.value+P,m=C.value-P,S=u.value-U,p=l.value+U):b.value==="top-right"?(m=C.value+P,p=l.value-U):b.value==="top-left"&&(E=s.value+P,m=C.value-P,p=l.value-U),m<R&&(E!==s.value&&(E-=R-m),m=R),p<X&&(S!==u.value&&(S-=X-p),p=X),m>Y&&(E!==s.value&&(E+=m-Y),m=Y),p>$&&(S!==u.value&&(S+=p-$),p=$),g.value=m,w.value=p,h.value=E,x.value=S},M=()=>{H.value=!1,b.value=null,document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",M),document.removeEventListener("touchmove",L),document.removeEventListener("touchend",M)};return e.onMounted(()=>{n.isPlaying&&i.value&&i.value.play().catch(r=>console.error("Video play failed:",r)),n.screenClientId&&n.wsUrl&&k()}),e.onUnmounted(()=>{a.value&&a.value.close()}),(r,t)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[d.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["virtual-human-container",{"is-dark":d.isDark}]),style:e.normalizeStyle({width:g.value+"px",height:w.value+"px",left:h.value+"px",bottom:x.value+"px"})},[e.createElementVNode("div",{class:"video-wrapper",ref_key:"wrapperRef",ref:W},[e.createElementVNode("video",{ref_key:"videoRef",ref:i,src:d.videoSrc,class:"persona-video",muted:d.muted,playsinline:"",loop:"",autoPlay:"",disablePictureInPicture:"false",onPlay:N,onPause:T,onEnded:I},null,40,F),d.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"resize-handle top-left",onMousedown:t[0]||(t[0]=o=>f("top-left",o)),onTouchstart:t[1]||(t[1]=o=>f("top-left",o))},null,32)):e.createCommentVNode("",!0),d.visible?(e.openBlock(),e.createElementBlock("div",{key:1,class:"resize-handle top-right",onMousedown:t[2]||(t[2]=o=>f("top-right",o)),onTouchstart:t[3]||(t[3]=o=>f("top-right",o))},null,32)):e.createCommentVNode("",!0),d.visible?(e.openBlock(),e.createElementBlock("div",{key:2,class:"resize-handle bottom-left",onMousedown:t[4]||(t[4]=o=>f("bottom-left",o)),onTouchstart:t[5]||(t[5]=o=>f("bottom-left",o))},null,32)):e.createCommentVNode("",!0),d.visible?(e.openBlock(),e.createElementBlock("div",{key:3,class:"resize-handle bottom-right",onMousedown:t[6]||(t[6]=o=>f("bottom-right",o)),onTouchstart:t[7]||(t[7]=o=>f("bottom-right",o))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",O,[d.isPlaying?(e.openBlock(),e.createElementBlock("div",J,[...t[9]||(t[9]=[e.createElementVNode("span",{class:"dot animate-pulse"},null,-1),e.createTextVNode(" 播放中 ",-1)])])):(e.openBlock(),e.createElementBlock("div",j,[...t[8]||(t[8]=[e.createElementVNode("span",{class:"dot"},null,-1),e.createTextVNode(" 暂停中 ",-1)])]))])],512)],6)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-6c9e435e"]]),D=e.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["eventNotifaction","end","pause","connected","error","playComplete"],setup(d,{emit:A}){const n=d,c=A,i=e.ref(null),W=e.ref(!1);let a=null,y=0,g=!1,w=0,h=!1;const x=()=>{a||(a=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),a.state==="suspended"&&!h&&a.resume()},H=()=>{g&&w===0&&(c("playComplete",n.screenClientId),g=!1)},b=l=>{if(x(),!!a)try{const s=window.atob(l),u=s.length,k=new Uint8Array(u);for(let f=0;f<u;f++)k[f]=s.charCodeAt(f);const V=new Int16Array(k.buffer),N=new Float32Array(V.length);for(let f=0;f<V.length;f++)N[f]=V[f]/32768;const T=a.createBuffer(1,N.length,24e3);T.getChannelData(0).set(N);const I=a.createBufferSource();I.buffer=T,I.connect(a.destination),y<a.currentTime&&(y=a.currentTime),I.start(y),y+=T.duration,w++,I.onended=()=>{w--,H()}}catch(s){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",s)}},z=l=>{switch(l){case"play":g=!1,w=0,y=0,h=!1,a&&a.state==="suspended"&&a.resume();break;case"resume":h=!1,a&&a.state==="suspended"&&a.resume();break;case"pause":h=!0,a&&a.state==="running"&&a.suspend();break;case"stop":h=!1,a&&(a.close(),a=null),y=0,g=!1,w=0;break;case"tts_complete":g=!0,H();break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${l}`)}},B=()=>{i.value&&i.value.close();try{const l=new URL(n.wsUrl);l.searchParams.append("sessionId",n.screenClientId+"-event"),i.value=new WebSocket(l.toString()),i.value.onopen=()=>{W.value=!0,c("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${n.wsUrl} for session ${n.screenClientId}-event`)},i.value.onmessage=s=>{try{const u=JSON.parse(s.data);C(u)}catch(u){console.error("[VirtualHumanEventAdapter] Failed to parse message:",s.data,u)}},i.value.onerror=s=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",s),c("error",s)},i.value.onclose=()=>{W.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(l){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",l),c("error",l)}},C=l=>{const{type:s,payload:u,action:k}=l;switch(console.log("msgmsg-002",l),s){case"audio":const V=(u==null?void 0:u.data)||l.data;V&&b(V);break;case"send_event":l.event&&c("eventNotifaction",l);break;case"control":k&&z(k);break;case"end":c("end",u);break;case"pause":c("pause",u);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${s}`)}};return e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&B()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&B()}),e.onMounted(()=>{n.screenClientId&&n.wsUrl&&B()}),e.onUnmounted(()=>{i.value&&i.value.close(),a&&a.close()}),(l,s)=>e.renderSlot(l.$slots,"default")}}),G={install:d=>{d.component("VirtualHumanPersona",q),d.component("VirtualHumanEventAdapter",D)}};v.VirtualHumanEventAdapter=D,v.VirtualHumanPersona=q,v.default=G,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(f,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(f=typeof globalThis<"u"?globalThis:f||self,n(f.VirtualHumanCf={},f.Vue))})(this,function(f,n){"use strict";const H=["src","muted"],U=((o,b)=>{const e=o.__vccOpts||o;for(const[s,a]of b)e[s]=a;return e})(n.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!1},isPlaying:{type:Boolean,default:!1},muted:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},screenClientId:{type:String,required:!1},wsUrl:{type:String,required:!1},styles:{type:Object,default:()=>({width:"400px",height:"500px",left:"16px",bottom:"16px"})}},emits:["update:isPlaying","ended","update:visible"],setup(o,{emit:b}){const e=o,s=b,a=n.ref(null),C=n.ref(null),t=n.ref(null),p=n.ref(!1),m=()=>{if(t.value&&t.value.close(),!(!e.wsUrl||!e.screenClientId))try{const i=new URL(e.wsUrl);i.searchParams.append("sessionId",e.screenClientId+"-persona"),t.value=new WebSocket(i.toString()),t.value.onopen=()=>{p.value=!0,console.log(`[VirtualHumanPersona] Connected to ${e.wsUrl} for session ${e.screenClientId}-persona`)},t.value.onmessage=u=>{try{const c=JSON.parse(u.data);w(c)}catch(c){console.error("[VirtualHumanPersona] Failed to parse message:",u.data,c)}},t.value.onerror=u=>{console.error("[VirtualHumanPersona] WebSocket error:",u)},t.value.onclose=()=>{p.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(i){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",i)}},w=i=>{const{type:u,action:c}=i;u==="control"&&(c==="play"||c==="resume"?(s("update:isPlaying",!0),s("update:visible",!0)):c==="pause"?s("update:isPlaying",!1):c==="stop"&&(s("update:isPlaying",!1),s("update:visible",!1),a.value&&(a.value.currentTime=0)))};n.watch(()=>e.screenClientId,()=>{e.screenClientId&&e.wsUrl&&m()}),n.watch(()=>e.wsUrl,()=>{e.screenClientId&&e.wsUrl&&m()}),n.watch(()=>e.isPlaying,i=>{a.value&&(i?a.value.play().catch(u=>console.error("Video play failed:",u)):a.value.pause())});const g=()=>{e.isPlaying||s("update:isPlaying",!0)},S=()=>{e.isPlaying&&s("update:isPlaying",!1)},k=()=>{s("update:isPlaying",!1),s("ended")};return n.onMounted(()=>{e.isPlaying&&a.value&&a.value.play().catch(i=>console.error("Video play failed:",i)),e.screenClientId&&e.wsUrl&&m()}),n.onUnmounted(()=>{t.value&&t.value.close()}),(i,u)=>(n.openBlock(),n.createBlock(n.Transition,{name:"fade"},{default:n.withCtx(()=>[o.visible?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(["virtual-human-container",{"is-dark":o.isDark}]),style:n.normalizeStyle(o.styles)},[n.createElementVNode("div",{class:"video-wrapper",ref_key:"wrapperRef",ref:C},[n.createElementVNode("video",{ref_key:"videoRef",ref:a,src:o.videoSrc,class:"persona-video",muted:o.muted,playsinline:"",loop:"",autoPlay:"",disablePictureInPicture:"false",onPlay:g,onPause:S,onEnded:k},null,40,H)],512)],6)):n.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-892abb8d"]]),A=n.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["eventNotifaction","end","pause","connected","error","playComplete"],setup(o,{emit:b}){const e=o,s=b,a=n.ref(null),C=n.ref(!1);let t=null,p=0,m=!1,w=0,g=!1;const S=()=>{t||(t=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),t.state==="suspended"&&!g&&t.resume()},k=()=>{m&&w===0&&(s("playComplete",e.screenClientId),m=!1)},i=r=>{if(S(),!!t)try{const l=window.atob(r),d=l.length,v=new Uint8Array(d);for(let y=0;y<d;y++)v[y]=l.charCodeAt(y);const h=new Int16Array(v.buffer),V=new Float32Array(h.length);for(let y=0;y<h.length;y++)V[y]=h[y]/32768;const I=t.createBuffer(1,V.length,24e3);I.getChannelData(0).set(V);const P=t.createBufferSource();P.buffer=I,P.connect(t.destination),p<t.currentTime&&(p=t.currentTime),P.start(p),p+=I.duration,w++,P.onended=()=>{w--,k()}}catch(l){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",l)}},u=r=>{switch(r){case"play":m=!1,w=0,p=0,g=!1,t&&t.state==="suspended"&&t.resume();break;case"resume":g=!1,t&&t.state==="suspended"&&t.resume();break;case"pause":g=!0,t&&t.state==="running"&&t.suspend();break;case"stop":g=!1,t&&(t.close(),t=null),p=0,m=!1,w=0;break;case"tts_complete":m=!0,k();break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${r}`)}},c=()=>{a.value&&a.value.close();try{const r=new URL(e.wsUrl);r.searchParams.append("sessionId",e.screenClientId+"-event"),a.value=new WebSocket(r.toString()),a.value.onopen=()=>{C.value=!0,s("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${e.wsUrl} for session ${e.screenClientId}-event`)},a.value.onmessage=l=>{try{const d=JSON.parse(l.data);E(d)}catch(d){console.error("[VirtualHumanEventAdapter] Failed to parse message:",l.data,d)}},a.value.onerror=l=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",l),s("error",l)},a.value.onclose=()=>{C.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(r){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",r),s("error",r)}},E=r=>{const{type:l,payload:d,action:v}=r;switch(console.log("msgmsg-002",r),l){case"audio":const h=(d==null?void 0:d.data)||r.data;h&&i(h);break;case"send_event":r.event&&s("eventNotifaction",r);break;case"control":v&&u(v);break;case"end":s("end",d);break;case"pause":s("pause",d);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${l}`)}};return n.watch(()=>e.screenClientId,()=>{e.screenClientId&&e.wsUrl&&c()}),n.watch(()=>e.wsUrl,()=>{e.screenClientId&&e.wsUrl&&c()}),n.onMounted(()=>{e.screenClientId&&e.wsUrl&&c()}),n.onUnmounted(()=>{a.value&&a.value.close(),t&&t.close()}),(r,l)=>n.renderSlot(r.$slots,"default")}}),_={install:o=>{o.component("VirtualHumanPersona",U),o.component("VirtualHumanEventAdapter",A)}};f.VirtualHumanEventAdapter=A,f.VirtualHumanPersona=U,f.default=_,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-human-cf",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "description": "Vue3 Digital Human Component Package by cf ",
   "main": "dist/virtual-human-cf.umd.js",
   "module": "dist/virtual-human-cf.es.js",

package/src/components/VirtualHumanPersona.vue

@@ -4,12 +4,7 @@
       v-if="visible"
       class="virtual-human-container"
       :class="{ 'is-dark': isDark }"
-      :style="{
-        width: containerWidth + 'px',
-        height: containerHeight + 'px',
-        left: containerLeft + 'px',
-        bottom: containerBottom + 'px'
-      }"
+      :style="styles"
     >
       <div class="video-wrapper" ref="wrapperRef">
         <video
@@ -25,44 +20,6 @@
           @pause="handlePause"
           @ended="handleEnded"
         ></video>
-
-        <!-- 缩放控制点 - 四个角 -->
-        <div
-          v-if="visible"
-          class="resize-handle top-left"
-          @mousedown="startResize('top-left', $event)"
-          @touchstart="startResize('top-left', $event)"
-        ></div>
-        <div
-          v-if="visible"
-          class="resize-handle top-right"
-          @mousedown="startResize('top-right', $event)"
-          @touchstart="startResize('top-right', $event)"
-        ></div>
-        <div
-          v-if="visible"
-          class="resize-handle bottom-left"
-          @mousedown="startResize('bottom-left', $event)"
-          @touchstart="startResize('bottom-left', $event)"
-        ></div>
-        <div
-          v-if="visible"
-          class="resize-handle bottom-right"
-          @mousedown="startResize('bottom-right', $event)"
-          @touchstart="startResize('bottom-right', $event)"
-        ></div>
-
-        <!-- UI Overlay for controls or status -->
-        <div class="overlay">
-          <div v-if="!isPlaying" class="status-badge paused">
-            <span class="dot"></span>
-            暂停中
-          </div>
-          <div v-else class="status-badge playing">
-            <span class="dot animate-pulse"></span>
-            播放中
-          </div>
-        </div>
       </div>
     </div>
   </Transition>
@@ -106,6 +63,15 @@ const props = defineProps({
   wsUrl: {
     type: String,
     required: false,
+  },
+  styles: {
+    type: Object,
+    default: () => ({
+      width:'400px',
+      height:'500px',
+      left: '16px',
+      bottom:'16px'
+    })
   }
 });
 
@@ -117,20 +83,6 @@ const wrapperRef = ref<HTMLDivElement | null>(null);
 const ws = ref<WebSocket | null>(null);
 const isConnected = ref(false);
 
-// 缩放相关状态
-const containerWidth = ref(400);
-const containerHeight = ref(500);
-const containerLeft = ref(16);
-const containerBottom = ref(16);
-
-const isResizing = ref(false);
-const resizeHandle = ref<string | null>(null);
-const startX = ref(0);
-const startY = ref(0);
-const startW = ref(0);
-const startH = ref(0);
-const startL = ref(0);
-const startB = ref(0);
 
 const connectWebSocket = () => {
   if (ws.value) {
@@ -229,99 +181,7 @@ const handleEnded = () => {
   emit('ended');
 };
 
-// 缩放功能
-const startResize = (handle: string, event: MouseEvent | TouchEvent) => {
-  event.preventDefault();
-  isResizing.value = true;
-  resizeHandle.value = handle;
-
-  const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX;
-  const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY;
-  startX.value = clientX;
-  startY.value = clientY;
-
-  startW.value = containerWidth.value;
-  startH.value = containerHeight.value;
-  startL.value = containerLeft.value;
-  startB.value = containerBottom.value;
-
-  document.addEventListener('mousemove', handleResize);
-  document.addEventListener('mouseup', stopResize);
-  document.addEventListener('touchmove', handleResize, { passive: false });
-  document.addEventListener('touchend', stopResize);
-};
 
-const handleResize = (event: MouseEvent | TouchEvent) => {
-  if (!isResizing.value) return;
-  event.preventDefault();
-
-  const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX;
-  const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY;
-
-  const deltaX = clientX - startX.value;
-  const deltaY = clientY - startY.value;
-
-  const minWidth = 200;
-  const minHeight = 250;
-  const maxWidth = 800;
-  const maxHeight = 1000;
-
-  let newW = startW.value;
-  let newH = startH.value;
-  let newL = startL.value;
-  let newB = startB.value;
-
-  if (resizeHandle.value === 'bottom-right') {
-    newW = startW.value + deltaX;
-    newB = startB.value - deltaY;
-    newH = startH.value + deltaY;
-  } else if (resizeHandle.value === 'bottom-left') {
-    newL = startL.value + deltaX;
-    newW = startW.value - deltaX;
-    newB = startB.value - deltaY;
-    newH = startH.value + deltaY;
-  } else if (resizeHandle.value === 'top-right') {
-    newW = startW.value + deltaX;
-    newH = startH.value - deltaY;
-  } else if (resizeHandle.value === 'top-left') {
-    newL = startL.value + deltaX;
-    newW = startW.value - deltaX;
-    newH = startH.value - deltaY;
-  }
-
-  // 约束最小宽高
-  if (newW < minWidth) {
-    if (newL !== startL.value) newL -= (minWidth - newW);
-    newW = minWidth;
-  }
-  if (newH < minHeight) {
-    if (newB !== startB.value) newB -= (minHeight - newH);
-    newH = minHeight;
-  }
-  // 约束最大宽高
-  if (newW > maxWidth) {
-    if (newL !== startL.value) newL += (newW - maxWidth);
-    newW = maxWidth;
-  }
-  if (newH > maxHeight) {
-    if (newB !== startB.value) newB += (newH - maxHeight);
-    newH = maxHeight;
-  }
-
-  containerWidth.value = newW;
-  containerHeight.value = newH;
-  containerLeft.value = newL;
-  containerBottom.value = newB;
-};
-
-const stopResize = () => {
-  isResizing.value = false;
-  resizeHandle.value = null;
-  document.removeEventListener('mousemove', handleResize);
-  document.removeEventListener('mouseup', stopResize);
-  document.removeEventListener('touchmove', handleResize);
-  document.removeEventListener('touchend', stopResize);
-};
 
 onMounted(() => {
   if (props.isPlaying && videoRef.value) {