@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,
306 lines (305 loc) • 14.3 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const pinia = require("pinia");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const IconButton = require("../../../components/common/base/IconButton.vue.js");
const ResetIcon = require("../../../components/common/icons/ResetIcon.vue.js");
const Slider = require("../../../components/common/base/Slider.vue.js");
const index = require("../../../locales/index.js");
const GenerateBeautyConfig = require("./GenerateBeautyConfig.js");
const AdvancedBeauty = require("../../type/AdvancedBeauty.js");
const Beauty = require("./BeautyPanel/Beauty.vue.js");
const MultiBeauty = require("./BeautyPanel/MultiBeauty.vue.js");
const VirtualBackground = require("./BeautyPanel/VirtualBackground.vue.js");
const useRoomEngine = require("../../../hooks/useRoomEngine.js");
const index$2 = require("../../../utils/common/logger/index.js");
const index$1 = require("../../hooks/useAdvancedBeautyState/index.js");
const basic = require("../../../stores/basic.js");
const _withScopeId = (n) => (Vue.pushScopeId("data-v-5169a5d1"), n = n(), Vue.popScopeId(), n);
const _hoisted_1 = { class: "advanced-beauty" };
const _hoisted_2 = { class: "advanced-beauty-container" };
const _hoisted_3 = { class: "video-container" };
const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("div", {
id: "test-preview",
class: "test-preview"
}, null, -1));
const _hoisted_5 = { class: "text" };
const _hoisted_6 = {
key: 0,
class: "degree"
};
const _hoisted_7 = { class: "text" };
const _hoisted_8 = { class: "text-value" };
const _hoisted_9 = {
key: 1,
class: "mask"
};
const _hoisted_10 = {
key: 2,
class: "spinner"
};
const _hoisted_11 = { class: "beauty-tabs" };
const _hoisted_12 = { class: "beauty-tabs-header" };
const _hoisted_13 = ["onClick"];
const _hoisted_14 = { class: "beauty-tabs-panels" };
const _hoisted_15 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ Vue.createElementVNode("div", null, null, -1));
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "index",
setup(__props) {
const { t } = index.useI18n();
const basicStore = basic.useBasicStore();
const { lang } = pinia.storeToRefs(basicStore);
const {
setAdvancedBeauty,
clearBeautySetting,
beautyConfigs,
beautyLicenseInfo
} = index$1.default();
const roomEngine = useRoomEngine.default();
const isBeautyDialogVisible = Vue.ref(false);
const isLoading = Vue.ref(false);
const isShowDegree = Vue.ref(false);
const sliderMinValue = Vue.ref(0);
const sliderMaxValue = Vue.ref(100);
const sliderValue = Vue.ref(0);
const activePanel = Vue.ref(AdvancedBeauty.AdvancedBeautyType.basicBeauty);
const activeBeautyItem = Vue.ref({
key: "",
item: {
key: "",
icon: "",
name: "",
nameEn: "",
effectName: "",
resourcePath: "",
backgroundPath: ""
}
});
let beautyPanels = /* @__PURE__ */ new Map();
Vue.onMounted(async () => {
beautyPanels = GenerateBeautyConfig.generateBeautyPanel(beautyLicenseInfo.panelLevel);
});
Vue.onUnmounted(async () => {
await handleResetBeautyClick();
});
Vue.watch(activeBeautyItem, (value) => {
console.log("activeBeautyItem, ", activeBeautyItem.value);
if (value) {
if (value.item.minValue !== void 0 && value.item.maxValue !== void 0) {
sliderMaxValue.value = value.item.maxValue;
sliderMinValue.value = value.item.minValue;
isShowDegree.value = true;
getCachedBeautySettingValue();
} else {
sliderValue.value = 0;
isShowDegree.value = false;
}
setBeautyItem();
}
});
Vue.watch(sliderValue, async () => {
setBeautyItem();
});
async function openBeautySettingPanel() {
isBeautyDialogVisible.value = true;
isLoading.value = true;
await Vue.nextTick();
await startCameraTest();
isLoading.value = false;
}
async function closeBeautySettingPanel() {
await stopCameraTest();
isBeautyDialogVisible.value = false;
isShowDegree.value = false;
}
async function startCameraTest() {
var _a;
try {
await ((_a = roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({ view: "test-preview" }));
} catch (error) {
index$2.default.log("startCameraDeviceTest error:", error);
}
}
async function stopCameraTest() {
var _a;
try {
await ((_a = roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest());
} catch (error) {
index$2.default.log("startCameraDeviceTest error:", error);
}
}
function handleBeautyPropertyClick(panelType, beautyKey, beautyItem) {
if (panelType !== activePanel.value) {
return;
}
activeBeautyItem.value = { key: beautyKey, item: beautyItem };
}
function handleBeautyPanelClick(key) {
activePanel.value = key;
}
async function handleResetBeautyClick() {
sliderValue.value = 0;
await Vue.nextTick();
clearBeautySetting();
}
function setBeautyItem() {
const beautyType = activePanel.value;
const beautyConfig = {
beautyType,
beautyPanelKey: activeBeautyItem.value.key,
resourcePath: activeBeautyItem.value.item.resourcePath,
backgroundPath: activeBeautyItem.value.item.backgroundPath,
effectKey: activeBeautyItem.value.item.effectName,
effectValue: sliderValue.value
};
setAdvancedBeauty(beautyType, beautyConfig);
}
function getCachedBeautySettingValue() {
var _a;
const beautyItems = (_a = beautyConfigs.get(activePanel.value)) == null ? void 0 : _a.get(activeBeautyItem.value.key);
if (!beautyItems) {
sliderValue.value = 0;
return;
}
const beautyConfig = beautyItems.find((item) => {
const key = `${activeBeautyItem.value.key}_${item.effectKey}_${item.resourcePath}`;
return key === activeBeautyItem.value.item.key;
});
if (!beautyConfig) {
sliderValue.value = 0;
return;
}
sliderValue.value = beautyConfig.effectValue;
}
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createVNode(IconButton.default, {
title: Vue.unref(t)("Beauty"),
onClickIcon: openBeautySettingPanel
}, {
default: Vue.withCtx(() => [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconBasicBeauty), { size: "24" })
]),
_: 1
}, 8, ["title"]),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIDialog), {
customClasses: ["advanced-beauty-dialog"],
visible: isBeautyDialogVisible.value,
title: Vue.unref(t)("Beauty"),
center: true,
onClose: closeBeautySettingPanel
}, {
footer: Vue.withCtx(() => [
_hoisted_15
]),
default: Vue.withCtx(() => [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createElementVNode("div", _hoisted_3, [
_hoisted_4,
Vue.createElementVNode("div", {
class: "reset",
onClick: handleResetBeautyClick
}, [
Vue.createVNode(ResetIcon.default),
Vue.createElementVNode("span", _hoisted_5, Vue.toDisplayString(Vue.unref(t)("Reset")), 1)
]),
isShowDegree.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_6, [
Vue.createElementVNode("span", _hoisted_7, Vue.toDisplayString(Vue.unref(t)("Degree")), 1),
Vue.createVNode(Slider.default, {
modelValue: sliderValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sliderValue.value = $event),
class: "slider",
min: sliderMinValue.value,
max: sliderMaxValue.value
}, null, 8, ["modelValue", "min", "max"]),
Vue.createElementVNode("span", _hoisted_8, Vue.toDisplayString(sliderValue.value), 1)
])) : Vue.createCommentVNode("", true),
isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_9)) : Vue.createCommentVNode("", true),
isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_10)) : Vue.createCommentVNode("", true)
]),
Vue.createElementVNode("div", _hoisted_11, [
Vue.createElementVNode("div", _hoisted_12, [
(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(beautyPanels), ([key]) => {
var _a, _b;
return Vue.openBlock(), Vue.createElementBlock("div", {
key,
class: Vue.normalizeClass(["beauty-tabs-header-item", { "is-active": activePanel.value === key }]),
onClick: ($event) => handleBeautyPanelClick(key)
}, Vue.toDisplayString(Vue.unref(lang) === "zh-CN" ? (_a = Vue.unref(beautyPanels).get(key)) == null ? void 0 : _a.name : (_b = Vue.unref(beautyPanels).get(key)) == null ? void 0 : _b.nameEn), 11, _hoisted_13);
}), 128))
]),
Vue.createElementVNode("div", _hoisted_14, [
Vue.withDirectives(Vue.createVNode(Vue.unref(MultiBeauty.default), {
beautyType: Vue.unref(AdvancedBeauty.AdvancedBeautyType).basicBeauty,
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyType", "beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).basicBeauty]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(MultiBeauty.default), {
beautyType: Vue.unref(AdvancedBeauty.AdvancedBeautyType).advancedBeauty,
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyType", "beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).advancedBeauty]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(Beauty.default), {
beautyType: Vue.unref(AdvancedBeauty.AdvancedBeautyType).imageQuality,
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyType", "beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).imageQuality]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(MultiBeauty.default), {
beautyType: Vue.unref(AdvancedBeauty.AdvancedBeautyType).makeup,
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyType", "beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).makeup]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(Beauty.default), {
beautyType: Vue.unref(AdvancedBeauty.AdvancedBeautyType).bodyBeauty,
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyType", "beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).bodyBeauty]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(Beauty.default), {
beautyType: Vue.unref(AdvancedBeauty.AdvancedBeautyType).advancedMakeup,
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyType", "beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).advancedMakeup]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(Beauty.default), {
beautyType: Vue.unref(AdvancedBeauty.AdvancedBeautyType).filters,
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyType", "beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).filters]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(Beauty.default), {
beautyType: Vue.unref(AdvancedBeauty.AdvancedBeautyType).motion,
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyType", "beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).motion]
]),
Vue.withDirectives(Vue.createVNode(Vue.unref(VirtualBackground.default), {
beautyItems: Vue.unref(beautyPanels),
onBeautyPropertyClick: handleBeautyPropertyClick
}, null, 8, ["beautyItems"]), [
[Vue.vShow, activePanel.value === Vue.unref(AdvancedBeauty.AdvancedBeautyType).virtualBackground]
])
])
])
])
]),
_: 1
}, 8, ["visible", "title"])
]);
};
}
});
exports.default = _sfc_main;