@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,
184 lines (183 loc) • 7.07 kB
JavaScript
import { defineComponent, computed, ref, createElementBlock, createCommentVNode, unref, openBlock, createVNode, withCtx, createElementVNode, normalizeClass, toDisplayString, createTextVNode, nextTick } from "vue";
import IconButton from "../common/base/IconButton.vue.mjs";
import VirtualBackgroundIcon from "../common/icons/VirtualBackgroundIcon.vue.mjs";
import { useI18n } from "../../locales/index.mjs";
import "../../services/main.mjs";
import { roomService } from "../../services/roomService.mjs";
import "@tencentcloud/tuiroom-engine-electron";
import "../../utils/environment.mjs";
import "mitt";
import "../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import Dialog from "../common/base/Dialog/index.vue.mjs";
import CloseVirtualBackground from "../../assets/imgs/close-virtual-background.png.mjs";
import BlurredBackground from "../../assets/imgs/blurred-background.png.mjs";
import TuiButton from "../common/base/Button.vue.mjs";
const _hoisted_1 = {
key: 0,
class: "virtualBackground-control-container"
};
const _hoisted_2 = {
id: "stream-preview",
class: "stream-preview"
};
const _hoisted_3 = {
key: 0,
class: "mask"
};
const _hoisted_4 = {
key: 1,
class: "spinner"
};
const _hoisted_5 = { class: "setting" };
const _hoisted_6 = { class: "setting-item-icon" };
const _hoisted_7 = ["src"];
const _hoisted_8 = { class: "setting-item-icon" };
const _hoisted_9 = ["src"];
const _hoisted_10 = { class: "footer" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "VirtualBackground",
setup(__props) {
const { t } = useI18n();
const componentConfig = roomService.componentManager.getComponentConfig("VirtualBackground");
const isAllowed = computed(
() => {
var _a;
return (_a = roomService.roomStore.localStream) == null ? void 0 : _a.hasVideoStream;
}
);
const appliedBackground = ref("close");
const selectedBackground = ref("close");
const isDialogVisible = ref(false);
const isLoading = ref(false);
const openSettingPanel = async () => {
var _a;
roomService.virtualBackground.initVirtualBackground();
isDialogVisible.value = true;
isLoading.value = true;
await nextTick();
await ((_a = roomService.roomEngine.instance) == null ? void 0 : _a.startCameraDeviceTest({
view: "stream-preview"
}));
isLoading.value = false;
};
const closeSettingPanel = async () => {
var _a;
isDialogVisible.value = false;
await applyVirtualBackground(appliedBackground.value);
(_a = roomService.roomEngine.instance) == null ? void 0 : _a.stopCameraDeviceTest();
selectedBackground.value = appliedBackground.value;
};
const confirmVirtualBackground = async () => {
if (!isAllowed.value) return;
appliedBackground.value = selectedBackground.value;
closeSettingPanel();
if (selectedBackground.value === "blur") {
await roomService.virtualBackground.toggleVirtualBackground(true);
}
if (selectedBackground.value === "close") {
await roomService.virtualBackground.toggleVirtualBackground(false);
}
};
const applyVirtualBackground = async (type) => {
isLoading.value = true;
try {
selectedBackground.value = type;
await roomService.virtualBackground.toggleTestVirtualBackground(
type === "blur"
);
} finally {
isLoading.value = false;
}
};
return (_ctx, _cache) => {
return unref(componentConfig).visible ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(IconButton, {
title: unref(t)("VirtualBackground"),
onClickIcon: openSettingPanel
}, {
default: withCtx(() => [
createVNode(VirtualBackgroundIcon)
]),
_: 1
}, 8, ["title"]),
createVNode(Dialog, {
modelValue: isDialogVisible.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isDialogVisible.value = $event),
title: unref(t)("VirtualBackground"),
width: "600px",
modal: true,
"append-to-room-container": true,
"close-on-click-modal": false,
onClose: closeSettingPanel
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true),
isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true)
]),
createElementVNode("div", _hoisted_5, [
createElementVNode("div", {
class: normalizeClass([
"setting-item",
selectedBackground.value === "close" ? "active" : ""
]),
onClick: _cache[0] || (_cache[0] = ($event) => applyVirtualBackground("close"))
}, [
createElementVNode("i", _hoisted_6, [
createElementVNode("img", {
src: unref(CloseVirtualBackground),
alt: "close",
style: { "width": "32px" }
}, null, 8, _hoisted_7)
]),
createElementVNode("span", null, toDisplayString(unref(t)("Close")), 1)
], 2),
createElementVNode("div", {
class: normalizeClass([
"setting-item",
selectedBackground.value === "blur" ? "active" : ""
]),
onClick: _cache[1] || (_cache[1] = ($event) => applyVirtualBackground("blur"))
}, [
createElementVNode("i", _hoisted_8, [
createElementVNode("img", {
src: unref(BlurredBackground),
alt: "blurred"
}, null, 8, _hoisted_9)
]),
createElementVNode("span", null, toDisplayString(unref(t)("BlurredBackground")), 1)
], 2)
]),
createElementVNode("div", _hoisted_10, [
createVNode(TuiButton, {
class: "button",
disabled: !isAllowed.value,
onClick: confirmVirtualBackground
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Save")), 1)
]),
_: 1
}, 8, ["disabled"]),
createVNode(TuiButton, {
class: "button",
type: "primary",
onClick: closeSettingPanel
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
]),
_: 1
})
])
]),
_: 1
}, 8, ["modelValue", "title"])
])) : createCommentVNode("", true);
};
}
});
export {
_sfc_main as default
};