@trtc/calls-uikit-react 4.5.1 → 4.5.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.5.1",
+  "version": "4.5.3-beta.1",
   "main": "./tuicall-uikit-react.umd.js",
   "module": "./tuicall-uikit-react.es.js",
   "types": "./types/index.d.ts",
@@ -14,9 +14,8 @@
   },
   "dependencies": {
     "@tencentcloud/tui-core-lite": "~1.0.1",
-    "@trtc/call-engine-lite-js": "~4.0.1",
-    "@tencentcloud/lite-chat": "^1.6.3",
-    "@trtc/call-engine-lite-wx": "~4.0.0"
+    "@trtc/call-engine-lite-js": "4.0.5-beta.1",
+    "@tencentcloud/lite-chat": "^1.6.3"
 },
   "bugs": {
     "url": "https://github.com/tencentyun/TUICallKit/issues"

package/src/Components/components/base/Message/Message.tsx

@@ -46,7 +46,8 @@ export function Message(props: IMessageProps) {
     plaintext = false,
     onClose = () => null,
   } = props;
-  const timer = useRef<any>();
+  // React 19's useRef removed the no-argument overload; pass undefined explicitly.
+  const timer = useRef<any>(undefined);
   const classnames = classNames([
     className,
     `${classPrefix}-message-container`,

package/src/Components/components/base/Message/MessagePlugin.tsx

@@ -1,4 +1,4 @@
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
 import React, { CSSProperties, useEffect } from 'react';
 import { IMessageProps, Message } from './Message';
 import { noop } from '../../../../TUICallService/utils/common-utils';
@@ -46,7 +46,9 @@ function createContainer(): Promise<Element> {
     const container = Array.from(mountedDom.querySelectorAll(`#${containerId}`));
     if (container.length < 1) {
       const div = document.createElement('div');
-      render(
+      // Use React 18+ createRoot API; legacy ReactDOM.render was removed in React 19.
+      const root = createRoot(div);
+      root.render(
         <MessageContainer
           id={containerId}
           zIndex={1}
@@ -56,7 +58,6 @@ function createContainer(): Promise<Element> {
             resolve(containers[0]);
           }}
         />,
-        div,
       );
     } else {
       resolve(container[0]);
@@ -73,9 +74,18 @@ async function createMessage(theme, config): Promise<any> {
 
   keyIndex += 1;
 
+  // Persist the React root so it can be unmounted explicitly in close().
+  let root: Root | null = null;
   const message = {
     close: () => {
-      unmountComponentAtNode(div);
+      if (root) {
+        // Defer unmount to the next tick to avoid React's "synchronously unmount
+        // a root while React is already rendering" warning when the close is
+        // triggered from inside a render-phase callback.
+        const targetRoot = root;
+        root = null;
+        Promise.resolve().then(() => targetRoot.unmount());
+      }
       div.remove();
       message.closed = true;
     },
@@ -95,10 +105,9 @@ async function createMessage(theme, config): Promise<any> {
   }
 
   return new Promise((resolve) => {
-    // TODO
-    // ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
-    // Renders the component.
-    render(
+    // Use React 18+ createRoot API; legacy ReactDOM.render was removed in React 19.
+    root = createRoot(div);
+    root.render(
       <Message
         key={keyIndex}
         {...config}
@@ -111,7 +120,6 @@ async function createMessage(theme, config): Promise<any> {
       >
         {content}
       </Message>,
-      div,
     );
 
     // Mounts the current rendered message to the specified container.

package/src/Components/components/base/Popup/Popup.tsx

@@ -29,7 +29,8 @@ const Popup = forwardRef((props: IPopupProps, ref: any) => {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const contentRef = useRef(null); // The content section.
-  const updateTimeRef = useRef<any>();
+  // React 19's useRef removed the no-argument overload; pass undefined explicitly.
+  const updateTimeRef = useRef<any>(undefined);
   const popupRef = useRef(null);
   const { styles } = usePopper(referenceElement, popperElement, {
     modifiers: [{ name: 'arrow', options: { element: arrowElement } }],

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

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

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

@@ -50,7 +50,9 @@ function processAnchorTags(content: string): string {
   return doc.body.innerHTML;
 }
 
-const TypeIcons: Record<string, () => JSX.Element> = {
+// React 19 narrows component return types; use ReactNode instead of JSX.Element
+// so each entry can be rendered as <TypeIcon />.
+const TypeIcons: Record<string, () => ReactNode> = {
   success: () => <span style={{ color: 'green', marginRight: '6px' }}>✓</span>,
   info: () => <span style={{ color: '#1890ff', marginRight: '6px' }}>ℹ</span>,
   error: () => <span style={{ color: 'red', marginRight: '6px' }}>✕</span>,

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.1';
+const version = '4.5.3-beta.1';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'react';
 export { TUIGlobal, TUIStore, uiDesign };
@@ -51,6 +51,13 @@ export default class TUICallService {
   private _wasmReadyPromise;
   private _wasmReadyResolve;
   private _isInitialized = false;
+  // Use an arrow function to keep the `this` binding when registering/unregistering the listener.
+  private _handleAutoPlayFailed = () => {
+    this._tuiCallEngine?.reportLog?.({
+      name: 'TUICallkit.onAutoPlayFailed',
+    });
+    TUIStore.update(StoreName.CALL, NAME.IS_SHOW_AUTO_PLAY_DIALOG, true);
+  };
 
   constructor() {
     console.log(`${NAME.PREFIX}version: ${version}`);
@@ -132,6 +139,9 @@ export default class TUICallService {
       trtcCloudInstance?.callExperimentalAPI(JSON.stringify(
         { "api": "enableAutoPlayDialog","params": { "enable": 0 } }
       ));
+      // Register the auto play failed listener at initialization time, otherwise the event may
+      // be fired before the AutoPlayDialog component is mounted and the listener would miss it.
+      trtcCloudInstance?.on?.('onAutoPlayFailed', this._handleAutoPlayFailed);
       this._tuiCallEngine?.reportLog?.({
         name: 'TUICallkit.init',
         data: {
@@ -153,6 +163,8 @@ export default class TUICallService {
       }
       if (this._tuiCallEngine) {
         this._removeListenTuiCallEngineEvent();
+        const trtcCloudInstance = this._tuiCallEngine?.getTRTCCloudInstance?.();
+        trtcCloudInstance?.off?.('onAutoPlayFailed', this._handleAutoPlayFailed);
         await this._tuiCallEngine.destroyInstance();
         this._tuiCallEngine = null;
       }
@@ -338,6 +350,9 @@ export default class TUICallService {
           const { enable } = params;
           TUIStore.update(StoreName.CALL, NAME.IS_FORCE_USE_V2_API, !!enable);
           break;
+        case 'setWaterMark':
+          this._tuiCallEngine?.callExperimentalAPI?.(jsonStr);
+          break;
         default:
           break;
       }

package/src/TUICallService/TUIStore/callStore.ts

@@ -27,6 +27,7 @@ export default class CallStore {
     showPermissionTip: false,
     netWorkQualityList: [], // 显示网络状态差的提示
     isMuteSpeaker: false,
+    isShowAutoPlayDialog: false, // 是否显示自动播放失败弹窗, 默认: false
     callID: '', // callEngine 3.1 support
     groupID: '',
     roomID: 0,

package/src/TUICallService/const/index.ts

@@ -26,6 +26,7 @@ export const CALL_DATA_KEY: any = {
   PLAYER: 'player',
   IS_EAR_PHONE: 'isEarPhone',
   IS_MUTE_SPEAKER: 'isMuteSpeaker',
+  IS_SHOW_AUTO_PLAY_DIALOG: 'isShowAutoPlayDialog',
   SHOW_PERMISSION_TIP: 'SHOW_PERMISSION_TIP',
   NETWORK_STATUS: 'NetWorkStatus',
   CALL_ID: 'callID',

package/src/TUICallService/interface/ICallStore.ts

@@ -34,6 +34,7 @@ export interface ICallStore {
   roomIdType: number;
   cameraPosition: CameraPosition; // 前置或后置，值为front, back
   isMuteSpeaker: boolean;
+  isShowAutoPlayDialog: boolean; // 是否显示自动播放失败弹窗, 默认: false
   groupCallMembers: IUserInfo[];  // chat 群会话中在通话的成员
   // TUICallKit 组件上的属性
   displayMode: VideoDisplayMode; // 设置预览远端的画面显示模式, 默认: VideoDisplayMode.COVER

package/src/index.ts

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