@tencentcloud/roomkit-electron-vue3 2.7.2 → 2.8.2

package/lib/components/RoomInvite/useRoomInviteHooks.js

@@ -95,7 +95,7 @@ function useRoomInvite() {
     },
     {
       title: "Room Type",
-      content: `${t(getSeatModeDisplay(isSeatEnabled.value))}`,
+      content: `${t(getSeatModeDisplay(!!isSeatEnabled.value))}`,
       isShowCopyIcon: false,
       isVisible: true
     },
@@ -133,7 +133,7 @@ function useRoomInvite() {
   function copyRoomIdAndRoomLink() {
     const invitationList = [
       roomName.value,
-      `${t("Room Type")}: ${t(getSeatModeDisplay(isSeatEnabled.value))}`,
+      `${t("Room Type")}: ${t(getSeatModeDisplay(!!isSeatEnabled.value))}`,
       `${t("Room ID")}: ${roomId.value}`
     ];
     if (isShowPassword.value) {

package/lib/components/RoomOverlay/RoomOverlay.vue.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const AISubtitles = require("../common/widgets/AITools/AISubtitles.vue.js");
+const useRoomOverlayHooks = require("./useRoomOverlayHooks.js");
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "RoomOverlay",
+  setup(__props) {
+    const { getOverlayMap } = useRoomOverlayHooks.useRoomOverlayHooks();
+    const overlayMap = getOverlayMap();
+    return (_ctx, _cache) => {
+      return Vue.unref(overlayMap).AISubtitlesOverlay.visible ? (Vue.openBlock(), Vue.createBlock(AISubtitles.default, { key: 0 })) : Vue.createCommentVNode("", true);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/RoomOverlay/RoomOverlay.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const RoomOverlay_vue_vue_type_script_setup_true_lang = require("./RoomOverlay.vue.js");
+exports.default = RoomOverlay_vue_vue_type_script_setup_true_lang.default;

package/lib/components/RoomOverlay/useRoomOverlayHooks.d.ts

@@ -0,0 +1,15 @@
+export declare enum OverlayMap {
+    AISubtitlesOverlay = "AISubtitlesOverlay",
+    RoomInviteOverlay = "RoomInviteOverlay"
+}
+export declare function useRoomOverlayHooks(): {
+    getOverlayMap: () => import('vue').Ref<{
+        AISubtitlesOverlay: {
+            visible: boolean;
+        };
+        RoomInviteOverlay: {
+            visible: boolean;
+        };
+    }>;
+    toggleOverlayVisibility: (overlay: OverlayMap, isShow: boolean) => void;
+};

package/lib/components/RoomOverlay/useRoomOverlayHooks.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Vue = require("vue");
+var OverlayMap = /* @__PURE__ */ ((OverlayMap2) => {
+  OverlayMap2["AISubtitlesOverlay"] = "AISubtitlesOverlay";
+  OverlayMap2["RoomInviteOverlay"] = "RoomInviteOverlay";
+  return OverlayMap2;
+})(OverlayMap || {});
+const overlayMap = Vue.ref({
+  [
+    "AISubtitlesOverlay"
+    /* AISubtitlesOverlay */
+  ]: { visible: false },
+  [
+    "RoomInviteOverlay"
+    /* RoomInviteOverlay */
+  ]: { visible: false }
+});
+function useRoomOverlayHooks() {
+  const getOverlayMap = () => overlayMap;
+  const toggleOverlayVisibility = (overlay, isShow) => {
+    overlayMap.value[overlay].visible = isShow;
+  };
+  return {
+    getOverlayMap,
+    toggleOverlayVisibility
+  };
+}
+exports.OverlayMap = OverlayMap;
+exports.useRoomOverlayHooks = useRoomOverlayHooks;

package/lib/components/RoomSidebar/index.vue.js

@@ -6,7 +6,7 @@ const useSideBarHooks = require("./useSideBarHooks.js");
 const index$2 = require("../ManageMember/index.vue.js");
 const index$1 = require("../RoomMore/index.vue.js");
 const index = require("../Chat/index/index.vue.js");
-const AITranscription = require("../AITools/AITranscription.vue.js");
+const AITranscription = require("../common/widgets/AITools/AITranscription.vue.js");
 const _hoisted_1 = { class: "sidebar-container" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "index",

package/lib/components/ScheduleConference/InvitePanel.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const InvitePanel_vue_vue_type_script_setup_true_lang = require("./InvitePanel.vue2.js");
 ;/* empty css                  */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const InvitePanel = /* @__PURE__ */ _pluginVue_exportHelper.default(InvitePanel_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-3b38c13e"]]);
+const InvitePanel = /* @__PURE__ */ _pluginVue_exportHelper.default(InvitePanel_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-50de092b"]]);
 exports.default = InvitePanel;

package/lib/components/ScheduleConference/ScheduleConferencePanel/index.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const ScheduleConferencePanel = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-4728cd03"]]);
+const ScheduleConferencePanel = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-9348c289"]]);
 exports.default = ScheduleConferencePanel;

package/lib/components/ScheduleConference/ScheduleConferencePanel/index.vue2.js

@@ -23,11 +23,11 @@ require("../../../services/main.js");
 const roomService = require("../../../services/roomService.js");
 const types = require("../../../services/types.js");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+require("../../../utils/environment.js");
+const utils = require("../../../utils/utils.js");
 require("mitt");
 require("../../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-require("../../../utils/environment.js");
-const utils = require("../../../utils/utils.js");
 const room = require("../../../constants/room.js");
 const common = require("../../../utils/common.js");
 const scheduleUtils = require("../scheduleUtils.js");
@@ -97,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const passwordChecked = Vue.ref(false);
     const isEditMode = Vue.computed(() => !!props.conferenceInfo);
     const roomId = Vue.ref("");
-    let contacts = [];
+    const contacts = Vue.ref([]);
     const { date: startDate, laterTime: startTime } = scheduleUtils.getDateAndTime(/* @__PURE__ */ new Date());
     const defaultFormData = Vue.ref({
       roomName: t("sb temporary room", {
@@ -136,7 +136,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           });
           form.value.startDate = date;
           form.value.startTime = laterTime;
-          contacts = await roomService.roomService.scheduleConferenceManager.fetchFriendList();
+          contacts.value = await roomService.roomService.scheduleConferenceManager.fetchFriendList();
           isEditMode.value && (form.value = Object.assign({}, utils.deepClone(editParams.value)));
         }
       },
@@ -323,7 +323,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     };
     const searchScheduleAttend = (v) => {
       if (!v) return [];
-      return contacts.filter(
+      return contacts.value.filter(
         (user) => (user == null ? void 0 : user.profile.nick.includes(v)) || (user == null ? void 0 : user.userID.includes(v))
       );
     };
@@ -348,12 +348,15 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const contactsConfirm = (contacts2) => {
       form.value.scheduleAttendees = contacts2;
     };
+    let scheduleConferenceInProgress = false;
     const scheduleConference = async () => {
+      if (scheduleConferenceInProgress) return;
       if (!timeCheck()) return;
       if (!roomNameCheck()) return;
       if (!roomPasswordCheck()) return;
-      roomId.value = String(Math.ceil(Math.random() * 1e6));
+      scheduleConferenceInProgress = true;
       try {
+        roomId.value = await roomService.roomService.scheduleConferenceManager.generateRoomId();
         await roomService.roomService.scheduleConferenceManager.scheduleConference({
           ...scheduleParams.value,
           roomId: roomId.value
@@ -376,6 +379,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           message: err.message
         });
       }
+      scheduleConferenceInProgress = false;
     };
     const compareArrays = (oldArray, newArray, key) => {
       const added = [];
@@ -684,7 +688,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         }, 8, ["visible", "title"]),
         Vue.createVNode(Contacts.default, {
           visible: contactsVisible.value,
-          contacts: Vue.unref(contacts),
+          contacts: contacts.value,
           "selected-list": scheduleParams.value.scheduleAttendees,
           onInput: _cache[12] || (_cache[12] = ($event) => contactsVisible.value = $event),
           onConfirm: contactsConfirm

package/lib/components/ScheduleConference/ScheduleRoomControl.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const ScheduleRoomControl_vue_vue_type_script_setup_true_lang = require("./ScheduleRoomControl.vue2.js");
 ;/* empty css                          */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const ScheduleRoomControl = /* @__PURE__ */ _pluginVue_exportHelper.default(ScheduleRoomControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-2b6e52c3"]]);
+const ScheduleRoomControl = /* @__PURE__ */ _pluginVue_exportHelper.default(ScheduleRoomControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-043bf927"]]);
 exports.default = ScheduleRoomControl;

package/lib/components/ScheduleConference/ScheduleRoomControl.vue2.js

@@ -6,11 +6,11 @@ require("../../services/main.js");
 const roomService = require("../../services/roomService.js");
 const index$1 = require("../../utils/common/logger/index.js");
 const index = require("../../locales/index.js");
+const environment = require("../../utils/environment.js");
+const utils = require("../../utils/utils.js");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-const environment = require("../../utils/environment.js");
-const utils = require("../../utils/utils.js");
 const useRoomInfoHooks = require("../RoomHeader/RoomInfo/useRoomInfoHooks.js");
 const SvgIcon = require("../common/base/SvgIcon.vue.js");
 const index$3 = require("../common/base/Dialog/index.vue.js");
@@ -28,7 +28,7 @@ const pinia = require("pinia");
 const ConferenceDetail = require("./ConferenceDetail.vue.js");
 const InvitePanel = require("./InvitePanel.vue.js");
 const PanelContainer = require("./PanelContainer.vue.js");
-const _withScopeId = (n) => (Vue.pushScopeId("data-v-2b6e52c3"), n = n(), Vue.popScopeId(), n);
+const _withScopeId = (n) => (Vue.pushScopeId("data-v-043bf927"), n = n(), Vue.popScopeId(), n);
 const _hoisted_1 = { class: "schedule-room-control" };
 const _hoisted_2 = ["title"];
 const _hoisted_3 = { class: "schedule-title-text" };

package/lib/components/ScheduleConference/ScheduleRoomList.vue2.js

@@ -6,11 +6,11 @@ const roomService = require("../../services/roomService.js");
 const types = require("../../services/types.js");
 const index = require("../../locales/index.js");
 const TUIRoomEngine = require("@tencentcloud/tuiroom-engine-electron");
+const environment = require("../../utils/environment.js");
+const utils = require("../../utils/utils.js");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-const environment = require("../../utils/environment.js");
-const utils = require("../../utils/utils.js");
 const SvgIcon = require("../common/base/SvgIcon.vue.js");
 const CalendarIcon = require("../common/icons/CalendarIcon.vue.js");
 const ApplyStageLabelIcon = require("../common/icons/ApplyStageLabelIcon.vue.js");

package/lib/components/ScheduleConference/ShareLink.vue2.js

@@ -14,10 +14,10 @@ const basic = require("../../stores/basic.js");
 require("../../services/main.js");
 const roomService = require("../../services/roomService.js");
 require("@tencentcloud/tuiroom-engine-electron");
+require("../../utils/environment.js");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-require("../../utils/environment.js");
 const _hoisted_1 = { class: "invite-member" };
 const _hoisted_2 = { class: "invite-member-title" };
 const _hoisted_3 = { class: "invite-member-item" };

package/lib/components/ScheduleConference/TimezonePicker.vue.js

@@ -8,10 +8,10 @@ const roomService = require("../../services/roomService.js");
 const types = require("../../services/types.js");
 require("../../locales/index.js");
 require("@tencentcloud/tuiroom-engine-electron");
+require("../../utils/environment.js");
 require("mitt");
 require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
-require("../../utils/environment.js");
 const _hoisted_1 = { class: "container" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "TimezonePicker",

package/lib/components/Stream/MultiStreamView/index.vue.d.ts

@@ -0,0 +1,33 @@
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    maxColumn: number;
+    maxRow: number;
+    fillMode?: "fill" | "contain";
+    excludeStreamInfoList?: {
+        userId: string;
+        streamType: TUIVideoStreamType;
+    }[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-view-dblclick": (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    maxColumn: number;
+    maxRow: number;
+    fillMode?: "fill" | "contain";
+    excludeStreamInfoList?: {
+        userId: string;
+        streamType: TUIVideoStreamType;
+    }[];
+}>>> & {
+    "onStream-view-dblclick"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/lib/components/{Chat/MessageList → Stream/MultiStreamView}/index.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
-const MessageList = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-397f419c"]]);
-exports.default = MessageList;
+const MultiStreamView = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-5178602f"]]);
+exports.default = MultiStreamView;

package/lib/components/Stream/MultiStreamView/index.vue2.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const ArrowStrokeTurnPageIcon = require("../../common/icons/ArrowStrokeTurnPageIcon.vue.js");
+const SvgIcon = require("../../common/base/SvgIcon.vue.js");
+const index = require("../common/StreamList/index.vue.js");
+const mediaManager = require("../../../services/manager/mediaManager.js");
+const useMultiStreamViewHook = require("./useMultiStreamViewHook.js");
+const pinia = require("pinia");
+const basic = require("../../../stores/basic.js");
+const _hoisted_1 = { id: "streamContainer" };
+const _hoisted_2 = {
+  key: 0,
+  class: "turn-page-container"
+};
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  props: {
+    maxColumn: {},
+    maxRow: {},
+    fillMode: {},
+    excludeStreamInfoList: {}
+  },
+  emits: ["stream-view-dblclick"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const {
+      column,
+      row,
+      totalPageNumber,
+      isEqualPointsLayout,
+      renderStreamInfoList,
+      equalPointsLayoutStreamList,
+      currentPageIndex
+    } = useMultiStreamViewHook.default(props);
+    const basicStore = basic.useBasicStore();
+    const { showRoomTool } = pinia.storeToRefs(basicStore);
+    const streamInfoList = Vue.computed(() => {
+      if (isEqualPointsLayout.value) {
+        return equalPointsLayoutStreamList.value[currentPageIndex.value];
+      }
+      return renderStreamInfoList.value;
+    });
+    const emits = __emit;
+    function handleStreamDblclick(streamInfo) {
+      emits("stream-view-dblclick", streamInfo);
+    }
+    const showTurnPageControl = Vue.computed(
+      () => isEqualPointsLayout.value && totalPageNumber.value > 1
+    );
+    const showTurnPageLeftArrow = Vue.computed(
+      () => isEqualPointsLayout.value && currentPageIndex.value > 0
+    );
+    const showTurnPageRightArrow = Vue.computed(
+      () => isEqualPointsLayout.value && currentPageIndex.value < totalPageNumber.value - 1
+    );
+    function handleTurnPageLeft() {
+      currentPageIndex.value = currentPageIndex.value - 1;
+    }
+    function handleTurnPageRight() {
+      currentPageIndex.value = currentPageIndex.value + 1;
+    }
+    return (_ctx, _cache) => {
+      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        Vue.createVNode(index.default, {
+          streamInfoList: streamInfoList.value,
+          column: Vue.unref(column),
+          row: Vue.unref(row),
+          streamPlayMode: Vue.unref(mediaManager.StreamPlayMode).PLAY_IN_VISIBLE,
+          streamPlayQuality: Vue.unref(mediaManager.StreamPlayQuality).Default,
+          "aspect-ratio": "16:9",
+          onStreamViewDblclick: handleStreamDblclick
+        }, null, 8, ["streamInfoList", "column", "row", "streamPlayMode", "streamPlayQuality"]),
+        showTurnPageControl.value && Vue.unref(showRoomTool) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
+          Vue.withDirectives(Vue.createElementVNode("div", {
+            class: "turn-page-arrow-container left-container",
+            onClick: handleTurnPageLeft
+          }, [
+            Vue.createVNode(SvgIcon.default, { icon: ArrowStrokeTurnPageIcon.default })
+          ], 512), [
+            [Vue.vShow, showTurnPageLeftArrow.value]
+          ]),
+          Vue.withDirectives(Vue.createElementVNode("div", {
+            class: "turn-page-arrow-container right-container",
+            onClick: handleTurnPageRight
+          }, [
+            Vue.createVNode(SvgIcon.default, {
+              class: "turn-page-right",
+              icon: ArrowStrokeTurnPageIcon.default
+            })
+          ], 512), [
+            [Vue.vShow, showTurnPageRightArrow.value]
+          ])
+        ])) : Vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Stream/MultiStreamView/useMultiStreamViewHook.d.ts

@@ -0,0 +1,17 @@
+import { ComputedRef } from 'vue';
+import { StreamInfo } from '../../../stores/room';
+
+export default function useMultiStreamViewHook(props: any): {
+    column: ComputedRef<any>;
+    row: ComputedRef<any>;
+    isHorizontalInfinityLayout: ComputedRef<boolean>;
+    isVerticalInfinityLayout: ComputedRef<boolean>;
+    isEqualPointsLayout: ComputedRef<boolean>;
+    maxCountEveryPage: ComputedRef<number>;
+    streamList: any;
+    renderStreamInfoList: ComputedRef<StreamInfo[]>;
+    equalPointsLayoutStreamList: ComputedRef<StreamInfo[][]>;
+    totalStreamNumber: ComputedRef<any>;
+    totalPageNumber: ComputedRef<number>;
+    currentPageIndex: import('vue').Ref<number>;
+};

package/lib/components/Stream/MultiStreamView/useMultiStreamViewHook.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const room = require("../../../stores/room.js");
+const pinia = require("pinia");
+function useMultiStreamViewHook(props) {
+  const roomStore = room.useRoomStore();
+  const { streamList } = pinia.storeToRefs(roomStore);
+  const isHorizontalInfinityLayout = Vue.computed(
+    () => props.maxColumn === Infinity
+  );
+  const isVerticalInfinityLayout = Vue.computed(() => props.maxRow === Infinity);
+  const isEqualPointsLayout = Vue.computed(
+    () => props.maxColumn !== Infinity && props.maxRow !== Infinity
+  );
+  const column = Vue.computed(() => {
+    if (props.maxColumn === Infinity) {
+      return props.maxColumn;
+    }
+    return Math.min(
+      Math.ceil(Math.sqrt(renderStreamInfoList.value.length)),
+      props.maxColumn
+    );
+  });
+  const row = Vue.computed(() => {
+    if (props.maxRow === Infinity) {
+      return props.maxRow;
+    }
+    return Math.min(
+      Math.ceil(renderStreamInfoList.value.length / column.value),
+      props.maxRow
+    );
+  });
+  const currentPageIndex = Vue.ref(0);
+  const maxCountEveryPage = Vue.computed(() => props.maxColumn * props.maxRow);
+  const renderStreamInfoList = Vue.computed(() => {
+    if (props.streamInfoList) {
+      return props.streamInfoList;
+    }
+    return streamList.value.filter(
+      (item1) => {
+        var _a;
+        return !((_a = props.excludeStreamInfoList) == null ? void 0 : _a.find(
+          (item2) => item2.userId === item1.userId && item2.streamType === item1.streamType
+        ));
+      }
+    );
+  });
+  Vue.watch(
+    () => renderStreamInfoList.value.length,
+    (val) => {
+      if (isEqualPointsLayout.value) {
+        if (currentPageIndex.value > 0 && currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1) {
+          currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
+        }
+      }
+    }
+  );
+  const totalStreamNumber = Vue.computed(() => {
+    return streamList.value.length;
+  });
+  const equalPointsLayoutStreamList = Vue.computed(
+    () => {
+      if (isEqualPointsLayout.value) {
+        return [...new Array(totalPageNumber.value).keys()].map(
+          (pageIndex) => {
+            return renderStreamInfoList.value.slice(
+              pageIndex * maxCountEveryPage.value,
+              (pageIndex + 1) * maxCountEveryPage.value
+            );
+          }
+        );
+      }
+      return [[]];
+    }
+  );
+  const totalPageNumber = Vue.computed(
+    () => Math.ceil(renderStreamInfoList.value.length / maxCountEveryPage.value)
+  );
+  return {
+    column,
+    row,
+    isHorizontalInfinityLayout,
+    isVerticalInfinityLayout,
+    isEqualPointsLayout,
+    maxCountEveryPage,
+    streamList,
+    renderStreamInfoList,
+    equalPointsLayoutStreamList,
+    totalStreamNumber,
+    totalPageNumber,
+    currentPageIndex
+  };
+}
+exports.default = useMultiStreamViewHook;

package/lib/components/Stream/SingleStreamView/index.vue.d.ts

@@ -0,0 +1,25 @@
+import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+
+interface Props {
+    streamInfo?: {
+        userId: string;
+        streamType: TUIVideoStreamType;
+    };
+    fillMode?: 'fill' | 'contain';
+    supportTouchScale?: boolean;
+}
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "stream-view-dblclick": (...args: any[]) => void;
+}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+    "onStream-view-dblclick"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/lib/components/Stream/SingleStreamView/index.vue.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const index = require("../common/StreamRegion/index.vue.js");
+const environment = require("../../../utils/environment.js");
+const mediaManager = require("../../../services/manager/mediaManager.js");
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "index",
+  props: {
+    streamInfo: {},
+    fillMode: {},
+    supportTouchScale: { type: Boolean }
+  },
+  emits: ["stream-view-dblclick"],
+  setup(__props) {
+    const aspectRatio = Vue.ref(environment.isPC ? "16:9" : "auto");
+    return (_ctx, _cache) => {
+      return _ctx.streamInfo ? (Vue.openBlock(), Vue.createBlock(index.default, {
+        key: 0,
+        "stream-info": _ctx.streamInfo,
+        "fill-mode": _ctx.fillMode,
+        "support-touch-scale": _ctx.supportTouchScale,
+        "stream-play-quality": Vue.unref(mediaManager.StreamPlayQuality).HIGH,
+        "aspect-ratio": aspectRatio.value,
+        onStreamViewDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("stream-view-dblclick"))
+      }, null, 8, ["stream-info", "fill-mode", "support-touch-scale", "stream-play-quality", "aspect-ratio"])) : Vue.createCommentVNode("", true);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/Stream/SingleStreamView/index.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
+exports.default = index_vue_vue_type_script_setup_true_lang.default;

package/lib/components/{RoomContent/StreamRegion → Stream/common}/LocalScreenView/index.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const index_vue_vue_type_script_setup_true_lang = ;/* empty css            */
 ;/* empty css            */
 const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
-const LocalScreenView = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-222da582"]]);
+const LocalScreenView = /* @__PURE__ */ _pluginVue_exportHelper.default(index_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-f3e45334"]]);
 exports.default = LocalScreenView;