cnhis-design-vue 3.3.3-beta.7 → 3.3.3-beta.72

package/es/components/iho-chat/src/components/MultipleVideo.vue2.js

@@ -1,11 +1,11 @@
-import { createElementVNode, defineComponent, ref, computed, onBeforeUnmount, openBlock, createElementBlock, withDirectives, toDisplayString, unref, vShow, createVNode, withCtx, Fragment, renderList, createCommentVNode, createTextVNode, nextTick } from 'vue';
-import { NButton, NIcon } from 'naive-ui';
+import { createElementVNode, defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createElementBlock, Fragment, withDirectives, normalizeStyle, unref, toDisplayString, vShow, createVNode, withCtx, renderList, createCommentVNode, createTextVNode, nextTick } from 'vue';
+import { NButton, NIcon, NAvatar } from 'naive-ui';
 import ChatAdd from './ChatAdd.vue.js';
-import { Close, Mic, MicOff, Videocam, VideocamOff, Call, PersonAdd } from '@vicons/ionicons5';
+import { Close, Mic, MicOff, Videocam, VideocamOff, Call, PersonAdd, ResizeOutline } from '@vicons/ionicons5';
 import { getUserDetailApi } from '../api/index.js';
 import '@vueuse/core';
 import { $message } from '../utils/index.js';
-import { xorBy } from 'lodash-es';
+import 'lodash-es';
 import { CHAT_TYPE, SUBSCRIBE_MESSAGE_TYPE } from '../constants/index.js';
 import '../../../../shared/utils/index.js';
 import 'date-fns';
@@ -16,32 +16,29 @@ import '../../../../shared/hooks/useScrollLoading.js';
 import 'stompjs';
 import 'sockjs-client/dist/sockjs.min.js';
 import { useVideo } from '../hooks/useVideo.js';
-import TRTC from 'trtc-sdk-v5';
+import { useDraggable } from '../hooks/useDraggable.js';
 
 const _hoisted_1 = {
-  class: "video-wrapper video-wrapper--multiple"
+  class: "top-right-btns"
 };
 const _hoisted_2 = {
-  class: "video-header"
-};
-const _hoisted_3 = {
   key: 0,
   class: "video-main"
 };
-const _hoisted_4 = {
+const _hoisted_3 = {
   class: "video-main__left"
 };
-const _hoisted_5 = ["data-name"];
-const _hoisted_6 = {
+const _hoisted_4 = ["data-name"];
+const _hoisted_5 = {
   class: "video-bottom"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   class: "btn-group"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   class: "btn"
 };
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", {
   class: "text"
 }, function() {
   var _a, _b, _c;
@@ -51,10 +48,10 @@ const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", {
     return "\u9759\u97F3";
   }
 }(), -1);
-const _hoisted_10 = {
+const _hoisted_9 = {
   class: "btn"
 };
-const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", {
   class: "text"
 }, function() {
   var _a, _b, _c;
@@ -64,7 +61,7 @@ const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", {
     return "\u6444\u50CF\u5934";
   }
 }(), -1);
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", {
   class: "text"
 }, function() {
   var _a, _b, _c;
@@ -74,10 +71,10 @@ const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", {
     return "\u7ED3\u675F\u4F1A\u8BCA";
   }
 }(), -1);
-const _hoisted_13 = {
+const _hoisted_12 = {
   class: "btn"
 };
-const _hoisted_14 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", {
   class: "text"
 }, function() {
   var _a, _b, _c;
@@ -87,35 +84,35 @@ const _hoisted_14 = /* @__PURE__ */ createElementVNode("span", {
     return "\u6DFB\u52A0\u53C2\u4F1A\u4EBA";
   }
 }(), -1);
-const _hoisted_15 = {
+const _hoisted_14 = {
   class: "video-main__right"
 };
-const _hoisted_16 = ["id", "data-name"];
-const _hoisted_17 = {
+const _hoisted_15 = ["id", "data-name"];
+const _hoisted_16 = {
   class: "user"
 };
-const _hoisted_18 = {
+const _hoisted_17 = {
   class: "name"
 };
-const _hoisted_19 = {
+const _hoisted_18 = {
   key: 0,
   class: "tip"
 };
-const _hoisted_20 = {
+const _hoisted_19 = {
   key: 0,
   class: "calling-box"
 };
-const _hoisted_21 = {
+const _hoisted_20 = {
   class: "btn-box"
 };
-const _hoisted_22 = {
+const _hoisted_21 = {
   key: 1,
   class: "opt-btn"
 };
-const _hoisted_23 = {
+const _hoisted_22 = {
   class: "btn"
 };
-const _hoisted_24 = /* @__PURE__ */ createElementVNode("span", null, function() {
+const _hoisted_23 = /* @__PURE__ */ createElementVNode("span", null, function() {
   var _a, _b, _c;
   try {
     return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.113")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.113")) || "\u62D2\u63A5";
@@ -123,10 +120,10 @@ const _hoisted_24 = /* @__PURE__ */ createElementVNode("span", null, function()
     return "\u62D2\u63A5";
   }
 }(), -1);
-const _hoisted_25 = {
+const _hoisted_24 = {
   class: "btn"
 };
-const _hoisted_26 = /* @__PURE__ */ createElementVNode("span", null, function() {
+const _hoisted_25 = /* @__PURE__ */ createElementVNode("span", null, function() {
   var _a, _b, _c;
   try {
     return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.114")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.114")) || "\u63A5\u542C";
@@ -134,30 +131,51 @@ const _hoisted_26 = /* @__PURE__ */ createElementVNode("span", null, function()
     return "\u63A5\u542C";
   }
 }(), -1);
+const _hoisted_26 = {
+  class: "header"
+};
+const _hoisted_27 = {
+  class: "content"
+};
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MultipleVideo",
   setup(__props) {
     const selfVideoRef = ref();
-    const remoteUsers = ref([]);
     const {
       state,
       sendMessage,
-      trtc,
-      trtcProxy,
       voiceClose,
       isAudio,
       isCall,
       startTimer,
-      resetTimer,
       toggleAudio,
       messageTypeText,
       timing,
       toggleVideo,
       videocamClose,
       installEventHandlers,
-      uninstallEventHandlers
-    } = useVideo();
-    const isConnect = ref(false);
+      uninstallEventHandlers,
+      isConnect,
+      remoteUsers,
+      enterRoom,
+      exitRoom,
+      startLocalMedia,
+      findUser,
+      addOrUpdateUser,
+      removeUser,
+      tryRenderRemoteVideo,
+      stopRemoteVideo,
+      setVideoRef,
+      checkAndRenderAllVideos,
+      MAIN_STREAM_TYPE
+    } = useVideo({
+      isMultiple: true,
+      enableRetry: true
+    });
+    const wrapperRef = ref(null);
+    const handleRef = ref(null);
+    const isMaxSize = ref(true);
+    const miniWrapperRef = ref(null);
     const callUser = computed(() => isCall.value ? state.userInfo.name : state.currentAVMsg.sendName);
     const title = computed(() => {
       if (!isConnect.value)
@@ -165,18 +183,58 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const count = isCall.value ? `\uFF08${remoteUsers.value.length + 1}/${state.currentAVMsg.checkedIds.length + 1}\uFF09` : "";
       return `${callUser.value}\u53D1\u8D77\u7684${messageTypeText.value}\u4F1A\u8BCA${count} ${timing.value}`;
     });
+    const {
+      style,
+      changePosition
+    } = useDraggable(wrapperRef, {
+      initialPosition: "center",
+      handle: handleRef
+    });
+    const {
+      style: miniStyle,
+      changePosition: changeMiniPosition
+    } = useDraggable(miniWrapperRef);
+    watch(() => isMaxSize.value, (val) => {
+      if (val) {
+        changePosition("center");
+      } else {
+        changeMiniPosition("top-right");
+      }
+    });
+    watch(() => remoteUsers.value.length, (newLength, oldLength) => {
+      console.log(`Remote users count changed: ${oldLength} -> ${newLength}`);
+      if (newLength > 0 && isConnect.value) {
+        setTimeout(() => {
+          checkAndRenderAllVideos();
+        }, 500);
+      }
+    });
     function handleAddPerson({
       checkedIds,
       checkedOptions
     }) {
-      console.log("checkedIds :>> ", checkedIds, checkedOptions);
-      state.currentAVMsg.checkedIds.push(...checkedIds);
-      handleCall();
+      if (!(checkedIds == null ? void 0 : checkedIds.length)) {
+        console.warn("No users selected to add");
+        return;
+      }
+      console.log("Adding persons to call:", checkedIds, checkedOptions);
+      try {
+        state.currentAVMsg.checkedIds.push(...checkedIds);
+        if (isConnect.value) {
+          sendInvitations(checkedIds);
+        } else {
+          handleCall();
+        }
+      } catch (error) {
+        console.error("Error adding persons to call:", error);
+        $message.error("\u6DFB\u52A0\u53C2\u4F1A\u4EBA\u5931\u8D25");
+      }
     }
-    function handleCall() {
-      var _a;
-      if ((_a = state.currentAVMsg.checkedIds) == null ? void 0 : _a.length) {
-        state.currentAVMsg.checkedIds.forEach((id) => {
+    function sendInvitations(userIds) {
+      if (!(userIds == null ? void 0 : userIds.length))
+        return;
+      userIds.forEach((id) => {
+        try {
           sendMessage({
             chatType: CHAT_TYPE.SINGLE,
             content: {
@@ -185,154 +243,279 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             },
             receiver: id
           });
-        });
-      }
-      if (isConnect.value)
+        } catch (error) {
+          console.error("Failed to send invitation to user:", id, error);
+        }
+      });
+    }
+    function handleCall() {
+      var _a;
+      if (isConnect.value) {
+        console.log("Already connected to call");
         return;
-      handleEnter();
+      }
+      try {
+        if ((_a = state.currentAVMsg.checkedIds) == null ? void 0 : _a.length) {
+          sendInvitations(state.currentAVMsg.checkedIds);
+        }
+        handleEnter();
+      } catch (error) {
+        console.error("Error starting call:", error);
+        $message.error("\u5F00\u59CB\u901A\u8BDD\u5931\u8D25");
+      }
     }
     async function handleEnter() {
-      const checkResult = await TRTC.isSupported();
-      if (!checkResult.result || !checkResult.detail.isH264EncodeSupported || !checkResult.detail.isH264DecodeSupported) {
-        console.log("checkResult :>> ", checkResult);
+      const success = await enterRoom();
+      if (!success) {
         state.showMultipleVideo = false;
         return;
       }
       try {
-        await trtc.enterRoom({
-          strRoomId: state.currentAVMsg.strRoomId,
-          sdkAppId: parseInt(state.userInfo.sdkAppID),
-          userId: state.userInfo.id,
-          userSig: state.userInfo.userSig,
-          proxy: trtcProxy.value
-        });
-        isConnect.value = true;
         startTimer();
         installEventHandlers({
           handleError,
           handleRemoteUserEnter,
           handleRemoteAudioAvailable,
           handleRemoteUserExit,
-          handleRemoteVideoAvailable
-        });
-        await trtc.startLocalAudio({
-          mute: voiceClose.value
-        });
-        if (isAudio.value)
-          return;
-        await trtc.startLocalVideo({
-          view: selfVideoRef.value,
-          mute: videocamClose.value
+          handleRemoteVideoAvailable,
+          handleRemoteVideoUnavailable
         });
+        await startLocalMedia(selfVideoRef.value);
+        console.log("Successfully set up multiple video call");
+        setTimeout(() => {
+          checkAndRenderAllVideos();
+        }, 1e3);
+        periodicCheckInterval = setInterval(() => {
+          if (isConnect.value && remoteUsers.value.length > 0) {
+            console.log("Periodic video check, current users:", remoteUsers.value.map((u) => `${u.id}(video:${u.hasVideo})`));
+            checkAndRenderAllVideos();
+          } else if (!isConnect.value) {
+            console.log("Not connected, clearing check interval");
+            if (periodicCheckInterval) {
+              clearInterval(periodicCheckInterval);
+              periodicCheckInterval = null;
+            }
+          }
+        }, 5e3);
       } catch (error) {
-        console.log("error :>> ", error);
-        $message.error(error);
-        state.showMultipleVideo = false;
+        console.error("Error setting up multiple video call:", error);
       }
     }
     async function handleExit() {
       try {
         state.showMultipleVideo = false;
-        uninstallEventHandlers({
-          handleError,
-          handleRemoteUserEnter,
-          handleRemoteAudioAvailable,
-          handleRemoteUserExit,
-          handleRemoteVideoAvailable
-        });
-        await trtc.exitRoom();
-        await trtc.stopLocalAudio();
-        if (isAudio.value)
-          return;
-        await trtc.stopLocalVideo();
+        if (isConnect.value) {
+          uninstallEventHandlers({
+            handleError,
+            handleRemoteUserEnter,
+            handleRemoteAudioAvailable,
+            handleRemoteUserExit,
+            handleRemoteVideoAvailable,
+            handleRemoteVideoUnavailable
+          });
+        }
+        await exitRoom();
       } catch (error) {
-        console.log("error :>> ", error);
+        console.error("Error during exit:", error);
       }
     }
     async function handleRemoteVideoAvailable(event) {
       const {
         userId,
-        streamType
+        streamType,
+        available
       } = event;
+      if (!userId) {
+        return;
+      }
+      const isMainStream = !streamType || streamType === MAIN_STREAM_TYPE;
+      if (!isMainStream) {
+        return;
+      }
       try {
-        if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) {
+        console.log(`Remote video ${available ? "available" : "unavailable"} for user:`, userId);
+        let user = findUser(userId);
+        if (!user) {
+          const name = await getUserName(userId);
+          addOrUpdateUser(userId, {
+            name,
+            hasVideo: true
+          });
+          console.log("Added user from video available event:", userId, name);
           await nextTick();
-          await trtc.startRemoteVideo({
-            userId,
-            streamType,
-            view: userId
+          setTimeout(() => {
+            tryRenderRemoteVideo(userId);
+          }, 100);
+        } else {
+          addOrUpdateUser(userId, {
+            hasVideo: true
           });
+          await nextTick();
+          await tryRenderRemoteVideo(userId);
         }
       } catch (error) {
-        console.log("error :>> ", error);
+        console.error("Error handling remote video available:", error);
       }
     }
+    async function handleRemoteVideoUnavailable(event) {
+      const {
+        userId,
+        streamType,
+        available
+      } = event;
+      addOrUpdateUser(userId, {
+        hasVideo: false
+      });
+      await stopRemoteVideo(userId);
+    }
     async function handleRemoteAudioAvailable(event) {
-      var _a;
       const {
-        userId
+        userId,
+        available
       } = event;
-      if (userId && !((_a = remoteUsers.value.map((user) => user.id)) == null ? void 0 : _a.includes(userId))) {
-        const name = await getUserName(userId);
-        remoteUsers.value.push({
-          id: userId,
-          name
-        });
+      if (!userId)
+        return;
+      try {
+        console.log(`Remote audio ${available ? "available" : "unavailable"} for user:`, userId);
+        let user = findUser(userId);
+        if (!user && available) {
+          const name = await getUserName(userId);
+          addOrUpdateUser(userId, {
+            name,
+            hasAudio: true
+          });
+          console.log("Added user from audio available event:", userId, name);
+        } else {
+          addOrUpdateUser(userId, {
+            hasAudio: available
+          });
+        }
+      } catch (error) {
+        console.error("Error handling remote audio available:", error);
       }
     }
     async function handleRemoteUserEnter(event) {
       const {
         userId
       } = event;
-      const name = await getUserName(userId);
-      remoteUsers.value.push({
-        id: userId,
-        name
-      });
-      startTimer();
+      if (!userId)
+        return;
+      try {
+        console.log("\u76D1\u542C\u5230\u8FDC\u7A0B\u7528\u6237\u8FDB\u623F\u95F4\u4E86\u300B\u300B\u300B\u300B\u300B", userId);
+        if (!findUser(userId)) {
+          const name = await getUserName(userId);
+          addOrUpdateUser(userId, {
+            name
+          });
+          console.log("Remote user entered:", userId, name);
+          await nextTick();
+          setTimeout(() => {
+            const user = findUser(userId);
+            if (user == null ? void 0 : user.hasVideo) {
+              console.log("User already has video stream, attempting to render");
+              tryRenderRemoteVideo(userId);
+            }
+          }, 100);
+        }
+      } catch (error) {
+        console.error("Error handling remote user enter:", error);
+      }
     }
     async function getUserName(userId) {
-      const data = await getUserDetailApi({
-        userId
-      });
-      return (data == null ? void 0 : data.name) || "";
+      try {
+        const data = await getUserDetailApi({
+          userId
+        });
+        return (data == null ? void 0 : data.name) || userId;
+      } catch (error) {
+        console.warn("Failed to get user name for:", userId, error);
+        return userId;
+      }
     }
     function handleRemoteUserExit(event) {
-      console.log("event :>> \u9000\u623F", event);
       const {
         userId
       } = event;
-      remoteUsers.value = xorBy(remoteUsers.value, [{
-        id: userId,
-        name: ""
-      }], "id");
+      if (!userId)
+        return;
+      console.log("Remote user exited:", userId);
+      try {
+        removeUser(userId);
+        console.log("Cleaned up resources for user:", userId);
+        setTimeout(() => {
+          const user = findUser(userId);
+          if (user) {
+            console.warn("User still exists after removal, force removing:", userId);
+            const userIndex = remoteUsers.value.findIndex((u) => u.id === userId);
+            if (userIndex !== -1) {
+              remoteUsers.value.splice(userIndex, 1);
+            }
+          }
+        }, 100);
+      } catch (error) {
+        console.error("Error handling remote user exit:", error);
+      }
     }
     function handleError(error) {
-      console.log("error :>> ", error);
+      console.error("TRTC error occurred:", error);
+      if (error.code) {
+        switch (error.code) {
+          case -3301:
+            $message.error("\u8FDB\u5165\u623F\u95F4\u5931\u8D25\uFF0C\u8BF7\u68C0\u67E5\u7F51\u7EDC\u8FDE\u63A5");
+            break;
+          case -3302:
+            $message.error("\u7F51\u7EDC\u8FDE\u63A5\u65AD\u5F00\uFF0C\u6B63\u5728\u5C1D\u8BD5\u91CD\u8FDE...");
+            break;
+          default:
+            $message.error(`\u901A\u8BDD\u51FA\u73B0\u9519\u8BEF: ${error.message || "\u672A\u77E5\u9519\u8BEF"}`);
+        }
+      } else {
+        $message.error("\u901A\u8BDD\u51FA\u73B0\u672A\u77E5\u9519\u8BEF");
+      }
       state.showMultipleVideo = false;
     }
-    onBeforeUnmount(() => {
-      handleExit();
+    let periodicCheckInterval = null;
+    onBeforeUnmount(async () => {
+      console.log("Component unmounting, cleaning up...");
+      if (periodicCheckInterval) {
+        clearInterval(periodicCheckInterval);
+        periodicCheckInterval = null;
+      }
+      await handleExit();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [withDirectives(createElementVNode("span", {
+      return openBlock(), createElementBlock(Fragment, null, [withDirectives(createElementVNode("div", {
+        class: "video-wrapper video-wrapper--multiple",
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        style: normalizeStyle(unref(style))
+      }, [createElementVNode("div", {
+        class: "video-header",
+        ref_key: "handleRef",
+        ref: handleRef
+      }, [withDirectives(createElementVNode("span", {
         class: "title"
-      }, toDisplayString(unref(title)), 513), [[vShow, isConnect.value]]), createVNode(unref(NButton), {
+      }, toDisplayString(unref(title)), 513), [[vShow, unref(isConnect)]]), createElementVNode("div", _hoisted_1, [createVNode(unref(NButton), {
         quaternary: "",
-        circle: "",
+        size: "tiny",
+        class: "custom-btn",
+        onClick: _cache[0] || (_cache[0] = () => isMaxSize.value = false)
+      }), createVNode(unref(NButton), {
+        text: "",
         color: "#ffffffcc",
         onClick: handleExit
       }, {
-        icon: withCtx(() => [createVNode(unref(NIcon), {
+        default: withCtx(() => [createVNode(unref(NIcon), {
+          size: "18",
           component: unref(Close)
         }, null, 8, ["component"])]),
         _: 1
-      })]), isConnect.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("div", {
+      })])], 512), unref(isConnect) ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", {
         ref_key: "selfVideoRef",
         ref: selfVideoRef,
         class: "video-view",
         "data-name": unref(state).userInfo.name
-      }, null, 8, _hoisted_5), createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createElementVNode("div", _hoisted_8, [createVNode(unref(NButton), {
+      }, null, 8, _hoisted_4), createElementVNode("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createVNode(unref(NButton), {
         text: "",
         color: !unref(voiceClose) ? "#fff" : "#000",
         onClick: unref(toggleAudio)
@@ -341,7 +524,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: !unref(voiceClose) ? unref(Mic) : unref(MicOff)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["color", "onClick"]), _hoisted_9]), createElementVNode("div", _hoisted_10, [createVNode(unref(NButton), {
+      }, 8, ["color", "onClick"]), _hoisted_8]), createElementVNode("div", _hoisted_9, [createVNode(unref(NButton), {
         text: "",
         color: !unref(videocamClose) ? "#fff" : "#000",
         disabled: unref(isAudio),
@@ -351,7 +534,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: !unref(videocamClose) ? unref(Videocam) : unref(VideocamOff)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["color", "disabled", "onClick"]), _hoisted_11]), createElementVNode("div", {
+      }, 8, ["color", "disabled", "onClick"]), _hoisted_10]), createElementVNode("div", {
         class: "btn",
         onClick: handleExit
       }, [createVNode(unref(NButton), {
@@ -363,11 +546,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_12]), createVNode(ChatAdd, {
+      }), _hoisted_11]), createVNode(ChatAdd, {
         onComfirm: handleAddPerson,
         disabledIds: unref(state).currentAVMsg.checkedIds
       }, {
-        trigger: withCtx(() => [createElementVNode("div", _hoisted_13, [createVNode(unref(NButton), {
+        trigger: withCtx(() => [createElementVNode("div", _hoisted_12, [createVNode(unref(NButton), {
           text: "",
           color: "#fff"
         }, {
@@ -375,18 +558,20 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             component: unref(PersonAdd)
           }, null, 8, ["component"])]),
           _: 1
-        }), _hoisted_14])]),
+        }), _hoisted_13])]),
         _: 1
-      }, 8, ["disabledIds"])])])]), createElementVNode("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(remoteUsers.value, (user) => {
+      }, 8, ["disabledIds"])])])]), createElementVNode("div", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(remoteUsers), (user) => {
         return openBlock(), createElementBlock("div", {
           key: user.id,
           id: user.id,
           class: "video-view",
-          "data-name": user.name
-        }, null, 8, _hoisted_16);
+          "data-name": user.name,
+          ref_for: true,
+          ref: (el) => unref(setVideoRef)(user.id, el)
+        }, null, 8, _hoisted_15);
       }), 128))])])) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [createElementVNode("div", _hoisted_17, [createElementVNode("span", _hoisted_18, toDisplayString(unref(callUser)) + function() {
+      }, [createElementVNode("div", _hoisted_16, [createElementVNode("span", _hoisted_17, toDisplayString(unref(callUser)) + function() {
         var _a, _b, _c;
         try {
           return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.108")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.108")) || "\u53D1\u8D77\u7684";
@@ -400,7 +585,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         } catch (e) {
           return "\u4F1A\u8BAE";
         }
-      }(), 1), !unref(isCall) ? (openBlock(), createElementBlock("span", _hoisted_19, function() {
+      }(), 1), !unref(isCall) ? (openBlock(), createElementBlock("span", _hoisted_18, function() {
         var _a, _b, _c;
         try {
           return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.110")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.110")) || "\u9080\u8BF7\u4F60\u52A0\u5165";
@@ -414,7 +599,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         } catch (e) {
           return "\u4F1A\u8BAE";
         }
-      }(), 1)) : createCommentVNode("v-if", true)]), unref(isCall) ? (openBlock(), createElementBlock("div", _hoisted_20, [createVNode(ChatAdd, {
+      }(), 1)) : createCommentVNode("v-if", true)]), unref(isCall) ? (openBlock(), createElementBlock("div", _hoisted_19, [createVNode(ChatAdd, {
         onComfirm: handleAddPerson,
         disabledIds: unref(state).currentAVMsg.checkedIds
       }, {
@@ -459,10 +644,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }())]),
         _: 1
-      }), createElementVNode("div", _hoisted_21, [createVNode(unref(NButton), {
+      }), createElementVNode("div", _hoisted_20, [createVNode(unref(NButton), {
         color: "#000",
         round: "",
-        onClick: _cache[0] || (_cache[0] = ($event) => voiceClose.value = !unref(voiceClose))
+        onClick: _cache[1] || (_cache[1] = ($event) => voiceClose.value = !unref(voiceClose))
       }, {
         icon: withCtx(() => [createVNode(unref(NIcon), {
           component: unref(voiceClose) ? unref(MicOff) : unref(Mic)
@@ -471,25 +656,25 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }), createVNode(unref(NButton), {
         color: "#000",
         round: "",
-        onClick: _cache[1] || (_cache[1] = ($event) => videocamClose.value = !unref(videocamClose)),
+        onClick: _cache[2] || (_cache[2] = ($event) => videocamClose.value = !unref(videocamClose)),
         disabled: unref(isAudio)
       }, {
         icon: withCtx(() => [createVNode(unref(NIcon), {
           component: unref(videocamClose) ? unref(VideocamOff) : unref(Videocam)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["disabled"])])])) : (openBlock(), createElementBlock("div", _hoisted_22, [createElementVNode("div", _hoisted_23, [createVNode(unref(NButton), {
+      }, 8, ["disabled"])])])) : (openBlock(), createElementBlock("div", _hoisted_21, [createElementVNode("div", _hoisted_22, [createVNode(unref(NButton), {
         circle: "",
         color: "#f17568",
         class: "btn--rotate",
-        onClick: _cache[2] || (_cache[2] = () => unref(state).showMultipleVideo = false)
+        onClick: _cache[3] || (_cache[3] = () => unref(state).showMultipleVideo = false)
       }, {
         icon: withCtx(() => [createVNode(unref(NIcon), {
           size: "30",
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_24]), createElementVNode("div", _hoisted_25, [createVNode(unref(NButton), {
+      }), _hoisted_23]), createElementVNode("div", _hoisted_24, [createVNode(unref(NButton), {
         circle: "",
         color: "#2ac98b",
         onClick: handleEnter
@@ -499,7 +684,26 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_26])]))], 64))]);
+      }), _hoisted_25])]))], 64))], 4), [[vShow, isMaxSize.value]]), withDirectives(createElementVNode("div", {
+        class: "video-wrapper video-wrapper--mini",
+        ref_key: "miniWrapperRef",
+        ref: miniWrapperRef,
+        style: normalizeStyle(unref(miniStyle))
+      }, [createElementVNode("div", _hoisted_26, [createVNode(unref(NButton), {
+        text: "",
+        color: "#ffffffcc",
+        onClick: _cache[4] || (_cache[4] = () => isMaxSize.value = true)
+      }, {
+        default: withCtx(() => [createVNode(unref(NIcon), {
+          size: "18",
+          component: unref(ResizeOutline)
+        }, null, 8, ["component"])]),
+        _: 1
+      })]), createElementVNode("div", _hoisted_27, [createVNode(unref(NAvatar), {
+        round: "",
+        size: 48,
+        src: unref(state).userInfo.avatar
+      }, null, 8, ["src"])])], 4), [[vShow, !isMaxSize.value]])], 64);
     };
   }
 });