@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/src/TUIRoom/components/RoomContent/StreamContainer/index.vue

@@ -1,33 +1,27 @@
 <template>
   <div id="streamContainer" :class="streamContainerClass">
-    <div v-show="showIconControl" ref="enlargedContainerRef" class="enlarged-stream-container">
-      <stream-region
+    <div
+      v-show="enlargeStream"
+      ref="enlargedContainerRef"
+      class="enlarged-stream-container"
+    >
+      <StreamRegion
         v-if="enlargeStream"
-        :key="`${enlargeStream.userId}_${enlargeStream.streamType}`"
-        :stream="enlargeStream"
-        :style="enlargedStreamStyle"
-      ></stream-region>
-    </div>
-    <div :class="['stream-list-container', `${showSideList ? '' : 'hide-list'}`]">
-      <div
-        ref="streamListRef"
-        :style="streamListStyle"
-        class="stream-list"
-        @scroll="handleStreamContainerScrollDebounce"
-        @wheel="handleWheel"
-      >
-        <stream-region
-          v-for="(stream) in streamList"
-          v-show="showStreamList.indexOf(stream) > -1"
-          :key="`${stream.userId}_${stream.streamType}`"
-          :stream="stream"
-          :enlarge-dom-id="enlargeDomId"
-          class="single-stream"
-          :style="streamStyle"
-          @room-dblclick="handleEnlargeStreamRegion(stream)"
-        ></stream-region>
-      </div>
+        :streamInfo="enlargeStream"
+        aspectRatio="16:9"
+        :isEnlarge="true"
+        :observerViewInVisible="true"
+      />
     </div>
+    <StreamList
+      :class="['stream-list-container', `${showSideList ? '' : 'hide-list'}`]"
+      :streamInfoList="showStreamList"
+      :horizontalCount="horizontalCount"
+      :verticalCount="verticalCount"
+      aspectRatio="16:9"
+      :observerViewInVisible="true"
+      @room-dblclick="handleEnlargeStreamRegion"
+    />
     <!-- Sidebar and upper sidebar arrows -->
     <arrow-stroke
       v-if="showIconControl && (showRoomTool || showSideList)"
@@ -36,7 +30,7 @@
       :arrow-direction="arrowDirection"
       :has-stroke="showSideList"
       @click-arrow="handleClickIcon"
-    ></arrow-stroke>
+    />
     <!-- Nine-pane left and right page flip control bar -->
     <div v-if="showTurnPageControl && showRoomTool" class="turn-page-container">
       <div
@@ -44,62 +38,48 @@
         class="turn-page-arrow-container left-container"
         @click="handleTurnPageLeft"
       >
-        <svg-icon :icon="ArrowStrokeTurnPageIcon"></svg-icon>
+        <svg-icon :icon="ArrowStrokeTurnPageIcon" />
       </div>
       <div
         v-show="showTurnPageRightArrow"
         class="turn-page-arrow-container right-container"
         @click="handleTurnPageRight"
       >
-        <svg-icon class="turn-page-right" :icon="ArrowStrokeTurnPageIcon"></svg-icon>
+        <svg-icon class="turn-page-right" :icon="ArrowStrokeTurnPageIcon" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, Ref, ComputedRef, watch, nextTick, computed } from 'vue';
+import { ref, onUnmounted, Ref, watch, computed, defineProps } from 'vue';
 import { storeToRefs } from 'pinia';
 import { StreamInfo, useRoomStore } from '../../../stores/room';
 import { useBasicStore } from '../../../stores/basic';
 import { LAYOUT } from '../../../constants/render';
 import StreamRegion from '../StreamRegion/index.vue';
-import TUIMessage from '../../common/base/Message/index';
-import TUIMessageBox from '../../common/base/MessageBox/index';
-import { MESSAGE_DURATION } from '../../../constants/message';
-import { debounce } from '../../../utils/utils';
+import StreamList from '../StreamList/index.vue';
 import logger from '../../../utils/common/logger';
+import ArrowStrokeTurnPageIcon from '../../common/icons/ArrowStrokeTurnPageIcon.vue';
 import ArrowStroke from '../../common/ArrowStroke.vue';
 import SvgIcon from '../../common/base/SvgIcon.vue';
-import ArrowStrokeTurnPageIcon from '../../common/icons/ArrowStrokeTurnPageIcon.vue';
 
-import TUIRoomEngine, { TUIUserInfo, TUIChangeReason, TUIRoomEvents,  TUIVideoStreamType, TUISeatInfo } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TUIUserInfo,
+  TUIChangeReason,
+  TUIRoomEvents,
+  TUIVideoStreamType,
+  TUISeatInfo,
+} from '@tencentcloud/tuiroom-engine-electron';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
-import useStreamContainer from './useStreamContainerHooks';
-import { EventType, roomService } from '../../../services';
 
 const logPrefix = '[StreamContainer]';
-const {
-  onRemoteUserEnterRoom,
-  onUserAudioStateChanged,
-  t,
-} = useStreamContainer();
 const roomEngine = useGetRoomEngine();
 
-// The size of the vertical padding of the stream container
-const verticalPadding = 50;
-// The size of the horizontal padding of the stream container
-const horizontalPadding = 40;
-// Single video stream window margin size
-const singleStreamMargin = 8;
-
 defineProps<{
-  showRoomTool: boolean,
+  showRoomTool: boolean;
 }>();
 
-const streamListStyle: Ref<Record<string, any>> = ref({ width: '0' });
-const streamStyle: Ref<Record<string, any>> = ref({ width: '0', height: '0' });
-const enlargedStreamStyle: Ref<Record<string, any>> = ref({ width: '0', height: '0' });
 const roomStore = useRoomStore();
 const { streamList, streamNumber, remoteStreamList } = storeToRefs(roomStore);
 const basicStore = useBasicStore();
@@ -107,94 +87,81 @@ const { layout } = storeToRefs(basicStore);
 const showSideList = ref(true);
 
 const enlargeStream: Ref<StreamInfo | null> = ref(null);
-const enlargeDomId = computed(() => (enlargeStream.value ? `${enlargeStream.value.userId}_${enlargeStream.value.streamType}` : ''));
-
-watch(() => remoteStreamList.value.length, (val) => {
-  // When there is no remote stream, change the stream layout to a nine-square grid
-  if (val === 0) {
-    basicStore.setLayout(LAYOUT.NINE_EQUAL_POINTS);
-    enlargeStream.value = null;
-    return;
-  }
-});
-
-watch(() => streamList.value.length, () => {
-  if (layout.value === LAYOUT.RIGHT_SIDE_LIST || layout.value === LAYOUT.TOP_SIDE_LIST) {
-    handleStreamContainerScroll();
-  }
-});
-
-watch(() => enlargeDomId.value, () => {
-  if (layout.value === LAYOUT.RIGHT_SIDE_LIST || layout.value === LAYOUT.TOP_SIDE_LIST) {
-    handleStreamContainerScroll();
-  }
-});
-
-/**
- * ----- The following handles the nine-pane page flip logic -----
-**/
+const horizontalCount = ref(1);
+const verticalCount = ref(1);
 const currentPageIndex = ref(0);
-const showStreamList: ComputedRef<StreamInfo[]> = computed(() => {
-  if (layout.value !== LAYOUT.NINE_EQUAL_POINTS) {
-    return streamList.value.filter(item => `${item.userId}_${item.streamType}` !== enlargeDomId.value);
-  }
-  return streamList.value.slice(currentPageIndex.value * 9, currentPageIndex.value * 9 + 9);
-});
-
-// When the user in the display page changes or the current page changes, recalculate the users in the visible area
-watch([() => showStreamList.value.map(item => item.userId), currentPageIndex], () => {
-  if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
-    const streamIdList: string[] = [];
-    showStreamList.value.forEach((item) => {
-      const currentStreamId = `${item.userId}_${item.streamType}`;
-      streamIdList.push(currentStreamId);
-    });
-    roomStore.updateUserStreamVisible(streamIdList);
-  }
-});
-
-watch(streamNumber, (val) => {
-  if (layout.value === LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value > Math.ceil(val / 9) - 1) {
-    currentPageIndex.value = Math.ceil(val / 9) - 1;
-    handleNineEqualPointsLayout();
-  }
-});
+const maxCountEveryPage = computed(
+  () => horizontalCount.value * verticalCount.value
+);
+const totalPage = computed(() =>
+  Math.ceil(streamList.value.length / maxCountEveryPage.value)
+);
 
 /**
  * Show left and right page flip icons
-**/
-const showTurnPageControl = computed(() => layout.value === LAYOUT.NINE_EQUAL_POINTS && streamNumber.value > 9);
+ **/
+const showTurnPageControl = computed(
+  () => layout.value === LAYOUT.NINE_EQUAL_POINTS && totalPage.value > 1
+);
 /**
  * Whether or not to show the nine-page-to-left button
-**/
-const showTurnPageLeftArrow = computed(() => currentPageIndex.value > 0);
+ **/
+const showTurnPageLeftArrow = computed(
+  () => layout.value === LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value > 0
+);
 /**
  * Whether or not to display the nine-pane rightward-facing page button
-**/
-const showTurnPageRightArrow = computed(() => streamNumber.value > currentPageIndex.value * 9 + 9);
+ **/
+const showTurnPageRightArrow = computed(
+  () =>
+    layout.value === LAYOUT.NINE_EQUAL_POINTS &&
+    currentPageIndex.value < totalPage.value - 1
+);
 
 /**
  * Nine grid layout towards the left to turn the page
-**/
+ **/
 function handleTurnPageLeft() {
   currentPageIndex.value = currentPageIndex.value - 1;
-  handleNineEqualPointsLayout();
 }
 
 /**
  * Nine grid layout towards the right to turn the page
-**/
+ **/
 function handleTurnPageRight() {
   currentPageIndex.value = currentPageIndex.value + 1;
-  handleNineEqualPointsLayout();
 }
 
+const showStreamList = computed(() => {
+  if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
+    return streamList.value.slice(
+      currentPageIndex.value * maxCountEveryPage.value,
+      (currentPageIndex.value + 1) * maxCountEveryPage.value
+    );
+  }
+  if (enlargeStream.value?.streamType === TUIVideoStreamType.kScreenStream) {
+    return streamList.value.filter(item => item !== enlargeStream.value);
+  }
+  return streamList.value;
+});
+
+watch(
+  () => streamList.value.length,
+  val => {
+    // When there is only one stream, switch to a nine-grid layout
+    if (val === 1) {
+      basicStore.setLayout(LAYOUT.NINE_EQUAL_POINTS);
+      enlargeStream.value = null;
+      return;
+    }
+  }
+);
+
 /**
  * ----- The following processing stream layout ---------
-**/
-const streamContainerClass = ref('');
+ **/
+const streamContainerClass = ref('stream-container-flatten');
 const enlargedContainerRef = ref();
-const streamListRef = ref();
 
 const arrowDirection = computed(() => {
   let arrowDirection = 'right';
@@ -220,194 +187,72 @@ const strokePosition = computed(() => {
 
 function handleClickIcon() {
   showSideList.value = !showSideList.value;
-  if (!showSideList.value) {
-    let width = 0;
-    let height = 0;
-    const containerWidth = document.getElementById('roomContainer')!.offsetWidth - horizontalPadding;
-    const containerHeight = document.getElementById('roomContainer')!.offsetHeight - verticalPadding;
-    const scaleWidth = containerWidth / 16;
-    const scaleHeight = containerHeight / 9;
-    if (scaleWidth > scaleHeight) {
-      width = (containerHeight / 9) * 16;
-      height = containerHeight;
-    }
-    if (scaleWidth <= scaleHeight) {
-      width = containerWidth;
-      height = (containerWidth / 16) * 9;
-    }
-    enlargedStreamStyle.value.width = `${width}px`;
-    enlargedStreamStyle.value.height = `${height}px`;
-    /**
-     * Modify the width and height of the enlargedContainer
-    **/
-    if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
-      enlargedContainerRef.value.style.width = '100%';
-      enlargedContainerRef.value.style.height = '100%';
-      return;
-    }
-    if (layout.value === LAYOUT.TOP_SIDE_LIST) {
-      enlargedContainerRef.value.style.top = '0px';
-      enlargedContainerRef.value.style.width = '100%';
-      enlargedContainerRef.value.style.height = '100%';
-      return;
-    }
-  } else {
-    if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
-      handleRightSideListLayout();
-      return;
-    }
-    if (layout.value === LAYOUT.TOP_SIDE_LIST) {
-      handleTopSideListLayout();
-      return;
-    }
-  }
-}
-
-/**
- * Handle nine-pattern layout
-**/
-async function handleNineEqualPointsLayout() {
-  streamContainerClass.value = 'stream-container-flatten';
-
-  enlargeStream.value = null;
-
-  const number = showStreamList.value.length;
-  let width = 0;
-  let height = 0;
-  const roomContainerElement = document.getElementById('roomContainer');
-  if (!roomContainerElement) {
-    return;
-  }
-  // The actual width and height of the container is offsetWidth/offsetHeight minus the size of padding
-  const containerWidth = roomContainerElement!.offsetWidth - horizontalPadding;
-  const containerHeight = roomContainerElement!.offsetHeight - verticalPadding;
-  let horizontalStreamNumber = 1;
-  let verticalStreamNumber = 1;
-  if (number <= 4) {
-    horizontalStreamNumber = Math.min(number, 2);
-    verticalStreamNumber = Math.ceil(number / 2);
-  } else if (number > 4) {
-    horizontalStreamNumber = 3;
-    verticalStreamNumber = Math.ceil(number / 3);
-  }
-  // Subtract the margin size of a single video stream to ensure that the ratio of width and height is 16:9
-  const contentWidth = (containerWidth - horizontalStreamNumber * singleStreamMargin) / horizontalStreamNumber;
-  const contentHeight = (containerHeight - verticalStreamNumber * singleStreamMargin) / verticalStreamNumber;
-
-  const scaleWidth = contentWidth / 16;
-  const scaleHeight = contentHeight / 9;
-  if (scaleWidth > scaleHeight) {
-    width = (contentHeight / 9) * 16;
-    height = contentHeight;
-  }
-  if (scaleWidth <= scaleHeight) {
-    width = contentWidth;
-    height = (contentWidth / 16) * 9;
-  }
-  // The nine-square grid mode needs to reduce the size of the margin of streamRegion.
-  streamStyle.value.width = `${width}px`;
-  streamStyle.value.height = `${height}px`;
-
-  // Set the size of the nine-square grid layout container to ensure that there can only be a maximum of 3 video streams in the horizontal direction.
-  streamListStyle.value.width = `${horizontalStreamNumber * (width + singleStreamMargin)}px`;
 }
 
 /**
  * Get stream information for large region areas
  */
 function getEnlargeStream() {
-  if (roomStore.localScreenStream?.hasScreenStream) {
+  if (roomStore.localScreenStream?.hasVideoStream) {
     return roomStore.localScreenStream;
   }
   if (remoteStreamList.value.length > 0) {
-    const remoteScreenStream = remoteStreamList.value.find(stream => (
-      stream.streamType === TUIVideoStreamType.kScreenStream && stream.hasScreenStream
-    ));
+    const remoteScreenStream = remoteStreamList.value.find(
+      stream =>
+        stream.streamType === TUIVideoStreamType.kScreenStream &&
+        stream.hasVideoStream
+    );
     return remoteScreenStream ? remoteScreenStream : remoteStreamList.value[0];
   }
   return roomStore.localStream;
 }
 
+async function handleNineEqualPointsLayout() {
+  streamContainerClass.value = 'stream-container-flatten';
+  enlargeStream.value = null;
+  horizontalCount.value = Math.min(
+    Math.ceil(Math.sqrt(streamList.value.length)),
+    3
+  );
+  verticalCount.value = Math.min(
+    Math.ceil(streamList.value.length / horizontalCount.value),
+    3
+  );
+  currentPageIndex.value = 0;
+}
+
 /**
  * Handle sidebar layout
-**/
+ **/
 async function handleRightSideListLayout() {
   streamContainerClass.value = 'stream-container-right';
-
+  horizontalCount.value = 1;
+  verticalCount.value = Infinity;
   if (!enlargeStream.value) {
     enlargeStream.value = getEnlargeStream();
   }
-
-  await nextTick();
-
-  streamStyle.value = {};
-  streamListStyle.value = {};
-
-  if (enlargedContainerRef.value) {
-    enlargedContainerRef.value.style.width = showSideList.value ? 'calc(100% - 280px)' : '100%';
-    enlargedContainerRef.value.style.height = '100%';
-    const containerWidth = enlargedContainerRef.value.offsetWidth - horizontalPadding;
-    const containerHeight = enlargedContainerRef.value.offsetHeight - verticalPadding;
-    let width = 0;
-    let height = 0;
-    const scaleWidth = containerWidth / 16;
-    const scaleHeight = containerHeight / 9;
-    if (scaleWidth > scaleHeight) {
-      width = (containerHeight / 9) * 16;
-      height = containerHeight;
-    }
-    if (scaleWidth <= scaleHeight) {
-      width = containerWidth;
-      height = (containerWidth / 16) * 9;
-    }
-    enlargedStreamStyle.value.width = `${width}px`;
-    enlargedStreamStyle.value.height = `${height}px`;
-  }
 }
 
 /**
  * Handle top bar layout
-**/
+ **/
 async function handleTopSideListLayout() {
   streamContainerClass.value = 'stream-container-top';
-
+  horizontalCount.value = Infinity;
+  verticalCount.value = 1;
   if (!enlargeStream.value) {
     enlargeStream.value = getEnlargeStream();
   }
-
-  await nextTick();
-
-  streamStyle.value = {};
-  streamListStyle.value = {};
-
-  if (enlargedContainerRef.value) {
-    enlargedContainerRef.value.style.top = showSideList.value ? '175px' : '0';
-    enlargedContainerRef.value.style.width = '100%';
-    enlargedContainerRef.value.style.height = showSideList.value ? 'calc(100% - 184px)' : '100%';
-    const containerWidth = enlargedContainerRef.value.offsetWidth - horizontalPadding;
-    const containerHeight = enlargedContainerRef.value.offsetHeight - verticalPadding;
-    let width = 0;
-    let height = 0;
-    const scaleWidth = containerWidth / 16;
-    const scaleHeight = containerHeight / 9;
-    if (scaleWidth > scaleHeight) {
-      width = (containerHeight / 9) * 16;
-      height = containerHeight;
-    }
-    if (scaleWidth <= scaleHeight) {
-      width = containerWidth;
-      height = (containerWidth / 16) * 9;
-    }
-    enlargedStreamStyle.value.width = `${width}px`;
-    enlargedStreamStyle.value.height = `${height}px`;
-  }
 }
 
 /**
  * Double-click to switch the stream to the zoom in section
-**/
+ **/
 function handleEnlargeStreamRegion(stream: StreamInfo) {
-  if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
+  if (
+    layout.value === LAYOUT.NINE_EQUAL_POINTS &&
+    streamList.value.length > 1
+  ) {
     basicStore.setLayout(LAYOUT.RIGHT_SIDE_LIST);
   }
   enlargeStream.value = stream;
@@ -415,115 +260,65 @@ function handleEnlargeStreamRegion(stream: StreamInfo) {
 
 /**
  * Handle the page layout when the page loads or the layout changes
-**/
+ **/
 async function handleLayout() {
   switch (layout.value as any) {
     case LAYOUT.NINE_EQUAL_POINTS:
-      await handleNineEqualPointsLayout();
-      break;
-    case LAYOUT.RIGHT_SIDE_LIST:
-      showSideList.value = true;
-      await handleRightSideListLayout();
-      await handleStreamContainerScroll();
-      break;
-    case LAYOUT.TOP_SIDE_LIST:
-      showSideList.value = true;
-      await handleTopSideListLayout();
-      await handleStreamContainerScroll();
-      break;
-    default:
-      break;
-  }
-}
-
-/**
- * Processing stream window size when page rescaling
-**/
-async function handleResize() {
-  switch (layout.value as any) {
-    case LAYOUT.NINE_EQUAL_POINTS:
-      await handleNineEqualPointsLayout();
+      handleNineEqualPointsLayout();
       break;
     case LAYOUT.RIGHT_SIDE_LIST:
-      await handleRightSideListLayout();
-      await handleStreamContainerScroll();
+      handleRightSideListLayout();
       break;
     case LAYOUT.TOP_SIDE_LIST:
-      await handleTopSideListLayout();
-      await handleStreamContainerScroll();
+      handleTopSideListLayout();
       break;
     default:
       break;
   }
 }
 
-onMounted(() => {
-  handleLayout();
-  roomService.on(EventType.ROOM_CONTAINER_RESIZE, handleResize);
-  ['resize', 'pageshow'].forEach((event) => {
-    window.addEventListener(event, handleResize);
-  });
-});
-
-onUnmounted(() => {
-  roomService.off(EventType.ROOM_CONTAINER_RESIZE, handleResize);
-  ['resize', 'pageshow'].forEach((event) => {
-    window.removeEventListener(event, handleResize);
-  });
-});
-
-watch(streamNumber, () => {
+watch(streamNumber, val => {
   if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
-    handleNineEqualPointsLayout();
+    horizontalCount.value = Math.min(Math.ceil(Math.sqrt(val)), 3);
+    verticalCount.value = Math.min(Math.ceil(val / horizontalCount.value), 3);
+    if (currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1) {
+      currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
+    }
   }
 });
 
-watch(layout, () => {
-  handleLayout();
-});
-
-const showIconControl = computed(() => [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) >= 0);
+watch(
+  layout,
+  () => {
+    handleLayout();
+  },
+  { immediate: true }
+);
 
+const showIconControl = computed(
+  () =>
+    [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) >= 0
+);
 
 const onUserVideoStateChanged = (eventInfo: {
-  userId: string,
-  streamType: TUIVideoStreamType,
-  hasVideo: boolean,
-  reason: TUIChangeReason,
+  userId: string;
+  streamType: TUIVideoStreamType;
+  hasVideo: boolean;
+  reason: TUIChangeReason;
 }) => {
-  const { userId, streamType, hasVideo, reason } = eventInfo;
-  // Update roomStore flow state data
-  roomStore.updateUserVideoState(userId, streamType, hasVideo);
-
-  // Handle status changes
-  if (userId === basicStore.userId && !hasVideo && reason === TUIChangeReason.kChangedByAdmin) {
-    // The host turns off the camera
-    if (streamType === TUIVideoStreamType.kCameraStream) {
-      TUIMessage({
-        type: 'warning',
-        message: t('Your camera has been turned off'),
-        duration: MESSAGE_DURATION.NORMAL,
-      });
-      // When the moderator opens the whole staff forbidden to draw,
-      // open and then close the single person's camera alone, at this time
-      // the corresponding user's camera status for inoperable
-      roomStore.setCanControlSelfVideo(!roomStore.isCameraDisableForAllUser);
-    }
-    // Host turns off screen sharing
-    if (streamType === TUIVideoStreamType.kScreenStream) {
-      TUIMessageBox({
-        title: t('Your screen sharing has been stopped'),
-        message: t('Your screen sharing has been stopped, Now only the host/admin can share the screen'),
-        confirmButtonText: t('I got it'),
-      });
-    }
-  }
-
+  const { userId, streamType, hasVideo } = eventInfo;
   // Handle flow layout when screen sharing flow changes
   if (streamType === TUIVideoStreamType.kScreenStream) {
     if (hasVideo) {
-      enlargeStream.value = userId === basicStore.userId ? roomStore.localScreenStream : roomStore.remoteStreamObj[`${userId}_${streamType}`];
-      if (enlargeStream.value && [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) === -1) {
+      enlargeStream.value =
+        userId === basicStore.userId
+          ? roomStore.localScreenStream
+          : roomStore.streamInfoObj[`${userId}_${streamType}`];
+      if (
+        enlargeStream.value &&
+        [LAYOUT.RIGHT_SIDE_LIST, LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) ===
+          -1
+      ) {
         basicStore.setLayout(LAYOUT.RIGHT_SIDE_LIST);
       }
       if (userId !== basicStore.userId) {
@@ -536,7 +331,11 @@ const onUserVideoStateChanged = (eventInfo: {
       if (userId !== basicStore.userId) {
         roomStore.setHasOtherScreenShare(false);
       }
-      logger.debug(`${logPrefix} onUserVideoStateChanged: stop`, userId, streamType);
+      logger.debug(
+        `${logPrefix} onUserVideoStateChanged: stop`,
+        userId,
+        streamType
+      );
       roomEngine.instance?.stopPlayRemoteVideo({
         userId,
         streamType,
@@ -546,21 +345,27 @@ const onUserVideoStateChanged = (eventInfo: {
 };
 
 // Wheat level changes
-const onSeatListChanged = (eventInfo:
-  { seatList: TUISeatInfo[], seatedList: TUISeatInfo[], leftList: TUISeatInfo[] }) => {
-  const { seatedList, leftList } = eventInfo;
-  roomStore.updateOnSeatList(seatedList, leftList);
+const onSeatListChanged = (eventInfo: {
+  seatList: TUISeatInfo[];
+  seatedList: TUISeatInfo[];
+  leftList: TUISeatInfo[];
+}) => {
+  const { leftList } = eventInfo;
   const leftUserIdList = leftList.map(item => item.userId);
   // When the user with the largest screen logs in, the user with the largest screen needs to be replaced.
-  if (enlargeStream.value && leftUserIdList.includes(enlargeStream.value?.userId)) {
+  if (
+    enlargeStream.value &&
+    leftUserIdList.includes(enlargeStream.value?.userId)
+  ) {
     handleLargeStreamLeave();
   }
 };
 
 // Remote user leaves
 const onRemoteUserLeaveRoom = (eventInfo: { userInfo: TUIUserInfo }) => {
-  const { userInfo: { userId } } = eventInfo;
-  roomStore.removeRemoteUser(userId);
+  const {
+    userInfo: { userId },
+  } = eventInfo;
   if (userId === enlargeStream.value?.userId) {
     handleLargeStreamLeave();
   }
@@ -576,81 +381,28 @@ const handleLargeStreamLeave = () => {
   }
 };
 
-// Handle lazy loading of videos in sidebar & top bar
-const handleStreamContainerScroll = async () => {
-  // Add nextTick to handle the problem of new users triggering scroll in top bar mode,
-  // but the obtained streamListRef.value.offsetWidth has not been updated yet.
-  await nextTick();
-  const childDom = streamListRef.value.children[0];
-
-  // From which number
-  let index = 0;
-  let finalIndex = 0;
-  // How many visible areas are there
-  let number = 0;
-
-  if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
-    const firstChildHeight = childDom.offsetHeight + 10;
-    const normalChildHeight = childDom.offsetHeight + 14;
-    const streamListRefEnd = streamListRef.value.scrollTop + streamListRef.value.offsetHeight;
-    index = Math.floor((streamListRef.value.scrollTop - firstChildHeight) / normalChildHeight) + 1;
-    finalIndex = Math.ceil((streamListRefEnd - firstChildHeight) / normalChildHeight) + 1;
-  } else if (layout.value === LAYOUT.TOP_SIDE_LIST) {
-    const firstChildWidth = childDom.offsetWidth;
-    const normalChildWidth = childDom.offsetWidth + 14;
-    const streamListRefEnd = streamListRef.value.scrollLeft + streamListRef.value.offsetWidth;
-    index = Math.floor((streamListRef.value.scrollLeft - firstChildWidth) / normalChildWidth) + 1;
-    finalIndex = Math.ceil((streamListRefEnd - firstChildWidth) / normalChildWidth) + 1;
-  }
-  if (index < 0) {
-    index = 0;
-  }
-  number = finalIndex - index;
-  if (number > (showStreamList.value.length - index)) {
-    number = showStreamList.value.length - index;
-  }
-
-  const streamUserIdList = [];
-  [...new Array(number)].forEach(() => {
-    const currentStreamId = `${showStreamList.value[index].userId}_${showStreamList.value[index].streamType}`;
-    streamUserIdList.push(currentStreamId);
-    index = index + 1;
-  });
-  streamUserIdList.push(enlargeDomId.value);
-
-  // Modify the isVisible of the corresponding streamInfo to true
-  roomStore.updateUserStreamVisible(streamUserIdList);
-};
-
-// Handle top layout horizontal sliding
-function handleWheel(event: WheelEvent) {
-  streamListRef.value.scrollLeft += event.deltaY;
-}
-
-const handleStreamContainerScrollDebounce = debounce(handleStreamContainerScroll, 300);
-
-onMounted(() => {
-  streamListRef.value.addEventListener('scroll', handleStreamContainerScrollDebounce);
-});
-
-onUnmounted(() => {
-  streamListRef.value && streamListRef.value.removeEventListener('scroll', handleStreamContainerScrollDebounce);
-});
-
 TUIRoomEngine.once('ready', () => {
-  roomEngine.instance?.on(TUIRoomEvents.onRemoteUserEnterRoom, onRemoteUserEnterRoom);
-  roomEngine.instance?.on(TUIRoomEvents.onRemoteUserLeaveRoom, onRemoteUserLeaveRoom);
+  roomEngine.instance?.on(
+    TUIRoomEvents.onRemoteUserLeaveRoom,
+    onRemoteUserLeaveRoom
+  );
   roomEngine.instance?.on(TUIRoomEvents.onSeatListChanged, onSeatListChanged);
-  roomEngine.instance?.on(TUIRoomEvents.onUserVideoStateChanged, onUserVideoStateChanged);
-  roomEngine.instance?.on(TUIRoomEvents.onUserAudioStateChanged, onUserAudioStateChanged);
+  roomEngine.instance?.on(
+    TUIRoomEvents.onUserVideoStateChanged,
+    onUserVideoStateChanged
+  );
 });
 
 onUnmounted(() => {
-  roomEngine.instance?.off(TUIRoomEvents.onRemoteUserEnterRoom, onRemoteUserEnterRoom);
-  roomEngine.instance?.off(TUIRoomEvents.onRemoteUserLeaveRoom, onRemoteUserLeaveRoom);
+  roomEngine.instance?.off(
+    TUIRoomEvents.onRemoteUserLeaveRoom,
+    onRemoteUserLeaveRoom
+  );
   roomEngine.instance?.off(TUIRoomEvents.onSeatListChanged, onSeatListChanged);
-  roomEngine.instance?.off(TUIRoomEvents.onUserVideoStateChanged, onUserVideoStateChanged);
-  roomEngine.instance?.off(TUIRoomEvents.onUserAudioStateChanged, onUserAudioStateChanged);
+  roomEngine.instance?.off(
+    TUIRoomEvents.onUserVideoStateChanged,
+    onUserVideoStateChanged
+  );
 });
 </script>
 
@@ -658,37 +410,25 @@ onUnmounted(() => {
 .stream-container-flatten {
   width: 100%;
   height: 100%;
-  overflow: hidden;
   padding: 25px 20px;
+  overflow: hidden;
+
   .stream-list-container {
     width: 100%;
     height: 100%;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-  }
-  .stream-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-    .single-stream {
-      margin: 4px;
-    }
   }
 }
 
 .arrow-stroke-right {
   position: absolute;
-  right: 280px;
   top: 0;
+  right: 280px;
 }
 
 .arrow-stroke-left {
   position: absolute;
-  right: 12px;
   top: 0;
+  right: 12px;
 }
 
 .arrow-stroke-up {
@@ -703,164 +443,147 @@ onUnmounted(() => {
   left: 0;
 }
 
+.stream-container-top .single-stream:not(:first-child) {
+  margin-left: 14px;
+}
+
+.stream-container-right .single-stream:not(:first-child) {
+  margin-top: 14px;
+}
+
 .stream-container-top {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
   width: 100%;
   height: 100%;
   overflow: hidden;
-  position: relative;
+
   .enlarged-stream-container {
-    width: 100%;
-    height: calc(100% - 184px);
-    padding: 25px 20px;
-    position: absolute;
-    top: 175px;
     display: flex;
-    justify-content: center;
+    flex: 1;
     align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: 0;
+    padding: 25px 20px;
   }
+
   .stream-list-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
     width: 100%;
     height: 175px;
-    position: absolute;
-    top: 0;
-    left: 0;
     padding: 20px 40px;
-    display: flex;
-    justify-content: center;
+
     &.hide-list {
+      position: absolute;
+      top: 0;
+      left: 0;
       transform: translateY(-166px);
     }
-    .stream-list {
-      display: flex;
-      overflow-x: scroll;
-      max-width: 100%;
-      max-height: 100%;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      .single-stream {
-        width: 240px;
-        height: 135px;
-        border-radius: 8px;
-        overflow: hidden;
-        flex-shrink: 0;
-        &:not(:first-child) {
-          margin-left: 14px;
-        }
-      }
-    }
   }
 }
 
 .stream-container-right {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  place-content: center space-between;
   width: 100%;
   height: 100%;
   overflow: hidden;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-content: center;
-  position: relative;
+
   .enlarged-stream-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
     width: calc(100% - 280px);
     height: calc(100%);
     padding: 25px 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
+
   .stream-list-container {
+    position: relative;
+    display: flex;
+    align-items: center;
     width: 280px;
     height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
     padding: 20px;
-    display: flex;
-    align-items: center;
+
     &.hide-list {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 280px;
       transform: translateX(270px);
     }
+
     &::before {
-      content: '';
-      width: 100%;
-      height: 40px;
       position: absolute;
       top: 10px;
       left: 0;
+      width: 100%;
+      height: 40px;
+      content: '';
       opacity: 0.1;
     }
   }
-  .stream-list {
-    max-width: 100%;
-    max-height: 100%;
-    overflow-y: scroll;
-    padding: 10px 0;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    .single-stream {
-      width: 240px;
-      height: 135px;
-      border-radius: 8px;
-      overflow: hidden;
-      &:not(:first-child) {
-        margin-top: 14px;
-      }
-    }
-  }
-}
-
-.tui-theme-black .turn-page-container {
-  --turn-page-background-color: rgba(114, 122, 138, 0.4);
-  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
-  --turn-page-arrow-color: #D5E0F2;
-}
-
-.tui-theme-white .turn-page-container {
-  --turn-page-background-color: rgba(114, 122, 138, 0.4);
-  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
-  --turn-page-arrow-color: white;
 }
 
 .turn-page-container {
-  width: 100%;
-  height: 60px;
   position: absolute;
-  left: 0;
   top: 50%;
-  transform: translateY(-50%);
+  left: 0;
   display: flex;
   justify-content: space-between;
+  width: 100%;
+  height: 60px;
+  transform: translateY(-50%);
+
   .turn-page-arrow-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 32px;
     height: 60px;
+    color: var(--turn-page-arrow-color);
+    cursor: pointer;
     background: var(--turn-page-background-color);
     backdrop-filter: blur(2.25px);
     border-radius: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    color: var(--turn-page-arrow-color);
+
     &:hover {
       background: var(--turn-page-hover-background-color);
     }
   }
+
   .left-container {
     position: absolute;
     left: 34px;
   }
+
   .right-container {
     position: absolute;
     right: 34px;
   }
+
   .turn-page-right {
     transform: rotateY(180deg);
   }
 }
+
+.tui-theme-black .turn-page-container {
+  --turn-page-background-color: rgba(114, 122, 138, 0.4);
+  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
+  --turn-page-arrow-color: #d5e0f2;
+}
+
+.tui-theme-white .turn-page-container {
+  --turn-page-background-color: rgba(114, 122, 138, 0.4);
+  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
+  --turn-page-arrow-color: white;
+}
 </style>