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