tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/src/components/RoomParticipantList/ParticipantItem.vue

@@ -0,0 +1,205 @@
+<template>
+  <div
+    :class="['participant-item', { 'hovered': isHovered }]"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="user-info">
+      <Avatar :src="participant.avatarUrl" :size="40" />
+      <span class="user-name">{{ displayName }}</span>
+      <div class="role-info">
+        <IconUser
+          v-if="isOwner || isAdmin"
+          size="20"
+          :class="isAdmin ? 'admin-icon' : 'master-icon'"
+        />
+        <div
+          :class="`user-extra-info ${isAdmin ? 'user-extra-info-admin' : ''}`"
+        >
+          {{ roleLabel }}
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!isHovered" class="member-av-state">
+      <component
+        :is="item.icon"
+        v-for="(item, index) in iconList"
+        :key="index"
+        :class="['state-icon']"
+      />
+    </div>
+
+    <div v-if="isHovered" class="action-area">
+      <slot name="actions" :participant="participant" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineOptions } from 'vue';
+import { IconUser, useUIKit,
+  IconVideoOpen,
+  IconVideoClose,
+  IconAudioOpen,
+  IconAudioClose,
+  IconScreenOpen,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomParticipantState } from '../../states/RoomParticipantState';
+import { RoomParticipantRole, DeviceStatus } from '../../types';
+import { Avatar } from '../Avatar';
+import type { RoomParticipant } from '../../types/participant';
+
+defineOptions({
+  name: 'ParticipantItem',
+});
+
+interface Props {
+  participant: RoomParticipant;
+}
+
+const props = defineProps<Props>();
+
+const { localParticipant } = useRoomParticipantState();
+
+const { t } = useUIKit();
+
+const displayName = computed(() => props.participant?.nameCard || props.participant?.userName || props.participant?.userId);
+
+const isOwner = computed(() => props.participant?.role === RoomParticipantRole.Owner);
+const isAdmin = computed(() => props.participant?.role === RoomParticipantRole.Admin);
+const isMe = computed(() => localParticipant.value?.userId === props.participant.userId);
+
+const roleLabel = computed(() => {
+  if (isOwner.value && isMe.value) {
+    return `${t('ParticipantList.Host')}, ${t('ParticipantList.Me')}`;
+  }
+  if (isOwner.value) {
+    return t('ParticipantList.Host');
+  }
+  if (isAdmin.value && isMe.value) {
+    return `${t('ParticipantList.Admin')}, ${t('ParticipantList.Me')}`;
+  }
+  if (isAdmin.value) {
+    return t('ParticipantList.Admin');
+  }
+  if (isMe.value) {
+    return t('ParticipantList.Me');
+  }
+  return '';
+});
+const isHovered = ref(false);
+
+const handleMouseEnter = () => {
+  isHovered.value = true;
+};
+
+const handleMouseLeave = () => {
+  isHovered.value = false;
+};
+
+const iconList = computed(() => {
+  const list = [];
+  if (props.participant?.screenShareStatus && props.participant?.screenShareStatus === DeviceStatus.On) {
+    list.push({ icon: IconScreenOpen });
+  }
+  list.push({
+    icon: props.participant?.microphoneStatus && props.participant?.microphoneStatus === DeviceStatus.On ? IconAudioOpen : IconAudioClose,
+  });
+  list.push({
+    icon: props.participant?.cameraStatus && props.participant?.cameraStatus === DeviceStatus.On ? IconVideoOpen : IconVideoClose,
+  });
+  return list;
+});
+</script>
+
+<style scoped lang="scss">
+.participant-item {
+  display: flex;
+  align-items: center;
+  padding: 0px 20px;
+  height: 52px;
+  box-sizing: border-box;
+  gap: 12px;
+  position: relative;
+  cursor: pointer;
+
+  &.hovered {
+    background: var(--list-color-hover);
+  }
+}
+
+.user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+
+  .user-name {
+    min-width: 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-secondary);
+    overflow: hidden;
+    margin-left: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .role-info {
+    display: flex;
+    flex-shrink: 0;
+    margin-left: 8px;
+
+    .master-icon,
+    .admin-icon {
+      display: flex;
+      color: var(--text-color-link);
+    }
+
+    .admin-icon {
+      color: var(--text-color-warning);
+    }
+
+    .user-extra-info,
+    .user-extra-info-admin {
+      margin-left: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: var(--text-color-link);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .user-extra-info-admin {
+      color: var(--text-color-warning);
+      transition: none;
+    }
+  }
+}
+
+.member-av-state {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: var(--uikit-color-gray-7);
+
+    .state-icon {
+      margin-left: 16px;
+    }
+
+    .disable-icon {
+      opacity: 0.4;
+    }
+  }
+
+.action-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+</style>

package/src/components/RoomParticipantList/PendingParticipantItem.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    :class="{ 'unjoined-user-item': true, 'hovered': isHovered }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="user-info">
+      <Avatar :src="userInfo.avatarUrl" :size="40" />
+      <span class="user-name">{{ displayName }}</span>
+    </div>
+
+    <div class="status-container">
+      <span v-if="showRejectedMessage">{{ t('ParticipantList.NotJoin') }}</span>
+      <span v-if="userInfo.roomStatus === RoomParticipantStatus.InCalling">{{ t('ParticipantList.Calling') }}</span>
+      <TUIButton
+        v-else
+        type="primary"
+        @click="handleInvite({ userId: userInfo.userId })"
+      >
+        {{ t('ParticipantList.Call') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineOptions, watch } from 'vue';
+import { useUIKit, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomState } from '../../states/RoomState';
+import { RoomParticipantStatus } from '../../types';
+import { Avatar } from '../Avatar';
+import type { RoomParticipant } from '../../types';
+
+defineOptions({
+  name: 'ParticipantItem',
+});
+
+interface Props {
+  userInfo: RoomParticipant;
+}
+
+const props = defineProps<Props>();
+
+const { currentRoom, callUserToRoom } = useRoomState();
+const { t } = useUIKit();
+
+const displayName = computed(() => props.userInfo?.userName || props.userInfo?.userId);
+
+const isHovered = ref(false);
+const showRejectedMessage = ref(false);
+let rejectedTimer: ReturnType<typeof setTimeout> | null = null;
+
+watch(
+  () => props.userInfo.roomStatus,
+  (newStatus) => {
+    if (rejectedTimer) {
+      clearTimeout(rejectedTimer);
+      rejectedTimer = null;
+    }
+
+    if (newStatus === RoomParticipantStatus.CallRejected) {
+      showRejectedMessage.value = true;
+      rejectedTimer = setTimeout(() => {
+        showRejectedMessage.value = false;
+        rejectedTimer = null;
+      }, 3000);
+    } else {
+      showRejectedMessage.value = false;
+    }
+  },
+);
+
+const handleMouseEnter = () => {
+  isHovered.value = true;
+};
+
+const handleMouseLeave = () => {
+  isHovered.value = false;
+};
+
+async function handleInvite({ userId }: { userId: string }) {
+  if (!currentRoom.value?.roomId) {
+    return;
+  }
+  try {
+    await callUserToRoom({
+      roomId: currentRoom.value?.roomId || '',
+      userIdList: [userId],
+      timeout: 60,
+    });
+    TUIToast.success({ message: t('ParticipantList.InviteSuccess') });
+  } catch (error) {
+    TUIToast.error({ message: t('ParticipantList.InviteFailed') });
+    console.error('Failed to invite user to room:', error);
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.unjoined-user-item {
+  display: flex;
+  align-items: center;
+  padding: 0px 20px;
+  height: 52px;
+  box-sizing: border-box;
+  gap: 12px;
+  position: relative;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color-secondary);
+
+  &.hovered {
+    background: var(--list-color-hover);
+  }
+}
+
+.user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.user-name {
+
+  overflow: hidden;
+  margin-left: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-text {
+  font-size: 12px;
+}
+</style>

package/src/components/RoomParticipantList/RoomAction.vue

@@ -0,0 +1,141 @@
+<template>
+  <div v-if="canOperate" class="room-action-container">
+    <TUIButton
+      type="primary"
+      color="gray"
+      style="width: 112px"
+      @click="roomAudioAction.handler"
+    >
+      {{ roomAudioAction.label }}
+    </TUIButton>
+    <TUIButton
+      type="primary"
+      color="gray"
+      style="width: 112px"
+      @click="roomVideoAction.handler"
+    >
+      {{ roomVideoAction.label }}
+    </TUIButton>
+    <div ref="moreContainerRef" class="more-container">
+      <TUIButton
+        type="primary"
+        color="gray"
+        style="width: 112px"
+        @click="toggleClickMoreBtn"
+      >
+        {{ t('ParticipantList.More') }}
+        <IconArrowUp
+          size="12"
+          :class="['more-arrow', showMoreControl ? 'down' : 'up']"
+        />
+      </TUIButton>
+      <div v-show="showMoreControl" class="drop-down">
+        <div
+          v-for="item in moreControlList"
+          :key="item.key"
+          class="user-operate-item"
+          @click="item.handler"
+        >
+          <TUIIcon v-if="item.icon" :icon="item.icon" />
+          <span class="operate-text">{{ item.label }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import {
+  TUIButton,
+  IconArrowUp,
+  useUIKit,
+  TUIIcon,
+} from '@tencentcloud/uikit-base-component-vue3';
+import useRoomActions from './useRoomAction';
+
+const { t } = useUIKit();
+const { canOperate, roomActionList } = useRoomActions();
+
+const roomAudioAction = computed(() => roomActionList.value[0]);
+const roomVideoAction = computed(() => roomActionList.value[1]);
+const moreControlList = computed(() => roomActionList.value.slice(2));
+
+const showMoreControl = ref(false);
+const moreContainerRef = ref<HTMLElement | null>(null);
+
+function toggleClickMoreBtn() {
+  showMoreControl.value = !showMoreControl.value;
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (!showMoreControl.value) {
+    return;
+  }
+
+  const target = event.target as Node;
+  if (moreContainerRef.value && !moreContainerRef.value.contains(target)) {
+    showMoreControl.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<style scoped lang="scss">
+.room-action-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.more-container {
+  position: relative;
+  display: flex;
+
+  .more-arrow {
+    margin-left: 2px;
+
+    &.down {
+      transform: rotate(180deg);
+    }
+  }
+
+  .drop-down {
+    position: absolute;
+    right: 3px;
+    bottom: 40px;
+    z-index: 1;
+    padding: 8px 7px;
+    background-color: var(--dropdown-color-default);
+    border-radius: 8px;
+    box-shadow:
+      0 3px 8px var(--uikit-color-black-8),
+      0 6px 40px var(--uikit-color-black-8);
+
+    .user-operate-item {
+      display: flex;
+      align-items: center;
+      height: 20px;
+      margin: 5px 7px;
+      color: var(--text-color-secondary);
+      cursor: pointer;
+
+      .operate-text {
+        margin-left: 8px;
+        font-family: 'PingFang SC';
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>

package/src/components/RoomParticipantList/i18n/en-US/index.ts

@@ -0,0 +1,74 @@
+export const resource = {
+  ParticipantList: {
+    Members: 'Members',
+    Search: 'Search Member',
+    Joined: 'Joined',
+    NotJoined: 'Not Joined',
+    NoMember: 'No members',
+    Call: 'Call',
+    Calling: 'Calling...',
+    CallAll: 'Call all',
+    NotJoin: 'Not join now',
+
+    Host: 'Host',
+    Me: 'Me',
+    Admin: 'Admin',
+
+    More: 'More',
+    Mute: 'Mute',
+    Unmute: 'Unmute',
+    DisableVideo: 'Disable video',
+    EnableVideo: 'Enable video',
+    EnableChat: 'Enable chat',
+    DisableChat: 'Disable chat',
+    SetAdmin: 'Set as admin',
+    RemoveAdmin: 'Remove admin',
+    ChangeName: 'Change name',
+    TransferHost: 'Transfer host',
+    KickOut: 'Kick out',
+    InputUserName: 'Please enter user name',
+
+    MuteAll: 'Mute all',
+    UnmuteAll: 'Unmute all',
+    MuteAllTip: 'All current and new members will be muted',
+    UnmuteAllDesc: 'Users will be able to turn on the microphone after unlocking',
+    MicDisabledTip: 'Members will not be able to turn on the microphone',
+    AudioDisabled: 'All audios muted',
+    AudioEnabled: 'All audios unmuted',
+
+    DisableAllVideo: 'Disable all videos',
+    EnableAllVideo: 'Enable all videos',
+    DisableAllVideoTip: 'All current and new members will be banned from using the camera',
+    EnableAllVideoDesc: 'Users will be able to turn on the camera after unlocking',
+    CameraDisabledTip: 'Members will not be able to turn on the camera',
+    VideoDisabled: 'All videos disabled',
+    VideoEnabled: 'All videos enabled',
+
+    AllCanShare: 'All members can share screen',
+    HostAdminOnlyShare: 'Screen sharing for host/admin only',
+    ConfirmHostAdminOnlyShare: 'Enable screen sharing for host/admin only?',
+    TerminateOtherShare: 'Another member is currently sharing the screen. Their sharing will be terminated if you enable this.',
+
+    Confirm: 'Confirm',
+    Cancel: 'Cancel',
+    Note: 'Note',
+    ConfirmTransfer: 'Confirm transfer',
+
+    InviteMicSent: 'An invitation to turn on the microphone has been sent to {{ name }}',
+    InviteCameraSent: 'An invitation to turn on the camera has been sent to {{ name }}',
+    SetAdminSuccess: '{{ name }} has been set as an administrator',
+    RemoveAdminSuccess: 'The administrator status of {{ name }} has been withdrawn',
+    TransferHostTo: 'Transfer room ownership to {{ name }}',
+    TransferHostSuccess: 'Room ownership has been transferred to {{ name }}',
+    ConfirmKick: 'Do you want to kick {{ name }} out of the room?',
+    NameChangeSuccess: 'Name changed successfully',
+    DisableChatFailed: 'Failed to disable chat',
+    TransferHostFailed: 'Failed to transfer host. Please try again.',
+    ChangeNameFailed: 'Failed to change name. Please try again.',
+    TransferHostWarning: 'After transferring room ownership, you will become a general member',
+    NameMaxLength: 'The user name cannot exceed 32 characters',
+
+    InviteSuccess: 'Invitation sent successfully, waiting for member to join',
+    InviteFailed: 'Failed to invite member',
+  },
+};

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

@@ -0,0 +1,2 @@
+export { resource as zhCNResource } from './zh-CN/index';
+export { resource as enUSResource } from './en-US/index';

package/src/components/RoomParticipantList/i18n/zh-CN/index.ts

@@ -0,0 +1,74 @@
+export const resource = {
+  ParticipantList: {
+    Members: '成员',
+    Search: '搜索成员',
+    Joined: '已进房',
+    NotJoined: '未进房',
+    NoMember: '暂无成员',
+    Call: '呼叫',
+    Calling: '呼叫中...',
+    CallAll: '呼叫全部',
+    NotJoin: '暂不入会',
+
+    Host: '房主',
+    Me: '我',
+    Admin: '管理员',
+
+    More: '更多',
+    Mute: '静音',
+    Unmute: '解除静音',
+    DisableVideo: '关闭视频',
+    EnableVideo: '请求开启视频',
+    EnableChat: '解除禁言',
+    DisableChat: '禁言',
+    SetAdmin: '设为管理员',
+    RemoveAdmin: '撤销管理员',
+    ChangeName: '修改名称',
+    TransferHost: '转交房主',
+    KickOut: '踢出房间',
+    InputUserName: '请输入用户名',
+
+    MuteAll: '全体静音',
+    UnmuteAll: '取消全体静音',
+    MuteAllTip: '所有及新加入的成员将被静音',
+    UnmuteAllDesc: '解除后用户可以自由开启麦克风',
+    MicDisabledTip: '成员将无法开启麦克风',
+    AudioDisabled: '已开启全体静音',
+    AudioEnabled: '已解除全体静音',
+
+    DisableAllVideo: '全体禁画',
+    EnableAllVideo: '取消全体禁画',
+    DisableAllVideoTip: '所有及新加入的成员将被禁止视频',
+    EnableAllVideoDesc: '解除后用户可以自由开启视频',
+    CameraDisabledTip: '成员将无法开启视频画面',
+    VideoDisabled: '已开启全体禁画',
+    VideoEnabled: '已解除全体禁画',
+
+    AllCanShare: '全体成员可共享屏幕',
+    HostAdminOnlyShare: '仅房主/管理员可共享屏幕',
+    ConfirmHostAdminOnlyShare: '是否开启仅房主/管理员可共享屏幕？',
+    TerminateOtherShare: '当前有成员正在共享屏幕, 开启后该成员的共享将会被终止',
+
+    Confirm: '确认',
+    Cancel: '取消',
+    Note: '通知',
+    ConfirmTransfer: '确认转交',
+
+    InviteMicSent: '已向{{ name }}发出开启麦克风邀请',
+    InviteCameraSent: '已向{{ name }}发出开启摄像头邀请',
+    SetAdminSuccess: '已将{{ name }}设为管理员',
+    RemoveAdminSuccess: '已将{{ name }}的管理员身份撤回',
+    TransferHostTo: '将房主转移给{{ name }}',
+    TransferHostSuccess: '已将房主转交给{{ name }}',
+    ConfirmKick: '是否将{{ name }}移出房间',
+    NameChangeSuccess: '名称修改成功',
+    DisableChatFailed: '禁言失败',
+    TransferHostFailed: '转交房主失败，请重试',
+    ChangeNameFailed: '修改名称失败，请重试',
+    TransferHostWarning: '转交房主后将成为普通成员',
+    NameMaxLength: '用户名称不能超过32个字节',
+
+    InviteSuccess: '邀请信息已发出，等待成员加入',
+    InviteFailed: '邀请成员失败',
+  },
+};

package/src/components/RoomParticipantList/index.ts

@@ -0,0 +1,10 @@
+import { addI18n } from '../../i18n';
+import { enUSResource, zhCNResource } from './i18n';
+import RoomParticipantListComp from './index.vue';
+
+addI18n('en-US', { translation: enUSResource });
+addI18n('zh-CN', { translation: zhCNResource });
+
+const RoomParticipantList = RoomParticipantListComp;
+
+export { RoomParticipantList };