cnhis-design-vue 3.3.3-release.9 → 3.4.0-beta.1

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

@@ -15,7 +15,6 @@ 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';
 
 const _hoisted_1 = {
   class: "video-wrapper"
@@ -76,20 +75,25 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const {
       sendMessage,
       state,
-      trtcProxy,
       trtc,
       timing,
       voiceClose,
       isAudio,
       isCall,
       startTimer,
-      resetTimer,
       toggleAudio,
       messageTypeText,
       time,
       installEventHandlers,
-      uninstallEventHandlers
-    } = useVideo();
+      uninstallEventHandlers,
+      enterRoom,
+      exitRoom,
+      startLocalMedia,
+      MAIN_STREAM_TYPE
+    } = useVideo({
+      isMultiple: false,
+      enableRetry: false
+    });
     const videoRef = ref();
     const selfVideoRef = ref();
     const isConnect = ref(false);
@@ -150,40 +154,26 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     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.showVideo = 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
-        });
         if (!isCall.value) {
           isConnect.value = true;
           startTimer();
         }
         installEventHandlers({
-          handleError,
           handleRemoteUserEnter,
           handleRemoteAudioAvailable,
           handleRemoteUserExit,
           handleRemoteVideoAvailable
         });
-        await trtc.startLocalAudio();
-        if (isAudio.value)
-          return;
-        await trtc.startLocalVideo({
-          view: selfVideoRef.value
-        });
+        await startLocalMedia(selfVideoRef.value);
       } catch (error) {
-        console.log("error :>> ", error);
-        $message.error(error);
+        console.error("Error setting up single video call:", error);
+        $message.error("\u8BBE\u7F6E\u89C6\u9891\u901A\u8BDD\u5931\u8D25");
         state.showVideo = false;
       }
     }
@@ -198,19 +188,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       try {
         state.showVideo = false;
         uninstallEventHandlers({
-          handleError,
           handleRemoteUserEnter,
           handleRemoteAudioAvailable,
           handleRemoteUserExit,
           handleRemoteVideoAvailable
         });
-        await trtc.exitRoom();
-        await trtc.stopLocalAudio();
-        if (isAudio.value)
-          return;
-        await trtc.stopLocalVideo();
+        await exitRoom();
       } catch (error) {
-        console.log("error :>> ", error);
+        console.error("Error during video exit:", error);
       }
     }
     async function handleRemoteVideoAvailable(event) {
@@ -219,39 +204,61 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         streamType
       } = event;
       try {
-        await trtc.startRemoteVideo({
-          userId,
-          streamType,
-          view: videoRef.value
-        });
+        if (streamType === MAIN_STREAM_TYPE && videoRef.value) {
+          await trtc.startRemoteVideo({
+            userId,
+            streamType,
+            view: videoRef.value
+          });
+          console.log("Remote video rendered for user:", userId);
+        }
       } catch (error) {
-        console.log("error :>> ", error);
+        console.error("Error rendering remote video:", error);
       }
     }
     function handleRemoteAudioAvailable(event) {
+      console.log("Remote audio available:", event.userId);
     }
-    function handleRemoteUserEnter() {
-      isConnect.value = true;
-      startTimer();
+    function handleRemoteUserEnter(event) {
+      console.log("Remote user entered:", event.userId);
+      if (isCall.value) {
+        isConnect.value = true;
+        startTimer();
+      }
     }
     function handleRemoteUserExit(event) {
-      console.log("event :>> \u5BF9\u65B9\u5DF2\u6302\u65AD", event);
+      console.log("Remote user exited:", event.userId);
       handleExit();
     }
-    function handleError(error) {
-      console.log("error :>> ", error);
-      state.showVideo = false;
-    }
-    watch(() => status.value, (value) => {
+    const statusHandlers = {
+      [AV_STATUS.IN_CALL]: () => init(),
+      [AV_STATUS.CALL_BUSY]: () => {
+        $message.error("\u5BF9\u65B9\u7E41\u5FD9\uFF01");
+        handleExit();
+      },
+      [AV_STATUS.NO_RESPONSE]: () => {
+        $message.error("\u5BF9\u65B9\u672A\u63A5\u542C!");
+        handleExit();
+      },
+      [AV_STATUS.REJECTED]: () => {
+        $message.error("\u5BF9\u65B9\u5DF2\u62D2\u7EDD!");
+        handleExit();
+      }
+    };
+    watch(status, (newStatus, oldStatus) => {
+      if (newStatus === oldStatus)
+        return;
       if (!state.showVideo)
         return;
-      if (value === AV_STATUS.IN_CALL) {
-        init();
+      const handler = statusHandlers[newStatus];
+      if (handler) {
+        handler();
       } else {
         handleExit();
       }
     }, {
-      immediate: true
+      immediate: true,
+      flush: "post"
     });
     onBeforeUnmount(() => {
       handleExit();

package/es/components/iho-chat/src/hooks/useData.d.ts

@@ -1,4 +1,5 @@
 import { InjectionKey } from 'vue';
+import { MsgListItem } from '../types';
 import { ChatSock } from '../utils/chatSock';
 import { AnyObject } from '../../../../shared/types';
 export declare const InjectionIChatData: InjectionKey<ReturnType<typeof initData>>;
@@ -12,7 +13,30 @@ export declare function initData(props: AnyObject, emit: (event: 'template-click
         currentSessionItem: AnyObject;
         id: string;
         userInfo: AnyObject;
-        msgList: AnyObject[];
+        msgList: {
+            [x: string]: any;
+            id: string;
+            sessionKey: string;
+            content: {
+                [x: string]: any;
+                chatMessageType: string;
+                msg: string;
+                referenceContent?: any;
+                forwardMessageList?: AnyObject[] | undefined;
+                messageTemplate?: any;
+                messageTemplateData?: any;
+                fileUrl?: string | undefined;
+                avStatus?: string | undefined;
+            };
+            senderName: string;
+            sendTime: string;
+            sender: string;
+            status: string;
+            senderAvatar: string;
+            __content: string;
+            __time?: string | undefined;
+            __sendTime?: string | undefined;
+        }[];
         currentMsg: AnyObject;
         isAppendMsg: boolean;
         sessionList: AnyObject[];
@@ -40,7 +64,7 @@ export declare function initData(props: AnyObject, emit: (event: 'template-click
     isGroupChat: import("vue").ComputedRef<boolean>;
     isGroupLeader: import("vue").ComputedRef<boolean>;
     isEnded: import("vue").ComputedRef<boolean>;
-    setMsgList: (list?: AnyObject[]) => void;
+    setMsgList: (list?: AnyObject[] | MsgListItem) => void;
     sendMessage: (message: {
         chatType?: string;
         content: AnyObject;
@@ -75,7 +99,30 @@ export declare const useData: () => {
         currentSessionItem: AnyObject;
         id: string;
         userInfo: AnyObject;
-        msgList: AnyObject[];
+        msgList: {
+            [x: string]: any;
+            id: string;
+            sessionKey: string;
+            content: {
+                [x: string]: any;
+                chatMessageType: string;
+                msg: string;
+                referenceContent?: any;
+                forwardMessageList?: AnyObject[] | undefined;
+                messageTemplate?: any;
+                messageTemplateData?: any;
+                fileUrl?: string | undefined;
+                avStatus?: string | undefined;
+            };
+            senderName: string;
+            sendTime: string;
+            sender: string;
+            status: string;
+            senderAvatar: string;
+            __content: string;
+            __time?: string | undefined;
+            __sendTime?: string | undefined;
+        }[];
         currentMsg: AnyObject;
         isAppendMsg: boolean;
         sessionList: AnyObject[];
@@ -103,7 +150,7 @@ export declare const useData: () => {
     isGroupChat: import("vue").ComputedRef<boolean>;
     isGroupLeader: import("vue").ComputedRef<boolean>;
     isEnded: import("vue").ComputedRef<boolean>;
-    setMsgList: (list?: AnyObject[]) => void;
+    setMsgList: (list?: AnyObject[] | MsgListItem) => void;
     sendMessage: (message: {
         chatType?: string;
         content: AnyObject;

package/es/components/iho-chat/src/hooks/useVideo.d.ts

@@ -1,19 +1,61 @@
+import { Ref } from 'vue';
 import TRTC from 'trtc-sdk-v5';
 import { AnyFn } from '../../../../shared/types';
-type EventHandlers = {
-    handleError: AnyFn;
+export interface RemoteUser {
+    id: string;
+    name: string;
+    hasVideo?: boolean;
+    hasAudio?: boolean;
+}
+export interface TRTCEvent {
+    userId: string;
+    streamType?: any;
+    available?: boolean;
+}
+export interface VideoEventHandlers {
     handleRemoteUserEnter: AnyFn;
     handleRemoteAudioAvailable: AnyFn;
     handleRemoteUserExit: AnyFn;
     handleRemoteVideoAvailable: AnyFn;
-};
-export declare function useVideo(): {
+    handleRemoteVideoUnavailable?: AnyFn;
+    handleRemoteAudioUnavailable?: AnyFn;
+}
+export interface VideoConfig {
+    isMultiple?: boolean;
+    enableRetry?: boolean;
+    retryDelay?: number;
+    maxRetries?: number;
+}
+export declare function useVideo(config?: VideoConfig): {
     state: {
         orgId: string | number;
         currentSessionItem: import("../../../../shared/types").AnyObject;
         id: string;
         userInfo: import("../../../../shared/types").AnyObject;
-        msgList: import("../../../../shared/types").AnyObject[];
+        msgList: {
+            [x: string]: any;
+            id: string;
+            sessionKey: string;
+            content: {
+                [x: string]: any;
+                chatMessageType: string;
+                msg: string;
+                referenceContent?: any;
+                forwardMessageList?: import("../../../../shared/types").AnyObject[] | undefined;
+                messageTemplate?: any;
+                messageTemplateData?: any;
+                fileUrl?: string | undefined;
+                avStatus?: string | undefined;
+            };
+            senderName: string;
+            sendTime: string;
+            sender: string;
+            status: string;
+            senderAvatar: string;
+            __content: string;
+            __time?: string | undefined;
+            __sendTime?: string | undefined;
+        }[];
         currentMsg: import("../../../../shared/types").AnyObject;
         isAppendMsg: boolean;
         sessionList: import("../../../../shared/types").AnyObject[];
@@ -37,28 +79,53 @@ export declare function useVideo(): {
         };
         isForward: boolean;
     };
-    trtcProxy: import("vue").Ref<any>;
+    trtcProxy: Ref<any>;
     sendMessage: (message: {
         chatType?: string | undefined;
         content: import("../../../../shared/types").AnyObject;
         receiver?: string | undefined;
     }) => Promise<void>;
     trtc: TRTC;
-    timing: import("vue").Ref<string>;
-    voiceClose: import("vue").Ref<boolean>;
-    videocamClose: import("vue").Ref<boolean>;
+    timing: Ref<string>;
+    voiceClose: Ref<boolean>;
+    videocamClose: Ref<boolean>;
+    isConnect: Ref<boolean>;
     isAudio: import("vue").ComputedRef<boolean>;
     isCall: import("vue").ComputedRef<boolean>;
-    startTimer: () => void;
-    resetTimer: () => void;
-    toggleAudio: () => Promise<void>;
-    toggleVideo: () => Promise<void>;
     messageTypeText: import("vue").ComputedRef<"语音" | "视频">;
     time: {
         timer: any;
         seconds: number;
     };
-    installEventHandlers: ({ handleError, handleRemoteUserEnter, handleRemoteAudioAvailable, handleRemoteUserExit, handleRemoteVideoAvailable }: EventHandlers) => void;
-    uninstallEventHandlers: ({ handleError, handleRemoteUserEnter, handleRemoteAudioAvailable, handleRemoteUserExit, handleRemoteVideoAvailable }: EventHandlers) => void;
+    remoteUsers: Ref<{
+        id: string;
+        name: string;
+        hasVideo?: boolean | undefined;
+        hasAudio?: boolean | undefined;
+    }[]>;
+    videoRefs: Ref<Map<string, HTMLElement>>;
+    startTimer: () => void;
+    resetTimer: () => void;
+    toggleAudio: () => Promise<void>;
+    toggleVideo: () => Promise<void>;
+    enterRoom: () => Promise<boolean>;
+    exitRoom: () => Promise<void>;
+    startLocalMedia: (selfVideoRef?: HTMLElement) => Promise<void>;
+    checkTRTCSupport: () => Promise<boolean>;
+    findUser: (userId: string) => RemoteUser | undefined;
+    addOrUpdateUser: (userId: string, updates: Partial<RemoteUser>) => void;
+    removeUser: (userId: string) => void;
+    tryRenderRemoteVideo: (userId: string) => Promise<void>;
+    stopRemoteVideo: (userId: string) => Promise<void>;
+    setVideoRef: (userId: string, el: HTMLElement | null) => void;
+    installEventHandlers: (handlers: VideoEventHandlers) => void;
+    uninstallEventHandlers: (handlers: VideoEventHandlers) => void;
+    cleanupAllResources: () => void;
+    checkAndRenderAllVideos: () => void;
+    forceRenderAllVideos: () => Promise<void>;
+    cleanupInvalidUsers: () => void;
+    isUserValid: (userId: string) => boolean;
+    startUserConnectionMonitoring: () => void;
+    stopUserConnectionMonitoring: () => void;
+    MAIN_STREAM_TYPE: any;
 };
-export {};