@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,
183 lines (182 loc) • 7.46 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
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");
require("@tencentcloud/tuiroom-engine-js");
require("../../utils/environment.js");
require("mitt");
require("../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const index$1 = require("../common/base/Dialog/index.js");
const closeVirtualBackground = require("../../assets/imgs/close-virtual-background.png.js");
const blurredBackground = require("../../assets/imgs/blurred-background.png.js");
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__ */ Vue.defineComponent({
__name: "VirtualBackground",
setup(__props) {
const { t } = index.useI18n();
const componentConfig = roomService.roomService.componentManager.getComponentConfig("VirtualBackground");
const isAllowed = Vue.computed(
() => {
var _a;
return (_a = roomService.roomService.roomStore.localStream) == null ? void 0 : _a.hasVideoStream;
}
);
const appliedBackground = Vue.ref("close");
const selectedBackground = Vue.ref("close");
const isDialogVisible = Vue.ref(false);
const isLoading = Vue.ref(false);
const openSettingPanel = async () => {
var _a;
roomService.roomService.virtualBackground.initVirtualBackground();
isDialogVisible.value = true;
isLoading.value = true;
await Vue.nextTick();
await ((_a = roomService.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.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.roomService.virtualBackground.toggleVirtualBackground(true);
}
if (selectedBackground.value === "close") {
await roomService.roomService.virtualBackground.toggleVirtualBackground(false);
}
};
const applyVirtualBackground = async (type) => {
isLoading.value = true;
try {
selectedBackground.value = type;
await roomService.roomService.virtualBackground.toggleTestVirtualBackground(
type === "blur"
);
} finally {
isLoading.value = false;
}
};
return (_ctx, _cache) => {
return Vue.unref(componentConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
Vue.createVNode(IconButton.default, {
title: Vue.unref(t)("VirtualBackground"),
onClickIcon: openSettingPanel
}, {
default: Vue.withCtx(() => [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconVirtualBackground), { 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)("VirtualBackground"),
width: "600px",
modal: true,
"append-to-room-container": true,
"close-on-click-modal": false,
onClose: closeSettingPanel
}, {
default: Vue.withCtx(() => [
Vue.createElementVNode("div", _hoisted_2, [
isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3)) : Vue.createCommentVNode("", true),
isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4)) : Vue.createCommentVNode("", true)
]),
Vue.createElementVNode("div", _hoisted_5, [
Vue.createElementVNode("div", {
class: Vue.normalizeClass([
"setting-item",
selectedBackground.value === "close" ? "active" : ""
]),
onClick: _cache[0] || (_cache[0] = ($event) => applyVirtualBackground("close"))
}, [
Vue.createElementVNode("i", _hoisted_6, [
Vue.createElementVNode("img", {
src: Vue.unref(closeVirtualBackground.default),
alt: "close",
style: { "width": "32px" }
}, null, 8, _hoisted_7)
]),
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Close")), 1)
], 2),
Vue.createElementVNode("div", {
class: Vue.normalizeClass([
"setting-item",
selectedBackground.value === "blur" ? "active" : ""
]),
onClick: _cache[1] || (_cache[1] = ($event) => applyVirtualBackground("blur"))
}, [
Vue.createElementVNode("i", _hoisted_8, [
Vue.createElementVNode("img", {
src: Vue.unref(blurredBackground.default),
alt: "blurred"
}, null, 8, _hoisted_9)
]),
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("BlurredBackground")), 1)
], 2)
]),
Vue.createElementVNode("div", _hoisted_10, [
Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), {
disabled: !isAllowed.value,
onClick: confirmVirtualBackground,
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: closeSettingPanel,
style: { "min-width": "88px" }
}, {
default: Vue.withCtx(() => [
Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Cancel")), 1)
]),
_: 1
})
])
]),
_: 1
}, 8, ["modelValue", "title"])
])) : Vue.createCommentVNode("", true);
};
}
});
exports.default = _sfc_main;