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,
295 lines (294 loc) • 10.7 kB
JavaScript
import { ref, computed, nextTick } from "vue";
import { storeToRefs } from "pinia";
import useRoomEngine from "../../hooks/useRoomEngine.mjs";
import { useRoomStore } from "../../stores/room.mjs";
import { useBasicStore } from "../../stores/basic.mjs";
import { useI18n } from "../../locales/index.mjs";
import { TUIMediaDevice } from "@tencentcloud/tuiroom-engine-js";
import renderMsg from "../common/base/Message/Message.mjs";
import { MESSAGE_DURATION } from "../../constants/message.mjs";
import "../../utils/environment.mjs";
import AllMembersShareScreenIcon from "../common/icons/AllMembersShareScreenIcon.vue.mjs";
import HostShareScreenIcon from "../common/icons/HostShareScreenIcon.vue.mjs";
import "../../services/main.mjs";
import { roomService } from "../../services/roomService.mjs";
import "mitt";
import "../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import { USERS_STATUS } from "../../constants/room.mjs";
function useIndex() {
const roomEngine = useRoomEngine();
const { t } = useI18n();
const basicStore = useBasicStore();
const roomStore = useRoomStore();
const {
userList,
anchorUserList,
applyToAnchorList,
isOnStateTabActive,
generalUserScreenStreamList,
remoteNotEnteredUserList
} = storeToRefs(roomStore);
let ManageControlType;
((ManageControlType2) => {
ManageControlType2["AUDIO"] = "audio";
ManageControlType2["VIDEO"] = "video";
ManageControlType2["SCREEN"] = "screen";
})(ManageControlType || (ManageControlType = {}));
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) {
currentActiveTabName.value = item.status;
isOnStateTabActive.value = !isOnStateTabActive.value;
roomStore.setOnStageTabStatus(isOnStateTabActive.value);
}
const filteredUserStatusList = computed(() => {
let list = [];
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) => {
var _a, _b;
return ((_a = item.nameCard) == null ? void 0 : _a.includes(searchText.value)) || ((_b = item.userName) == null ? void 0 : _b.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 ? AllMembersShareScreenIcon : HostShareScreenIcon,
func: toggleManageAllMember,
type: "screen"
/* SCREEN */
}
]);
const showManageAllUserDialog = ref(false);
const dialogContent = ref("");
const dialogTitle = ref("");
const dialogActionInfo = ref("");
let stateForAllAudio = false;
let stateForAllVideo = false;
let stateForScreenShare = false;
const currentControlType = ref(
"audio"
/* AUDIO */
);
async function toggleManageAllMember(type) {
currentControlType.value = type;
switch (type) {
case "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;
await nextTick();
dialogActionInfo.value = audioManageInfo.value;
break;
case "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;
await nextTick();
dialogActionInfo.value = videoManageInfo.value;
break;
case "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;
}
}
async function doToggleManageAllMember() {
var _a;
switch (currentControlType.value) {
case "audio":
toggleAllAudio();
break;
case "video":
toggleAllVideo();
break;
case "screen":
await ((_a = roomEngine.instance) == null ? void 0 : _a.closeRemoteDeviceByAdmin({
userId: generalUserScreenStreamList.value[0].userId,
device: TUIMediaDevice.kScreen
}));
toggleAllScreenShare();
break;
}
showManageAllUserDialog.value = false;
}
async function toggleAllScreenShare() {
var _a;
await ((_a = roomEngine.instance) == null ? void 0 : _a.disableDeviceForAllUserByAdmin({
isDisable: stateForScreenShare,
device: TUIMediaDevice.kScreen
}));
roomStore.setDisableScreenShareForAllUserByAdmin(stateForScreenShare);
showMoreControl.value = false;
}
function showApplyUserList() {
{
basicStore.setSidebarOpenStatus(true);
basicStore.setSidebarName("apply");
}
}
async function toggleAllAudio() {
var _a;
if (roomStore.isMicrophoneDisableForAllUser === stateForAllAudio) {
const tipMessage = stateForAllAudio ? t("All audios disabled") : t("All audios enabled");
renderMsg({
type: "success",
message: tipMessage,
duration: MESSAGE_DURATION.NORMAL
});
return;
}
await ((_a = roomEngine.instance) == null ? void 0 : _a.disableDeviceForAllUserByAdmin({
isDisable: stateForAllAudio,
device: TUIMediaDevice.kMicrophone
}));
roomStore.setDisableMicrophoneForAllUserByAdmin(stateForAllAudio);
}
async function toggleAllVideo() {
var _a;
if (roomStore.isCameraDisableForAllUser === stateForAllVideo) {
const tipMessage = stateForAllVideo ? t("All videos disabled") : t("All videos enabled");
renderMsg({
type: "success",
message: tipMessage,
duration: MESSAGE_DURATION.NORMAL
});
return;
}
await ((_a = roomEngine.instance) == null ? void 0 : _a.disableDeviceForAllUserByAdmin({
isDisable: stateForAllVideo,
device: TUIMediaDevice.kCamera
}));
roomStore.setDisableCameraForAllUserByAdmin(stateForAllVideo);
}
const applyToAnchorUserContent = computed(() => {
var _a, _b, _c;
const lastIndex = applyToAnchorList.value.length - 1;
const userName = ((_a = applyToAnchorList.value[lastIndex]) == null ? void 0 : _a.nameCard) || ((_b = applyToAnchorList.value[lastIndex]) == null ? void 0 : _b.userName) || ((_c = applyToAnchorList.value[lastIndex]) == null ? void 0 : _c.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) => item.userId
);
roomService.conferenceInvitationManager.inviteUsers({ userIdList });
renderMsg({
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
};
}
export {
useIndex as default
};