@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.55 kB
JavaScript
import { ref, h, render } from "vue";
import Message from "./Message.vue.mjs";
import useZIndex from "../../../../hooks/useZIndex.mjs";
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 = () => {
render(null, container);
fullscreenElement.removeChild(container);
removeMessage(messageInstance);
};
const topValue = ref(`calc(6% + ${activeMessages.length * 50}px)`);
const messageInstance = {
key: uniqueKey,
updateTop: (newTop) => {
topValue.value = newTop;
}
};
activeMessages.push(messageInstance);
const vNode = h(Message, {
key: uniqueKey,
type,
message,
duration,
remove: onRemove,
top: topValue,
zIndex: useZIndex().nextZIndex()
});
render(vNode, container);
};
export {
createInstance as default
};