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

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

@@ -1,33 +1,61 @@
 <template>
-  <div class="live-stream-view-container" ref="liveStreamViewContainerRef">
-    <div class="live-stream-view" :style="streamViewStyle">
-      <div class="live-stream-placeholder" v-if="!$slots.localVideo && seatList.length === 0">
+  <div
+    ref="liveCoreViewContainerRef"
+    class="live-core-view-container"
+  >
+    <div
+      class="live-core-view"
+      :style="streamViewStyle"
+    >
+      <div
+        v-if="!$slots.localVideo && seatList.length === 0"
+        class="live-core-placeholder"
+      >
         <span class="placeholder-text">{{ t('No video') }}</span>
       </div>
-      <div id="stream-content" class="stream-content"></div>
-      <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" />
+      <div
+        id="atomicx-live-stream-content"
+        class="stream-content"
+      />
+      <div
+        v-if="needPlayStreamViewInfo.length > 0"
+        class="live-core-ui"
+      >
+        <div
+          v-for="(item, index) in needPlayStreamViewInfo"
+          :key="`seat-${index}`"
+          :style="item.region"
+        >
+          <slot
+            name="streamViewUI"
+            v-bind="{ userInfo: item.userInfo }"
+          />
+          <DefaultStreamViewUI
+            v-if="!$slots.streamViewUI"
+            :streamViewInfoList="needPlayStreamViewInfo"
+            :userInfo="item.userInfo"
+          />
         </div>
       </div>
       <slot
-        name="localVideo"
         v-if="$slots.localVideo && isMounted"
+        name="localVideo"
         v-bind="{ style: localStreamViewInfo?.region }"
-      ></slot>
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, ComputedRef, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
-import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
-import { getContentSize } from '../../utils/domOperation';
+import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
+import type { ComputedRef } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveSeatState } from '../../states/LiveSeatState';
-import { useLoginState } from '../../states/LoginState';
 import { useLiveState } from '../../states/LiveState';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useLoginState } from '../../states/LoginState';
+import { getContentSize } from '../../utils/domOperation';
+import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
+import type { SeatUserInfo } from '../../types';
 
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
@@ -42,7 +70,7 @@ const isMounted = ref(false);
 
 onMounted(() => {
   isMounted.value = true;
-  startPlayStream({ view: 'stream-content' });
+  startPlayStream({ view: 'atomicx-live-stream-content' });
 });
 
 onBeforeUnmount(() => {
@@ -50,6 +78,16 @@ onBeforeUnmount(() => {
   stopPlayStream();
 });
 
+const isPortraitContainer = ref(true);
+const liveCoreViewContainerRef = ref<HTMLDivElement>();
+const originStreamViewStyle = ref({
+  width: 0,
+  height: 0,
+  transformX: 0,
+  transformY: 0,
+  scale: 1,
+});
+
 const ratioLayoutList = computed(() => {
   const layoutCanvas = canvas.value;
   const layoutList = seatList.value?.map(seat => ({ userId: seat.userInfo?.userId, ...seat.region }));
@@ -66,29 +104,38 @@ const ratioLayoutList = computed(() => {
   }));
 });
 
-const seatListWithRealSize = computed(() => {
-  return seatList.value.map((item, index) => {
-    const ratioLayout = ratioLayoutList.value[index];
+const streamViewSize = computed(() => {
+  if (isPortraitContainer.value) {
     return {
-      userInfo: item.userInfo,
-      region: {
-        position: 'absolute' as const,
-        left: `${streamViewSize.value.width * ratioLayout.x}px`,
-        top: `${streamViewSize.value.width * ratioLayout.y}px`,
-        width: `${streamViewSize.value.width * ratioLayout.width}px`,
-        height:
+      width: originStreamViewStyle.value.width,
+      height: originStreamViewStyle.value.height,
+    };
+  }
+  return {
+    width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
+    height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale,
+  };
+});
+
+const seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
+  const ratioLayout = ratioLayoutList.value[index];
+  return {
+    userInfo: item.userInfo as SeatUserInfo,
+    region: {
+      position: 'absolute' as const,
+      left: `${streamViewSize.value.width * ratioLayout.x}px`,
+      top: `${streamViewSize.value.width * ratioLayout.y}px`,
+      width: `${streamViewSize.value.width * ratioLayout.width}px`,
+      height:
           ratioLayout.height === -1
             ? `${streamViewSize.value.height}px`
             : `${streamViewSize.value.width * ratioLayout.height}px`,
-        zIndex: Number(ratioLayout.zOrder) || 0,
-      },
-    };
-  });
-});
+      zIndex: Number(ratioLayout.zOrder) || 0,
+    },
+  };
+}));
 
-const localStreamViewInfo = computed(() => {
-  return seatListWithRealSize.value.find(item => item?.userInfo?.userId === loginUserInfo.value?.userId);
-});
+const localStreamViewInfo = computed(() => seatListWithRealSize.value.find(item => item?.userInfo?.userId === loginUserInfo.value?.userId));
 
 const needPlayStreamViewInfo = computed(() => {
   if (ignoreLocalVideoPlay.value) {
@@ -97,20 +144,12 @@ const needPlayStreamViewInfo = computed(() => {
   return seatListWithRealSize.value;
 });
 
-// ----- 处理布局 -----
-// 根据 streamView 的父亲元素 A 大小获取一个流布局的容器 B，容器 B 符合 aspectRatio 比例
-// 根据传入的 props.config.layoutList，以流布局容器 B 为画布大小，计算出来所有可视区域 C 的大小和可视区域 C 的中心点坐标
-// 根据可视区域的 C 大小和 A 大小比例，计算出容器 B 的 scale。根据 C 的中心点坐标和 B 的中心点坐标，计算出容器 B 的 transformX、transformY（要保证 C 的中心点在 streamView 父元素 B 的中心点）
-// 根据容器 B 的 scale 和 transformX、transformY，计算出容器 B 的实际宽度、高度、transformX、transformY（这里不使用 scale 是为了不影响子元素中 text, img 的大小）
-// 根据容器 B 的实际大小，计算每一个子元素的实际位置和大小
-const liveStreamViewContainerRef = ref<HTMLDivElement>();
-const originStreamViewStyle = ref({
-  width: 0,
-  height: 0,
-  transformX: 0,
-  transformY: 0,
-  scale: 1,
-});
+// ----- Layout Processing -----
+// Get a stream layout container B based on the size of streamView's parent element A, container B conforms to aspectRatio proportion
+// Based on the passed props.config.layoutList, using stream layout container B as canvas size, calculate the size of all visible areas C and the center coordinates of visible area C
+// Based on the size ratio of visible area C and A, calculate container B's scale. Based on the center coordinates of C and B, calculate container B's transformX and transformY (to ensure C's center point is at the center of streamView's parent element B)
+// Based on container B's scale and transformX, transformY, calculate container B's actual width, height, transformX, transformY (scale is not used here to avoid affecting the size of text and img in child elements)
+// Based on container B's actual size, calculate the actual position and size of each child element
 
 const visualStreamSize = computed(() => {
   if (ratioLayoutList.value.length === 0) {
@@ -121,16 +160,14 @@ const visualStreamSize = computed(() => {
       centerY: 0,
     };
   }
-  const absoluteLayoutList = ratioLayoutList.value.map(item => {
-    return {
-      userId: item.userId,
-      left: originStreamViewStyle.value.width * item.x,
-      top: originStreamViewStyle.value.width * item.y,
-      width: originStreamViewStyle.value.width * item.width,
-      height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
-      zIndex: item.zOrder,
-    };
-  });
+  const absoluteLayoutList = ratioLayoutList.value.map(item => ({
+    userId: item.userId,
+    left: originStreamViewStyle.value.width * item.x,
+    top: originStreamViewStyle.value.width * item.y,
+    width: originStreamViewStyle.value.width * item.width,
+    height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
+    zIndex: item.zOrder,
+  }));
   const minX = Math.min(...absoluteLayoutList.map(item => item.left));
   const minY = Math.min(...absoluteLayoutList.map(item => item.top));
   const maxX = Math.max(...absoluteLayoutList.map(item => item.left + item.width));
@@ -148,10 +185,10 @@ watch(visualStreamSize, () => {
 });
 
 function handleStreamListTransform() {
-  if (!liveStreamViewContainerRef.value) {
+  if (!liveCoreViewContainerRef.value) {
     return;
   }
-  const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+  const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
   const containerWidth = Math.floor(containerRect.width);
   const containerHeight = Math.floor(containerRect.height);
 
@@ -170,19 +207,6 @@ function handleStreamListTransform() {
   }
 }
 
-const streamViewSize = computed(() => {
-  if (isPortraitContainer.value) {
-    return {
-      width: originStreamViewStyle.value.width,
-      height: originStreamViewStyle.value.height,
-    };
-  }
-  return {
-    width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
-    height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale,
-  };
-});
-
 const streamViewStyle = computed(() => {
   if (isPortraitContainer.value) {
     return {
@@ -223,11 +247,11 @@ const heightRatio: ComputedRef<number> = computed(() => {
 });
 
 function handleStreamRegionSize() {
-  if (!liveStreamViewContainerRef.value) {
+  if (!liveCoreViewContainerRef.value) {
     return;
   }
-  const containerWidth = getContentSize(liveStreamViewContainerRef.value).width;
-  const containerHeight = getContentSize(liveStreamViewContainerRef.value).height;
+  const containerWidth = getContentSize(liveCoreViewContainerRef.value).width;
+  const containerHeight = getContentSize(liveCoreViewContainerRef.value).height;
   let width = containerWidth;
   let height = containerHeight;
   if (widthRatio.value && heightRatio.value) {
@@ -250,16 +274,14 @@ watch(
   () => aspectRatio.value,
   () => {
     handleStreamRegionSize();
-  }
+  },
 );
 
-const isPortraitContainer = ref(true);
-
 const getContainerOrientation = () => {
-  if (!liveStreamViewContainerRef.value) {
+  if (!liveCoreViewContainerRef.value) {
     return;
   }
-  const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+  const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
   isPortraitContainer.value = containerRect.width < containerRect.height;
 };
 
@@ -270,17 +292,17 @@ const ro = new ResizeObserver(() => {
 });
 
 onMounted(() => {
-  ro.observe(liveStreamViewContainerRef.value as Element);
+  ro.observe(liveCoreViewContainerRef.value as Element);
   getContainerOrientation();
 });
 
 onBeforeUnmount(() => {
-  ro.unobserve(liveStreamViewContainerRef.value as Element);
+  ro.unobserve(liveCoreViewContainerRef.value as Element);
 });
 </script>
 
 <style scoped lang="scss">
-.live-stream-view-container {
+.live-core-view-container {
   width: 100%;
   height: 100%;
   display: flex;
@@ -288,12 +310,12 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
 
-  .live-stream-view {
+  .live-core-view {
     width: 100%;
     height: 100%;
     position: relative;
 
-    .live-stream-placeholder {
+    .live-core-placeholder {
       position: absolute;
       top: 0;
       left: 0;
@@ -319,7 +341,7 @@ onBeforeUnmount(() => {
       left: 0;
     }
 
-    .live-stream-ui {
+    .live-core-ui {
       width: 100%;
       height: 100%;
       position: absolute;

package/src/components/LiveList/LiveList.vue

@@ -1,12 +1,28 @@
 <template>
-  <div class="live-list-panel" v-if="loginUserInfo">
-    <div v-if="liveList.length > 0" class="live-list" @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
+    v-if="loginUserInfo"
+    class="live-list-panel"
+  >
+    <div
+      v-if="liveList.length > 0"
+      ref="scrollContainerRef"
+      class="live-list"
+      @wheel="handleWheel"
+    >
+      <div
+        ref="liveListItemsRef"
+        class="live-list-items"
+      >
+        <div
+          v-for="item in liveList"
+          :key="item.liveId"
+          class="live-item"
+          @click="liveRoomClick(item)"
+        >
           <div class="live-room-cover">
             <div class="header">
               <div class="left">
-                <IconLiveCoverHeader :size="10"/>
+                <IconLiveCoverHeader :size="10" />
                 <span> {{ t('LIVE') }} </span>
               </div>
               <div class="right">
@@ -14,67 +30,113 @@
                 <span> {{ t('people have watched the live') }} </span>
               </div>
             </div>
-            <img :src="item.coverUrl || DEFAULT_COVER" alt="" @error="handleCoverImageError" />
+            <img
+              :src="item.coverUrl || DEFAULT_COVER"
+              alt=""
+              @error="handleCoverImageError"
+            >
           </div>
           <span class="live-name">{{ item.liveName }} </span>
           <div class="owner-info">
-            <Avatar :src="item.liveOwner.avatarUrl" :size="24" />
+            <Avatar
+              :src="item.liveOwner.avatarUrl"
+              :size="24"
+              :style="{ border: '1px solid var(--uikit-color-white-7)' }"
+            />
             <span class="owner-name">{{ item.liveOwner.userName || item.liveOwner.userId }} </span>
           </div>
         </div>
       </div>
-      <div class="bottom-text-no-more" v-if="!hasMoreLive">
+      <div
+        v-if="!hasMoreLive"
+        class="bottom-text-no-more"
+      >
         <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>
-    <div class="bottom-text" v-if="liveList.length > 0 && (isShowMoreVisible || isLoadingMore)">
-      <span class="load-more-lives" v-if="isShowMoreVisible">{{ t('Load More') }}</span>
-      <span class="loading" v-if="isLoadingMore">{{ t('Loading...') }}</span>
+    <div
+      v-if="liveList.length > 0 && (isShowMoreVisible || isLoadingMore)"
+      class="bottom-text"
+    >
+      <span
+        v-if="isShowMoreVisible"
+        class="load-more-lives"
+      >{{ t('Load More') }}</span>
+      <span
+        v-if="isLoadingMore"
+        class="loading"
+      >{{ t('Loading...') }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed, defineEmits } from 'vue';
+import { ref, computed, defineEmits, watch } from 'vue';
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveState } from '../../states/LiveState';
-import { LiveInfo } from '../../types';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
+import type { LiveInfo } from '../../types';
 
-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 liveListItemsRef = ref<HTMLElement | null>(null);
 
-const shouldFetchMoreLiveList = computed(() => {
-  return hasMoreLive.value && !isLoadingMore.value && !isLoadingLiveList.value;
-});
+const isLoadingMore = ref(false);
+const hasMoreLive = computed(() => currentCursor.value !== '');
 
-const isShowMoreVisible = computed(() => {
-  return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
-});
+const liveItemWidth = ref('356px');
+const liveItemHeight = ref('270px');
+const coverWidth = ref('356px');
+const coverHeight = ref('210px');
+const columnCount = 5;
 
-const emit = defineEmits<{
-  (e: 'live-room-click', liveInfo: LiveInfo): void;
-}>();
+const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
+
+const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
 
 watch(
   loginUserInfo,
-  user => {
+  async (user) => {
     if (user && user.userId) {
-      fetchLiveList({});
+      isLoadingMore.value = true;
+      await fetchLiveList({});
+      isLoadingMore.value = false;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
+watch(liveListItemsRef, () => {
+  if (liveListItemsRef.value && screen.width > screen.height) {
+    const { width } = liveListItemsRef.value.getBoundingClientRect();
+    const gapWidth = 20 * (columnCount - 1);
+    const newItemWidth = (width - gapWidth) / columnCount;
+    const newItemHeight = newItemWidth * 0.75;
+
+    liveItemWidth.value = `${newItemWidth}px`;
+    liveItemHeight.value = `${newItemHeight}px`;
+
+    coverWidth.value = `${newItemWidth}px`;
+    coverHeight.value = `${newItemHeight - 52}px`;
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'live-room-click', liveInfo: LiveInfo): void;
+}>();
+
 function liveRoomClick(liveInfo: LiveInfo) {
   console.log('liveRoomClick,liveInfo:', liveInfo);
   emit('live-room-click', liveInfo);
@@ -85,8 +147,8 @@ function isScrollAtBottom(threshold = 50) {
     return false;
   }
   return (
-    scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >=
-    scrollContainerRef.value.scrollHeight - threshold
+    scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight
+    >= scrollContainerRef.value.scrollHeight - threshold
   );
 }
 
@@ -96,7 +158,19 @@ function handleWheel(event: WheelEvent) {
   }
 
   if (event.deltaY > 0 && 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;
   }
 }
 
@@ -106,12 +180,12 @@ function handleCoverImageError(event: Event) {
     image.src = DEFAULT_COVER;
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
 $text-color1: var(--text-color-primary);
 $text-color2: var(--text-color-secondary);
+$text-color3: var(--text-color-tertiary);
 
 @mixin text-size-12 {
   font-size: 12px;
@@ -150,7 +224,8 @@ $text-color2: var(--text-color-secondary);
   flex-direction: column;
   overflow: hidden;
   align-items: center;
-  width: 100%;
+  margin: 0px 16px;
+  width: calc(100% - 32px);
   height: 100%;
 }
 
@@ -167,7 +242,7 @@ $text-color2: var(--text-color-secondary);
 .live-list-items {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 356px);
+  grid-template-columns: repeat(auto-fill, v-bind(liveItemWidth));
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
@@ -177,8 +252,8 @@ $text-color2: var(--text-color-secondary);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  width: 356px;
-  height: 270px;
+  width: v-bind(liveItemWidth);
+  height: v-bind(liveItemHeight);
   white-space: nowrap;
   text-overflow: ellipsis;
   gap: 5px;
@@ -190,8 +265,8 @@ $text-color2: var(--text-color-secondary);
 
   .live-room-cover {
     position: relative;
-    width: 356px;
-    height: 210px;
+    width: v-bind(coverWidth);
+    height: v-bind(coverHeight);
     overflow: hidden;
 
     img {
@@ -230,11 +305,12 @@ $text-color2: var(--text-color-secondary);
 
   .live-name {
     margin: 5px 0px;
+    height: 18px;
     max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
     color: $text-color1;
-    @include text-size-12;
+    @include text-size-14;
   }
 
   .owner-info {
@@ -243,19 +319,13 @@ $text-color2: var(--text-color-secondary);
     align-items: center;
     gap: 10px;
     color: $text-color2;
-    @include text-size-12;
+    @include text-size-14;
 
     .owner-name {
       max-width: 200px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
-    img {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-    }
   }
 }
 
@@ -270,7 +340,7 @@ $text-color2: var(--text-color-secondary);
     bottom: 5px;
     text-align: center;
     transform: translate(-50%, 0);
-    color: $text-color1;
+    color: $text-color3;
     @include text-size-14;
   }
 }