@trtc/calls-uikit-vue2 4.5.1 → 4.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-vue2",
-  "version": "4.5.1",
+  "version": "4.5.3",
   "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.1",
-    "@trtc/call-engine-lite-js": "~4.0.1",
+    "@trtc/call-engine-lite-js": "~4.0.4",
     "@tencentcloud/lite-chat": "^1.6.3",
     "@trtc/call-engine-lite-wx": "~4.0.0"
 },

package/src/Components/TUICallKit.vue

@@ -4,6 +4,9 @@
     :class="[bodyStyle, miniMizedDeskStyle, mobileVideoStyle, mobileAudioStyle]">
     <SingleCall v-if="!callInfoContextValue.isGroupCall" class="singCall"></SingleCall>
     <GroupCall v-else class="singCall"></GroupCall>
+    <!-- @if process.env.BUILD_TARGET!='MINI' -->
+    <AutoPlayDialog />
+    <!-- @endif -->
     <AISubtitle />
   </div>
 </template>
@@ -15,6 +18,7 @@ import GroupCall from './components/GroupCall/GroupCall.vue';
 import { PermitTip } from './components/common/PermitTip/PermitTip';
 import { Toast } from './components/common/Toast';
 import AISubtitle from './components/common/AIAssistant/AISubtitle.vue';
+import AutoPlayDialog from './components/common/AutoPlayDialog/AutoPlayDialog.vue';
 import { UIKitModal } from './components/common/UIKitModal';
 import { TUIGlobal, TUIStore, StoreName, TUICallKitAPI, NAME, CallStatus, CallMediaType, VideoDisplayMode, VideoResolution } from '../TUICallService/index';
 import {

package/src/Components/components/GroupCall/GroupCall.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="groupcall-container">
     <TopBar />
-    <!-- @if process.env.BUILD_TARGET!='MINI' -->
-    <AutoPlayDialog />
-    <!-- @endif -->
     <Waiting v-if="callStatus === CallStatus.CALLING && callRole === CallRole.CALLEE && !isFloatWindow" />
     <MediaContainer />
     <Tip />
@@ -26,7 +23,6 @@
 <script lang="ts" setup>
 import { ref, provide, toRefs, onMounted, onUnmounted } from '../../../adapter-vue';
 import TopBar from '../common/TopBar/TopBar.vue';
-import AutoPlayDialog from '../common/AutoPlayDialog/AutoPlayDialog.vue';
 import Waiting from '../common/Waiting/Waiting.vue';
 import MediaContainer from './MediaContainer/MediaContainer.vue';
 import Tip from '../common/Tip/Tip.vue';

package/src/Components/components/SingleCall/SingleCall.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="singlecall-container">
     <TopBar />
-    <!-- @if process.env.BUILD_TARGET!='MINI' -->
-    <AutoPlayDialog />
-    <!-- @endif -->
     <Waiting v-if="callStatus === CallStatus.CALLING" />
     <MediaContainer />
     <Tip />
@@ -15,7 +12,6 @@
 import { toRefs } from '../../../adapter-vue';
 import { CallStatus } from '../../../TUICallService';
 import TopBar from '../common/TopBar/TopBar.vue';
-import AutoPlayDialog from '../common/AutoPlayDialog/AutoPlayDialog.vue';
 import Waiting from '../common/Waiting/Waiting.vue';
 import MediaContainer from './MediaContainer/MediaContainer.vue';
 import Tip from '../common/Tip/Tip.vue';

package/src/Components/components/common/AutoPlayDialog/AutoPlayDialog.vue

@@ -15,27 +15,31 @@ export default {
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from '../../../../adapter-vue';
-import { TUICallKitAPI, TUIGlobal } from '../../../../TUICallService/index';
+import { TUIStore, StoreName, NAME, TUIGlobal } from '../../../../TUICallService/index';
 import { useTranslate } from '../../../hooks';
 const t = useTranslate();
-const isAutoPlayDialogVisible = ref(false);
+// The onAutoPlayFailed event is listened in CallService at initialization time and its result is
+// stored in TUIStore, so here we only need to sync the visibility from the store.
+const isAutoPlayDialogVisible = ref(TUIStore.getData(StoreName.CALL, NAME.IS_SHOW_AUTO_PLAY_DIALOG));
+
+const handleAutoPlayDialogVisibleChange = (value: boolean) => {
+  isAutoPlayDialogVisible.value = value;
+};
 
 onMounted(() => {
-  const trtcCloudInstance = TUICallKitAPI.getTUICallEngineInstance().getTRTCCloudInstance();
-  trtcCloudInstance.on('onAutoPlayFailed', autoPlayFailedHandler);
+  TUIStore.watch(StoreName.CALL, {
+    [NAME.IS_SHOW_AUTO_PLAY_DIALOG]: handleAutoPlayDialogVisibleChange,
+  });
 });
 
 onUnmounted(() => {
-  const trtcCloudInstance = TUICallKitAPI.getTUICallEngineInstance().getTRTCCloudInstance();
-  trtcCloudInstance.off('onAutoPlayFailed', autoPlayFailedHandler);
+  TUIStore.unwatch(StoreName.CALL, {
+    [NAME.IS_SHOW_AUTO_PLAY_DIALOG]: handleAutoPlayDialogVisibleChange,
+  });
 });
 
-const autoPlayFailedHandler = () => {
-  isAutoPlayDialogVisible.value = true;
-};
-
 const handleResumePlaybackClick = () => {
-  isAutoPlayDialogVisible.value = false;
+  TUIStore.update(StoreName.CALL, NAME.IS_SHOW_AUTO_PLAY_DIALOG, false);
 };
 </script>
 

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';
 import AIAssistant from './AIAssistant'; // 仅 web 支持 AI 实时字幕
 const frameWork = 'vue2.7';
 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;
       }

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

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