tuikit-atomicx-vue3 0.1.0

package/src/hooks/useScroll.ts

@@ -0,0 +1,202 @@
+/**
+ * Scroll related hook
+ * Provides functions to scroll to bottom and scroll to specific messages
+ */
+
+/**
+ * Scroll options interface
+ * @interface ScrollOptions
+ * @property {('auto' | 'smooth' | 'instant')} [behavior] - Scroll behavior, auto for immediate scroll, smooth for smooth scroll, instant as alias for immediate scroll
+ * @property {('start' | 'center' | 'end' | 'nearest')} [block] - Scroll alignment
+ */
+interface ScrollOptions {
+  behavior?: 'auto' | 'smooth' | 'instant';
+  block?: 'start' | 'center' | 'end' | 'nearest';
+}
+
+/**
+ * Options for scrolling to specific message, extends ScrollOptions
+ * @interface ScrollToMessageOptions
+ * @extends ScrollOptions
+ * @property {boolean} [skipIfVisible] - Skip scrolling if message is already visible in viewport
+ */
+interface ScrollToMessageOptions extends ScrollOptions {
+  skipIfVisible?: boolean; // Skip scrolling if message is already visible in viewport
+}
+
+/**
+ * Check if element is visible in viewport
+ * @param {Element} element - Target element
+ * @param {Element} container - Scroll container
+ * @returns {boolean} - Whether element is visible
+ */
+const isElementVisible = (element: Element, container: Element): boolean => {
+  const elementRect = element.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+
+  // Element top is within container visible area
+  const topVisible = elementRect.top >= containerRect.top && elementRect.top <= containerRect.bottom;
+
+  // Element bottom is within container visible area
+  const bottomVisible = elementRect.bottom >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+
+  // Element completely contains container visible area
+  const elementContainsContainer = elementRect.top <= containerRect.top && elementRect.bottom >= containerRect.bottom;
+
+  return topVisible || bottomVisible || elementContainsContainer;
+};
+
+/**
+ * Scroll related hook
+ * @returns {Object} Scroll related methods
+ * @property {Function} scrollToBottom - Method to scroll to bottom
+ * @property {Function} scrollToMessage - Method to scroll to specific message
+ */
+export const useScroll = () => {
+  /**
+   * Scroll to bottom
+   * @param {ScrollOptions} [options={}] - Scroll options
+   * @returns {Promise<void>} Promise that resolves when scrolling is complete
+   */
+  const scrollToBottom = (options: ScrollOptions = {}): Promise<void> => new Promise((resolve) => {
+    const scrollableContainer = document.querySelector('#messageScrollList');
+
+    if (!scrollableContainer) {
+      resolve();
+      return;
+    }
+
+    const defaultOptions: ScrollOptions = {
+      behavior: 'instant',
+      block: 'end',
+    };
+
+    const mergedOptions = { ...defaultOptions, ...options };
+
+    // Handle instant scroll effect (immediate scroll without animation)
+    const behavior = mergedOptions.behavior === 'instant' ? 'auto' : mergedOptions.behavior || 'auto';
+
+    requestAnimationFrame(() => {
+      scrollableContainer.scrollTo({
+        top: scrollableContainer.scrollHeight,
+        behavior,
+      });
+
+      // Monitor scroll end
+      if (behavior === 'smooth') {
+        const onScrollEnd = () => {
+          scrollableContainer.removeEventListener('scrollend', onScrollEnd);
+
+          // Double check scroll position to ensure scrolled to bottom
+          setTimeout(() => {
+            scrollableContainer.scrollTo({
+              top: scrollableContainer.scrollHeight,
+              behavior: 'auto',
+            });
+            resolve();
+          }, 100);
+        };
+
+        // If browser supports scrollend event
+        if ('onscrollend' in window) {
+          scrollableContainer.addEventListener('scrollend', onScrollEnd);
+        } else {
+          // Compatibility for browsers that don't support scrollend event
+          setTimeout(() => {
+            scrollableContainer.scrollTo({
+              top: scrollableContainer.scrollHeight,
+              behavior: 'auto',
+            });
+            resolve();
+          }, 500);
+        }
+      } else {
+        // Immediate scroll doesn't need to wait
+        resolve();
+      }
+    });
+  });
+
+  /**
+   * Scroll to specific message
+   * @param {string} messageID - Message ID
+   * @param {ScrollToMessageOptions} [options={}] - Scroll options
+   * @returns {Promise<void>} Promise that resolves when scrolling is complete
+   */
+  const scrollToMessage = (messageID: string, options: ScrollToMessageOptions = {}): Promise<void> => new Promise((resolve, reject) => {
+    const targetMessageDom = document.querySelector(`[data-message-id="${messageID}"]`);
+    const scrollableContainer = document.querySelector('#messageScrollList');
+
+    if (!targetMessageDom || !scrollableContainer) {
+      reject(new Error('Target message or scrollable container not found'));
+      return;
+    }
+
+    // Check if scrolling should be skipped
+    if (options.skipIfVisible && isElementVisible(targetMessageDom, scrollableContainer as Element)) {
+      resolve();
+      return;
+    }
+
+    const defaultOptions: ScrollToMessageOptions = {
+      behavior: 'smooth',
+      block: 'center',
+    };
+
+    const mergedOptions = { ...defaultOptions, ...options };
+
+    // Handle instant scroll effect (immediate scroll without animation)
+    const behavior = mergedOptions.behavior === 'instant' ? 'auto' : mergedOptions.behavior;
+
+    // Calculate target element position relative to scroll container
+    const targetTop = (targetMessageDom as HTMLElement).offsetTop;
+
+    // Calculate final scroll position based on block option
+    let scrollTop = targetTop;
+
+    if (mergedOptions.block === 'center') {
+      // Center display: target element top position - (container height - target element height) / 2
+      scrollTop = targetTop - ((scrollableContainer as HTMLElement).clientHeight - (targetMessageDom as HTMLElement).clientHeight) / 2;
+    } else if (mergedOptions.block === 'end') {
+      // Bottom alignment: target element bottom aligns with container bottom
+      scrollTop = targetTop + (targetMessageDom as HTMLElement).clientHeight - (scrollableContainer as HTMLElement).clientHeight;
+    }
+
+    // Ensure scroll position is within valid range
+    scrollTop = Math.max(0, Math.min(scrollTop, (scrollableContainer as HTMLElement).scrollHeight - (scrollableContainer as HTMLElement).clientHeight));
+
+    requestAnimationFrame(() => {
+      // Use scrollTo instead of scrollIntoView
+      scrollableContainer.scrollTo({
+        top: scrollTop,
+        behavior,
+      });
+
+      // Monitor scroll end
+      if (behavior === 'smooth') {
+        const onScrollEnd = () => {
+          scrollableContainer.removeEventListener('scrollend', onScrollEnd);
+          resolve();
+        };
+
+        // If browser supports scrollend event
+        if ('onscrollend' in window) {
+          scrollableContainer.addEventListener('scrollend', onScrollEnd);
+        } else {
+          // Compatibility for browsers that don't support scrollend event
+          setTimeout(() => {
+            resolve();
+          }, 500);
+        }
+      } else {
+        // Immediate scroll doesn't need to wait
+        resolve();
+      }
+    });
+  });
+
+  return {
+    scrollToBottom,
+    scrollToMessage,
+  };
+};

package/src/hooks/useUserActions/index.ts

@@ -0,0 +1,166 @@
+import { computed, watch } from 'vue';
+import { TUIRole } from '@tencentcloud/tuiroom-engine-js';
+import useAudioAction from './useAudioAction';
+import useChatAction from './useChatAction';
+import useVideoAction from './useVideoAction';
+import useTransferOwnerAction from './useTransferOwnerAction';
+import useChangeNameCardAction from './useChangeNameCardAction/index';
+import useKickUserAction from './useKickUserAction';
+import useSeatAction from './useSeatAction';
+import useAdminAction from './useAdminAction';
+import { UserInfo, SeatStatus, UserAction, ActionType, UserRoomStatus } from '../../types';
+import { useRoomState } from '../../states/RoomState';
+import useUserState from '../../states/UserState/index';
+interface ObjectType {
+  [key: string]: any;
+}
+
+const { currentRoom } = useRoomState();
+const { localUser } = useUserState();
+
+export function useUserActions(option: {
+  userInfo: UserInfo;
+  actionList?: UserAction[];
+}) {
+  const { userInfo, actionList } = option;
+  const isTargetUserMySelf = computed(
+    () => localUser.value?.userId === userInfo.userId
+  );
+  const isTargetUserRoomOwner = computed(
+    () => userInfo.userRole === TUIRole.kRoomOwner
+  );
+  const isTargetUserGeneral = computed(
+    () => userInfo.userRole === TUIRole.kGeneralUser
+  );
+  const isTargetUserAnchor = computed(() => userInfo?.seatStatus === SeatStatus.On);
+  const isTargetUserAudience = computed(() => userInfo?.seatStatus !== SeatStatus.On);
+  const isCanOperateCurrentUser = computed(
+    () =>
+      (localUser.value?.userRole === TUIRole.kRoomOwner && !isTargetUserRoomOwner.value) ||
+      (localUser.value?.userRole === TUIRole.kAdministrator && isTargetUserGeneral.value) ||
+      isTargetUserMySelf.value
+  );
+
+  const audioAction = useAudioAction(userInfo);
+  const videoAction = useVideoAction(userInfo);
+  const chatAction = useChatAction(userInfo);
+  const transferOwnerAction = useTransferOwnerAction(userInfo);
+  const adminAction = useAdminAction(userInfo);
+  const nameCardAction = useChangeNameCardAction(userInfo);
+  const kickUserAction = useKickUserAction(userInfo);
+  const { inviteUserOnSeat, agreeUserOnSeat, denyUserOnSeat, kickUserOffSeat } =
+    useSeatAction(userInfo);
+
+  const isUserApplyingToAnchor = computed(() => {
+    return userInfo.seatStatus === SeatStatus.OffApplicationPending
+  });
+  const agreeOrDenyStageList = computed(() => isUserApplyingToAnchor.value
+    ? [agreeUserOnSeat, denyUserOnSeat]
+    : []);
+  const inviteStageList = computed(() =>
+    isTargetUserAudience.value && !isUserApplyingToAnchor.value
+      ? [inviteUserOnSeat]
+      : []);
+  const onStageControlList = computed(() =>
+    isTargetUserAnchor.value
+      ? [audioAction, videoAction, kickUserOffSeat]
+      : []
+  );
+
+  watch(() => JSON.stringify(userInfo), (newVal) => {
+    console.error('lixin-debug aaa isTargetUserAnchor', newVal);
+  });
+
+  const controlListObj = computed(() => {
+    // 显式依赖这些数组的内容，确保内容变化时会触发重新计算
+
+    if (currentRoom.value?.isSeatEnabled) {
+      return {
+        [TUIRole.kRoomOwner]: [
+          ...inviteStageList.value,
+          ...onStageControlList.value,
+          ...agreeOrDenyStageList.value,
+          adminAction,
+          transferOwnerAction,
+          chatAction,
+          kickUserAction,
+          nameCardAction,
+        ],
+        [TUIRole.kAdministrator]: [
+          ...inviteStageList.value,
+          ...onStageControlList.value,
+          ...agreeOrDenyStageList.value,
+          chatAction,
+          nameCardAction,
+        ],
+      }
+    } else {
+      return {
+        [TUIRole.kRoomOwner]: [
+          audioAction,
+          videoAction,
+          chatAction,
+          adminAction,
+          transferOwnerAction,
+          kickUserAction,
+          nameCardAction,
+        ],
+        [TUIRole.kAdministrator]: [
+          audioAction,
+          videoAction,
+          chatAction,
+          nameCardAction,
+        ],
+      }
+    }
+  });
+
+  const controlList = computed(() => {
+    if (!userInfo || userInfo.userRoomStatus === UserRoomStatus.NotInRoom) {
+      return [];
+    }
+    if (!isCanOperateCurrentUser.value) {
+      return [];
+    }
+    if (isTargetUserMySelf.value) {
+      return [nameCardAction];
+    }
+    // if (userInfo.userId === '991982884') {
+    //   debugger;
+    // }
+    return controlListObj.value[
+      localUser.value?.userRole as keyof typeof controlListObj.value
+    ] || [];
+  });
+
+  // if (actionList && actionList.length > 0) {
+  //   return actionList?.reduce((result: ActionType<UserAction>[], action) => {
+  //     const actionItem = controlList.value.find(
+  //       (item: ActionType<UserAction>) => item.key === action
+  //     );
+  //     if (actionItem) {
+  //       result.push(actionItem);
+  //     }
+  //     return result;
+  //   }, []);
+  // }
+
+  // 监听可能导致 controlList 变化的数组
+  watch(
+    [inviteStageList, onStageControlList, agreeOrDenyStageList],
+    () => {
+      // 这个空函数会强制 Vue 在这些数组变化时重新评估依赖它们的计算属性
+    },
+    { deep: true }
+  );
+
+  return {
+    userActions: controlList,
+    isTargetUserAnchor,
+    isTargetUserAudience,
+    isUserApplyingToAnchor,
+    agreeOrDenyStageList,
+    inviteStageList,
+    onStageControlList,
+  }
+}

package/src/hooks/useUserActions/useAdminAction.ts

@@ -0,0 +1,53 @@
+import { reactive, computed } from 'vue';
+import { TUIMediaDevice, TUIRole } from '@tencentcloud/tuiroom-engine-js';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import useRoomEngine from '../useRoomEngine';
+import { useI18n } from '../../locales';
+import { IconSetAdmin, IconRevokeAdmin } from '@tencentcloud/uikit-base-component-vue3';
+import { UserInfo, UserAction, ActionType, DeviceStatus } from '../../types';
+import useUserState from '../../states/UserState/index';
+
+const roomEngine = useRoomEngine();
+const { t } = useI18n();
+const { getDisplayName } = useUserState();
+export default function useAdminAction(
+  userInfo: UserInfo
+): ActionType<UserAction> {
+  async function handleSetOrRevokeAdmin() {
+    const newRole =
+      userInfo.userRole === TUIRole.kGeneralUser
+        ? TUIRole.kAdministrator
+        : TUIRole.kGeneralUser;
+    await roomEngine.instance?.changeUserRole({
+      userId: userInfo.userId,
+      userRole: newRole,
+    });
+    const tipMessage =
+      newRole === TUIRole.kAdministrator
+        ? `${t('sb has been set as administrator', { name: getDisplayName(userInfo) })}`
+        : `${t('The administrator status of sb has been withdrawn', { name: getDisplayName(userInfo) })}`;
+    TUIToast({ type: TOAST_TYPE.SUCCESS, message: tipMessage });
+    if (newRole === TUIRole.kGeneralUser && userInfo.screenStatus === DeviceStatus.On) {
+      await roomEngine.instance?.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kScreen,
+      });
+    }
+  }
+  // todo: 确认为什么要用 reactive，原因是 computed 在外面修改 label 的时候失去响应式
+  const setOrRevokeAdmin = reactive({
+    key: UserAction.AdministratorAction,
+    icon: computed(() =>
+      userInfo.userRole === TUIRole.kAdministrator
+        ? IconRevokeAdmin
+        : IconSetAdmin
+    ),
+    label: computed(() =>
+      userInfo.userRole === TUIRole.kAdministrator
+        ? t('Remove administrator')
+        : t('Set as administrator')
+    ),
+    handler: handleSetOrRevokeAdmin,
+  });
+  return setOrRevokeAdmin;
+}

package/src/hooks/useUserActions/useAudioAction.ts

@@ -0,0 +1,64 @@
+import { computed, reactive, Ref, ref } from 'vue';
+import {
+  TUIMediaDevice,
+} from '@tencentcloud/tuiroom-engine-js';
+// import { MESSAGE_DURATION } from '../../../../constants/message';
+import { useRoomEngine } from '../useRoomEngine';
+import { useI18n } from '../../locales';
+import { UserInfo, UserAction, ActionType, DeviceStatus, RequestType } from '../../types';
+import {
+  IconAudioOpen,
+  IconAudioClose,
+  TUIToast,
+  TOAST_TYPE,
+} from '@tencentcloud/uikit-base-component-vue3';
+import useUserState from '../../states/UserState/index';
+
+export default function useAudioControl(
+  userInfo: UserInfo
+): ActionType<UserAction> {
+  const roomEngine = useRoomEngine();
+  const { t } = useI18n();
+  const { sendInvitationByAdmin } = useUserState();
+
+  async function muteUserAudio() {
+    if (userInfo.microphoneStatus === DeviceStatus.On) {
+      await roomEngine.instance?.closeRemoteDeviceByAdmin({
+        userId: userInfo.userId,
+        device: TUIMediaDevice.kMicrophone,
+      });
+    } else {
+      if (userInfo.microphoneStatus === DeviceStatus.OffInvitationPending) {
+        TUIToast({
+          type: TOAST_TYPE.INFO,
+          message: `${t('An invitation to open the camera has been sent to sb.', { name: userInfo.displayName })}`,
+          // duration: MESSAGE_DURATION.NORMAL,
+        });
+        return;
+      }
+      await sendInvitationByAdmin({
+        userId: userInfo.userId,
+        type: RequestType.Microphone,
+        timeout: 0,
+      });
+      TUIToast({
+        type: TOAST_TYPE.INFO,
+        message: `${t('An invitation to open the camera has been sent to sb.', { name: userInfo.displayName })}`,
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+    }
+  }
+
+  const audioControl = reactive({
+    microphoneStatus: userInfo.microphoneStatus,
+    key: UserAction.AudioAction,
+    icon: computed(() =>
+      userInfo.microphoneStatus === DeviceStatus.On ? IconAudioOpen : IconAudioClose
+    ),
+    label: computed(() =>
+      userInfo.microphoneStatus === DeviceStatus.On ? t('Mute') : t('Unmute')
+    ),
+    handler: muteUserAudio,
+  });
+  return audioControl;
+}

package/src/hooks/useUserActions/useChangeNameCardAction/changeNameCardDialog.vue

@@ -0,0 +1,76 @@
+<template>
+  <tui-dialog
+    v-model="isShowDialog"
+    :title="t('change name')"
+    :modal="true"
+    width="480px"
+    :before-close="handleCancel"
+    :close-on-click-modal="true"
+    :append-to-room-container="true"
+  >
+    <div class="dialog-content">
+      <tui-input
+        :model-value="inputUserName"
+        @input="inputUserName = $event"
+        class="dialog-input"
+        :placeholder="t('Please input user name')"
+      />
+    </div>
+    <template #footer>
+      <TUIButton
+        type="primary"
+        style="min-width: 88px"
+        @click="handleConfirm"
+        :disabled="isConfirmButtonDisable"
+      >
+        {{ t('Confirm') }}
+      </TUIButton>
+      <TUIButton style="min-width: 88px" @click="handleCancel">
+        {{ t('Cancel') }}
+      </TUIButton>
+    </template>
+  </tui-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, computed } from 'vue';
+import TuiDialog from '../../../baseComp/Dialog';
+import TuiInput from '../../../baseComp/Input';
+import { TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useI18n } from '../../../locales';
+import { UserInfo } from '../../../types';
+
+interface Props {
+  userInfo: UserInfo;
+  confirmFunction: (name: string) => void;
+}
+
+const props = defineProps<Props>();
+const { t } = useI18n();
+
+const inputUserName = ref(props.userInfo.nameCard);
+const isShowDialog = ref(true);
+const isConfirmButtonDisable = computed(() => !inputUserName.value.trim());
+
+async function handleConfirm() {
+  await props.confirmFunction(inputUserName.value);
+  isShowDialog.value = false;
+}
+
+function handleCancel() {
+  inputUserName.value =
+    props.userInfo.nameCard || props.userInfo.userName || '';
+  isShowDialog.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-content {
+  display: flex;
+  align-items: center;
+
+  .dialog-input {
+    flex-grow: 1;
+  }
+}
+</style>

package/src/hooks/useUserActions/useChangeNameCardAction/changeNameCardInput.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="input-content-container"
+    ref="editorInputEleContainer"
+    v-tap.stop="handleCloseInput"
+    v-if="isShowInput"
+  >
+    <div class="input-content">
+      <div class="input">
+        <tui-input
+          ref="editorInputEle"
+          :model-value="inputUserName"
+          type="text"
+          enterkeyhint="done"
+          @input="inputUserName = $event"
+          @done="handleConfirm"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, defineProps } from 'vue';
+import TuiInput from '../../../baseComp/Input';
+import { isWeChat } from '../../../utils/environment';
+import { UserInfo } from '../../../types';
+import vTap from '../../../directives/vTap';
+
+interface Props {
+  userInfo: UserInfo;
+  confirmFunction: (name: string) => void;
+}
+
+const props = defineProps<Props>();
+
+const isShowInput: Ref<boolean> = ref(true);
+const inputUserName = ref(props.userInfo.nameCard);
+
+function handleCloseInput(event: any) {
+  if (isWeChat) {
+    isShowInput.value = false;
+  } else if (event.target !== event.currentTarget) {
+    return;
+  } else {
+    isShowInput.value = false;
+  }
+}
+
+async function handleConfirm() {
+  await props.confirmFunction(inputUserName.value);
+  isShowInput.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.input-content-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9998;
+  box-sizing: border-box;
+  width: 100vw;
+  height: auto;
+  background-color: var(--uikit-color-black-3);
+
+  .input-content {
+    position: absolute;
+    bottom: 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 10px;
+    font-family: 'PingFang SC';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 450;
+    line-height: 4vh;
+    color: var(--text-color-secondary);
+    resize: none;
+    background-color: var(--bg-color-topbar);
+    border: none;
+  }
+
+  .input {
+    width: 100%;
+  }
+}
+</style>