@trtc/calls-uikit-react 4.5.7 → 4.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.5.7",
+  "version": "4.5.8",
   "main": "./tuicall-uikit-react.umd.js",
   "module": "./tuicall-uikit-react.es.js",
   "types": "./types/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@tencentcloud/tui-core-lite": "~1.0.1",
-    "@trtc/call-engine-lite-js": "~4.0.8",
+    "@trtc/call-engine-lite-js": "~4.0.9",
     "@tencentcloud/lite-chat": "^1.6.3",
     "@trtc/call-engine-lite-wx": "~5.0.6"
 },

package/src/Components/TUICallKit/TUICallKit.tsx

@@ -26,6 +26,7 @@ import {
 } from '../context';
 import { MessagePlugin } from '../components/base/Message/MessagePlugin';
 import FloatingWindow from '../components/common/FloatingWindow';
+import { UIKitModal } from '../components/common/UIKitModal';
 import useGetSpeakers from '../hooks/useGetSpeakers';
 import TUICallKitStyle from './TUICallKit.module.scss';
 import Portal from '../components/base/Portal/Portal';
@@ -177,6 +178,21 @@ export default function TUICallKit(props: ITUICallKitProps) {
     setTranslateContextValue({ t: value });
   }
 
+  // Consume the MODAL_ERROR store written by handleModalError (e.g. package errors
+  // -1001/-1002, no camera/microphone 60003/60004). UIKitModal.openModal is imperative
+  // and mounts its own portal on document.body, so it works even when callStatus is IDLE
+  // and the component tree below returns null.
+  const handleModalErrorChange = (value) => {
+    if (value) {
+      UIKitModal.openModal({
+        id: value?.id,
+        title: value?.title,
+        content: value?.content,
+        type: 'error',
+      });
+    }
+  };
+
   const watchOptions = {
     [NAME.CALL_STATUS]: handleCallStatusChange,
     [NAME.IS_GROUP]: handleIsGroupChange,
@@ -192,6 +208,7 @@ export default function TUICallKit(props: ITUICallKitProps) {
     [NAME.IS_SHOW_ENABLE_VIRTUAL_BACKGROUND]: handleIsShowEnableVirtualBackgroundChange,
     [NAME.IS_MUTE_SPEAKER]: handleMuteSpeakerChange,
     [NAME.TRANSLATE]: handleTranslateChange,
+    [NAME.MODAL_ERROR]: handleModalErrorChange,
   };
 
   useLayoutEffect(() => {

package/src/TUICallService/CallService/UIKitModal.ts

@@ -25,16 +25,18 @@ const WEB_MODAL_ERROR_CODES = [
     30000,
     20007,
     101002,
+    101011,
+    -3301,
 ];
 
 const WEB_MODAL_ERROR_MAP = {
     '-1001': {
         id: 10001,
-        key: 'error.10001'
+        key: 'error.10001',
     },
     '-1002': {
         id: 10002,
-        key: 'error.10002'
+        key: 'error.10002',
     },
     '-1101': {
         id: 10004,
@@ -67,6 +69,18 @@ const WEB_MODAL_ERROR_MAP = {
     '101002': {
         id: 10014,
         key: 'error.10014'
+    },
+    // 101011: package ability not supported, needs an upgrade on the console.
+    // Message references the engine's ERROR_PACKAGE_NOT_SUPPORTED wording.
+    '101011': {
+        id: 10016,
+        key: 'error.10016'
+    },
+    '-3301': {
+        id: 10015,
+        key: 'error.10015',
+        // Message shown when the call is initiated from the Chat + TUICallKit integrated scenario.
+        chatKey: 'error.10015.chat'
     }
 };
 // @endif
@@ -76,6 +90,8 @@ const MINI_MODAL_ERROR_CODES = [
     -1001,
     -1002,
     101002,
+    101011,
+    -3301,
 ];
 
 const MINI_MODAL_ERROR_MAP = {
@@ -90,33 +106,50 @@ const MINI_MODAL_ERROR_MAP = {
     '101002': {
         id: 10014,
         content: '发起通话失败，用户 ID 无效，请确认该用户已注册'
+    },
+    // 101011: package ability not supported, needs an upgrade on the console.
+    // Content references the engine's ERROR_PACKAGE_NOT_SUPPORTED wording.
+    '101011': {
+        id: 10016,
+        content: '您的应用还未开通音视频通话（TUICallKit）能力，您可以去控制台申请免费体验：https://console.cloud.tencent.com/im/detail 或购买通话能力套餐包：https://buy.cloud.tencent.com/avc 有疑问请参考：https://cloud.tencent.com/document/product/647/104662'
+    },
+    '-3301': {
+        id: 10015,
+        content: '未开通 TRTC 服务导致进房失败，请到控制台为您的应用开通 TRTC 服务',
+        // Content shown when the call is initiated from the Chat + TUICallKit integrated scenario.
+        chatContent: '当前为 Chat 融合场景，未开通 TRTC 服务导致进房失败，请到 IM 控制台为您的应用开通 TRTC 服务'
     }
 }
 // @endif
 
-export function handleModalError(error) {
+// `isFromChat` marks whether the current call is initiated from the Chat + TUICallKit
+// integrated scenario (true) or from standalone TUICallKit (false), so the modal can
+// show source-specific guidance for package errors such as -1001 / -1002.
+export function handleModalError(error, isFromChat = false) {
     if (!error || !error?.code) {
         return;
     }
 
     // @if process.env.BUILD_TARGET!='MINI'
-    handleWebModalError(error);
+    handleWebModalError(error, isFromChat);
     // @endif
 
     // @if process.env.BUILD_TARGET='MINI'
-    handleMiniModalError(error);
+    handleMiniModalError(error, isFromChat);
     // @endif
 }
 
 // @if process.env.BUILD_TARGET!='MINI'
-function handleWebModalError(error) {
+function handleWebModalError(error, isFromChat = false) {
     if (!WEB_MODAL_ERROR_CODES.includes(error.code)) {
         return;
     }
 
     const errorInfo = WEB_MODAL_ERROR_MAP[error.code.toString()];
     if (errorInfo) {
-        let content = t(errorInfo.key);
+        // Prefer the Chat-integrated message when available and the call comes from Chat.
+        const messageKey = isFromChat && errorInfo.chatKey ? errorInfo.chatKey : errorInfo.key;
+        let content = t(messageKey);
         TUIStore.update(StoreName.CALL, NAME.MODAL_ERROR, {
             id: errorInfo.id,
             content: content,
@@ -127,16 +160,18 @@ function handleWebModalError(error) {
 // @endif
 
 // @if process.env.BUILD_TARGET='MINI'
-function handleMiniModalError(error) {
+function handleMiniModalError(error, isFromChat = false) {
     if (!MINI_MODAL_ERROR_CODES.includes(error.code)) {
         return;
     }
 
     const errorInfo = MINI_MODAL_ERROR_MAP[error.code.toString()];
     if (errorInfo) {
+        // Prefer the Chat-integrated content when available and the call comes from Chat.
+        const content = isFromChat && errorInfo.chatContent ? errorInfo.chatContent : errorInfo.content;
         UIKitModal.openModal({
             id: errorInfo.id,
-            content: errorInfo.content,
+            content: content,
             title: '错误',
             type: 'error'
         });

package/src/TUICallService/CallService/engineEventHandler.ts

@@ -344,7 +344,7 @@ export default class EngineEventHandler {
   private async _handleUserVideoAvailable(event: any): Promise<any> {
     const { userID: userId, isVideoAvailable } = analyzeEventData(event);
     console.log(`${NAME.PREFIX}_handleUserVideoAvailable event data: ${JSON.stringify(event)}.`);
-    
+
     this._setRemoteUserInfoAudioVideoAvailable(isVideoAvailable, NAME.VIDEO, userId);
     try {
       isVideoAvailable && await this._startRemoteView(userId);
@@ -395,7 +395,7 @@ export default class EngineEventHandler {
       remoteUserInfoList.push({ userId });
       TUIStore.update(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST, remoteUserInfoList);
       TUIStore.update(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST, remoteUserInfoList);
-      
+
       const [userInfo] = await getRemoteUserProfile([userId], this._callService?.getTim());
       remoteUserInfoList = TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST);
       remoteUserInfoList.forEach((obj) => {

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.7';
+const version = '4.5.8';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'react';
 export { TUIGlobal, TUIStore, uiDesign };
@@ -65,8 +65,8 @@ export default class TUICallService {
     console.log(`${NAME.PREFIX}version: ${version}`);
     this._wasmReadyPromise = new Promise(resolve => {
       this._wasmReadyResolve = resolve;
-    }); 
-    this._loadWasm(); 
+    });
+    this._loadWasm();
     this._watchTUIStore();
     this._engineEventHandler = EngineEventHandler.getInstance({ callService: this });
 
@@ -90,7 +90,7 @@ export default class TUICallService {
       return;
     }
     await this._wasmReadyPromise;
-    
+
     if (!this._isInitialized) {
       await this._doInit(params);
       this._isInitialized = true;
@@ -215,7 +215,7 @@ export default class TUICallService {
       const response = await this._tuiCallEngine.calls(callsParams);
       await this._updateCallStoreAfterCall(userIDList, response);
     } catch (error: any) {
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       this._handleCallError(error, 'calls');
     }
   }
@@ -251,7 +251,7 @@ export default class TUICallService {
       //   setLocalUserInfoAudioVideoAvailable(true, NAME.VIDEO);
       // }
     } catch (error) {
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       this._handleCallError(error, 'join');
     }
   }
@@ -381,7 +381,7 @@ export default class TUICallService {
         error,
       });
       if (handleRepeatedCallError(error)) return;
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       noDevicePermissionToast(error, CallMediaType.AUDIO, this._tuiCallEngine);
       this._resetCallStore();
     }
@@ -412,7 +412,7 @@ export default class TUICallService {
         }
       });
     } catch (error) {
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       console.debug(error);
     }
     this._resetCallStore();
@@ -426,7 +426,7 @@ export default class TUICallService {
         this._chatCombine?.callTUIService({ message: response?.data?.message });
       }
     } catch (error) {
-      handleModalError(error);
+      handleModalError(error, this._isFromChat);
       console.debug(error);
     }
     this._resetCallStore();
@@ -759,7 +759,7 @@ export default class TUICallService {
   private _resetCallStore() {
     this._cleanupAvoidRepeatCallState();
     this._bellContext?.stop();
-    
+
     const oldStatusStr = generateStatusChangeText();
     this._stopTimer();
     // localUserInfo, language 在通话结束后不需要清除

package/src/TUICallService/locales/en.ts

@@ -145,6 +145,9 @@ export const en = {
   'error.10012': "Detected that the current page is under HTTP protocol. To ensure smooth access and full functionality of TUICallEngine SDK for production environment users, please use HTTPS protocol (or localhost) to access the audio/video application page. For details, please visit: <a href='https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-05-info-browser.html#h2-3'>View Documentation</a>",
   'error.10013': "Call failed: You have been blocked by the other party or you have blocked the other party",
   'error.10014': "Call initiation failed. User ID is invalid. Please confirm that the user is registered.",
+  'error.10015': "Failed to enter the room because the TRTC service is not activated. Please go to the <a href='https://console.cloud.tencent.com/trtc'>console</a> to activate the TRTC service for your application",
+  'error.10015.chat': "You are currently in the Chat + TUICallKit integrated scenario. Failed to enter the room because the TRTC service is not activated. Please go to the <a href='https://console.cloud.tencent.com/im/rtc-config'>IM console</a> to activate the TRTC service for your application",
+  'error.10016': "Your application has not enabled the audio and video call (TUICallKit) capability. You can apply for a free trial in the <a href='https://console.cloud.tencent.com/im/detail'>console</a>, or purchase the <a href='https://buy.cloud.tencent.com/avc'>call capability package</a>. If you have any questions, please refer to the <a href='https://cloud.tencent.com/document/product/647/104662'>documentation</a>",
   'error': 'Error',
   // AI Subtitle Settings
   'ai-subtitle': 'AI Subtitle',

package/src/TUICallService/locales/ja_JP.ts

@@ -1,5 +1,5 @@
 export const ja_JP = {
-  // 按钮文案 
+  // 按钮文案
   'hangup': '通話終了',
   'reject': '拒否',
   'accept': '応答',
@@ -55,7 +55,7 @@ export const ja_JP = {
   'open camera': 'オープンカメラ',
   'close camera': 'カメラを閉じる',
   'open microphone': 'オープンマイク',
-  'close microphone': 'マイクを閉じる',  
+  'close microphone': 'マイクを閉じる',
   'camera enabled': 'カメラオン',
   'camera disabled': 'カメラオフ',
   'microphone enabled': 'マイクオン',
@@ -144,6 +144,8 @@ export const ja_JP = {
   'error.10012': "現在のページがHTTPプロトコル下にあることが検出されました。本番環境のユーザーがTUICallEngine SDKの全機能をスムーズに利用できるようにするため、音声・ビデオアプリケーションページにはHTTPSプロトコル（またはlocalhost）を使用してアクセスしてください。詳細については、<a href='https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-05-info-browser.html#h2-3'>ドキュメントを確認</a>してください",
   'error.10013': "通話失敗：相手にブロックされているか、または相手をブロックしています",
   'error.10014': "通話の開始に失敗しました。ユーザーIDが無効です。ユーザーが登録されていることを確認してください。",
+  'error.10015.chat': "現在は Chat と TUICallKit の統合シナリオです。TRTC サービスが有効化されていないため、ルームへの入室に失敗しました。<a href='https://console.cloud.tencent.com/im/rtc-config'>IM コンソール</a>でアプリケーションの TRTC サービスを有効化してください",
+  'error.10016': "あなたのアプリケーションは音声・ビデオ通話（TUICallKit）機能を有効にしていません。<a href='https://console.cloud.tencent.com/im/detail'>コンソール</a>で無料体験を申請するか、<a href='https://buy.cloud.tencent.com/avc'>通話機能パッケージ</a>を購入してください。ご不明な点がある場合は、<a href='https://cloud.tencent.com/document/product/647/104662'>ドキュメント</a>をご参照ください",
   'error': 'エラー',
   // AI Subtitle Settings
   'ai-subtitle': 'AI字幕',

package/src/TUICallService/locales/zh-cn.ts

@@ -140,6 +140,9 @@ export const zh = {
   'error.10012': "检测到当前页面正处于 http 协议下，为确保生产环境用户顺畅接入和体验 TUICallEngine SDK 的全部功能，请使用 https 协议(或 localhost)访问音视频应用页面。详情请前往：<a href='https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-05-info-browser.html#h2-3'>查看文档</a>",
   'error.10013': "呼叫失败：您已被对方拉黑或您拉黑了对方",
   'error.10014': "发起通话失败，用户 ID 无效，请确认该用户已注册。",
+  'error.10015': "未开通 TRTC 服务导致进房失败，请前往<a href='https://console.cloud.tencent.com/trtc'>控制台</a>为您的应用开通 TRTC 服务",
+  'error.10015.chat': "当前为 Chat 与 TUICallKit 融合场景，未开通 TRTC 服务导致进房失败，请前往 <a href='https://console.cloud.tencent.com/im/rtc-config'>IM 控制台</a>为您的应用开通 TRTC 服务",
+  'error.10016': "您的应用还未开通音视频通话（TUICallKit）能力，您可以去<a href='https://console.cloud.tencent.com/im/detail'>控制台</a>申请免费体验，或购买<a href='https://buy.cloud.tencent.com/avc'>通话能力套餐包</a>，有疑问请参考<a href='https://cloud.tencent.com/document/product/647/104662'>相关文档</a>",
   'error': '错误',
   // AI Subtitle Settings
   'ai-subtitle': 'AI 字幕',

package/src/index.ts

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