tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/src/components/ConversationList/index.ts

@@ -1,5 +1,36 @@
-import ConversationList from './ConversationList.vue';
+import { addI18n } from '../../i18n';
+
+import { ConversationActions as ConversationActionsComponent } from './ConversationActions';
+import { ConversationCreate as ConversationCreateComponent } from './ConversationCreate';
+import { default as ConversationListComponent } from './ConversationList.vue';
+import { ConversationListContent as ConversationListContentComponent } from './ConversationListContent';
+import { ConversationListHeader as ConversationListHeaderComponent } from './ConversationListHeader';
+import { default as ConversationPlaceHolderComponent } from './ConversationPlaceHolder';
+import { ConversationPreview as ConversationPreviewComponent, ConversationPreviewUI as ConversationPreviewUIComponent } from './ConversationPreview';
+import { ConversationSearch as ConversationSearchComponent } from './ConversationSearch';
+import { enResource, zhResource } from './i18n';
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+const ConversationList = ConversationListComponent;
+const ConversationActions = ConversationActionsComponent;
+const ConversationCreate = ConversationCreateComponent;
+const ConversationListHeader = ConversationListHeaderComponent;
+const ConversationListContent = ConversationListContentComponent;
+const ConversationPlaceHolder = ConversationPlaceHolderComponent;
+const ConversationPreview = ConversationPreviewComponent;
+const ConversationPreviewUI = ConversationPreviewUIComponent;
+const ConversationSearch = ConversationSearchComponent;
 
 export {
   ConversationList,
+  ConversationActions,
+  ConversationCreate,
+  ConversationListHeader,
+  ConversationListContent,
+  ConversationPreview,
+  ConversationPreviewUI,
+  ConversationPlaceHolder,
+  ConversationSearch,
 };

package/src/components/LiveAudienceList/LiveAudienceList.vue

@@ -49,7 +49,7 @@
       </div>
     </div>
     <div
-      v-if="loginUserInfo && localLiveStatus === LiveStatus.Live"
+      v-if="loginUserInfo && localLiveStatus === LiveStatus.Live && !isOwner"
       class="viewer-item current-user-item"
     >
       <span class="rank">-</span>

package/src/components/LiveAudienceList/UserActionMenu.vue

@@ -100,36 +100,36 @@ const actions = computed(() => {
   if (isInCoGuest) {
     tempActions.push({ label: t('Kick out'), action: 'disconnect', actionFn: () => disconnect(props.userId) });
   }
-  if (isAvailableCoGuest) {
-    tempActions.push({
-      label: t('Invite to seat'),
-      action: 'takeSeat',
-      actionFn: () =>
-        sendCoGuestRequest({
-          userId: props.userId,
-          seatIndex: -1,
-        }),
-    });
-  }
-  if (isSentCoGuest) {
-    tempActions.push({
-      label: t('Cancel invitation'),
-      action: 'cancelCoGuestRequest',
-      actionFn: () => cancelCoGuestRequest({ userId: props.userId }),
-    });
-  }
-  if (isReceivedCoGuest) {
-    tempActions.push({
-      label: t('Accept invitation'),
-      action: 'acceptCoGuestRequest',
-      actionFn: () => acceptCoGuestRequest({ userId: props.userId }),
-    });
-    tempActions.push({
-      label: t('Reject invitation'),
-      action: 'rejectCoGuestRequest',
-      actionFn: () => rejectCoGuestRequest({ userId: props.userId }),
-    });
-  }
+  // if (isAvailableCoGuest) {
+  //   tempActions.push({
+  //     label: t('Invite to seat'),
+  //     action: 'takeSeat',
+  //     actionFn: () =>
+  //       sendCoGuestRequest({
+  //         userId: props.userId,
+  //         seatIndex: -1,
+  //       }),
+  //   });
+  // }
+  // if (isSentCoGuest) {
+  //   tempActions.push({
+  //     label: t('Cancel invitation'),
+  //     action: 'cancelCoGuestRequest',
+  //     actionFn: () => cancelCoGuestRequest({ userId: props.userId }),
+  //   });
+  // }
+  // if (isReceivedCoGuest) {
+  //   tempActions.push({
+  //     label: t('Accept invitation'),
+  //     action: 'acceptCoGuestRequest',
+  //     actionFn: () => acceptCoGuestRequest({ userId: props.userId }),
+  //   });
+  //   tempActions.push({
+  //     label: t('Reject invitation'),
+  //     action: 'rejectCoGuestRequest',
+  //     actionFn: () => rejectCoGuestRequest({ userId: props.userId }),
+  //   });
+  // }
   tempActions.push({
     label: t('Kick out of room'),
     action: 'kickUserOutOfRoom',

package/src/components/LiveCoreView/DefaultStreamViewUI.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="stream-cover">
+    <template v-if="userInfo.userId">
+      <div class="no-video-container" v-if="!isVideoAvailable">
+        <canvas v-if="needCanvasMaskList.length > 0" ref="canvasRef" class="canvas-mask" />
+        <div v-else class="mask"></div>
+        <Avatar class="avatar" :size="avatarSize" :src="userInfo.avatarUrl" :alt="displayName" />
+      </div>
+      <div class="user-details" v-if="seatListWithUser.length > 1">
+        <AudioIcon
+          v-if="!isAudioAvailable"
+          class="audio-icon"
+          :isMuted="!isAudioAvailable"
+          :audioVolume="speakingUsers.get(userInfo.userId) || 0"
+        />
+        <div class="username">{{ displayName }}</div>
+      </div>
+    </template>
+    <div v-if="!userInfo.userId" class="empty-position">
+      <span class="text" :title="t('Waiting for connection')" v-if="localCoGuestStatus === CoGuestStatus.Connected">{{ t('Waiting for connection') }}</span>
+      <span class="text" :title="t('Waiting for connection')" v-else>{{ t('Waiting for connection') }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, nextTick, onUnmounted } from 'vue';
+import { DeviceStatus, SeatUserInfo, CoGuestStatus } from '../../types';
+import { useCoGuestState } from '../../states/CoGuestState';
+import { Avatar } from '../Avatar';
+import AudioIcon from '../../baseComp/AudioIcon.vue';
+import { useLiveSeatState } from '../../states/LiveSeatState';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+interface Props {
+  userInfo: SeatUserInfo;
+  streamViewInfoList: Array<{ userInfo: SeatUserInfo; region: {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+    zIndex: number;
+  }}>;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useUIKit();
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+
+const { localCoGuestStatus } = useCoGuestState();
+const { speakingUsers, seatList } = useLiveSeatState();
+
+const seatListWithUser = computed(() => {
+  return seatList.value.filter(item => item.userInfo && item.userInfo.userId !== '');
+});
+
+const currentStreamViewSize = computed(() => {
+  const currentStreamViewInfo = props.streamViewInfoList.find(item => item.userInfo?.userId === props.userInfo?.userId);
+  if (!currentStreamViewInfo) return { width: 0, height: 0 };
+  return {
+    width: parseInt(currentStreamViewInfo?.region.width),
+    height: parseInt(currentStreamViewInfo?.region.height),
+  };
+});
+
+const avatarSize = computed(() => {
+  const defaultAvatarSize = 54;
+  const minSize = Math.min(currentStreamViewSize.value.width, currentStreamViewSize.value.height);
+  if (minSize < defaultAvatarSize + 10) {
+    return minSize - 10;
+  }
+  return defaultAvatarSize;
+});
+
+const needCanvasMaskList = computed(() => {
+  const currentStreamViewInfo = props.streamViewInfoList.find(item => item.userInfo?.userId === props.userInfo?.userId);
+  if (!currentStreamViewInfo) return [];
+  return props.streamViewInfoList.filter(item => {
+    const isHigher = item.region.zIndex > currentStreamViewInfo?.region.zIndex;
+    const isHorizontalOverlap = parseInt(item.region.left) > parseInt(currentStreamViewInfo?.region.left) && parseInt(item.region.left) < parseInt(currentStreamViewInfo?.region.left) + parseInt(currentStreamViewInfo?.region.width);
+    const isVerticalOverlap = parseInt(item.region.top) > parseInt(currentStreamViewInfo?.region.top) && parseInt(item.region.top) < parseInt(currentStreamViewInfo?.region.top) + parseInt(currentStreamViewInfo?.region.height);
+    return isHigher && isHorizontalOverlap && isVerticalOverlap;
+  }).map(item => {
+    return {
+      left: parseInt(item.region.left) - parseInt(currentStreamViewInfo?.region.left),
+      top: parseInt(item.region.top) - parseInt(currentStreamViewInfo?.region.top),
+      width: parseInt(item.region.width),
+      height: parseInt(item.region.height),
+    }
+  })
+});
+
+const drawCanvas = () => {
+  if (!canvasRef.value) return;
+
+  const canvas = canvasRef.value;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+
+  ctx.fillStyle = '#1F2024';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  needCanvasMaskList.value.forEach(item => {
+    ctx.clearRect(item.left, item.top, item.width, item.height);
+  });
+};
+
+let resizeObserver: ResizeObserver | null = null;
+
+watch(() => needCanvasMaskList.value.length, async () => {
+  if (needCanvasMaskList.value.length > 0) {
+    await nextTick();
+    if (canvasRef.value) {
+      drawCanvas();
+      resizeObserver = new ResizeObserver(() => {
+        drawCanvas();
+      });
+      resizeObserver.observe(canvasRef.value);
+    }
+  } else {
+    if (resizeObserver && canvasRef.value) {
+      resizeObserver.unobserve(canvasRef.value);
+    }
+  }
+}, { immediate: true });
+
+onUnmounted(() => {
+  if (resizeObserver && canvasRef.value) {
+    resizeObserver.unobserve(canvasRef.value);
+  }
+});
+
+const displayName = computed(() => {
+  return props.userInfo?.userName || props.userInfo?.userId;
+});
+
+const isAudioAvailable = computed(() => {
+  return props.userInfo?.microphoneStatus === DeviceStatus.On;
+});
+
+const isVideoAvailable = computed(() => {
+  return props.userInfo?.cameraStatus === DeviceStatus.On;
+});
+</script>
+
+<style lang="scss" scoped>
+.stream-cover {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+
+  .no-video-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .canvas-mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--uikit-color-gray-3);
+    }
+  }
+
+  .user-details {
+    text-align: center;
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    display: flex;
+    align-items: center;
+    background-color: var(--uikit-color-black-5);
+    padding: 2px 8px;
+    border-radius: 100px;
+    max-width: 80%;
+    box-sizing: border-box;
+
+    .audio-icon {
+      zoom: 0.6;
+    }
+
+    .username {
+      font-size: 12px;
+      font-weight: 500;
+      margin-left: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .empty-position {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: var(--uikit-color-gray-2);
+    color: #fff;
+    font-weight: bold;
+    pointer-events: auto;
+
+    .number {
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .text {
+      font-size: 14px;
+      max-width: 80%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+}
+</style>

package/src/components/{LiveStreamView → LiveCoreView}/index.ts

@@ -1,8 +1,9 @@
-import LiveStreamView from './index.vue';
-import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
 import { addI18n } from '../../i18n';
+import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
 import { enUSResource, zhCNResource } from './i18n';
+import LiveCoreView from './index.vue';
+
 addI18n('en-US', { translation: enUSResource });
 addI18n('zh-CN', { translation: zhCNResource });
 
-export { LiveStreamView, DefaultStreamViewUI };
+export { LiveCoreView, DefaultStreamViewUI };