@tencentcloud/roomkit-web-vue3/lib/components/ManageMember/MemberControl/useMemberControlHooks.js

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

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const index = require("../../../locales/index.js");
const room = require("../../../stores/room.js");
const useRoomEngine = require("../../../hooks/useRoomEngine.js");
const basic = require("../../../stores/basic.js");
const useMasterApplyControl = require("../../../hooks/useMasterApplyControl.js");
const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-js");
const pinia = require("pinia");
const message = require("../../../constants/message.js");
const useMitt = require("../../../hooks/useMitt.js");
const useMemberItemHooks = require("../MemberItem/useMemberItemHooks.js");
require("../../../services/main.js");
const roomService = require("../../../services/roomService.js");
const environment = require("../../../utils/environment.js");
const utils = require("../../../utils/utils.js");
require("mitt");
require("../../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
function useMemberControl(props) {
  const roomEngine = useRoomEngine.default();
  const { t } = index.useI18n();
  const basicStore = basic.useBasicStore();
  const roomStore = room.useRoomStore();
  const isDialogVisible = Vue.ref(false);
  const isShowInput = Vue.ref(false);
  const editorInputEle = Vue.ref();
  const editorInputEleContainer = Vue.ref();
  const tempUserName = Vue.ref("");
  const dialogData = Vue.reactive({
    title: "",
    content: "",
    confirmText: "",
    actionType: "",
    showInput: false,
    isConfirmButtonDisable: false
  });
  const kickOffDialogContent = Vue.computed(
    () => t("whether to kick sb off the room", {
      name: roomService.roomService.getDisplayName(props.userInfo)
    })
  );
  const transferOwnerTitle = Vue.computed(
    () => t("Transfer the roomOwner to sb", {
      name: roomService.roomService.getDisplayName(props.userInfo)
    })
  );
  const {
    isFreeSpeakMode,
    isSpeakAfterTakingSeatMode,
    localUser,
    isGeneralUser,
    anchorUserList,
    maxSeatCount
  } = pinia.storeToRefs(roomStore);
  const {
    agreeUserOnStage,
    denyUserOnStage,
    inviteUserOnStage,
    cancelInviteUserOnStage,
    kickUserOffStage
  } = useMasterApplyControl.default();
  const { isCanOperateMySelf } = useMemberItemHooks.default(props.userInfo);
  const isMe = Vue.computed(() => basicStore.userId === props.userInfo.userId);
  const isTargetUserAnchor = Vue.computed(() => props.userInfo.onSeat === true);
  const isTargetUserAudience = Vue.computed(() => props.userInfo.onSeat !== true);
  const controlList = Vue.computed(() => {
    if (isCanOperateMySelf.value) {
      return [changeUserNameCard.value];
    }
    const agreeOrDenyStageList = props.userInfo.isUserApplyingToAnchor ? [agreeOnStage.value, denyOnStage.value] : [];
    const inviteStageList = isTargetUserAudience.value && !props.userInfo.isUserApplyingToAnchor ? [inviteOnStage.value] : [];
    const onStageControlList = isTargetUserAnchor.value ? [audioControl.value, videoControl.value, makeOffStage.value] : [];
    const controlListObj = {
      freeSpeak: {
        [TUIRoomEngine.TUIRole.kRoomOwner]: [
          audioControl.value,
          videoControl.value,
          chatControl.value,
          setOrRevokeAdmin.value,
          transferOwner.value,
          kickUser.value,
          changeUserNameCard.value
        ],
        [TUIRoomEngine.TUIRole.kAdministrator]: [
          audioControl.value,
          videoControl.value,
          chatControl.value,
          changeUserNameCard.value
        ]
      },
      speakAfterTakeSeat: {
        [TUIRoomEngine.TUIRole.kRoomOwner]: [
          ...inviteStageList,
          ...onStageControlList,
          ...agreeOrDenyStageList,
          setOrRevokeAdmin.value,
          transferOwner.value,
          chatControl.value,
          kickUser.value,
          changeUserNameCard.value
        ],
        [TUIRoomEngine.TUIRole.kAdministrator]: [
          ...inviteStageList,
          ...onStageControlList,
          ...agreeOrDenyStageList,
          chatControl.value,
          changeUserNameCard.value
        ]
      }
    };
    if (isFreeSpeakMode.value) {
      return controlListObj.freeSpeak[localUser.value.userRole] || [];
    }
    if (isSpeakAfterTakingSeatMode.value) {
      return controlListObj.speakAfterTakeSeat[localUser.value.userRole] || [];
    }
    return [];
  });
  const audioControl = Vue.computed(() => ({
    key: "audioControl",
    icon: uikitBaseComponentVue3.IconAudioOpen,
    title: props.userInfo.hasAudioStream ? t("Mute") : t("Unmute"),
    func: muteUserAudio
  }));
  const videoControl = Vue.computed(() => {
    const videoControlTitle = props.userInfo.hasVideoStream ? t("Disable video") : t("Enable video");
    return {
      key: "videoControl",
      icon: uikitBaseComponentVue3.IconVideoOpen,
      title: videoControlTitle,
      func: muteUserVideo
    };
  });
  const chatControl = Vue.computed(() => ({
    key: "chatControl",
    icon: uikitBaseComponentVue3.IconChatForbidden,
    title: props.userInfo.isMessageDisabled ? t("Enable chat") : t("Disable chat"),
    func: disableUserChat
  }));
  const transferOwner = Vue.computed(() => ({
    key: "transferOwner",
    icon: uikitBaseComponentVue3.IconTransferOwner,
    title: t("Make host"),
    func: () => handleOpenDialog("transferOwner")
  }));
  const setOrRevokeAdmin = Vue.computed(() => ({
    key: "setOrRevokeAdmin",
    icon: props.userInfo.userRole === TUIRoomEngine.TUIRole.kAdministrator ? uikitBaseComponentVue3.IconRevokeAdmin : uikitBaseComponentVue3.IconSetAdmin,
    title: props.userInfo.userRole === TUIRoomEngine.TUIRole.kAdministrator ? t("Remove administrator") : t("Set as administrator"),
    func: handleSetOrRevokeAdmin
  }));
  const kickUser = Vue.computed(() => ({
    key: "kickUser",
    icon: uikitBaseComponentVue3.IconKickOut,
    title: t("Kick out"),
    func: () => handleOpenDialog("kickUser")
  }));
  const inviteOnStage = Vue.computed(() => ({
    key: "inviteOnStage",
    icon: props.userInfo.isInvitingUserToAnchor ? uikitBaseComponentVue3.IconDenyOnStage : uikitBaseComponentVue3.IconInviteOnStage,
    title: props.userInfo.isInvitingUserToAnchor ? t("Cancel stage") : t("Invite stage"),
    func: toggleInviteUserOnStage
  }));
  const agreeOnStage = Vue.computed(() => ({
    key: "agreeOnStage",
    icon: uikitBaseComponentVue3.IconOnStage,
    title: t("Agree to the stage"),
    func: agreeUserOnStage
  }));
  const denyOnStage = Vue.computed(() => ({
    key: "denyOnStage",
    icon: uikitBaseComponentVue3.IconDenyOnStage,
    title: t("Refuse stage"),
    func: denyUserOnStage
  }));
  const makeOffStage = Vue.computed(() => ({
    key: "makeOffStage",
    icon: uikitBaseComponentVue3.IconOffStage,
    title: t("Step down"),
    func: kickUserOffStage
  }));
  const changeUserNameCard = Vue.computed(() => ({
    key: "changeUserNameCard",
    icon: uikitBaseComponentVue3.IconEditNameCard,
    title: t("change name"),
    func: () => handleOpenDialog("changeUserNameCard")
  }));
  async function toggleInviteUserOnStage(userInfo) {
    const { isInvitingUserToAnchor } = userInfo;
    if (isInvitingUserToAnchor) {
      cancelInviteUserOnStage(userInfo);
    } else {
      if (anchorUserList.value.length === maxSeatCount.value) {
        uikitBaseComponentVue3.TUIToast({
          type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
          message: `${t("The stage is full")}`,
          duration: message.MESSAGE_DURATION.NORMAL
        });
        return;
      }
      inviteUserOnStage(userInfo);
    }
  }
  async function muteUserAudio(userInfo) {
    var _a, _b;
    if (userInfo.hasAudioStream) {
      await ((_a = roomEngine.instance) == null ? void 0 : _a.closeRemoteDeviceByAdmin({
        userId: userInfo.userId,
        device: TUIRoomEngine.TUIMediaDevice.kMicrophone
      }));
    } else {
      if (userInfo.isRequestingUserOpenMic) {
        uikitBaseComponentVue3.TUIToast({
          type: uikitBaseComponentVue3.TOAST_TYPE.INFO,
          message: `${t("An invitation to open the microphone has been sent to sb.", { name: roomService.roomService.getDisplayName(userInfo) })}`,
          duration: message.MESSAGE_DURATION.NORMAL
        });
        return;
      }
      const request = await ((_b = roomEngine.instance) == null ? void 0 : _b.openRemoteDeviceByAdmin({
        userId: userInfo.userId,
        device: TUIRoomEngine.TUIMediaDevice.kMicrophone,
        timeout: 0,
        requestCallback: (callbackInfo) => {
          roomStore.setRequestUserOpenMic({
            userId: userInfo.userId,
            isRequesting: false
          });
          const { requestCallbackType, code } = callbackInfo;
          switch (requestCallbackType) {
            case TUIRoomEngine.TUIRequestCallbackType.kRequestError:
              if (code === TUIRoomEngine.TUIErrorCode.ERR_REQUEST_ID_REPEAT) {
                uikitBaseComponentVue3.TUIToast({
                  type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
                  message: t(
                    "This member has already received the same request, please try again later"
                  ),
                  duration: message.MESSAGE_DURATION.NORMAL
                });
              }
              break;
          }
        }
      }));
      uikitBaseComponentVue3.TUIToast({
        type: uikitBaseComponentVue3.TOAST_TYPE.INFO,
        message: `${t("An invitation to open the microphone has been sent to sb.", { name: roomService.roomService.getDisplayName(userInfo) })}`,
        duration: message.MESSAGE_DURATION.NORMAL
      });
      if (request && request.requestId) {
        roomStore.setRequestUserOpenMic({
          userId: userInfo.userId,
          isRequesting: true,
          requestId: request.requestId
        });
      }
    }
  }
  async function muteUserVideo(userInfo) {
    var _a, _b;
    if (userInfo.hasVideoStream) {
      await ((_a = roomEngine.instance) == null ? void 0 : _a.closeRemoteDeviceByAdmin({
        userId: userInfo.userId,
        device: TUIRoomEngine.TUIMediaDevice.kCamera
      }));
    } else {
      if (userInfo.isRequestingUserOpenCamera) {
        uikitBaseComponentVue3.TUIToast({
          type: uikitBaseComponentVue3.TOAST_TYPE.INFO,
          message: `${t("An invitation to open the camera has been sent to sb.", { name: roomService.roomService.getDisplayName(userInfo) })}`,
          duration: message.MESSAGE_DURATION.NORMAL
        });
        return;
      }
      const request = await ((_b = roomEngine.instance) == null ? void 0 : _b.openRemoteDeviceByAdmin({
        userId: userInfo.userId,
        device: TUIRoomEngine.TUIMediaDevice.kCamera,
        timeout: 0,
        requestCallback: (callbackInfo) => {
          roomStore.setRequestUserOpenCamera({
            userId: userInfo.userId,
            isRequesting: false
          });
          const { requestCallbackType, code } = callbackInfo;
          switch (requestCallbackType) {
            case TUIRoomEngine.TUIRequestCallbackType.kRequestError:
              if (code === TUIRoomEngine.TUIErrorCode.ERR_REQUEST_ID_REPEAT) {
                uikitBaseComponentVue3.TUIToast({
                  type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
                  message: t(
                    "This member has already received the same request, please try again later"
                  ),
                  duration: message.MESSAGE_DURATION.NORMAL
                });
              }
              break;
          }
        }
      }));
      uikitBaseComponentVue3.TUIToast({
        type: uikitBaseComponentVue3.TOAST_TYPE.INFO,
        message: `${t("An invitation to open the camera has been sent to sb.", { name: roomService.roomService.getDisplayName(userInfo) })}`,
        duration: message.MESSAGE_DURATION.NORMAL
      });
      if (request && request.requestId) {
        roomStore.setRequestUserOpenCamera({
          userId: userInfo.userId,
          isRequesting: true,
          requestId: request.requestId
        });
      }
    }
  }
  async function disableUserChat(userInfo) {
    var _a;
    const { isMessageDisabled } = userInfo;
    try {
      await ((_a = roomEngine.instance) == null ? void 0 : _a.disableSendingMessageByAdmin({
        userId: userInfo.userId,
        isDisable: !isMessageDisabled
      }));
      roomStore.setMuteUserChat(userInfo.userId, !isMessageDisabled);
    } catch (error) {
      uikitBaseComponentVue3.TUIToast({
        type: uikitBaseComponentVue3.TOAST_TYPE.ERROR,
        message: t("Failed to disable chat"),
        duration: message.MESSAGE_DURATION.NORMAL
      });
    }
  }
  async function kickOffUser(userInfo) {
    var _a;
    await ((_a = roomEngine.instance) == null ? void 0 : _a.kickRemoteUserOutOfRoom({
      userId: userInfo.userId
    }));
    roomStore.removeUserInfo(userInfo.userId);
  }
  async function handleTransferOwner(userInfo) {
    var _a, _b;
    const roomInfo = await ((_a = roomEngine.instance) == null ? void 0 : _a.fetchRoomInfo());
    if ((roomInfo == null ? void 0 : roomInfo.roomOwner) === roomStore.localUser.userId) {
      try {
        if (roomStore.localUser.hasScreenStream && roomStore.isScreenShareDisableForAllUser) {
          useMitt.default.emit("ScreenShare:stopScreenShare");
        }
        await ((_b = roomEngine.instance) == null ? void 0 : _b.changeUserRole({
          userId: userInfo.userId,
          userRole: TUIRoomEngine.TUIRole.kRoomOwner
        }));
        roomStore.setMasterUserId(userInfo.userId);
        uikitBaseComponentVue3.TUIToast({
          type: uikitBaseComponentVue3.TOAST_TYPE.SUCCESS,
          message: t("The room owner has been transferred to sb", {
            name: roomService.roomService.getDisplayName(userInfo)
          }),
          duration: message.MESSAGE_DURATION.NORMAL
        });
      } catch (error) {
        uikitBaseComponentVue3.TUIToast({
          type: uikitBaseComponentVue3.TOAST_TYPE.ERROR,
          message: t("Make host failed, please try again."),
          duration: message.MESSAGE_DURATION.NORMAL
        });
      }
    }
  }
  async function handleSetOrRevokeAdmin(userInfo) {
    var _a, _b;
    const newRole = userInfo.userRole === TUIRoomEngine.TUIRole.kGeneralUser ? TUIRoomEngine.TUIRole.kAdministrator : TUIRoomEngine.TUIRole.kGeneralUser;
    await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserRole({
      userId: userInfo.userId,
      userRole: newRole
    }));
    const updatedUserName = roomStore.getUserName(userInfo.userId);
    const tipMessage = newRole === TUIRoomEngine.TUIRole.kAdministrator ? `${t("sb has been set as administrator", { name: updatedUserName })}` : `${t("The administrator status of sb has been withdrawn", { name: updatedUserName })}`;
    uikitBaseComponentVue3.TUIToast({ type: uikitBaseComponentVue3.TOAST_TYPE.SUCCESS, message: tipMessage });
    roomStore.setRemoteUserRole(userInfo.userId, newRole);
    if (newRole === TUIRoomEngine.TUIRole.kGeneralUser && userInfo.hasScreenStream) {
      await ((_b = roomEngine.instance) == null ? void 0 : _b.closeRemoteDeviceByAdmin({
        userId: userInfo.userId,
        device: TUIRoomEngine.TUIMediaDevice.kScreen
      }));
    }
  }
  function handleOpenDialog(action) {
    var _a;
    switch (action) {
      case "kickUser":
        isDialogVisible.value = true;
        Object.assign(dialogData, {
          title: t("Note"),
          content: kickOffDialogContent.value,
          confirmText: t("Confirm"),
          actionType: action,
          showInput: false,
          isConfirmButtonDisable: false
        });
        break;
      case "transferOwner":
        isDialogVisible.value = true;
        Object.assign(dialogData, {
          title: transferOwnerTitle.value,
          content: t(
            "After transfer the room owner, you will become a general user"
          ),
          confirmText: t("Confirm transfer"),
          actionType: action,
          showInput: false,
          isConfirmButtonDisable: false
        });
        break;
      case "changeUserNameCard":
        tempUserName.value = props.userInfo.nameCard || props.userInfo.userName;
        if (environment.isMobile) {
          isShowInput.value = true;
          (_a = document == null ? void 0 : document.body) == null ? void 0 : _a.appendChild(editorInputEleContainer.value);
        } else {
          isDialogVisible.value = true;
        }
        Object.assign(dialogData, {
          title: t("change name"),
          content: "",
          confirmText: t("Confirm"),
          actionType: action,
          showInput: true,
          isConfirmButtonDisable: Vue.computed(() => tempUserName.value === "")
        });
        break;
    }
  }
  const nameCardCheck = () => {
    const result = utils.calculateByteLength(tempUserName.value) <= 32;
    !result && uikitBaseComponentVue3.TUIToast({
      type: uikitBaseComponentVue3.TOAST_TYPE.WARNING,
      message: t("The user name cannot exceed 32 characters"),
      duration: message.MESSAGE_DURATION.NORMAL
    });
    return result;
  };
  async function handleChangeUserNameCard(userInfo) {
    var _a;
    if (!nameCardCheck()) return;
    try {
      await ((_a = roomEngine.instance) == null ? void 0 : _a.changeUserNameCard({
        userId: userInfo.userId,
        nameCard: tempUserName.value
      }));
      uikitBaseComponentVue3.TUIToast({
        type: uikitBaseComponentVue3.TOAST_TYPE.SUCCESS,
        message: t("Name changed successfully"),
        duration: message.MESSAGE_DURATION.NORMAL
      });
    } catch (error) {
      uikitBaseComponentVue3.TUIToast({
        type: uikitBaseComponentVue3.TOAST_TYPE.ERROR,
        message: t("change name failed, please try again."),
        duration: message.MESSAGE_DURATION.NORMAL
      });
    }
  }
  function handleAction(userInfo) {
    switch (dialogData.actionType) {
      case "kickUser":
        kickOffUser(userInfo);
        break;
      case "transferOwner":
        handleTransferOwner(userInfo);
        break;
      case "changeUserNameCard":
        handleChangeUserNameCard(userInfo);
        isShowInput.value = false;
    }
    isDialogVisible.value = false;
  }
  function handleCancelDialog() {
    tempUserName.value = props.userInfo.nameCard || props.userInfo.userName;
    isDialogVisible.value = false;
  }
  return {
    props,
    isMe,
    isGeneralUser,
    controlList,
    kickOffDialogContent,
    handleCancelDialog,
    handleAction,
    isDialogVisible,
    dialogData,
    tempUserName,
    isShowInput,
    editorInputEle,
    editorInputEleContainer
  };
}
exports.default = useMemberControl;