@trtc/calls-uikit-react 4.5.9 → 4.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.5.9",
+  "version": "4.5.11",
   "main": "./tuicall-uikit-react.umd.js",
   "module": "./tuicall-uikit-react.es.js",
   "types": "./types/index.d.ts",

package/src/Components/TUICallKit/TUICallKit.tsx

@@ -69,6 +69,15 @@ export default function TUICallKit(props: ITUICallKitProps) {
     remoteList,
     setRemoteList,
   ] = useState(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST));
+  // Sticky flag: once the call reaches a multi-user state, it stays multi-user until IDLE.
+  // Initialized from the current store snapshot so a re-mount during an in-progress call
+  // (e.g. group call, or 1v1 that has already escalated) keeps the correct layout.
+  const [hasEverBeenMulti, setHasEverBeenMulti] = useState(() => {
+    const initIsGroup = TUIStore.getData(StoreName.CALL, NAME.IS_GROUP);
+    const initRemoteList = TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST);
+    return !!initIsGroup || (Array.isArray(initRemoteList) && initRemoteList.length >= 2);
+  });
+  const isMultiUserLayout = hasEverBeenMulti;
   const [callType, setCallType] = useState(TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE));
   const [callRole, setCallRole] = useState(TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE));
   const [isEarPhone, setIsEarPhone] = useState(TUIStore.getData(StoreName.CALL, NAME.IS_EAR_PHONE));
@@ -92,6 +101,7 @@ export default function TUICallKit(props: ITUICallKitProps) {
     callType,
     isEarPhone,
     isGroupCall,
+    isMultiUserLayout,
     isFloat,
     allowedMinimized,
     allowedFullScreen,
@@ -104,6 +114,7 @@ export default function TUICallKit(props: ITUICallKitProps) {
     callType,
     isEarPhone,
     isGroupCall,
+    isMultiUserLayout,
     isFloat,
     allowedFullScreen,
     enableVirtualBackground,
@@ -130,9 +141,18 @@ export default function TUICallKit(props: ITUICallKitProps) {
 
   const handleCallStatusChange = (value) => {
     setCallStatus(value);
+    // Reset the sticky multi-user flag when the call fully ends so the next
+    // call starts fresh (a subsequent 1v1 will start in single layout).
+    if (value === CallStatus.IDLE) {
+      setHasEverBeenMulti(false);
+    }
   };
   const handleIsGroupChange = (value) => {
     setIsGroupCall(value);
+    // Group calls always render in multi-user layout.
+    if (value) {
+      setHasEverBeenMulti(true);
+    }
   };
   const handleCallerUserInfoChange = (value) => {
     setCallerUserInfo(value);
@@ -142,6 +162,11 @@ export default function TUICallKit(props: ITUICallKitProps) {
   };
   const handleRemoteUserInfoListChange = (value) => {
     setRemoteList(value);
+    // Escalate to multi-user layout once the remote participant count reaches 2+.
+    // The flag is sticky and only reset on IDLE.
+    if (Array.isArray(value) && value.length >= 2) {
+      setHasEverBeenMulti(true);
+    }
   };
   const handleCallMediaTypeChange = (value) => {
     setCallType(value);
@@ -258,6 +283,51 @@ export default function TUICallKit(props: ITUICallKitProps) {
     onMinimized,
   ]);
 
+  // When the layout switches from single-user to multi-user mid-call, the old
+  // SingleCall unmounts and its <div id={domId}> nodes are destroyed along with
+  // the <video> elements the SDK attached inside them. The onUserVideoAvailable /
+  // camera-open events do NOT replay, so the new GroupCall would render empty
+  // video tiles.
+  //
+  // Fix: after the new DOM is mounted, re-bind local and remote streams to the
+  // new container nodes. The switch is one-way (sticky), so this runs at most
+  // once per call. Failures here should never block the UI, only log a warning.
+  useEffect(() => {
+    if (!isMultiUserLayout) return;
+    let cancelled = false;
+    (async () => {
+      // 1. Re-attach local camera preview to the new local pusher <div>.
+      const localSnapshot = TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO_EXCLUDE_VOLUMN);
+      if (localSnapshot?.isVideoAvailable) {
+        try {
+          await TUICallKitAPI.openCamera(NAME.LOCAL_VIDEO);
+        } catch (error) {
+          console.warn('[TUICallKit] re-openCamera after layout switch failed:', error);
+        }
+      }
+      if (cancelled) return;
+      // 2. Re-attach each active remote video stream to its new player <div>.
+      const engine = TUICallKitAPI.getTUICallEngineInstance?.();
+      if (!engine?.startRemoteView) return;
+      const displayMode = TUIStore.getData(StoreName.CALL, NAME.DISPLAY_MODE);
+      const remoteSnapshot = TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST) || [];
+      for (const remoteUser of remoteSnapshot) {
+        if (cancelled) return;
+        if (!remoteUser?.isVideoAvailable || !remoteUser?.userId) continue;
+        try {
+          await engine.startRemoteView({
+            userID: remoteUser.userId,
+            videoViewDomID: remoteUser.userId,
+            options: { objectFit: displayMode },
+          });
+        } catch (error) {
+          console.warn(`[TUICallKit] re-startRemoteView for ${remoteUser.userId} failed:`, error);
+        }
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [isMultiUserLayout]);
+
   return callStatus !== CallStatus.IDLE && (
     <UserInfoContext.Provider value={UserInfoContextValue}>
       <CallerUserInfoContext.Provider value={callerUserInfo}>
@@ -265,15 +335,15 @@ export default function TUICallKit(props: ITUICallKitProps) {
           <CustomUIConfigContext.Provider value={customUIConfigContextValue}>
             <TranslateContext.Provider value={translateContextValue}>
               <div style={{ ...style }} className={classnames} id='tuicallkit-id'>
-                {!isGroupCall && <SingleCall />}
-                {isGroupCall && <GroupCall />}
+                {!isMultiUserLayout && <SingleCall />}
+                {isMultiUserLayout && <GroupCall />}
                 <AutoPlayDialog />
                 <AISubtitle />
               </div>
               <Portal attach="body">
                 <FloatingWindow
                   show={isFloat}
-                  hasVideo={isGroupCall
+                  hasVideo={isMultiUserLayout
                     ? speakerIdList.length !== 0
                     : callType === CallMediaType.VIDEO}
                   isAudioAvailable={localUserInfo.isAudioAvailable}

package/src/Components/components/common/ButtonPanel/ButtonPanel.tsx

@@ -26,7 +26,7 @@ const isMobile = !TUIGlobal.isPC;
 
 export default function ButtonPanel() {
   const {
-    callStatus, isGroupCall, callRole, callType, isShowEnableVirtualBackground,
+    callStatus, isMultiUserLayout, callRole, callType, isShowEnableVirtualBackground,
   } = useContext(CallInfoContext);
   const { localUserInfo } = useContext(UserInfoContext);
   const customButtonUIConfig = useCustomButtonUIConfig();
@@ -98,7 +98,7 @@ export default function ButtonPanel() {
     });
 
     const platform = TUIGlobal.isPC ? 'pc' : 'h5';
-    const callScene = isGroupCall ? 'groupCall' : 'singleCall';
+    const callScene = isMultiUserLayout ? 'groupCall' : 'singleCall';
     const mediaType = callType === CallMediaType.AUDIO ? 'audio' : 'video';
     const status = callStatus === CallStatus.CALLING
       ? callRole === CallRole.CALLER ? 'calling' : 'accept'
@@ -110,7 +110,7 @@ export default function ButtonPanel() {
 
     return rs;
   }, [
-    isGroupCall,
+    isMultiUserLayout,
     callType,
     callStatus,
     callRole,

package/src/Components/components/common/ButtonPanel/ButtonPanelH5/ButtonPanelH5.tsx

@@ -22,7 +22,7 @@ interface IButtonPanelH5Props {
 }
 export default function ButtonPanelH5(props: IButtonPanelH5Props) {
   const { buttons = [] } = props;
-  const { isGroupCall } = useContext(CallInfoContext);
+  const { isMultiUserLayout } = useContext(CallInfoContext);
   const { focusItem } = useContext(FocusItemContext);
   const [isPanelOpen, setIsPanelOpen] = useState(true);
   useEffect(() => {
@@ -38,7 +38,7 @@ export default function ButtonPanelH5(props: IButtonPanelH5Props) {
     buttonPanelH5Style['button-panel-h5-container'],
     {
       [buttonPanelH5Style.open]: isPanelOpen,
-      [buttonPanelH5Style.groupcall]: isGroupCall,
+      [buttonPanelH5Style.groupcall]: isMultiUserLayout,
       [buttonPanelH5Style['show-panel-background']]: showBtnPanelBackground,
     },
   ]);
@@ -127,7 +127,7 @@ export default function ButtonPanelH5(props: IButtonPanelH5Props) {
     return <Row>{renderButtonPanelCol()}</Row>;
   };
   const renderButtonPanel = () => {
-    if (isGroupCall && !isPanelOpen) {
+    if (isMultiUserLayout && !isPanelOpen) {
       return renderCloseButtonPanel();
     }
 
@@ -140,8 +140,8 @@ export default function ButtonPanelH5(props: IButtonPanelH5Props) {
       <div
         className={classNames([
           {
-            [buttonPanelH5Style['groupcall-panel']]: isGroupCall,
-            [buttonPanelH5Style['singlecall-panel']]: !isGroupCall,
+            [buttonPanelH5Style['groupcall-panel']]: isMultiUserLayout,
+            [buttonPanelH5Style['singlecall-panel']]: !isMultiUserLayout,
             [buttonPanelH5Style.close]: !isPanelOpen,
           },
         ])}

package/src/Components/components/common/FloatingWindow/FloatingWindow.tsx

@@ -13,7 +13,7 @@ interface IFloatingWindowProps {
 }
 
 export default function FloatingWindow(props: IFloatingWindowProps) {
-  const { isGroupCall } = useContext(CallInfoContext);
+  const { isMultiUserLayout } = useContext(CallInfoContext);
   // React 19's useRef removed the no-argument overload; pass undefined explicitly.
   const nodeRef = useRef<any>(undefined);
   const [clickable, setClickable] = useState(true);
@@ -28,7 +28,7 @@ export default function FloatingWindow(props: IFloatingWindowProps) {
     >
       <div ref={nodeRef} style={{ visibility }}>
         {
-          isGroupCall
+          isMultiUserLayout
             ? <FloatingWindowGroupCall clickable={clickable} {...props} />
             : <FloatingWindowSingleCall clickable={clickable} {...props} />
         }

package/src/Components/components/common/StreamInfo/StreamInfoH5/StreamInfoH5.tsx

@@ -32,13 +32,13 @@ export default function StreamInfoH5(props: IStreamInfoH5Props) {
     showSwitchCamera = false,
     showNetWorkStatus = false,
   } = props;
-  const { isGroupCall } = useContext(CallInfoContext);
+  const { isMultiUserLayout } = useContext(CallInfoContext);
   const classnames = classNames(
     [
       streamInfoH5Style['stream-info-container-h5'],
       {
-        [streamInfoH5Style.group]: isGroupCall,
-        [streamInfoH5Style.single]: !isGroupCall,
+        [streamInfoH5Style.group]: isMultiUserLayout,
+        [streamInfoH5Style.single]: !isMultiUserLayout,
       },
     ],
   );
@@ -89,7 +89,7 @@ export default function StreamInfoH5(props: IStreamInfoH5Props) {
 
   return (
     <div className={classnames}>
-      {isGroupCall ? renderGroupCallStreamInfo() : renderSingleCallStreamInfo()}
+      {isMultiUserLayout ? renderGroupCallStreamInfo() : renderSingleCallStreamInfo()}
     </div>
   );
 }

package/src/Components/components/common/TopBar/h5/TopBarH5.tsx

@@ -17,12 +17,12 @@ interface ITopBarH5Props {
 export default function TopBarH5(props: ITopBarH5Props) {
   const { callDuration } = props;
   const {
-    isGroupCall, callStatus, callRole, allowedMinimized,
+    isMultiUserLayout, callStatus, callRole, allowedMinimized,
   } = useContext(CallInfoContext);
   
   const { isAITranscriberEnabled } = useAIAssistant();
   
-  const showTip = (isGroupCall
+  const showTip = (isMultiUserLayout
     && (callStatus === CallStatus.CONNECTED || callRole === CallRole.CALLER));
   const showAITranscriberSwitch = callStatus === CallStatus.CONNECTED && isAITranscriberEnabled;
   

package/src/Components/components/common/TopBar/pc/TopBarPC.tsx

@@ -15,7 +15,7 @@ interface ITopBarPCProps {
 export default function TopBarPC(props: ITopBarPCProps) {
   const { callDuration } = props;
   const {
-    isGroupCall,
+    isMultiUserLayout,
     callStatus,
     allowedMinimized,
     allowedFullScreen,
@@ -23,7 +23,7 @@ export default function TopBarPC(props: ITopBarPCProps) {
   
   const { isAITranscriberEnabled } = useAIAssistant();
   
-  const showTime = callStatus === CallStatus.CONNECTED && !isGroupCall;
+  const showTime = callStatus === CallStatus.CONNECTED && !isMultiUserLayout;
   const showAITranscriberSwitch = callStatus === CallStatus.CONNECTED && isAITranscriberEnabled;
   
   return (

package/src/Components/context/CallUserInfoContext.ts

@@ -8,6 +8,9 @@ interface ICallInfoContext {
   isEarPhone?: boolean;
   isClickable?: boolean;
   isGroupCall?: boolean;
+  // Whether the UI should render in multi-user layout.
+  // Rule: true if isGroupCall, or remoteUserList size >= 2, once true it sticks until call ends.
+  isMultiUserLayout?: boolean;
   isFloat?: boolean;
   allowedMinimized?: boolean;
   allowedFullScreen?: boolean;

package/src/TUICallService/CallService/index.ts

@@ -27,7 +27,7 @@ const TUIGlobal: ITUIGlobal = TuiGlobal.getInstance();
 const TUIStore: ITUIStore = TuiStore.getInstance();
 const uiDesign = UIDesign.getInstance();
 uiDesign.setTUIStore(TUIStore);
-const version = '4.5.9';
+const version = '4.5.11';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'react';
 export { TUIGlobal, TUIStore, uiDesign };
@@ -152,6 +152,14 @@ export default class TUICallService {
         }
       });
     } catch (error) {
+      this._tuiCallEngine?.reportLog?.({
+        name: 'TUICallkit.initerror',
+        data: {
+          error,
+        }
+      });
+      this._isInitialized = false
+      this._tuiCallEngine = null
       console.error(`${NAME.PREFIX}init failed, error: ${error}.`);
       throw error;
     }

package/src/index.ts

@@ -35,7 +35,7 @@ const TUICallType = {
   AUDIO_CALL: 1,
   VIDEO_CALL: 2,
 };
-const Version = '4.5.9'; // basic-demo 原来上报使用
+const Version = '4.5.11'; // basic-demo 原来上报使用
 
 // 输出产物
 export {