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

package/src/components/LiveCoreView/index.vue

@@ -2,17 +2,18 @@
   <div
     ref="liveCoreViewContainerRef"
     class="live-core-view-container"
+    :class="{ 'align-center': isAlignCenter }"
   >
+    <div
+      v-if="!$slots.localVideo && !isPlayedVideo"
+      class="live-core-placeholder"
+    >
+      <span class="placeholder-text">{{ t('No video') }}</span>
+    </div>
     <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="atomicx-live-stream-content"
         class="stream-content"
@@ -55,7 +56,7 @@ import { useLiveState } from '../../states/LiveState';
 import { useLoginState } from '../../states/LoginState';
 import { getContentSize } from '../../utils/domOperation';
 import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
-import type { SeatUserInfo } from '../../types';
+import type { SeatInfo, SeatUserInfo } from '../../types';
 
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
@@ -63,23 +64,37 @@ const { currentLive } = useLiveState();
 
 const slots = useSlots();
 
-const ignoreLocalVideoPlay = computed(() => slots.localVideo);
+const isInStreamMixerComp = computed(() => slots.localVideo);
 
 const { loginUserInfo } = useLoginState();
+const isPlayedVideo = ref(false);
 const isMounted = ref(false);
+const isAlignCenter = computed(() => {
+  if (!isInStreamMixerComp.value && isPortraitContainer.value && widthRatio.value < heightRatio.value) {
+    return false;
+  }
+  return true;
+});
 
-onMounted(() => {
+onMounted(async () => {
   isMounted.value = true;
-  startPlayStream({ view: 'atomicx-live-stream-content' });
+  await startPlayStream({ view: 'atomicx-live-stream-content' });
+  isPlayedVideo.value = true;
 });
 
-onBeforeUnmount(() => {
+onBeforeUnmount(async () => {
   isMounted.value = false;
-  stopPlayStream();
+  await stopPlayStream();
+  isPlayedVideo.value = false;
 });
 
 const isPortraitContainer = ref(true);
 const liveCoreViewContainerRef = ref<HTMLDivElement>();
+
+const liveCoreViewContainerSize = ref<{ width: number; height: number }>({
+  width: 0,
+  height: 0,
+});
 const originStreamViewStyle = ref({
   width: 0,
   height: 0,
@@ -105,20 +120,30 @@ const ratioLayoutList = computed(() => {
 });
 
 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 seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
+const seatListWithRealSize = computed(() => seatList.value.map((item: SeatInfo, index: number) => {
   const ratioLayout = ratioLayoutList.value[index];
+  const isPortraitAndFill = isPortraitContainer.value && fillMode.value === StreamFillMode.Fill;
+  const isSampleWithCanvas = seatList.value.length === 1 || (item.region?.w === canvas.value.width && item.region?.h === canvas.value.height);
+  if (!isInStreamMixerComp.value && isPortraitAndFill && isSampleWithCanvas) {
+    return {
+      userInfo: item.userInfo as SeatUserInfo,
+      region: {
+        position: 'absolute' as const,
+        left: '50%',
+        top: '50%',
+        width: `${liveCoreViewContainerSize.value.width}px`,
+        height: `${liveCoreViewContainerSize.value.height}px`,
+        transform: `translate(-50%, -50%)`,
+        zIndex: Number(ratioLayout.zOrder) || 0,
+      },
+    }
+  }
   return {
     userInfo: item.userInfo as SeatUserInfo,
     region: {
@@ -138,7 +163,7 @@ const seatListWithRealSize = computed(() => seatList.value.map((item, index) =>
 const localStreamViewInfo = computed(() => seatListWithRealSize.value.find(item => item?.userInfo?.userId === loginUserInfo.value?.userId));
 
 const needPlayStreamViewInfo = computed(() => {
-  if (ignoreLocalVideoPlay.value) {
+  if (isInStreamMixerComp.value) {
     return seatListWithRealSize.value.filter(item => item.userInfo?.userId !== loginUserInfo.value?.userId);
   }
   return seatListWithRealSize.value;
@@ -152,31 +177,31 @@ const needPlayStreamViewInfo = computed(() => {
 // 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) {
+  if (!isPortraitContainer.value && widthRatio.value < heightRatio.value && ratioLayoutList.value.length > 0) {
+    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));
+    const maxY = Math.max(...absoluteLayoutList.map(item => item.top + item.height));
     return {
-      width: 0,
-      height: 0,
-      centerX: 0,
-      centerY: 0,
+      width: maxX - minX,
+      height: maxY - minY,
+      centerX: (minX + maxX) / 2,
+      centerY: (minY + maxY) / 2,
     };
   }
-  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));
-  const maxY = Math.max(...absoluteLayoutList.map(item => item.top + item.height));
   return {
-    width: maxX - minX,
-    height: maxY - minY,
-    centerX: (minX + maxX) / 2,
-    centerY: (minY + maxY) / 2,
+    width: 0,
+    height: 0,
+    centerX: 0,
+    centerY: 0,
   };
 });
 
@@ -188,11 +213,12 @@ function handleStreamListTransform() {
   if (!liveCoreViewContainerRef.value) {
     return;
   }
-  const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
-  const containerWidth = Math.floor(containerRect.width);
-  const containerHeight = Math.floor(containerRect.height);
 
   if (visualStreamSize.value.width && visualStreamSize.value.height) {
+    const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
+    const containerWidth = Math.floor(containerRect.width);
+    const containerHeight = Math.floor(containerRect.height);
+
     const scaleWidth = containerWidth / visualStreamSize.value.width;
     const scaleHeight = containerHeight / visualStreamSize.value.height;
     originStreamViewStyle.value.scale = Math.min(scaleWidth, scaleHeight);
@@ -208,12 +234,6 @@ function handleStreamListTransform() {
 }
 
 const streamViewStyle = computed(() => {
-  if (isPortraitContainer.value) {
-    return {
-      width: `${Math.floor(originStreamViewStyle.value.width)}px`,
-      height: `${Math.floor(originStreamViewStyle.value.height)}px`,
-    };
-  }
   return {
     width: `${Math.floor(originStreamViewStyle.value.width) * originStreamViewStyle.value.scale}px`,
     height: `${Math.floor(originStreamViewStyle.value.height) * originStreamViewStyle.value.scale}px`,
@@ -246,6 +266,35 @@ const heightRatio: ComputedRef<number> = computed(() => {
   return Number(aspectRatio.value.split(':')[1]);
 });
 
+/**
+ * fillMode rules:
+ * Rule 1: If there is only one user in seatList, fillMode is Fill
+ * Rule 2: If a user's region in seatList matches the canvas size, fillMode is Fill
+ * Rule 3: If in landscape mode, fillMode must be Fit
+ */
+enum StreamFillMode {
+  Fit = 'fit',
+  Fill = 'fill',
+}
+
+const fillMode = ref<StreamFillMode>(StreamFillMode.Fit);
+
+watch(() => [canvas.value, seatList.value], () => {
+  if (canvas.value.width > canvas.value.height) {
+    fillMode.value = StreamFillMode.Fit;
+    handleStreamRegionSize();
+    return;
+  }
+  const onlyOneSeat = seatList.value.length === 1;
+  const hasOneFullScreenUser = seatList.value.find((item: any) => item.region?.w === canvas.value.width && item.region?.h === canvas.value.height);
+  if (!isInStreamMixerComp.value && (onlyOneSeat || hasOneFullScreenUser)) {
+    fillMode.value = StreamFillMode.Fill;
+  } else {
+    fillMode.value = StreamFillMode.Fit;
+  }
+  handleStreamRegionSize();
+});
+
 function handleStreamRegionSize() {
   if (!liveCoreViewContainerRef.value) {
     return;
@@ -257,13 +306,25 @@ function handleStreamRegionSize() {
   if (widthRatio.value && heightRatio.value) {
     const scaleWidth = containerWidth / widthRatio.value;
     const scaleHeight = containerHeight / heightRatio.value;
-    if (scaleWidth > scaleHeight) {
-      width = (containerHeight / heightRatio.value) * widthRatio.value;
-      height = containerHeight;
-    }
-    if (scaleWidth <= scaleHeight) {
-      width = containerWidth;
-      height = (containerWidth / widthRatio.value) * heightRatio.value;
+
+    if (fillMode.value === StreamFillMode.Fit) {
+      if (scaleWidth > scaleHeight) {
+        width = (containerHeight / heightRatio.value) * widthRatio.value;
+        height = containerHeight;
+      }
+      if (scaleWidth <= scaleHeight) {
+        width = containerWidth;
+        height = (containerWidth / widthRatio.value) * heightRatio.value;
+      }
+    } else {
+      if (scaleWidth > scaleHeight) {
+        width = containerWidth;
+        height = (containerWidth / widthRatio.value) * heightRatio.value;
+      }
+      if (scaleWidth <= scaleHeight) {
+        width = (containerHeight / heightRatio.value) * widthRatio.value;
+        height = containerHeight;
+      }
     }
   }
   originStreamViewStyle.value.width = width;
@@ -283,6 +344,10 @@ const getContainerOrientation = () => {
   }
   const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
   isPortraitContainer.value = containerRect.width < containerRect.height;
+  liveCoreViewContainerSize.value = {
+    width: containerRect.width,
+    height: containerRect.height,
+  };
 };
 
 const ro = new ResizeObserver(() => {
@@ -306,32 +371,33 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   display: flex;
-  overflow: hidden;
-  align-items: center;
   justify-content: center;
+  overflow: hidden;
+  &.align-center {
+    align-items: center;
+  }
+  .live-core-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .placeholder-text {
+      color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
 
   .live-core-view {
     width: 100%;
     height: 100%;
-    position: relative;
-
-    .live-core-placeholder {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .placeholder-text {
-        color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 22px;
-      }
-    }
+    position: absolute;
 
     .stream-content {
       width: 100%;
@@ -345,7 +411,7 @@ onBeforeUnmount(() => {
       width: 100%;
       height: 100%;
       position: absolute;
-      pointer-events: none;
+      pointer-events: auto;
       top: 0;
       left: 0;
     }

package/src/components/LiveList/LiveList.vue

@@ -111,6 +111,8 @@ watch(
   async (user) => {
     if (user && user.userId) {
       isLoadingMore.value = true;
+      currentCursor.value = '';
+      liveList.value.length = 0;
       await fetchLiveList({});
       isLoadingMore.value = false;
     }
@@ -296,6 +298,7 @@ $text-color3: var(--text-color-tertiary);
 
       .right {
         display: flex;
+        align-items: center;
         float: right;
         margin-right: 10px;
         gap: 2px;

package/src/components/LiveList/LiveListH5.vue

@@ -1,64 +1,52 @@
 <template>
-  <div
-    v-if="loginUserInfo"
-    class="live-list-panel-h5"
-  >
+  <div v-if="loginUserInfo" class="live-list-panel-h5">
     <div
-      v-if="liveList.length > 0"
+      v-if="showLiveList.length > 0"
       ref="scrollContainerRef"
       class="live-list"
-      @scroll="handleScroll"
-      @wheel="handleWheel"
     >
-      <div 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">
-              <IconLiveCoverHeader :size="10" />
-              <span class="viewer-count"> {{ item.currentViewerCount || 0 }} </span>
-              <span> {{ t('people have watched the live') }} </span>
+      <PullToRefresh
+        :text="{
+          pull: t('Pull to refresh'),
+          release: t('Release to refresh'),
+          loading: t('Loading'),
+          success: t('Refresh success'),
+          error: t('Refresh failed'),
+        }"
+        @refresh="handleRefresh"
+        @load-more="fetchMoreLives"
+      >
+        <div class="live-list-items">
+          <div v-for="item in showLiveList" :key="item.liveId" class="live-item" @click="liveRoomClick(item)">
+            <div class="live-room-cover">
+              <div class="header">
+                <IconLiveCoverHeader :size="10" />
+                <span class="viewer-count"> {{ item.currentViewerCount || 0 }} </span>
+                <span> {{ t('people have watched the live') }} </span>
+              </div>
+              <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="16"
+                :style="{ border: '1px solid var(--uikit-color-white-7)' }"
+              />
+              <span class="owner-name">{{ item.liveOwner.userName || item.liveOwner.userId }} </span>
             </div>
-            <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="16"
-              :style="{ border: '1px solid var(--uikit-color-white-7)' }"
-            />
-            <span class="owner-name">{{ item.liveOwner.userName || item.liveOwner.userId }} </span>
           </div>
         </div>
-      </div>
-      <div
-        v-if="!hasMoreLive"
-        class="bottom-text-no-more"
-      >
-        <span>{{ t('No More') }}</span>
-      </div>
+        <div v-if="!hasMoreLive" class="bottom-text-no-more">
+          <span>{{ t('No More') }}</span>
+        </div>
+      </PullToRefresh>
     </div>
-    <div
-      v-else-if="!isLoadingMore"
-      class="no-live"
-    >
+    <div v-else-if="!isLoadingMore" class="no-live">
       <IconNoLiveRoom :size="60" />
       <span>{{ t('No Live') }}</span>
     </div>
-    <div
-      v-if="liveList.length > 0 && (isShowMoreVisible || isLoadingMore)"
-      class="bottom-text"
-    >
-      <span v-if="isShowMoreVisible">{{ t('Load More') }}</span>
+    <div v-if="liveList.length > 0 && isLoadingMore" class="bottom-text">
       <span v-if="isLoadingMore">{{ t('Loading...') }}</span>
     </div>
   </div>
@@ -71,10 +59,12 @@ import { useLiveState } from '../../states/LiveState';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
 import type { LiveInfo } from '../../types';
+import PullToRefresh from './pullToRefresh.vue';
 
 const { liveList, currentCursor, fetchLiveList } = useLiveState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
+const showLiveList = ref<LiveInfo[]>([]);
 
 const DEFAULT_COVER = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
 const scrollContainerRef = ref<HTMLElement | null>(null);
@@ -85,24 +75,23 @@ const hasMoreLive = computed(() => currentCursor.value !== '');
 const liveItemWidth = ref('168px');
 const liveItemHeight = ref('262px');
 
-const shouldFetchMoreLiveList = computed(() => hasMoreLive.value && !isLoadingMore.value);
-
-const isShowMoreVisible = computed(() => shouldFetchMoreLiveList.value && !scrollContainerRef.value);
-
 const emit = defineEmits<{
   (e: 'live-room-click', liveInfo: LiveInfo): void;
 }>();
 
 watch(
   loginUserInfo,
-  async (user) => {
+  async user => {
     if (user && user.userId) {
       isLoadingMore.value = true;
+      currentCursor.value = '';
+      liveList.value.length = 0;
       await fetchLiveList({});
+      showLiveList.value = liveList.value.slice();
       isLoadingMore.value = false;
     }
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 watch(scrollContainerRef, () => {
@@ -117,39 +106,23 @@ watch(scrollContainerRef, () => {
   }
 });
 
-function liveRoomClick(liveInfo: LiveInfo) {
-  console.log('liveRoomClick,liveInfo:', liveInfo);
-  emit('live-room-click', liveInfo);
-}
-
-function isScrollAtBottom(threshold = 50) {
-  if (!scrollContainerRef.value) {
-    return false;
-  }
-  return (
-    scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight
-    >= scrollContainerRef.value.scrollHeight - threshold
-  );
-}
-
-function handleWheel(event: WheelEvent) {
-  if (!scrollContainerRef.value) {
-    return;
-  }
-
-  if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchMoreLives();
+async function handleRefresh(completeRefresh: (success?: boolean) => void) {
+  try {
+    isLoadingMore.value = true;
+    currentCursor.value = '';
+    liveList.value.length = 0;
+    await fetchLiveList({});
+    showLiveList.value = liveList.value.slice();
+    isLoadingMore.value = false;
+    completeRefresh(true);
+  } catch (error) {
+    completeRefresh(false);
   }
 }
 
-function handleScroll() {
-  if (!scrollContainerRef.value) {
-    return;
-  }
-
-  if (isScrollAtBottom() && shouldFetchMoreLiveList.value) {
-    fetchMoreLives();
-  }
+function liveRoomClick(liveInfo: LiveInfo) {
+  console.log('liveRoomClick,liveInfo:', liveInfo);
+  emit('live-room-click', liveInfo);
 }
 
 async function fetchMoreLives() {
@@ -159,6 +132,7 @@ async function fetchMoreLives() {
   try {
     isLoadingMore.value = true;
     await fetchLiveList({ cursor: currentCursor.value });
+    showLiveList.value = liveList.value.slice();
   } finally {
     isLoadingMore.value = false;
   }
@@ -329,6 +303,7 @@ $text-color3: var(--text-color-tertiary);
 .bottom-text-no-more {
   flex: 1;
   min-height: 30px;
+  text-align: center;
   position: relative;
 
   span {

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

@@ -3,6 +3,11 @@ export const resource = {
   'people have watched the live': 'people have watched the live',
   'Load More': 'Load More',
   'Loading...': 'Loading...',
+  'Loading': 'Loading',
   'No More': 'No More',
   'No Live': 'No Live',
+  'Pull down to refresh': 'Pull down to refresh',
+  'Release to refresh': 'Release to refresh',
+  'Refresh success': 'Refresh success',
+  'Refresh failed': 'Refresh failed',
 };

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

@@ -3,6 +3,11 @@ export const resource = {
   'people have watched the live': '人看过',
   'Load More': '加载更多',
   'Loading...': '加载中...',
+  'Loading': '正在加载...',
   'No More': '没有更多',
   'No Live': '暂无直播间',
+  'Pull to refresh': '下拉刷新',
+  'Release to refresh': '松开刷新',
+  'Refresh success': '刷新成功',
+  'Refresh failed': '刷新失败',
 };