tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/src/components/LiveList/LiveListH5.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="live-list-panel-h5" v-if="loginUserInfo">
-    <div v-if="liveList.length > 0" class="live-list" @scroll="handleScroll" @wheel="handleWheel" ref="scrollContainerRef">
+    <div
+      v-if="liveList.length > 0"
+      class="live-list"
+      @scroll="handleScroll"
+      @wheel="handleWheel"
+      ref="scrollContainerRef"
+    >
       <div class="live-list-items">
         <div class="live-item" v-for="item in liveList" :key="item.liveId" @click="liveRoomClick(item)">
           <div class="live-room-cover">
@@ -22,7 +28,7 @@
         <span>{{ t('No More') }}</span>
       </div>
     </div>
-    <div v-else-if="!isLoadingLiveList" class="no-live">
+    <div v-else-if="!isLoadingMore" class="no-live">
       <IconNoLiveRoom :size="60" />
       <span>{{ t('No Live') }}</span>
     </div>
@@ -41,18 +47,21 @@ import { LiveInfo } from '../../types';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
 
-const { liveList, hasMoreLive, isLoadingLiveList, isLoadingMore, fetchLiveList } = useLiveState();
+const { liveList, currentCursor, fetchLiveList } = useLiveState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
 
 const DEFAULT_COVER = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
 const scrollContainerRef = ref<HTMLElement | null>(null);
 
+const isLoadingMore = ref(false);
+const hasMoreLive = computed(() => currentCursor.value !== '');
+
 const liveItemWidth = ref('168px');
 const liveItemHeight = ref('262px');
 
 const shouldFetchMoreLiveList = computed(() => {
-  return hasMoreLive.value && !isLoadingMore.value && !isLoadingLiveList.value;
+  return hasMoreLive.value && !isLoadingMore.value;
 });
 
 const isShowMoreVisible = computed(() => {
@@ -65,9 +74,11 @@ const emit = defineEmits<{
 
 watch(
   loginUserInfo,
-  user => {
+  async user => {
     if (user && user.userId) {
-      fetchLiveList({});
+      isLoadingMore.value = true;
+      await fetchLiveList({});
+      isLoadingMore.value = false;
     }
   },
   { immediate: true }
@@ -106,7 +117,7 @@ function handleWheel(event: WheelEvent) {
   }
 
   if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchLiveList({ append: true });
+    fetchMoreLives();
   }
 }
 
@@ -116,7 +127,17 @@ function handleScroll() {
   }
 
   if (isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchLiveList({ append: true });
+    fetchMoreLives();
+  }
+}
+
+async function fetchMoreLives() {
+  if (!hasMoreLive.value || isLoadingMore.value) return;
+  try {
+    isLoadingMore.value = true;
+    await fetchLiveList({ cursor: currentCursor.value });
+  } finally {
+    isLoadingMore.value = false;
   }
 }
 
@@ -138,7 +159,6 @@ onUnmounted(() => {
     scrollContainerRef.value.removeEventListener('scroll', handleScroll);
   }
 });
-
 </script>
 
 <style lang="scss" scoped>

package/src/components/LiveMonitorView/LiveMonitorView.vue

@@ -1,58 +1,76 @@
 <template>
-  <div ref="liveContainerRef" class="live-monitor-container">
+  <div
+    ref="liveContainerRef"
+    v-show="props.liveInfo.orientation"
+    class="live-monitor-container"
+    :class="{ landscape: isLandscape }"
+  >
     <div :id="viewId" class="live-monitor-view"></div>
     <div
       v-for="region in regionList"
+      :key="region.userInfo.userId"
       class="live-tag-mask"
       :class="{ 'hide-tag': !isFullscreen }"
       :style="styleList[region.userInfo.userId]"
     >
       <div class="live-id live-tag">{{ `${t('RoomId')}: ${region.liveId}` }}</div>
       <div class="user-id live-tag">{{ `${t('UserId')}: ${region.userInfo.userId}` }}</div>
-      <div class="force-close live-tag" @click="handleForceClose">
+      <div v-show="isCrossRoomConnection" class="destroy-button live-tag" @click="handleForceClose">
         <IconEndLive />
         <span>{{ t('Force Close') }}</span>
       </div>
-      <div :class="['toggle-audio-state', ' live-tag', { 'is-unmuted': !isMuted }]" @click="toggleMuteAudio">
-        <IconMute v-if="isMuted" />
-        <IconSpeakerPhone v-else />
-        <span>{{ isMuted ? t('Unmute Audio') : t('Mute Audio') }}</span>
-      </div>
+    </div>
+    <div
+      v-show="!isCrossRoomConnection && isFullscreen"
+      class="non-cross-room-destroy-button destroy-button live-tag"
+      @click="handleForceClose"
+    >
+      <IconEndLive />
+      <span>{{ t('Force Close') }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineProps, computed, ref, watch, onMounted, onUnmounted } from 'vue';
-import { useUIKit, IconEndLive, IconMute, IconSpeakerPhone } from '@tencentcloud/uikit-base-component-vue3';
+import { useUIKit, IconEndLive } from '@tencentcloud/uikit-base-component-vue3';
 import { MonitorLiveInfo } from '../../types';
 import { useLiveMonitorState } from '../../states/LiveMonitorState';
 import { exitFullScreen } from '../../utils/utils';
 
-const { monitorLiveInfoList, closeRoom, muteLiveAudio } = useLiveMonitorState();
-const { t } = useUIKit();
-
 interface Props {
   liveInfo: MonitorLiveInfo;
 }
-const isFullscreen = ref(false);
-const isMuted = ref(true);
-const styleList = ref<Record<string, any>>({});
+
+interface StyleList {
+  [userId: string]: {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+  };
+}
+
 const props = defineProps<Props>();
+const { monitorLiveInfoList, closeRoom } = useLiveMonitorState();
+const { t } = useUIKit();
+
+const isFullscreen = ref(false);
+const isCrossRoomConnection = ref(false);
+const styleList = ref<StyleList>({});
 const liveContainerRef = ref<HTMLDivElement>();
 
-const viewId = computed(() => {
-  return `live_monitor_view_${props.liveInfo.liveId}`;
-});
+const viewId = computed(() => `live_monitor_view_${props.liveInfo.liveId}`);
 
-const regionList = computed(() => {
-  return monitorLiveInfoList.value.find(liveInfo => liveInfo.liveId === props.liveInfo.liveId)?.regionList;
-});
+const currentLiveInfo = computed(() =>
+  monitorLiveInfoList.value.find(liveInfo => liveInfo.liveId === props.liveInfo.liveId)
+);
 
-const toggleMuteAudio = () => {
-  muteLiveAudio(props.liveInfo.liveId, !isMuted.value);
-  isMuted.value = !isMuted.value;
-};
+const regionList = computed(() => currentLiveInfo.value?.regionList);
+
+const isLandscape = computed(() => currentLiveInfo.value?.orientation === 'landscape');
+
+const isSingleStream = computed(() => (regionList.value?.length ?? 0) === 1);
 
 const handleForceClose = () => {
   closeRoom(props.liveInfo.liveId);
@@ -61,49 +79,58 @@ const handleForceClose = () => {
   }
 };
 
-const handleFullscreenChange = () => {
+const onFullscreenChange = () => {
   if (document.fullscreenElement) {
     isFullscreen.value = true;
   } else {
     isFullscreen.value = false;
-    muteLiveAudio(props.liveInfo.liveId, true);
-    isMuted.value = true;
   }
 };
 
+const updateStyleList = () => {
+  if (!liveContainerRef.value || !regionList.value) return;
+
+  const containerWidth = liveContainerRef.value.clientWidth;
+  const containerHeight = liveContainerRef.value.clientHeight;
+
+  const newStyleList: StyleList = {};
+
+  regionList.value.forEach(region => {
+    if (region.liveId !== props.liveInfo.liveId) {
+      isCrossRoomConnection.value = true;
+    }
+
+    newStyleList[region.userInfo.userId] = {
+      left: `${region.rect.x * containerWidth}px`,
+      top: `${region.rect.y * containerHeight}px`,
+      width: isSingleStream.value ? '100%' : `${region.rect.w * containerWidth}px`,
+      height: isSingleStream.value ? '100%' : `${region.rect.h * containerHeight}px`,
+    };
+  });
+
+  styleList.value = newStyleList;
+};
+
 onMounted(() => {
-  addEventListener('fullscreenchange', handleFullscreenChange);
+  addEventListener('fullscreenchange', onFullscreenChange);
 });
 
 onUnmounted(() => {
-  removeEventListener('fullscreenchange', handleFullscreenChange);
+  removeEventListener('fullscreenchange', onFullscreenChange);
 });
 
-watch(
-  regionList,
-  () => {
-    if (!liveContainerRef.value) return;
-    const containerWidth = liveContainerRef.value.clientWidth;
-    const containerHeight = liveContainerRef.value.clientHeight;
-    const isSingleStream = regionList.value?.length === 1;
-    regionList.value?.forEach(region => {
-      styleList.value[region.userInfo.userId] = {
-        left: `${region.rect.x * containerWidth}px`,
-        top: `${region.rect.y * containerHeight}px`,
-        width: `${isSingleStream ? '100%' : region.rect.w * containerWidth + 'px'}`,
-        height: `${isSingleStream ? '100%' : region.rect.h * containerHeight + 'px'}`,
-      };
-    });
-  },
-  { immediate: true }
-);
+watch(regionList, updateStyleList, { immediate: true });
 </script>
 
 <style lang="scss" scoped>
 .live-monitor-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
-  height: 100%;
   aspect-ratio: 9 / 16;
+  width: auto;
+  height: 100%;
 
   .live-monitor-view {
     width: 100%;
@@ -113,60 +140,57 @@ watch(
   .live-tag-mask {
     position: absolute;
 
-    .live-tag {
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      color: #ffece5;
-      font-size: 12px;
-      font-weight: 500;
-      background-color: #e57849;
-      padding: 4px;
-      border-radius: 4px;
-    }
-
     .user-id {
       top: 44px;
     }
+  }
 
-    .force-close,
-    .toggle-audio-state {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 150px;
-      left: unset;
-      top: unset;
-      right: 10px;
-      font-weight: 500;
-      font-size: 14px;
-      cursor: pointer;
-
-      span {
-        margin-left: 4px;
-      }
-    }
+  .non-cross-room-destroy-button {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+  }
 
-    .force-close {
-      background-color: #e54545;
-      color: #ffe7e5;
-      bottom: 10px;
-    }
+  .hide-tag {
+    display: none;
+  }
 
-    .toggle-audio-state {
-      background-color: #e54545;
-      color: #ffe7e5;
-      bottom: 50px;
-    }
+  .live-tag {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: #ffece5;
+    font-size: 12px;
+    font-weight: 500;
+    background-color: #e57849;
+    padding: 4px;
+    border-radius: 4px;
+  }
 
-    .is-unmuted {
-      background-color: #0abf77;
-      color: #e6ffe5;
+  .destroy-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    left: unset;
+    top: unset;
+    right: 10px;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    color: #ffe7e5;
+    background-color: #e54545;
+    bottom: 10px;
+
+    span {
+      margin-left: 4px;
     }
   }
+}
 
-  .hide-tag {
-    display: none;
-  }
+.landscape {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  height: auto;
 }
 </style>

package/src/components/LiveScenePanel/MaterialRenameDialog.vue

@@ -2,7 +2,7 @@
   <TUIDialog
     :visible="true"
     :title="t('Rename')"
-    :confirmText="t('保存为新名称')"
+    :confirmText="t('Save as new name')"
     @confirm="handleRename"
     @close="closeMaterialRenameDialog"
     @cancel="closeMaterialRenameDialog"

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

@@ -44,4 +44,6 @@ export const resource = {
   'External Devices': 'External Devices',
   Multimedia: 'Multimedia',
   'Screen Capture': 'Screen Capture',
+  'Save as new name': 'Save as new name',
+  'Please check the current browser camera permission': 'Please check the current browser camera permission',
 };

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

@@ -44,4 +44,6 @@ export const resource = {
   'External Devices': '外接设备',
   Multimedia: '多媒体',
   'Screen Capture': '画面捕捉',
+  'Save as new name': '保存为新名称',
+  'Please check the current browser camera permission': '请检查当前浏览器摄像头权限',
 };

package/src/components/LiveScenePanel/index.vue

@@ -3,7 +3,7 @@
     <LiveSceneSelect :displayMode="mediaSourceList.length === 0 ? 'panel' : 'button'" @addMaterial="selectMaterial" />
     <!-- 素材列表区域 -->
     <div class="materials-list">
-      <template v-for="material in mediaSourceList" :key="material.id">
+      <template v-for="material in mediaSourceListWithZOrderSort" :key="material.id">
         <MaterialItem
           :material="material"
           @cameraSetting="updateCameraSetting(material)"
@@ -58,6 +58,12 @@ TUIRoomEngine.once('ready', async () => {
   await getCameraList();
 });
 
+const mediaSourceListWithZOrderSort = computed(() =>
+  [...mediaSourceList.value].sort(
+    (item1: MediaSource, item2: MediaSource) => item2.layout?.zOrder - item1.layout?.zOrder
+  )
+);
+
 // 状态数据
 const showMaterialDialog = ref(false);
 const showCameraSettingDialog = ref(false);

package/src/components/LiveStreamView/DefaultStreamViewUI.vue

@@ -2,26 +2,29 @@
   <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">
+      <div class="user-details" v-if="seatListWithUser.length > 1">
         <AudioIcon
+          v-if="!isAudioAvailable"
+          class="audio-icon"
           :isMuted="!isAudioAvailable"
           :audioVolume="speakingUsers.get(userInfo.userId) || 0"
-          size="small"
         />
         <div class="username">{{ displayName }}</div>
       </div>
     </template>
     <div v-if="!userInfo.userId" class="empty-position">
-      <div class="text" v-if="localCoGuestStatus === CoGuestStatus.Connected">{{ t('Waiting for connection') }}</div>
-      <div class="text" v-else>{{ t('Waiting for connection') }}</div>
+      <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 } from 'vue';
+import { computed, ref, watch, nextTick, onUnmounted } from 'vue';
 import { DeviceStatus, SeatUserInfo, CoGuestStatus } from '../../types';
 import { useCoGuestState } from '../../states/CoGuestState';
 import { Avatar } from '../Avatar';
@@ -29,33 +32,107 @@ 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 props = withDefaults(
-  defineProps<{
-    userInfo?: SeatUserInfo;
-    containerStyle?: {
-      width: string;
-      height: string;
-      top: string;
-      left: string;
-    };
-  }>(),
-  {
-    containerStyle: undefined,
-    userInfo: undefined,
-  }
-);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
 
 const { localCoGuestStatus } = useCoGuestState();
-const { speakingUsers } = useLiveSeatState();
+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(() => {
-  // The avatar size for background mixing is region.width / 5
-  const radio = 4.9;
-  if (parseInt(props.containerStyle?.width || '0') / radio > 80) {
-    return Math.ceil(parseInt(props.containerStyle?.width || '0') / radio);
+  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);
   }
-  return 80;
 });
 
 const displayName = computed(() => {
@@ -84,7 +161,7 @@ const isVideoAvailable = computed(() => {
   top: 0;
   left: 0;
   pointer-events: none;
-  border: 1px solid var(--uikit-color-black-6);
+  box-sizing: border-box;
 
   .no-video-container {
     display: flex;
@@ -93,8 +170,21 @@ const isVideoAvailable = computed(() => {
     width: 100%;
     height: 100%;
 
-    .avatar {
-      border: 2px solid rgba(255, 255, 255, 0.6);
+    .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);
     }
   }
 
@@ -104,16 +194,21 @@ const isVideoAvailable = computed(() => {
     bottom: 6px;
     left: 6px;
     display: flex;
-    background-color: rgba(34, 38, 46, 0.40);
-    padding: 2px 6px;
-    border-radius: 20px;
+    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: 16px;
+      font-size: 12px;
       font-weight: 500;
-      margin-left: 4px;
+      margin-left: 2px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -139,6 +234,10 @@ const isVideoAvailable = computed(() => {
 
     .text {
       font-size: 14px;
+      max-width: 80%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
   }
 }

package/src/components/LiveStreamView/index.vue

@@ -8,7 +8,7 @@
       <div class="live-stream-ui" v-if="needPlayStreamViewInfo.length > 0">
         <div v-for="(item, index) in needPlayStreamViewInfo" :key="`seat-${index}`" :style="item.region">
           <slot name="streamViewUI" v-bind="{ userInfo: item.userInfo }"></slot>
-          <DefaultStreamViewUI :containerStyle="item.region" v-if="!$slots.streamViewUI" :userInfo="item.userInfo" />
+          <DefaultStreamViewUI :streamViewInfoList="needPlayStreamViewInfo" v-if="!$slots.streamViewUI" :userInfo="item.userInfo" />
         </div>
       </div>
       <slot
@@ -28,6 +28,7 @@ import { useLiveSeatState } from '../../states/LiveSeatState';
 import { useLoginState } from '../../states/LoginState';
 import { useLiveState } from '../../states/LiveState';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { SeatUserInfo } from '../../types';
 
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
@@ -70,7 +71,7 @@ const seatListWithRealSize = computed(() => {
   return seatList.value.map((item, index) => {
     const ratioLayout = ratioLayoutList.value[index];
     return {
-      userInfo: item.userInfo,
+      userInfo: item.userInfo as SeatUserInfo,
       region: {
         position: 'absolute' as const,
         left: `${streamViewSize.value.width * ratioLayout.x}px`,