tuikit-atomicx-vue3 0.1.0

package/src/hooks/useUserActions/useChangeNameCardAction/index.ts

@@ -0,0 +1,68 @@
+import { reactive, h, render, markRaw } from 'vue';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+// import { MESSAGE_DURATION } from '../../../../../constants/message';
+import useRoomEngine from '../../useRoomEngine';
+import { useI18n } from '../../../locales';
+import { IconEditNameCard } from '@tencentcloud/uikit-base-component-vue3';
+import ChangeNameCardDialog from './changeNameCardDialog.vue';
+import changeNameCardInput from './changeNameCardInput.vue';
+import { calculateByteLength } from '../../../utils/utils';
+import { UserAction, UserInfo } from '../../../types';
+import { isMobile } from '../../../utils/environment';
+
+const roomEngine = useRoomEngine();
+const { t } = useI18n();
+export default function useNameCardAction(userInfo: UserInfo) {
+  const nameCardCheck = (inputUserName: string) => {
+    const result = calculateByteLength(inputUserName) <= 32;
+    !result &&
+      TUIToast({
+        type: TOAST_TYPE.WARNING,
+        message: t('The user name cannot exceed 32 characters'),
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+    return result;
+  };
+
+  async function handleChangeUserNameCard(inputUserName: string) {
+    if (!nameCardCheck(inputUserName)) {
+      return Promise.reject('The user name cannot exceed 32 characters');
+    }
+    try {
+      await roomEngine.instance?.changeUserNameCard({
+        userId: userInfo.userId,
+        nameCard: inputUserName,
+      });
+      TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: t('Name changed successfully'),
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+    } catch (error) {
+      TUIToast({
+        type: TOAST_TYPE.ERROR,
+        message: t('change name failed, please try again.'),
+        duration: 5000,
+      });
+    }
+  }
+
+  function renderChangeNameCardDialog() {
+    const Component = isMobile ? changeNameCardInput : ChangeNameCardDialog;
+    const vNode = h(Component, {
+      userInfo,
+      confirmFunction: handleChangeUserNameCard,
+    });
+    const div = document.createElement('div');
+    render(vNode, div);
+    document.getElementById('roomContainer')?.appendChild(div.childNodes[0]);
+  }
+
+  const changeUserNameCard = reactive({
+    key: UserAction.ChangeUserNameCardAction,
+    icon: markRaw(IconEditNameCard),
+    label: t('change name'),
+    handler: renderChangeNameCardDialog,
+  });
+  return changeUserNameCard;
+}

package/src/hooks/useUserActions/useChatAction.ts

@@ -0,0 +1,39 @@
+import { computed, reactive, markRaw } from 'vue';
+import { TUIToast, TOAST_TYPE, IconChatForbidden } from '@tencentcloud/uikit-base-component-vue3';
+// import { MESSAGE_DURATION } from '../../../../constants/message';
+import useRoomEngine from '../useRoomEngine';
+import { useI18n } from '../../locales';
+import { UserInfo, UserAction, ActionType } from '../../types';
+
+const roomEngine = useRoomEngine();
+const { t } = useI18n();
+export default function useChatAction(
+  userInfo: UserInfo
+): ActionType<UserAction> {
+  async function disableUserChat() {
+    const { isMessageDisabled } = userInfo;
+    try {
+      await roomEngine.instance?.disableSendingMessageByAdmin({
+        userId: userInfo.userId,
+        isDisable: !isMessageDisabled,
+      });
+    } catch (error) {
+      TUIToast({
+        type: TOAST_TYPE.ERROR,
+        message: t('Failed to disable chat'),
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+    }
+  }
+
+  const chatControl = reactive({
+    key: UserAction.ChatAction,
+    icon: markRaw(IconChatForbidden),
+    label: computed(() =>
+      userInfo.isMessageDisabled ? t('Enable chat') : t('Disable chat')
+    ),
+    handler: disableUserChat,
+  });
+
+  return chatControl;
+}

package/src/hooks/useUserActions/useKickUserAction.ts

@@ -0,0 +1,37 @@
+import { reactive, markRaw } from 'vue';
+import useRoomEngine from '../useRoomEngine';
+import { useI18n } from '../../locales';
+import TUIMessageBox from '../../baseComp/MessageBox';
+import { UserInfo, UserAction } from '../../types';
+import { IconKickOut } from '@tencentcloud/uikit-base-component-vue3';
+import useUserState from '../../states/UserState/index';
+
+const roomEngine = useRoomEngine();
+const { t } = useI18n();
+const { getDisplayName } = useUserState();
+export default function useKickUserAction(userInfo: UserInfo) {
+  async function kickUserFunc() {
+    TUIMessageBox({
+      title: t('Note'),
+      message: t('whether to kick sb off the room', {
+        name: getDisplayName(userInfo),
+      }),
+      confirmButtonText: t('Confirm'),
+      cancelButtonText: t('Cancel'),
+      callback: async action => {
+        if (action === 'confirm') {
+          await roomEngine.instance?.kickRemoteUserOutOfRoom({
+            userId: userInfo.userId,
+          });
+        }
+      },
+    });
+  }
+  const kickUser = reactive({
+    key: UserAction.KickOutOfRoomAction,
+    icon: markRaw(IconKickOut),
+    label: t('Kick out'),
+    handler: kickUserFunc,
+  });
+  return kickUser;
+}

package/src/hooks/useUserActions/useMemberInviteAction.ts

@@ -0,0 +1,55 @@
+import { computed, defineComponent, reactive, watch } from 'vue';
+import { TUIInvitationStatus } from '@tencentcloud/tuiroom-engine-js';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import { ActionType, UserAction } from '../../types';
+import { useI18n } from '../../locales';
+import { UserInfo } from '../../types';
+// import { MESSAGE_DURATION } from '../../../../constants/message';
+// import { useI18n } from '../../../../locales';
+// import { UserInfo, UserAction, ActionType } from '../../../type';
+
+const { t } = useI18n();
+
+export default function useMemberInviteAction(
+  userInfo: UserInfo
+): ActionType<UserAction> {
+  const handleInvite = () => {
+    roomService.conferenceInvitationManager.inviteUsers({
+      userIdList: [userInfo.userId],
+    });
+    TUIToast({
+      type: TOAST_TYPE.SUCCESS,
+      message: t('Invitation sent, waiting for members to join.'),
+      // duration: MESSAGE_DURATION.NORMAL,
+    });
+  };
+
+  const invitationStatus = computed(() => userInfo.invitationStatus);
+
+  const inviteControl = reactive({
+    key: UserAction.InviteEnterRoomAction,
+    type: 'control',
+    label: t('Call'),
+    handler: handleInvite,
+  });
+
+  watch(invitationStatus, newVal => {
+    if (newVal === TUIInvitationStatus.kPending) {
+      inviteControl.label = t('Calling...');
+      inviteControl.type = 'info';
+      inviteControl.handler = () => {};
+    }
+    if (newVal === TUIInvitationStatus.kRejected) {
+      inviteControl.label = t('Not joining for now');
+      inviteControl.type = 'info';
+      inviteControl.handler = () => {};
+      setTimeout(() => {
+        inviteControl.label = t('Call');
+        inviteControl.type = 'control';
+        inviteControl.handler = handleInvite;
+      }, 3000);
+    }
+  });
+
+  return inviteControl;
+}

package/src/hooks/useUserActions/useSeatAction.ts

@@ -0,0 +1,191 @@
+import { computed, reactive } from 'vue';
+import {
+  TUIRequestCallbackType,
+  TUIErrorCode,
+} from '@tencentcloud/tuiroom-engine-js';
+import {
+  IconInviteOnStage,
+  IconDenyOnStage,
+  IconOnStage,
+  IconOffStage,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { useI18n } from '../../locales';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+// import { MESSAGE_DURATION } from '@/constants/message';
+import { UserInfo, UserAction, ActionType, RequestType, SeatStatus } from '../../types';
+import useRoomEngine from '../useRoomEngine';
+import useUserState from '../../states/UserState/index';
+import { useRoomState } from '../../states/RoomState';
+
+const { currentRoom } = useRoomState();
+
+const { t } = useI18n();
+
+const roomEngine = useRoomEngine();
+
+export function useInviteUserOnSeat(
+  userInfo: UserInfo
+): ActionType<UserAction> {
+  const { userListOnSeat, getDisplayName, cancelInvitationByAdmin, sendInvitationByAdmin } = useUserState();
+
+  async function toggleInviteUserOnSeat() {
+    if (userInfo.seatStatus === SeatStatus.OffInvitationPending) {
+      await cancelInvitationByAdmin({
+        userId: userInfo.userId,
+        type: RequestType.Seat,
+      });
+    } else {
+      if (userListOnSeat.value.length === currentRoom.value?.maxSeatCount) {
+        TUIToast({
+          type: TOAST_TYPE.WARNING,
+          message: `${t('The stage is full')}`,
+          // duration: MESSAGE_DURATION.NORMAL,
+        });
+        return;
+      }
+      await sendInvitationByAdmin({
+        userId: userInfo.userId,
+        type: RequestType.Seat,
+        timeout: 60,
+        requestCallback: (callbackInfo: {
+          requestCallbackType: TUIRequestCallbackType;
+          userId: string;
+          code: TUIErrorCode;
+        }) => {
+          const { requestCallbackType, code } = callbackInfo;
+          switch (requestCallbackType) {
+            case TUIRequestCallbackType.kRequestAccepted:
+              TUIToast({
+                type: TOAST_TYPE.SUCCESS,
+                message: `${getDisplayName(userInfo)} ${t('accepted the invitation to the stage')}`,
+                // duration: MESSAGE_DURATION.NORMAL,
+              });
+              break;
+            case TUIRequestCallbackType.kRequestRejected:
+              TUIToast({
+                type: TOAST_TYPE.WARNING,
+                message: `${getDisplayName(userInfo)} ${t('declined the invitation to the stage')}`,
+                // duration: MESSAGE_DURATION.NORMAL,
+              });
+              break;
+            case TUIRequestCallbackType.kRequestTimeout:
+              TUIToast({
+                type: TOAST_TYPE.WARNING,
+                message: t(
+                  'The invitation to sb to go on stage has timed out',
+                  {
+                    name: getDisplayName(userInfo),
+                  }
+                ),
+                // duration: MESSAGE_DURATION.NORMAL,
+              });
+              break;
+            case TUIRequestCallbackType.kRequestError:
+              if (code === TUIErrorCode.ERR_REQUEST_ID_REPEAT) {
+                TUIToast({
+                  type: TOAST_TYPE.WARNING,
+                  message: t(
+                    'This member has already received the same request, please try again later'
+                  ),
+                  // duration: MESSAGE_DURATION.NORMAL,
+                });
+              }
+              break;
+            default:
+              break;
+          }
+        },
+      });
+    }
+  }
+
+  const inviteUserOnSeat = reactive({
+    key: UserAction.InviteOnSeatAction,
+    icon: computed(() =>
+      userInfo.seatStatus === SeatStatus.OffInvitationPending
+        ? IconDenyOnStage
+        : IconInviteOnStage
+    ),
+    label: computed(() =>
+      userInfo.seatStatus === SeatStatus.OffInvitationPending
+        ? t('Cancel stage')
+        : t('Invite stage')
+    ),
+    handler: toggleInviteUserOnSeat,
+  });
+  return inviteUserOnSeat;
+}
+
+export function useAgreeUserOnSeat(userInfo: UserInfo): ActionType<UserAction> {
+  const { acceptApplicationByAdmin } = useUserState();
+
+  const agreeUserOnSeat = reactive({
+    key: UserAction.AgreeOnSeatAction,
+    icon: IconOnStage,
+    label: t('Agree to the stage'),
+    handler: async () => {
+      try {
+        await acceptApplicationByAdmin({
+          userId: userInfo.userId,
+          type: RequestType.Seat,
+        });
+      } catch (error: any) {
+        if (error === TUIErrorCode.ERR_ALL_SEAT_OCCUPIED) {
+          TUIToast({
+            type: TOAST_TYPE.WARNING,
+            message: t('The stage is full'),
+          });
+        } else {
+          console.error('Failure to response a user request', error);
+        }
+      }
+    },
+  });
+  return agreeUserOnSeat;
+}
+
+export function useDenyUserOnSeat(userInfo: UserInfo): ActionType<UserAction> {
+  const { rejectApplicationByAdmin } = useUserState();
+  const denyUserOnSeat = reactive({
+    key: UserAction.DenyOnSeatAction,
+    icon: IconDenyOnStage,
+    label: t('Refuse stage'),
+    handler: async () => {
+      try {
+        await rejectApplicationByAdmin({
+          userId: userInfo.userId,
+          type: RequestType.Seat,
+        });
+      } catch (error: any) {
+        console.error('Failure to response a user request', error);
+      }
+    },
+  });
+  return denyUserOnSeat;
+}
+
+export function useKickUserOffSeat(userInfo: UserInfo): ActionType<UserAction> {
+  async function kickUserOffSeatByAdmin(userInfo: UserInfo) {
+    await roomEngine.instance?.kickUserOffSeatByAdmin({
+      seatIndex: -1,
+      userId: userInfo.userId,
+    });
+  }
+
+  const kickUserOffSeat = reactive({
+    key: UserAction.KickOffSeatAction,
+    icon: IconOffStage,
+    label: t('Step down'),
+    handler: () => kickUserOffSeatByAdmin(userInfo),
+  });
+  return kickUserOffSeat;
+}
+
+export default function useSeatAction(userInfo: UserInfo) {
+  return {
+    inviteUserOnSeat: useInviteUserOnSeat(userInfo),
+    agreeUserOnSeat: useAgreeUserOnSeat(userInfo),
+    denyUserOnSeat: useDenyUserOnSeat(userInfo),
+    kickUserOffSeat: useKickUserOffSeat(userInfo),
+  };
+}

package/src/hooks/useUserActions/useTransferOwnerAction.ts

@@ -0,0 +1,79 @@
+import { reactive, markRaw } from 'vue';
+import { TUIRole } from '@tencentcloud/tuiroom-engine-js';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+// import { MESSAGE_DURATION } from '@/core/constants/message';
+import useRoomEngine from '../useRoomEngine';
+import { useI18n } from '../../locales';
+import { IconTransferOwner } from '@tencentcloud/uikit-base-component-vue3';
+import TUIMessageBox from '../../baseComp/MessageBox';
+// import eventBus from '@/core/hooks/useMitt';
+import { UserInfo, UserAction, DeviceStatus } from '../../types';
+import { useRoomState } from '../../states/RoomState';
+import useUserState from '../../states/UserState/index';
+
+const roomEngine = useRoomEngine();
+const { t } = useI18n();
+const { localUser,getDisplayName } = useUserState();
+const { currentRoom } = useRoomState();
+export default function useTransferOwnerAction(userInfo: UserInfo) {
+  function transferOwnerFunc() {
+    TUIMessageBox({
+      title: t('Transfer the roomOwner to sb', {
+        name: getDisplayName(userInfo),
+      }),
+      message: t(
+        'After transfer the room owner, you will become a general user'
+      ),
+      confirmButtonText: t('Confirm transfer'),
+      cancelButtonText: t('Cancel'),
+      callback: async action => {
+        if (action === 'confirm') {
+          handleTransferOwner();
+        }
+      },
+    });
+  }
+
+  /**
+   * Transfer host to user
+   */
+  async function handleTransferOwner() {
+    const roomInfo = await roomEngine.instance?.fetchRoomInfo();
+    if (roomInfo?.roomOwner === localUser.value?.userId) {
+      try {
+        // todo: 测试这里的开着屏幕分享转交房主，是否停止屏幕分享
+        if (
+          localUser.value?.screenStatus === DeviceStatus.On &&
+          currentRoom.value?.isScreenShareDisableForAllUser
+        ) {
+          // eventBus.emit('ScreenShare:stopScreenShare');
+        }
+        await roomEngine.instance?.changeUserRole({
+          userId: userInfo.userId,
+          userRole: TUIRole.kRoomOwner,
+        });
+        TUIToast({
+          type: TOAST_TYPE.SUCCESS,
+          message: t('The room owner has been transferred to sb', {
+            name: getDisplayName(userInfo),
+          }),
+          // duration: MESSAGE_DURATION.NORMAL,
+        });
+      } catch (error) {
+        TUIToast({
+          type: TOAST_TYPE.ERROR,
+          message: t('Make host failed, please try again.'),
+          // duration: MESSAGE_DURATION.NORMAL,
+        });
+      }
+    }
+  }
+
+  const transferOwner = reactive({
+    key: UserAction.TransferOwnerAction,
+    icon: markRaw(IconTransferOwner),
+    label: t('Make host'),
+    handler: transferOwnerFunc,
+  });
+  return transferOwner;
+}

package/src/hooks/useUserActions/useVideoAction.ts

@@ -0,0 +1,53 @@
+import { computed, reactive, markRaw } from 'vue';
+import {
+  TUIMediaDevice,
+} from '@tencentcloud/tuiroom-engine-js';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+// import { MESSAGE_DURATION } from '../../../../constants/message';
+import useRoomEngine from '../useRoomEngine';
+import { useI18n } from '../../locales';
+import { IconVideoOpen } from '@tencentcloud/uikit-base-component-vue3';
+import { UserInfo, UserAction, DeviceStatus, RequestType } from '../../types';
+import useUserState from '../../states/UserState/index';
+
+const { sendDeviceRequest, getDisplayName } = useUserState();
+export default function useVideoAction(userInfo: UserInfo) {
+  const roomEngine = useRoomEngine();
+  const { t } = useI18n();
+  async function muteUserVideo() {
+    if (userInfo.cameraStatus === DeviceStatus.On) {
+      await roomEngine.instance?.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kCamera,
+      });
+    } else {
+      if (userInfo.cameraStatus === DeviceStatus.OffInvitationPending) {
+        TUIToast({
+          type: TOAST_TYPE.INFO,
+          message: `${t('An invitation to open the camera has been sent to sb.', { name: getDisplayName({ userId: userInfo.userId }) })}`,
+          // duration: MESSAGE_DURATION.NORMAL,
+        });
+        return;
+      }
+      sendDeviceRequest({
+        userId: userInfo.userId,
+        type: RequestType.Camera,
+        timeout: 0,
+      });
+      TUIToast({
+        type: TOAST_TYPE.INFO,
+        message: `${t('An invitation to open the camera has been sent to sb.', { name: getDisplayName({ userId: userInfo.userId }) })}`,
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+    }
+  }
+  const videoControl = reactive({
+    key: UserAction.VideoAction,
+    icon: markRaw(IconVideoOpen),
+    label: computed(() =>
+      userInfo.cameraStatus === DeviceStatus.On ? t('Disable video') : t('Enable video')
+    ),
+    handler: muteUserVideo,
+  });
+  return videoControl;
+}

package/src/hooks/useZIndex.ts

@@ -0,0 +1,18 @@
+import { computed, ref } from 'vue';
+
+const zIndex = ref(0);
+const defaultInitialZIndex = 3000;
+
+export default function () {
+  const currentZIndex = computed(() => defaultInitialZIndex + zIndex.value);
+
+  const nextZIndex = () => {
+    zIndex.value = zIndex.value + 1;
+    return currentZIndex.value;
+  };
+
+  return {
+    currentZIndex: currentZIndex.value,
+    nextZIndex,
+  };
+}

package/src/i18n/index.ts

@@ -0,0 +1,5 @@
+import { i18next } from '@tencentcloud/uikit-base-component-vue3';
+
+export const addI18n = (lng: string, resource: any, deep = true, overwrite = false) => {
+  i18next.addResourceBundle(lng, 'translation', resource.translation, deep, overwrite);
+};

package/src/index.ts

@@ -0,0 +1,74 @@
+import { ConversationList } from './components/ConversationList';
+import { MessageList } from './components/MessageList';
+import { MessageInput, EmojiPicker } from './components/MessageInput';
+import { BarrageInput } from './components/BarrageInput';
+import { LiveStreamView } from './components/LiveStreamView';
+import { LiveMonitorView } from './components/LiveMonitorView';
+import { StreamMixer } from './components/StreamMixer';
+import { LiveScenePanel } from './components/LiveScenePanel';
+import { useMessageActions } from './hooks/useMessageActions';
+import { useMessageListState } from './states/MessageListState';
+import { useMessageActionState } from './states/MessageActionState';
+import { useMessageInputState } from './states/MessageInputState';
+import { useConversationListState } from './states/ConversationListState';
+import { useLiveState } from './states/LiveState';
+import { useRoomState } from './states/RoomState';
+import { useUserState } from './states/UserState';
+import { useDeviceState } from './states/DeviceState';
+import { useVideoMixerState } from './states/VideoMixerState';
+import { useLoginState } from './states/LoginState';
+import { useLiveSeatState } from './states/LiveSeatState';
+import { BarrageList } from './components/BarrageList';
+import { LiveAudienceList } from './components/LiveAudienceList';
+import { CoGuestPanel } from './components/CoGuestPanel';
+import { AudioSettingPanel } from './components/AudioSettingPanel';
+import { VideoSettingPanel } from './components/VideoSettingPanel';
+import { MicButton } from './components/MicButton';
+import { CameraButton } from './components/CameraButton';
+import { useCoGuestState } from './states/CoGuestState';
+import { useCoHostState } from './states/CoHostState';
+import { useLiveAudienceState } from './states/LiveAudienceState';
+import { useLiveMonitorState } from './states/LiveMonitorState';
+import { LiveList } from './components/LiveList';
+import { addI18n } from './i18n';
+import { Avatar } from './components/Avatar';
+
+export {
+  ConversationList,
+  MessageList,
+  BarrageList,
+  MessageInput,
+  BarrageInput,
+  EmojiPicker,
+  LiveStreamView,
+  LiveMonitorView,
+  StreamMixer,
+  LiveScenePanel,
+  LiveAudienceList,
+  CoGuestPanel,
+  AudioSettingPanel,
+  VideoSettingPanel,
+  MicButton,
+  CameraButton,
+  LiveList,
+  Avatar,
+  useMessageActions,
+  useMessageListState,
+  useMessageInputState,
+  useMessageActionState,
+  useConversationListState,
+  useLiveState,
+  useRoomState,
+  useUserState,
+  useDeviceState,
+  useVideoMixerState,
+  useLoginState,
+  useLiveSeatState,
+  useCoGuestState,
+  useCoHostState,
+  useLiveAudienceState,
+  useLiveMonitorState,
+  addI18n,
+};
+
+export * from './types';