cnhis-design-vue 3.3.3-release.8 → 3.4.0-beta.0

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

@@ -1,11 +1,11 @@
-import { createElementVNode, defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createElementBlock, Fragment, withDirectives, normalizeStyle, unref, toDisplayString, vShow, createVNode, withCtx, renderList, createCommentVNode, createTextVNode, nextTick } from 'vue';
+import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createElementBlock, Fragment, withDirectives, createElementVNode, 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, 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';
@@ -17,7 +17,6 @@ import 'stompjs';
 import 'sockjs-client/dist/sockjs.min.js';
 import { useVideo } from '../hooks/useVideo.js';
 import { useDraggable } from '../hooks/useDraggable.js';
-import TRTC from 'trtc-sdk-v5';
 
 const _hoisted_1 = {
   class: "top-right-btns"
@@ -39,129 +38,84 @@ const _hoisted_6 = {
 const _hoisted_7 = {
   class: "btn"
 };
-const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", {
-  class: "text"
-}, function() {
-  var _a, _b, _c;
-  try {
-    return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.104")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.104")) || "\u9759\u97F3";
-  } catch (e) {
-    return "\u9759\u97F3";
-  }
-}(), -1);
-const _hoisted_9 = {
+const _hoisted_8 = {
   class: "btn"
 };
-const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", {
-  class: "text"
-}, function() {
-  var _a, _b, _c;
-  try {
-    return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.105")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.105")) || "\u6444\u50CF\u5934";
-  } catch (e) {
-    return "\u6444\u50CF\u5934";
-  }
-}(), -1);
-const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", {
-  class: "text"
-}, function() {
-  var _a, _b, _c;
-  try {
-    return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.106")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.106")) || "\u7ED3\u675F\u4F1A\u8BCA";
-  } catch (e) {
-    return "\u7ED3\u675F\u4F1A\u8BCA";
-  }
-}(), -1);
-const _hoisted_12 = {
+const _hoisted_9 = {
   class: "btn"
 };
-const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", {
-  class: "text"
-}, function() {
-  var _a, _b, _c;
-  try {
-    return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.107")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.107")) || "\u6DFB\u52A0\u53C2\u4F1A\u4EBA";
-  } catch (e) {
-    return "\u6DFB\u52A0\u53C2\u4F1A\u4EBA";
-  }
-}(), -1);
-const _hoisted_14 = {
+const _hoisted_10 = {
   class: "video-main__right"
 };
-const _hoisted_15 = ["id", "data-name"];
-const _hoisted_16 = {
+const _hoisted_11 = ["id", "data-name"];
+const _hoisted_12 = {
   class: "user"
 };
-const _hoisted_17 = {
+const _hoisted_13 = {
   class: "name"
 };
-const _hoisted_18 = {
+const _hoisted_14 = {
   key: 0,
   class: "tip"
 };
-const _hoisted_19 = {
+const _hoisted_15 = {
   key: 0,
   class: "calling-box"
 };
-const _hoisted_20 = {
+const _hoisted_16 = {
   class: "btn-box"
 };
-const _hoisted_21 = {
+const _hoisted_17 = {
   key: 1,
   class: "opt-btn"
 };
-const _hoisted_22 = {
+const _hoisted_18 = {
   class: "btn"
 };
-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";
-  } catch (e) {
-    return "\u62D2\u63A5";
-  }
-}(), -1);
-const _hoisted_24 = {
+const _hoisted_19 = {
   class: "btn"
 };
-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";
-  } catch (e) {
-    return "\u63A5\u542C";
-  }
-}(), -1);
-const _hoisted_26 = {
+const _hoisted_20 = {
   class: "header"
 };
-const _hoisted_27 = {
+const _hoisted_21 = {
   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);
@@ -191,18 +145,40 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         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: {
@@ -211,134 +187,225 @@ 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({
+            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");
-    }
-    function handleError(error) {
-      console.log("error :>> ", error);
-      state.showMultipleVideo = false;
+      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);
+      }
     }
-    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(Fragment, null, [withDirectives(createElementVNode("div", {
@@ -352,7 +419,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         ref: handleRef
       }, [withDirectives(createElementVNode("span", {
         class: "title"
-      }, toDisplayString(unref(title)), 513), [[vShow, isConnect.value]]), createElementVNode("div", _hoisted_1, [createVNode(unref(NButton), {
+      }, toDisplayString(title.value), 513), [[vShow, unref(isConnect)]]), createElementVNode("div", _hoisted_1, [createVNode(unref(NButton), {
         quaternary: "",
         size: "tiny",
         class: "custom-btn",
@@ -367,7 +434,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(Close)
         }, null, 8, ["component"])]),
         _: 1
-      })])], 512), isConnect.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+      })])], 512), unref(isConnect) ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", {
         ref_key: "selfVideoRef",
         ref: selfVideoRef,
         class: "video-view",
@@ -381,7 +448,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: !unref(voiceClose) ? unref(Mic) : unref(MicOff)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["color", "onClick"]), _hoisted_8]), createElementVNode("div", _hoisted_9, [createVNode(unref(NButton), {
+      }, 8, ["color", "onClick"]), _cache[5] || (_cache[5] = createElementVNode("span", {
+        class: "text"
+      }, function() {
+        var _a, _b, _c;
+        try {
+          return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.104")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.104")) || "\u9759\u97F3";
+        } catch (e) {
+          return "\u9759\u97F3";
+        }
+      }(), -1))]), createElementVNode("div", _hoisted_8, [createVNode(unref(NButton), {
         text: "",
         color: !unref(videocamClose) ? "#fff" : "#000",
         disabled: unref(isAudio),
@@ -391,7 +467,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: !unref(videocamClose) ? unref(Videocam) : unref(VideocamOff)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["color", "disabled", "onClick"]), _hoisted_10]), createElementVNode("div", {
+      }, 8, ["color", "disabled", "onClick"]), _cache[6] || (_cache[6] = createElementVNode("span", {
+        class: "text"
+      }, function() {
+        var _a, _b, _c;
+        try {
+          return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.105")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.105")) || "\u6444\u50CF\u5934";
+        } catch (e) {
+          return "\u6444\u50CF\u5934";
+        }
+      }(), -1))]), createElementVNode("div", {
         class: "btn",
         onClick: handleExit
       }, [createVNode(unref(NButton), {
@@ -403,11 +488,20 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_11]), createVNode(ChatAdd, {
+      }), _cache[7] || (_cache[7] = createElementVNode("span", {
+        class: "text"
+      }, function() {
+        var _a, _b, _c;
+        try {
+          return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.106")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.106")) || "\u7ED3\u675F\u4F1A\u8BCA";
+        } catch (e) {
+          return "\u7ED3\u675F\u4F1A\u8BCA";
+        }
+      }(), -1))]), createVNode(ChatAdd, {
         onComfirm: handleAddPerson,
         disabledIds: unref(state).currentAVMsg.checkedIds
       }, {
-        trigger: withCtx(() => [createElementVNode("div", _hoisted_12, [createVNode(unref(NButton), {
+        trigger: withCtx(() => [createElementVNode("div", _hoisted_9, [createVNode(unref(NButton), {
           text: "",
           color: "#fff"
         }, {
@@ -415,18 +509,29 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             component: unref(PersonAdd)
           }, null, 8, ["component"])]),
           _: 1
-        }), _hoisted_13])]),
+        }), _cache[8] || (_cache[8] = createElementVNode("span", {
+          class: "text"
+        }, function() {
+          var _a, _b, _c;
+          try {
+            return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.107")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.107")) || "\u6DFB\u52A0\u53C2\u4F1A\u4EBA";
+          } catch (e) {
+            return "\u6DFB\u52A0\u53C2\u4F1A\u4EBA";
+          }
+        }(), -1))])]),
         _: 1
-      }, 8, ["disabledIds"])])])]), createElementVNode("div", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(remoteUsers.value, (user) => {
+      }, 8, ["disabledIds"])])])]), createElementVNode("div", _hoisted_10, [(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_15);
+          "data-name": user.name,
+          ref_for: true,
+          ref: (el) => unref(setVideoRef)(user.id, el)
+        }, null, 8, _hoisted_11);
       }), 128))])])) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [createElementVNode("div", _hoisted_16, [createElementVNode("span", _hoisted_17, toDisplayString(unref(callUser)) + function() {
+      }, [createElementVNode("div", _hoisted_12, [createElementVNode("span", _hoisted_13, toDisplayString(callUser.value) + 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";
@@ -440,7 +545,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         } catch (e) {
           return "\u4F1A\u8BAE";
         }
-      }(), 1), !unref(isCall) ? (openBlock(), createElementBlock("span", _hoisted_18, function() {
+      }(), 1), !unref(isCall) ? (openBlock(), createElementBlock("span", _hoisted_14, 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";
@@ -454,7 +559,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         } catch (e) {
           return "\u4F1A\u8BAE";
         }
-      }(), 1)) : createCommentVNode("v-if", true)]), unref(isCall) ? (openBlock(), createElementBlock("div", _hoisted_19, [createVNode(ChatAdd, {
+      }(), 1)) : createCommentVNode("v-if", true)]), unref(isCall) ? (openBlock(), createElementBlock("div", _hoisted_15, [createVNode(ChatAdd, {
         onComfirm: handleAddPerson,
         disabledIds: unref(state).currentAVMsg.checkedIds
       }, {
@@ -490,16 +595,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         type: "primary",
         onClick: handleCall
       }, {
-        default: withCtx(() => [createTextVNode(function() {
+        default: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode(function() {
           var _a, _b, _c;
           try {
             return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.112")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.112")) || "\u5F00\u59CB\u4F1A\u8BCA";
           } catch (e) {
             return "\u5F00\u59CB\u4F1A\u8BCA";
           }
-        }())]),
+        }(), -1)])]),
         _: 1
-      }), createElementVNode("div", _hoisted_20, [createVNode(unref(NButton), {
+      }), createElementVNode("div", _hoisted_16, [createVNode(unref(NButton), {
         color: "#000",
         round: "",
         onClick: _cache[1] || (_cache[1] = ($event) => voiceClose.value = !unref(voiceClose))
@@ -518,7 +623,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(videocamClose) ? unref(VideocamOff) : unref(Videocam)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["disabled"])])])) : (openBlock(), createElementBlock("div", _hoisted_21, [createElementVNode("div", _hoisted_22, [createVNode(unref(NButton), {
+      }, 8, ["disabled"])])])) : (openBlock(), createElementBlock("div", _hoisted_17, [createElementVNode("div", _hoisted_18, [createVNode(unref(NButton), {
         circle: "",
         color: "#f17568",
         class: "btn--rotate",
@@ -529,7 +634,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_23]), createElementVNode("div", _hoisted_24, [createVNode(unref(NButton), {
+      }), _cache[10] || (_cache[10] = 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";
+        } catch (e) {
+          return "\u62D2\u63A5";
+        }
+      }(), -1))]), createElementVNode("div", _hoisted_19, [createVNode(unref(NButton), {
         circle: "",
         color: "#2ac98b",
         onClick: handleEnter
@@ -539,12 +651,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_25])]))], 64))], 4), [[vShow, isMaxSize.value]]), withDirectives(createElementVNode("div", {
+      }), _cache[11] || (_cache[11] = 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";
+        } catch (e) {
+          return "\u63A5\u542C";
+        }
+      }(), -1))])]))], 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), {
+      }, [createElementVNode("div", _hoisted_20, [createVNode(unref(NButton), {
         text: "",
         color: "#ffffffcc",
         onClick: _cache[4] || (_cache[4] = () => isMaxSize.value = true)
@@ -554,7 +673,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(ResizeOutline)
         }, null, 8, ["component"])]),
         _: 1
-      })]), createElementVNode("div", _hoisted_27, [createVNode(unref(NAvatar), {
+      })]), createElementVNode("div", _hoisted_21, [createVNode(unref(NAvatar), {
         round: "",
         size: 48,
         src: unref(state).userInfo.avatar