@trtc/calls-uikit-vue2 4.4.6 → 4.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-vue2",
-  "version": "4.4.6",
+  "version": "4.4.7",
   "main": "./tuicall-uikit-vue2.umd.js",
   "module": "./tuicall-uikit-vue2.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/hooks/useCustomUIButtonConfig.ts

@@ -1,6 +1,6 @@
 import { watch, ref, toRefs, computed } from '../../adapter-vue';
 import { useCustomUI } from './useCustomUI';
-import { TUIGlobal, CallStatus } from '../../TUICallService';
+import { TUIGlobal, CallStatus, TUIStore, StoreName, NAME } from '../../TUICallService';
 import { add, deepClone, findValues, modify } from '../util';
 import { VirtualBackgroundMobileConfig } from '../components/common/ButtonPanel/config/VirtualBackgroundMobileConfig';
 import { useCallInfoContext } from './useCallInfoContext';
@@ -36,15 +36,46 @@ function setCloseCameraConfig(config, isVideoAvailable, isShowVirtualBackgroundI
   return newConfig;
 }
 
+/**
+ * Hide inviteUser button when groupID is empty (not a Chat group call)
+ * This prevents showing the invite button when there's no group member list available
+ */
+function setInviteUserVisibility(config, groupID) {
+  const newConfig = deepClone(config);
+  const hasValidGroupID = groupID && typeof groupID === 'string' && groupID.trim() !== '';
+  
+  if (!hasValidGroupID) {
+    // Hide inviteUser button in all group call scenarios when no valid groupID
+    // PC group call video
+    modify(newConfig, 'pc.groupCall.video.calling[0][2].props.show', false);
+    modify(newConfig, 'pc.groupCall.video.connected[0][3].props.show', false);
+    // PC group call audio
+    modify(newConfig, 'pc.groupCall.audio.calling[0][2].props.show', false);
+    modify(newConfig, 'pc.groupCall.audio.connected[0][3].props.show', false);
+  }
+  
+  return newConfig;
+}
+
 export function useCustomUIButtonConfig() {
   const { isShowEnableVirtualBackground, callStatus } = toRefs(useCallInfoContext());
   const customUIConfig = useCustomUI();
   const { localUserInfoExcludeVolume: localUserInfo } = toRefs(useUserInfoExcludeVolumeContext());
   const isVideoAvailable = computed(() => localUserInfo?.value.isVideoAvailable || false);
   const isShowVirtualBackgroundIcon = computed(() => isShowEnableVirtualBackground.value && !TUIGlobal.isH5);
+  const groupID = ref(TUIStore.getData(StoreName.CALL, NAME.GROUP_ID));
   const results = ref([]);
 
-  watch([customUIConfig, isShowEnableVirtualBackground, isVideoAvailable], () => {
+  // Watch groupID changes from TUIStore
+  const handleGroupIDChange = (value) => {
+    groupID.value = value;
+  };
+
+  TUIStore.watch(StoreName.CALL, {
+    [NAME.GROUP_ID]: handleGroupIDChange,
+  });
+
+  watch([customUIConfig, isShowEnableVirtualBackground, isVideoAvailable, groupID], () => {
     let initConfig = deepClone(ButtonPanelConfig);
     if (isShowVirtualBackgroundIcon.value) {
       initConfig = setVirtualBackgroundConfig(ButtonPanelConfig);
@@ -52,6 +83,10 @@ export function useCustomUIButtonConfig() {
     if(callStatus.value === CallStatus.CONNECTED) {
       initConfig = setCloseCameraConfig(initConfig, isVideoAvailable.value, isShowVirtualBackgroundIcon.value);
     }
+
+    // Hide inviteUser button when not in a Chat group (no groupID)
+    initConfig = setInviteUserVisibility(initConfig, groupID.value);
+    
     const { button: buttonsConfig } = customUIConfig.value;
     const rs = [];
     function condition(value) {

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.7';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'vue2.7';
 export { TUIGlobal, TUIStore, uiDesign };
@@ -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/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/index.ts

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