@tencentcloud/roomkit-electron-vue3
Version:
<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,
156 lines (155 loc) • 6.37 kB
JavaScript
import { defineComponent, computed, ref, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, createCommentVNode, toDisplayString, unref, createVNode, createBlock, withCtx, createTextVNode, Fragment, renderList, normalizeClass } from "vue";
import DeviceSelect from "./DeviceSelect.vue.mjs";
import { useRoomStore } from "../../stores/room.mjs";
import { SettingMode } from "../../constants/render.mjs";
import { useI18n } from "../../locales/index.mjs";
import { storeToRefs } from "pinia";
import { useBasicStore } from "../../stores/basic.mjs";
import { isElectron } from "../../utils/environment.mjs";
import useGetRoomEngine from "../../hooks/useRoomEngine.mjs";
import TuiButton from "./base/Button.vue.mjs";
const _hoisted_1 = { class: "audio-setting-tab" };
const _hoisted_2 = { class: "item-setting" };
const _hoisted_3 = { class: "title" };
const _hoisted_4 = { class: "flex" };
const _hoisted_5 = { class: "item-setting" };
const _hoisted_6 = { class: "title" };
const _hoisted_7 = { class: "mic-bar-container" };
const _hoisted_8 = {
key: 0,
class: "item-setting"
};
const _hoisted_9 = { class: "title" };
const _hoisted_10 = { class: "flex" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "AudioSettingTab",
props: {
mode: {},
audioVolume: {},
theme: {}
},
setup(__props) {
var _a;
const props = __props;
const settingMode = props.mode || SettingMode.SIMPLE;
const isSampleMode = computed(() => settingMode === SettingMode.SIMPLE);
const isDetailMode = computed(() => settingMode === SettingMode.DETAIL);
const basicStore = useBasicStore();
const { userId } = storeToRefs(basicStore);
const roomStore = useRoomStore();
const { speakerList, userVolumeObj, currentSpeakerId } = storeToRefs(roomStore);
const roomEngine = useGetRoomEngine();
const trtcCloud = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud();
const volumeTotalNum = computed(() => isDetailMode.value ? 36 : 28);
const volumeNum = computed(() => {
const volume = props.audioVolume || userVolumeObj.value[userId.value] || 0;
return volume * volumeTotalNum.value / 100;
});
const showVolume = computed(
() => isSampleMode.value || isDetailMode.value && isTestingMicrophone.value
);
const isTestingMicrophone = ref(false);
function handleMicrophoneTest() {
isTestingMicrophone.value = !isTestingMicrophone.value;
}
const isTestingSpeaker = ref(false);
const audioPlayer = document == null ? void 0 : document.createElement("audio");
if (audioPlayer && typeof audioPlayer.loop !== "undefined") {
audioPlayer.loop = true;
}
const { t } = useI18n();
async function handleSpeakerTest() {
const SPEAKER_TEST_URL = "https://web.sdk.qcloud.com/trtc/electron/download/resources/media/TestSpeaker.mp3";
isTestingSpeaker.value = !isTestingSpeaker.value;
const isStartSpeakerTest = isTestingSpeaker.value;
if (isElectron) {
if (isStartSpeakerTest) {
trtcCloud == null ? void 0 : trtcCloud.startSpeakerDeviceTest(SPEAKER_TEST_URL);
} else {
trtcCloud == null ? void 0 : trtcCloud.stopSpeakerDeviceTest();
}
return;
}
if (!audioPlayer) {
return;
}
if (isStartSpeakerTest) {
await (audioPlayer == null ? void 0 : audioPlayer.setSinkId(currentSpeakerId.value));
audioPlayer.src = SPEAKER_TEST_URL;
audioPlayer.play();
} else {
audioPlayer.pause();
audioPlayer.currentTime = 0;
}
}
onBeforeUnmount(() => {
if (isElectron) {
trtcCloud == null ? void 0 : trtcCloud.stopSpeakerDeviceTest();
return;
}
audioPlayer && audioPlayer.pause();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("span", _hoisted_3, toDisplayString(unref(t)("Mic")), 1),
createElementVNode("div", _hoisted_4, [
createVNode(DeviceSelect, {
class: "select",
"device-type": "microphone"
}),
isDetailMode.value ? (openBlock(), createBlock(TuiButton, {
key: 0,
class: "button",
type: "primary",
onClick: handleMicrophoneTest
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(isTestingMicrophone.value ? unref(t)("Stop") : unref(t)("Test")), 1)
]),
_: 1
})) : createCommentVNode("", true)
])
]),
createElementVNode("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))
])
]),
unref(speakerList).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
createElementVNode("span", _hoisted_9, toDisplayString(unref(t)("Speaker")), 1),
createElementVNode("div", _hoisted_10, [
createVNode(DeviceSelect, {
class: "select",
"device-type": "speaker",
disabled: _ctx.mode === unref(SettingMode).DETAIL
}, null, 8, ["disabled"]),
isDetailMode.value ? (openBlock(), createBlock(TuiButton, {
key: 0,
class: "button",
type: "primary",
onClick: handleSpeakerTest
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(isTestingSpeaker.value ? unref(t)("Stop") : unref(t)("Test")), 1)
]),
_: 1
})) : createCommentVNode("", true)
])
])) : createCommentVNode("", true)
]);
};
}
});
export {
_sfc_main as default
};