@trtc/calls-uikit-react 4.1.0

package/src/Components/components/common/ButtonPanel/button/BackgroundBlur/BackgroundBlur.tsx

@@ -0,0 +1,46 @@
+import React, { useContext, useState } from 'react';
+import Button from '../../../../base/Button';
+import Icon from '../../../../base/Icon/Icon';
+import { TUICallKitAPI, TUIGlobal } from '../../../../../../TUICallService';
+import { useTranslate } from '../../../../../hooks';
+import backgroundBlurCloseSrc from '../../../../../assets/button/backgroundBlurClose.svg';
+import backgroundBlurOpenSrc from '../../../../../assets/button/backgroundBlurOpen.svg';
+import { classNames } from '../../../../../util/classnames';
+import { CallInfoContext } from '../../../../../context';
+import { classPrefix } from '../../../../base/common';
+import backGroundBlurStyle from './BackgroundBlur.module.scss';
+import commonStyle from '../common.module.scss';
+
+export default function BackgroundBlur() {
+  const { enableVirtualBackground } = useContext(CallInfoContext);
+  const [isClickable, setIsClickable] = useState(true);
+  const { t } = useTranslate();
+  const backgroundBlurIcon = <Icon url={enableVirtualBackground ? backgroundBlurOpenSrc : backgroundBlurCloseSrc} className={commonStyle['btn-icon']} />;
+  const iconClassName = classNames([
+    commonStyle['btn-icon-container'],
+    backGroundBlurStyle['background-blur-icon-container'],
+    {
+      mobile: !TUIGlobal.isPC,
+      pc: TUIGlobal.isPC,
+      close: !enableVirtualBackground,
+    },
+  ]);
+
+  const handleClick = async () => {
+    setIsClickable(false);
+    await TUICallKitAPI.setBlurBackground(!enableVirtualBackground);
+    setIsClickable(true);
+  };
+
+  return (
+    <Button
+      loading={!isClickable}
+      className={commonStyle[`${classPrefix}-btn`]}
+      iconClassName={iconClassName}
+      icon={backgroundBlurIcon}
+      onClick={handleClick}
+    >
+      {t('virtual-background')}
+    </Button>
+  );
+}

package/src/Components/components/common/ButtonPanel/button/BackgroundBlur/index.ts

@@ -0,0 +1,3 @@
+import BackgroundBlur from './BackgroundBlur';
+
+export default BackgroundBlur;

package/src/Components/components/common/ButtonPanel/button/Camera.tsx

@@ -0,0 +1,81 @@
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import Button from '../../../base/Button';
+import Icon from '../../../base/Icon/Icon';
+import { classNames } from '../../../../util/classnames';
+import Popup from '../../../base/Popup/Popup';
+import DeviceSelector from '../../DeviceSelector/DeviceSelector';
+import { DeviceType } from '../../../../../TUICallService/const';
+import { UserInfoContext } from '../../../../context';
+import { TUICallKitAPI, TUIGlobal } from '../../../../../TUICallService';
+import { useTranslate } from '../../../../hooks';
+import CameraOpenSrc from '../../../../assets/button/camera-open.svg';
+import CameraCloseSrc from '../../../../assets/button/camera-close.svg';
+import { classPrefix } from '../../../base/common';
+import useDeviceList from '../../../../hooks/useDeviceList';
+import commonStyle from './common.module.scss';
+
+interface ICameraProps {
+  isMobile?: boolean;
+}
+
+export default function Camera(props: ICameraProps) {
+  const { localUserInfo } = useContext(UserInfoContext);
+  const isCameraOpen = useMemo(
+    () => localUserInfo?.isVideoAvailable,
+    [localUserInfo?.isVideoAvailable],
+  );
+  const [isClickable, setIsClickable] = useState(true);
+  const { t } = useTranslate();
+  const [{ deviceList }] = useDeviceList(DeviceType.CAMERA);
+  const handleClick = useCallback(
+    async () => {
+      setIsClickable(false);
+
+      if (isCameraOpen) {
+        await TUICallKitAPI.closeCamera();
+      } else {
+        await TUICallKitAPI.openCamera('localVideo');
+      }
+
+      setIsClickable(true);
+    },
+    [isCameraOpen],
+  );
+  const iconClassName = classNames([
+    commonStyle['btn-icon-container'],
+    {
+      mobile: !TUIGlobal.isPC,
+      pc: TUIGlobal.isPC,
+      close: !isCameraOpen,
+      disabled: !isClickable,
+    },
+  ]);
+  const CameraIcon = <Icon url={isCameraOpen ? CameraOpenSrc : CameraCloseSrc} className={commonStyle['btn-icon']} />;
+  const btnText = isCameraOpen ? t('camera enabled') : t('camera disabled');
+
+  return (
+    <Popup
+      content={<DeviceSelector deviceType={DeviceType.CAMERA} />}
+      disabled={!TUIGlobal.isPC || !(deviceList?.length > 0)}
+      teleported={false}
+    >
+      <div style={{ display: 'flex' }}>
+        <Button
+          className={commonStyle[`${classPrefix}-btn`]}
+          iconClassName={iconClassName}
+          icon={CameraIcon}
+          loading={!isClickable}
+          onClick={handleClick}
+          {...props}
+        >
+          {btnText}
+        </Button>
+      </div>
+    </Popup>
+  );
+}

package/src/Components/components/common/ButtonPanel/button/FullScreen/FullScreen.module.scss

@@ -0,0 +1,13 @@
+@import "../../../../../style/common/var.scss";
+
+.full-screen-container {
+   width: 20px !important;
+   height: 20px !important;
+   margin-right: 10px;
+
+   :global(.#{$prefix}-icon) {
+    line-height: 20px;
+    width: 20px !important;
+    height: 20px !important;
+  }
+}

package/src/Components/components/common/ButtonPanel/button/FullScreen/FullScreen.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Button from '../../../../base/Button';
+import Icon from '../../../../base/Icon/Icon';
+import { toggleScreen } from '../../../../base/util/index';
+import FullScreenSrc from '../../../../../assets/button/desktop/fullScreen.svg';
+import fullScreenStyle from './FullScreen.module.scss';
+
+interface IFullScreenProps {
+  domID?: string;
+}
+
+export default function FullScreen(props: IFullScreenProps) {
+  const { domID } = props;
+  const FullScreenIcon = <Icon url={FullScreenSrc} />;
+  return (
+    <Button
+      className={fullScreenStyle['full-screen-container']}
+      icon={FullScreenIcon}
+      onClick={() => {
+        if (typeof domID === 'string') {
+          toggleScreen(domID);
+        }
+      }}
+    />
+  );
+}

package/src/Components/components/common/ButtonPanel/button/FullScreen/index.ts

@@ -0,0 +1,3 @@
+import FullScreen from './FullScreen';
+
+export default FullScreen;

package/src/Components/components/common/ButtonPanel/button/Hangup/Hangup.module.scss

@@ -0,0 +1,7 @@
+@use "../../../../../style/theme/util" as *;
+
+.hangup-icon-container {
+  @include theme() {
+    background-color: get(button-color-hangup);
+  }
+}

package/src/Components/components/common/ButtonPanel/button/Hangup/Hangup.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+import { TUICallKitAPI, TUIGlobal } from '../../../../../../TUICallService';
+import Button from '../../../../base/Button';
+import Icon from '../../../../base/Icon/Icon';
+import { classNames } from '../../../../../util/classnames';
+import { useTranslate } from '../../../../../hooks';
+import HangupSrc from '../../../../../assets/button/hangup.svg';
+import { IsClickableContext } from '../../../../../context';
+import { classPrefix } from '../../../../base/common';
+import hangupStyle from './Hangup.module.scss';
+import commonStyle from '../common.module.scss';
+
+interface IHangupProps {
+  isMobile?: boolean;
+}
+
+export default function Hangup(props: IHangupProps) {
+  const isClickable = useContext(IsClickableContext);
+  const { t } = useTranslate();
+  const handleClick = () => TUICallKitAPI.hangup();
+  const iconClassName = classNames([
+    commonStyle['btn-icon-container'],
+    hangupStyle['hangup-icon-container'],
+    {
+      mobile: !TUIGlobal.isPC,
+      pc: TUIGlobal.isPC,
+    },
+  ]);
+  const hangupIcon = <Icon className={commonStyle['btn-icon']} url={HangupSrc} />;
+  return (
+    <Button
+      loading={!isClickable}
+      className={commonStyle[`${classPrefix}-btn`]}
+      iconClassName={iconClassName}
+      icon={hangupIcon}
+      onClick={handleClick}
+      {...props}
+    >
+      {t('hangup')}
+    </Button>
+  );
+}

package/src/Components/components/common/ButtonPanel/button/Hangup/index.ts

@@ -0,0 +1,3 @@
+import Hangup from './Hangup';
+
+export default Hangup;

package/src/Components/components/common/ButtonPanel/button/Microphone.tsx

@@ -0,0 +1,78 @@
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import Button from '../../../base/Button';
+import Icon from '../../../base/Icon/Icon';
+import { TUICallKitAPI, TUIGlobal } from '../../../../../TUICallService';
+import { UserInfoContext } from '../../../../context';
+import { classNames } from '../../../../util/classnames';
+import Popup from '../../../base/Popup/Popup';
+import DeviceSelector from '../../DeviceSelector/DeviceSelector';
+import { useTranslate, useDeviceList } from '../../../../hooks';
+import { DeviceType } from '../../../../../TUICallService/const';
+import MicrophoneOpenSrc from '../../../../assets/button/microphone-open.svg';
+import MicrophoneCloseSrc from '../../../../assets/button/microphone-close.svg';
+import { classPrefix } from '../../../base/common';
+import commonStyle from './common.module.scss';
+
+interface IMicrophoneProps {
+  isMobile?: boolean;
+}
+
+export default function Microphone(props: IMicrophoneProps) {
+  const { localUserInfo } = useContext(UserInfoContext);
+  const isOpen = useMemo(() => localUserInfo?.isAudioAvailable, [localUserInfo]);
+  const [{ deviceList }] = useDeviceList(DeviceType.MICROPHONE);
+  const [isClickable, setIsClickable] = useState(true);
+  const { t } = useTranslate();
+
+  const handleClick = useCallback(
+    async () => {
+      setIsClickable(false);
+
+      if (isOpen) {
+        await TUICallKitAPI.closeMicrophone();
+      } else {
+        await TUICallKitAPI.openMicrophone();
+      }
+
+      setIsClickable(true);
+    },
+    [isOpen, setIsClickable],
+  );
+  const iconClassName = classNames([
+    commonStyle['btn-icon-container'],
+    {
+      mobile: !TUIGlobal.isPC,
+      pc: TUIGlobal.isPC,
+      close: !isOpen,
+      disabled: !isClickable,
+    },
+  ]);
+  const btnText = isOpen ? t('microphone enabled') : t('microphone disabled');
+  const MicrophoneIcon = <Icon className={commonStyle['btn-icon']} url={isOpen ? MicrophoneOpenSrc : MicrophoneCloseSrc}/>;
+
+  return (
+    <Popup
+      content={<DeviceSelector deviceType={DeviceType.MICROPHONE} />}
+      disabled={!TUIGlobal.isPC || !(deviceList?.length > 0)}
+      teleported={false}
+    >
+      <div style={{ display: 'flex' }}>
+        <Button
+          className={commonStyle[`${classPrefix}-btn`]}
+          iconClassName={iconClassName}
+          icon={MicrophoneIcon}
+          loading={!isClickable}
+          onClick={handleClick}
+          {...props}
+        >
+          {btnText}
+        </Button>
+      </div>
+    </Popup>
+  );
+}

package/src/Components/components/common/ButtonPanel/button/Minimize/Minimize.module.scss

@@ -0,0 +1,23 @@
+@import "../../../../../style/common/var.scss";
+
+.minimize-desk-container {
+  margin-right: 10px;
+  width: 20px !important;
+  height: 20px !important;
+
+  :global(.tk-icon) {
+    width: 20px !important;
+    height: 20px !important;
+  }
+}
+
+.minimize-mobile-container {
+  margin-left: 10px;
+  width: 24px !important;
+  height: 24px !important;
+
+  :global(.tk-icon) {
+    width: 24px !important;
+    height: 24px !important;
+  }
+}

package/src/Components/components/common/ButtonPanel/button/Minimize/Minimize.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Button from '../../../../base/Button';
+import Icon from '../../../../base/Icon/Icon';
+import { TUIGlobal, TUICallKitAPI } from '../../../../../../TUICallService';
+import MinimizeDeskSrc from '../../../../../assets/button/desktop/minimize.svg';
+import MinimizeMobileSrc from '../../../../../assets/button/mobile/minimize.svg';
+import minimizeStyle from './Minimize.module.scss';
+
+export default function Minimize() {
+  const isMobile = !TUIGlobal.isPC;
+
+  const handleClick = () => {
+    try {
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      }
+    } catch (err) {
+      console.debug(err);
+    }
+
+    TUICallKitAPI.toggleMinimize();
+  };
+  const MinimizeIcon = (
+    <Icon url={isMobile ? MinimizeMobileSrc : MinimizeDeskSrc} />
+  );
+
+  return (
+    <Button
+      className={isMobile ? minimizeStyle['minimize-mobile-container'] : minimizeStyle['minimize-desk-container']}
+      icon={MinimizeIcon}
+      onClick={handleClick}
+      isMobile={isMobile}
+    />
+  );
+}

package/src/Components/components/common/ButtonPanel/button/Minimize/index.ts

@@ -0,0 +1,3 @@
+import Minimize from './Minimize';
+
+export default Minimize;

package/src/Components/components/common/ButtonPanel/button/Reject/Reject.module.scss

@@ -0,0 +1,7 @@
+@use "../../../../../style/theme/util" as *;
+
+.reject-icon-container {
+  @include theme() {
+    background-color: get(button-color-hangup);
+  }
+}

package/src/Components/components/common/ButtonPanel/button/Reject/Reject.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from '../../../../base/Button';
+import { TUICallKitAPI, TUIGlobal } from '../../../../../../TUICallService';
+import Icon from '../../../../base/Icon/Icon';
+import { useTranslate } from '../../../../../hooks';
+import { classNames } from '../../../../../util/classnames';
+import HangupSrc from '../../../../../assets/button/hangup.svg';
+import { classPrefix } from '../../../../base/common';
+import commonStyle from '../common.module.scss';
+import rejectStyle from './Reject.module.scss';
+
+interface IRejectProps {
+  isMobile?: boolean;
+}
+
+export default function Reject(props: IRejectProps) {
+  const { t } = useTranslate();
+  const handleClick = () => TUICallKitAPI.reject();
+  const iconClassName = classNames([
+    commonStyle['btn-icon-container'],
+    rejectStyle['reject-icon-container'],
+    {
+      mobile: !TUIGlobal.isPC,
+      pc: TUIGlobal.isPC,
+    },
+  ]);
+  const hangupIcon = <Icon className={commonStyle['btn-icon']} url={HangupSrc} />;
+  return (
+    <Button
+      className={commonStyle[`${classPrefix}-btn`]}
+      icon={hangupIcon}
+      iconClassName={iconClassName}
+      onClick={handleClick}
+      {...props}
+    >
+      {t('reject')}
+    </Button>
+  );
+}

package/src/Components/components/common/ButtonPanel/button/Reject/index.ts

@@ -0,0 +1,3 @@
+import Reject from './Reject';
+
+export default Reject;

package/src/Components/components/common/ButtonPanel/button/Speaker.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback, useContext } from 'react';
+import Button from '../../../base/Button';
+import { TUICallKitAPI, TUIGlobal } from '../../../../../TUICallService/index';
+import { CallInfoContext } from '../../../../context';
+import Icon from '../../../base/Icon/Icon';
+import { classNames } from '../../../../util/classnames';
+import Popup from '../../../base/Popup/Popup';
+import DeviceSelector from '../../DeviceSelector/DeviceSelector';
+import { useTranslate, useDeviceList } from '../../../../hooks';
+import { DeviceType } from '../../../../../TUICallService/const';
+import SpeakerOpenSrc from '../../../../assets/button/speaker-open.svg';
+import SpeakerCloseSrc from '../../../../assets/button/speaker-close.svg';
+import { classPrefix } from '../../../base/common';
+import commonStyle from './common.module.scss';
+
+interface ISpeakerProps {
+  isMobile?: boolean;
+}
+
+export default function Speaker(props: ISpeakerProps) {
+  const [{ deviceList, currentDeviceId }] = useDeviceList(DeviceType.SPEAKER);
+  const { isMuteSpeaker } = useContext(CallInfoContext);
+  const { t } = useTranslate();
+  const getLabelByDeviceId = (deviceId: any) => {
+    if (TUIGlobal.isPC) {
+      const result = deviceList.find((item) => item.deviceId === deviceId);
+      return result ? result.label : t('speaker enabled');
+    } else {
+      return isMuteSpeaker ? t('speaker disabled') : t('speaker enabled');
+    };
+  };
+
+  const handleClick = useCallback(
+    () => {
+      if (isMuteSpeaker) {
+        TUICallKitAPI.unMuteSpeaker();
+      } else {
+        TUICallKitAPI.muteSpeaker();
+      }
+    },
+    [isMuteSpeaker],
+  );
+
+  const SpeakerIcon = <Icon url={isMuteSpeaker ? SpeakerCloseSrc : SpeakerOpenSrc} className={commonStyle['btn-icon']} />;
+
+  const iconClassName = classNames([
+    commonStyle['btn-icon-container'],
+    {
+      mobile: !TUIGlobal.isPC,
+      pc: TUIGlobal.isPC,
+      close: isMuteSpeaker,
+    },
+  ]);
+
+  return (
+    <Popup
+      trigger={TUIGlobal.isPC ? 'hover' : 'click'}
+      disabled={!(deviceList.length > 0 && TUIGlobal.isPC)}
+      content={<DeviceSelector deviceType={DeviceType.SPEAKER} />}
+      teleported={false}
+    >
+      <div style={{ display: 'flex' }}>
+        <Button
+          className={commonStyle[`${classPrefix}-btn`]}
+          iconClassName={iconClassName}
+          icon={SpeakerIcon}
+          onClick={handleClick}
+          {...props}
+        >
+          {getLabelByDeviceId(currentDeviceId)}
+        </Button>
+      </div>
+    </Popup>
+  );
+}

package/src/Components/components/common/ButtonPanel/button/SwitchAudioCall.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from '../../../base/Button';
+import { TUICallKitAPI, TUIGlobal, t } from '../../../../../TUICallService';
+import Icon from '../../../base/Icon/Icon';
+import { classNames } from '../../../../util/classnames';
+import SwitchAudioCallSrc from '../../../../assets/button/switch-audio.svg';
+import { classPrefix } from '../../../base/common';
+import commonStyle from './common.module.scss';
+
+export default function SwitchAudioCall(props) {
+  const handleClick = () => TUICallKitAPI.switchCallMediaType();
+  const iconClassName = classNames([
+    commonStyle['btn-icon-container'],
+    {
+      mobile: !TUIGlobal.isPC,
+      pc: TUIGlobal.isPC,
+      close: true,
+    },
+  ]);
+  const SwitchAudioCallIcon = <Icon className={commonStyle['btn-icon']} url={SwitchAudioCallSrc} />;
+  return (
+    <Button
+      className={commonStyle[`${classPrefix}-btn`]}
+      iconClassName={iconClassName}
+      icon={SwitchAudioCallIcon}
+      onClick={handleClick}
+      {...props}
+    >
+      {t('video-to-audio')}
+    </Button>
+  );
+}

package/src/Components/components/common/ButtonPanel/button/SwitchCamera.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TUICallKitAPI } from '../../../../../TUICallService';
+import Button from '../../../base/Button';
+import Icon from '../../../base/Icon/Icon';
+import switchCameraSrc from '../../../../assets/button/mobile/switch-camera.svg';
+
+export default function SwitchCamera(props) {
+  const handleSwitchCamera = () => TUICallKitAPI.switchCamera();
+  const hangupIcon = <Icon url={switchCameraSrc} />;
+  return (
+    <Button
+      style={{ width: '28px', height: '28px' }}
+      iconSize='28px'
+      icon={hangupIcon}
+      onClick={handleSwitchCamera}
+      {...props}
+    />
+  );
+}

package/src/Components/components/common/ButtonPanel/button/common.module.scss

@@ -0,0 +1,51 @@
+
+@use "../../../../style/theme/util" as *;
+@import "../../../../style/common/var.scss";
+
+.btn-icon {
+  width: 50% !important;
+  height: 50% !important;
+}
+
+.btn-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 0px;
+  @include theme() {
+    background-color: get(white-1);
+  }
+
+  &:global(.close) {
+    @include theme() {
+      background-color: get(black-5);
+    }
+  }
+
+  &:global(.disabled) {
+    @include theme() {
+      background-color: get(black-5);
+    }
+  }
+}
+
+.arrow-btn {
+  padding: 4px;
+  width: 12px !important;
+  height: 12px !important;
+  margin: 20px 0px 0px 0px;
+  transform: translateY(-50%);
+
+  :global(.tk-icon) {
+    width: 12px !important;
+    height: 12px !important;
+  }
+}
+
+.#{$prefix}-btn {
+  transition-property: width,height,left,top;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+  width: 70px !important;
+}