cnhis-design-vue 3.3.3-beta.52 → 3.3.3-beta.55

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

@@ -5,7 +5,7 @@ import { Close, Mic, MicOff, Videocam, VideocamOff, Call, PersonAdd, ResizeOutli
 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"
@@ -142,26 +141,37 @@ 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 +201,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 +243,247 @@ 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);
+        console.error("Error setting up multiple video call:", error);
+        $message.error("\u8BBE\u7F6E\u591A\u4EBA\u89C6\u9891\u901A\u8BDD\u5931\u8D25");
         state.showMultipleVideo = false;
       }
     }
     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(Fragment, null, [withDirectives(createElementVNode("div", {
@@ -352,7 +497,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(unref(title)), 513), [[vShow, unref(isConnect)]]), createElementVNode("div", _hoisted_1, [createVNode(unref(NButton), {
         quaternary: "",
         size: "tiny",
         class: "custom-btn",
@@ -367,7 +512,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",
@@ -417,12 +562,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           _: 1
         }), _hoisted_13])]),
         _: 1
-      }, 8, ["disabledIds"])])])]), createElementVNode("div", _hoisted_14, [(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
+          "data-name": user.name,
+          ref_for: true,
+          ref: (el) => unref(setVideoRef)(user.id, el)
         }, null, 8, _hoisted_15);
       }), 128))])])) : (openBlock(), createElementBlock(Fragment, {
         key: 1

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

@@ -225,7 +225,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           round: "",
           size: 100,
           onClickCapture: _cache[0] || (_cache[0] = ($event) => showLargeAvatar.value = true)
-        }, null, 8, ["src"]), createCommentVNode(' <n-upload abstract accept="image/*" @change="onChange">\r\n							<n-upload-trigger #="{ handleClick }" abstract>\r\n								<n-button\r\n									circle\r\n									secondary\r\n									class="edit-avatar"\r\n									v-show="userDetail.id === state.userInfo.id"\r\n									@click="handleClick"\r\n								>\r\n									<template #icon>\r\n										<n-icon size="16" color="#666666" :component="Camera" />\r\n									</template>\r\n								</n-button>\r\n							</n-upload-trigger>\r\n						</n-upload> '), createElementVNode("div", _hoisted_4, [createElementVNode("h4", null, [createElementVNode("label", _hoisted_5, toDisplayString(userDetail.name), 1), withDirectives(createElementVNode("label", {
+        }, null, 8, ["src"]), createCommentVNode(' <n-upload abstract accept="image/*" @change="onChange">\n							<n-upload-trigger #="{ handleClick }" abstract>\n								<n-button\n									circle\n									secondary\n									class="edit-avatar"\n									v-show="userDetail.id === state.userInfo.id"\n									@click="handleClick"\n								>\n									<template #icon>\n										<n-icon size="16" color="#666666" :component="Camera" />\n									</template>\n								</n-button>\n							</n-upload-trigger>\n						</n-upload> '), createElementVNode("div", _hoisted_4, [createElementVNode("h4", null, [createElementVNode("label", _hoisted_5, toDisplayString(userDetail.name), 1), withDirectives(createElementVNode("label", {
           class: normalizeClass(["iho-chatRole", unref(isDoctorRole)(userDetail.roleInfo) ? "isDoctor" : ""])
         }, toDisplayString(unref(getRoleName)(userDetail.roleInfo)), 3), [[vShow, unref(getRoleName)(userDetail.roleInfo)]])]), createElementVNode("p", null, toDisplayString(userDetail.orgName), 1)]), createVNode(unref(NButton), {
           strong: "",

package/es/components/iho-chat/src/components/Video.vue.d.ts

@@ -1,4 +1,4 @@
-import TRTC from 'trtc-sdk-v5';
+import { type TRTCEvent } from '../hooks';
 import { AV_STATUS } from '../constants';
 declare const _default: import("vue").DefineComponent<{}, {
     sendMessage: (message: {
@@ -58,36 +58,26 @@ declare const _default: import("vue").DefineComponent<{}, {
         };
         isForward: boolean;
     };
-    trtcProxy: import("vue").Ref<any>;
-    trtc: TRTC;
+    trtc: import("trtc-sdk-v5").default;
     timing: import("vue").Ref<string>;
     voiceClose: import("vue").Ref<boolean>;
     isAudio: import("vue").ComputedRef<boolean>;
     isCall: import("vue").ComputedRef<boolean>;
     startTimer: () => void;
-    resetTimer: () => void;
     toggleAudio: () => Promise<void>;
     messageTypeText: import("vue").ComputedRef<"语音" | "视频">;
     time: {
         timer: any;
         seconds: number;
     };
-    installEventHandlers: ({ handleError, handleRemoteUserEnter, handleRemoteAudioAvailable, handleRemoteUserExit, handleRemoteVideoAvailable }: {
-        handleError: import("../../../../shared/types").AnyFn;
-        handleRemoteUserEnter: import("../../../../shared/types").AnyFn;
-        handleRemoteAudioAvailable: import("../../../../shared/types").AnyFn;
-        handleRemoteUserExit: import("../../../../shared/types").AnyFn;
-        handleRemoteVideoAvailable: import("../../../../shared/types").AnyFn;
-    }) => void;
-    uninstallEventHandlers: ({ handleError, handleRemoteUserEnter, handleRemoteAudioAvailable, handleRemoteUserExit, handleRemoteVideoAvailable }: {
-        handleError: import("../../../../shared/types").AnyFn;
-        handleRemoteUserEnter: import("../../../../shared/types").AnyFn;
-        handleRemoteAudioAvailable: import("../../../../shared/types").AnyFn;
-        handleRemoteUserExit: import("../../../../shared/types").AnyFn;
-        handleRemoteVideoAvailable: import("../../../../shared/types").AnyFn;
-    }) => void;
-    videoRef: import("vue").Ref<any>;
-    selfVideoRef: import("vue").Ref<any>;
+    installEventHandlers: (handlers: import("../hooks").VideoEventHandlers) => void;
+    uninstallEventHandlers: (handlers: import("../hooks").VideoEventHandlers) => void;
+    enterRoom: () => Promise<boolean>;
+    exitRoom: () => Promise<void>;
+    startLocalMedia: (selfVideoRef?: HTMLElement | undefined) => Promise<void>;
+    MAIN_STREAM_TYPE: any;
+    videoRef: import("vue").Ref<HTMLElement | undefined>;
+    selfVideoRef: import("vue").Ref<HTMLElement | undefined>;
     isConnect: import("vue").Ref<boolean>;
     timeout: any;
     info: import("vue").ComputedRef<{
@@ -102,10 +92,10 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleEnter: () => Promise<void>;
     handleFinish: () => void;
     handleExit: () => Promise<void>;
-    handleRemoteVideoAvailable: (event: any) => Promise<void>;
-    handleRemoteAudioAvailable: (event: any) => void;
-    handleRemoteUserEnter: () => void;
-    handleRemoteUserExit: (event: any) => void;
+    handleRemoteVideoAvailable: (event: TRTCEvent) => Promise<void>;
+    handleRemoteAudioAvailable: (event: TRTCEvent) => void;
+    handleRemoteUserEnter: (event: TRTCEvent) => void;
+    handleRemoteUserExit: (event: TRTCEvent) => void;
     handleError: (error: any) => void;
     NButton: any;
     NAvatar: any;