@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,
297 lines (296 loc) • 11.2 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const pinia = require("pinia");
const useRoomEngine = require("../../hooks/useRoomEngine.js");
const room = require("../../stores/room.js");
const basic = require("../../stores/basic.js");
const index = require("../../locales/index.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
const Message = require("../common/base/Message/Message.js");
const message = require("../../constants/message.js");
const environment = require("../../utils/environment.js");
const AllMembersShareScreenIcon = require("../common/icons/AllMembersShareScreenIcon.vue.js");
const HostShareScreenIcon = require("../common/icons/HostShareScreenIcon.vue.js");
require("../../services/main.js");
const roomService = require("../../services/roomService.js");
require("mitt");
require("../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const room$1 = require("../../constants/room.js");
function useIndex() {
const roomEngine = useRoomEngine.default();
const { t } = index.useI18n();
const basicStore = basic.useBasicStore();
const roomStore = room.useRoomStore();
const {
userList,
anchorUserList,
applyToAnchorList,
isOnStateTabActive,
generalUserScreenStreamList,
remoteNotEnteredUserList
} = pinia.storeToRefs(roomStore);
let ManageControlType;
((ManageControlType2) => {
ManageControlType2["AUDIO"] = "audio";
ManageControlType2["VIDEO"] = "video";
ManageControlType2["SCREEN"] = "screen";
})(ManageControlType || (ManageControlType = {}));
const currentActiveTabName = Vue.ref(room$1.USERS_STATUS.Entered);
const audienceUserList = Vue.computed(
() => userList.value.filter(
(user) => !anchorUserList.value.includes(user) && user.isInRoom
)
);
const enterUserList = Vue.computed(
() => userList.value.filter((user) => user.isInRoom)
);
const searchText = Vue.ref("");
const showMoreControl = Vue.ref(false);
function handleToggleStaged(item) {
currentActiveTabName.value = item.status;
isOnStateTabActive.value = !isOnStateTabActive.value;
roomStore.setOnStageTabStatus(isOnStateTabActive.value);
}
const filteredUserStatusList = Vue.computed(() => {
let list = [];
if (roomStore.isFreeSpeakMode) {
list = currentActiveTabName.value === room$1.USERS_STATUS.Entered ? enterUserList.value : remoteNotEnteredUserList.value;
} else {
switch (currentActiveTabName.value) {
case room$1.USERS_STATUS.ON_STAGE:
list = anchorUserList.value;
break;
case room$1.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 = Vue.computed(
() => `${t("On stage")} (${anchorUserList.value.length})`
);
const notStaged = Vue.computed(
() => `${t("Not on stage")} (${audienceUserList.value.length})`
);
const audioManageInfo = Vue.computed(
() => roomStore.isMicrophoneDisableForAllUser ? t("Lift all mute") : t("All mute")
);
const videoManageInfo = Vue.computed(
() => roomStore.isCameraDisableForAllUser ? t("Lift stop all video") : t("All stop video")
);
const userStatusList = Vue.computed(() => {
if (roomStore.isFreeSpeakMode) {
return [
{
status: room$1.USERS_STATUS.Entered,
title: `${t("Entered")} (${enterUserList.value.length})`
},
{
status: room$1.USERS_STATUS.NOT_ENTER,
title: `${t("Not Entered")} (${remoteNotEnteredUserList.value.length})`
}
];
}
return [
{
status: room$1.USERS_STATUS.ON_STAGE,
title: `${t("On stage")} (${anchorUserList.value.length})`
},
{
status: room$1.USERS_STATUS.NOT_ON_STAGE,
title: `${t("Not on stage")} (${audienceUserList.value.length})`
},
{
status: room$1.USERS_STATUS.NOT_ENTER,
title: `${t("Not Entered")} (${remoteNotEnteredUserList.value.length})`
}
];
});
const moreControlList = Vue.computed(() => [
{
title: roomStore.isScreenShareDisableForAllUser ? t("All members can share screen") : t("Screen sharing for host/admin only"),
icon: roomStore.isScreenShareDisableForAllUser ? AllMembersShareScreenIcon.default : HostShareScreenIcon.default,
func: toggleManageAllMember,
type: "screen"
/* SCREEN */
}
]);
const showManageAllUserDialog = Vue.ref(false);
const dialogContent = Vue.ref("");
const dialogTitle = Vue.ref("");
const dialogActionInfo = Vue.ref("");
let stateForAllAudio = false;
let stateForAllVideo = false;
let stateForScreenShare = false;
const currentControlType = Vue.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 Vue.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 Vue.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: TUIRoomEngine.TUIMediaDevice.kScreen
}));
toggleAllScreenShare();
break;
}
showManageAllUserDialog.value = false;
}
async function toggleAllScreenShare() {
var _a;
await ((_a = roomEngine.instance) == null ? void 0 : _a.disableDeviceForAllUserByAdmin({
isDisable: stateForScreenShare,
device: TUIRoomEngine.TUIMediaDevice.kScreen
}));
roomStore.setDisableScreenShareForAllUserByAdmin(stateForScreenShare);
showMoreControl.value = false;
}
function showApplyUserList() {
if (environment.isMobile) {
basicStore.setSidebarOpenStatus(true);
basicStore.setSidebarName("apply");
} else {
basicStore.setShowApplyUserList(true);
}
}
async function toggleAllAudio() {
var _a;
if (roomStore.isMicrophoneDisableForAllUser === stateForAllAudio) {
const tipMessage = stateForAllAudio ? t("All audios disabled") : t("All audios enabled");
Message.default({
type: "success",
message: tipMessage,
duration: message.MESSAGE_DURATION.NORMAL
});
return;
}
await ((_a = roomEngine.instance) == null ? void 0 : _a.disableDeviceForAllUserByAdmin({
isDisable: stateForAllAudio,
device: TUIRoomEngine.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");
Message.default({
type: "success",
message: tipMessage,
duration: message.MESSAGE_DURATION.NORMAL
});
return;
}
await ((_a = roomEngine.instance) == null ? void 0 : _a.disableDeviceForAllUserByAdmin({
isDisable: stateForAllVideo,
device: TUIRoomEngine.TUIMediaDevice.kCamera
}));
roomStore.setDisableCameraForAllUserByAdmin(stateForAllVideo);
}
const applyToAnchorUserContent = Vue.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.roomService.conferenceInvitationManager.inviteUsers({ userIdList });
Message.default({
type: "success",
message: t("Invitation sent, waiting for members to join."),
duration: message.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
};
}
exports.default = useIndex;