roomkit-web-vue3/lib/core/components/AudioSetting/AudioSettingTab.vue3.js

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const MicrophoneSelect = require("./MicrophoneSelect.vue2.js");
const SpeakerSelect = require("./SpeakerSelect.vue2.js");
const index = require("../../../locales/index.js");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const index$1 = require("../../hooks/useAudioDeviceState/index.js");
const MediaDeviceSetting = require("../../type/MediaDeviceSetting.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__ */ Vue.defineComponent({
  __name: "AudioSettingTab",
  setup(__props) {
    const { t } = index.useI18n();
    const {
      audioVolume,
      isMicrophoneTesting,
      isSpeakerTesting,
      microphone,
      speaker
    } = index$1.useAudioDeviceState();
    const audioSettingProps = Vue.inject("audioSettingProps");
    const isSimpleMode = Vue.computed(
      () => (audioSettingProps == null ? void 0 : audioSettingProps.displayMode) === MediaDeviceSetting.MediaSettingDisplayMode.IconWithPanel
    );
    const isDetailMode = Vue.computed(
      () => (audioSettingProps == null ? void 0 : audioSettingProps.displayMode) === MediaDeviceSetting.MediaSettingDisplayMode.Panel
    );
    const volumeTotalNum = Vue.computed(() => isDetailMode.value ? 36 : 28);
    const volumeNum = Vue.computed(
      () => audioVolume.value * volumeTotalNum.value / 100
    );
    const showVolume = Vue.computed(
      () => isSimpleMode.value || isDetailMode.value && isMicrophoneTesting.value
    );
    function handleMicrophoneTest() {
      if (isMicrophoneTesting.value) {
        microphone.stopMicDeviceTest();
      } else {
        microphone.startMicDeviceTest({ interval: 200 });
      }
    }
    async function handleSpeakerTest() {
      const SPEAKER_TEST_URL = "https://web.sdk.qcloud.com/trtc/electron/download/resources/media/TestSpeaker.mp3";
      if (isSpeakerTesting.value) {
        speaker.stopSpeakerDeviceTest();
      } else {
        speaker.startSpeakerDeviceTest({ filePath: SPEAKER_TEST_URL });
      }
    }
    Vue.onBeforeUnmount(() => {
      speaker.stopSpeakerDeviceTest();
    });
    return (_ctx, _cache) => {
      var _a, _b, _c, _d;
      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
        ((_a = Vue.unref(audioSettingProps)) == null ? void 0 : _a.supportSwitchMicrophone) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
          Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Mic")), 1),
          Vue.createElementVNode("div", _hoisted_4, [
            Vue.createVNode(MicrophoneSelect.default, { class: "select" }),
            isDetailMode.value ? (Vue.openBlock(), Vue.createBlock(Vue.unref(uikitBaseComponentVue3.TUIButton), {
              key: 0,
              onClick: handleMicrophoneTest
            }, {
              default: Vue.withCtx(() => [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(isMicrophoneTesting) ? Vue.unref(t)("Stop") : Vue.unref(t)("Test")), 1)
              ]),
              _: 1
            })) : Vue.createCommentVNode("", true)
          ])
        ])) : Vue.createCommentVNode("", true),
        ((_b = Vue.unref(audioSettingProps)) == null ? void 0 : _b.supportAudioLevel) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_5, [
          Vue.createElementVNode("span", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("Output")), 1),
          Vue.createElementVNode("div", _hoisted_7, [
            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(new Array(volumeTotalNum.value).fill(""), (item, index2) => {
              return Vue.openBlock(), Vue.createElementBlock("div", {
                key: index2,
                class: Vue.normalizeClass([
                  "mic-bar",
                  `${showVolume.value && volumeNum.value > index2 ? "active" : ""}`
                ])
              }, null, 2);
            }), 128))
          ])
        ])) : Vue.createCommentVNode("", true),
        ((_c = Vue.unref(audioSettingProps)) == null ? void 0 : _c.supportSwitchSpeaker) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_8, [
          Vue.createElementVNode("span", _hoisted_9, Vue.toDisplayString(Vue.unref(t)("Speaker")), 1),
          Vue.createElementVNode("div", _hoisted_10, [
            Vue.createVNode(SpeakerSelect.default, {
              class: "select",
              disabled: ((_d = Vue.unref(audioSettingProps)) == null ? void 0 : _d.displayMode) === Vue.unref(MediaDeviceSetting.MediaSettingDisplayMode).Panel
            }, null, 8, ["disabled"]),
            isDetailMode.value ? (Vue.openBlock(), Vue.createBlock(Vue.unref(uikitBaseComponentVue3.TUIButton), {
              key: 0,
              onClick: handleSpeakerTest
            }, {
              default: Vue.withCtx(() => [
                Vue.createTextVNode(Vue.toDisplayString(Vue.unref(isSpeakerTesting) ? Vue.unref(t)("Stop") : Vue.unref(t)("Test")), 1)
              ]),
              _: 1
            })) : Vue.createCommentVNode("", true)
          ])
        ])) : Vue.createCommentVNode("", true)
      ]);
    };
  }
});
exports.default = _sfc_main;