@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,
121 lines (120 loc) • 3.48 kB
JavaScript
import { ref, computed } from "vue";
import { useI18n } from "../../../locales/index.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
import { storeToRefs } from "pinia";
import renderMsg from "../../common/base/Message/Message.mjs";
import { isWeChat } from "../../../utils/environment.mjs";
import { clipBoard } from "../../../utils/adapter.mjs";
import useRoomInvite from "../../RoomInvite/useRoomInviteHooks.mjs";
import "../../../services/main.mjs";
import { roomService } from "../../../services/roomService.mjs";
import "@tencentcloud/tuiroom-engine-electron";
import "mitt";
import "../../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
function useRoomInfo() {
const { inviteLink } = useRoomInvite();
const basicStore = useBasicStore();
const roomStore = useRoomStore();
const { roomId, isRoomLinkVisible } = storeToRefs(basicStore);
const { masterUserId, roomName, password } = storeToRefs(roomStore);
const { t } = useI18n();
const isShowRoomInfo = ref(false);
const roomType = computed(
() => roomStore.isFreeSpeakMode ? t("Free Speech Room") : t("On-stage Speaking Room")
);
const arrowDirection = ref(false);
const roomLinkConfig = roomService.getComponentConfig("RoomLink");
const masterUserName = computed(
() => roomStore.getUserName(masterUserId.value) || masterUserId.value
);
const isShowRoomInfoTitle = computed(() => masterUserName.value);
const conferenceTitle = computed(() => `${roomName.value}`);
const roomInfoTabList = computed(() => [
{
id: 1,
title: "Host",
content: masterUserName.value,
copyLink: "",
isShowCopyIcon: false,
visible: true
},
{
id: 2,
title: "Room Type",
content: roomType.value,
copyLink: "",
isShowCopyIcon: false,
visible: true
},
{
id: 3,
title: "Room ID",
content: roomId.value,
copyLink: roomId.value,
isShowCopyIcon: true,
visible: true
},
{
id: 4,
title: "Room Password",
content: password.value,
copyLink: password.value,
isShowCopyIcon: true,
visible: password.value
},
{
id: 5,
title: "Room Link",
content: inviteLink.value,
copyLink: inviteLink.value,
isShowCopyIcon: true,
visible: isRoomLinkVisible.value && roomLinkConfig.visible
}
]);
function toggleShowRoomInfoStatus() {
isShowRoomInfo.value = !isShowRoomInfo.value;
arrowDirection.value = !arrowDirection.value;
}
function handleClickOutsideRoomInfoContainer() {
if (isShowRoomInfo.value || arrowDirection.value) {
isShowRoomInfo.value = false;
arrowDirection.value = false;
}
}
function handleCloseRoomInfo() {
isShowRoomInfo.value = false;
arrowDirection.value = false;
}
async function onCopy(value) {
try {
await clipBoard(value);
renderMsg({
message: t("Copied successfully"),
type: "success"
});
} catch (error) {
renderMsg({
message: t("Copied failure"),
type: "error"
});
}
}
return {
t,
arrowDirection,
isWeChat,
isShowRoomInfo,
isShowRoomInfoTitle,
conferenceTitle,
roomInfoTabList,
handleCloseRoomInfo,
toggleShowRoomInfoStatus,
handleClickOutsideRoomInfoContainer,
onCopy
};
}
export {
useRoomInfo as default
};