@tencentcloud/roomkit-electron-vue3 2.3.3

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

@@ -0,0 +1,545 @@
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, nextTick, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, createBlock, normalizeStyle, createCommentVNode, vShow, unref, Fragment, renderList, 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 { MESSAGE_DURATION } from "../../../constants/message.mjs";
+import { debounce } from "../../../utils/utils.mjs";
+import logger from "../../../utils/common/logger/index.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, { TUIRoomEvents, TUIChangeReason, TUIVideoStreamType } 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 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);
+    function handleTurnPageLeft() {
+      currentPageIndex.value = currentPageIndex.value - 1;
+      handleNineEqualPointsLayout();
+    }
+    function handleTurnPageRight() {
+      currentPageIndex.value = currentPageIndex.value + 1;
+      handleNineEqualPointsLayout();
+    }
+    const streamContainerClass = ref("");
+    const enlargedContainerRef = ref();
+    const streamListRef = ref();
+    const arrowDirection = computed(() => {
+      let arrowDirection2 = "right";
+      if (layout.value === LAYOUT.TOP_SIDE_LIST) {
+        arrowDirection2 = showSideList.value ? "up" : "down";
+      }
+      if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
+        arrowDirection2 = showSideList.value ? "right" : "left";
+      }
+      return arrowDirection2;
+    });
+    const strokePosition = computed(() => {
+      let strokePosition2 = "";
+      if (layout.value === LAYOUT.TOP_SIDE_LIST) {
+        strokePosition2 = "bottom";
+      }
+      if (layout.value === LAYOUT.RIGHT_SIDE_LIST) {
+        strokePosition2 = "left";
+      }
+      return strokePosition2;
+    });
+    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) {
+        return roomStore.localScreenStream;
+      }
+      if (remoteStreamList.value.length > 0) {
+        const remoteScreenStream = remoteStreamList.value.find((stream) => stream.streamType === TUIVideoStreamType.kScreenStream && stream.hasScreenStream);
+        return remoteScreenStream ? remoteScreenStream : remoteStreamList.value[0];
+      }
+      return roomStore.localStream;
+    }
+    async function handleRightSideListLayout() {
+      streamContainerClass.value = "stream-container-right";
+      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";
+      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) {
+        basicStore.setLayout(LAYOUT.RIGHT_SIDE_LIST);
+      }
+      enlargeStream.value = stream;
+    }
+    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();
+          break;
+        case LAYOUT.RIGHT_SIDE_LIST:
+          await handleRightSideListLayout();
+          await handleStreamContainerScroll();
+          break;
+        case LAYOUT.TOP_SIDE_LIST:
+          await handleTopSideListLayout();
+          await handleStreamContainerScroll();
+          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, () => {
+      if (layout.value === LAYOUT.NINE_EQUAL_POINTS) {
+        handleNineEqualPointsLayout();
+      }
+    });
+    watch(layout, () => {
+      handleLayout();
+    });
+    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) {
+          renderMsg({
+            type: "warning",
+            message: t("The host has turned off your screen sharing"),
+            duration: MESSAGE_DURATION.NORMAL
+          });
+        }
+      }
+      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) {
+            basicStore.setLayout(LAYOUT.RIGHT_SIDE_LIST);
+          }
+          if (userId !== basicStore.userId) {
+            roomStore.setHasOtherScreenShare(true);
+          }
+        } else {
+          if (userId === ((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
+            handleLargeStreamLeave();
+          }
+          if (userId !== basicStore.userId) {
+            roomStore.setHasOtherScreenShare(false);
+          }
+          logger.debug(`${logPrefix} onUserVideoStateChanged: stop`, userId, streamType);
+          (_b = roomEngine.instance) == null ? void 0 : _b.stopPlayRemoteVideo({
+            userId,
+            streamType
+          });
+        }
+      }
+    };
+    const onSeatListChanged = (eventInfo) => {
+      var _a;
+      const { seatedList, leftList } = eventInfo;
+      roomStore.updateOnSeatList(seatedList, leftList);
+      const leftUserIdList = leftList.map((item) => item.userId);
+      if (enlargeStream.value && leftUserIdList.includes((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
+        handleLargeStreamLeave();
+      }
+    };
+    const onRemoteUserLeaveRoom = (eventInfo) => {
+      var _a;
+      const { userInfo: { userId } } = eventInfo;
+      roomStore.removeRemoteUser(userId);
+      if (userId === ((_a = enlargeStream.value) == null ? void 0 : _a.userId)) {
+        handleLargeStreamLeave();
+      }
+    };
+    const handleLargeStreamLeave = () => {
+      if (roomStore.remoteStreamList.length === 0) {
+        basicStore.setLayout(LAYOUT.NINE_EQUAL_POINTS);
+        enlargeStream.value = null;
+      } else {
+        [enlargeStream.value] = roomStore.remoteStreamList;
+      }
+    };
+    const handleStreamContainerScroll = async () => {
+      const childDom = streamListRef.value.children[0];
+      await nextTick();
+      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.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);
+    });
+    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);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: "streamContainer",
+        class: normalizeClass(streamContainerClass.value)
+      }, [
+        withDirectives(createElementVNode("div", {
+          ref_key: "enlargedContainerRef",
+          ref: enlargedContainerRef,
+          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)
+        ], 512), [
+          [vShow, showIconControl.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),
+                onRoom_dblclick: ($event) => handleEnlargeStreamRegion(stream)
+              }, null, 8, ["stream", "enlarge-dom-id", "style", "onRoom_dblclick"])), [
+                [vShow, showStreamList.value.indexOf(stream) > -1]
+              ]);
+            }), 128))
+          ], 36)
+        ], 2),
+        showIconControl.value && (_ctx.showRoomTool || showSideList.value) ? (openBlock(), createBlock(ArrowStroke, {
+          key: 0,
+          class: normalizeClass([`arrow-stroke-${arrowDirection.value}`]),
+          "stroke-position": strokePosition.value,
+          "arrow-direction": arrowDirection.value,
+          "has-stroke": showSideList.value,
+          onClickArrow: handleClickIcon
+        }, null, 8, ["class", "stroke-position", "arrow-direction", "has-stroke"])) : createCommentVNode("", true),
+        showTurnPageControl.value && _ctx.showRoomTool ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          withDirectives(createElementVNode("div", {
+            class: "turn-page-arrow-container left-container",
+            onClick: handleTurnPageLeft
+          }, [
+            createVNode(SvgIcon, { icon: ArrowStrokeTurnPageIcon })
+          ], 512), [
+            [vShow, showTurnPageLeftArrow.value]
+          ]),
+          withDirectives(createElementVNode("div", {
+            class: "turn-page-arrow-container right-container",
+            onClick: handleTurnPageRight
+          }, [
+            createVNode(SvgIcon, {
+              class: "turn-page-right",
+              icon: ArrowStrokeTurnPageIcon
+            })
+          ], 512), [
+            [vShow, showTurnPageRightArrow.value]
+          ])
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,21 @@
+import { TUIChangeReason, TUIUserInfo } from '@tencentcloud/tuiroom-engine-electron';
+
+export default function useStreamContainer(): {
+    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;
+    t: any;
+};