@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,
307 lines (306 loc) • 12.4 kB
JavaScript
import { defineComponent, ref, watch, createElementBlock, openBlock, createVNode, unref, withCtx, createElementVNode, createCommentVNode, toDisplayString, Fragment, renderList, normalizeClass, withDirectives, isRef, vModelCheckbox, nextTick } from "vue";
import { IconBasicBeauty, TUIDialog, IconReset, IconCompare, IconCloseBeauty, IconSmootherBeauty, IconWhiteningBeauty, IconRuddyBeauty, TUIIcon } from "@tencentcloud/uikit-base-component-vue3";
import { useI18n } from "../../../locales/index.mjs";
import "../../hooks/useAudioDeviceState/index.mjs";
import { useVideoDeviceState } from "../../hooks/useVideoDeviceState/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "../../../stores/room.mjs";
import "../../hooks/useUserState/useUserActions/useAudioAction.mjs";
import "../../hooks/useUserState/useUserActions/useChatAction.mjs";
import "../../hooks/useUserState/useUserActions/useVideoAction.mjs";
import "../../hooks/useUserState/useUserActions/useTransferOwnerAction.mjs";
import "../../hooks/useUserState/useUserActions/useChangeNameCardAction/index.mjs";
import "../../hooks/useUserState/useUserActions/useKickUserAction.mjs";
import "../../hooks/useUserState/useUserActions/useSeatAction.mjs";
import "../../hooks/useUserState/useUserActions/useAdminAction.mjs";
import "pinia";
import "../../store/room.mjs";
import "../../../hooks/useRoomEngine.mjs";
import "../../../utils/environment.mjs";
import "../../manager/userEventManger.mjs";
import "../../../hooks/useZIndex.mjs";
/* empty css */
import useVideoEffectState from "../../hooks/useFreeBeautyState/index.mjs";
import IconButton from "../../../components/common/base/IconButton.vue.mjs";
import Slider from "../../../components/common/base/Slider.vue2.mjs";
import { throttle } from "../../../utils/utils.mjs";
const _hoisted_1 = { class: "free-beauty" };
const _hoisted_2 = { class: "free-beauty-container" };
const _hoisted_3 = {
id: "test-preview",
class: "test-preview"
};
const _hoisted_4 = { class: "text" };
const _hoisted_5 = {
key: 0,
class: "degree"
};
const _hoisted_6 = { class: "text" };
const _hoisted_7 = { class: "text-value" };
const _hoisted_8 = { class: "text" };
const _hoisted_9 = {
key: 1,
class: "mask"
};
const _hoisted_10 = {
key: 2,
class: "spinner"
};
const _hoisted_11 = { class: "setting" };
const _hoisted_12 = { class: "setting-header" };
const _hoisted_13 = { class: "setting-container" };
const _hoisted_14 = ["onClick"];
const _hoisted_15 = { class: "setting-item-icon" };
const _hoisted_16 = { class: "footer" };
const _hoisted_17 = { class: "mirror-container" };
const _hoisted_18 = { class: "mirror-text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
setup(__props) {
const { isCameraTesting, isCameraTestLoading, camera, isLocalMirror } = useVideoDeviceState();
const { beautyConfig, setFreeBeauty, saveBeautySetting } = useVideoEffectState();
const { t } = useI18n();
const isBeautyDialogVisible = ref(false);
const isResetDialogVisible = ref(false);
const isShowDegree = ref(false);
const isLoading = ref(false);
const isBeautyStarted = ref(false);
const sliderValue = ref(0);
const freeBeautyConfig = ref({
beautyLevel: 0,
whitenessLevel: 0,
ruddinessLevel: 0
});
const selectBasicBeautyItem = ref(
"close"
/* Close */
);
const appliedBasicBeautyItem = ref(
"close"
/* Close */
);
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 throttleStartBeautyTest = throttle(startBeautyTest, 300);
watch(sliderValue, async (newValue) => {
if (selectBasicBeautyItem.value === "smoother") {
freeBeautyConfig.value.beautyLevel = newValue;
}
if (selectBasicBeautyItem.value === "whitening") {
freeBeautyConfig.value.whitenessLevel = newValue;
}
if (selectBasicBeautyItem.value === "ruddy") {
freeBeautyConfig.value.ruddinessLevel = newValue;
}
throttleStartBeautyTest();
});
watch(isLocalMirror, async (mirror) => {
camera.switchMirror({ mirror });
});
function onBeautyPropertyClick(option) {
switch (option) {
case "close":
{
if (isBeautyStarted.value) {
stopBeautyTest();
}
freeBeautyConfig.value.beautyLevel = 0;
freeBeautyConfig.value.whitenessLevel = 0;
freeBeautyConfig.value.ruddinessLevel = 0;
sliderValue.value = 0;
}
break;
case "smoother":
sliderValue.value = freeBeautyConfig.value.beautyLevel;
break;
case "whitening":
sliderValue.value = freeBeautyConfig.value.whitenessLevel;
break;
case "ruddy":
sliderValue.value = freeBeautyConfig.value.ruddinessLevel;
break;
}
selectBasicBeautyItem.value = option;
isShowDegree.value = option !== "close";
isLoading.value = false;
}
async function openBeautySettingPanel() {
isBeautyDialogVisible.value = true;
isLoading.value = true;
await nextTick();
await startCameraTest();
isLoading.value = false;
}
async function closeBeautySettingPanel() {
isBeautyDialogVisible.value = false;
await stopCameraTest();
onBeautyPropertyClick(appliedBasicBeautyItem.value);
selectBasicBeautyItem.value = appliedBasicBeautyItem.value;
}
async function startCameraTest() {
await camera.startCameraDeviceTest({ view: "test-preview" });
}
async function stopCameraTest() {
if (isCameraTesting.value || isCameraTestLoading.value) {
await camera.stopCameraDeviceTest();
}
}
async function startBeautyTest() {
setFreeBeauty(freeBeautyConfig.value);
isBeautyStarted.value = !(freeBeautyConfig.value.beautyLevel === 0 && freeBeautyConfig.value.whitenessLevel === 0 && freeBeautyConfig.value.ruddinessLevel === 0);
}
function stopBeautyTest() {
const config = { beautyLevel: 0, whitenessLevel: 0, ruddinessLevel: 0 };
setFreeBeauty(config);
}
function saveFreeBeautySetting() {
appliedBasicBeautyItem.value = selectBasicBeautyItem.value;
saveBeautySetting();
closeBeautySettingPanel();
}
function cancelFreeBeautySetting() {
freeBeautyConfig.value = { ...beautyConfig.value };
closeBeautySettingPanel();
}
function handleShowResetDialog() {
isResetDialogVisible.value = true;
}
function handleHideResetDialog() {
isResetDialogVisible.value = false;
}
function resetBeautyProperties() {
stopBeautyTest();
freeBeautyConfig.value.beautyLevel = 0;
freeBeautyConfig.value.whitenessLevel = 0;
freeBeautyConfig.value.ruddinessLevel = 0;
sliderValue.value = 0;
isResetDialogVisible.value = false;
}
function handleMouseDown() {
stopBeautyTest();
}
function handleMouseUp() {
startBeautyTest();
}
return (_ctx, _cache) => {
return 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(TUIDialog), {
customClasses: ["beauty-dialog"],
visible: isBeautyDialogVisible.value,
title: unref(t)("Beauty"),
center: true,
confirmText: unref(t)("Save"),
cancelText: unref(t)("Cancel"),
onConfirm: saveFreeBeautySetting,
onCancel: cancelFreeBeautySetting,
onClose: closeBeautySettingPanel
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", {
class: "reset",
onClick: handleShowResetDialog
}, [
createVNode(unref(IconReset)),
createElementVNode("span", _hoisted_4, toDisplayString(unref(t)("Reset")), 1)
]),
isShowDegree.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
createElementVNode("span", _hoisted_6, 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_7, toDisplayString(sliderValue.value), 1)
])) : createCommentVNode("", true),
createElementVNode("div", {
class: "compare",
onMousedown: handleMouseDown,
onMouseup: handleMouseUp
}, [
createVNode(unref(IconCompare), { size: "20" }),
createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("Compare")), 1)
], 32),
isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_9)) : createCommentVNode("", true),
isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_10)) : createCommentVNode("", true)
]),
createElementVNode("div", _hoisted_11, [
createElementVNode("div", _hoisted_12, toDisplayString(unref(t)("Beauty Effects")), 1),
createElementVNode("div", _hoisted_13, [
(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_15, [
createVNode(unref(TUIIcon), {
icon: item.icon,
size: "32"
}, null, 8, ["icon"])
]),
createElementVNode("span", null, toDisplayString(unref(t)(item.text)), 1)
], 10, _hoisted_14);
}), 64))
])
]),
createElementVNode("div", _hoisted_16, [
createElementVNode("div", _hoisted_17, [
withDirectives(createElementVNode("input", {
type: "checkbox",
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(isLocalMirror) ? isLocalMirror.value = $event : null)
}, null, 512), [
[vModelCheckbox, unref(isLocalMirror)]
]),
createElementVNode("span", _hoisted_18, toDisplayString(unref(t)("Mirror")), 1)
])
])
])
]),
_: 1
}, 8, ["visible", "title", "confirmText", "cancelText"]),
createVNode(unref(TUIDialog), {
visible: isResetDialogVisible.value,
title: unref(t)("Sure you want to reset the beauty effect?"),
center: true,
onConfirm: resetBeautyProperties,
onCancel: handleHideResetDialog,
onClose: handleHideResetDialog
}, {
default: withCtx(() => [
createElementVNode("span", null, toDisplayString(unref(t)("All beauty parameters will revert to default after reset")), 1)
]),
_: 1
}, 8, ["visible", "title"])
]);
};
}
});
export {
_sfc_main as default
};