@trtc/calls-uikit-react 4.4.6 → 4.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.4.6",
+  "version": "4.4.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.0",
-    "@trtc/call-engine-lite-js": "~3.5.7",
+    "@trtc/call-engine-lite-js": "~3.5.8",
     "@tencentcloud/lite-chat": "^1.6.3",
     "@trtc/call-engine-lite-wx": "~3.4.8"
 },

package/src/Components/style/theme/_dark.scss

@@ -1,17 +1,17 @@
 $dark-colors: (
   // bg
-  --uikit-theme-dark-bg-color-topbar: #16171a,
+  --uikit-theme-dark-bg-color-topbar: #131417,
   --uikit-theme-dark-bg-color-operate: #1f2024,
   --uikit-theme-dark-bg-color-input: #2b2c30,
   --uikit-theme-dark-bg-color-bubble-reciprocal: #2b2c30,
   --uikit-theme-dark-bg-color-bubble-own: #5c9dff,
-  --uikit-theme-dark-bg-color-default: #16171a,
+  --uikit-theme-dark-bg-color-default: #131417,
   --uikit-theme-dark-bg-color-tag-mask: rgba(0, 0, 0, 55%),
   --uikit-theme-dark-bg-color-mask: rgba(0, 0, 0, 55%),
   // text
   --uikit-theme-dark-text-color-primary: rgba(255, 255, 255, 93%),
-  --uikit-theme-dark-text-color-secondary: rgba(255, 255, 255, 66%),
-  --uikit-theme-dark-text-color-tertiary: rgba(255, 255, 255, 40%),
+  --uikit-theme-dark-text-color-secondary: rgba(255, 255, 255, 55%),
+  --uikit-theme-dark-text-color-tertiary: rgba(255, 255, 255, 30%),
   --uikit-theme-dark-text-color-disable: rgba(255, 255, 255, 28%),
   --uikit-theme-dark-text-color-link: #4086ff,
   --uikit-theme-dark-text-color-link-hover: #2b6ad6,

package/src/Components/style/theme/_light.scss

@@ -9,8 +9,8 @@ $light-colors: (
   --uikit-theme-light-bg-color-tag-mask: rgba(255, 255, 255, 55%),
   --uikit-theme-light-bg-color-mask: rgba(0, 0, 0, 55%),
   // text
-  --uikit-theme-light-text-color-primary: rgba(0, 0, 0, 93%),
-  --uikit-theme-light-text-color-secondary: rgba(0, 0, 0, 66%),
+  --uikit-theme-light-text-color-primary: rgba(0, 0, 0, 90%),
+  --uikit-theme-light-text-color-secondary: rgba(0, 0, 0, 55%),
   --uikit-theme-light-text-color-tertiary: rgba(0, 0, 0, 40%),
   --uikit-theme-light-text-color-disable: rgba(0, 0, 0, 28%),
   --uikit-theme-light-text-color-link: #1c66e5,
@@ -24,14 +24,14 @@ $light-colors: (
   // dropdown
   --uikit-theme-light-dropdown-color-default: #fff,
   --uikit-theme-light-dropdown-color-hover: #f9fafc,
-  --uikit-theme-light-dropdown-color-active: #ebf3ff,
+  --uikit-theme-light-dropdown-color-active: #cce2ff,
   // list
   --uikit-theme-light-list-color-default: #fff,
   --uikit-theme-light-list-color-hover: #f9fafc,
   --uikit-theme-light-list-color-active: #ebf3ff,
   // border
-  --uikit-theme-light-stroke-color-primary: #f9fafc,
-  --uikit-theme-light-stroke-color-secondary: rgba(0, 0, 0, 55%),
+  --uikit-theme-light-stroke-color-primary: #e6e9f0,
+  --uikit-theme-light-stroke-color-secondary: #f0f2f7,
   // box-shadow
   --uikit-theme-light-shadow-color: rgba(0, 0, 0, 6%),
   // floatWindow
@@ -40,8 +40,8 @@ $light-colors: (
   // toast
   --uikit-theme-light-toast-color-default: #EBF3FF,
   --uikit-theme-light-toast-color-success: #DCFAE9,
-  --uikit-theme-light-toast-color-warning: #FFEEDB,
-  --uikit-theme-light-toast-color-error: #FFE7E5,
+  --uikit-theme-light-toast-color-warning: #ffd6b2,
+  --uikit-theme-light-toast-color-error: #ffe7e6,
   // btn
   --uikit-theme-light-button-color-hangup: #E54545,
   --uikit-theme-light-button-color-accept: #0ABF77,

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.4.6';
+const version = '4.4.8';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'react';
 export { TUIGlobal, TUIStore, uiDesign };
@@ -83,7 +83,7 @@ export default class TUICallService {
     await this._wasmReadyPromise;
     
     if (!this._isInitialized) {
-      this._doInit(params);
+      await this._doInit(params);
       this._isInitialized = true;
     }
   }
@@ -581,15 +581,22 @@ export default class TUICallService {
   public executeExternalAfterCalling(): void {
     this.afterCalling && this.afterCalling();
   }
-  // 处理用户异常退出的情况, 小程序 ”右滑“、"左上角退出"; web 页面关闭浏览器或关闭 tab 页面
+  // Handle exception exit: mini program "swipe right", "exit from top left"; web close browser or close tab
   public async handleExceptionExit(event?: any) {
     try {
       const callStatus = TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS);
       const callRole = TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE);
-      this._tuiCallEngine?.reportLog?.({ name: 'TUICallkit.handleExceptionExit', data: { callStatus, callRole } });
+
+      this._tuiCallEngine?.reportLog?.({
+        name: 'TUICallkit.handleExceptionExit',
+        data: { callStatus, callRole, source: event?.type || 'unknown' }
+      });
 
       if (callStatus === CallStatus.IDLE) return;
-      // 在呼叫状态下，被叫调用 reject，主叫调用 hangup
+
+      console.log(`${NAME.PREFIX} handleExceptionExit triggered, status: ${callStatus}, role: ${callRole}, event: ${event?.type}`);
+
+      // Execute hangup/reject based on call status and role
       if (callStatus === CallStatus.CALLING) {
         if (callRole === CallRole.CALLER) {
           await this?.hangup();
@@ -629,7 +636,7 @@ export default class TUICallService {
     }
   }
   // =========================【private methods for service use】=========================
-  // 处理 “呼叫” 抛出的异常
+  // 处理 "呼叫" 抛出的异常
   private _handleCallError(error: any, methodName?: string) {
     this._permissionCheckTimer && clearInterval(this._permissionCheckTimer);
 

package/src/TUICallService/TUIGlobal/tuiGlobal.ts

@@ -1,4 +1,4 @@
-import { APP_NAMESPACE, IS_PC, IS_H5, IN_WX_MINI_APP, IN_UNI_NATIVE_APP, IN_UNI_APP, IS_MAC, IS_WIN } from '../utils/env';
+import { APP_NAMESPACE, IS_PC, IS_H5, IN_WX_MINI_APP, IN_UNI_NATIVE_APP, IN_UNI_APP, IS_MAC, IS_WIN, IS_WX_HARMONY } from '../utils/env';
 import { ITUIGlobal } from '../interface/ITUIGlobal';
 
 export default class TUIGlobal implements ITUIGlobal {
@@ -12,6 +12,7 @@ export default class TUIGlobal implements ITUIGlobal {
   public isOfficial: boolean = false;
   public isWIN: boolean = false;
   public isMAC: boolean = false;
+  public isWxHarmony: boolean = false;
   constructor() {
     this.initEnv();
   }
@@ -35,6 +36,7 @@ export default class TUIGlobal implements ITUIGlobal {
     this.isUniPlatform = IN_UNI_APP;
     this.isWIN = IS_WIN;
     this.isMAC = IS_MAC;
+    this.isWxHarmony = IS_WX_HARMONY;
   }
 
   initOfficial(SDKAppID: number) {

package/src/TUICallService/interface/ITUIGlobal.ts

@@ -9,6 +9,7 @@
  * @property {Boolean} isOfficial true 标识是腾讯云官网 Demo 应用
  * @property {Boolean} isWIN true 标识是window系统pc
  * @property {Boolean} isMAC true 标识是mac os系统pc
+ * @property {Boolean} isWxHarmony true 标识是微信小程序运行在鸿蒙系统
 */
 export interface ITUIGlobal {
   global: any; // 挂在 wx、uni、window 对象
@@ -20,6 +21,7 @@ export interface ITUIGlobal {
   isOfficial: boolean;
   isWIN: boolean;
   isMAC: boolean;
+  isWxHarmony: boolean;
   /**
    * 初始化 TUIGlobal 环境变量
    * @function

package/src/TUICallService/serve/callManager.ts

@@ -72,11 +72,15 @@ export class CallManager {
     // @ts-ignore
     wx.navigateTo({
       url: `/${this._globalCallPagePath}`,
-      success: () => {},
+      success: () => {
+        const callStatus = TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS);
+        if (callStatus === CallStatus.IDLE) {
+          this._handleCallStatusToIdle();
+        }
+      },
       fail: () => {
         console.error(`${PREFIX} navigateTo fail!`);
       },
-      complete: () => {},
     });
   }
 

package/src/TUICallService/utils/common-utils.ts

@@ -252,18 +252,163 @@ export function interpolate(str, data) {
     return data[key] !== undefined ? String(data[key]) : match;
   });
 }
-// Execute the callback when detecting browser refresh or close, but skip processing for page navigation
+
+/**
+ * Detect current runtime environment
+ */
+function detectEnvironment(): 'pc-browser' | 'mobile-browser' | 'webview' | 'miniprogram' {
+  const ua = navigator.userAgent || '';
+  const uaLower = ua.toLowerCase();
+
+  // WeChat MiniProgram WebView
+  if (uaLower.includes('miniprogram') ||
+      (window as any).__wxjs_environment === 'miniprogram') {
+    return 'miniprogram';
+  }
+
+  // App WebView
+  if (uaLower.includes('webview') ||
+      uaLower.includes(' wv') ||
+      (window as any).webkit?.messageHandlers) {
+    return 'webview';
+  }
+
+  // Mobile browser
+  if (/Android|iPhone|iPad|iPod|Mobile/i.test(ua)) {
+    return 'mobile-browser';
+  }
+
+  return 'pc-browser';
+}
+
+/**
+ * Detect if current device is iOS
+ */
+function isIOS(): boolean {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent || '');
+}
+
+/**
+ * Detect if current device is Android
+ */
+function isAndroid(): boolean {
+  return /Android/.test(navigator.userAgent || '');
+}
+
+/**
+ * Enhanced browser/webview close detection for exception exit handling
+ * Supports: PC browsers (Chrome/Safari/Firefox/Edge), Mobile browsers (Android/iOS), WebView
+ * 
+ * Note: Mobile background switching (visibilitychange to hidden) will NOT trigger hangup,
+ * only actual page close/navigation events will trigger the callback.
+ *
+ * @param callback - Function to call when exit is detected
+ */
 export function initBrowserCloseDetection(callback: Function) {
-  if (window?.addEventListener) {
-    // Trigger condition: close tab、refresh、navigate
-    window.addEventListener('beforeunload', (event) => {
-      const navigationEntries = performance?.getEntriesByType('navigation') || [];
-      const navigationEntry = navigationEntries[0];
-      // @ts-ignore
-      if (navigationEntry && navigationEntry.type === 'navigate') {
-        return;
-      }
+  if (typeof window === 'undefined') return;
+
+  let isExiting = false;
+  const env = detectEnvironment();
+
+  console.log(`[ExitDetection] Environment: ${env}, iOS: ${isIOS()}, Android: ${isAndroid()}`);
+
+  /**
+   * Trigger exit handler with deduplication
+   */
+  const triggerExit = (source: string, event?: Event) => {
+    if (isExiting) return;
+    isExiting = true;
+
+    console.log(`[ExitDetection] Exit triggered by: ${source}`);
+
+    try {
       callback(event);
-    });
+    } catch (error) {
+      console.error(`[ExitDetection] Callback error:`, error);
+    }
+
+    // Reset flag after delay (for bfcache scenarios)
+    setTimeout(() => {
+      isExiting = false;
+    }, 1000);
+  };
+
+  /**
+   * Handle beforeunload event
+   * Best for: PC browsers, Android browsers
+   */
+  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+    // Skip if it's just navigation (not actual page close)
+    const navigationEntries = performance?.getEntriesByType?.('navigation') || [];
+    const navigationEntry = navigationEntries[0] as PerformanceNavigationTiming;
+    if (navigationEntry && navigationEntry.type === 'navigate') {
+      return;
+    }
+
+    triggerExit('beforeunload', event);
+
+    // Required for some browsers to trigger the event
+    event.returnValue = '';
+    return '';
+  };
+
+  /**
+   * Handle pagehide event
+   * Best for: iOS Safari, all modern browsers
+   * More reliable than beforeunload on iOS
+   */
+  const handlePageHide = (event: PageTransitionEvent) => {
+    // persisted=true means page might be restored from bfcache
+    if (!event.persisted) {
+      triggerExit('pagehide', event);
+    }
+  };
+
+  /**
+   * Handle visibilitychange event
+   * Note: We only log this event, do NOT trigger hangup on mobile background switch
+   * Because user may just switch apps temporarily and come back
+   */
+  const handleVisibilityChange = () => {
+    if (document.visibilityState === 'hidden') {
+      // Only log, do NOT trigger exit on visibility change
+      // Mobile users often switch apps temporarily during calls
+      console.log(`[ExitDetection] Visibility changed to hidden (not triggering exit)`);
+    }
+  };
+
+  /**
+   * Handle freeze event (Page Lifecycle API, Chrome 68+)
+   * This indicates the page is being frozen, which is a strong signal of exit
+   */
+  const handleFreeze = () => {
+    triggerExit('freeze');
+  };
+
+  // ============ Register event listeners based on environment ============
+
+  // 1. pagehide - Most reliable for iOS, works on all modern browsers
+  if (window.addEventListener) {
+    window.addEventListener('pagehide', handlePageHide, { capture: true });
+  }
+
+  // 2. beforeunload - Best for PC browsers and Android
+  if (env === 'pc-browser' || isAndroid()) {
+    window.addEventListener('beforeunload', handleBeforeUnload);
   }
+
+  // 3. visibilitychange - Only for logging, not triggering exit
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+
+  // 4. freeze - Page Lifecycle API (Chrome 68+)
+  if ('onfreeze' in document) {
+    document.addEventListener('freeze', handleFreeze as EventListener);
+  }
+
+  // 5. unload - Legacy fallback (deprecated but still useful in some cases)
+  window.addEventListener('unload', (event) => {
+    triggerExit('unload', event);
+  });
+
+  console.log(`[ExitDetection] Listeners registered for environment: ${env}`);
 }

package/src/TUICallService/utils/env.ts

@@ -49,3 +49,9 @@ export const IS_H5 = IS_ANDROID || IS_WIN_PHONE || IS_SYMBIAN || IS_IOS;
 export const IS_PC = IN_BROWSER && !IS_H5;
 export const IS_WIN = IS_PC && USER_AGENT.includes('Windows NT');
 export const IS_MAC = IS_PC && USER_AGENT.includes('Mac');
+
+let IS_WX_HARMONY = false;
+if (IN_WX_MINI_APP) {
+  IS_WX_HARMONY = (wx.getSystemInfoSync()?.system || '').includes('Harmony');
+}
+export { IS_WX_HARMONY };

package/src/index.ts

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