@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,
97 lines (96 loc) • 3.3 kB
JavaScript
import { TencentCloudChat } from "@tencentcloud/tuiroom-engine-js";
import useRoomEngine from "../../hooks/useRoomEngine.mjs";
import { useChatStore } from "../../stores/chat.mjs";
import { storeToRefs } from "pinia";
import { useBasicStore } from "../../stores/basic.mjs";
import { useI18n } from "../../locales/index.mjs";
import { computed, watch, onUnmounted } from "vue";
import { useRoomStore } from "../../stores/room.mjs";
import { isMobile } from "../../utils/environment.mjs";
function useSideBar() {
var _a;
const roomEngine = useRoomEngine();
const { t } = useI18n();
const chatStore = useChatStore();
const basicStore = useBasicStore();
const { sdkAppId, isSidebarOpen, sidebarName, roomId } = storeToRefs(basicStore);
const roomStore = useRoomStore();
const { userNumber } = storeToRefs(roomStore);
const showSideBar = computed(
() => isSidebarOpen.value && sidebarName.value !== "transfer-leave"
);
const title = computed(() => {
let sidebarTitle = "";
switch (sidebarName.value) {
case "chat":
sidebarTitle = t("Chat");
break;
case "invite":
sidebarTitle = t("Invite");
break;
case "more":
sidebarTitle = t("More");
break;
case "apply":
sidebarTitle = t("Members applying on stage");
break;
case "manage-member":
sidebarTitle = `${t("Members")} (${userNumber.value})`;
break;
case "aiTranscription":
sidebarTitle = `${t("AI real-time conference content")}`;
break;
}
return sidebarTitle;
});
function handleClose(done) {
basicStore.setSidebarOpenStatus(false);
basicStore.setSidebarName("");
done();
}
const onReceiveMessage = (options) => {
let messageTypeList = [TencentCloudChat.TYPES.MSG_TEXT];
if (!isMobile || basicStore.scene !== "chat") {
messageTypeList = messageTypeList.concat([
TencentCloudChat.TYPES.MSG_IMAGE,
TencentCloudChat.TYPES.MSG_FILE,
TencentCloudChat.TYPES.MSG_FACE,
TencentCloudChat.TYPES.MSG_VIDEO
]);
}
if (!options || !options.data) {
return;
}
const currentConversationId = `GROUP${roomId.value}`;
const isChatSidebarOpen = basicStore.isSidebarOpen && basicStore.sidebarName === "chat";
options.data.forEach((message) => {
if (message.conversationID !== currentConversationId) return;
const shouldUpdateUnreadCount = messageTypeList.includes(message.type) && !isChatSidebarOpen;
if (shouldUpdateUnreadCount) {
chatStore.updateUnReadCount(++chatStore.unReadCount);
}
});
};
let tim = (_a = roomEngine.instance) == null ? void 0 : _a.getTIM();
tim == null ? void 0 : tim.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
watch(sdkAppId, () => {
if (!tim && sdkAppId.value) {
tim = TencentCloudChat.create({ SDKAppID: basicStore.sdkAppId });
tim == null ? void 0 : tim.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
}
});
onUnmounted(() => {
tim == null ? void 0 : tim.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage);
});
return {
t,
isSidebarOpen,
title,
sidebarName,
handleClose,
showSideBar
};
}
export {
useSideBar as default
};