@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.57 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const DeviceSelect = require("./DeviceSelect.vue.js");
const room = require("../../stores/room.js");
const render = require("../../constants/render.js");
const index = require("../../locales/index.js");
const pinia = require("pinia");
const basic = require("../../stores/basic.js");
const environment = require("../../utils/environment.js");
const useRoomEngine = require("../../hooks/useRoomEngine.js");
const Button = require("./base/Button.vue.js");
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__ */ Vue.defineComponent({
__name: "AudioSettingTab",
props: {
mode: {},
audioVolume: {},
theme: {}
},
setup(__props) {
var _a;
const props = __props;
const settingMode = props.mode || render.SettingMode.SIMPLE;
const isSampleMode = Vue.computed(() => settingMode === render.SettingMode.SIMPLE);
const isDetailMode = Vue.computed(() => settingMode === render.SettingMode.DETAIL);
const basicStore = basic.useBasicStore();
const { userId } = pinia.storeToRefs(basicStore);
const roomStore = room.useRoomStore();
const { speakerList, userVolumeObj, currentSpeakerId } = pinia.storeToRefs(roomStore);
const roomEngine = useRoomEngine.default();
const trtcCloud = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud();
const volumeTotalNum = Vue.computed(() => isDetailMode.value ? 36 : 28);
const volumeNum = Vue.computed(() => {
const volume = props.audioVolume || userVolumeObj.value[userId.value] || 0;
return volume * volumeTotalNum.value / 100;
});
const showVolume = Vue.computed(
() => isSampleMode.value || isDetailMode.value && isTestingMicrophone.value
);
const isTestingMicrophone = Vue.ref(false);
function handleMicrophoneTest() {
isTestingMicrophone.value = !isTestingMicrophone.value;
}
const isTestingSpeaker = Vue.ref(false);
const audioPlayer = document == null ? void 0 : document.createElement("audio");
if (audioPlayer && typeof audioPlayer.loop !== "undefined") {
audioPlayer.loop = true;
}
const { t } = index.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 (environment.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;
}
}
Vue.onBeforeUnmount(() => {
if (environment.isElectron) {
trtcCloud == null ? void 0 : trtcCloud.stopSpeakerDeviceTest();
return;
}
audioPlayer && audioPlayer.pause();
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Mic")), 1),
Vue.createElementVNode("div", _hoisted_4, [
Vue.createVNode(DeviceSelect.default, {
class: "select",
"device-type": "microphone"
}),
isDetailMode.value ? (Vue.openBlock(), Vue.createBlock(Button.default, {
key: 0,
class: "button",
type: "primary",
onClick: handleMicrophoneTest
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(isTestingMicrophone.value ? Vue.unref(t)("Stop") : Vue.unref(t)("Test")), 1)
]),
_: 1
})) : Vue.createCommentVNode("", true)
])
]),
Vue.createElementVNode("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.unref(speakerList).length > 0 ? (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(DeviceSelect.default, {
class: "select",
"device-type": "speaker",
disabled: _ctx.mode === Vue.unref(render.SettingMode).DETAIL
}, null, 8, ["disabled"]),
isDetailMode.value ? (Vue.openBlock(), Vue.createBlock(Button.default, {
key: 0,
class: "button",
type: "primary",
onClick: handleSpeakerTest
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(isTestingSpeaker.value ? Vue.unref(t)("Stop") : Vue.unref(t)("Test")), 1)
]),
_: 1
})) : Vue.createCommentVNode("", true)
])
])) : Vue.createCommentVNode("", true)
]);
};
}
});
exports.default = _sfc_main;