tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/dist/components/VideoSetting/VideoSettingTab.js

@@ -1,52 +1,52 @@
 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 P from "./VideoProfile.js";
+import { TUISwitch as k } from "@tencentcloud/uikit-base-component-vue3";
+import { useI18n as P } from "../../locales/index.js";
+import b from "./CameraSelect.js";
 import C from "./VideoPreview.js";
-import M from "../../baseComp/TuiSwitch.js";
-import { useI18n as b } from "../../locales/index.js";
+import M from "./VideoProfile.js";
 import { useDeviceState as T } from "../../states/DeviceState/DeviceState.js";
-import { MirrorType as v } from "../../types/device.js";
+import { MirrorType as f } from "../../types/device.js";
 import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const D = { class: "video-tab" }, N = {
+const D = { class: "video-tab" }, I = {
   key: 0,
   class: "item-setting"
-}, B = { class: "title" }, E = {
+}, N = { class: "title" }, B = {
   key: 1,
   class: "item-setting"
-}, I = { class: "title" }, R = {
+}, E = { class: "title" }, R = {
   key: 2,
   class: "item-setting"
-}, j = { class: "title" }, A = {
+}, U = { class: "title" }, j = {
   key: 3,
   class: "mirror-container"
-}, L = /* @__PURE__ */ V({
+}, A = /* @__PURE__ */ V({
   __name: "VideoSettingTab",
-  setup(U) {
-    const { t: i } = b(), { switchMirror: h } = T(), m = w(!0), r = g("videoSettingProps");
+  setup(L) {
+    const { t: i } = P(), { switchMirror: h } = T(), m = w(!0), r = g("videoSettingProps");
     return y(
       m,
       async (l) => {
-        h({ mirror: l ? v.Auto : v.Disable });
+        h({ mirror: l ? f.Auto : f.Disable });
       },
       { immediate: !0 }
     ), (l, p) => {
-      var d, u, _, f;
+      var d, u, _, v;
       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)
+        (d = e(r)) != null && d.supportSwitchCamera ? (o(), t("div", I, [
+          n("span", N, c(e(i)("Camera")), 1),
+          a(b)
         ])) : s("", !0),
-        (u = e(r)) != null && u.supportVideoPreview ? (o(), t("div", E, [
-          n("span", I, c(e(i)("Preview")), 1),
+        (u = e(r)) != null && u.supportVideoPreview ? (o(), t("div", B, [
+          n("span", E, 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)
+          n("span", U, c(e(i)("Resolution")), 1),
+          a(M)
         ])) : s("", !0),
-        (f = e(r)) != null && f.supportSwitchMirror ? (o(), t("div", A, [
+        (v = e(r)) != null && v.supportSwitchMirror ? (o(), t("div", j, [
           n("span", null, c(e(i)("Mirror")), 1),
-          a(M, {
+          a(e(k), {
             modelValue: m.value,
             "onUpdate:modelValue": p[0] || (p[0] = (S) => m.value = S)
           }, null, 8, ["modelValue"])
@@ -54,7 +54,7 @@ const D = { class: "video-tab" }, N = {
       ]);
     };
   }
-}), W = /* @__PURE__ */ x(L, [["__scopeId", "data-v-4e153eef"]]);
+}), W = /* @__PURE__ */ x(A, [["__scopeId", "data-v-87e0b71a"]]);
 export {
   W as default
 };

package/dist/components/VideoSetting/index.js

@@ -1,5 +1,34 @@
-import { V as e } from "../../index-DTq2ybsB.js";
+import { defineComponent as c, provide as d, reactive as l, createElementBlock as p, openBlock as o, createBlock as t, createCommentVNode as i } from "vue";
+import s from "./VideoMediaControl.js";
+import { _ as u } from "../../VideoRequestDialog.vue_vue_type_script_setup_true_lang-DlROoquV.js";
+import m from "./VideoSettingTab.js";
+import { _ as f } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const y = /* @__PURE__ */ c({
+  __name: "index",
+  props: {
+    displayMode: {},
+    supportSwitchCamera: { type: Boolean, default: !0 },
+    supportSwitchResolution: { type: Boolean, default: !0 },
+    supportVideoPreview: { type: Boolean, default: !0 },
+    supportSwitchMirror: { type: Boolean, default: !0 }
+  },
+  emits: ["click-icon"],
+  setup(e, { emit: n }) {
+    const r = n;
+    function a() {
+      r("click-icon");
+    }
+    return d("videoSettingProps", l(e)), (M, B) => (o(), p("div", null, [
+      e.displayMode === "Icon" || e.displayMode === "IconWithPanel" ? (o(), t(s, {
+        key: 0,
+        onClickIcon: a
+      })) : i("", !0),
+      e.displayMode === "Panel" ? (o(), t(m, { key: 1 })) : i("", !0),
+      e.displayMode !== "Panel" ? (o(), t(u, { key: 2 })) : i("", !0)
+    ]));
+  }
+}), _ = /* @__PURE__ */ f(y, [["__scopeId", "data-v-ea3e0b27"]]);
 export {
-  e as VideoSetting,
-  e as default
+  _ as VideoSetting,
+  _ as default
 };

package/dist/components/VideoSettingPanel/CameraSelect.js

@@ -1,17 +1,18 @@
-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/DeviceState.js";
-import { _ as L } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const U = /* @__PURE__ */ I({
+import { defineComponent as h, ref as g, watch as y, onBeforeMount as _, createBlock as m, openBlock as r, unref as n, withCtx as b, createElementBlock as S, Fragment as B, renderList as U } from "vue";
+import { useUIKit as k, TUISelect as w, TUIOption as x } from "@tencentcloud/uikit-base-component-vue3";
+import V from "@tencentcloud/tuiroom-engine-js";
+import { useDeviceState as L } from "../../states/DeviceState/DeviceState.js";
+import { _ as T } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const D = /* @__PURE__ */ h({
   __name: "CameraSelect",
   props: {
     onChange: {},
     disabled: { type: Boolean, default: !1 }
   },
-  setup(n) {
-    var i;
-    const { cameraList: c, currentCamera: t, setCurrentCamera: p, getCameraList: v } = S(), u = n, l = h((i = t.value) == null ? void 0 : i.deviceId);
-    _(
+  setup(d) {
+    var u;
+    const { cameraList: c, currentCamera: t, setCurrentCamera: p, getCameraList: v } = L(), { t: f } = k(), i = d, l = g((u = t.value) == null ? void 0 : u.deviceId);
+    y(
       () => {
         var e;
         return (e = t.value) == null ? void 0 : e.deviceId;
@@ -21,40 +22,42 @@ const U = /* @__PURE__ */ I({
       },
       { immediate: !0 }
     );
-    async function f(e) {
-      var r, a, s;
-      u.onChange && u.onChange(e);
+    async function C(e) {
+      var o, a, s;
+      i.onChange && i.onChange(e);
       try {
         await p({
           deviceId: e
         });
       } catch {
-        (r = t.value) != null && r.deviceId && c.value.map((C) => C.deviceId).includes((a = t.value) == null ? void 0 : a.deviceId) && (l.value = (s = t.value) == null ? void 0 : s.deviceId);
+        (o = t.value) != null && o.deviceId && c.value.map((I) => I.deviceId).includes((a = t.value) == null ? void 0 : a.deviceId) && (l.value = (s = t.value) == null ? void 0 : s.deviceId);
       }
     }
-    return b(async () => {
-      await v();
-    }), (e, r) => (o(), m(d(w), {
+    return _(async () => {
+      V.once("ready", async () => {
+        await v();
+      });
+    }), (e, o) => (r(), m(n(w), {
       modelValue: l.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (a) => l.value = a),
-      placeholder: "placeholder",
+      "onUpdate:modelValue": o[0] || (o[0] = (a) => l.value = a),
+      placeholder: n(f)("VideoSettingPanel.SelectCamera"),
       class: "select",
-      disabled: n.disabled,
+      disabled: d.disabled,
       teleported: !1,
       "popper-append-to-body": !1,
-      onChange: f
+      onChange: C
     }, {
-      default: g(() => [
-        (o(!0), y(B, null, k(d(c), (a) => (o(), m(d(x), {
+      default: b(() => [
+        (r(!0), S(B, null, U(n(c), (a) => (r(), m(n(x), {
           key: a.deviceId,
           label: a.deviceName,
           value: a.deviceId
         }, null, 8, ["label", "value"]))), 128))
       ]),
       _: 1
-    }, 8, ["modelValue", "disabled"]));
+    }, 8, ["modelValue", "placeholder", "disabled"]));
   }
-}), M = /* @__PURE__ */ L(U, [["__scopeId", "data-v-8d1fe80f"]]);
+}), P = /* @__PURE__ */ T(D, [["__scopeId", "data-v-5c67df50"]]);
 export {
-  M as default
+  P as default
 };

package/dist/components/VideoSettingPanel/VideoPreview.js

@@ -1,29 +1,29 @@
-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 { defineComponent as p, onMounted as _, onUnmounted as f, createElementBlock as n, openBlock as o, createElementVNode as a, createCommentVNode as s, createBlock as l, unref as e, toDisplayString as v } 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/DeviceState.js";
+import { useUIKit as w, IconLoading as g } from "@tencentcloud/uikit-base-component-vue3";
+import { useDeviceState as C } 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 = {
+const k = { class: "video-preview-container" }, T = { class: "attention-info" }, V = {
   key: 0,
   class: "off-camera-info"
 }, I = /* @__PURE__ */ p({
   __name: "VideoPreview",
-  setup(V) {
-    const { t: r } = w(), { isCameraTesting: c, isCameraTestLoading: t, startCameraDeviceTest: d, stopCameraDeviceTest: m } = g();
-    return v(async () => {
+  setup(x) {
+    const { t: r } = w(), { isCameraTesting: c, isCameraTestLoading: t, startCameraTest: d, stopCameraTest: m } = C();
+    return _(async () => {
       u.once("ready", () => {
         d({ view: "video-preview" });
       });
-    }), _(async () => {
+    }), f(async () => {
       await m();
-    }), (x, i) => (o(), n("div", k, [
+    }), (B, i) => (o(), n("div", k, [
       i[0] || (i[0] = a("div", {
         id: "video-preview",
         class: "video-preview"
       }, null, -1)),
       a("div", T, [
-        !e(c) && !e(t) ? (o(), n("span", D, l(e(r)("Off Camera")), 1)) : s("", !0),
-        e(t) ? (o(), f(e(C), {
+        !e(c) && !e(t) ? (o(), n("span", V, v(e(r)("VideoSettingPanel.OffCamera")), 1)) : s("", !0),
+        e(t) ? (o(), l(e(g), {
           key: 1,
           size: "36",
           class: "loading"
@@ -31,7 +31,7 @@ const k = { class: "video-preview-container" }, T = { class: "attention-info" },
       ])
     ]));
   }
-}), N = /* @__PURE__ */ y(I, [["__scopeId", "data-v-773a253c"]]);
+}), h = /* @__PURE__ */ y(I, [["__scopeId", "data-v-b148b732"]]);
 export {
-  N as default
+  h as default
 };

package/dist/components/VideoSettingPanel/VideoProfile.js

@@ -1,44 +1,44 @@
-import { defineComponent as f, computed as s, watch as m, createBlock as n, openBlock as o, unref as i, isRef as v, withCtx as _, createElementBlock as y, Fragment as b, renderList as Q } from "vue";
-import { useUIKit as V, TUISelect as P, TUIOption as D } from "@tencentcloud/uikit-base-component-vue3";
-import { VideoQuality as a } from "../../types/device.js";
-import { useDeviceState as h } from "../../states/DeviceState/DeviceState.js";
-import { _ as k } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const x = /* @__PURE__ */ f({
+import { defineComponent as c, computed as f, watch as m, createBlock as r, openBlock as i, unref as a, isRef as V, withCtx as v, createElementBlock as _, Fragment as y, renderList as P } from "vue";
+import { useUIKit as b, TUISelect as S, TUIOption as Q } from "@tencentcloud/uikit-base-component-vue3";
+import { VideoQuality as o } from "../../types/device.js";
+import { useDeviceState as g } from "../../states/DeviceState/DeviceState.js";
+import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const h = /* @__PURE__ */ c({
   __name: "VideoProfile",
-  setup(I) {
-    const { t: e } = V(), p = s(() => [
-      { label: e("Low Definition"), value: a.Quality360P },
+  setup(k) {
+    const { t: e } = b(), d = f(() => [
+      { label: e("VideoSettingPanel.LowDefinition"), value: o.Quality360P },
       {
-        label: e("Standard Definition"),
-        value: a.Quality540P
+        label: e("VideoSettingPanel.StandardDefinition"),
+        value: o.Quality540P
       },
-      { label: e("High Definition"), value: a.Quality720P },
+      { label: e("VideoSettingPanel.HighDefinition"), value: o.Quality720P },
       {
-        label: e("Super Definition"),
-        value: a.Quality1080P
+        label: e("VideoSettingPanel.SuperDefinition"),
+        value: o.Quality1080P
       }
-    ]), { localVideoQuality: l, updateVideoQuality: d } = h();
-    return m(l, (u) => {
-      d({ quality: u });
-    }), (u, r) => (o(), n(i(P), {
-      modelValue: i(l),
-      "onUpdate:modelValue": r[0] || (r[0] = (t) => v(l) ? l.value = t : null),
-      placeholder: "placeholder",
+    ]), { localVideoQuality: l, updateVideoQuality: p } = g();
+    return m(l, (n) => {
+      p({ quality: n });
+    }, { immediate: !0 }), (n, u) => (i(), r(a(S), {
+      modelValue: a(l),
+      "onUpdate:modelValue": u[0] || (u[0] = (t) => V(l) ? l.value = t : null),
+      placeholder: a(e)("VideoSettingPanel.Resolution"),
       class: "select",
       teleported: !1,
       "popper-append-to-body": !1
     }, {
-      default: _(() => [
-        (o(!0), y(b, null, Q(p.value, (t, c) => (o(), n(i(D), {
-          key: c,
+      default: v(() => [
+        (i(!0), _(y, null, P(d.value, (t, s) => (i(), r(a(Q), {
+          key: s,
           label: t.label,
           value: t.value
         }, null, 8, ["label", "value"]))), 128))
       ]),
       _: 1
-    }, 8, ["modelValue"]));
+    }, 8, ["modelValue", "placeholder"]));
   }
-}), g = /* @__PURE__ */ k(x, [["__scopeId", "data-v-cff4e5cb"]]);
+}), L = /* @__PURE__ */ D(h, [["__scopeId", "data-v-0ba9d44f"]]);
 export {
-  g as default
+  L as default
 };

package/dist/components/VideoSettingPanel/i18n/en-US/index.d.ts

@@ -1,12 +1,15 @@
 export declare const resource: {
-    Camera: string;
-    'Select device': string;
-    Preview: string;
-    'Video profile': string;
-    Resolution: string;
-    'Low Definition': string;
-    'Standard Definition': string;
-    'High Definition': string;
-    'Super Definition': string;
-    'Off Camera': string;
+    VideoSettingPanel: {
+        Camera: string;
+        SelectCamera: string;
+        Preview: string;
+        VideoProfile: string;
+        Resolution: string;
+        LowDefinition: string;
+        StandardDefinition: string;
+        HighDefinition: string;
+        SuperDefinition: string;
+        OffCamera: string;
+        Mirror: string;
+    };
 };

package/dist/components/VideoSettingPanel/i18n/en-US/index.js

@@ -1,14 +1,17 @@
 const i = {
-  Camera: "Camera",
-  "Select device": "Select device",
-  Preview: "Preview",
-  "Video profile": "Video profile",
-  Resolution: "Resolution",
-  "Low Definition": "Low Definition",
-  "Standard Definition": "Standard Definition",
-  "High Definition": "High Definition",
-  "Super Definition": "Super Definition",
-  "Off Camera": "Off Camera"
+  VideoSettingPanel: {
+    Camera: "Camera",
+    SelectCamera: "Select camera",
+    Preview: "Preview",
+    VideoProfile: "Video profile",
+    Resolution: "Resolution",
+    LowDefinition: "Low Definition",
+    StandardDefinition: "Standard Definition",
+    HighDefinition: "High Definition",
+    SuperDefinition: "Super Definition",
+    OffCamera: "Off Camera",
+    Mirror: "Mirror"
+  }
 };
 export {
   i as resource

package/dist/components/VideoSettingPanel/i18n/zh-CN/index.d.ts

@@ -1,12 +1,15 @@
 export declare const resource: {
-    Camera: string;
-    'Select device': string;
-    Preview: string;
-    'Video profile': string;
-    Resolution: string;
-    'Low Definition': string;
-    'Standard Definition': string;
-    'High Definition': string;
-    'Super Definition': string;
-    'Off Camera': string;
+    VideoSettingPanel: {
+        Camera: string;
+        SelectCamera: string;
+        Preview: string;
+        VideoProfile: string;
+        Resolution: string;
+        LowDefinition: string;
+        StandardDefinition: string;
+        HighDefinition: string;
+        SuperDefinition: string;
+        OffCamera: string;
+        Mirror: string;
+    };
 };

package/dist/components/VideoSettingPanel/i18n/zh-CN/index.js

@@ -1,14 +1,17 @@
 const e = {
-  Camera: "摄像头",
-  "Select device": "选择设备",
-  Preview: "预览",
-  "Video profile": "视频设置",
-  Resolution: "分辨率",
-  "Low Definition": "流畅",
-  "Standard Definition": "标清",
-  "High Definition": "高清",
-  "Super Definition": "超清",
-  "Off Camera": "摄像头已关闭"
+  VideoSettingPanel: {
+    Camera: "摄像头",
+    SelectCamera: "选择摄像头",
+    Preview: "预览",
+    VideoProfile: "视频设置",
+    Resolution: "分辨率",
+    LowDefinition: "流畅",
+    StandardDefinition: "标清",
+    HighDefinition: "高清",
+    SuperDefinition: "超清",
+    OffCamera: "摄像头已关闭",
+    Mirror: "镜像"
+  }
 };
 export {
   e as resource

package/dist/components/VideoSettingPanel/index.d.ts

@@ -11,6 +11,10 @@ declare const VideoSettingPanel: import('vue').DefineComponent<import('vue').Ext
         type: BooleanConstructor;
         default: boolean;
     };
+    switchMirrorVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     cameraSelectVisible: {
         type: BooleanConstructor;
@@ -24,9 +28,14 @@ declare const VideoSettingPanel: import('vue').DefineComponent<import('vue').Ext
         type: BooleanConstructor;
         default: boolean;
     };
+    switchMirrorVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     cameraSelectVisible: boolean;
     videoPreviewVisible: boolean;
     videoProfileVisible: boolean;
+    switchMirrorVisible: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { VideoSettingPanel };

package/dist/components/VideoSettingPanel/index.js

@@ -1,16 +1,27 @@
-import { defineComponent as v, createElementBlock as r, openBlock as n, createCommentVNode as c, Fragment as a, createElementVNode as e, toDisplayString as o, unref as i, createVNode as d } from "vue";
-import { useUIKit as _ } from "@tencentcloud/uikit-base-component-vue3";
-import p from "./CameraSelect.js";
-import f from "./VideoPreview.js";
-import u from "./VideoProfile.js";
-import { _ as V } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { addI18n as m } from "../../i18n/index.js";
+import { addI18n as v } from "../../i18n/index.js";
 import { resource as h } from "./i18n/en-US/index.js";
 import { resource as P } from "./i18n/zh-CN/index.js";
-const b = { class: "video-setting-panel" }, w = { class: "section" }, S = { class: "section-title" }, y = { class: "row" }, C = { class: "label" }, g = { class: "section" }, k = { class: "section-title" }, B = { class: "preview-container" }, x = {
+import { defineComponent as S, ref as b, watch as f, createElementBlock as e, openBlock as t, createCommentVNode as a, createElementVNode as n, createVNode as c, toDisplayString as d, unref as i } from "vue";
+import { useUIKit as g, TUISwitch as y } from "@tencentcloud/uikit-base-component-vue3";
+import w from "./CameraSelect.js";
+import M from "./VideoPreview.js";
+import k from "./VideoProfile.js";
+import { useDeviceState as B } from "../../states/DeviceState/DeviceState.js";
+import { MirrorType as m } from "../../types/device.js";
+import { _ as C } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const D = { class: "video-setting-panel" }, x = {
+  key: 0,
+  class: "item-setting"
+}, I = { class: "title" }, N = {
+  key: 1,
+  class: "item-setting"
+}, U = { class: "title" }, T = {
   key: 2,
-  class: "section"
-}, N = { class: "section-title" }, I = { class: "row" }, E = { class: "label" }, U = /* @__PURE__ */ v({
+  class: "item-setting"
+}, E = { class: "title" }, z = {
+  key: 3,
+  class: "mirror-container"
+}, A = /* @__PURE__ */ S({
   __name: "index",
   props: {
     cameraSelectVisible: {
@@ -24,43 +35,44 @@ const b = { class: "video-setting-panel" }, w = { class: "section" }, S = { clas
     videoProfileVisible: {
       type: Boolean,
       default: !0
+    },
+    switchMirrorVisible: {
+      type: Boolean,
+      default: !0
     }
   },
-  setup(l) {
-    const { t } = _();
-    return (D, s) => (n(), r("div", b, [
-      l.cameraSelectVisible ? (n(), r(a, { key: 0 }, [
-        e("div", w, [
-          e("div", S, o(i(t)("Camera")), 1),
-          e("div", y, [
-            e("span", C, o(i(t)("Select device")), 1),
-            d(p)
-          ])
-        ]),
-        s[0] || (s[0] = e("div", { class: "divider" }, null, -1))
-      ], 64)) : c("", !0),
-      l.videoPreviewVisible ? (n(), r(a, { key: 1 }, [
-        e("div", g, [
-          e("div", k, o(i(t)("Preview")), 1),
-          e("div", B, [
-            d(f, { class: "video-preview" })
-          ])
-        ]),
-        s[1] || (s[1] = e("div", { class: "divider" }, null, -1))
-      ], 64)) : c("", !0),
-      l.videoProfileVisible ? (n(), r("div", x, [
-        e("div", N, o(i(t)("Video profile")), 1),
-        e("div", I, [
-          e("span", E, o(i(t)("Resolution")), 1),
-          d(u)
-        ])
-      ])) : c("", !0)
+  setup(o) {
+    const { t: r } = g(), { localMirrorType: u, switchMirror: V } = B(), s = b(u.value !== m.Disable);
+    return f(u, (l) => {
+      s.value = l !== m.Disable;
+    }), f(s, (l) => {
+      V({ mirror: l ? m.Auto : m.Disable });
+    }), (l, p) => (t(), e("div", D, [
+      o.cameraSelectVisible ? (t(), e("div", x, [
+        n("span", I, d(i(r)("VideoSettingPanel.Camera")), 1),
+        c(w)
+      ])) : a("", !0),
+      o.videoPreviewVisible ? (t(), e("div", N, [
+        n("span", U, d(i(r)("VideoSettingPanel.Preview")), 1),
+        c(M, { class: "video-preview" })
+      ])) : a("", !0),
+      o.videoProfileVisible ? (t(), e("div", T, [
+        n("span", E, d(i(r)("VideoSettingPanel.Resolution")), 1),
+        c(k)
+      ])) : a("", !0),
+      o.switchMirrorVisible ? (t(), e("div", z, [
+        n("span", null, d(i(r)("VideoSettingPanel.Mirror")), 1),
+        c(i(y), {
+          modelValue: s.value,
+          "onUpdate:modelValue": p[0] || (p[0] = (_) => s.value = _)
+        }, null, 8, ["modelValue"])
+      ])) : a("", !0)
     ]));
   }
-}), z = /* @__PURE__ */ V(U, [["__scopeId", "data-v-c4df466f"]]);
-m("en-US", { translation: h });
-m("zh-CN", { translation: P });
-const J = z;
+}), K = /* @__PURE__ */ C(A, [["__scopeId", "data-v-d6bdfe74"]]);
+v("en-US", { translation: h });
+v("zh-CN", { translation: P });
+const W = K;
 export {
-  J as VideoSettingPanel
+  W as VideoSettingPanel
 };

package/dist/components/VideoSettingPanel/index.vue.d.ts

@@ -11,6 +11,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    switchMirrorVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     cameraSelectVisible: {
         type: BooleanConstructor;
@@ -24,9 +28,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    switchMirrorVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     cameraSelectVisible: boolean;
     videoPreviewVisible: boolean;
     videoProfileVisible: boolean;
+    switchMirrorVisible: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;