tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/src/components/RoomParticipantList/useParticpantAction/useNameCardAction/index.ts

@@ -0,0 +1,80 @@
+import { h, render, markRaw } from 'vue';
+import { TUIToast, TOAST_TYPE, IconEditNameCard, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../../states/RoomParticipantState';
+import ChangeNameCardDialog from './changeNameCardDialog.vue';
+import type { RoomParticipant } from '../../../../types';
+
+export function calculateByteLength(str: string) {
+  let byteLength = 0;
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    if (code <= 0x7f) {
+      byteLength += 1;
+    } else if (code <= 0x7ff) {
+      byteLength += 2;
+    } else if (code <= 0xffff) {
+      byteLength += 3;
+    } else {
+      byteLength += 4;
+    }
+  }
+  return byteLength;
+}
+
+const { t } = useUIKit();
+const { updateParticipantNameCard } = useRoomParticipantState();
+export function useNameCardAction({ targetParticipant }: { targetParticipant: RoomParticipant }) {
+  const nameCardCheck = (inputUserName: string) => {
+    const result = calculateByteLength(inputUserName) <= 32;
+    if (!result) {
+      TUIToast({
+        type: TOAST_TYPE.WARNING,
+        message: t('ParticipantList.NameMaxLength'),
+      });
+    }
+    return result;
+  };
+
+  async function handleChangeUserNameCard(inputUserName: string) {
+    if (!nameCardCheck(inputUserName)) {
+      return Promise.reject(new Error('The user name cannot exceed 32 characters'));
+    }
+    try {
+      await updateParticipantNameCard({
+        userId: targetParticipant.userId,
+        nameCard: inputUserName,
+      });
+      TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: t('ParticipantList.NameChangeSuccess'),
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+    } catch (error) {
+      TUIToast({
+        type: TOAST_TYPE.ERROR,
+        message: t('ParticipantList.ChangeNameFailed'),
+        duration: 5000,
+      });
+    }
+    return Promise.resolve();
+  }
+
+  function renderChangeNameCardDialog() {
+    const Component = ChangeNameCardDialog;
+    const vNode = h(Component, {
+      userInfo: targetParticipant,
+      confirmFunction: handleChangeUserNameCard,
+    });
+    const div = document.createElement('div');
+    render(vNode, div);
+    // TODO: 处理 appendId 的设置问题
+    document.getElementById('roomPage')?.appendChild(div);
+  }
+
+  return {
+    key: 'changeUserNameCard',
+    icon: markRaw(IconEditNameCard),
+    label: t('ParticipantList.ChangeName'),
+    handler: renderChangeNameCardDialog,
+  };
+}

package/src/components/RoomParticipantList/useParticpantAction/useTransferOwnerAction.ts

@@ -0,0 +1,77 @@
+import type { Component } from 'vue';
+import { reactive, markRaw, computed } from 'vue';
+import { TUIToast, TOAST_TYPE, IconTransferOwner, TUIMessageBox, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../../states/DeviceState';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { useRoomState } from '../../../states/RoomState';
+import { DeviceStatus, RoomParticipantRole } from '../../../types';
+import type { RoomParticipant } from '../../../types';
+
+const { currentRoom } = useRoomState();
+const { t } = useUIKit();
+const { localParticipant, transferOwner } = useRoomParticipantState();
+const { stopScreenShare } = useDeviceState();
+export function useTransferOwnerAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  const displayName = computed(() => targetParticipant.nameCard || targetParticipant.userName || targetParticipant.userId);
+
+  function transferOwnerFunc() {
+    TUIMessageBox.confirm({
+      title: t('ParticipantList.TransferHostTo', {
+        name: displayName.value,
+      }),
+      content: t(
+        'ParticipantList.TransferHostWarning',
+      ),
+      confirmText: t('ParticipantList.ConfirmTransfer'),
+      cancelText: t('ParticipantList.Cancel'),
+      callback: async (action) => {
+        if (action === 'confirm') {
+          handleTransferOwner();
+        }
+      },
+    });
+  }
+
+  async function handleTransferOwner() {
+    if (localParticipant.value?.role === RoomParticipantRole.Owner) {
+      try {
+        // todo: 测试这里的开着屏幕分享转交房主，是否停止屏幕分享
+        if (
+          localParticipant.value?.screenShareStatus === DeviceStatus.On
+          && currentRoom.value?.isAllScreenShareDisabled
+        ) {
+          stopScreenShare();
+        }
+        await transferOwner({
+          userId: targetParticipant.userId,
+        });
+        TUIToast({
+          type: TOAST_TYPE.SUCCESS,
+          message: t('ParticipantList.TransferHostSuccess', {
+            name: displayName.value,
+          }),
+        });
+      } catch (error: any) {
+        TUIToast({
+          type: TOAST_TYPE.ERROR,
+          message: t('ParticipantList.TransferHostFailed'),
+        });
+      }
+    }
+  }
+
+  const transferOwnerAction = reactive({
+    key: 'transferOwner',
+    icon: markRaw(IconTransferOwner),
+    label: t('ParticipantList.TransferHost'),
+    handler: transferOwnerFunc,
+  });
+  return transferOwnerAction;
+}

package/src/components/RoomParticipantList/useParticpantAction/useVideoAction.ts

@@ -0,0 +1,59 @@
+import type { Component } from 'vue';
+import { computed } from 'vue';
+import { TUIToast, TOAST_TYPE, IconVideoOpen, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { DeviceType } from '../../../types';
+import type { RoomParticipant } from '../../../types';
+
+export function useMuteVideoAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  const { closeParticipantDevice } = useRoomParticipantState();
+  const { t } = useUIKit();
+  return {
+    key: 'muteVideo',
+    icon: IconVideoOpen,
+    label: t('ParticipantList.DisableVideo'),
+    handler: async () => {
+      await closeParticipantDevice({
+        userId: targetParticipant.userId,
+        deviceType: DeviceType.Camera,
+      });
+    },
+  };
+}
+
+export function useUnmuteVideoAction(
+  { targetParticipant }: { targetParticipant: RoomParticipant },
+): {
+    key: string;
+    icon: Component;
+    label: string;
+    handler: () => void;
+  } {
+  const { inviteToOpenDevice } = useRoomParticipantState();
+  const displayName = computed(() => targetParticipant.nameCard || targetParticipant.userName || targetParticipant.userId);
+  const { t } = useUIKit();
+
+  return {
+    key: 'unmuteVideo',
+    icon: IconVideoOpen,
+    label: t('ParticipantList.EnableVideo'),
+    handler: async () => {
+      await inviteToOpenDevice({
+        userId: targetParticipant.userId,
+        device: DeviceType.Camera,
+        timeout: 30,
+      });
+      TUIToast({
+        type: TOAST_TYPE.INFO,
+        message: `${t('ParticipantList.InviteCameraSent', { name: displayName.value })}`,
+      });
+    },
+  };
+}

package/src/components/RoomParticipantList/useRoomAction/index.ts

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { RoomParticipantRole } from '../../../types';
+import useRoomAudioAction from './useRoomAudioAction';
+import useRoomScreenAction from './useRoomScreenAction';
+import useRoomVideoAction from './useRoomVideoAction';
+
+const { localParticipant } = useRoomParticipantState();
+
+export default function useRoomActions() {
+  const canOperate = computed(() => localParticipant.value?.role === RoomParticipantRole.Owner || localParticipant.value?.role === RoomParticipantRole.Admin);
+  const roomActionList = computed(() => {
+    if (!canOperate.value) {
+      return [];
+    }
+    return [useRoomAudioAction(), useRoomVideoAction(), useRoomScreenAction()];
+  });
+
+  return {
+    canOperate,
+    roomActionList,
+  };
+}

package/src/components/RoomParticipantList/useRoomAction/useRoomAudioAction.ts

@@ -0,0 +1,67 @@
+import { reactive, computed, defineComponent } from 'vue';
+import { TUIToast, TOAST_TYPE, TUIMessageBox, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { useRoomState } from '../../../states/RoomState';
+import { DeviceType } from '../../../types';
+
+const { currentRoom } = useRoomState();
+
+const { disableAllDevices } = useRoomParticipantState();
+
+export default function useRoomAudioAction(): {
+  key: string;
+  label: string;
+  handler: () => void;
+} {
+  const { t } = useUIKit();
+  let stateForAllAudio = false;
+
+  // TODO: 测试在点击确定期间有其他管理员改变状态的 case
+  function toggleRoomAudio() {
+    stateForAllAudio = !currentRoom.value?.isAllMicrophoneDisabled;
+    TUIMessageBox.confirm({
+      title: currentRoom.value?.isAllMicrophoneDisabled
+        ? t('ParticipantList.UnmuteAll')
+        : t('ParticipantList.MuteAllTip'),
+      content: currentRoom.value?.isAllMicrophoneDisabled
+        ? t('ParticipantList.UnmuteAllDesc')
+        : t('ParticipantList.MicDisabledTip'),
+      confirmText: t('ParticipantList.Confirm'),
+      cancelText: t('ParticipantList.Cancel'),
+      callback: async (action) => {
+        if (action === 'confirm') {
+          doToggleRoomAudio();
+        }
+      },
+    });
+  }
+
+  async function doToggleRoomAudio() {
+    if (currentRoom.value?.isAllMicrophoneDisabled === stateForAllAudio) {
+      const tipMessage = stateForAllAudio
+        ? t('ParticipantList.AudioDisabled')
+        : t('ParticipantList.AudioEnabled');
+      TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: tipMessage,
+      });
+      return;
+    }
+    await disableAllDevices({
+      deviceType: DeviceType.Microphone,
+      disable: stateForAllAudio,
+    });
+  }
+
+  const roomAudioAction = reactive({
+    key: 'RoomAudioAction',
+    icon: defineComponent({}),
+    label: computed(() =>
+      currentRoom.value?.isAllMicrophoneDisabled
+        ? t('ParticipantList.UnmuteAll')
+        : t('ParticipantList.MuteAll'),
+    ),
+    handler: toggleRoomAudio,
+  });
+  return roomAudioAction;
+}

package/src/components/RoomParticipantList/useRoomAction/useRoomScreenAction.ts

@@ -0,0 +1,69 @@
+import type { Component } from 'vue';
+import { computed, reactive } from 'vue';
+import { IconAllMembersShareScreen, IconHostShareScreen, TUIMessageBox, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { useRoomState } from '../../../states/RoomState';
+import { DeviceType, RoomParticipantRole } from '../../../types';
+
+const { participantWithScreen, disableAllDevices, closeParticipantDevice } = useRoomParticipantState();
+const { currentRoom } = useRoomState();
+
+export default function useRoomScreenAction(): {
+  key: string;
+  label: string;
+  icon: Component;
+  handler: () => void;
+} {
+  const { t } = useUIKit();
+  let stateForScreenShare = false;
+  async function toggleAllScreenShare() {
+    await disableAllDevices({
+      deviceType: DeviceType.ScreenShare,
+      disable: stateForScreenShare,
+    });
+  }
+
+  function toggleRoomScreen() {
+    stateForScreenShare = !currentRoom.value?.isAllScreenShareDisabled;
+    if (!participantWithScreen.value || participantWithScreen.value.role === RoomParticipantRole.GeneralUser) {
+      toggleAllScreenShare();
+      return;
+    }
+    TUIMessageBox.confirm({
+      title: t(
+        'ParticipantList.ConfirmHostAdminOnlyShare',
+      ),
+      content: t(
+        'ParticipantList.TerminateOtherShare',
+      ),
+      confirmText: t('ParticipantList.Confirm'),
+      cancelText: t('ParticipantList.Cancel'),
+      callback: async (action) => {
+        if (action === 'confirm') {
+          await closeParticipantDevice({
+            userId: participantWithScreen.value?.userId as string,
+            deviceType: DeviceType.ScreenShare,
+          });
+          toggleAllScreenShare();
+        }
+      },
+    });
+  }
+
+  const roomScreenAction = reactive({
+    key: 'AllScreenShareAction',
+    label: computed(() =>
+      currentRoom.value?.isAllScreenShareDisabled
+        ? t('ParticipantList.AllCanShare')
+        : t('ParticipantList.HostAdminOnlyShare'),
+    ),
+    icon: computed(() =>
+      currentRoom.value?.isAllScreenShareDisabled
+        ? IconAllMembersShareScreen
+        : IconHostShareScreen,
+    ),
+    handler: toggleRoomScreen,
+  });
+
+  return roomScreenAction;
+}

package/src/components/RoomParticipantList/useRoomAction/useRoomVideoAction.ts

@@ -0,0 +1,66 @@
+import { computed, reactive } from 'vue';
+import { TUIToast, TOAST_TYPE, useUIKit, TUIMessageBox } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { useRoomState } from '../../../states/RoomState';
+import { DeviceType } from '../../../types';
+
+const { currentRoom } = useRoomState();
+
+const { disableAllDevices } = useRoomParticipantState();
+
+export default function useRoomVideoAction(): {
+  key: string;
+  label: string;
+  handler: () => void;
+} {
+  const { t } = useUIKit();
+  let stateForAllVideo = false;
+
+  function toggleRoomVideo() {
+    stateForAllVideo = !currentRoom.value?.isAllCameraDisabled;
+    TUIMessageBox.confirm({
+      title: currentRoom.value?.isAllCameraDisabled
+        ? t('ParticipantList.EnableAllVideo')
+        : t('ParticipantList.DisableAllVideoTip'),
+      content: currentRoom.value?.isAllCameraDisabled
+        ? t('ParticipantList.EnableAllVideoDesc')
+        : t('ParticipantList.CameraDisabledTip'),
+      confirmText: t('ParticipantList.Confirm'),
+      cancelText: t('ParticipantList.Cancel'),
+      callback: async (action) => {
+        if (action === 'confirm') {
+          doToggleRoomVideo();
+        }
+      },
+    });
+  }
+
+  async function doToggleRoomVideo() {
+    if (currentRoom.value?.isAllCameraDisabled === stateForAllVideo) {
+      const tipMessage = stateForAllVideo
+        ? t('ParticipantList.VideoDisabled')
+        : t('ParticipantList.VideoEnabled');
+      TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: tipMessage,
+      });
+      return;
+    }
+    await disableAllDevices({
+      deviceType: DeviceType.Camera,
+      disable: stateForAllVideo,
+    });
+  }
+
+  const roomVideoAction = reactive({
+    key: 'AllVideoAction',
+    label: computed(() =>
+      currentRoom.value?.isAllCameraDisabled
+        ? t('ParticipantList.EnableAllVideo')
+        : t('ParticipantList.DisableAllVideo'),
+    ),
+    handler: toggleRoomVideo,
+  });
+
+  return roomVideoAction;
+}

package/src/components/RoomParticipantView/StreamPlay.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    :id="playRegionDomId"
+    ref="playRegionDomRef"
+    class="stream-play-container"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  defineProps,
+  computed,
+  watch,
+  onBeforeUnmount,
+  withDefaults,
+  nextTick,
+  onMounted,
+} from 'vue';
+import { FillMode } from '../../types';
+import { getNanoId } from '../../utils/utils';
+import { useStreamPlayManager } from './StreamPlayManager';
+import type { RoomParticipant, VideoStreamType } from '../../types';
+
+const { bindView, unbindView, setStreamConfig } = useStreamPlayManager();
+
+interface Props {
+  participant: RoomParticipant;
+  streamType: VideoStreamType;
+  fillMode?: FillMode;
+  lazyLoad?: {
+    enable: boolean;
+    viewport?: string | HTMLDivElement;
+  };
+  enableTouchScale?: boolean; // 默认值为 false
+  onStreamLoading?: () => void;
+  onStreamPlaying?: () => void;
+  onStreamError?: (error: Error) => void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fillMode: FillMode.Fill,
+  enableTouchScale: false,
+  draggable: false,
+  lazyLoad: () => ({
+    enable: true,
+    viewport: 'body',
+  }),
+  onStreamLoading: () => {},
+  onStreamPlaying: () => {},
+  onStreamError: () => {},
+});
+
+const playRegionDomRef = ref();
+const nanoId = getNanoId(5);
+const playRegionDomId = computed(
+  () => `${props.participant.userId}_${props.streamType}_${nanoId}`,
+);
+
+/**
+ * 监听参与者或流类型变化，自动重新绑定
+ */
+watch(
+  () => [props.participant.userId, props.streamType],
+  async (val, oldVal) => {
+    const [oldUserId, oldStreamType] = oldVal || [];
+    const [newUserId, newStreamType] = val;
+
+    if (oldUserId && oldStreamType && (oldUserId !== newUserId || oldStreamType !== newStreamType)) {
+      await nextTick();
+      await unbindView({
+        userId: oldUserId as string,
+        streamType: oldStreamType as VideoStreamType,
+        view: playRegionDomRef.value,
+      });
+      await bindView({
+        userId: newUserId as string,
+        streamType: newStreamType as VideoStreamType,
+        view: playRegionDomRef.value,
+        lazyLoad: props.lazyLoad,
+      });
+    }
+  },
+);
+
+watch(() => props.fillMode, async () => {
+  setStreamConfig({
+    userId: props.participant.userId,
+    streamType: props.streamType,
+    renderParams: {
+      fillMode: props.fillMode,
+    },
+  });
+});
+
+onMounted(async () => {
+  if (!playRegionDomRef.value) {
+    return;
+  }
+  await bindView({
+    userId: props.participant.userId,
+    streamType: props.streamType,
+    view: playRegionDomRef.value,
+    lazyLoad: props.lazyLoad,
+  });
+});
+
+onBeforeUnmount(async () => {
+  if (!playRegionDomRef.value) {
+    return;
+  }
+  await unbindView({
+    userId: props.participant.userId,
+    streamType: props.streamType,
+    view: playRegionDomRef.value,
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.stream-play-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #000;
+}
+</style>