@trtc/calls-uikit-react 4.1.0

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

@@ -0,0 +1,96 @@
+import React, { CSSProperties, useContext, useMemo } from 'react';
+import { UserInfoContext, CallInfoContext, CustomUIConfigContext } from '../../../context';
+import useNetWorkStatus from '../../../hooks/useNetWorkStatus';
+import StreamInfo from '../StreamInfo';
+import { classNames } from '../../../util/classnames';
+import useGetVolumeMap from '../../../hooks/useGetVolumeMap';
+import { TUIGlobal } from '../../../../TUICallService';
+import pusherStyle from './Pusher.module.scss';
+
+interface IPusher {
+  style?: CSSProperties;
+  showStreamInfo?: boolean;
+  loading?: boolean;
+  renderLoading?: Function;
+  renderAudioStream?: any;
+  isSpkear?: boolean;
+  className?: string;
+  isLargeView?: boolean;
+}
+
+const Pusher = React.memo((props: IPusher) => {
+  const {
+    loading = true,
+    renderLoading,
+    renderAudioStream,
+    isSpkear,
+    className,
+    showStreamInfo = true,
+    isLargeView = false,
+  } = props;
+  const {
+    localUserInfo: {
+      domId,
+      nick,
+      userId,
+      isAudioAvailable,
+      isVideoAvailable,
+    },
+  } = useContext(UserInfoContext);
+  const customUI = useContext(CustomUIConfigContext);
+  const { isGroupCall } = useContext(CallInfoContext);
+  const netWorkQualityList = useNetWorkStatus();
+
+  const showNetWorkStatus = useMemo(() => {
+    if (!netWorkQualityList) return;
+    const targetNetwork = netWorkQualityList.find((item) => item.userId === userId);
+    if (targetNetwork && targetNetwork.quality >= 4) {
+      return true;
+    }
+    return false;
+  }, [netWorkQualityList]);
+
+  const displayUserInfo = nick || userId;
+
+  const volumnMap = useGetVolumeMap();
+  const classnames = classNames([
+    className,
+    pusherStyle['pusher-container'],
+  ]);
+
+  const showUserName = useMemo(() => {
+    if (isGroupCall) {
+      return TUIGlobal.isPC
+        ? true
+        : !!isLargeView;
+    }
+
+    return false;
+  }, [isLargeView, isGroupCall]);
+  const showSwitchCamera = !TUIGlobal.isPC
+    && isVideoAvailable
+    && isGroupCall
+    && isLargeView
+    && customUI?.button?.switchCamera?.show !== false;
+
+  return (
+    <div id={domId} key={domId} className={classnames}>
+      {!loading && renderAudioStream?.()}
+      {loading && renderLoading?.()}
+      {showStreamInfo && (
+        <StreamInfo
+          volume={volumnMap[domId]}
+          isSpkear={isSpkear}
+          isMute={!isAudioAvailable}
+          displayName={displayUserInfo}
+          isMe
+          showUserName={showUserName}
+          showSwitchCamera={showSwitchCamera}
+          showNetWorkStatus={showNetWorkStatus}
+        />
+      )}
+    </div>
+  );
+});
+
+export default Pusher;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TUIGlobal } from '../../../../TUICallService';
+import StreamInfoH5 from './StreamInfoH5/StreamInfoH5';
+import StreamInfoPC from './StreamInfoPC/StreamInfoPC';
+
+export default function StreamInfo(props: any) {
+  return TUIGlobal.isPC
+    ? <StreamInfoPC {...props} />
+    : <StreamInfoH5 {...props} />;
+}

package/src/Components/components/common/StreamInfo/StreamInfoH5/StreamInfoH5.module.scss

@@ -0,0 +1,21 @@
+@use "../../../../style/theme/util" as *;
+
+.stream-info-container-h5 {
+  width: calc(100% - 16px);
+  display: flex;
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  text-wrap: nowrap;
+  margin: 8px 8px;
+  background: none;
+
+  @include theme() {
+    color: get(white-1);
+  }
+
+  &.single {
+    height: 20px;
+  }
+}

package/src/Components/components/common/StreamInfo/StreamInfoH5/StreamInfoH5.tsx

@@ -0,0 +1,95 @@
+import React, { useContext } from 'react';
+import Icon from '../../../base/Icon/Icon';
+import { classNames } from '../../../../util/classnames';
+import Row from '../../../base/Grid/Row';
+import Col from '../../../base/Grid/Col';
+import Text from '../../../base/Text/Text';
+import { CallInfoContext } from '../../../../context';
+import VolumnSrc from '../../../../assets/streamInfo/mobile/volumn.svg';
+import MicrophoneCloseGroupSrc from '../../../../assets/streamInfo/mobile/microphone-close-group.svg';
+import Button from '../../../base/Button';
+import { TUICallKitAPI } from '../../../../../TUICallService';
+import SwitchCameraSrc from '../../../../assets/button/mobile/switch-camera.svg';
+import MicrophoneCloseSingleSrc from '../../../../assets/streamInfo/mobile/microphone-close-single.svg';
+import networkStatusSrc from '../../../../assets/streamInfo/networkStatus.svg';
+import streamInfoH5Style from './StreamInfoH5.module.scss';
+
+interface IStreamInfoH5Props {
+  isSpkear?: boolean;
+  isMute?: boolean;
+  displayName?: string;
+  showUserName?: boolean;
+  showSwitchCamera?: boolean;
+  showNetWorkStatus?: boolean;
+}
+
+export default function StreamInfoH5(props: IStreamInfoH5Props) {
+  const {
+    isSpkear,
+    isMute,
+    displayName,
+    showUserName = false,
+    showSwitchCamera = false,
+    showNetWorkStatus = false,
+  } = props;
+  const { isGroupCall } = useContext(CallInfoContext);
+  const classnames = classNames(
+    [
+      streamInfoH5Style['stream-info-container-h5'],
+      {
+        [streamInfoH5Style.group]: isGroupCall,
+        [streamInfoH5Style.single]: !isGroupCall,
+      },
+    ],
+  );
+
+  const ButtonStyle = {
+    width: '30px',
+    height: '30px',
+    background: '#22262e80',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  const handleSwitchCamera = async () => {
+    await TUICallKitAPI.switchCamera();
+  };
+
+  const renderGroupCallStreamInfo = () => (
+    <Row>
+      <Col span={6} align='center' justify='start'>
+        {showUserName && <Text maxWidth='100px' truncated>{displayName}</Text>}
+        {isSpkear && <Icon style={{ width: 'fit-content' }} url={VolumnSrc} />}
+        {isMute && <Icon style={{ width: 'fit-content' }} url={MicrophoneCloseGroupSrc} />}
+      </Col>
+      <Col span={6} align='center' justify='end'>
+        {showNetWorkStatus && <Icon style={{ width: '24px', height: '24px', marginRight: '12px' }} url={networkStatusSrc} />}
+        {showSwitchCamera && (
+        <Button
+          showText={false}
+          icon={<Icon url={SwitchCameraSrc} />}
+          style={ButtonStyle}
+          iconSize='15px'
+          isStopPropagation
+          onClick={handleSwitchCamera}
+        />
+        )}
+      </Col>
+    </Row>
+  );
+  const renderSingleCallStreamInfo = () => (
+    <Row>
+      <Col span={12} justify='start'>
+        {isMute && <Icon style={{ width: 'fit-content' }} url={MicrophoneCloseSingleSrc} />}
+      </Col>
+    </Row>
+  );
+
+  return (
+    <div className={classnames}>
+      {isGroupCall ? renderGroupCallStreamInfo() : renderSingleCallStreamInfo()}
+    </div>
+  );
+}

package/src/Components/components/common/StreamInfo/StreamInfoPC/StreamInfoPC.module.scss

@@ -0,0 +1,38 @@
+@use "../../../../style/theme/util" as *;
+
+.stream-info-container-pc {
+  width: 100%;
+  height: 25px;
+  display: flex;
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  @include theme() {
+    color: get(white-1);
+  }
+  text-wrap: nowrap;
+  background: none;
+  justify-content: space-between;
+  .stream-info-content {
+    display: flex;
+    max-width: 60%;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    padding: 2px 10px;
+    
+    @include theme() {
+      background-color: get(black-5);
+    }
+
+    .nick {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .stream-info-netWork {
+    width: 20px;
+    height: 20px;
+  }
+}

package/src/Components/components/common/StreamInfo/StreamInfoPC/StreamInfoPC.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import MicrophoneVolumn from '../../MicrophoneVolumn/MicrophoneVolumn';
+import Icon from '../../../base/Icon/Icon';
+import { useTranslate } from '../../../../hooks';
+import networkStatusSrc from '../../../../assets/streamInfo/networkStatus.svg';
+import streamInfoPCStyle from './StreamInfoPC.module.scss';
+
+interface IStreamInfoPCProps {
+  isMute?: boolean;
+  displayName?: string;
+  volume?: number;
+  isMe?: boolean;
+  showNetWorkStatus?: boolean;
+}
+
+export default function StreamInfoPC(props: IStreamInfoPCProps) {
+  const {
+    isMute, displayName, volume, isMe, showNetWorkStatus = false,
+  } = props;
+
+  const { t } = useTranslate();
+
+  return (
+    <div className={streamInfoPCStyle['stream-info-container-pc']}>
+      <div className={streamInfoPCStyle['stream-info-content']}>
+        <MicrophoneVolumn volume={volume} close={isMute} />
+        <div className={streamInfoPCStyle.nick}>{displayName}</div>
+        {isMe && <div>{(t('you'))}</div>}
+      </div>
+      <div className='stream-info-netWork'>
+        {showNetWorkStatus && <Icon style={{ width: '20px', height: '20px' }} url={networkStatusSrc} />}
+      </div>
+    </div>
+  );
+}

package/src/Components/components/common/StreamInfo/index.ts

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

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

@@ -0,0 +1,68 @@
+import React, { CSSProperties, useEffect, useMemo, useState } from 'react';
+import { Message } from '../../base/Message/Message';
+import { classNames } from '../../../util/classnames';
+import { useTranslate } from '../../../hooks';
+import { NAME, StoreName, TUIStore } from '../../../../TUICallService';
+
+interface ITipProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+export default function Tip(props: ITipProps) {
+  const { className, style } = props;
+  const [tip, setTip] = useState(null);
+  const [show, setShow] = useState(true);
+  const [showDuration, setShowDuration] = useState(0);
+  const { t } = useTranslate();
+  const classnames = classNames([
+    className,
+  ]);
+
+  function handleCallTipsChange(value) {
+    if (typeof value === 'object') {
+      const { text = '', duration = 0 } = value;
+      setTip(text);
+      setShowDuration(duration);
+    } else {
+      setTip(value);
+    }
+  }
+
+  const messageContent = useMemo(() => {
+    if (typeof t === 'function' && tip !== null) {
+      return t(tip);
+    }
+  }, [t, tip]);
+
+  useEffect(() => {
+    TUIStore.watch(
+      StoreName.CALL,
+      {
+        [NAME.CALL_TIPS]: handleCallTipsChange,
+      },
+      {
+        notifyRangeWhenWatch: NAME.MYSELF,
+      },
+    );
+
+    return () => {
+      TUIStore.unwatch(
+        StoreName.CALL,
+        {
+          [NAME.CALL_TIPS]: handleCallTipsChange,
+        },
+      );
+    };
+  }, []);
+
+  return (
+    <div className={classnames} style={style}>
+      {show && (
+      <Message style={{ whiteSpace: 'nowrap' }} duration={showDuration} onClose={() => setShow(false)} plaintext>
+        {messageContent}
+      </Message>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import TopBarH5 from './h5/TopBarH5';
+import TopBarPC from './pc/TopBarPC';
+import { TUIGlobal } from '../../../../TUICallService';
+import useCallDuration from '../../../hooks/useCallDuration';
+
+export default function TopBar() {
+  const isMobile = !TUIGlobal.isPC;
+  const callDuration = useCallDuration();
+
+  return (
+    <>
+      {isMobile && <TopBarH5 callDuration={callDuration} />}
+      {!isMobile && <TopBarPC callDuration={callDuration} />}
+    </>
+  );
+}

package/src/Components/components/common/TopBar/h5/TopBarH5.module.scss

@@ -0,0 +1,12 @@
+.top-bar-container {
+  width: 100%;
+  height: 5.8%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  z-index: 5;
+
+  .top-bar {
+    height: 24px;
+  }
+}

package/src/Components/components/common/TopBar/h5/TopBarH5.tsx

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import Time from '../../../base/Time/Time';
+import Col from '../../../base/Grid/Col';
+import Row from '../../../base/Grid/Row';
+import Minimize from '../../ButtonPanel/button/Minimize';
+import { CallRole, CallStatus } from '../../../../../TUICallService';
+import Tip from '../../Tip/Tip';
+import { CallInfoContext } from '../../../../context';
+import topBarH5Style from './TopBarH5.module.scss';
+
+interface ITopBarH5Props {
+  callDuration?: string;
+}
+
+export default function TopBarH5(props: ITopBarH5Props) {
+  const { callDuration } = props;
+  const {
+    isGroupCall, callStatus, callRole, allowedMinimized,
+  } = useContext(CallInfoContext);
+  const showTip = (isGroupCall
+    && (callStatus === CallStatus.CONNECTED || callRole === CallRole.CALLER));
+  return (
+    <div className={topBarH5Style['top-bar-container']}>
+      <Row className={topBarH5Style['top-bar']}>
+        <Col justify='start' span={4}>
+          {allowedMinimized && <Minimize />}
+        </Col>
+        <Col align='center' span={4}>
+          {callStatus === CallStatus.CONNECTED
+            ? (
+              <Time callDuration={callDuration} />
+            ) : (
+              showTip && <Tip />
+            )}
+        </Col>
+        <Col span={4} />
+      </Row>
+    </div>
+  );
+}

package/src/Components/components/common/TopBar/pc/TopBarPC.module.scss

@@ -0,0 +1,8 @@
+.single-top-bar{
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    margin-top: 20px;
+    z-index: 2;
+}

package/src/Components/components/common/TopBar/pc/TopBarPC.tsx

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+import Time from '../../../base/Time/Time';
+import Col from '../../../base/Grid/Col';
+import Row from '../../../base/Grid/Row';
+import Minimize from '../../ButtonPanel/button/Minimize/Minimize';
+import FullScreen from '../../ButtonPanel/button/FullScreen';
+import { CallStatus } from '../../../../../TUICallService';
+import { CallInfoContext } from '../../../../context';
+import topBarPCStyle from './TopBarPC.module.scss';
+
+interface ITopBarPCProps {
+  callDuration?: string;
+}
+
+export default function TopBarPC(props: ITopBarPCProps) {
+  const { callDuration } = props;
+  const {
+    isGroupCall,
+    callStatus,
+    allowedMinimized,
+    allowedFullScreen,
+  } = useContext(CallInfoContext);
+  const showTime = callStatus === CallStatus.CONNECTED && !isGroupCall;
+  return (
+    <Row className={topBarPCStyle['single-top-bar']}>
+      <Col span={4} />
+      <Col span={4}>
+        {showTime && <Time callDuration={callDuration} />}
+      </Col>
+      <Col span={4} justify='end'>
+        {allowedMinimized && <Minimize />}
+        {allowedFullScreen && <FullScreen domID='tuicallkit-id' />}
+      </Col>
+    </Row>
+  );
+}

package/src/Components/const/common.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from 'react';
+
+export const classPrefix = 'tk';
+
+export type TButton = {
+  component: FunctionComponent,
+  props: {
+    show: boolean,
+    [key: string]: any,
+  },
+};
+
+export type TButtons = TButton[][];
+
+export type TObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';

package/src/Components/context/CallUserInfoContext.ts

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+import { CallStatus, CallMediaType, CallRole } from '../../TUICallService';
+
+interface ICallInfoContext {
+  callStatus?: CallStatus;
+  callRole?: CallRole;
+  callType?: CallMediaType;
+  isEarPhone?: boolean;
+  isClickable?: boolean;
+  isGroupCall?: boolean;
+  isFloat?: boolean;
+  allowedMinimized?: boolean;
+  allowedFullScreen?: boolean;
+  enableVirtualBackground?: boolean;
+  isShowEnableVirtualBackground?: boolean;
+  isMuteSpeaker?: boolean;
+}
+
+const CallInfoContext = createContext<ICallInfoContext>({});
+
+export default CallInfoContext;

package/src/Components/context/CallerUserInfoContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+interface ICallerUserInfoContext {
+  avatar?: string;
+  userId?: string;
+  displayUserInfo?: string;
+}
+
+const CallerUserInfoContext = createContext<ICallerUserInfoContext>({});
+
+export default CallerUserInfoContext;

package/src/Components/context/CustomUIConfigContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { ICustomUIConfig } from '../../TUICallService/const';
+
+const CustomUIConfigContext = createContext<ICustomUIConfig>({});
+
+export default CustomUIConfigContext;

package/src/Components/context/FocusItemContext.ts

@@ -0,0 +1,13 @@
+import React, { createContext } from 'react';
+
+export type TFocusItem = string | number | null;
+interface IFocusItemContext {
+  focusItem: TFocusItem;
+  setFocusItem: React.Dispatch<TFocusItem>;
+}
+const FocusItemContext = createContext<IFocusItemContext>({
+  focusItem: null,
+  setFocusItem: () => {},
+});
+
+export default FocusItemContext;

package/src/Components/context/IsClickableContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const IsClickableContext = createContext(false);
+
+export default IsClickableContext;

package/src/Components/context/TranslateContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { NAME, StoreName, TUIStore } from '../../TUICallService';
+
+const TranslateContext = createContext({ t: TUIStore.getData(StoreName.CALL, NAME.TRANSLATE) });
+
+export default TranslateContext;

package/src/Components/context/UserInfoContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { IUserInfo } from '../../TUICallService/interface';
+
+const UserInfoContext = createContext<{ localUserInfo: IUserInfo, remoteList: IUserInfo[] }>({
+  localUserInfo: { userId: '' },
+  remoteList: [],
+});
+
+export default UserInfoContext;

package/src/Components/context/index.ts

@@ -0,0 +1,17 @@
+import CallInfoContext from './CallUserInfoContext';
+import CallerUserInfoContext from './CallerUserInfoContext';
+import FocusItemContext from './FocusItemContext';
+import UserInfoContext from './UserInfoContext';
+import IsClickableContext from './IsClickableContext';
+import CustomUIConfigContext from './CustomUIConfigContext';
+import TranslateContext from './TranslateContext';
+
+export {
+  CallInfoContext,
+  CallerUserInfoContext,
+  FocusItemContext,
+  UserInfoContext,
+  IsClickableContext,
+  CustomUIConfigContext,
+  TranslateContext,
+};

package/src/Components/hooks/index.ts

@@ -0,0 +1,9 @@
+import useTranslate from "./useTranslate";
+import useDeviceList from "./useDeviceList";
+import useCallDuration from "./useCallDuration";
+
+export {
+  useTranslate,
+  useDeviceList,
+  useCallDuration,
+}

package/src/Components/hooks/useCallDuration.ts

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