@trtc/calls-uikit-react 4.1.0

package/src/Components/hooks/useCustomButtonUIConfig.ts

@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+import { ButtonPanelConfig } from '../components/common/ButtonPanel/config';
+import { findValues } from '../util';
+import { CustomUIConfigContext } from '../context';
+
+export default function useCustomButtonUIConfig() {
+  const { button: buttonConfig } = useContext(CustomUIConfigContext);
+  const results = [];
+
+  function condition(value) {
+    return Object.keys(buttonConfig).includes(value);
+  }
+  function formatResults({ key, value }) {
+    const valueArr = value.split('.');
+    let path = valueArr.slice(0, valueArr.length - 1);
+    path.push('props');
+    path.push('show');
+    path = path.join('.');
+    return {
+      path,
+      value: buttonConfig[key]?.show,
+    };
+  }
+
+  findValues(ButtonPanelConfig, condition, '', results, formatResults);
+  return results;
+}

package/src/Components/hooks/useDeviceList.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { NAME, StoreName, TUIStore } from '../../TUICallService';
+import { DeviceType } from '../../TUICallService/const';
+
+const useDeviceList = (deviceType: DeviceType) => {
+  const [deviceList, setDeviceList] = useState<any[]>([]);
+  const [currentDeviceId, setCurrentDeviceId] = useState<string>();
+  const handleDeviceListChange = (value: any) => {
+    switch (deviceType) {
+      case DeviceType.CAMERA:
+        setDeviceList(value?.cameraList || []);
+        setCurrentDeviceId(value?.currentCamera?.deviceId || '');
+        break;
+
+      case DeviceType.MICROPHONE:
+        setCurrentDeviceId(value?.currentMicrophone?.deviceId || '');
+        setDeviceList(value?.microphoneList || []);
+        break;
+
+      case DeviceType.SPEAKER:
+        setCurrentDeviceId(value?.currentSpeaker?.deviceId || '');
+        setDeviceList(value?.speakerList || []);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  const watchOptions = {
+    [NAME.DEVICE_LIST]: handleDeviceListChange,
+  };
+
+  useEffect(() => {
+    TUIStore.watch(
+      StoreName.CALL,
+      watchOptions,
+      {
+        notifyRangeWhenWatch: NAME.MYSELF,
+      },
+    );
+
+    return () => {
+      TUIStore.unwatch(
+        StoreName.CALL,
+        watchOptions,
+      );
+    };
+  }, []);
+  return [{ deviceList, currentDeviceId }, { setCurrentDeviceId }] as const;
+};
+
+export default useDeviceList;

package/src/Components/hooks/useGetSpeakers.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { isEqual } from 'lodash-es';
+import { NAME, StoreName, TUIStore } from '../../TUICallService';
+
+const MIN_VOLUMN_THRESHOLD = 10;
+
+export default function useGetSpeakers() {
+  const [
+    localUserInfoIncludeVolumn,
+    setLocalUserInfoIncludeVolumn,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO));
+  const [
+    remoteListIncludeVolumn,
+    setRemoteListIncludeVolumn,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST));
+  const [speakerList, updateSpeakerList] = useState([]);
+  const handleLocalUserInfoIncludeVolumnChange = (value) => {
+    if (localUserInfoIncludeVolumn.volume !== value.volume) {
+      setLocalUserInfoIncludeVolumn(value);
+    }
+  };
+  const handleRemoteUserInfoIncludeVolumnListChange = (value) => {
+    if (value.length !== remoteListIncludeVolumn.length) {
+      setRemoteListIncludeVolumn(value);
+      return;
+    }
+
+    if (!isEqual(value, remoteListIncludeVolumn)) {
+      setRemoteListIncludeVolumn(value);
+    }
+  };
+
+  const watchOptions = {
+    [NAME.LOCAL_USER_INFO]: handleLocalUserInfoIncludeVolumnChange,
+    [NAME.REMOTE_USER_INFO_LIST]: handleRemoteUserInfoIncludeVolumnListChange,
+  };
+
+  useEffect(() => {
+    TUIStore.watch(
+      StoreName.CALL,
+      watchOptions,
+      {
+        notifyRangeWhenWatch: NAME.MYSELF,
+      },
+    );
+
+    return () => {
+      TUIStore.unwatch(
+        StoreName.CALL,
+        watchOptions,
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    const rs = [];
+    [localUserInfoIncludeVolumn, ...remoteListIncludeVolumn].forEach(item => {
+      if (item.isAudioAvailable && item.volume >= MIN_VOLUMN_THRESHOLD) {
+        rs.push(item.domId);
+      }
+    });
+    if (rs.length === 0 && speakerList.length === 0) {
+      return;
+    }
+    updateSpeakerList(rs);
+  }, [localUserInfoIncludeVolumn, remoteListIncludeVolumn]);
+
+  return speakerList;
+}

package/src/Components/hooks/useGetVolumeMap.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { isEqual } from 'lodash-es';
+import { NAME, StoreName, TUIStore } from '../../TUICallService';
+
+export default function useGetVolumeMap() {
+  const [
+    localUserInfoIncludeVolumn,
+    setLocalUserInfoIncludeVolumn,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO));
+  const [
+    remoteListIncludeVolumn,
+    setRemoteListIncludeVolumn,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST));
+  const [volumnMap, updateVolumnMap] = useState<{ [key: string]: number }>({});
+  const handleLocalUserInfoIncludeVolumnChange = (value) => {
+    if (localUserInfoIncludeVolumn.volume !== value.volume) {
+      setLocalUserInfoIncludeVolumn(value);
+    }
+  };
+  const handleRemoteUserInfoIncludeVolumnListChange = (value) => {
+    if (value.length !== remoteListIncludeVolumn.length) {
+      setRemoteListIncludeVolumn(value);
+      return;
+    }
+
+    if (!isEqual(value, remoteListIncludeVolumn)) {
+      setRemoteListIncludeVolumn(value);
+    }
+  };
+
+  const watchOptions = {
+    [NAME.LOCAL_USER_INFO]: handleLocalUserInfoIncludeVolumnChange,
+    [NAME.REMOTE_USER_INFO_LIST]: handleRemoteUserInfoIncludeVolumnListChange,
+  };
+
+  useEffect(() => {
+    TUIStore.watch(
+      StoreName.CALL,
+      watchOptions,
+      {
+        notifyRangeWhenWatch: NAME.MYSELF,
+      },
+    );
+
+    return () => {
+      TUIStore.unwatch(
+        StoreName.CALL,
+        watchOptions,
+      );
+    };
+  }, [watchOptions]);
+
+  useEffect(() => {
+    const rs: { [key: string]: number } = {};
+    [localUserInfoIncludeVolumn, ...remoteListIncludeVolumn].forEach(item => {
+      if (item.isAudioAvailable) {
+        rs[item.domId] = item.volume;
+      }
+    });
+    if (Object.keys(rs).length === 0) {
+      return;
+    }
+    updateVolumnMap(rs);
+  }, [localUserInfoIncludeVolumn, remoteListIncludeVolumn]);
+
+  return volumnMap;
+}

package/src/Components/hooks/useNetWorkStatus.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { NAME, StoreName, TUIStore } from '../../TUICallService';
+
+export default function useNetWorkStatus() {
+  const [
+    netWorkQualityList,
+    setNetWorkQualityList,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.NETWORK_STATUS));
+  const handleNetWorkStatusChange = (value) => {
+    setNetWorkQualityList(value);
+  };
+
+  const watchOptions = {
+    [NAME.NETWORK_STATUS]: handleNetWorkStatusChange,
+  };
+
+  useEffect(() => {
+    TUIStore.watch(
+      StoreName.CALL,
+      watchOptions,
+      {
+        notifyRangeWhenWatch: NAME.MYSELF,
+      },
+    );
+
+    return () => {
+      TUIStore.unwatch(
+        StoreName.CALL,
+        watchOptions,
+      );
+    };
+  }, []);
+  return netWorkQualityList;
+}

package/src/Components/hooks/useTranslate.ts

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { TranslateContext } from "../context";
+
+export default function useTranslate() {
+  const translate = useContext(TranslateContext);
+  return translate;
+}

package/src/Components/hooks/useViewBackgroundConfig.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { CustomUIConfigContext } from '../context';
+
+export default function useViewBackgroundConfig() {
+  const { viewBackground } = useContext(CustomUIConfigContext);
+
+  return viewBackground;
+}

package/src/Components/style/common/mixin.scss

@@ -0,0 +1,22 @@
+@mixin button-size($height, $font-size, $icon-size, $padding-horizontal) {
+  height: $height;
+  width: $icon-size;
+  font-size: $font-size;
+  padding-left: $padding-horizontal;
+  padding-right: $padding-horizontal;
+
+  .#{$prefix}-icon {
+    width: $icon-size;
+    height: $icon-size;
+
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .#{$prefix}-loading {
+    // font-size: $btn-loading-size;
+    font-size: $icon-size;
+  }
+};

package/src/Components/style/common/var.scss

@@ -0,0 +1,21 @@
+// common prefix
+$prefix: 'tk';
+
+// Font 12 14 16 40
+$font-size: 10px;
+$font-size-s: 10px;
+$font-size-base: 12px;
+$font-size-m: 14px;
+$font-size-l: 16px;
+$font-size-xl: 18px;
+$font-size-xxl: 40px;
+
+// rounded corners
+$radius-small: 3px;
+$radius-default: 6px;
+$radius-large: 9px;
+$radius-extra-large: 12px;
+$radius-round: 999px;
+$radius-circle: 50%;
+
+$grid-columns: 12;

package/src/Components/style/index.scss

@@ -0,0 +1,5 @@
+@use "./theme/light";
+@use "./theme/dark";
+@use "./theme/color";
+@import "./common/var.scss";
+@import "./common/mixin.scss";

package/src/Components/style/theme/_dark.scss

@@ -0,0 +1,56 @@
+$dark-colors: (
+  // bg
+  --uikit-theme-dark-bg-color-topbar: #16171a,
+  --uikit-theme-dark-bg-color-operate: #1f2024,
+  --uikit-theme-dark-bg-color-input: #2b2c30,
+  --uikit-theme-dark-bg-color-bubble-reciprocal: #2b2c30,
+  --uikit-theme-dark-bg-color-bubble-own: #5c9dff,
+  --uikit-theme-dark-bg-color-default: #16171a,
+  --uikit-theme-dark-bg-color-tag-mask: rgba(0, 0, 0, 55%),
+  --uikit-theme-dark-bg-color-mask: rgba(0, 0, 0, 55%),
+  // text
+  --uikit-theme-dark-text-color-primary: rgba(255, 255, 255, 93%),
+  --uikit-theme-dark-text-color-secondary: rgba(255, 255, 255, 66%),
+  --uikit-theme-dark-text-color-tertiary: rgba(255, 255, 255, 40%),
+  --uikit-theme-dark-text-color-disable: rgba(255, 255, 255, 28%),
+  --uikit-theme-dark-text-color-link: #4086ff,
+  --uikit-theme-dark-text-color-link-hover: #2b6ad6,
+  --uikit-theme-dark-text-color-link-disabled: #243047,
+  --uikit-theme-dark-text-color-anti-primary: rgba(0, 0, 0, 90%),
+  --uikit-theme-dark-text-color-anti-secondary: rgba(0, 0, 0, 55%),
+  --uikit-theme-dark-text-color-warning: #e37f32,
+  --uikit-theme-dark-text-color-success: #38a673,
+  --uikit-theme-dark-text-color-error: #e6594c,
+  // dropdown
+  --uikit-theme-dark-dropdown-color-default: #2b2c30,
+  --uikit-theme-dark-dropdown-color-hover: #3a3c42,
+  --uikit-theme-dark-dropdown-color-active: #1f2024,
+  // list
+  --uikit-theme-dark-list-color-default: #1f2024,
+  --uikit-theme-dark-list-color-hover: #2b2c30,
+  --uikit-theme-dark-list-color-active: #243047,
+  // border
+  --uikit-theme-dark-stroke-color-primary: #3a3c42,
+  --uikit-theme-dark-stroke-color-secondary: #2b2c30,
+  // box-shadow
+  --uikit-theme-dark-shadow-color: rgba(0, 0, 0, 6%),
+  // floatWindow
+  --uikit-theme-dark-floating-color-default: #2B2C30,
+  --uikit-theme-dark-floating-color-operate: #3A3C42,
+  // toast
+  --uikit-theme-dark-toast-color-default: #243047,
+  --uikit-theme-dark-toast-color-success: #22352C,
+  --uikit-theme-dark-toast-color-warning: #35231A,
+  --uikit-theme-dark-toast-color-error: #422324,
+  // btn
+  --uikit-theme-dark-button-color-hangup: #E6594C,
+  --uikit-theme-dark-button-color-accept: #38A673,
+);
+
+:root {
+  @each $name, $color in $dark-colors {
+    #{$name}: $color;
+  }
+
+  color-scheme: light dark;
+}

package/src/Components/style/theme/_light.scss

@@ -0,0 +1,56 @@
+$light-colors: (
+  // bg
+  --uikit-theme-light-bg-color-topbar: #f9fafc,
+  --uikit-theme-light-bg-color-operate: #fff,
+  --uikit-theme-light-bg-color-input: #f0f2f7,
+  --uikit-theme-light-bg-color-bubble-reciprocal: #f0f2f7,
+  --uikit-theme-light-bg-color-bubble-own: #cce2ff,
+  --uikit-theme-light-bg-color-default: #f0f2f7,
+  --uikit-theme-light-bg-color-tag-mask: rgba(255, 255, 255, 55%),
+  --uikit-theme-light-bg-color-mask: rgba(0, 0, 0, 55%),
+  // text
+  --uikit-theme-light-text-color-primary: rgba(0, 0, 0, 93%),
+  --uikit-theme-light-text-color-secondary: rgba(0, 0, 0, 66%),
+  --uikit-theme-light-text-color-tertiary: rgba(0, 0, 0, 40%),
+  --uikit-theme-light-text-color-disable: rgba(0, 0, 0, 28%),
+  --uikit-theme-light-text-color-link: #1c66e5,
+  --uikit-theme-light-text-color-link-hover: #4588f5,
+  --uikit-theme-light-text-color-link-disabled: #cce2ff,
+  --uikit-theme-light-text-color-anti-primary: rgba(0, 0, 0, 90%),
+  --uikit-theme-light-text-color-anti-secondary: rgba(0, 0, 0, 55%),
+  --uikit-theme-light-text-color-warning: #ff7200,
+  --uikit-theme-light-text-color-success: #0abf77,
+  --uikit-theme-light-text-color-error: #e54545,
+  // dropdown
+  --uikit-theme-light-dropdown-color-default: #fff,
+  --uikit-theme-light-dropdown-color-hover: #f9fafc,
+  --uikit-theme-light-dropdown-color-active: #ebf3ff,
+  // list
+  --uikit-theme-light-list-color-default: #fff,
+  --uikit-theme-light-list-color-hover: #f9fafc,
+  --uikit-theme-light-list-color-active: #ebf3ff,
+  // border
+  --uikit-theme-light-stroke-color-primary: #f9fafc,
+  --uikit-theme-light-stroke-color-secondary: rgba(0, 0, 0, 55%),
+  // box-shadow
+  --uikit-theme-light-shadow-color: rgba(0, 0, 0, 6%),
+  // floatWindow
+  --uikit-theme-light-floating-color-default: #ffffff,
+  --uikit-theme-light-floating-color-operate: #F0F2F7,
+  // toast
+  --uikit-theme-light-toast-color-default: #EBF3FF,
+  --uikit-theme-light-toast-color-success: #DCFAE9,
+  --uikit-theme-light-toast-color-warning: #FFEEDB,
+  --uikit-theme-light-toast-color-error: #FFE7E5,
+  // btn
+  --uikit-theme-light-button-color-hangup: #E54545,
+  --uikit-theme-light-button-color-accept: #0ABF77,
+);
+
+:root {
+  @each $name, $color in $light-colors {
+    #{$name}: $color;
+  }
+
+  color-scheme: light dark;
+}

package/src/Components/style/theme/_util.scss

@@ -0,0 +1,79 @@
+@use "sass:map";
+@use "sass:list";
+
+$prefix: "--uikit-theme";
+
+$themes: (
+  "light",
+  "dark",
+);
+
+$colors: (
+  "bg-color-topbar",
+  "bg-color-operate",
+  "bg-color-input",
+  "bg-color-bubble-reciprocal",
+  "bg-color-bubble-own",
+  "bg-color-default",
+  "bg-color-tag-mask",
+  "bg-color-mask",
+  "text-color-primary",
+  "text-color-secondary",
+  "text-color-tertiary",
+  "text-color-disable",
+  "text-color-link",
+  "text-color-link-hover",
+  "text-color-link-disabled",
+  "text-color-anti-primary",
+  "text-color-anti-secondary",
+  "text-color-warning",
+  "text-color-success",
+  "text-color-error",
+  "dropdown-color-default",
+  "dropdown-color-hover",
+  "dropdown-color-active",
+  "list-color-default",
+  "list-color-hover",
+  "list-color-active",
+  "stroke-color-primary",
+  "stroke-color-secondary",
+  "shadow-color",
+  "floating-color-default",
+  "floating-color-operate",
+  "toast-color-default",
+  "toast-color-success",
+  "toast-color-warning",
+  "toast-color-error",
+  "button-color-hangup",
+  "button-color-accept",
+);
+
+$color-map: ();
+
+@mixin theme() {
+  @each $theme in $themes {
+
+    $color-map: () !global;
+
+    [data-uikit-theme="#{$theme}"] & {
+      @each $color in $colors {
+        $value: --uikit-theme-#{$theme}-#{$color};
+        $color-map: map.merge($color-map, ($color: var($value))) !global;
+      }
+
+      @content;
+
+      transition: 
+        background-color 0.3s ease-out,
+        border-color 0.3s ease-out;
+    }
+  }
+}
+
+@function get($color) {
+  @if map.get($color-map, $color) {
+    @return map.get($color-map, $color);
+  } @else {
+    @return var(--uikit-basic-color-#{$color});
+  }
+}

package/src/Components/style/theme/color.scss

@@ -0,0 +1,23 @@
+$prefix: "uikit";
+
+$basic-colors: (
+  white-1: #FFFFFF,
+  white-2:rgba(255, 255, 255, 0.9),
+  white-4: rgba(255, 255, 255, 0.55),
+  white-6: rgba(255, 255, 255, 0.3),
+  white-7: rgba(255, 255, 255, 0.14),
+  black-1: rgba(0, 0, 0, 1),
+  black-2: rgba(0, 0, 0, 0.9),
+  black-3: rgba(0, 0, 0, 0.72),
+  black-4: rgba(0, 0, 0, 0.55),
+  black-5: rgba(0, 0, 0, 0.4),
+  black-8: rgba(0, 0, 0, 0.06),
+  gray-dark-3: rgba(43, 44, 48, 1),
+
+);
+
+:root {
+  @each $name, $color in $basic-colors {
+    --#{$prefix}-basic-color-#{$name}: #{$color};
+  }
+}

package/src/Components/util/classnames.ts

@@ -0,0 +1,35 @@
+// eslint-disable-next-line import/prefer-default-export
+export function classNames(...rest) {
+  const classes = [];
+  const hasOwn = {}.hasOwnProperty;
+  for (let i = 0; i < rest.length; i++) {
+    const arg = rest[i];
+    if (!arg) continue;
+
+    const argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        const inner = classNames.apply(null, arg);
+        if (inner) {
+          classes.push(inner);
+        }
+      }
+    } else if (argType === 'object') {
+      if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+        classes.push(arg.toString());
+        continue;
+      }
+
+      for (const key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}