@trtc/calls-uikit-react 4.1.0

package/src/Components/components/common/DeviceSelector/DeviceSelector.module.scss

@@ -0,0 +1,62 @@
+@use "../../../style/theme/util" as *;
+
+.device-selector-container {
+  width: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px;
+  font-weight: 500;
+
+  .device-item {
+    width: 100%;
+    overflow: hidden;
+    padding: 5px 3px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    text-align: left;
+    line-height: 20px;
+    cursor: pointer;
+
+    &.control-item {
+      @include theme() {
+        border-top: 1px solid get(white-7);
+      }
+      padding-left: 6px;
+    }
+
+    &.btn {
+      @include theme() {
+        border-top: 1px solid get(white-2);
+      }
+    }
+
+    &:hover {
+      border-radius: 5px;
+      @include theme() {
+        background: get(white-7);
+      }
+    }
+
+    &.select {
+      @include theme() {
+        background-color: get(white-6);
+      }
+      border-radius: 3px;
+    }
+  }
+}
+
+.scroll-container {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 3px;
+
+  .scroll-content {
+    max-height: 60px;
+    margin-right: -20px;
+    overflow: hidden auto;
+    padding-right: 20px;
+  }
+}

package/src/Components/components/common/DeviceSelector/DeviceSelector.tsx

@@ -0,0 +1,105 @@
+import React, { useContext } from 'react';
+import { DeviceType } from '../../../../TUICallService/const';
+import { useTranslate, useDeviceList } from '../../../hooks';
+import { TUICallKitAPI } from '../../../../TUICallService';
+import { classNames } from '../../../util/classnames';
+import { UserInfoContext, CallInfoContext } from '../../../context';
+import deviceSelectorStyle from './DeviceSelector.module.scss';
+
+interface IDeviceSelectorProps {
+  deviceType?: DeviceType;
+  isShowControlBtn?: boolean;
+}
+
+export default function DeviceSelector(props: IDeviceSelectorProps) {
+  const { deviceType, isShowControlBtn = true } = props;
+  const { localUserInfo } = useContext(UserInfoContext);
+  const { isMuteSpeaker } = useContext(CallInfoContext);
+  const [{ deviceList, currentDeviceId }, { setCurrentDeviceId }] = useDeviceList(deviceType);
+  const { t } = useTranslate(); 
+  const controlBtnClassName = classNames([
+    deviceSelectorStyle['device-item'],
+    deviceSelectorStyle['control-item'],
+  ]);
+  const handleClickDeviceItem = async (deviceId: string) => {
+    try {
+      await TUICallKitAPI.switchDevice({
+        deviceType,
+        deviceId,
+      });
+      setCurrentDeviceId(deviceId);
+    } catch (err) {
+      console.debug(err);
+    }
+  };
+  const switchStatus = async () => {
+    if (deviceType === DeviceType.CAMERA) {
+      if (localUserInfo?.isVideoAvailable) {
+        await TUICallKitAPI.closeCamera();
+      } else {
+        await TUICallKitAPI.openCamera('localVideo');
+      }
+    }
+
+    if (deviceType === DeviceType.MICROPHONE) {
+      if (localUserInfo?.isAudioAvailable) {
+        await TUICallKitAPI.closeMicrophone();
+      } else {
+        await TUICallKitAPI.openMicrophone();
+      }
+    }
+
+    if (deviceType === DeviceType.SPEAKER) {
+      if (isMuteSpeaker) {
+        await TUICallKitAPI.unMuteSpeaker();
+      } else {
+        await TUICallKitAPI.muteSpeaker();
+      }
+    }
+  };
+  const DeviceText = () => {
+    if (deviceType === DeviceType.CAMERA) {
+      return localUserInfo?.isVideoAvailable ? t('close camera') : t('open camera');
+    }
+
+    if (deviceType === DeviceType.MICROPHONE) {
+      return localUserInfo?.isAudioAvailable ? t('close microphone') : t('open microphone');
+    }
+
+    if (deviceType === DeviceType.SPEAKER) {
+      return isMuteSpeaker ? t('open speaker') : t('close speaker');
+    }
+  };
+  function renderDeviceList() {
+    if (deviceList?.length > 0) {
+      return deviceList?.map((device) => {
+        const { deviceId, label } = device;
+        return (
+          <div
+            className={classNames([
+              deviceSelectorStyle['device-item'],
+              { [deviceSelectorStyle.select]: currentDeviceId === deviceId },
+            ])}
+            key={deviceId}
+            onClick={() => handleClickDeviceItem(deviceId)}
+          >
+            {label}
+          </div>
+        );
+      });
+    }
+    return <div className={deviceSelectorStyle['device-item']}>{t('failed to obtain speakers')}</div>;
+  }
+
+  return (
+    <div className={deviceSelectorStyle['device-selector-container']}>
+      <div className={deviceSelectorStyle['scroll-container']}>
+        <div className={deviceSelectorStyle['scroll-content']}>
+          {renderDeviceList()}
+        </div>
+      </div>
+      {isShowControlBtn
+        && <div onClick={switchStatus} className={controlBtnClassName}>{DeviceText()}</div>}
+    </div>
+  );
+}

package/src/Components/components/common/FloatingWindow/FloatingWindow.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode, useContext, useRef, useState } from 'react';
+import { CallInfoContext } from '../../../context';
+import FloatingWindowGroupCall from './FloatingWindowGroupCall/FloatingWindowGroupCall';
+import FloatingWindowSingleCall from './FloatingWindowSingleCall/FloatingWindowSingleCall';
+import Drag from '../../base/Drag/Drag';
+
+interface IFloatingWindowProps {
+  showVideo?: boolean;
+  hasVideo?: boolean;
+  children?: ReactNode;
+  isAudioAvailable?: boolean;
+  show?: boolean;
+}
+
+export default function FloatingWindow(props: IFloatingWindowProps) {
+  const { isGroupCall } = useContext(CallInfoContext);
+  const nodeRef = useRef<any>();
+  const [clickable, setClickable] = useState(true);
+  const visibility: any = props.show ? '' : 'hidden';
+
+  return (
+    <Drag
+      nodeRef={nodeRef}
+      initialPosition={{ right: '0px', top: '100px' }}
+      onMoveStart={() => setClickable(false)}
+      onMoveEnd={() => setClickable(true)}
+    >
+      <div ref={nodeRef} style={{ visibility }}>
+        {
+          isGroupCall
+            ? <FloatingWindowGroupCall clickable={clickable} {...props} />
+            : <FloatingWindowSingleCall clickable={clickable} {...props} />
+        }
+      </div>
+    </Drag>
+  );
+}

package/src/Components/components/common/FloatingWindow/FloatingWindowGroupCall/FloatingWindowGroupCall.tsx

@@ -0,0 +1,97 @@
+import React, { ReactNode, useContext } from 'react';
+import { classNames } from '../../../../util/classnames';
+import Icon from '../../../base/Icon/Icon';
+import { CallInfoContext, UserInfoContext } from '../../../../context';
+import {
+  CallStatus, TUICallKitAPI, TUIGlobal,
+} from '../../../../../TUICallService';
+import { useTranslate, useCallDuration } from '../../../../hooks';
+import EarphoneSrc from '../../../../assets/floatingWindow/mobile/earphone.svg';
+import CameraOpenSrc from '../../../../assets/floatingWindow/mobile/camera-open.svg';
+import MicrophoneOpenSrc from '../../../../assets/floatingWindow/mobile/microphone-open.svg';
+import CameraCloseSrc from '../../../../assets/floatingWindow/mobile/camera-close.svg';
+import MicrophoneCloseSrc from '../../../../assets/floatingWindow/mobile/microphone-close.svg';
+import floatingWindowGroupCallStyle from './style/FloatingWindowGroupCall.module.scss';
+
+interface IFloatingWindowH5Props {
+  showVideo?: boolean;
+  hasVideo?: boolean;
+  clickable?: boolean;
+  children?: ReactNode;
+}
+
+export default function FloatingWindowGroupCall(props: IFloatingWindowH5Props) {
+  const { hasVideo, clickable } = props;
+  const { isGroupCall, callStatus } = useContext(CallInfoContext);
+  const { isFloat } = useContext(CallInfoContext);
+  const { localUserInfo: { isAudioAvailable, isVideoAvailable } } = useContext(UserInfoContext);
+  const duration = useCallDuration();
+  const { t } = useTranslate();
+  const cameraSrc = isVideoAvailable ? CameraOpenSrc : CameraCloseSrc;
+  const microphoneSrc = isAudioAvailable ? MicrophoneOpenSrc : MicrophoneCloseSrc;
+
+  const renderCallStatus = () => {
+    const classnames = classNames([
+      floatingWindowGroupCallStyle['video-stream'],
+    ]);
+    return (
+      <>
+        <div
+          className={classnames}
+          id='float'
+        />
+        {!hasVideo && (
+          <div className={floatingWindowGroupCallStyle['audio-stream']}>
+            <div className={floatingWindowGroupCallStyle.earphone}><Icon url={EarphoneSrc} /></div>
+            <div className={floatingWindowGroupCallStyle.info}>
+              {callStatus === CallStatus.CONNECTED ? duration : t('wait to be called')}
+            </div>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const floatingWindowGroupCallClassNames = classNames([
+    {
+      [floatingWindowGroupCallStyle['floating-window-h5-groupcall-container']]: !TUIGlobal.isPC,
+      [floatingWindowGroupCallStyle['floating-window-pc-groupcall-container']]: TUIGlobal.isPC,
+    },
+  ]);
+
+  return (
+    <div
+      onClick={() => clickable && TUICallKitAPI.toggleMinimize()}
+      className={floatingWindowGroupCallClassNames}
+    >
+      <div className={floatingWindowGroupCallStyle['click-overlay']} />
+      <div className={classNames([
+        floatingWindowGroupCallStyle['call-status'],
+        {
+          [floatingWindowGroupCallStyle.float]: isFloat,
+          [floatingWindowGroupCallStyle.video]: hasVideo,
+        }])}
+      >
+        {renderCallStatus()}
+      </div>
+      {isGroupCall && isFloat && (
+        <div className={floatingWindowGroupCallStyle['device-status']}>
+          <div className={classNames([
+            floatingWindowGroupCallStyle.icon,
+            floatingWindowGroupCallStyle.camera,
+          ])}
+          >
+            <Icon url={cameraSrc} />
+          </div>
+          <div className={classNames([
+            floatingWindowGroupCallStyle.icon,
+            floatingWindowGroupCallStyle.micphone,
+          ])}
+          >
+            <Icon url={microphoneSrc} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/Components/components/common/FloatingWindow/FloatingWindowGroupCall/style/FloatingWindowGroupCall.module.scss

@@ -0,0 +1,2 @@
+@import url('./pc.module.scss');
+@import url('./mobile.module.scss');

package/src/Components/components/common/FloatingWindow/FloatingWindowGroupCall/style/mobile.module.scss

@@ -0,0 +1,126 @@
+@use "../../../../../style/theme/util" as *;
+
+.floating-window-h5-groupcall-container {
+  width: 72px;
+  height: 90px;
+  top: 100px;
+  right: 0;
+  display: flex;
+  z-index: 99;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+  @include theme() {
+    background-color: get(floating-color-default);
+    box-shadow: 0px 0px 10px 0px get(black-8);
+  }
+
+  .click-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    z-index: 11;
+  }
+  
+  .call-status {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    .video-stream {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      // padding: 8px;
+      box-sizing: border-box;
+
+      &.hidden {
+        visibility: hidden !important;
+        opacity: 0;
+      }
+    }
+
+    .audio-stream {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .call-status {
+    height: 70px;
+    width: 100%;
+    position: relative;
+    padding: 8px 18px 8px 18px;
+    box-sizing: border-box;
+
+    &.video {
+      padding: 8px;
+    }
+
+    .earphone {
+      height: 36px;
+      width: 36px;
+      top: 8px;
+      position: absolute;
+    }
+
+    .info {
+      @include theme() {
+        color: get(text-color-success);
+      }
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 16px; /* 133.333% */
+      position: absolute;
+      bottom: 8px;
+    }
+  }
+
+  .device-status {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 20px;
+    width: 100%;
+    position: relative;
+    justify-content: space-evenly;
+
+    @include theme() {
+      background-color: get(floating-color-operate);
+    }
+
+    .icon {
+      display: flex;
+      width: 16px;
+      height: 16px;
+      position: absolute;
+    }
+
+    .camera {
+      left: 14px;
+    }
+
+    .micphone {
+      right: 14px;
+    }
+  }  
+}

package/src/Components/components/common/FloatingWindow/FloatingWindowGroupCall/style/pc.module.scss

@@ -0,0 +1,126 @@
+@use "../../../../../style/theme/util" as *;
+
+.floating-window-pc-groupcall-container {
+  width: 80px;
+  height: 100px;
+  top: 100px;
+  right: 10px;
+  display: flex;
+  z-index: 99;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  @include theme() {
+    background-color: get(floating-color-default);
+    box-shadow: 0px 0px 10px 0px get(black-8);
+  }
+
+  .click-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    z-index: 11;
+  }
+  
+  .call-status {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    .video-stream {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+
+      &.hidden {
+        visibility: hidden !important;
+        opacity: 0;
+      }
+    }
+
+    .audio-stream {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .call-status {
+    height: 80px;
+    width: 100%;
+    position: relative;
+    padding: 8px 18px 8px 18px;
+    box-sizing: border-box;
+
+    &.video {
+      padding: 8px;
+    }
+
+    .earphone {
+      height: 36px;
+      width: 36px;
+      top: 8px;
+      position: absolute;
+    }
+
+    .info {
+      @include theme() {
+        color: get(text-color-success);
+      }
+      text-align: center;
+      font-family: PingFang SC;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 16px; /* 133.333% */
+      position: absolute;
+      bottom: 8px;
+    }
+  }
+
+  .device-status {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 20px;
+    width: 100%;
+    position: relative;
+    justify-content: space-evenly;
+
+    @include theme() {
+      background-color: get(floating-color-operate);
+    }
+
+    .icon {
+      display: flex;
+      width: 16px;
+      height: 16px;
+      position: absolute;
+    }
+
+    .camera {
+      left: 14px;
+    }
+
+    .micphone {
+      right: 14px;
+    }
+  }  
+}

package/src/Components/components/common/FloatingWindow/FloatingWindowSingleCall/FloatingWindowSingleCall.tsx

@@ -0,0 +1,75 @@
+import React, { ReactNode, useContext } from 'react';
+import { classNames } from '../../../../util/classnames';
+import Icon from '../../../base/Icon/Icon';
+import { CallInfoContext } from '../../../../context';
+import { useTranslate, useCallDuration } from '../../../../hooks';
+import {
+  CallMediaType, CallStatus, TUICallKitAPI, TUIGlobal,
+} from '../../../../../TUICallService';
+import EarphoneSrc from '../../../../assets/floatingWindow/mobile/earphone.svg';
+import floatingWindowSingleCallStyle from './style/FloatingWindowSingleCall.module.scss';
+
+interface IFloatingWindowProps {
+  showVideo?: boolean;
+  enable?: boolean;
+  hasVideo?: boolean;
+  clickable?: boolean;
+  children?: ReactNode;
+}
+
+export default function FloatingWindowSingleCall(props: IFloatingWindowProps) {
+  const { hasVideo, clickable } = props;
+  const { callStatus, callType } = useContext(CallInfoContext);
+  const { isFloat } = useContext(CallInfoContext);
+  const duration = useCallDuration();
+  const { t } = useTranslate();
+
+  const renderCallStatus = () => {
+    const classnames = classNames([
+      floatingWindowSingleCallStyle['video-stream'],
+      {
+        [floatingWindowSingleCallStyle.hidden]: !hasVideo,
+      },
+    ]);
+    return (
+      <>
+        <div className={classnames} id='float' />
+        {!hasVideo ? (
+          <div className={floatingWindowSingleCallStyle['audio-stream']}>
+            <div className={floatingWindowSingleCallStyle.earphone}><Icon url={EarphoneSrc} /></div>
+            <div className={floatingWindowSingleCallStyle.info}>
+              {callStatus === CallStatus.CONNECTED ? duration : t('wait to be called')}
+            </div>
+          </div>
+        ) : (
+          <div className={floatingWindowSingleCallStyle.info}>
+            {callStatus === CallStatus.CONNECTED ? '' : t('wait to be called')}
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const classnames = classNames([
+    {
+      [floatingWindowSingleCallStyle['floating-window-h5-singlecall-container']]: !TUIGlobal.isPC,
+      [floatingWindowSingleCallStyle['floating-window-pc-singlecall-container']]: TUIGlobal.isPC,
+      [floatingWindowSingleCallStyle['audio-call']]: callType === CallMediaType.AUDIO,
+    },
+  ]);
+
+  return (
+    <div onClick={() => {clickable && TUICallKitAPI.toggleMinimize()}} className={classnames}>
+      <div className={floatingWindowSingleCallStyle['click-overlay']} />
+      <div className={classNames([
+        [floatingWindowSingleCallStyle['call-status']],
+        {
+          [floatingWindowSingleCallStyle.float]: isFloat,
+          [floatingWindowSingleCallStyle.video]: hasVideo,
+        }])}
+      >
+        {renderCallStatus()}
+      </div>
+    </div>
+  );
+}

package/src/Components/components/common/FloatingWindow/FloatingWindowSingleCall/style/FloatingWindowSingleCall.module.scss

@@ -0,0 +1,2 @@
+@import url('./mobile.module.scss');
+@import url('./pc.module.scss');