UNPKG

@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,

343 lines (314 loc) 10.6 kB
import { Ref, computed, nextTick, ref } from 'vue'; import { storeToRefs } from 'pinia'; import useGetRoomEngine from '../../hooks/useRoomEngine'; import { UserInfo, useRoomStore } from '../../stores/room'; import { useBasicStore } from '../../stores/basic'; import { useI18n } from '../../locales'; import { TUIMediaDevice } from '@tencentcloud/tuiroom-engine-js'; import { TUIToast, TOAST_TYPE, IconAllMembersShareScreen, IconHostShareScreen, } from '@tencentcloud/uikit-base-component-vue3'; import { MESSAGE_DURATION } from '../../constants/message'; import { isMobile } from '../../utils/environment'; import { roomService } from '../../services'; import { USERS_STATUS } from '../../constants/room'; export default function useIndex() { const roomEngine = useGetRoomEngine(); const { t } = useI18n(); const basicStore = useBasicStore(); const roomStore = useRoomStore(); const { userList, anchorUserList, applyToAnchorList, isOnStateTabActive, generalUserScreenStreamList, remoteNotEnteredUserList, } = storeToRefs(roomStore); enum ManageControlType { AUDIO = 'audio', VIDEO = 'video', SCREEN = 'screen', } const currentActiveTabName = ref(USERS_STATUS.Entered); const audienceUserList = computed(() => userList.value.filter( user => !anchorUserList.value.includes(user) && user.isInRoom ) ); const enterUserList = computed(() => userList.value.filter(user => user.isInRoom) ); const searchText = ref(''); const showMoreControl = ref(false); function handleToggleStaged(item: any) { currentActiveTabName.value = item.status; isOnStateTabActive.value = !isOnStateTabActive.value; roomStore.setOnStageTabStatus(isOnStateTabActive.value); } const filteredUserStatusList = computed(() => { let list: any = []; if (roomStore.isFreeSpeakMode) { list = currentActiveTabName.value === USERS_STATUS.Entered ? enterUserList.value : remoteNotEnteredUserList.value; } else { switch (currentActiveTabName.value) { case USERS_STATUS.ON_STAGE: list = anchorUserList.value; break; case USERS_STATUS.NOT_ON_STAGE: list = audienceUserList.value; break; default: list = remoteNotEnteredUserList.value; } } if (!searchText.value) { return list; } const searchFilter = (item: any) => item.nameCard?.includes(searchText.value) || item.userName?.includes(searchText.value) || item.userId.includes(searchText.value); return list.filter(searchFilter); }); const alreadyStaged = computed( () => `${t('On stage')} (${anchorUserList.value.length})` ); const notStaged = computed( () => `${t('Not on stage')} (${audienceUserList.value.length})` ); const audioManageInfo = computed(() => roomStore.isMicrophoneDisableForAllUser ? t('Lift all mute') : t('All mute') ); const videoManageInfo = computed(() => roomStore.isCameraDisableForAllUser ? t('Lift stop all video') : t('All stop video') ); const userStatusList = computed(() => { if (roomStore.isFreeSpeakMode) { return [ { status: USERS_STATUS.Entered, title: `${t('Entered')} (${enterUserList.value.length})`, }, { status: USERS_STATUS.NOT_ENTER, title: `${t('Not Entered')} (${remoteNotEnteredUserList.value.length})`, }, ]; } return [ { status: USERS_STATUS.ON_STAGE, title: `${t('On stage')} (${anchorUserList.value.length})`, }, { status: USERS_STATUS.NOT_ON_STAGE, title: `${t('Not on stage')} (${audienceUserList.value.length})`, }, { status: USERS_STATUS.NOT_ENTER, title: `${t('Not Entered')} (${remoteNotEnteredUserList.value.length})`, }, ]; }); const moreControlList = computed(() => [ { title: roomStore.isScreenShareDisableForAllUser ? t('All members can share screen') : t('Screen sharing for host/admin only'), icon: roomStore.isScreenShareDisableForAllUser ? IconAllMembersShareScreen : IconHostShareScreen, func: toggleManageAllMember, type: ManageControlType.SCREEN, }, ]); const showManageAllUserDialog: Ref<boolean> = ref(false); const dialogContent: Ref<string> = ref(''); const dialogTitle: Ref<string> = ref(''); const dialogActionInfo: Ref<string> = ref(''); let stateForAllAudio = false; let stateForAllVideo = false; let stateForScreenShare = false; const currentControlType: Ref<ManageControlType> = ref( ManageControlType.AUDIO ); async function toggleManageAllMember(type: ManageControlType) { currentControlType.value = type; switch (type) { case ManageControlType.AUDIO: showManageAllUserDialog.value = true; dialogTitle.value = roomStore.isMicrophoneDisableForAllUser ? t('Enable all audios') : t('All current and new members will be muted'); dialogContent.value = roomStore.isMicrophoneDisableForAllUser ? t('After unlocking, users can freely turn on the microphone') : t('Members will not be able to open the microphone'); stateForAllAudio = !roomStore.isMicrophoneDisableForAllUser; // Mini program update view await nextTick(); dialogActionInfo.value = audioManageInfo.value; break; case ManageControlType.VIDEO: showManageAllUserDialog.value = true; dialogTitle.value = roomStore.isCameraDisableForAllUser ? t('Enable all videos') : t('All and new members will be banned from the camera'); dialogContent.value = roomStore.isCameraDisableForAllUser ? t('After unlocking, users can freely turn on the camera') : t('Members will not be able to open the camera'); stateForAllVideo = !roomStore.isCameraDisableForAllUser; // Mini program update view await nextTick(); dialogActionInfo.value = videoManageInfo.value; break; case ManageControlType.SCREEN: stateForScreenShare = !roomStore.isScreenShareDisableForAllUser; if (generalUserScreenStreamList.value.length === 0) { toggleAllScreenShare(); break; } showManageAllUserDialog.value = true; dialogTitle.value = t( 'Is it turned on that only the host/admin can share the screen?' ); dialogContent.value = t( "Other member is sharing the screen is now, the member's sharing will be terminated after you turning on" ); break; default: break; } } async function doToggleManageAllMember() { switch (currentControlType.value) { case ManageControlType.AUDIO: toggleAllAudio(); break; case ManageControlType.VIDEO: toggleAllVideo(); break; case ManageControlType.SCREEN: await roomEngine.instance?.closeRemoteDeviceByAdmin({ userId: generalUserScreenStreamList.value[0].userId, device: TUIMediaDevice.kScreen, }); toggleAllScreenShare(); break; default: break; } showManageAllUserDialog.value = false; } async function toggleAllScreenShare() { await roomEngine.instance?.disableDeviceForAllUserByAdmin({ isDisable: stateForScreenShare, device: TUIMediaDevice.kScreen, }); roomStore.setDisableScreenShareForAllUserByAdmin(stateForScreenShare); showMoreControl.value = false; } function showApplyUserList() { if (isMobile) { basicStore.setSidebarOpenStatus(true); basicStore.setSidebarName('apply'); } else { basicStore.setShowApplyUserList(true); } } async function toggleAllAudio() { if (roomStore.isMicrophoneDisableForAllUser === stateForAllAudio) { const tipMessage = stateForAllAudio ? t('All audios disabled') : t('All audios enabled'); TUIToast({ type: TOAST_TYPE.SUCCESS, message: tipMessage, duration: MESSAGE_DURATION.NORMAL, }); return; } await roomEngine.instance?.disableDeviceForAllUserByAdmin({ isDisable: stateForAllAudio, device: TUIMediaDevice.kMicrophone, }); roomStore.setDisableMicrophoneForAllUserByAdmin(stateForAllAudio); } async function toggleAllVideo() { if (roomStore.isCameraDisableForAllUser === stateForAllVideo) { const tipMessage = stateForAllVideo ? t('All videos disabled') : t('All videos enabled'); TUIToast({ type: TOAST_TYPE.SUCCESS, message: tipMessage, duration: MESSAGE_DURATION.NORMAL, }); return; } await roomEngine.instance?.disableDeviceForAllUserByAdmin({ isDisable: stateForAllVideo, device: TUIMediaDevice.kCamera, }); roomStore.setDisableCameraForAllUserByAdmin(stateForAllVideo); } const applyToAnchorUserContent = computed(() => { const lastIndex = applyToAnchorList.value.length - 1; const userName = applyToAnchorList.value[lastIndex]?.nameCard || applyToAnchorList.value[lastIndex]?.userName || applyToAnchorList.value[lastIndex]?.userId; if (applyToAnchorList.value.length === 1) { return `${userName} ${t('Applying for the stage')}`; } return `${userName} ${t('and so on number people applying to stage', { number: applyToAnchorList.value.length })}`; }); function toggleClickMoreBtn() { showMoreControl.value = !showMoreControl.value; } const handleCallAllInvitee = () => { const userIdList = remoteNotEnteredUserList.value.map( (item: UserInfo) => item.userId ); roomService.conferenceInvitationManager.inviteUsers({ userIdList }); TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Invitation sent, waiting for members to join.'), duration: MESSAGE_DURATION.NORMAL, }); }; return { showApplyUserList, searchText, t, toggleManageAllMember, doToggleManageAllMember, audioManageInfo, videoManageInfo, showManageAllUserDialog, dialogContent, dialogTitle, dialogActionInfo, ManageControlType, alreadyStaged, notStaged, isOnStateTabActive, handleToggleStaged, applyToAnchorUserContent, toggleClickMoreBtn, showMoreControl, moreControlList, userStatusList, currentActiveTabName, filteredUserStatusList, handleCallAllInvitee, }; }