tuikit-atomicx-vue3 0.1.0

package/dist/components/AudioSetting/AudioSettingTab.js

@@ -0,0 +1,130 @@
+import { defineComponent, inject, computed, onBeforeUnmount, createElementBlock, openBlock, createCommentVNode, unref, createElementVNode, toDisplayString, createVNode, createBlock, withCtx, createTextVNode, Fragment, renderList, normalizeClass } from "vue";
+import MicrophoneSelect from "./MicrophoneSelect.js";
+import SpeakerSelect from "./SpeakerSelect.js";
+import { useI18n } from "../../locales/index.js";
+import { TUIButton } from "@tencentcloud/uikit-base-component-vue3";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { MediaSettingDisplayMode } from "../../types/device.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "audio-setting-tab" };
+const _hoisted_2 = {
+  key: 0,
+  class: "item-setting"
+};
+const _hoisted_3 = { class: "title" };
+const _hoisted_4 = { class: "flex" };
+const _hoisted_5 = {
+  key: 1,
+  class: "item-setting"
+};
+const _hoisted_6 = { class: "title" };
+const _hoisted_7 = { class: "mic-bar-container" };
+const _hoisted_8 = {
+  key: 2,
+  class: "item-setting"
+};
+const _hoisted_9 = { class: "title" };
+const _hoisted_10 = { class: "flex" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AudioSettingTab",
+  setup(__props) {
+    const { t } = useI18n();
+    const {
+      captureVolume,
+      isMicrophoneTesting,
+      isSpeakerTesting,
+      startMicrophoneTest,
+      stopMicrophoneTest,
+      startSpeakerTest,
+      stopSpeakerTest
+    } = useDeviceState();
+    const audioSettingProps = inject("audioSettingProps");
+    const isSimpleMode = computed(
+      () => (audioSettingProps == null ? void 0 : audioSettingProps.displayMode) === MediaSettingDisplayMode.IconWithPanel
+    );
+    const isDetailMode = computed(
+      () => (audioSettingProps == null ? void 0 : audioSettingProps.displayMode) === MediaSettingDisplayMode.Panel
+    );
+    const volumeTotalNum = computed(() => isDetailMode.value ? 36 : 28);
+    const volumeNum = computed(
+      () => captureVolume.value * volumeTotalNum.value / 100
+    );
+    const showVolume = computed(
+      () => isSimpleMode.value || isDetailMode.value && isMicrophoneTesting.value
+    );
+    function handleMicrophoneTest() {
+      if (isMicrophoneTesting.value) {
+        stopMicrophoneTest();
+      } else {
+        startMicrophoneTest({ interval: 200 });
+      }
+    }
+    async function handleSpeakerTest() {
+      const SPEAKER_TEST_URL = "https://web.sdk.qcloud.com/trtc/electron/download/resources/media/TestSpeaker.mp3";
+      if (isSpeakerTesting.value) {
+        stopSpeakerTest();
+      } else {
+        startSpeakerTest({ filePath: SPEAKER_TEST_URL });
+      }
+    }
+    onBeforeUnmount(() => {
+      stopSpeakerTest();
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        ((_a = unref(audioSettingProps)) == null ? void 0 : _a.supportSwitchMicrophone) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("span", _hoisted_3, toDisplayString(unref(t)("Mic")), 1),
+          createElementVNode("div", _hoisted_4, [
+            createVNode(MicrophoneSelect, { class: "select" }),
+            isDetailMode.value ? (openBlock(), createBlock(unref(TUIButton), {
+              key: 0,
+              onClick: handleMicrophoneTest
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(isMicrophoneTesting) ? unref(t)("Stop") : unref(t)("Test")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true),
+        ((_b = unref(audioSettingProps)) == null ? void 0 : _b.supportAudioLevel) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createElementVNode("span", _hoisted_6, toDisplayString(unref(t)("Output")), 1),
+          createElementVNode("div", _hoisted_7, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(new Array(volumeTotalNum.value).fill(""), (item, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: index,
+                class: normalizeClass([
+                  "mic-bar",
+                  `${showVolume.value && volumeNum.value > index ? "active" : ""}`
+                ])
+              }, null, 2);
+            }), 128))
+          ])
+        ])) : createCommentVNode("", true),
+        ((_c = unref(audioSettingProps)) == null ? void 0 : _c.supportSwitchSpeaker) ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          createElementVNode("span", _hoisted_9, toDisplayString(unref(t)("Speaker")), 1),
+          createElementVNode("div", _hoisted_10, [
+            createVNode(SpeakerSelect, {
+              class: "select",
+              disabled: ((_d = unref(audioSettingProps)) == null ? void 0 : _d.displayMode) === unref(MediaSettingDisplayMode).Panel
+            }, null, 8, ["disabled"]),
+            isDetailMode.value ? (openBlock(), createBlock(unref(TUIButton), {
+              key: 0,
+              onClick: handleSpeakerTest
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(isSpeakerTesting) ? unref(t)("Stop") : unref(t)("Test")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const AudioSettingTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0577050a"]]);
+export {
+  AudioSettingTab as default
+};

package/dist/components/AudioSetting/AudioSettingTab.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/AudioSetting/MicrophoneSelect.js

@@ -0,0 +1,71 @@
+import { defineComponent, ref, watch, onBeforeMount, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList } from "vue";
+import SelectPC from "../../baseComp/Select/SelectPC.js";
+import OptionPC from "../../baseComp/Option/OptionPC.js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MicrophoneSelect",
+  props: {
+    onChange: {},
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    var _a;
+    const { microphoneList, currentMicrophone, setCurrentMicrophone, getMicrophoneList } = useDeviceState();
+    const props = __props;
+    const currentDeviceId = ref((_a = currentMicrophone.value) == null ? void 0 : _a.deviceId);
+    watch(
+      () => {
+        var _a2;
+        return (_a2 = currentMicrophone.value) == null ? void 0 : _a2.deviceId;
+      },
+      (val) => {
+        if (currentDeviceId.value !== val) {
+          currentDeviceId.value = val;
+        }
+      },
+      { immediate: true }
+    );
+    async function handleChange(deviceId) {
+      var _a2, _b, _c, _d;
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, deviceId);
+      try {
+        await setCurrentMicrophone({ deviceId });
+      } catch (error) {
+        if (((_b = currentMicrophone.value) == null ? void 0 : _b.deviceId) && microphoneList.value.map((item) => item.deviceId).includes((_c = currentMicrophone.value) == null ? void 0 : _c.deviceId)) {
+          currentDeviceId.value = (_d = currentMicrophone.value) == null ? void 0 : _d.deviceId;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      await getMicrophoneList();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SelectPC), {
+        modelValue: currentDeviceId.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentDeviceId.value = $event),
+        placeholder: "placeholder",
+        class: "select",
+        disabled: _ctx.disabled,
+        teleported: false,
+        "popper-append-to-body": false,
+        onChange: handleChange
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(microphoneList), (item) => {
+            return openBlock(), createBlock(unref(OptionPC), {
+              key: item.deviceId,
+              label: item.deviceName,
+              value: item.deviceId
+            }, null, 8, ["label", "value"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "disabled"]);
+    };
+  }
+});
+const MicrophoneSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-45e2de0d"]]);
+export {
+  MicrophoneSelect as default
+};

package/dist/components/AudioSetting/MicrophoneSelect.vue.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    onChange?: (id: string) => void;
+    disabled?: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    disabled: boolean;
+}>>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/AudioSetting/SpeakerSelect.js

@@ -0,0 +1,71 @@
+import { defineComponent, ref, watch, onBeforeMount, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList } from "vue";
+import SelectPC from "../../baseComp/Select/SelectPC.js";
+import OptionPC from "../../baseComp/Option/OptionPC.js";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SpeakerSelect",
+  props: {
+    onChange: {},
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    var _a;
+    const props = __props;
+    const { speakerList, currentSpeaker, setCurrentSpeaker, getSpeakerList } = useDeviceState();
+    const currentDeviceId = ref((_a = currentSpeaker.value) == null ? void 0 : _a.deviceId);
+    watch(
+      () => {
+        var _a2;
+        return (_a2 = currentSpeaker.value) == null ? void 0 : _a2.deviceId;
+      },
+      (val) => {
+        if (currentDeviceId.value !== val) {
+          currentDeviceId.value = val;
+        }
+      },
+      { immediate: true }
+    );
+    async function handleChange(deviceId) {
+      var _a2, _b, _c, _d;
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, deviceId);
+      try {
+        await setCurrentSpeaker({ deviceId });
+      } catch (error) {
+        if (((_b = currentSpeaker.value) == null ? void 0 : _b.deviceId) && speakerList.value.map((item) => item.deviceId).includes((_c = currentSpeaker.value) == null ? void 0 : _c.deviceId)) {
+          currentDeviceId.value = (_d = currentSpeaker.value) == null ? void 0 : _d.deviceId;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      await getSpeakerList();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SelectPC), {
+        modelValue: currentDeviceId.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentDeviceId.value = $event),
+        placeholder: "placeholder",
+        class: "select",
+        disabled: _ctx.disabled,
+        teleported: false,
+        "popper-append-to-body": false,
+        onChange: handleChange
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(speakerList), (item) => {
+            return openBlock(), createBlock(unref(OptionPC), {
+              key: item.deviceId,
+              label: item.deviceName,
+              value: item.deviceId
+            }, null, 8, ["label", "value"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "disabled"]);
+    };
+  }
+});
+const SpeakerSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1cdf3bd1"]]);
+export {
+  SpeakerSelect as default
+};

package/dist/components/AudioSetting/SpeakerSelect.vue.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    onChange?: (id: string) => void;
+    disabled?: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    disabled: boolean;
+}>>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,4 @@
+import { default as AudioSetting } from './index.vue';
+
+export { AudioSetting };
+export default AudioSetting;

package/dist/components/AudioSetting/index.js

@@ -0,0 +1,37 @@
+import { defineComponent, provide, reactive, createElementBlock, openBlock, createBlock, createCommentVNode, unref } from "vue";
+import AudioMediaControl from "./AudioMediaControl.js";
+import AudioSettingTab from "./AudioSettingTab.js";
+import { _ as _sfc_main$1 } from "../../AudioRequestDialog.vue_vue_type_script_setup_true_lang-BmX-qsat.js";
+import { MediaSettingDisplayMode } from "../../types/device.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    displayMode: {},
+    supportSwitchMicrophone: { type: Boolean, default: true },
+    supportSwitchSpeaker: { type: Boolean, default: true },
+    supportAudioLevel: { type: Boolean, default: true }
+  },
+  emits: ["click-icon"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    function handleAudioMediaClick() {
+      emits("click-icon");
+    }
+    const props = __props;
+    provide("audioSettingProps", reactive(props));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        _ctx.displayMode === unref(MediaSettingDisplayMode).Icon || _ctx.displayMode === unref(MediaSettingDisplayMode).IconWithPanel ? (openBlock(), createBlock(AudioMediaControl, {
+          key: 0,
+          onClickIcon: handleAudioMediaClick
+        })) : createCommentVNode("", true),
+        _ctx.displayMode === unref(MediaSettingDisplayMode).Panel ? (openBlock(), createBlock(AudioSettingTab, { key: 1 })) : createCommentVNode("", true),
+        _ctx.displayMode !== unref(MediaSettingDisplayMode).Panel ? (openBlock(), createBlock(_sfc_main$1, { key: 2 })) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as AudioSetting,
+  _sfc_main as default
+};

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

@@ -0,0 +1,37 @@
+import { AudioSettingProps } from '../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AudioSettingProps>, {
+    supportSwitchMicrophone: boolean;
+    supportSwitchSpeaker: boolean;
+    supportAudioLevel: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "click-icon": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AudioSettingProps>, {
+    supportSwitchMicrophone: boolean;
+    supportSwitchSpeaker: boolean;
+    supportAudioLevel: boolean;
+}>>> & Readonly<{
+    "onClick-icon"?: ((...args: any[]) => any) | undefined;
+}>, {
+    supportSwitchMicrophone: boolean;
+    supportAudioLevel: boolean;
+    supportSwitchSpeaker: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,7 @@
+export declare const resource: {
+    Microphone: string;
+    'Select device': string;
+    'Input volume': string;
+    Speaker: string;
+    'Output volume': string;
+};

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

@@ -0,0 +1,10 @@
+const resource = {
+  Microphone: "Microphone",
+  "Select device": "Select device",
+  "Input volume": "Input volume",
+  Speaker: "Speaker",
+  "Output volume": "输出音量"
+};
+export {
+  resource
+};

package/dist/components/AudioSettingPanel/i18n/index.d.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/dist/components/AudioSettingPanel/i18n/index.js

@@ -0,0 +1,6 @@
+import { resource } from "./en-US/index.js";
+import { resource as resource2 } from "./zh-CN/index.js";
+export {
+  resource as enResource,
+  resource2 as zhResource
+};

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

@@ -0,0 +1,7 @@
+export declare const resource: {
+    Microphone: string;
+    'Select device': string;
+    'Input volume': string;
+    Speaker: string;
+    'Output volume': string;
+};

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

@@ -0,0 +1,10 @@
+const resource = {
+  Microphone: "麦克风",
+  "Select device": "选择设备",
+  "Input volume": "输入音量",
+  Speaker: "扬声器",
+  "Output volume": "输出音量"
+};
+export {
+  resource
+};

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

@@ -0,0 +1,3 @@
+import { default as AudioSettingPanel } from './index.vue';
+
+export { AudioSettingPanel };

package/dist/components/AudioSettingPanel/index.js

@@ -0,0 +1,139 @@
+import { defineComponent, ref, onMounted, watch, createElementBlock, openBlock, createElementVNode, toDisplayString, unref, createVNode, withCtx, Fragment, renderList, createBlock } from "vue";
+import { useDeviceState } from "../../states/DeviceState.js";
+import { useUIKit, TUISelect, TUIOption, TUISlider } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+import { addI18n } from "../../i18n/index.js";
+import { resource } from "./i18n/en-US/index.js";
+import { resource as resource$1 } from "./i18n/zh-CN/index.js";
+const _hoisted_1 = { class: "audio-setting-panel" };
+const _hoisted_2 = { class: "section" };
+const _hoisted_3 = { class: "section-title" };
+const _hoisted_4 = { class: "row" };
+const _hoisted_5 = { class: "label" };
+const _hoisted_6 = { class: "row" };
+const _hoisted_7 = { class: "label" };
+const _hoisted_8 = { class: "volume-value" };
+const _hoisted_9 = { class: "section" };
+const _hoisted_10 = { class: "section-title" };
+const _hoisted_11 = { class: "row" };
+const _hoisted_12 = { class: "label" };
+const _hoisted_13 = { class: "row" };
+const _hoisted_14 = { class: "label" };
+const _hoisted_15 = { class: "volume-value" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const { t } = useUIKit();
+    const {
+      microphoneList,
+      currentMicrophone,
+      setCurrentMicrophone,
+      speakerList,
+      currentSpeaker,
+      setCurrentSpeaker,
+      getMicrophoneList,
+      getSpeakerList,
+      captureVolume,
+      outputVolume,
+      setCaptureVolume,
+      setOutputVolume
+    } = useDeviceState();
+    const currentMicrophoneId = ref("");
+    const currentSpeakerId = ref("");
+    const captureVolumeValue = ref(captureVolume.value);
+    const outputVolumeValue = ref(outputVolume.value);
+    onMounted(async () => {
+      await getMicrophoneList();
+      await getSpeakerList();
+      if (currentMicrophone.value) currentMicrophoneId.value = currentMicrophone.value.deviceId;
+      if (currentSpeaker.value) currentSpeakerId.value = currentSpeaker.value.deviceId;
+    });
+    watch(captureVolumeValue, async (value) => {
+      await setCaptureVolume(value);
+    });
+    watch(outputVolumeValue, async (value) => {
+      await setOutputVolume(value);
+    });
+    watch(currentMicrophoneId, (id) => {
+      setCurrentMicrophone({ deviceId: id });
+    });
+    watch(currentSpeakerId, (id) => {
+      setCurrentSpeaker({ deviceId: id });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, toDisplayString(unref(t)("Microphone")), 1),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("span", _hoisted_5, toDisplayString(unref(t)("Select device")), 1),
+            createVNode(unref(TUISelect), {
+              modelValue: currentMicrophoneId.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentMicrophoneId.value = $event),
+              class: "select"
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(microphoneList), (item) => {
+                  return openBlock(), createBlock(unref(TUIOption), {
+                    key: item.deviceId,
+                    label: item.deviceName,
+                    value: item.deviceId
+                  }, null, 8, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("span", _hoisted_7, toDisplayString(unref(t)("Input volume")), 1),
+            createVNode(unref(TUISlider), {
+              modelValue: captureVolumeValue.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => captureVolumeValue.value = $event),
+              min: 0,
+              max: 100
+            }, null, 8, ["modelValue"]),
+            createElementVNode("span", _hoisted_8, toDisplayString(unref(captureVolume)), 1)
+          ])
+        ]),
+        _cache[4] || (_cache[4] = createElementVNode("div", { class: "divider" }, null, -1)),
+        createElementVNode("div", _hoisted_9, [
+          createElementVNode("div", _hoisted_10, toDisplayString(unref(t)("Speaker")), 1),
+          createElementVNode("div", _hoisted_11, [
+            createElementVNode("span", _hoisted_12, toDisplayString(unref(t)("Select device")), 1),
+            createVNode(unref(TUISelect), {
+              modelValue: currentSpeakerId.value,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => currentSpeakerId.value = $event),
+              class: "select"
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(speakerList), (item) => {
+                  return openBlock(), createBlock(unref(TUIOption), {
+                    key: item.deviceId,
+                    label: item.deviceName,
+                    value: item.deviceId
+                  }, null, 8, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createElementVNode("div", _hoisted_13, [
+            createElementVNode("span", _hoisted_14, toDisplayString(unref(t)("Output volume")), 1),
+            createVNode(unref(TUISlider), {
+              modelValue: outputVolumeValue.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => outputVolumeValue.value = $event),
+              min: 0,
+              max: 100
+            }, null, 8, ["modelValue"]),
+            createElementVNode("span", _hoisted_15, toDisplayString(unref(outputVolume)), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+});
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-75c7da54"]]);
+addI18n("en-US", { translation: resource });
+addI18n("zh-CN", { translation: resource$1 });
+export {
+  index as AudioSettingPanel
+};

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

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;