@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/es/components/RoomContent/StreamContainer/index.vue2.mjs

@@ -1,110 +1,83 @@
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted, nextTick, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, createBlock, normalizeStyle, createCommentVNode, vShow, unref, Fragment, renderList, createVNode } from "vue";
+import { defineComponent, ref, computed, watch, onUnmounted, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, createBlock, createCommentVNode, vShow, createVNode } from "vue";
 import { storeToRefs } from "pinia";
 import { useRoomStore } from "../../../stores/room.mjs";
 import { useBasicStore } from "../../../stores/basic.mjs";
 import { LAYOUT } from "../../../constants/render.mjs";
 import StreamRegion from "../StreamRegion/index.vue.mjs";
-import renderMsg from "../../common/base/Message/Message.mjs";
-import MessageBox from "../../common/base/MessageBox/index.mjs";
-import { MESSAGE_DURATION } from "../../../constants/message.mjs";
-import { debounce } from "../../../utils/utils.mjs";
+import StreamList from "../StreamList/index.vue.mjs";
 import logger from "../../../utils/common/logger/index.mjs";
+import ArrowStrokeTurnPageIcon from "../../common/icons/ArrowStrokeTurnPageIcon.vue.mjs";
 import ArrowStroke from "../../common/ArrowStroke.vue.mjs";
 import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
-import ArrowStrokeTurnPageIcon from "../../common/icons/ArrowStrokeTurnPageIcon.vue.mjs";
-import TUIRoomEngine__default, { TUIRoomEvents, TUIChangeReason, TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-electron";
+import TUIRoomEngine__default, { TUIVideoStreamType, TUIRoomEvents } from "@tencentcloud/tuiroom-engine-electron";
 import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
-import useStreamContainer from "./useStreamContainerHooks.mjs";
-import "../../../services/main.mjs";
-import { roomService } from "../../../services/roomService.mjs";
-import { EventType } from "../../../services/types.mjs";
-import "../../../locales/index.mjs";
-import "mitt";
-import "../../../services/manager/roomActionManager.mjs";
 const _hoisted_1 = {
   key: 1,
   class: "turn-page-container"
 };
 const logPrefix = "[StreamContainer]";
-const verticalPadding = 50;
-const horizontalPadding = 40;
-const singleStreamMargin = 8;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     showRoomTool: { type: Boolean }
   },
   setup(__props) {
-    const {
-      onRemoteUserEnterRoom,
-      onUserAudioStateChanged,
-      t
-    } = useStreamContainer();
     const roomEngine = useGetRoomEngine();
-    const streamListStyle = ref({ width: "0" });
-    const streamStyle = ref({ width: "0", height: "0" });
-    const enlargedStreamStyle = ref({ width: "0", height: "0" });
     const roomStore = useRoomStore();
     const { streamList, streamNumber, remoteStreamList } = storeToRefs(roomStore);
     const basicStore = useBasicStore();
     const { layout } = storeToRefs(basicStore);
     const showSideList = ref(true);
     const enlargeStream = ref(null);
-    const enlargeDomId = computed(() => enlargeStream.value ? `${enlargeStream.value.userId}_${enlargeStream.value.streamType}` : "");
-    watch(() => remoteStreamList.value.length, (val) => {
-      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();
-      }
-    });
+    const horizontalCount = ref(1);
+    const verticalCount = ref(1);
     const currentPageIndex = ref(0);
-    const showStreamList = 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);
-    });
-    watch([() => showStreamList.value.map((item) => item.userId), currentPageIndex], () => {
-      if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
-        const streamIdList = [];
-        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 showTurnPageControl = computed(() => layout.value === LAYOUT.NINE_EQUAL_POINTS && streamNumber.value > 9);
-    const showTurnPageLeftArrow = computed(() => currentPageIndex.value > 0);
-    const showTurnPageRightArrow = computed(() => streamNumber.value > currentPageIndex.value * 9 + 9);
+    const maxCountEveryPage = computed(
+      () => horizontalCount.value * verticalCount.value
+    );
+    const totalPage = computed(
+      () => Math.ceil(streamList.value.length / maxCountEveryPage.value)
+    );
+    const showTurnPageControl = computed(
+      () => layout.value === LAYOUT.NINE_EQUAL_POINTS && totalPage.value > 1
+    );
+    const showTurnPageLeftArrow = computed(
+      () => layout.value === LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value > 0
+    );
+    const showTurnPageRightArrow = computed(
+      () => layout.value === LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value < totalPage.value - 1
+    );
     function handleTurnPageLeft() {
       currentPageIndex.value = currentPageIndex.value - 1;
-      handleNineEqualPointsLayout();
     }
     function handleTurnPageRight() {
       currentPageIndex.value = currentPageIndex.value + 1;
-      handleNineEqualPointsLayout();
     }
-    const streamContainerClass = ref("");
+    const showStreamList = computed(() => {
+      var _a;
+      if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
+        return streamList.value.slice(
+          currentPageIndex.value * maxCountEveryPage.value,
+          (currentPageIndex.value + 1) * maxCountEveryPage.value
+        );
+      }
+      if (((_a = enlargeStream.value) == null ? void 0 : _a.streamType) === TUIVideoStreamType.kScreenStream) {
+        return streamList.value.filter((item) => item !== enlargeStream.value);
+      }
+      return streamList.value;
+    });
+    watch(
+      () => streamList.value.length,
+      (val) => {
+        if (val === 1) {
+          basicStore.setLayout(LAYOUT.NINE_EQUAL_POINTS);
+          enlargeStream.value = null;
+          return;
+        }
+      }
+    );
+    const streamContainerClass = ref("stream-container-flatten");
     const enlargedContainerRef = ref();
-    const streamListRef = ref();
     const arrowDirection = computed(() => {
       let arrowDirection2 = "right";
       if (layout.value === LAYOUT.TOP_SIDE_LIST) {
@@ -127,154 +100,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     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`;
-        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;
-        }
-      }
-    }
-    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;
-      }
-      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);
-      }
-      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;
-      }
-      streamStyle.value.width = `${width}px`;
-      streamStyle.value.height = `${height}px`;
-      streamListStyle.value.width = `${horizontalStreamNumber * (width + singleStreamMargin)}px`;
     }
     function getEnlargeStream() {
       var _a;
-      if ((_a = roomStore.localScreenStream) == null ? void 0 : _a.hasScreenStream) {
+      if ((_a = roomStore.localScreenStream) == null ? void 0 : _a.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;
+    }
     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`;
-      }
     }
     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`;
-      }
     }
     function handleEnlargeStreamRegion(stream) {
-      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;
@@ -282,81 +152,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     async function handleLayout() {
       switch (layout.value) {
         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;
-      }
-    }
-    async function handleResize() {
-      switch (layout.value) {
-        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;
       }
     }
-    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) => {
       var _a, _b;
-      const { userId, streamType, hasVideo, reason } = eventInfo;
-      roomStore.updateUserVideoState(userId, streamType, hasVideo);
-      if (userId === basicStore.userId && !hasVideo && reason === TUIChangeReason.kChangedByAdmin) {
-        if (streamType === TUIVideoStreamType.kCameraStream) {
-          renderMsg({
-            type: "warning",
-            message: t("Your camera has been turned off"),
-            duration: MESSAGE_DURATION.NORMAL
-          });
-          roomStore.setCanControlSelfVideo(!roomStore.isCameraDisableForAllUser);
-        }
-        if (streamType === TUIVideoStreamType.kScreenStream) {
-          MessageBox({
-            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;
       if (streamType === TUIVideoStreamType.kScreenStream) {
         if (hasVideo) {
-          enlargeStream.value = userId === basicStore.userId ? roomStore.localScreenStream : roomStore.remoteStreamObj[`${userId}_${streamType}`];
+          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);
           }
@@ -370,7 +200,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (userId !== basicStore.userId) {
             roomStore.setHasOtherScreenShare(false);
           }
-          logger.debug(`${logPrefix} onUserVideoStateChanged: stop`, userId, streamType);
+          logger.debug(
+            `${logPrefix} onUserVideoStateChanged: stop`,
+            userId,
+            streamType
+          );
           (_b = roomEngine.instance) == null ? void 0 : _b.stopPlayRemoteVideo({
             userId,
             streamType
@@ -380,8 +214,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const onSeatListChanged = (eventInfo) => {
       var _a;
-      const { seatedList, leftList } = eventInfo;
-      roomStore.updateOnSeatList(seatedList, leftList);
+      const { leftList } = eventInfo;
       const leftUserIdList = leftList.map((item) => item.userId);
       if (enlargeStream.value && leftUserIdList.includes((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
         handleLargeStreamLeave();
@@ -389,8 +222,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const onRemoteUserLeaveRoom = (eventInfo) => {
       var _a;
-      const { userInfo: { userId } } = eventInfo;
-      roomStore.removeRemoteUser(userId);
+      const {
+        userInfo: { userId }
+      } = eventInfo;
       if (userId === ((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
         handleLargeStreamLeave();
       }
@@ -403,66 +237,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         [enlargeStream.value] = roomStore.remoteStreamList;
       }
     };
-    const handleStreamContainerScroll = async () => {
-      await nextTick();
-      const childDom = streamListRef.value.children[0];
-      let index = 0;
-      let finalIndex = 0;
-      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);
-      roomStore.updateUserStreamVisible(streamUserIdList);
-    };
-    function handleWheel(event) {
-      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__default.once("ready", () => {
-      var _a, _b, _c, _d, _e;
-      (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEvents.onRemoteUserEnterRoom, onRemoteUserEnterRoom);
-      (_b = roomEngine.instance) == null ? void 0 : _b.on(TUIRoomEvents.onRemoteUserLeaveRoom, onRemoteUserLeaveRoom);
-      (_c = roomEngine.instance) == null ? void 0 : _c.on(TUIRoomEvents.onSeatListChanged, onSeatListChanged);
-      (_d = roomEngine.instance) == null ? void 0 : _d.on(TUIRoomEvents.onUserVideoStateChanged, onUserVideoStateChanged);
-      (_e = roomEngine.instance) == null ? void 0 : _e.on(TUIRoomEvents.onUserAudioStateChanged, onUserAudioStateChanged);
+      var _a, _b, _c;
+      (_a = roomEngine.instance) == null ? void 0 : _a.on(
+        TUIRoomEvents.onRemoteUserLeaveRoom,
+        onRemoteUserLeaveRoom
+      );
+      (_b = roomEngine.instance) == null ? void 0 : _b.on(TUIRoomEvents.onSeatListChanged, onSeatListChanged);
+      (_c = roomEngine.instance) == null ? void 0 : _c.on(
+        TUIRoomEvents.onUserVideoStateChanged,
+        onUserVideoStateChanged
+      );
     });
     onUnmounted(() => {
-      var _a, _b, _c, _d, _e;
-      (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEvents.onRemoteUserEnterRoom, onRemoteUserEnterRoom);
-      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEvents.onRemoteUserLeaveRoom, onRemoteUserLeaveRoom);
-      (_c = roomEngine.instance) == null ? void 0 : _c.off(TUIRoomEvents.onSeatListChanged, onSeatListChanged);
-      (_d = roomEngine.instance) == null ? void 0 : _d.off(TUIRoomEvents.onUserVideoStateChanged, onUserVideoStateChanged);
-      (_e = roomEngine.instance) == null ? void 0 : _e.off(TUIRoomEvents.onUserAudioStateChanged, onUserAudioStateChanged);
+      var _a, _b, _c;
+      (_a = roomEngine.instance) == null ? void 0 : _a.off(
+        TUIRoomEvents.onRemoteUserLeaveRoom,
+        onRemoteUserLeaveRoom
+      );
+      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEvents.onSeatListChanged, onSeatListChanged);
+      (_c = roomEngine.instance) == null ? void 0 : _c.off(
+        TUIRoomEvents.onUserVideoStateChanged,
+        onUserVideoStateChanged
+      );
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -475,39 +272,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: "enlarged-stream-container"
         }, [
           enlargeStream.value ? (openBlock(), createBlock(StreamRegion, {
-            key: `${enlargeStream.value.userId}_${enlargeStream.value.streamType}`,
-            stream: enlargeStream.value,
-            style: normalizeStyle(enlargedStreamStyle.value)
-          }, null, 8, ["stream", "style"])) : createCommentVNode("", true)
+            key: 0,
+            streamInfo: enlargeStream.value,
+            aspectRatio: "16:9",
+            isEnlarge: true,
+            observerViewInVisible: true
+          }, null, 8, ["streamInfo"])) : createCommentVNode("", true)
         ], 512), [
-          [vShow, showIconControl.value]
+          [vShow, enlargeStream.value]
         ]),
-        createElementVNode("div", {
-          class: normalizeClass(["stream-list-container", `${showSideList.value ? "" : "hide-list"}`])
-        }, [
-          createElementVNode("div", {
-            ref_key: "streamListRef",
-            ref: streamListRef,
-            style: normalizeStyle(streamListStyle.value),
-            class: "stream-list",
-            onScroll: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => unref(handleStreamContainerScrollDebounce) && unref(handleStreamContainerScrollDebounce)(...args)),
-            onWheel: handleWheel
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(streamList), (stream) => {
-              return withDirectives((openBlock(), createBlock(StreamRegion, {
-                key: `${stream.userId}_${stream.streamType}`,
-                stream,
-                "enlarge-dom-id": enlargeDomId.value,
-                class: "single-stream",
-                style: normalizeStyle(streamStyle.value),
-                onRoomDblclick: ($event) => handleEnlargeStreamRegion(stream)
-              }, null, 8, ["stream", "enlarge-dom-id", "style", "onRoomDblclick"])), [
-                [vShow, showStreamList.value.indexOf(stream) > -1]
-              ]);
-            }), 128))
-          ], 36)
-        ], 2),
+        createVNode(StreamList, {
+          class: normalizeClass(["stream-list-container", `${showSideList.value ? "" : "hide-list"}`]),
+          streamInfoList: showStreamList.value,
+          horizontalCount: horizontalCount.value,
+          verticalCount: verticalCount.value,
+          aspectRatio: "16:9",
+          observerViewInVisible: true,
+          onRoomDblclick: handleEnlargeStreamRegion
+        }, null, 8, ["class", "streamInfoList", "horizontalCount", "verticalCount"]),
         showIconControl.value && (_ctx.showRoomTool || showSideList.value) ? (openBlock(), createBlock(ArrowStroke, {
           key: 0,
           class: normalizeClass([`arrow-stroke-${arrowDirection.value}`]),

package/es/components/RoomContent/StreamContainer/useStreamContainerHooks.d.ts

@@ -1,29 +1,13 @@
-import { TUIChangeReason, TUIUserInfo } from '@tencentcloud/tuiroom-engine-electron';
-import { StreamInfo } from '../../../stores/room';
 import { Ref } from 'vue';
+import { StreamInfo } from '../../../stores/room';
 
 export default function useStreamContainer(): {
     currentRemoteSpeakerUserId: Ref<string>;
     currentSpeakerUserId: Ref<string>;
-    onRemoteUserEnterRoom: (eventInfo: {
-        userInfo: TUIUserInfo;
-    }) => void;
-    onRemoteUserLeaveRoom: (eventInfo: {
-        userInfo: TUIUserInfo;
-    }) => void;
-    onSeatListChanged: (eventInfo: {
-        seatList: any[];
-        seatedList: any[];
-        leftList: any[];
-    }) => void;
-    onUserAudioStateChanged: (eventInfo: {
-        userId: string;
-        hasAudio: boolean;
-        reason: TUIChangeReason;
-    }) => void;
     onUserVoiceVolumeChanged: (eventInfo: {
         userVolumeList: any[];
     }) => void;
     isSameStream: (stream1: StreamInfo | null, stream2: StreamInfo | null) => boolean;
+    getStreamKey: (stream: StreamInfo | null) => string;
     t: any;
 };