@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,
121 lines (120 loc) • 3.82 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const index = require("../../../locales/index.js");
const basic = require("../../../stores/basic.js");
const room = require("../../../stores/room.js");
const pinia = require("pinia");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const environment = require("../../../utils/environment.js");
const adapter = require("../../../utils/adapter.js");
const useRoomInviteHooks = require("../../RoomInvite/useRoomInviteHooks.js");
require("../../../services/main.js");
const roomService = require("../../../services/roomService.js");
require("@tencentcloud/tuiroom-engine-js");
require("mitt");
require("../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
function useRoomInfo() {
const { inviteLink } = useRoomInviteHooks.default();
const basicStore = basic.useBasicStore();
const roomStore = room.useRoomStore();
const { roomId, isRoomLinkVisible } = pinia.storeToRefs(basicStore);
const { masterUserId, roomName, password } = pinia.storeToRefs(roomStore);
const { t } = index.useI18n();
const isShowRoomInfo = Vue.ref(false);
const roomType = Vue.computed(
() => roomStore.isFreeSpeakMode ? t("Free Speech Room") : t("On-stage Speaking Room")
);
const arrowDirection = Vue.ref(false);
const roomLinkConfig = roomService.roomService.getComponentConfig("RoomLink");
const masterUserName = Vue.computed(
() => roomStore.getUserName(masterUserId.value) || masterUserId.value
);
const isShowRoomInfoTitle = Vue.computed(() => masterUserName.value);
const conferenceTitle = Vue.computed(() => `${roomName.value}`);
const roomInfoTabList = Vue.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 adapter.clipBoard(value);
uikitBaseComponentVue3.TUIToast({
message: t("Copied successfully"),
type: uikitBaseComponentVue3.TOAST_TYPE.SUCCESS
});
} catch (error) {
uikitBaseComponentVue3.TUIToast({
message: t("Copied failure"),
type: uikitBaseComponentVue3.TOAST_TYPE.ERROR
});
}
}
return {
t,
arrowDirection,
isWeChat: environment.isWeChat,
isShowRoomInfo,
isShowRoomInfoTitle,
conferenceTitle,
roomInfoTabList,
handleCloseRoomInfo,
toggleShowRoomInfoStatus,
handleClickOutsideRoomInfoContainer,
onCopy
};
}
exports.default = useRoomInfo;