@tencentcloud/call-uikit-wechat - npm Package Compare versions

Comparing version 3.2.5 to 3.2.6

package.json

 {
   "name": "@tencentcloud/call-uikit-wechat",
-  "version": "3.2.5",
+  "version": "3.2.6",
   "main": "./tuicall-uikit-vue.umd.js",
@@ -16,2 +16,3 @@ "module": "./tuicall-uikit-vue.es.js",
   "dependencies": {
+    "@tencentcloud/chat": "latest",
     "@tencentcloud/tui-core": "latest",
@@ -24,13 +25,17 @@ "tuicall-engine-wx": "latest"
   "keywords": [
+    "call",
+    "video call",
+    "audio call",
+    "callkit",
     "uikit",
-    "call",
-    "vue3",
-    "tencent",
-    "chat",
-    "vue",
-    "vue2",
+    "call uikit",
     "video",
     "audio",
-    "voice",
-    "callkit",
+    "TRTC",
+    "camera",
+    "microphone",
+    "webrtc",
+    "real-time communication",
+    "javascript",
+    "rtc",
     "语音",
@@ -37,0 +42,0 @@ "视频",

src/Components/components/base/Overlay/Overlay.ts

@@ -37,4 +37,11 @@ export const OverlayProps = {
   },
+  fit: {
+    type: String,
+    default: 'cover',
+  },
+  defaultSrc: {
+    type: String,
+  },
 } as const;
 
-export const OverlayEmits = ['click'];
+export const OverlayEmits = ['click', 'error'];

src/Components/components/base/TKImage/TKImage.ts

@@ -24,2 +24,8 @@ export const Fit = ['fill', 'contain', 'cover'] as const;
   },
+  customStyle: {
+    type: Object,
+  },
+  defaultSrc: {
+    type: String,
+  },
 } as const;
@@ -26,0 +32,0 @@

src/Components/components/common/AudioStream/AudioStream.ts

@@ -26,2 +26,5 @@ export const AudioStreamProps = {
   },
+  userId: {
+    type: String,
+  },
 };

src/Components/components/common/ButtonPanel/config/InitConfig.ts

@@ -6,5 +6,5 @@ const ButtonPanelMobileConfig: any = {
         [], [
-          { name: 'switchCamera', customStyle: { justifyContent: 'flex-start' } },
-          { name: 'hangup', customStyle: { justifyContent: 'center' } },
-          { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+          {},
+          { name: 'hangup' },
+          {},
         ],
@@ -21,9 +21,9 @@ ],
         [
-          { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
+          { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
           { name: 'speaker' },
-          { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+          { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
         ], [
           {},
           { name: 'hangup', customStyle: { paddingTop: '6vh' } },
-          { name: 'switchCamera', customStyle: { justifyContent: 'center', paddingTop: '6vh' } },
+          { name: 'switchCamera', customStyle: { justifyContent: 'center', paddingTop: '6vh' }, props: {} },
         ]
@@ -49,3 +49,3 @@ ],
         [], [
-          { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
+          { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
           { name: 'hangup' },
@@ -60,5 +60,5 @@ { name: 'speaker', customStyle: { justifyContent: 'flex-end' } },
       calling: [[
-        { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
+        { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
         { name: 'speaker' },
-        { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+        { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
       ], [
@@ -77,5 +77,5 @@ {},
         [
-          { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
+          { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
           { name: 'speaker' },
-          { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+          { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
         ], [
@@ -89,5 +89,5 @@ {},
         [
-          { name: 'microphone' },
+          { name: 'microphone', props: {} },
           { name: 'speaker' },
-          { name: 'camera' },
+          { name: 'camera', props: {} },
           { name: 'hangup' },
@@ -98,5 +98,5 @@ ]
         [
-          { name: 'microphone' },
+          { name: 'microphone', props: {} },
           { name: 'speaker' },
-          { name: 'camera' },
+          { name: 'camera', props: {} },
           { name: 'hangup' },
@@ -108,5 +108,5 @@ ]
       calling: [[
-        { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
+        { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
         { name: 'speaker' },
-        { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+        { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
       ], [
@@ -125,5 +125,5 @@ {},
         [
-          { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
+          { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
           { name: 'speaker' },
-          { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+          { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
         ], [
@@ -137,5 +137,5 @@ {},
         [
-          { name: 'microphone' },
+          { name: 'microphone', props: {} },
           { name: 'speaker' },
-          { name: 'camera' },
+          { name: 'camera', props: {} },
           { name: 'hangup' },
@@ -146,5 +146,5 @@ ]
         [
-          { name: 'microphone' },
+          { name: 'microphone', props: {} },
           { name: 'speaker' },
-          { name: 'camera' },
+          { name: 'camera', props: {} },
           { name: 'hangup' },
@@ -151,0 +151,0 @@ ]

src/Components/components/common/ButtonPanel/config/VirtualBackgroundMobileConfig.ts

 export const VirtualBackgroundMobileConfig = {
   calling: [[
-    { name: 'switchCamera', customStyle: { justifyContent: 'flex-start' } },
+    { name: 'switchCamera', customStyle: { justifyContent: 'flex-start' }, props: {} },
     { name: 'virtualBackground' },
-    { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+    { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
   ], [
@@ -12,5 +12,5 @@ {},
   accept: [[
-    { name: 'switchCamera', customStyle: { justifyContent: 'flex-start' } },
+    { name: 'switchCamera', customStyle: { justifyContent: 'flex-start' }, props: {} },
     { name: 'virtualBackground' },
-    { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+    { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
   ], [
@@ -22,10 +22,10 @@ { name: 'reject', customStyle: { paddingTop: '6vh', justifyContent: 'center' } },
   connected: [[
-    { name: 'microphone', customStyle: { justifyContent: 'flex-start' } },
+    { name: 'microphone', customStyle: { justifyContent: 'flex-start' }, props: {} },
     { name: 'speaker' },
-    { name: 'camera', customStyle: { justifyContent: 'flex-end' } },
+    { name: 'camera', customStyle: { justifyContent: 'flex-end' }, props: {} },
   ], [
     { name: 'virtualBackground', customStyle: { justifyContent: 'center', paddingTop: '6vh' } },
     { name: 'hangup', customStyle: { paddingTop: '6vh' } },
-    { name: 'switchCamera', customStyle: { justifyContent: 'center', paddingTop: '6vh' } },
+    { name: 'switchCamera', customStyle: { justifyContent: 'center', paddingTop: '6vh' }, props: {} },
   ]],
 };

src/Components/components/common/ButtonPanel/hooks/useButtonPanelLayout.ts

@@ -1,31 +0,15 @@
-import { deepClone, add, modify } from '../../../../util';
 import { ref, toRefs, watch } from '../../../../../adapter-vue';
 import { CallMediaType, CallRole, CallStatus, TUIGlobal } from '../../../../../TUICallService';
-import { useButtonPanelStatus, useCallInfoContext } from '../../../../hooks';
-import { ButtonPanelConfig } from '../config/InitConfig';
-import { VirtualBackgroundMobileConfig } from '../config/VirtualBackgroundMobileConfig';
+import { useButtonPanelStatus, useCallInfoContext, useCustomUIButtonConfig } from '../../../../hooks';
 
-function setVirtualBackgroundConfig(config) {
-  const newConfig = deepClone(config);
-  modify(newConfig, 'mobile.singleCall.video', VirtualBackgroundMobileConfig);
-  add(newConfig, 'pc.singleCall.video.calling[0][2]', { name: 'virtualBackground' });
-  add(newConfig, 'pc.singleCall.video.accept[0][1]', { name: 'virtualBackground' });
-  add(newConfig, 'pc.singleCall.video.connected[0][3]', { name: 'virtualBackground' });
-  add(newConfig, 'pc.groupCall.video.calling[0][3]', { name: 'virtualBackground' });
-  add(newConfig, 'pc.groupCall.video.connected[0][4]', { name: 'virtualBackground' });
-  return newConfig;
-}
-
 export function useButtonPanelLayout() {
   const sortedLayout = ref([]);
   const buttonPanelConfig = ref([]);
-  const { callStatus, isGroupCall, callType, callRole, isShowEnableVirtualBackground } = toRefs(useCallInfoContext());
+  const { callStatus, isGroupCall, callType, callRole } = toRefs(useCallInfoContext());
   const { status: panelStatus } = useButtonPanelStatus() || {};
+  const customUIButtonConfig = useCustomUIButtonConfig();
 
-  watch([callStatus, isGroupCall, callType, callRole, panelStatus, isShowEnableVirtualBackground],
+  watch([callStatus, isGroupCall, callType, callRole, panelStatus, customUIButtonConfig],
     () => {
-      let initConfig = ButtonPanelConfig;
-      if (isShowEnableVirtualBackground.value && !TUIGlobal.isH5) {
-        initConfig = setVirtualBackgroundConfig(ButtonPanelConfig);
-      }
+      let initConfig = customUIButtonConfig.value;
       const key1 = TUIGlobal.isPC ? 'pc' : 'mobile';
@@ -48,8 +32,10 @@ const key2 = isGroupCall.value ? 'groupCall' : 'singleCall';
       for (let i = 0; i < config.length; i++) {
-        const width = 12 / config[i].length;
+        const filterButtonArray = i === 0 ? config[i].filter((item) => item?.props?.show !== false) : config[i];
+        config[i] = filterButtonArray;
+        const width = 12 / filterButtonArray.length;
         const height = 3;
     
-        for (let j = 0; j < config[i].length; j++) {
+        for (let j = 0; j < filterButtonArray.length; j++) {
           layout[index++] = {
-            i: config[i][j].name,
+            i: filterButtonArray[j].name,
             x: j * width,
@@ -60,3 +46,4 @@ y: i * width,
             // @ts-ignore
-            customStyle: config[i][j].customStyle,
+            customStyle: filterButtonArray[j].customStyle,
+            customProps: filterButtonArray[j].props,
           };
@@ -63,0 +50,0 @@ }

src/Components/components/common/OverlayStream/OverlayStream.ts

@@ -53,2 +53,5 @@ import defaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
   },
+  fit: {
+    type: String,
+  },
   // ============== Loading 基础组件 =================
@@ -99,1 +102,3 @@ showLoading: {
 } as const;
+
+export const OverlayStreamEmits = ['error'];

src/Components/context/index.ts

@@ -9,1 +9,2 @@ export * from './CallInfoContext';
 export * from './PopoverContext';
+export * from './CustomUIConfigContext';

src/Components/hooks/index.ts

@@ -14,1 +14,5 @@ export * from './useCallerUserInfoContext';
 export * from './useGroupCallLayout';
+export * from './useCustomUIButtonConfig';
+export * from './useCustomUI';
+export * from './useViewBackgroundConfig';
+export * from './useJoinGroupCall';

src/Components/util/index.ts

@@ -6,1 +6,2 @@ export * from './isEqual';
 export * from './uiConfig';
+export * from './findValues';

src/Components/util/uiConfig.ts

 import stringToPath from "./stringToPath";
 
 export function modify(config, path, value) {
-  if (typeof config !== 'object') {
+  if (typeof config !== 'object' || !path) {
     return;
@@ -6,0 +6,0 @@ }

src/index.ts

@@ -13,4 +13,6 @@ import {
   t,
+  uiDesign,
+  FeatureButton,
 } from './TUICallService/index';
-const Version = '3.2.5'; // basic-demo 原来上报使用
+const Version = '3.2.6'; // basic-demo 原来上报使用
 
@@ -31,2 +33,4 @@ // 输出产物
   t,
+  uiDesign,
+  FeatureButton,
 };

src/TUICallService/CallService/index.ts

@@ -33,5 +33,8 @@ import { TUICore, TUILogin, TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
   COMPONENT,
+  CallType,
 } from '../const/index';
 // @ts-ignore
 import { TUICallEngine, EVENT as TUICallEvent } from 'tuicall-engine-wx';
+// @ts-ignore
+import TencentCloudChat from '@tencentcloud/chat';
 import { CallTips, t } from '../locales/index';
@@ -42,3 +45,12 @@ import { initAndCheckRunEnv, beforeCall, handlePackageError } from './miniProgram';
 import { handleRepeatedCallError, handleNoDevicePermissionError, formatTime, performanceNow } from '../utils/common-utils';
-import { getMyProfile, getRemoteUserProfile, generateText, generateStatusChangeText, getGroupMemberList, getGroupProfile } from './utils';
+import { 
+  getMyProfile, 
+  getRemoteUserProfile, 
+  generateText, 
+  generateStatusChangeText, 
+  getGroupMemberList, 
+  getGroupProfile, 
+  getGroupAttributes, 
+  getJoinGroupCallInfo,
+} from './utils';
 import timer from '../utils/timer';
@@ -49,6 +61,8 @@ import { ITUIGlobal } from '../interface/ITUIGlobal';
 import TuiStore from '../TUIStore/tuiStore';
+import { UIDesign } from './UIDesign';
 const TUIGlobal: ITUIGlobal = TuiGlobal.getInstance();
 const TUIStore: ITUIStore = TuiStore.getInstance();
-const version = '3.2.5';
-export { TUIGlobal, TUIStore };
+const uiDesign = UIDesign.getInstance();
+const version = '3.2.6';
+export { TUIGlobal, TUIStore, uiDesign };
 
@@ -73,2 +87,4 @@ export default class TUICallService implements ITUICallService {
     TUICore.registerEvent(TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED, TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS, this);
+    // @ts-ignore
+    TUICore.registerEvent(TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED, TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED, this);
     TUICore.registerService(TUIConstants.TUICalling.SERVICE.NAME, this);
@@ -107,2 +123,3 @@ TUICore.registerExtension(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, this);
       TUIStore.update(StoreName.CALL, NAME.LOCAL_USER_INFO_EXCLUDE_VOLUMN, { userId: userID });
+      uiDesign.updateViewBackgroundUserId('local');
       await this._tuiCallEngine.login({ userID, userSig, assetsPath: '' }); // web && mini
@@ -551,2 +568,3 @@ } catch (error) {
       TUIStore.update(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST, remoteUserInfoList);
+      uiDesign.updateViewBackgroundUserId('remote');
     }
@@ -886,3 +904,35 @@ console.log(`${NAME.PREFIX}userEnter event data: ${JSON.stringify(event)}.`);
   }
-  // =========================【调用 chat api】=========================
+  // =========================【chat: event listening】=========================
+  private _addListenChatEvent() {
+    if (!this._tim) {
+      console.warn(`${NAME.PREFIX}add tim event listener failed, tim is empty.`);
+      return;
+    }
+    this._tim.on(TencentCloudChat.EVENT.GROUP_ATTRIBUTES_UPDATED, this._handleGetGroupAttributes, this);
+  }
+  private _removeListenChatEvent() {
+    if (!this._tim) {
+      console.warn(`${NAME.PREFIX}remove tim event listener failed, tim is empty.`);
+      return;
+    }
+    this._tim.off(TencentCloudChat.EVENT.GROUP_ATTRIBUTES_UPDATED, this._handleGetGroupAttributes, this);
+  }
+  private async _handleGetGroupAttributes(event) {
+    const { data: { groupID: groupId, groupAttributes = {} } } = event;
+    const storeGroupId = TUIStore.getData(StoreName.CALL, NAME.GROUP_ID);
+    if (groupId !== storeGroupId) return;
+    await this._handleChatGroupCallUsers(groupAttributes);
+  }
+  // =========================【Calling the Chat SDK APi】=========================
+  // Process member information in a group call
+  private async _handleChatGroupCallUsers(groupAttributes) {
+    const { roomId, callType, userListInfo, roomIdType } = await getJoinGroupCallInfo(TUIStore, groupAttributes, this._tim);
+    const updateStoreParams = {
+      [NAME.GROUP_CALL_MEMBERS]: userListInfo,
+      [NAME.ROOM_ID]: roomId,
+      [NAME.CALL_MEDIA_TYPE]: CallType[callType],
+      [NAME.ROOM_ID_TYPE]: roomIdType,
+    };
+    TUIStore.updateStore(updateStoreParams, StoreName.CALL);
+  }
   // 获取群成员
@@ -951,3 +1001,3 @@ public async getGroupMemberList(count: number, offset: number) {
   }
-  public async onNotifyEvent(eventName: string, subKey: string) {
+  public async onNotifyEvent(eventName: string, subKey: string, options?: any) {
     try {
@@ -960,6 +1010,26 @@ if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
           await this.init({ tim: chat, userID, userSig, sdkAppID: SDKAppID, isFromChat: true, component: COMPONENT.TIM_CALL_KIT });
+          this._addListenChatEvent();
         } else if (subKey === TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGOUT_SUCCESS) {
+          this._removeListenChatEvent();
           await this.destroyed();
         }
       }
+      // @ts-ignore
+      if (eventName === TUIConstants.TUIChat.EVENT.CHAT_STATE_CHANGED) {
+        // @ts-ignore
+        if (subKey === TUIConstants.TUIChat.EVENT_SUB_KEY.CHAT_OPENED) {
+          const { groupID: groupId = '' } = options;
+          TUIStore.update(StoreName.CALL, NAME.GROUP_ID, groupId);
+          if (groupId) {
+            const { groupAttributes = {} } = await getGroupAttributes(TUIStore, this._tim) || {};
+            await this._handleChatGroupCallUsers(groupAttributes);
+          } else {
+            const updateStoreParams = {
+              [NAME.GROUP_CALL_MEMBERS]: [],
+              [NAME.ROOM_ID]: '',
+            };
+            TUIStore.updateStore(updateStoreParams, StoreName.CALL);
+          }
+        }
+      }
     } catch (error) {
@@ -966,0 +1036,0 @@ console.error(`${NAME.PREFIX}TUICore onNotifyEvent failed, error: ${error}.`);

src/TUICallService/CallService/utils.ts

@@ -142,2 +142,33 @@ import { NAME, StoreName, CallStatus, StatusChange, CallMediaType } from '../const/index';
   }
-}
+}
+// Get group attribute
+export async function getGroupAttributes(TUIStore: ITUIStore, tim: any) {
+  const groupId = TUIStore.getData(StoreName.CALL, NAME.GROUP_ID);
+  try {
+    const { code, data } = await tim.getGroupAttributes({
+      groupID: groupId,
+      keyList: []
+    });
+    if (code === 0) return data;
+  } catch (error) {
+    console.error(`${NAME.PREFIX}_getGroupAttributes fail: ${error}`);
+  }
+}
+export async function getJoinGroupCallInfo(TUIStore: ITUIStore, groupAttributes, tim) {
+  try {
+    const { 
+      room_id: roomId = '', 
+      room_id_type: roomIdType = 0,
+      call_media_type: callType = '', 
+      user_list: userList
+    } = groupAttributes[NAME.INNER_ATTR_KIT_INFO] && JSON.parse(groupAttributes[NAME.INNER_ATTR_KIT_INFO]);
+    let userListInfo = userList ? userList.map(user => user.userid) : [];
+    if (userListInfo.length > 0) {
+      userListInfo = await getRemoteUserProfile(userListInfo, tim, TUIStore);
+    }
+    return { roomId, roomIdType, callType, userListInfo };
+  } catch (error) {
+    console.error(`${NAME.PREFIX} getJoinGroupCallInfo fail, error: ${error}`);
+    return {};
+  }
+}

src/TUICallService/const/call.ts

@@ -88,2 +88,7 @@ /**
 
+export const CallType = { 
+  'audio': CallMediaType.AUDIO,
+  'video': CallMediaType.VIDEO,
+} as const;
+
 /* === 【小程序使用】=== */
@@ -109,1 +114,17 @@ /**
 }
+
+export enum FeatureButton {
+  Camera = 'camera',
+  Microphone = 'microphone',
+  SwitchCamera = 'switchCamera',
+}
+
+export interface IViewBackgroundImage {
+  [userId: string]: string,
+}
+export interface ICustomUIConfig {
+  button?: {
+    [buttonName in FeatureButton]?: boolean;
+  };
+  viewBackground?: IViewBackgroundImage;
+}

src/TUICallService/const/index.ts

@@ -35,7 +35,13 @@ export * from './call';
   ROOM_ID: 'roomID',
+  ROOM_ID_TYPE: 'roomIdType',
   SHOW_SELECT_USER: 'showSelectUser',
   IS_SHOW_ENABLE_VIRTUAL_BACKGROUND: 'isShowEnableVirtualBackground',
   ENABLE_VIRTUAL_BACKGROUND: 'enableVirtualBackground',
+  GROUP_CALL_MEMBERS: 'groupCallMembers',
 };
 
+export const CHAT_DATA_KEY: any = {
+  "INNER_ATTR_KIT_INFO": "inner_attr_kit_info",
+};
+
 export const NAME = {
@@ -62,3 +68,5 @@ PREFIX: '【CallService】',
   CAMERA_POSITION: 'cameraPosition',
+  CUSTOM_UI_CONFIG: 'customUIConfig',
   ...CALL_DATA_KEY,
+  ...CHAT_DATA_KEY,
 };
@@ -65,0 +73,0 @@

src/TUICallService/index.ts

@@ -1,3 +0,14 @@
-import TUICallService, { TUIGlobal, TUIStore } from './CallService/index';
-import { StoreName, NAME, CallRole, CallMediaType, CallStatus, StatusChange, VideoResolution, VideoDisplayMode, AudioPlayBackDevice } from './const/index';
+import TUICallService, { TUIGlobal, TUIStore, uiDesign } from './CallService/index';
+import {
+  StoreName,
+  NAME,
+  CallRole,
+  CallMediaType,
+  CallStatus,
+  StatusChange,
+  VideoResolution,
+  VideoDisplayMode,
+  AudioPlayBackDevice,
+  FeatureButton,
+} from './const/index';
 import { t } from './locales/index';
@@ -7,3 +18,2 @@
 const TUICallKitServer = TUICallService.getInstance();
-
 // 输出产物
@@ -24,2 +34,4 @@ export {
   t,
+  uiDesign,
+  FeatureButton,
 };

src/TUICallService/interface/ICallService.ts

@@ -37,2 +37,3 @@ import { CallStatus, CallRole } from '../const/index';
   roomID?: number;
+  strRoomID?: string;
   userData?: string;
@@ -48,2 +49,3 @@ timeout?: number;
   roomID?: number;
+  strRoomID?: string;
   userData?: string;
@@ -99,3 +101,4 @@ timeout?: number;
   groupID: string;
-  roomID: number;
+  roomID?: number;
+  strRoomID?: string;
 }

src/TUICallService/interface/ICallStore.ts

@@ -1,2 +0,2 @@
-import { CallStatus, CallRole, CallMediaType, VideoDisplayMode, VideoResolution, TDeviceList, CameraPosition } from '../const/index';
+import { CallStatus, CallRole, CallMediaType, VideoDisplayMode, VideoResolution, TDeviceList, CameraPosition, ICustomUIConfig } from '../const/index';
 import { IUserInfo } from './index';
@@ -32,3 +32,5 @@
   roomID: number;
+  roomIdType: number;
   cameraPosition: CameraPosition; // 前置或后置，值为front, back
+  groupCallMembers: IUserInfo[];  // chat 群会话中在通话的成员
   // TUICallKit 组件上的属性
@@ -45,2 +47,4 @@ displayMode: VideoDisplayMode; // 设置预览远端的画面显示模式, 默认: VideoDisplayMode.COVER
   enableVirtualBackground: boolean, // 是否开启虚拟背景， 默认: false
+  // customUIConfig
+  customUIConfig: ICustomUIConfig,
 }

src/TUICallService/locales/en.ts

@@ -59,2 +59,5 @@ export const en = {
   'switch camera': 'Switch',
+  'join': 'Join',
+  'people on the call': 'people on the call',
+  "Supports a maximum of 9 people for simultaneous calls": "Supports a maximum of 9 people for simultaneous calls",
   // 待废弃文案
@@ -61,0 +64,0 @@ 'Those involved': 'Those involved in the call are',

src/TUICallService/locales/ja_JP.ts

@@ -53,2 +53,5 @@ export const ja_JP = {
   'switch camera': '切り替え',
+  'join': '参加する',
+  'people on the call': '人が通話中です',
+  "Supports a maximum of 9 people for simultaneous calls": "最大で9人まで同時通話が可能です",
   // 待废弃文案
@@ -55,0 +58,0 @@ 'timeout': 'タイムアウト',

src/TUICallService/locales/zh-cn.ts

@@ -59,2 +59,5 @@ export const zh = {
   'switch camera': '翻转',
+  'join': '加入',
+  'people on the call': '人正在通话',
+  "Supports a maximum of 9 people for simultaneous calls": "最多支持9人同时通话",
   // 待废弃文案
@@ -61,0 +64,0 @@ 'timeout': '超时',

src/TUICallService/TUIStore/callStore.ts

@@ -28,3 +28,5 @@ import { CallStatus, CallRole, CallMediaType, VideoDisplayMode, VideoResolution, CameraPosition } from '../const/index';
     roomID: 0,
+    roomIdType: 0,
     cameraPosition: CameraPosition.FRONT, // 前置或后置，值为front, back
+    groupCallMembers: [], // chat 群会话在的通话中的成员
     // TUICallKit 组件上的属性
@@ -41,2 +43,8 @@ displayMode: VideoDisplayMode.COVER, // 设置预览远端的画面显示模式
     enableVirtualBackground: false, // 是否开启虚拟背景， 默认: false
+    // customUIConfig
+    customUIConfig: {
+      button: {},
+      viewBackground: {},
+    },
+
   };
@@ -43,0 +51,0 @@ public store: ICallStore = Object.assign({}, this.defaultStore);;

types/Components/components/base/Overlay/Overlay.d.ts

@@ -37,3 +37,10 @@ export declare const OverlayProps: {
     };
+    readonly fit: {
+        readonly type: StringConstructor;
+        readonly default: "cover";
+    };
+    readonly defaultSrc: {
+        readonly type: StringConstructor;
+    };
 };
 export declare const OverlayEmits: string[];

types/Components/components/base/TKImage/TKImage.d.ts

@@ -24,2 +24,8 @@ export declare const Fit: readonly ["fill", "contain", "cover"];
     };
+    readonly customStyle: {
+        readonly type: ObjectConstructor;
+    };
+    readonly defaultSrc: {
+        readonly type: StringConstructor;
+    };
 };
@@ -26,0 +32,0 @@ export declare const imageEmits: {

types/Components/components/common/AudioStream/AudioStream.d.ts

@@ -26,2 +26,5 @@ export declare const AudioStreamProps: {
     };
+    userId: {
+        type: StringConstructor;
+    };
 };

types/Components/components/common/ButtonPanel/config/InitConfig.d.ts

@@ -5,22 +5,42 @@ export declare const ButtonPanelConfig: {
             video: {
-                calling: {
+                calling: ({
                     name: string;
-                }[][];
-                accept: {
+                    props: {};
+                } | {
                     name: string;
-                }[][];
-                connected: {
+                    props?: undefined;
+                })[][];
+                accept: ({
                     name: string;
-                }[][];
+                    props: {};
+                } | {
+                    name: string;
+                    props?: undefined;
+                })[][];
+                connected: ({
+                    name: string;
+                    props: {};
+                } | {
+                    name: string;
+                    props?: undefined;
+                })[][];
             };
             audio: {
-                calling: {
+                calling: ({
                     name: string;
-                }[][];
+                    props: {};
+                } | {
+                    name: string;
+                    props?: undefined;
+                })[][];
                 accept: {
                     name: string;
                 }[][];
-                connected: {
+                connected: ({
                     name: string;
-                }[][];
+                    props: {};
+                } | {
+                    name: string;
+                    props?: undefined;
+                })[][];
             };
@@ -30,22 +50,38 @@ };
             video: {
-                calling: {
+                calling: ({
                     name: string;
-                }[][];
+                    props: {};
+                } | {
+                    name: string;
+                    props?: undefined;
+                })[][];
                 accept: {
                     name: string;
                 }[][];
-                connected: {
+                connected: ({
                     name: string;
-                }[][];
+                    props: {};
+                } | {
+                    name: string;
+                    props?: undefined;
+                })[][];
             };
             audio: {
-                calling: {
+                calling: ({
                     name: string;
-                }[][];
+                    props: {};
+                } | {
+                    name: string;
+                    props?: undefined;
+                })[][];
                 accept: {
                     name: string;
                 }[][];
-                connected: {
+                connected: ({
                     name: string;
-                }[][];
+                    props: {};
+                } | {
+                    name: string;
+                    props?: undefined;
+                })[][];
             };
@@ -52,0 +88,0 @@ };

types/Components/components/common/ButtonPanel/config/VirtualBackgroundMobileConfig.d.ts

@@ -7,5 +7,7 @@ export declare const VirtualBackgroundMobileConfig: {
         };
+        props: {};
     } | {
         name: string;
         customStyle?: undefined;
+        props?: undefined;
     })[] | ({
@@ -25,5 +27,7 @@ name?: undefined;
         };
+        props: {};
     } | {
         name: string;
         customStyle?: undefined;
+        props?: undefined;
     })[] | ({
@@ -44,5 +48,7 @@ name: string;
         };
+        props: {};
     } | {
         name: string;
         customStyle?: undefined;
+        props?: undefined;
     })[] | ({
@@ -54,2 +60,3 @@ name: string;
         };
+        props?: undefined;
     } | {
@@ -61,3 +68,11 @@ name: string;
         };
+        props?: undefined;
+    } | {
+        name: string;
+        customStyle: {
+            justifyContent: string;
+            paddingTop: string;
+        };
+        props: {};
     })[])[];
 };

types/Components/components/common/OverlayStream/OverlayStream.d.ts

@@ -49,2 +49,5 @@ export declare const OverlayStreamProps: {
     };
+    readonly fit: {
+        readonly type: StringConstructor;
+    };
     readonly showLoading: {
@@ -90,1 +93,2 @@ readonly type: BooleanConstructor;
 };
+export declare const OverlayStreamEmits: string[];

types/Components/context/index.d.ts

@@ -9,1 +9,2 @@ export * from './CallInfoContext';
 export * from './PopoverContext';
+export * from './CustomUIConfigContext';

types/Components/hooks/index.d.ts

@@ -15,1 +15,5 @@ export * from './useCallerUserInfoContext';
 export * from './useGroupCallLayout';
+export * from './useCustomUIButtonConfig';
+export * from './useCustomUI';
+export * from './useViewBackgroundConfig';
+export * from './useJoinGroupCall';

types/Components/util/index.d.ts

@@ -6,1 +6,2 @@ export * from './isEqual';
 export * from './uiConfig';
+export * from './findValues';

types/index.d.ts

@@ -1,3 +0,4 @@
-import { TUIGlobal, TUIStore, StoreName, TUICallKitServer, NAME, StatusChange as STATUS, CallRole, CallMediaType, VideoResolution, VideoDisplayMode, t } from './TUICallService/index';
+import { TUIGlobal, TUIStore, StoreName, TUICallKitServer, NAME, StatusChange as STATUS, CallRole, CallMediaType, VideoResolution, VideoDisplayMode, t, uiDesign, FeatureButton } from './TUICallService/index';
 import TUICallKit from './Components/TUICallKit.vue';
+import JoinGroupCard from './Components/components/common/JoinGroupCard/JoinGroupCard.vue';
 declare const plugin: (TUICore: any) => any;
@@ -10,2 +11,2 @@ declare const install: (app: any) => void;
 declare const Version = "<@VERSION@>";
-export { TUIGlobal, TUIStore, StoreName, TUICallKitServer, TUICallKit, plugin, install, TUICallType, NAME, STATUS, CallRole, CallMediaType, VideoResolution, VideoDisplayMode, Version, t, };
+export { TUIGlobal, TUIStore, StoreName, TUICallKitServer, TUICallKit, JoinGroupCard, plugin, install, TUICallType, NAME, STATUS, CallRole, CallMediaType, VideoResolution, VideoDisplayMode, Version, t, uiDesign, FeatureButton, };

types/TUICallService/CallService/index.d.ts

@@ -7,3 +7,4 @@ import { ITUICallService, ICallParams, IGroupCallParams, ICallbackParam, ISelfInfoParams, IInviteUserParams, IJoinInGroupCallParams, IInitParams } from '../interface/ICallService';
 declare const TUIStore: ITUIStore;
-export { TUIGlobal, TUIStore };
+declare const uiDesign: import("./UIDesign").IUIDesign;
+export { TUIGlobal, TUIStore, uiDesign };
 export default class TUICallService implements ITUICallService {
@@ -101,2 +102,6 @@ static instance: TUICallService;
     private _analyzeEventData;
+    private _addListenChatEvent;
+    private _removeListenChatEvent;
+    private _handleGetGroupAttributes;
+    private _handleChatGroupCallUsers;
     getGroupMemberList(count: number, offset: number): Promise<any>;
@@ -109,3 +114,3 @@ getGroupProfile(): Promise<any>;
     private _callTUIService;
-    onNotifyEvent(eventName: string, subKey: string): Promise<void>;
+    onNotifyEvent(eventName: string, subKey: string, options?: any): Promise<void>;
     onCall(method: String, params: any): Promise<void>;
@@ -112,0 +117,0 @@ private _handleTUICoreOnClick;

types/TUICallService/CallService/utils.d.ts

@@ -10,1 +10,13 @@ import { IUserInfo } from '../interface/ICallService';
 export declare function getGroupProfile(groupID: string, tim: any): Promise<any>;
+export declare function getGroupAttributes(TUIStore: ITUIStore, tim: any): Promise<any>;
+export declare function getJoinGroupCallInfo(TUIStore: ITUIStore, groupAttributes: any, tim: any): Promise<{
+    roomId: any;
+    roomIdType: any;
+    callType: any;
+    userListInfo: any;
+} | {
+    roomId?: undefined;
+    roomIdType?: undefined;
+    callType?: undefined;
+    userListInfo?: undefined;
+}>;

types/TUICallService/const/call.d.ts

@@ -82,2 +82,6 @@ /**
 };
+export declare const CallType: {
+    readonly audio: CallMediaType.AUDIO;
+    readonly video: CallMediaType.VIDEO;
+};
 /**
@@ -100,1 +104,15 @@ * @property {String} ear 听筒
 }
+export declare enum FeatureButton {
+    Camera = "camera",
+    Microphone = "microphone",
+    SwitchCamera = "switchCamera"
+}
+export interface IViewBackgroundImage {
+    [userId: string]: string;
+}
+export interface ICustomUIConfig {
+    button?: {
+        [buttonName in FeatureButton]?: boolean;
+    };
+    viewBackground?: IViewBackgroundImage;
+}

types/TUICallService/const/index.d.ts

@@ -5,2 +5,3 @@ export * from './call';
 export declare const CALL_DATA_KEY: any;
+export declare const CHAT_DATA_KEY: any;
 export declare const NAME: any;
@@ -7,0 +8,0 @@ export declare const AudioCallIcon = "https://web.sdk.qcloud.com/component/TUIKit/assets/call.png";

types/TUICallService/index.d.ts

@@ -1,5 +0,5 @@
-import TUICallService, { TUIGlobal, TUIStore } from './CallService/index';
-import { StoreName, NAME, CallRole, CallMediaType, CallStatus, StatusChange, VideoResolution, VideoDisplayMode, AudioPlayBackDevice } from './const/index';
+import TUICallService, { TUIGlobal, TUIStore, uiDesign } from './CallService/index';
+import { StoreName, NAME, CallRole, CallMediaType, CallStatus, StatusChange, VideoResolution, VideoDisplayMode, AudioPlayBackDevice, FeatureButton } from './const/index';
 import { t } from './locales/index';
 declare const TUICallKitServer: TUICallService;
-export { TUIGlobal, TUIStore, StoreName, TUICallKitServer, NAME, CallStatus, CallRole, CallMediaType, StatusChange, VideoResolution, VideoDisplayMode, AudioPlayBackDevice, t, };
+export { TUIGlobal, TUIStore, StoreName, TUICallKitServer, NAME, CallStatus, CallRole, CallMediaType, StatusChange, VideoResolution, VideoDisplayMode, AudioPlayBackDevice, t, uiDesign, FeatureButton, };

types/TUICallService/interface/ICallService.d.ts

@@ -36,2 +36,3 @@ import { CallStatus, CallRole } from '../const/index';
     roomID?: number;
+    strRoomID?: string;
     userData?: string;
@@ -46,2 +47,3 @@ timeout?: number;
     roomID?: number;
+    strRoomID?: string;
     userData?: string;
@@ -94,4 +96,5 @@ timeout?: number;
     groupID: string;
-    roomID: number;
+    roomID?: number;
+    strRoomID?: string;
 }
 export {};

types/TUICallService/interface/ICallStore.d.ts

@@ -1,2 +0,2 @@
-import { CallStatus, CallRole, CallMediaType, VideoDisplayMode, VideoResolution, TDeviceList, CameraPosition } from '../const/index';
+import { CallStatus, CallRole, CallMediaType, VideoDisplayMode, VideoResolution, TDeviceList, CameraPosition, ICustomUIConfig } from '../const/index';
 import { IUserInfo } from './index';
@@ -29,3 +29,5 @@ export interface IToastInfo {
     roomID: number;
+    roomIdType: number;
     cameraPosition: CameraPosition;
+    groupCallMembers: IUserInfo[];
     displayMode: VideoDisplayMode;
@@ -39,2 +41,3 @@ videoResolution: VideoResolution;
     enableVirtualBackground: boolean;
+    customUIConfig: ICustomUIConfig;
 }

types/TUICallService/locales/en.d.ts

@@ -54,2 +54,5 @@ export declare const en: {
     'switch camera': string;
+    join: string;
+    'people on the call': string;
+    "Supports a maximum of 9 people for simultaneous calls": string;
     'Those involved': string;
@@ -56,0 +59,0 @@ call: string;

types/TUICallService/locales/ja_JP.d.ts

@@ -48,2 +48,5 @@ export declare const ja_JP: {
     'switch camera': string;
+    join: string;
+    'people on the call': string;
+    "Supports a maximum of 9 people for simultaneous calls": string;
     timeout: string;
@@ -50,0 +53,0 @@ 'kick out': string;

types/TUICallService/locales/zh-cn.d.ts

@@ -54,2 +54,5 @@ export declare const zh: {
     'switch camera': string;
+    join: string;
+    'people on the call': string;
+    "Supports a maximum of 9 people for simultaneous calls": string;
     timeout: string;
@@ -56,0 +59,0 @@ 'kick out': string;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3246652

increased by94.3%

Number of package files

442

increased by5.49%

Lines of code

42007

increased by50.5%

Worsened metrics

Dependency count

3

increased by50%

Number of medium maintenance alerts

1

increased byInfinity%

Dependency changes

• + Added@tencentcloud/chat@latest