tuikit-atomicx-vue3 3.4.2 → 4.3.0

package/dist/components/StreamView/manager/mediaManager.js

@@ -1,75 +1,69 @@
 var R = Object.defineProperty;
-var w = (o, t, e) => t in o ? R(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var y = (o, t, e) => w(o, typeof t != "symbol" ? t + "" : t, e);
-import P, { TUIVideoStreamType as c, TRTCVideoStreamType as V, TRTCVideoFillMode as M, TRTCVideoRotation as D, TRTCVideoMirrorType as E, TUIRoomEvents as S } from "@tencentcloud/tuiroom-engine-js";
-import { useUserState as U } from "../../../states/UserState/index.js";
-import { innerUserStore as L } from "../../../states/UserState/store.js";
-import { useRoomEngine as O } from "../../../hooks/useRoomEngine.js";
-import { useLiveState as k } from "../../../states/LiveState/index.js";
-import { useVideoMixerState as A } from "../../../states/VideoMixerState.js";
-import { watch as _ } from "vue";
-import { LiveStatus as $ } from "../../../types/live.js";
+var w = (a, t, e) => t in a ? R(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var p = (a, t, e) => w(a, typeof t != "symbol" ? t + "" : t, e);
+import P, { TUIVideoStreamType as c, TRTCVideoStreamType as V, TRTCVideoFillMode as M, TRTCVideoRotation as D, TRTCVideoMirrorType as E, TUIRoomEvents as f } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as U } from "../../../hooks/useRoomEngine.js";
+import { useUserState as O } from "../../../states/UserState/index.js";
+import { innerUserStore as k } from "../../../states/UserState/store.js";
+import { useVideoMixerState as L } from "../../../states/VideoMixerState/VideoMixerState.js";
 import { StreamPlayStatus as h } from "../../../types/user.js";
-const { localUser: v } = U(), { isVideoMixerEnabled: C } = A(), { localLiveStatus: x } = k(), l = O(), f = /* @__PURE__ */ new Map();
-function B(o, t) {
+const { localUser: S } = O(), { isVideoMixerEnabled: C } = L(), l = U(), T = /* @__PURE__ */ new Map();
+function A(a, t) {
   var r;
-  f.get(`${o.userId}-${o.streamType}`) || f.set(`${o.userId}-${o.streamType}`, /* @__PURE__ */ new Map()), (r = f.get(`${o.userId}-${o.streamType}`)) == null || r.set(t.view, t.streamType);
+  T.get(`${a.userId}-${a.streamType}`) || T.set(`${a.userId}-${a.streamType}`, /* @__PURE__ */ new Map()), (r = T.get(`${a.userId}-${a.streamType}`)) == null || r.set(t.view, t.streamType);
 }
-function T(o) {
-  return f.get(`${o.userId}-${o.streamType}`);
+function v(a) {
+  return T.get(`${a.userId}-${a.streamType}`);
 }
-_(x, (o) => {
-  o === $.IDLE && f.clear();
-});
-function b(o) {
-  if (o.userId === "local_fake_user")
+function b(a) {
+  if (a.userId === "local_fake_user")
     return;
-  const { userId: t, streamType: e, playStatus: r } = o, a = e === c.kScreenStream ? {
+  const { userId: t, streamType: e, playStatus: r } = a, o = e === c.kScreenStream ? {
     screenPlayStatus: r
   } : {
     cameraPlayStatus: r
   };
-  L.updateUserInfo({ userId: t, ...a });
+  k.updateUserInfo({ userId: t, ...o });
 }
-var F = /* @__PURE__ */ ((o) => (o.PLAY = "play", o.STOP = "stop", o.PLAY_IN_VISIBLE = "playInVisible", o))(F || {}), z = /* @__PURE__ */ ((o) => (o.HIGH = "high", o.LOW = "low", o.Default = "default", o))(z || {});
-class Z {
+var _ = /* @__PURE__ */ ((a) => (a.PLAY = "play", a.STOP = "stop", a.PLAY_IN_VISIBLE = "playInVisible", a))(_ || {}), $ = /* @__PURE__ */ ((a) => (a.HIGH = "high", a.LOW = "low", a.Default = "default", a))($ || {});
+class G {
   constructor() {
-    y(this, "intersectionObserver", null);
-    y(this, "observerDataMap", /* @__PURE__ */ new Map());
-    y(this, "observerRoot", null);
-    y(this, "onUserVideoStateChanged", (t) => {
+    p(this, "intersectionObserver", null);
+    p(this, "observerDataMap", /* @__PURE__ */ new Map());
+    p(this, "observerRoot", null);
+    p(this, "onUserVideoStateChanged", (t) => {
     });
     this.bindRoomEngineEvents();
   }
   async startPlayVideo(t) {
     var s, n;
-    const { userId: e, streamType: r, view: a, observerViewInVisible: i } = t;
+    const { userId: e, streamType: r, view: o, observerViewInVisible: i } = t;
     if (console.info(
       "MediaManager.startPlayVideo",
       e,
       r,
-      a,
+      o,
       i
-    ), B({ userId: e, streamType: r }, { view: a, streamType: r }), !i) {
+    ), A({ userId: e, streamType: r }, { view: o, streamType: r }), !i) {
       await this.doStartPlayVideo({ userId: e, streamType: r });
       return;
     }
     this.initIntersectionObserver(), this.observerDataMap.set(
-      a,
-      Object.assign(this.observerDataMap.get(a) || {}, {
+      o,
+      Object.assign(this.observerDataMap.get(o) || {}, {
         userId: e,
         streamType: r
       })
-    ), (s = this.intersectionObserver) == null || s.observe(a), (n = this.observerDataMap.get(a)) != null && n.isIntersection && await this.doStartPlayVideo({ userId: e, streamType: r });
+    ), (s = this.intersectionObserver) == null || s.observe(o), (n = this.observerDataMap.get(o)) != null && n.isIntersection && await this.doStartPlayVideo({ userId: e, streamType: r });
   }
   // If only one view wants to stop playing, update the viewList, but don't stop the stream.
   // If no view is passed in, the stream is stopped.
   async stopPlayVideo(t) {
     var s;
-    const { userId: e, streamType: r, view: a } = t;
-    console.info("MediaManager.stopPlayVideo", e, r, a);
-    const i = T({ userId: e, streamType: r });
-    !i || i.size === 0 || (this.observerDataMap.get(a) && (this.observerDataMap.delete(a), (s = this.intersectionObserver) == null || s.unobserve(a)), i.delete(a), i.size > 0 ? await this.doStartPlayVideo({
+    const { userId: e, streamType: r, view: o } = t;
+    console.info("MediaManager.stopPlayVideo", e, r, o);
+    const i = v({ userId: e, streamType: r });
+    !i || i.size === 0 || (this.observerDataMap.get(o) && (this.observerDataMap.delete(o), (s = this.intersectionObserver) == null || s.unobserve(o)), i.delete(o), i.size > 0 ? await this.doStartPlayVideo({
       userId: e,
       streamType: r
     }) : await this.doStopPlayVideo(t));
@@ -88,16 +82,16 @@ class Z {
   }
   intersectionObserverCallback(t) {
     t.forEach((e) => {
-      const { isIntersecting: r, target: a } = e, i = this.observerDataMap.get(a);
+      const { isIntersecting: r, target: o } = e, i = this.observerDataMap.get(o);
       if (!i)
         return;
-      const { userId: s, streamType: n } = i, d = T({ userId: s, streamType: n });
+      const { userId: s, streamType: n } = i, d = v({ userId: s, streamType: n });
       d && (r ? (i.isIntersection = !0, d && d.size > 0 && this.doStartPlayVideo({ userId: s, streamType: n })) : (i.isIntersection = !1, Array.from(
         (d == null ? void 0 : d.keys()) || []
       ).find(
-        (m) => {
-          var p;
-          return !this.observerDataMap.get(m) || ((p = this.observerDataMap.get(m)) == null ? void 0 : p.isIntersection);
+        (y) => {
+          var m;
+          return !this.observerDataMap.get(y) || ((m = this.observerDataMap.get(y)) == null ? void 0 : m.isIntersection);
         }
       ) || this.doStopPlayVideo({ userId: s, streamType: n })));
     });
@@ -105,16 +99,16 @@ class Z {
   getPlayStreamType(t, e) {
     if (e === c.kScreenStream)
       return e;
-    const r = T({ userId: t, streamType: e });
+    const r = v({ userId: t, streamType: e });
     return r && r.size > 0 ? Array.from(r.values()).includes(c.kCameraStream) ? c.kCameraStream : c.kCameraStreamLow : e;
   }
   async doStartPlayVideo(t) {
-    var n, d, g, m, p, I;
-    const { userId: e, streamType: r } = t, a = T({ userId: e, streamType: r });
-    if (!a)
+    var n, d, g, y, m, I;
+    const { userId: e, streamType: r } = t, o = v({ userId: e, streamType: r });
+    if (!o)
       return;
-    const i = this.getPlayStreamType(e, r), s = Array.from(a.keys()).map((u) => u instanceof HTMLElement ? u == null ? void 0 : u.id : u);
-    b({ userId: e, streamType: r, playStatus: h.Loading }), e === ((n = v.value) == null ? void 0 : n.userId) ? r === c.kCameraStream ? C.value ? ((d = l.instance) == null ? void 0 : d.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(document.getElementById(s[0])) : (g = l.instance) == null || g.setLocalVideoView({ view: s }) : await ((m = l.instance) == null ? void 0 : m.getTRTCCloud()._trtc).updateScreenShare({ view: document.getElementById(s[0]) }) : ((p = l.instance) == null || p.setRemoteVideoView({
+    const i = this.getPlayStreamType(e, r), s = Array.from(o.keys()).map((u) => u instanceof HTMLElement ? u == null ? void 0 : u.id : u);
+    b({ userId: e, streamType: r, playStatus: h.Loading }), e === ((n = S.value) == null ? void 0 : n.userId) ? r === c.kCameraStream ? C.value ? ((d = l.instance) == null ? void 0 : d.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(document.getElementById(s[0])) : (g = l.instance) == null || g.setLocalVideoView({ view: s }) : await ((y = l.instance) == null ? void 0 : y.getTRTCCloud()._trtc).updateScreenShare({ view: document.getElementById(s[0]) }) : ((m = l.instance) == null || m.setRemoteVideoView({
       userId: e,
       streamType: i,
       view: s
@@ -124,9 +118,9 @@ class Z {
     }))), b({ userId: e, streamType: r, playStatus: h.Playing });
   }
   async setVideoRenderParams(t) {
-    var a, i;
+    var o, i;
     const { userId: e, streamType: r } = t;
-    if (e !== ((a = v.value) == null ? void 0 : a.userId)) {
+    if (e !== ((o = S.value) == null ? void 0 : o.userId)) {
       const s = (i = l.instance) == null ? void 0 : i.getTRTCCloud(), n = r === c.kScreenStream ? V.TRTCVideoStreamTypeSub : V.TRTCVideoStreamTypeBig;
       if (e.indexOf("livekit_") !== 0) {
         let d = M.TRTCVideoFillMode_Fit;
@@ -139,9 +133,9 @@ class Z {
     }
   }
   async doStopPlayVideo(t) {
-    var a, i, s, n;
+    var o, i, s, n;
     const { userId: e, streamType: r } = t;
-    e === ((a = v.value) == null ? void 0 : a.userId) && C.value || (b({ userId: e, streamType: r, playStatus: h.Stopped }), e === ((i = v.value) == null ? void 0 : i.userId) && r === c.kCameraStream ? (s = l.instance) == null || s.setLocalVideoView({ view: null }) : await ((n = l.instance) == null ? void 0 : n.stopPlayRemoteVideo({
+    e === ((o = S.value) == null ? void 0 : o.userId) && C.value || (b({ userId: e, streamType: r, playStatus: h.Stopped }), e === ((i = S.value) == null ? void 0 : i.userId) && r === c.kCameraStream ? (s = l.instance) == null || s.setLocalVideoView({ view: null }) : await ((n = l.instance) == null ? void 0 : n.stopPlayRemoteVideo({
       userId: e,
       streamType: r
     })));
@@ -155,10 +149,10 @@ class Z {
     P.once("ready", () => {
       var t, e;
       (t = l.instance) == null || t.on(
-        S.onUserVideoStateChanged,
+        f.onUserVideoStateChanged,
         this.onUserVideoStateChanged.bind(this)
       ), (e = l.instance) == null || e.on(
-        S.onUserAudioStateChanged,
+        f.onUserAudioStateChanged,
         this.onUserAudioStateChanged.bind(this)
       );
     });
@@ -166,16 +160,16 @@ class Z {
   unbindRoomEngineEvents() {
     var t, e;
     (t = l.instance) == null || t.off(
-      S.onUserVideoStateChanged,
+      f.onUserVideoStateChanged,
       this.onUserVideoStateChanged
     ), (e = l.instance) == null || e.off(
-      S.onUserAudioStateChanged,
+      f.onUserAudioStateChanged,
       this.onUserAudioStateChanged
     );
   }
 }
 export {
-  Z as MediaManager,
-  F as StreamPlayMode,
-  z as StreamPlayQuality
+  G as MediaManager,
+  _ as StreamPlayMode,
+  $ as StreamPlayQuality
 };

package/dist/components/VideoSetting/CameraSelect.js

@@ -1,7 +1,7 @@
-import { defineComponent as h, ref as I, watch as _, onBeforeMount as b, createBlock as m, openBlock as o, unref as d, withCtx as g, createElementBlock as y, Fragment as B, renderList as k } from "vue";
+import { defineComponent as h, ref as I, watch as _, onBeforeMount as b, createBlock as m, openBlock as o, unref as n, withCtx as g, createElementBlock as y, Fragment as B, renderList as k } from "vue";
 import w from "../../baseComp/Select/SelectPC.js";
 import x from "../../baseComp/Option/OptionPC.js";
-import { useDeviceState as S } from "../../states/DeviceState.js";
+import { useDeviceState as S } from "../../states/DeviceState/DeviceState.js";
 import { _ as L } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const V = /* @__PURE__ */ h({
   __name: "CameraSelect",
@@ -9,9 +9,9 @@ const V = /* @__PURE__ */ h({
     onChange: {},
     disabled: { type: Boolean, default: !1 }
   },
-  setup(n) {
+  setup(d) {
     var i;
-    const { cameraList: c, currentCamera: t, setCurrentCamera: p, getCameraList: v } = S(), u = n, l = I((i = t.value) == null ? void 0 : i.deviceId);
+    const { cameraList: c, currentCamera: t, setCurrentCamera: p, getCameraList: v } = S(), u = d, l = I((i = t.value) == null ? void 0 : i.deviceId);
     _(
       () => {
         var e;
@@ -35,18 +35,18 @@ const V = /* @__PURE__ */ h({
     }
     return b(async () => {
       await v();
-    }), (e, r) => (o(), m(d(w), {
+    }), (e, r) => (o(), m(n(w), {
       modelValue: l.value,
       "onUpdate:modelValue": r[0] || (r[0] = (a) => l.value = a),
       placeholder: "placeholder",
       class: "select",
-      disabled: n.disabled,
+      disabled: d.disabled,
       teleported: !1,
       "popper-append-to-body": !1,
       onChange: f
     }, {
       default: g(() => [
-        (o(!0), y(B, null, k(d(c), (a) => (o(), m(d(x), {
+        (o(!0), y(B, null, k(n(c), (a) => (o(), m(n(x), {
           key: a.deviceId,
           label: a.deviceName,
           value: a.deviceId
@@ -55,7 +55,7 @@ const V = /* @__PURE__ */ h({
       _: 1
     }, 8, ["modelValue", "disabled"]));
   }
-}), O = /* @__PURE__ */ L(V, [["__scopeId", "data-v-2d3ccda4"]]);
+}), O = /* @__PURE__ */ L(V, [["__scopeId", "data-v-991fca18"]]);
 export {
   O as default
 };

package/dist/components/VideoSetting/VideoMediaControl.js

@@ -4,17 +4,17 @@ import E from "../../baseComp/IconButton.js";
 import P from "./VideoSettingTab.js";
 import { useI18n as L } from "../../locales/index.js";
 import N from "../../directives/vClickOutside.js";
-import { useDeviceState as R } from "../../states/DeviceState.js";
-import { useUserState as U } from "../../states/UserState/index.js";
-import { useRoomState as j } from "../../states/RoomState.js";
+import { useUserState as R } from "../../states/UserState/index.js";
+import { useRoomState as U } from "../../states/RoomState.js";
+import { useDeviceState as j } from "../../states/DeviceState/DeviceState.js";
 import { DeviceError as F, DeviceStatus as s, MediaSettingDisplayMode as H } from "../../types/device.js";
 import { _ as W } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const q = { class: "video-control-container" }, A = /* @__PURE__ */ T({
   __name: "VideoMediaControl",
   emits: ["click-icon"],
   setup(G, { emit: C }) {
-    const _ = V("videoSettingProps"), k = C, { cameraStatus: n, cameraLastError: S, isCameraTesting: c, startCameraDeviceTest: h, stopCameraDeviceTest: w, openLocalCamera: y, closeLocalCamera: g } = R(), { localUser: I } = U(), { currentRoom: l } = j(), { t: b } = L(), t = x(!1);
-    async function D() {
+    const _ = V("videoSettingProps"), k = C, { cameraStatus: n, cameraLastError: S, isCameraTesting: c, startCameraDeviceTest: h, stopCameraDeviceTest: w, openLocalCamera: y, closeLocalCamera: g } = j(), { localUser: I } = R(), { currentRoom: l } = U(), { t: D } = L(), t = x(!1);
+    async function M() {
       var a;
       if (t.value = !1, k("click-icon"), !l.value) {
         c.value ? await w() : await h({ view: "video-preview" });
@@ -22,7 +22,7 @@ const q = { class: "video-control-container" }, A = /* @__PURE__ */ T({
       }
       ((a = I.value) == null ? void 0 : a.cameraStatus) === s.On ? await g() : await y();
     }
-    function M() {
+    function b() {
       t.value = !t.value;
     }
     function O() {
@@ -32,12 +32,12 @@ const q = { class: "video-control-container" }, A = /* @__PURE__ */ T({
       var m;
       return d((o(), r("div", q, [
         f(E, {
-          title: e(b)("Camera"),
+          title: e(D)("Camera"),
           "has-more": ((m = e(_)) == null ? void 0 : m.displayMode) === e(H).IconWithPanel,
           disabled: e(n) === e(s).OffNeedPermission,
           "is-not-support": e(S) !== e(F).NoError,
-          onClickIcon: D,
-          onClickMore: M
+          onClickIcon: M,
+          onClickMore: b
         }, {
           default: z(() => [
             e(l) ? (o(), r(u, { key: 1 }, [
@@ -68,7 +68,7 @@ const q = { class: "video-control-container" }, A = /* @__PURE__ */ T({
       ]);
     };
   }
-}), re = /* @__PURE__ */ W(A, [["__scopeId", "data-v-817b8c43"]]);
+}), re = /* @__PURE__ */ W(A, [["__scopeId", "data-v-95f3c5e7"]]);
 export {
   re as default
 };

package/dist/components/VideoSetting/VideoPreview.js

@@ -1,8 +1,8 @@
-import { defineComponent as p, onMounted as v, onUnmounted as f, createElementBlock as n, openBlock as o, createElementVNode as r, createCommentVNode as s, createBlock as _, unref as e, toDisplayString as l } from "vue";
+import { defineComponent as p, onMounted as v, onUnmounted as f, createElementBlock as n, openBlock as o, createElementVNode as a, createCommentVNode as r, createBlock as _, unref as e, toDisplayString as l } from "vue";
 import { IconLoading as u } from "@tencentcloud/uikit-base-component-vue3";
 import { useI18n as w } from "../../locales/index.js";
 import C from "@tencentcloud/tuiroom-engine-js";
-import { useDeviceState as g } from "../../states/DeviceState.js";
+import { useDeviceState as g } from "../../states/DeviceState/DeviceState.js";
 import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const k = { class: "video-preview-container" }, T = { class: "attention-info" }, D = {
   key: 0,
@@ -10,7 +10,7 @@ const k = { class: "video-preview-container" }, T = { class: "attention-info" },
 }, I = /* @__PURE__ */ p({
   __name: "VideoPreview",
   setup(V) {
-    const { t: a } = w(), { isCameraTesting: c, isCameraTestLoading: t, startCameraDeviceTest: m, stopCameraDeviceTest: d } = g();
+    const { t: s } = w(), { isCameraTesting: c, isCameraTestLoading: t, startCameraDeviceTest: m, stopCameraDeviceTest: d } = g();
     return v(async () => {
       C.once("ready", () => {
         m({ view: "video-preview" });
@@ -18,21 +18,21 @@ const k = { class: "video-preview-container" }, T = { class: "attention-info" },
     }), f(async () => {
       await d();
     }), (x, i) => (o(), n("div", k, [
-      i[0] || (i[0] = r("div", {
+      i[0] || (i[0] = a("div", {
         id: "video-preview",
         class: "video-preview"
       }, null, -1)),
-      r("div", T, [
-        !e(c) && !e(t) ? (o(), n("span", D, l(e(a)("Off Camera")), 1)) : s("", !0),
+      a("div", T, [
+        !e(c) && !e(t) ? (o(), n("span", D, l(e(s)("Off Camera")), 1)) : r("", !0),
         e(t) ? (o(), _(e(u), {
           key: 1,
           size: "36",
           class: "loading"
-        })) : s("", !0)
+        })) : r("", !0)
       ])
     ]));
   }
-}), S = /* @__PURE__ */ y(I, [["__scopeId", "data-v-c8d74200"]]);
+}), P = /* @__PURE__ */ y(I, [["__scopeId", "data-v-02a8db1b"]]);
 export {
-  S as default
+  P as default
 };

package/dist/components/VideoSetting/VideoProfile.js

@@ -3,12 +3,12 @@ import k from "../../baseComp/Select/SelectPC.js";
 import Q from "../../baseComp/Option/OptionPC.js";
 import { useI18n as D } from "../../locales/index.js";
 import { TUIVideoQuality as t } from "@tencentcloud/tuiroom-engine-js";
-import { useDeviceState as h } from "../../states/DeviceState.js";
+import { useDeviceState as h } from "../../states/DeviceState/DeviceState.js";
 import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const C = /* @__PURE__ */ m({
   __name: "VideoProfile",
   setup(P) {
-    const { t: e } = D(), p = s(() => [
+    const { t: e } = D(), d = s(() => [
       { label: e("Low Definition"), value: t.kVideoQuality_360p },
       {
         label: e("Standard Definition"),
@@ -19,9 +19,9 @@ const C = /* @__PURE__ */ m({
         label: e("Super Definition"),
         value: t.kVideoQuality_1080p
       }
-    ]), { localVideoQuality: l, updateVideoQuality: d } = h();
+    ]), { localVideoQuality: l, updateVideoQuality: p } = h();
     return c(l, (r) => {
-      d({ quality: r });
+      p({ quality: r });
     }), (r, u) => (a(), n(i(k), {
       modelValue: i(l),
       "onUpdate:modelValue": u[0] || (u[0] = (o) => _(l) ? l.value = o : null),
@@ -31,7 +31,7 @@ const C = /* @__PURE__ */ m({
       "popper-append-to-body": !1
     }, {
       default: v(() => [
-        (a(!0), V(y, null, b(p.value, (o, f) => (a(), n(i(Q), {
+        (a(!0), V(y, null, b(d.value, (o, f) => (a(), n(i(Q), {
           key: f,
           label: o.label,
           value: o.value
@@ -40,7 +40,7 @@ const C = /* @__PURE__ */ m({
       _: 1
     }, 8, ["modelValue"]));
   }
-}), q = /* @__PURE__ */ x(C, [["__scopeId", "data-v-eee0ba5d"]]);
+}), q = /* @__PURE__ */ x(C, [["__scopeId", "data-v-9fdbdd69"]]);
 export {
   q as default
 };

package/dist/components/VideoSetting/VideoSettingTab.js

@@ -1,59 +1,60 @@
-import { defineComponent as S, inject as V, watch as w, createElementBlock as t, openBlock as o, createCommentVNode as n, unref as e, createElementVNode as a, createVNode as c, toDisplayString as l, isRef as g } from "vue";
+import { defineComponent as V, ref as w, inject as g, watch as y, createElementBlock as t, openBlock as o, createCommentVNode as s, unref as e, createElementVNode as n, createVNode as a, toDisplayString as c } from "vue";
 import k from "./CameraSelect.js";
-import y from "./VideoProfile.js";
-import P from "./VideoPreview.js";
-import b from "../../baseComp/TuiSwitch.js";
-import { useI18n as C } from "../../locales/index.js";
-import { useDeviceState as M } from "../../states/DeviceState.js";
+import P from "./VideoProfile.js";
+import C from "./VideoPreview.js";
+import M from "../../baseComp/TuiSwitch.js";
+import { useI18n as b } from "../../locales/index.js";
+import { useDeviceState as T } from "../../states/DeviceState/DeviceState.js";
+import { MirrorType as v } from "../../types/device.js";
 import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const N = { class: "video-tab" }, R = {
+const D = { class: "video-tab" }, N = {
   key: 0,
   class: "item-setting"
-}, T = { class: "title" }, B = {
+}, B = { class: "title" }, E = {
   key: 1,
   class: "item-setting"
-}, D = { class: "title" }, E = {
+}, I = { class: "title" }, R = {
   key: 2,
   class: "item-setting"
-}, I = { class: "title" }, j = {
+}, j = { class: "title" }, A = {
   key: 3,
   class: "mirror-container"
-}, L = /* @__PURE__ */ S({
+}, L = /* @__PURE__ */ V({
   __name: "VideoSettingTab",
   setup(U) {
-    const { t: i } = C(), { isLocalMirror: s, switchMirror: f } = M(), r = V("videoSettingProps");
-    return w(
-      s,
-      async (m) => {
-        f({ mirror: m });
+    const { t: i } = b(), { switchMirror: h } = T(), m = w(!0), r = g("videoSettingProps");
+    return y(
+      m,
+      async (l) => {
+        h({ mirror: l ? v.Auto : v.Disable });
       },
       { immediate: !0 }
-    ), (m, d) => {
-      var p, _, u, v;
-      return o(), t("div", N, [
-        (p = e(r)) != null && p.supportSwitchCamera ? (o(), t("div", R, [
-          a("span", T, l(e(i)("Camera")), 1),
-          c(k)
-        ])) : n("", !0),
-        (_ = e(r)) != null && _.supportVideoPreview ? (o(), t("div", B, [
-          a("span", D, l(e(i)("Preview")), 1),
-          c(P, { class: "video-preview" })
-        ])) : n("", !0),
-        (u = e(r)) != null && u.supportSwitchResolution ? (o(), t("div", E, [
-          a("span", I, l(e(i)("Resolution")), 1),
-          c(y)
-        ])) : n("", !0),
-        (v = e(r)) != null && v.supportSwitchMirror ? (o(), t("div", j, [
-          a("span", null, l(e(i)("Mirror")), 1),
-          c(b, {
-            modelValue: e(s),
-            "onUpdate:modelValue": d[0] || (d[0] = (h) => g(s) ? s.value = h : null)
+    ), (l, p) => {
+      var d, u, _, f;
+      return o(), t("div", D, [
+        (d = e(r)) != null && d.supportSwitchCamera ? (o(), t("div", N, [
+          n("span", B, c(e(i)("Camera")), 1),
+          a(k)
+        ])) : s("", !0),
+        (u = e(r)) != null && u.supportVideoPreview ? (o(), t("div", E, [
+          n("span", I, c(e(i)("Preview")), 1),
+          a(C, { class: "video-preview" })
+        ])) : s("", !0),
+        (_ = e(r)) != null && _.supportSwitchResolution ? (o(), t("div", R, [
+          n("span", j, c(e(i)("Resolution")), 1),
+          a(P)
+        ])) : s("", !0),
+        (f = e(r)) != null && f.supportSwitchMirror ? (o(), t("div", A, [
+          n("span", null, c(e(i)("Mirror")), 1),
+          a(M, {
+            modelValue: m.value,
+            "onUpdate:modelValue": p[0] || (p[0] = (S) => m.value = S)
           }, null, 8, ["modelValue"])
-        ])) : n("", !0)
+        ])) : s("", !0)
       ]);
     };
   }
-}), O = /* @__PURE__ */ x(L, [["__scopeId", "data-v-95abbd8e"]]);
+}), W = /* @__PURE__ */ x(L, [["__scopeId", "data-v-4e153eef"]]);
 export {
-  O as default
+  W as default
 };

package/dist/components/VideoSettingPanel/CameraSelect.js

@@ -1,6 +1,6 @@
-import { defineComponent as I, ref as h, watch as _, onBeforeMount as b, createBlock as m, openBlock as o, unref as n, withCtx as g, createElementBlock as y, Fragment as B, renderList as k } from "vue";
+import { defineComponent as I, ref as h, watch as _, onBeforeMount as b, createBlock as m, openBlock as o, unref as d, withCtx as g, createElementBlock as y, Fragment as B, renderList as k } from "vue";
 import { TUISelect as w, TUIOption as x } from "@tencentcloud/uikit-base-component-vue3";
-import { useDeviceState as S } from "../../states/DeviceState.js";
+import { useDeviceState as S } from "../../states/DeviceState/DeviceState.js";
 import { _ as L } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const U = /* @__PURE__ */ I({
   __name: "CameraSelect",
@@ -8,9 +8,9 @@ const U = /* @__PURE__ */ I({
     onChange: {},
     disabled: { type: Boolean, default: !1 }
   },
-  setup(d) {
+  setup(n) {
     var i;
-    const { cameraList: c, currentCamera: t, setCurrentCamera: p, getCameraList: v } = S(), u = d, l = h((i = t.value) == null ? void 0 : i.deviceId);
+    const { cameraList: c, currentCamera: t, setCurrentCamera: p, getCameraList: v } = S(), u = n, l = h((i = t.value) == null ? void 0 : i.deviceId);
     _(
       () => {
         var e;
@@ -34,18 +34,18 @@ const U = /* @__PURE__ */ I({
     }
     return b(async () => {
       await v();
-    }), (e, r) => (o(), m(n(w), {
+    }), (e, r) => (o(), m(d(w), {
       modelValue: l.value,
       "onUpdate:modelValue": r[0] || (r[0] = (a) => l.value = a),
       placeholder: "placeholder",
       class: "select",
-      disabled: d.disabled,
+      disabled: n.disabled,
       teleported: !1,
       "popper-append-to-body": !1,
       onChange: f
     }, {
       default: g(() => [
-        (o(!0), y(B, null, k(n(c), (a) => (o(), m(n(x), {
+        (o(!0), y(B, null, k(d(c), (a) => (o(), m(d(x), {
           key: a.deviceId,
           label: a.deviceName,
           value: a.deviceId
@@ -54,7 +54,7 @@ const U = /* @__PURE__ */ I({
       _: 1
     }, 8, ["modelValue", "disabled"]));
   }
-}), M = /* @__PURE__ */ L(U, [["__scopeId", "data-v-227f6582"]]);
+}), M = /* @__PURE__ */ L(U, [["__scopeId", "data-v-8d1fe80f"]]);
 export {
   M as default
 };

package/dist/components/VideoSettingPanel/VideoPreview.js

@@ -1,7 +1,7 @@
 import { defineComponent as p, onMounted as v, onUnmounted as _, createElementBlock as n, openBlock as o, createElementVNode as a, createCommentVNode as s, createBlock as f, unref as e, toDisplayString as l } from "vue";
 import u from "@tencentcloud/tuiroom-engine-js";
 import { useUIKit as w, IconLoading as C } from "@tencentcloud/uikit-base-component-vue3";
-import { useDeviceState as g } from "../../states/DeviceState.js";
+import { useDeviceState as g } from "../../states/DeviceState/DeviceState.js";
 import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const k = { class: "video-preview-container" }, T = { class: "attention-info" }, D = {
   key: 0,