@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,
126 lines (117 loc) • 3.32 kB
text/typescript
import { ref, computed } from 'vue';
import { useI18n } from '../../../locales';
import { useBasicStore } from '../../../stores/basic';
import { useRoomStore } from '../../../stores/room';
import { storeToRefs } from 'pinia';
import {
TUIToast,
TOAST_TYPE,
} from '@tencentcloud/uikit-base-component-vue3';
import { clipBoard } from '../../../utils/utils';
import useRoomInviteControl from '../../RoomInvite/useRoomInviteHooks';
import { isWeChat } from '../../../utils/environment';
import { roomService } from '../../../services';
export default function useRoomInfo() {
const { inviteLink } = useRoomInviteControl();
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: string | number) {
try {
await clipBoard(value);
TUIToast({
message: t('Copied successfully'),
type: TOAST_TYPE.SUCCESS,
});
} catch (error) {
TUIToast({
message: t('Copied failure'),
type: TOAST_TYPE.ERROR,
});
}
}
return {
t,
arrowDirection,
isWeChat,
isShowRoomInfo,
isShowRoomInfoTitle,
conferenceTitle,
roomInfoTabList,
handleCloseRoomInfo,
toggleShowRoomInfoStatus,
handleClickOutsideRoomInfoContainer,
onCopy,
};
}