@trtc/calls-uikit-vue 4.1.0

package/src/Components/hooks/useViewBackgroundConfig.ts

@@ -0,0 +1,12 @@
+import { watch, ref } from '../../adapter-vue';
+import { useCustomUI } from './useCustomUI';
+
+export function useViewBackgroundConfig() {
+  const customUIConfig = useCustomUI();
+  const viewBackgroundObj = ref(customUIConfig.value.viewBackground);
+  watch(customUIConfig, () => {
+    viewBackgroundObj.value = customUIConfig.value.viewBackground;
+  });
+  
+  return viewBackgroundObj;
+}

package/src/Components/util/deepClone.ts

@@ -0,0 +1,15 @@
+export function deepClone(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  let clone = Array.isArray(obj) ? [] : {};
+
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      clone[key] = deepClone(obj[key]);
+    }
+  }
+
+  return clone;
+}

package/src/Components/util/findValues.ts

@@ -0,0 +1,21 @@
+import { isEmpty } from "./isEmpty";
+
+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);
+    }
+  });
+}

package/src/Components/util/index.ts

@@ -0,0 +1,6 @@
+export * from './isEqual';
+export * from './isObject';
+export * from './toggleScreen';
+export * from './deepClone';
+export * from './uiConfig';
+export * from './findValues';

package/src/Components/util/isEmpty.ts

@@ -0,0 +1,15 @@
+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;
+}

package/src/Components/util/isEqual.ts

@@ -0,0 +1,40 @@
+import { isObject } from './isObject';
+
+export const isEqual = (obj1, obj2) => {
+  // 判断obj1或者obj2 只要有一个不是对象或者数组
+  if (!isObject(obj1) || !isObject(obj2)) {
+    // 值类型 (!!! 参与equal的不会是函数)
+    return obj1 === obj2;
+  }
+  if (obj1 === obj2) {
+    return true;
+  }
+  /**
+   * @description 俩个都是数组或者对象,而且不相等
+   * 1. 先取出obj1,obj2的keys,比较个数  
+   * 2. Object.keys返回的key是放到数组中的 
+   * 3. 数组是以索引为key
+   * 4. 对象是以属性为key
+   * 5. 判断俩个对象的keys长度
+   */
+  const obj1Keys = Object.keys(obj1);
+  const obj2Keys = Object.keys(obj2);
+  if (obj1Keys.length !== obj2Keys.length) {
+    return false;
+  }
+  /**
+   * 以obj1 为基准,和obj2 依次递归比较
+   */
+  // eslint-disable-next-line guard-for-in
+  for (let key in obj1) {
+    // 比较当前key的value
+    const res = isEqual(obj1[key], obj2[key]);
+    if (!res) {
+      return false;
+    }
+  }
+  /**
+   * 全部相等
+   */
+  return true;
+};

package/src/Components/util/isObject.ts

@@ -0,0 +1,3 @@
+export const isObject = (obj) => {
+  return typeof obj === "object" && obj !== null;
+};

package/src/Components/util/stringToPath.ts

@@ -0,0 +1,78 @@
+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 = function (...args) {
+    const key = resolver ? resolver.apply(this, args) : args[0];
+    const cache = memoized.cache;
+
+    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.
+ */
+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 default stringToPath;

package/src/Components/util/toggleScreen.ts

@@ -0,0 +1,10 @@
+export function toggleScreen(domID: string) {
+  const elem = document.getElementById(domID) as HTMLElement;
+  if (!document.fullscreenElement && elem) {
+    elem.requestFullscreen().catch((err) => {
+      console.error(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
+    });
+  } else {
+    document.exitFullscreen();
+  }
+}

package/src/Components/util/uiConfig.ts

@@ -0,0 +1,74 @@
+import stringToPath from "./stringToPath";
+
+export function modify(config, path, value) {
+  if (typeof config !== 'object' || !path) {
+    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);
+      }
+    }
+  }
+}
+
+export function remove(config, path) {
+  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, 1);
+      }
+    }
+  }
+}

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}`);
+    }
+  }
+  
+}