@tencentcloud/roomkit-web-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,
356 lines (355 loc) • 15 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("../common/base/IconButton.vue.js");
const index = require("../../locales/index.js");
require("../../services/main.js");
const roomService = require("../../services/roomService.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const environment = require("../../utils/environment.js");
const utils = require("../../utils/utils.js");
require("mitt");
require("../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const dataReportManager = require("../../services/manager/dataReportManager.js");
const index$1 = require("../common/base/Dialog/index.js");
const Slider = require("../common/base/Slider.vue2.js");
const useRoomEngine = require("../../hooks/useRoomEngine.js");
const basic = require("../../stores/basic.js");
const room = require("../../constants/room.js");
const _hoisted_1 = {
key: 0,
class: "basicBeauty-control-container"
};
const _hoisted_2 = {
id: "test-preview",
class: "test-preview"
};
const _hoisted_3 = { class: "text" };
const _hoisted_4 = {
key: 0,
class: "degree"
};
const _hoisted_5 = { class: "text" };
const _hoisted_6 = { class: "text-value" };
const _hoisted_7 = { class: "text" };
const _hoisted_8 = {
key: 1,
class: "mask"
};
const _hoisted_9 = {
key: 2,
class: "spinner"
};
const _hoisted_10 = { class: "setting" };
const _hoisted_11 = { class: "setting-header" };
const _hoisted_12 = { class: "setting-container" };
const _hoisted_13 = ["onClick"];
const _hoisted_14 = { class: "setting-item-icon" };
const _hoisted_15 = { class: "footer" };
const _hoisted_16 = { class: "mirror-container" };
const _hoisted_17 = { class: "mirror-text" };
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
__name: "BasicBeauty",
setup(__props) {
const roomEngine = useRoomEngine.default();
const basicStore = basic.useBasicStore();
const { isLocalStreamMirror } = pinia.storeToRefs(basicStore);
const { t } = index.useI18n();
const isShowDegree = Vue.ref(false);
const isBeautyStarted = Vue.ref(false);
const componentConfig = roomService.roomService.componentManager.getComponentConfig("BasicBeauty");
const isAllowed = Vue.computed(
() => {
var _a;
return (_a = roomService.roomService.roomStore.localStream) == null ? void 0 : _a.hasVideoStream;
}
);
Vue.watch(isLocalStreamMirror, async (val) => {
var _a;
const trtcCloud = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud();
if (!environment.isMobile) {
await (trtcCloud == null ? void 0 : trtcCloud.setLocalRenderParams({
mirrorType: val ? TUIRoomEngine.TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TUIRoomEngine.TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
rotation: TUIRoomEngine.TRTCVideoRotation.TRTCVideoRotation0,
fillMode: TUIRoomEngine.TRTCVideoFillMode.TRTCVideoFillMode_Fill
}));
}
});
const appliedBasicBeautyItem = Vue.ref("close");
const selectBasicBeautyItem = Vue.ref(
"close"
);
const isDialogVisible = Vue.ref(false);
const isShowResetDialog = Vue.ref(false);
const isLoading = Vue.ref(false);
const sliderValue = Vue.ref(0);
const beautyLevels = Vue.reactive({
smoother: 0,
whitening: 0,
ruddy: 0
});
const savedBeautyLevels = Vue.reactive({
smoother: 0,
whitening: 0,
ruddy: 0
});
const beautyOptionList = [
{ value: "close", text: "Close", icon: uikitBaseComponentVue3.IconCloseBeauty },
{ value: "smoother", text: "Smoother", icon: uikitBaseComponentVue3.IconSmootherBeauty },
{ value: "whitening", text: "Whitening", icon: uikitBaseComponentVue3.IconWhiteningBeauty },
{ value: "ruddy", text: "Ruddy", icon: uikitBaseComponentVue3.IconRuddyBeauty }
];
const openBeautySettingPanel = async () => {
var _a;
roomService.roomService.basicBeauty.initBasicBeauty();
isDialogVisible.value = true;
isLoading.value = true;
await Vue.nextTick();
await ((_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({
view: "test-preview"
}));
isLoading.value = false;
roomService.roomService.dataReportManager.reportCount(dataReportManager.MetricsKey.setBasicBeauty);
};
const closeBeautySettingPanel = async () => {
var _a;
isDialogVisible.value = false;
Object.assign(beautyLevels, savedBeautyLevels);
await onBeautyPropertyClick(appliedBasicBeautyItem.value);
(_a = roomService.roomService.roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest();
selectBasicBeautyItem.value = appliedBasicBeautyItem.value;
};
const saveBeautySetting = async () => {
if (!isAllowed.value) return;
appliedBasicBeautyItem.value = selectBasicBeautyItem.value;
if (selectBasicBeautyItem.value === "close") {
await roomService.roomService.basicBeauty.setBasicBeauty(
room.TRTCBeautyStyle.TRTCBeautyStyleNature,
0,
0,
0
);
} else {
await roomService.roomService.basicBeauty.setBasicBeauty(
room.TRTCBeautyStyle.TRTCBeautyStyleNature,
Math.floor(beautyLevels.smoother / 100 * 9),
Math.floor(beautyLevels.whitening / 100 * 9),
Math.floor(beautyLevels.ruddy / 100 * 9)
);
}
Object.assign(savedBeautyLevels, beautyLevels);
closeBeautySettingPanel();
};
const startBeautyTest = async () => {
await roomService.roomService.basicBeauty.setTestBasicBeauty(
room.TRTCBeautyStyle.TRTCBeautyStyleNature,
Math.floor(beautyLevels.smoother / 100 * 9),
Math.floor(beautyLevels.whitening / 100 * 9),
Math.floor(beautyLevels.ruddy / 100 * 9)
);
isBeautyStarted.value = !(beautyLevels.smoother === 0 && beautyLevels.whitening === 0 && beautyLevels.ruddy === 0);
};
const closeBeautyTest = async () => {
await roomService.roomService.basicBeauty.setTestBasicBeauty(
room.TRTCBeautyStyle.TRTCBeautyStyleNature,
0,
0,
0
);
};
const throttleStartBeautyTest = utils.throttle(startBeautyTest, 300);
Vue.watch(sliderValue, async (newValue) => {
if (selectBasicBeautyItem.value === "smoother") {
beautyLevels.smoother = newValue;
}
if (selectBasicBeautyItem.value === "whitening") {
beautyLevels.whitening = newValue;
}
if (selectBasicBeautyItem.value === "ruddy") {
beautyLevels.ruddy = newValue;
}
await throttleStartBeautyTest();
});
const onBeautyPropertyClick = async (type) => {
if (type === "close") {
if (isBeautyStarted.value) {
await closeBeautyTest();
}
beautyLevels.smoother = 0;
beautyLevels.whitening = 0;
beautyLevels.ruddy = 0;
sliderValue.value = 0;
} else {
sliderValue.value = beautyLevels[type];
}
isShowDegree.value = type !== "close";
selectBasicBeautyItem.value = type;
isLoading.value = false;
};
const handleShowResetDialog = () => {
isShowResetDialog.value = true;
};
const resetBeautyProperties = async () => {
await closeBeautyTest();
beautyLevels.smoother = 0;
beautyLevels.whitening = 0;
beautyLevels.ruddy = 0;
sliderValue.value = 0;
isShowResetDialog.value = false;
};
const handleMouseDown = async () => {
await closeBeautyTest();
};
const handleMouseUp = async () => {
await startBeautyTest();
};
return (_ctx, _cache) => {
return Vue.unref(componentConfig).visible ? (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(index$1.default), {
modelValue: isDialogVisible.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isDialogVisible.value = $event),
title: Vue.unref(t)("Beauty"),
width: "600px",
modal: true,
"append-to-room-container": true,
"close-on-click-modal": false,
onClose: closeBeautySettingPanel
}, {
default: Vue.withCtx(() => [
Vue.createElementVNode("div", _hoisted_2, [
Vue.createElementVNode("div", {
class: "reset",
onClick: handleShowResetDialog
}, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconReset)),
Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Reset")), 1)
]),
isShowDegree.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
Vue.createElementVNode("span", _hoisted_5, 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"
}, null, 8, ["modelValue"]),
Vue.createElementVNode("span", _hoisted_6, Vue.toDisplayString(sliderValue.value), 1)
])) : Vue.createCommentVNode("", true),
Vue.createElementVNode("div", {
class: "compare",
onMousedown: handleMouseDown,
onMouseup: handleMouseUp
}, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconCompare), { size: "20" }),
Vue.createElementVNode("span", _hoisted_7, Vue.toDisplayString(Vue.unref(t)("Compare")), 1)
], 32),
isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_8)) : Vue.createCommentVNode("", true),
isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_9)) : Vue.createCommentVNode("", true)
]),
Vue.createElementVNode("div", _hoisted_10, [
Vue.createElementVNode("div", _hoisted_11, Vue.toDisplayString(Vue.unref(t)("Beauty Effects")), 1),
Vue.createElementVNode("div", _hoisted_12, [
(Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(beautyOptionList, (item) => {
return Vue.createElementVNode("div", {
key: item.value,
class: Vue.normalizeClass([
"setting-item",
selectBasicBeautyItem.value === item.value ? "active" : ""
]),
onClick: ($event) => onBeautyPropertyClick(item.value)
}, [
Vue.createElementVNode("i", _hoisted_14, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIIcon), {
icon: item.icon,
size: "32"
}, null, 8, ["icon"])
]),
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)(item.text)), 1)
], 10, _hoisted_13);
}), 64))
])
]),
Vue.createElementVNode("div", _hoisted_15, [
Vue.createElementVNode("div", _hoisted_16, [
Vue.withDirectives(Vue.createElementVNode("input", {
type: "checkbox",
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => Vue.isRef(isLocalStreamMirror) ? isLocalStreamMirror.value = $event : null)
}, null, 512), [
[Vue.vModelCheckbox, Vue.unref(isLocalStreamMirror)]
]),
Vue.createElementVNode("span", _hoisted_17, Vue.toDisplayString(Vue.unref(t)("Mirror")), 1)
]),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
disabled: !isAllowed.value,
onClick: saveBeautySetting,
type: "primary",
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Save")), 1)
]),
_: 1
}, 8, ["disabled"]),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: closeBeautySettingPanel,
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
})
])
]),
_: 1
}, 8, ["modelValue", "title"]),
Vue.createVNode(Vue.unref(index$1.default), {
modelValue: isShowResetDialog.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isShowResetDialog.value = $event),
title: Vue.unref(t)("Sure you want to reset the beauty effect?"),
width: "480px",
modal: true,
"append-to-room-container": true,
"close-on-click-modal": true
}, {
footer: Vue.withCtx(() => [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: resetBeautyProperties,
type: "primary",
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Reset")), 1)
]),
_: 1
}),
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
onClick: _cache[3] || (_cache[3] = ($event) => isShowResetDialog.value = false),
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
})
]),
default: Vue.withCtx(() => [
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("All beauty parameters will revert to default after reset")), 1)
]),
_: 1
}, 8, ["modelValue", "title"])
])) : Vue.createCommentVNode("", true);
};
}
});
exports.default = _sfc_main;