@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/lib/components/RoomContent/StreamContainer/index.vue2.js

@@ -6,107 +6,80 @@ const room = require("../../../stores/room.js");
 const basic = require("../../../stores/basic.js");
 const render = require("../../../constants/render.js");
 const index = require("../StreamRegion/index.vue.js");
-const Message = require("../../common/base/Message/Message.js");
-const index$1 = require("../../common/base/MessageBox/index.js");
-const message = require("../../../constants/message.js");
-const utils = require("../../../utils/utils.js");
+const index$1 = require("../StreamList/index.vue.js");
 const index$2 = require("../../../utils/common/logger/index.js");
+const ArrowStrokeTurnPageIcon = require("../../common/icons/ArrowStrokeTurnPageIcon.vue.js");
 const ArrowStroke = require("../../common/ArrowStroke.vue.js");
 const SvgIcon = require("../../common/base/SvgIcon.vue.js");
-const ArrowStrokeTurnPageIcon = require("../../common/icons/ArrowStrokeTurnPageIcon.vue.js");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
 const useRoomEngine = require("../../../hooks/useRoomEngine.js");
-const useStreamContainerHooks = require("./useStreamContainerHooks.js");
-require("../../../services/main.js");
-const roomService = require("../../../services/roomService.js");
-const types = require("../../../services/types.js");
-require("../../../locales/index.js");
-require("mitt");
-require("../../../services/manager/roomActionManager.js");
 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__ */ Vue.defineComponent({
   __name: "index",
   props: {
     showRoomTool: { type: Boolean }
   },
   setup(__props) {
-    const {
-      onRemoteUserEnterRoom,
-      onUserAudioStateChanged,
-      t
-    } = useStreamContainerHooks.default();
     const roomEngine = useRoomEngine.default();
-    const streamListStyle = Vue.ref({ width: "0" });
-    const streamStyle = Vue.ref({ width: "0", height: "0" });
-    const enlargedStreamStyle = Vue.ref({ width: "0", height: "0" });
     const roomStore = room.useRoomStore();
     const { streamList, streamNumber, remoteStreamList } = pinia.storeToRefs(roomStore);
     const basicStore = basic.useBasicStore();
     const { layout } = pinia.storeToRefs(basicStore);
     const showSideList = Vue.ref(true);
     const enlargeStream = Vue.ref(null);
-    const enlargeDomId = Vue.computed(() => enlargeStream.value ? `${enlargeStream.value.userId}_${enlargeStream.value.streamType}` : "");
-    Vue.watch(() => remoteStreamList.value.length, (val) => {
-      if (val === 0) {
-        basicStore.setLayout(render.LAYOUT.NINE_EQUAL_POINTS);
-        enlargeStream.value = null;
-        return;
-      }
-    });
-    Vue.watch(() => streamList.value.length, () => {
-      if (layout.value === render.LAYOUT.RIGHT_SIDE_LIST || layout.value === render.LAYOUT.TOP_SIDE_LIST) {
-        handleStreamContainerScroll();
-      }
-    });
-    Vue.watch(() => enlargeDomId.value, () => {
-      if (layout.value === render.LAYOUT.RIGHT_SIDE_LIST || layout.value === render.LAYOUT.TOP_SIDE_LIST) {
-        handleStreamContainerScroll();
-      }
-    });
+    const horizontalCount = Vue.ref(1);
+    const verticalCount = Vue.ref(1);
     const currentPageIndex = Vue.ref(0);
-    const showStreamList = Vue.computed(() => {
-      if (layout.value !== render.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);
-    });
-    Vue.watch([() => showStreamList.value.map((item) => item.userId), currentPageIndex], () => {
-      if (layout.value === render.LAYOUT.NINE_EQUAL_POINTS) {
-        const streamIdList = [];
-        showStreamList.value.forEach((item) => {
-          const currentStreamId = `${item.userId}_${item.streamType}`;
-          streamIdList.push(currentStreamId);
-        });
-        roomStore.updateUserStreamVisible(streamIdList);
-      }
-    });
-    Vue.watch(streamNumber, (val) => {
-      if (layout.value === render.LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value > Math.ceil(val / 9) - 1) {
-        currentPageIndex.value = Math.ceil(val / 9) - 1;
-        handleNineEqualPointsLayout();
-      }
-    });
-    const showTurnPageControl = Vue.computed(() => layout.value === render.LAYOUT.NINE_EQUAL_POINTS && streamNumber.value > 9);
-    const showTurnPageLeftArrow = Vue.computed(() => currentPageIndex.value > 0);
-    const showTurnPageRightArrow = Vue.computed(() => streamNumber.value > currentPageIndex.value * 9 + 9);
+    const maxCountEveryPage = Vue.computed(
+      () => horizontalCount.value * verticalCount.value
+    );
+    const totalPage = Vue.computed(
+      () => Math.ceil(streamList.value.length / maxCountEveryPage.value)
+    );
+    const showTurnPageControl = Vue.computed(
+      () => layout.value === render.LAYOUT.NINE_EQUAL_POINTS && totalPage.value > 1
+    );
+    const showTurnPageLeftArrow = Vue.computed(
+      () => layout.value === render.LAYOUT.NINE_EQUAL_POINTS && currentPageIndex.value > 0
+    );
+    const showTurnPageRightArrow = Vue.computed(
+      () => layout.value === render.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 = Vue.ref("");
+    const showStreamList = Vue.computed(() => {
+      var _a;
+      if (layout.value === render.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) === TUIRoomEngine.TUIVideoStreamType.kScreenStream) {
+        return streamList.value.filter((item) => item !== enlargeStream.value);
+      }
+      return streamList.value;
+    });
+    Vue.watch(
+      () => streamList.value.length,
+      (val) => {
+        if (val === 1) {
+          basicStore.setLayout(render.LAYOUT.NINE_EQUAL_POINTS);
+          enlargeStream.value = null;
+          return;
+        }
+      }
+    );
+    const streamContainerClass = Vue.ref("stream-container-flatten");
     const enlargedContainerRef = Vue.ref();
-    const streamListRef = Vue.ref();
     const arrowDirection = Vue.computed(() => {
       let arrowDirection2 = "right";
       if (layout.value === render.LAYOUT.TOP_SIDE_LIST) {
@@ -129,154 +102,51 @@ const _sfc_main = /* @__PURE__ */ Vue.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 === render.LAYOUT.RIGHT_SIDE_LIST) {
-          enlargedContainerRef.value.style.width = "100%";
-          enlargedContainerRef.value.style.height = "100%";
-          return;
-        }
-        if (layout.value === render.LAYOUT.TOP_SIDE_LIST) {
-          enlargedContainerRef.value.style.top = "0px";
-          enlargedContainerRef.value.style.width = "100%";
-          enlargedContainerRef.value.style.height = "100%";
-          return;
-        }
-      } else {
-        if (layout.value === render.LAYOUT.RIGHT_SIDE_LIST) {
-          handleRightSideListLayout();
-          return;
-        }
-        if (layout.value === render.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 === TUIRoomEngine.TUIVideoStreamType.kScreenStream && stream.hasScreenStream);
+        const remoteScreenStream = remoteStreamList.value.find(
+          (stream) => stream.streamType === TUIRoomEngine.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 Vue.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 Vue.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 === render.LAYOUT.NINE_EQUAL_POINTS) {
+      if (layout.value === render.LAYOUT.NINE_EQUAL_POINTS && streamList.value.length > 1) {
         basicStore.setLayout(render.LAYOUT.RIGHT_SIDE_LIST);
       }
       enlargeStream.value = stream;
@@ -284,81 +154,41 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     async function handleLayout() {
       switch (layout.value) {
         case render.LAYOUT.NINE_EQUAL_POINTS:
-          await handleNineEqualPointsLayout();
-          break;
-        case render.LAYOUT.RIGHT_SIDE_LIST:
-          showSideList.value = true;
-          await handleRightSideListLayout();
-          await handleStreamContainerScroll();
-          break;
-        case render.LAYOUT.TOP_SIDE_LIST:
-          showSideList.value = true;
-          await handleTopSideListLayout();
-          await handleStreamContainerScroll();
-          break;
-      }
-    }
-    async function handleResize() {
-      switch (layout.value) {
-        case render.LAYOUT.NINE_EQUAL_POINTS:
-          await handleNineEqualPointsLayout();
+          handleNineEqualPointsLayout();
           break;
         case render.LAYOUT.RIGHT_SIDE_LIST:
-          await handleRightSideListLayout();
-          await handleStreamContainerScroll();
+          handleRightSideListLayout();
           break;
         case render.LAYOUT.TOP_SIDE_LIST:
-          await handleTopSideListLayout();
-          await handleStreamContainerScroll();
+          handleTopSideListLayout();
           break;
       }
     }
-    Vue.onMounted(() => {
-      handleLayout();
-      roomService.roomService.on(types.EventType.ROOM_CONTAINER_RESIZE, handleResize);
-      ["resize", "pageshow"].forEach((event) => {
-        window.addEventListener(event, handleResize);
-      });
-    });
-    Vue.onUnmounted(() => {
-      roomService.roomService.off(types.EventType.ROOM_CONTAINER_RESIZE, handleResize);
-      ["resize", "pageshow"].forEach((event) => {
-        window.removeEventListener(event, handleResize);
-      });
-    });
-    Vue.watch(streamNumber, () => {
+    Vue.watch(streamNumber, (val) => {
       if (layout.value === render.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;
+        }
       }
     });
-    Vue.watch(layout, () => {
-      handleLayout();
-    });
-    const showIconControl = Vue.computed(() => [render.LAYOUT.RIGHT_SIDE_LIST, render.LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) >= 0);
+    Vue.watch(
+      layout,
+      () => {
+        handleLayout();
+      },
+      { immediate: true }
+    );
+    const showIconControl = Vue.computed(
+      () => [render.LAYOUT.RIGHT_SIDE_LIST, render.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 === TUIRoomEngine.TUIChangeReason.kChangedByAdmin) {
-        if (streamType === TUIRoomEngine.TUIVideoStreamType.kCameraStream) {
-          Message.default({
-            type: "warning",
-            message: t("Your camera has been turned off"),
-            duration: message.MESSAGE_DURATION.NORMAL
-          });
-          roomStore.setCanControlSelfVideo(!roomStore.isCameraDisableForAllUser);
-        }
-        if (streamType === TUIRoomEngine.TUIVideoStreamType.kScreenStream) {
-          index$1.default({
-            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 === TUIRoomEngine.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 && [render.LAYOUT.RIGHT_SIDE_LIST, render.LAYOUT.TOP_SIDE_LIST].indexOf(layout.value) === -1) {
             basicStore.setLayout(render.LAYOUT.RIGHT_SIDE_LIST);
           }
@@ -372,7 +202,11 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           if (userId !== basicStore.userId) {
             roomStore.setHasOtherScreenShare(false);
           }
-          index$2.default.debug(`${logPrefix} onUserVideoStateChanged: stop`, userId, streamType);
+          index$2.default.debug(
+            `${logPrefix} onUserVideoStateChanged: stop`,
+            userId,
+            streamType
+          );
           (_b = roomEngine.instance) == null ? void 0 : _b.stopPlayRemoteVideo({
             userId,
             streamType
@@ -382,8 +216,7 @@ const _sfc_main = /* @__PURE__ */ Vue.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();
@@ -391,8 +224,9 @@ const _sfc_main = /* @__PURE__ */ Vue.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();
       }
@@ -405,66 +239,29 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         [enlargeStream.value] = roomStore.remoteStreamList;
       }
     };
-    const handleStreamContainerScroll = async () => {
-      await Vue.nextTick();
-      const childDom = streamListRef.value.children[0];
-      let index2 = 0;
-      let finalIndex = 0;
-      let number = 0;
-      if (layout.value === render.LAYOUT.RIGHT_SIDE_LIST) {
-        const firstChildHeight = childDom.offsetHeight + 10;
-        const normalChildHeight = childDom.offsetHeight + 14;
-        const streamListRefEnd = streamListRef.value.scrollTop + streamListRef.value.offsetHeight;
-        index2 = Math.floor((streamListRef.value.scrollTop - firstChildHeight) / normalChildHeight) + 1;
-        finalIndex = Math.ceil((streamListRefEnd - firstChildHeight) / normalChildHeight) + 1;
-      } else if (layout.value === render.LAYOUT.TOP_SIDE_LIST) {
-        const firstChildWidth = childDom.offsetWidth;
-        const normalChildWidth = childDom.offsetWidth + 14;
-        const streamListRefEnd = streamListRef.value.scrollLeft + streamListRef.value.offsetWidth;
-        index2 = Math.floor((streamListRef.value.scrollLeft - firstChildWidth) / normalChildWidth) + 1;
-        finalIndex = Math.ceil((streamListRefEnd - firstChildWidth) / normalChildWidth) + 1;
-      }
-      if (index2 < 0) {
-        index2 = 0;
-      }
-      number = finalIndex - index2;
-      if (number > showStreamList.value.length - index2) {
-        number = showStreamList.value.length - index2;
-      }
-      const streamUserIdList = [];
-      [...new Array(number)].forEach(() => {
-        const currentStreamId = `${showStreamList.value[index2].userId}_${showStreamList.value[index2].streamType}`;
-        streamUserIdList.push(currentStreamId);
-        index2 = index2 + 1;
-      });
-      streamUserIdList.push(enlargeDomId.value);
-      roomStore.updateUserStreamVisible(streamUserIdList);
-    };
-    function handleWheel(event) {
-      streamListRef.value.scrollLeft += event.deltaY;
-    }
-    const handleStreamContainerScrollDebounce = utils.debounce(handleStreamContainerScroll, 300);
-    Vue.onMounted(() => {
-      streamListRef.value.addEventListener("scroll", handleStreamContainerScrollDebounce);
-    });
-    Vue.onUnmounted(() => {
-      streamListRef.value && streamListRef.value.removeEventListener("scroll", handleStreamContainerScrollDebounce);
-    });
     TUIRoomEngine.once("ready", () => {
-      var _a, _b, _c, _d, _e;
-      (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEngine.TUIRoomEvents.onRemoteUserEnterRoom, onRemoteUserEnterRoom);
-      (_b = roomEngine.instance) == null ? void 0 : _b.on(TUIRoomEngine.TUIRoomEvents.onRemoteUserLeaveRoom, onRemoteUserLeaveRoom);
-      (_c = roomEngine.instance) == null ? void 0 : _c.on(TUIRoomEngine.TUIRoomEvents.onSeatListChanged, onSeatListChanged);
-      (_d = roomEngine.instance) == null ? void 0 : _d.on(TUIRoomEngine.TUIRoomEvents.onUserVideoStateChanged, onUserVideoStateChanged);
-      (_e = roomEngine.instance) == null ? void 0 : _e.on(TUIRoomEngine.TUIRoomEvents.onUserAudioStateChanged, onUserAudioStateChanged);
+      var _a, _b, _c;
+      (_a = roomEngine.instance) == null ? void 0 : _a.on(
+        TUIRoomEngine.TUIRoomEvents.onRemoteUserLeaveRoom,
+        onRemoteUserLeaveRoom
+      );
+      (_b = roomEngine.instance) == null ? void 0 : _b.on(TUIRoomEngine.TUIRoomEvents.onSeatListChanged, onSeatListChanged);
+      (_c = roomEngine.instance) == null ? void 0 : _c.on(
+        TUIRoomEngine.TUIRoomEvents.onUserVideoStateChanged,
+        onUserVideoStateChanged
+      );
     });
     Vue.onUnmounted(() => {
-      var _a, _b, _c, _d, _e;
-      (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEngine.TUIRoomEvents.onRemoteUserEnterRoom, onRemoteUserEnterRoom);
-      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEngine.TUIRoomEvents.onRemoteUserLeaveRoom, onRemoteUserLeaveRoom);
-      (_c = roomEngine.instance) == null ? void 0 : _c.off(TUIRoomEngine.TUIRoomEvents.onSeatListChanged, onSeatListChanged);
-      (_d = roomEngine.instance) == null ? void 0 : _d.off(TUIRoomEngine.TUIRoomEvents.onUserVideoStateChanged, onUserVideoStateChanged);
-      (_e = roomEngine.instance) == null ? void 0 : _e.off(TUIRoomEngine.TUIRoomEvents.onUserAudioStateChanged, onUserAudioStateChanged);
+      var _a, _b, _c;
+      (_a = roomEngine.instance) == null ? void 0 : _a.off(
+        TUIRoomEngine.TUIRoomEvents.onRemoteUserLeaveRoom,
+        onRemoteUserLeaveRoom
+      );
+      (_b = roomEngine.instance) == null ? void 0 : _b.off(TUIRoomEngine.TUIRoomEvents.onSeatListChanged, onSeatListChanged);
+      (_c = roomEngine.instance) == null ? void 0 : _c.off(
+        TUIRoomEngine.TUIRoomEvents.onUserVideoStateChanged,
+        onUserVideoStateChanged
+      );
     });
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", {
@@ -477,39 +274,24 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           class: "enlarged-stream-container"
         }, [
           enlargeStream.value ? (Vue.openBlock(), Vue.createBlock(index.default, {
-            key: `${enlargeStream.value.userId}_${enlargeStream.value.streamType}`,
-            stream: enlargeStream.value,
-            style: Vue.normalizeStyle(enlargedStreamStyle.value)
-          }, null, 8, ["stream", "style"])) : Vue.createCommentVNode("", true)
+            key: 0,
+            streamInfo: enlargeStream.value,
+            aspectRatio: "16:9",
+            isEnlarge: true,
+            observerViewInVisible: true
+          }, null, 8, ["streamInfo"])) : Vue.createCommentVNode("", true)
         ], 512), [
-          [Vue.vShow, showIconControl.value]
+          [Vue.vShow, enlargeStream.value]
         ]),
-        Vue.createElementVNode("div", {
-          class: Vue.normalizeClass(["stream-list-container", `${showSideList.value ? "" : "hide-list"}`])
-        }, [
-          Vue.createElementVNode("div", {
-            ref_key: "streamListRef",
-            ref: streamListRef,
-            style: Vue.normalizeStyle(streamListStyle.value),
-            class: "stream-list",
-            onScroll: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => Vue.unref(handleStreamContainerScrollDebounce) && Vue.unref(handleStreamContainerScrollDebounce)(...args)),
-            onWheel: handleWheel
-          }, [
-            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(streamList), (stream) => {
-              return Vue.withDirectives((Vue.openBlock(), Vue.createBlock(index.default, {
-                key: `${stream.userId}_${stream.streamType}`,
-                stream,
-                "enlarge-dom-id": enlargeDomId.value,
-                class: "single-stream",
-                style: Vue.normalizeStyle(streamStyle.value),
-                onRoomDblclick: ($event) => handleEnlargeStreamRegion(stream)
-              }, null, 8, ["stream", "enlarge-dom-id", "style", "onRoomDblclick"])), [
-                [Vue.vShow, showStreamList.value.indexOf(stream) > -1]
-              ]);
-            }), 128))
-          ], 36)
-        ], 2),
+        Vue.createVNode(index$1.default, {
+          class: Vue.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) ? (Vue.openBlock(), Vue.createBlock(ArrowStroke.default, {
           key: 0,
           class: Vue.normalizeClass([`arrow-stroke-${arrowDirection.value}`]),

package/lib/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;
 };