@trtc/calls-uikit-react 4.1.0

package/src/Components/util/index.ts

@@ -0,0 +1,138 @@
+/* eslint-disable no-useless-concat */
+const MAX_MEMOIZE_SIZE = 500;
+
+function memoize(func, resolver) {
+  // eslint-disable-next-line eqeqeq
+  if (typeof func !== 'function' || (resolver != null && typeof resolver !== 'function')) {
+    throw new TypeError('Expected a function');
+  }
+  const memoized = (...args) => {
+    const key = resolver ? resolver.apply(this, args) : args[0];
+    const { cache } = memoized;
+
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = func.apply(this, args);
+    memoized.cache = cache.set(key, result) || cache;
+    return result;
+  };
+  memoized.cache = new (memoize.Cache || Map)();
+  return memoized;
+}
+
+memoize.Cache = Map;
+
+function memoizeCapped(func) {
+  const result = memoize(func, (key) => {
+    const { cache } = result;
+    if (cache.size === MAX_MEMOIZE_SIZE) {
+      cache.clear();
+    }
+    return key;
+  });
+
+  return result;
+}
+
+const charCodeOfDot = '.'.charCodeAt(0);
+const reEscapeChar = /\\(\\)?/g;
+const rePropName = RegExp(
+  // Match anything that isn't a dot or bracket.
+  '[^.[\\]]+' + '|'
+  // Or match property names within brackets.
+  + '\\[(?:'
+    // Match a non-string expression.
+    + '([^"\'][^[]*)' + '|'
+    // Or match strings (supports escaping characters).
+    + '(["\'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2'
+  + ')\\]' + '|'
+  // Or match "" as the space between consecutive dots or empty brackets.
+  + '(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))',
+  'g',
+);
+
+/**
+ * Converts `string` to a property path array.
+ *
+ * @private
+ * @param {string} string The string to convert.
+ * @returns {Array} Returns the property path array.
+ */
+export const stringToPath = memoizeCapped((string) => {
+  const result = [];
+  if (string.charCodeAt(0) === charCodeOfDot) {
+    result.push('');
+  }
+  string.replace(rePropName, (match, expression, quote, subString) => {
+    let key = match;
+    if (quote) {
+      key = subString.replace(reEscapeChar, '$1');
+    } else if (expression) {
+      key = expression.trim();
+    }
+    result.push(key);
+  });
+  return result;
+});
+
+export function isEmpty(obj) {
+  if (obj === null || obj === undefined) {
+    return true;
+  }
+
+  if (typeof obj === 'string' && obj.trim().length === 0) {
+    return true;
+  }
+
+  if (Array.isArray(obj) || typeof obj === 'object') {
+    return Object.keys(obj).length === 0;
+  }
+
+  return false;
+}
+
+export function findValues(obj, condition, path, results, formatResults) {
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key];
+    const currentPath = isEmpty(path) ? key : `${path}.${key}`;
+    if (typeof value === 'object') {
+      if (Array.isArray(value)) {
+        for (let i = 0; i < value.length; i++) {
+          const itemPath = `${currentPath}[${i}]`;
+          findValues(value[i], condition, itemPath, results, formatResults);
+        }
+      } else {
+        findValues(value, condition, currentPath, results, formatResults);
+      }
+    } else if (condition(value)) {
+      const result = typeof formatResults === 'function' ? formatResults({ key: value, value: currentPath }) : currentPath;
+      results.push(result);
+    }
+  });
+}
+
+export function deepClone(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  const clone = Array.isArray(obj) ? [] : {};
+
+  Object.keys(obj).forEach((key) => {
+    clone[key] = deepClone(obj[key]);
+  });
+
+  return clone;
+}
+
+export function clearPropsValues(obj, value) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  if (value in obj) {
+    const newObj = deepClone(obj);
+    delete newObj[value];
+    return newObj;
+  }
+}

package/src/Components/util/uiDesign.ts

@@ -0,0 +1,45 @@
+import { stringToPath } from './index';
+
+// eslint-disable-next-line import/prefer-default-export
+export function modify(config, path, value) {
+  if (typeof config !== 'object') {
+    return;
+  }
+
+  const paths = stringToPath(path);
+  let oldVal = config;
+
+  for (let index = 0; index < paths.length; index++) {
+    // eslint-disable-next-line eqeqeq
+    if (oldVal == null) {
+      return;
+    }
+    const key = paths[index];
+    if (index !== paths.length - 1) {
+      oldVal = oldVal?.[key];
+    } else {
+      Object.assign(oldVal, { [key]: value });
+    }
+  }
+}
+
+export function add(config, path, value) {
+  if (typeof config !== 'object') {
+    return;
+  }
+
+  const paths = stringToPath(path);
+  let oldVal = config;
+  for (let index = 0; index < paths.length; index++) {
+    // eslint-disable-next-line eqeqeq
+    if (oldVal == null) {
+      return;
+    }
+    const key = paths[index];
+    if (index !== paths.length - 1) {
+      oldVal = oldVal?.[key];
+    } else if (Array.isArray(oldVal)) {
+      oldVal.splice(key, 0, value);
+    }
+  }
+}

package/src/TUICallService/CallService/UIDesign.ts

@@ -0,0 +1,174 @@
+import { ButtonState, FeatureButton, LayoutMode, NAME, StoreName } from "../const/index";
+import { deepClone } from "../utils/index";
+import isEmpty from "../utils/is-empty";
+export interface IUIDesign {
+  updateViewBackgroundUserId: (viewType: 'local' | 'remote') => void;
+  hideFeatureButton: (buttonName: FeatureButton) => void;
+  setLocalViewBackgroundImage: (url: string) => void;
+  setRemoteViewBackgroundImage: (userId: string, url: string) => void;
+  setLayoutMode: (layoutMode: LayoutMode) => void;
+  setCameraDefaultState: (isOpen: boolean) => void;
+  setEngineInstance: (engineInstance: any) => void;
+  setTUIStore: (tuiStore: any) => void;
+}
+
+const DEFAULT_LOCAL_USER_ID = '_local_user_id';
+
+export class UIDesign implements IUIDesign {
+  static instance: IUIDesign;
+  static getInstance() {
+    if (!UIDesign.instance) {
+      UIDesign.instance = new UIDesign();
+    }
+    return UIDesign.instance;
+  }
+
+  private _viewConfig = {
+    viewBackground: {
+      local: {},
+      remote: {},
+    }
+  };
+  private _isSetViewBackgroundConfig = { remote: false, local: false };
+  private _tuiCallEngine = null;
+  private _tuiStore = null;
+  private _updateViewBackground() {
+    const customUIConfig = this._tuiStore?.getData(StoreName.CALL, NAME.CUSTOM_UI_CONFIG);
+    const { userId } = this._tuiStore?.getData(StoreName.CALL, NAME.LOCAL_USER_INFO);
+
+    if (Object.keys(this._viewConfig.viewBackground.remote).includes(userId)) {
+      delete this._viewConfig.viewBackground.remote[userId];
+    }
+
+    this._tuiStore?.update(
+      StoreName.CALL,
+      NAME.CUSTOM_UI_CONFIG,
+      {
+        ...customUIConfig,
+        viewBackground: {
+          ...this._viewConfig.viewBackground.remote,
+          ...this._viewConfig.viewBackground.local,
+        },
+      },
+    );
+  }
+
+  setEngineInstance(engineInstance) {
+    this._tuiCallEngine = engineInstance;
+  }
+  setTUIStore(tuiStore) {
+    this._tuiStore = tuiStore;
+  } 
+  public updateViewBackgroundUserId(name) {
+    if (name === 'local') {
+      const { userId } = this._tuiStore?.getData(StoreName.CALL, NAME.LOCAL_USER_INFO);
+
+      if (Object.keys(this._viewConfig.viewBackground.remote).includes(userId)) {
+        delete this._viewConfig.viewBackground.remote[userId];
+        this._updateViewBackground();
+      }
+
+      if (!this._isSetViewBackgroundConfig.local) {
+        return;
+      }
+
+      const localViewBackgroundConfig = this._viewConfig.viewBackground.local;
+      const url = localViewBackgroundConfig[userId] || localViewBackgroundConfig[DEFAULT_LOCAL_USER_ID];
+      localViewBackgroundConfig[userId] = localViewBackgroundConfig[DEFAULT_LOCAL_USER_ID];
+      this._viewConfig.viewBackground.local = { [userId]: url };
+
+      this._updateViewBackground();
+    } else {
+      let remoteViewBackgroundConfig = this._viewConfig.viewBackground.remote;
+
+      if (this._isSetViewBackgroundConfig.remote && Object.keys(remoteViewBackgroundConfig).includes('*')) {
+        const remoteUserInfoList = this._tuiStore?.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST);
+        const remoteUserIdList = remoteUserInfoList.map((item) => item.userId);
+        remoteUserIdList.forEach((userId) => {
+          if (!Object.keys(remoteViewBackgroundConfig).includes(userId)) {
+            remoteViewBackgroundConfig[userId] = remoteViewBackgroundConfig['*'];
+          }
+        });
+
+        this._viewConfig.viewBackground.remote = remoteViewBackgroundConfig;
+        this._updateViewBackground();
+      }
+    }
+  }
+  public hideFeatureButton(buttonName: FeatureButton) {
+    this._tuiCallEngine?.reportLog?.({
+      name: 'TUICallKit.hideFeatureButton.start',
+      data: { buttonName },
+    });
+    const customUIConfig = this._tuiStore?.getData(StoreName.CALL, NAME.CUSTOM_UI_CONFIG);
+    this._tuiStore?.update(
+      StoreName.CALL,
+      NAME.CUSTOM_UI_CONFIG,
+      {
+        ...customUIConfig,
+        button: {
+          ...customUIConfig.button,
+          [buttonName]: { ...(customUIConfig.button?.[buttonName] || {}), show: false, },
+        },
+      }
+    );
+  }
+  public setLocalViewBackgroundImage(url: string) {
+    this._tuiCallEngine?.reportLog?.({
+      name: 'TUICallKit.setLocalViewBackgroundImage.start',
+      data: { url },
+    });
+    this._isSetViewBackgroundConfig.local = true;
+    let { userId } = this._tuiStore?.getData(StoreName.CALL, NAME.LOCAL_USER_INFO);
+
+    if (isEmpty(userId)) {
+      userId = DEFAULT_LOCAL_USER_ID;
+    }
+
+    this._viewConfig.viewBackground.local = { [userId]: url };
+    this._updateViewBackground();
+  }
+  public setRemoteViewBackgroundImage(userId: string, url:string) {
+    this._tuiCallEngine?.reportLog?.({
+      name: 'TUICallKit.setRemoteViewBackgroundImage.start',
+      data: { userId, url },
+    });
+    this._isSetViewBackgroundConfig.remote = true;
+    if (userId === '*') {
+      this._viewConfig.viewBackground.remote = {};
+    }
+
+    this._viewConfig.viewBackground.remote[userId] = url;
+    this._updateViewBackground();
+  }
+
+  public setLayoutMode(layoutMode: LayoutMode) {
+    this._tuiCallEngine?.reportLog?.({
+      name: 'TUICallKit.setLayoutMode.start',
+      data: { layoutMode },
+    });
+    const customUIConfig = this._tuiStore.getData(StoreName.CALL, NAME.CUSTOM_UI_CONFIG);
+    this._tuiStore.update(
+      StoreName.CALL,
+      NAME.CUSTOM_UI_CONFIG,
+      {
+        ...customUIConfig,
+        layoutMode,
+      }
+    );
+  }
+
+  public setCameraDefaultState(isOpen: boolean) {
+    this._tuiCallEngine?.reportLog?.({
+      name: 'TUICallKit.setCameraDefaultState.start',
+      data: { isOpen },
+    });
+    const customUIConfig = deepClone(this._tuiStore.getData(StoreName.CALL, NAME.CUSTOM_UI_CONFIG));
+
+    if (!Object.keys(customUIConfig.button).includes(FeatureButton.Camera)) {
+      customUIConfig.button[FeatureButton.Camera] = {};
+    }
+    customUIConfig.button[FeatureButton.Camera].state = isOpen ? ButtonState.Open : ButtonState.Close;
+    this._tuiStore.update(StoreName.CALL, NAME.CUSTOM_UI_CONFIG, customUIConfig);
+  }
+}

package/src/TUICallService/CallService/bellContext.ts

@@ -0,0 +1,88 @@
+import { CallStatus, NAME, CallRole } from '../const/index';
+import { IBellParams } from '../interface/index';
+import { isUndefined } from '../utils/common-utils';
+import DEFAULT_CALLER_BELL_FILEPATH from '../assets/phone_dialing.mp3';
+import DEFAULT_CALLEE_BELL_FILEPATH from '../assets/phone_ringing.mp3';
+
+export class BellContext {
+  private _bellContext: any = null;
+  private _isMuteBell: boolean = false;
+  private _calleeBellFilePath: string = DEFAULT_CALLEE_BELL_FILEPATH;
+  private _callRole: string = CallRole.UNKNOWN;
+  private _callStatus: string = CallStatus.IDLE;
+
+  constructor() {
+    this._bellContext = new Audio();
+    this._bellContext.loop = true;
+  }
+
+  setBellSrc() {
+    try {
+      let playBellFilePath = DEFAULT_CALLER_BELL_FILEPATH;
+      if (this._callRole === CallRole.CALLEE) {
+        playBellFilePath = this._calleeBellFilePath || DEFAULT_CALLEE_BELL_FILEPATH;
+      }
+      this._bellContext.src = playBellFilePath;
+    } catch (error) {
+      console.warn(`${NAME.PREFIX}Failed to setBellSrc, ${error}`);
+    }
+  }
+
+  setBellProperties(bellParams: IBellParams) {
+    this._callRole = bellParams.callRole || this._callRole;
+    this._callStatus = bellParams.callStatus || this._callStatus;
+    this._calleeBellFilePath = bellParams.calleeBellFilePath || this._calleeBellFilePath;
+    // undefined/false || isMuteBell => isMuteBell (不符合预期)
+    this._isMuteBell = isUndefined(bellParams.isMuteBell) ? this._isMuteBell : bellParams.isMuteBell;
+  }
+
+  async play() {
+    try {
+      if (this._callStatus !== CallStatus.CALLING) {
+        return ;
+      }
+      this.setBellSrc();
+      if (this._callRole === CallRole.CALLEE && !this._isMuteBell) {
+        await this._bellContext.play();
+      }
+      if (this._callRole === CallRole.CALLER) {
+        await this._bellContext.play();
+      }
+    } catch (error) {
+      console.warn(`${NAME.PREFIX}Failed to play audio file, ${error}`);
+    }
+  }
+
+  async stop() {
+    try {
+      await this._bellContext.pause();
+    } catch (error) {
+      console.warn(`${NAME.PREFIX}Failed to stop audio file, ${error}`);
+    }
+  }
+
+  async setBellMute(enable: boolean) {
+    if (this._callStatus !== CallStatus.CALLING && this._callRole !== CallRole.CALLEE) {
+      return;
+    }
+    if (enable) {
+      await this.stop();
+    } else {
+      await this.play();
+    }
+  }
+
+  destroy() {
+    try {
+      this._isMuteBell = false;
+      this._calleeBellFilePath = '';
+      this._callRole = CallRole.UNKNOWN;
+      this._callStatus = CallStatus.IDLE;
+      this._bellContext.pause();
+      this._bellContext = null;
+    } catch (error) {
+      console.warn(`${NAME.PREFIX}Failed to destroy, ${error}`);
+    }
+  }
+  
+}