@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,
50 lines (49 loc) • 1.7 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const Message = require("./Message.vue.js");
const useZIndex = require("../../../../hooks/useZIndex.js");
const activeMessages = [];
const createInstance = ({ type, message, duration = 3e3 }) => {
const container = document.createElement("div");
container.setAttribute("class", "t-message-container");
const fullscreenElement = document.fullscreenElement || document.getElementById("roomContainer") || document.getElementById("pre-conference-container") || document.body;
fullscreenElement.appendChild(container);
const uniqueKey = `message-${Date.now()}-${Math.random()}`;
const updateTopValues = () => {
activeMessages.forEach((msg, index) => {
msg.updateTop(`calc(6% + ${index * 50}px)`);
});
};
const removeMessage = (msg) => {
const index = activeMessages.indexOf(msg);
if (index !== -1) {
activeMessages.splice(index, 1);
updateTopValues();
}
};
const onRemove = () => {
Vue.render(null, container);
fullscreenElement.removeChild(container);
removeMessage(messageInstance);
};
const topValue = Vue.ref(`calc(6% + ${activeMessages.length * 50}px)`);
const messageInstance = {
key: uniqueKey,
updateTop: (newTop) => {
topValue.value = newTop;
}
};
activeMessages.push(messageInstance);
const vNode = Vue.h(Message.default, {
key: uniqueKey,
type,
message,
duration,
remove: onRemove,
top: topValue,
zIndex: useZIndex.default().nextZIndex()
});
Vue.render(vNode, container);
};
exports.default = createInstance;