@trtc/calls-uikit-react 4.1.0

package/src/Components/assets/streamInfo/mobile/volumn.svg

@@ -0,0 +1,20 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_124_647)">
+<circle cx="14" cy="14" r="12" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8122 22.5382C15.8122 22.5382 15.8123 22.5381 15.8123 22.5381C20.5278 17.8226 20.5278 10.1772 15.8124 5.46167L14.0446 7.22944C17.7838 10.9687 17.7837 17.0311 14.0445 20.7704C14.0445 20.7704 14.0445 20.7704 14.0445 20.7704L15.8122 22.5382Z" fill="#1C66E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1879 19.1356C12.1879 19.1356 12.1879 19.1356 12.188 19.1355C15.0246 16.2989 15.0247 11.6998 12.1881 8.86304L10.4203 10.6308C12.2806 12.4912 12.2805 15.5074 10.4202 17.3678C10.4202 17.3678 10.4201 17.3678 10.4201 17.3678L12.1879 19.1356Z" fill="#1C66E5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.12144 16.0692C10.2644 14.926 10.2643 13.0728 9.12128 11.9298C9.12126 11.9297 9.12124 11.9297 9.12122 11.9297L7.10298 13.9479C7.103 13.9479 7.10302 13.948 7.10304 13.948C7.13146 13.9764 7.13151 14.0224 7.1032 14.0509L9.12144 16.0692Z" fill="#1C66E5"/>
+<defs>
+<filter id="filter0_d_124_647" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_124_647"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_124_647" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/Components/assets/streamInfo/networkStatus.svg

@@ -0,0 +1,22 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_d_1_19)">
+<ellipse cx="21.616" cy="21.517" rx="19.616" ry="19.517" fill="white"/>
+</g>
+<rect x="7" y="8" width="29" height="29" fill="url(#pattern0_1_19)"/>
+<defs>
+<filter id="filter0_d_1_19" x="0" y="0" width="43.232" height="43.034" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_19"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_19" result="shape"/>
+</filter>
+<pattern id="pattern0_1_19" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1_19" transform="scale(0.005)"/>
+</pattern>
+<image id="image0_1_19" width="200" height="200" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

package/src/Components/components/GroupCall/GroupCall.module.scss

@@ -0,0 +1,13 @@
+.group-container {
+  width: 100%;
+  height: 100%;
+
+  &.mobile {
+    animation: pulldown 0.3s linear;
+  }
+}
+
+@keyframes pulldown {
+  from {transform: translateY(-100%)}
+  to {transform: translateY(0%)}
+}

package/src/Components/components/GroupCall/GroupCall.tsx

@@ -0,0 +1,82 @@
+import React, { useContext, useState, useMemo } from 'react';
+import { CallStatus, CallRole, TUIGlobal } from '../../../TUICallService';
+import { CallInfoContext, FocusItemContext, UserInfoContext } from '../../context';
+import TopBar from '../common/TopBar/TopBar';
+import ButtonPanel from '../common/ButtonPanel';
+import Waiting from './Waiting/Waiting';
+import MediaContainer from './MediaContainer';
+import OverlayStream from '../common/OverlayStream/OverlayStream';
+import { TFocusItem } from '../../context/FocusItemContext';
+import { classNames } from '../../util/classnames';
+import DefaultAvatarSrc from '../../assets/common/defaultAvatar.svg';
+import groupCallStyle from './GroupCall.module.scss';
+
+export default function GroupCall() {
+  const { remoteList, localUserInfo } = useContext(UserInfoContext);
+  const { callRole, callStatus, isFloat } = useContext(CallInfoContext);
+  const [focusItem, setFocusItem] = useState<TFocusItem>(null);
+
+  const FocusItemContextValue = useMemo(() => ({
+    focusItem,
+    setFocusItem,
+  }), [focusItem, setFocusItem]);
+
+  const renderTopBar = () => {
+    if (!isFloat) {
+      return <TopBar />;
+    }
+
+    return null;
+  };
+  const renderButtonPanel = () => {
+    if (!isFloat) {
+      return <ButtonPanel />;
+    }
+
+    return null;
+  };
+  const renderWaiting = () => {
+    if (callStatus === CallStatus.CALLING && callRole !== CallRole.CALLER && !isFloat) {
+      return <Waiting remoteList={remoteList} callRole={callRole} />;
+    }
+
+    return null;
+  };
+
+  const renderBackGround = () => {
+    if (!isFloat) {
+      if ((callRole !== CallRole.CALLER && callStatus === CallStatus.CONNECTED)
+        || callRole === CallRole.CALLER) {
+        return (
+          <OverlayStream
+            blur
+            showAvatar={false}
+            showLoading={false}
+            avatar={localUserInfo.avatar || DefaultAvatarSrc}
+            isMobile={!TUIGlobal.isPC}
+          />
+        );
+      }
+    }
+
+    return null;
+  };
+
+  const classnames = classNames([
+    groupCallStyle['group-container'],
+    { [groupCallStyle.mobile]: !TUIGlobal.isPC },
+  ]);
+
+  return (
+    <FocusItemContext.Provider value={FocusItemContextValue}>
+      <div className={classnames}>
+        {renderTopBar()}
+        {renderWaiting()}
+        {(callRole === CallRole.CALLER || callStatus === CallStatus.CONNECTED)
+          && <MediaContainer />}
+        {renderButtonPanel()}
+        {renderBackGround()}
+      </div>
+    </FocusItemContext.Provider>
+  );
+}

package/src/Components/components/GroupCall/MediaContainer/AudioStream/AudioStream.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { TUIGlobal } from '../../../../../TUICallService';
+import OverlayStream from '../../../common/OverlayStream/OverlayStream';
+import useViewBackgroundConfig from '../../../../hooks/useViewBackgroundConfig';
+import defaultAvatarSrc from '../../../../assets/common/defaultAvatar.svg';
+
+interface IRenderAudioStreamProps {
+  avatar?: string;
+  username?: string;
+  visible?: boolean;
+  isVideoAvailable?: boolean;
+  background?: string;
+  userId?: string;
+}
+
+export default function AudioStream(props: IRenderAudioStreamProps) {
+  const viewBackgroundConfigObj = useViewBackgroundConfig();
+  const {
+    avatar, username, visible, userId,
+  } = props || {};
+  const [background, setBackground] = useState(viewBackgroundConfigObj[userId] || avatar);
+  useEffect(() => {
+    setBackground(viewBackgroundConfigObj[userId] || avatar || defaultAvatarSrc);
+  }, [viewBackgroundConfigObj, userId]);
+
+  return (
+    <OverlayStream
+      showLoading={false}
+      showAvatar={false}
+      avatar={avatar || defaultAvatarSrc}
+      username={username}
+      showUsername={TUIGlobal.isPC}
+      isMobile={!TUIGlobal.isPC}
+      showOverlayer={false}
+      blur={false}
+      background={background}
+      // @ts-ignore
+      style={{ visibility: visible ? '' : 'hidden', zIndex: 1 }}
+    />
+  );
+}

package/src/Components/components/GroupCall/MediaContainer/MediaContainer.module.scss

@@ -0,0 +1,74 @@
+@use "../../../style/theme/util" as *;
+
+.stream-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+
+  &.mobile {
+    top: 5.5vh;
+  }
+
+  &.pc {
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  &.float {
+    position: absolute;
+    visibility: hidden;
+  }
+}
+
+.groupcall-gridplus-container {
+  width: 100%;
+  height: 100%;
+
+  &.mobile {
+    &.center {
+      margin-top: 24vh;
+    }
+
+    &.two-layout {
+      margin-top: 15vh
+    }
+  }
+
+  &.pc {
+    &.two-layout {
+      margin-top: 20%;
+    }
+  }
+
+  &.float {
+    margin: 0px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    border: 0;
+    :global(.tk-gridplus-item-container) {
+      width: 100% !important;
+      height: 100% !important;
+
+      .hidden {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .userinfo {
+    z-index: 1;
+    @include theme() {
+      color: get(white-1);
+    }
+    text-align: right;
+    font-family: PingFang SC;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+  }
+}

package/src/Components/components/GroupCall/MediaContainer/MediaContainer.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useContext, useMemo } from 'react';
+import { CallMediaType, CallStatus, TUIGlobal } from '../../../../TUICallService';
+import GridLayout from '../../base/GridLayout/GridLayout';
+import { GridPlusItem } from '../../base/GridLayout';
+import Portal from '../../base/Portal/Portal';
+import Pusher from '../../common/Pusher/Pusher';
+import AudioStream from './AudioStream/AudioStream';
+import { CallInfoContext, FocusItemContext, UserInfoContext } from '../../../context';
+import { classNames } from '../../../util/classnames';
+import useGetSpeakers from '../../../hooks/useGetSpeakers';
+import Player from '../../common/Player/Player';
+import StreamLoading from './StreamLoading/StreamLoading';
+import mediaContainerStyle from './MediaContainer.module.scss';
+
+interface IRenderAudioStreamProps {
+  avatar?: string;
+  username?: string;
+  visible?: boolean;
+  isVideoAvailable?: boolean;
+  background?: string;
+  userId?: string;
+}
+interface IRenderStreamLoadingProps {
+  avatar?: string;
+  username?: string;
+  userId?: string;
+}
+
+export default function MediaContainer() {
+  const { localUserInfo, remoteList } = useContext(UserInfoContext);
+  const { callStatus, callType } = useContext(CallInfoContext);
+  const { focusItem, setFocusItem } = useContext(FocusItemContext);
+  const { isFloat } = useContext(CallInfoContext);
+  const speakerIdList = useGetSpeakers();
+  const pusherLoading = useMemo(() => {
+    if (callStatus === CallStatus.CALLING) {
+      if ((callType === CallMediaType.AUDIO && !localUserInfo.isAudioAvailable)
+          || (callType === CallMediaType.VIDEO && !localUserInfo.isVideoAvailable)) {
+        return true;
+      }
+    }
+
+    return false;
+  }, [localUserInfo, callStatus, callType]);
+
+  function renderLoading(props: IRenderStreamLoadingProps) {
+    return <StreamLoading {...props} />;
+  }
+
+  function renderAudioStream(props: IRenderAudioStreamProps) {
+    return <AudioStream {...props} />;
+  }
+
+  const renderRemoteList = useCallback(() => remoteList.map((stream, index) => (
+    <GridPlusItem index={index + 1} key={stream.userId}>
+      <Player
+        className={classNames({
+          [mediaContainerStyle.hidden]: isFloat && !speakerIdList.includes(stream.domId),
+        })}
+        renderLoading={() => renderLoading({
+          avatar: stream.avatar,
+          username: stream.displayUserInfo,
+          userId: stream.userId,
+        })}
+        renderAudioStream={() => renderAudioStream({
+          avatar: stream.avatar,
+          username: stream.displayUserInfo,
+          visible: !stream.isVideoAvailable,
+          userId: stream.userId,
+        })}
+        loading={!stream.isEnter}
+        streamInfo={stream}
+        showStreamInfo={!isFloat}
+        isSpkear={speakerIdList.includes(stream.domId)}
+        isLargeView={focusItem === (index + 1)}
+      />
+    </GridPlusItem>
+  )), [remoteList, speakerIdList, focusItem]);
+
+  const classnames = classNames([
+    mediaContainerStyle['groupcall-gridplus-container'],
+    {
+      [mediaContainerStyle.pc]: TUIGlobal.isPC,
+      [mediaContainerStyle.mobile]: !TUIGlobal.isPC,
+      [mediaContainerStyle.float]: isFloat,
+      [mediaContainerStyle['two-layout']]: remoteList.length === 1 && focusItem === null && !isFloat,
+    },
+  ]);
+
+  return (
+    <div
+      id='group-container'
+      className={classNames([
+        mediaContainerStyle['stream-container'],
+        {
+          [mediaContainerStyle.mobile]: !TUIGlobal.isPC,
+          [mediaContainerStyle.pc]: TUIGlobal.isPC,
+          [mediaContainerStyle.float]: isFloat,
+        },
+      ])}
+    >
+      <Portal attach={isFloat ? '#float' : '#group-container'} style={{ width: '100%', height: '100%', position: 'relative' }}>
+        <GridLayout
+          className={classnames}
+          isMobile={!TUIGlobal.isPC}
+          enableFocus={!TUIGlobal.isPC && !isFloat}
+          unit={TUIGlobal.isPC ? '%' : 'vw'}
+          onHandleFocusChange={setFocusItem}
+        >
+          <GridPlusItem index={0} key={localUserInfo.userId}>
+            <Pusher
+              className={classNames({
+                [mediaContainerStyle.hidden]: isFloat
+                  && !speakerIdList.includes(localUserInfo.domId),
+              })}
+              loading={pusherLoading}
+              showStreamInfo={!isFloat}
+              renderLoading={() => renderLoading({
+                avatar: localUserInfo.avatar,
+                username: localUserInfo.nick || localUserInfo.userId,
+                userId: localUserInfo.userId,
+              })}
+              renderAudioStream={() => renderAudioStream({
+                avatar: localUserInfo.avatar,
+                username: localUserInfo.nick || localUserInfo.userId,
+                visible: !localUserInfo.isVideoAvailable,
+                userId: localUserInfo.userId,
+              })}
+              isSpkear={speakerIdList.includes(localUserInfo.domId)}
+              isLargeView={focusItem === 0}
+            />
+          </GridPlusItem>
+          {...renderRemoteList()}
+        </GridLayout>
+      </Portal>
+    </div>
+  );
+}

package/src/Components/components/GroupCall/MediaContainer/StreamLoading/StreamLoading.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import useViewBackgroundConfig from '../../../../hooks/useViewBackgroundConfig';
+import { TObjectFit } from '../../../../const/common';
+import Loading from '../../../base/Loading';
+import defaultAvatarSrc from '../../../../assets/common/defaultAvatar.svg';
+
+interface IRenderStreamLoadingProps {
+  avatar?: string;
+  username?: string;
+  userId?: string;
+}
+
+export default function StreamLoading(props: IRenderStreamLoadingProps) {
+  const { avatar, userId } = props || {};
+  const viewBackgroundConfigObj = useViewBackgroundConfig();
+  const [showOverlay, setShowOverlay] = useState(!viewBackgroundConfigObj[userId]);
+  const [fit, setFit] = useState<{objectFit: TObjectFit}>({ objectFit: 'cover' });
+  const [
+    background,
+    setBackground,
+  ] = useState(viewBackgroundConfigObj[userId] || avatar || defaultAvatarSrc);
+  const style = { width: '100%', height: '100%' };
+
+  useEffect(() => {
+    if (viewBackgroundConfigObj[userId]) {
+      setFit({ objectFit: 'fill' });
+      setShowOverlay(false);
+      setBackground(viewBackgroundConfigObj[userId] || avatar || defaultAvatarSrc);
+    }
+  }, [viewBackgroundConfigObj, userId]);
+
+  const handleImgError = () => {
+    setFit({ objectFit: 'cover' });
+    setShowOverlay(false);
+    setBackground(defaultAvatarSrc);
+  };
+
+  return (
+    <Loading showOverlayer={showOverlay}  theme='dot' style={{ zIndex: 1, position: 'absolute', top: 0 }}>
+      <img
+        alt='Failed to load the background image in loading'
+        style={{ ...style, ...fit }}
+        src={background}
+        onError={handleImgError}
+        />
+    </Loading>
+  );
+}

package/src/Components/components/GroupCall/MediaContainer/index.ts

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

package/src/Components/components/GroupCall/Waiting/Waiting.module.scss

@@ -0,0 +1,44 @@
+@use "../../../style/theme/util" as *;
+.groupcall-waiting-container {
+  z-index: 1;
+}
+.waiting-mobile {
+  .tip {
+    @include theme() {
+      color: get(white-1);
+    }
+    z-index: 1;
+  }
+
+  .groupcall-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 24px;
+    z-index: 1;
+    @include theme() {
+      color: get(white-1);
+    }
+    width: 100%;
+
+    .tip {
+      text-align: center;
+    }
+
+    .avatar-group {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 12px;
+      align-items: center;
+      justify-content: center;
+      max-width: 70%;
+
+      .avatar-item {
+        width: 10vw;
+        height: 10vw;
+        margin-left: 10px;
+        margin-top: 10px;
+      }
+    }
+  }
+}

package/src/Components/components/GroupCall/Waiting/Waiting.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable react/no-unstable-nested-components */
+import React, { useContext, useEffect, useState } from 'react';
+import { TUIGlobal, CallRole } from '../../../../TUICallService';
+import { IUserInfo } from '../../../../TUICallService/interface';
+import Avatar from '../../base/Avatar';
+import Icon from '../../base/Icon/Icon';
+import OverlayStream from '../../common/OverlayStream/OverlayStream';
+import CallerUserInfoContext from '../../../context/CallerUserInfoContext';
+import { useTranslate } from '../../../hooks';
+import defaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
+import useViewBackgroundConfig from '../../../hooks/useViewBackgroundConfig';
+import waitingStyle from './Waiting.module.scss';
+import { classNames } from '../../../util/classnames';
+
+interface IWaitingProps {
+  remoteList: IUserInfo[];
+  callRole: CallRole;
+}
+type TObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+
+export default function Waiting(props: IWaitingProps) {
+  const viewBackgroundConfigObj = useViewBackgroundConfig();
+  const { remoteList } = props;
+  const { t } = useTranslate();
+  const callerUserInfo = useContext(CallerUserInfoContext);
+  const { avatar, userId, displayUserInfo } = callerUserInfo || {};
+  const [showOverlayer, setShowOverlayer] = useState(!viewBackgroundConfigObj[userId]);
+  const [fit, setFit] = useState<TObjectFit>(viewBackgroundConfigObj[userId] ? 'fill' : 'cover');
+  const [background, setBackground] = useState(viewBackgroundConfigObj[userId] || avatar);
+
+  useEffect(() => {
+    setShowOverlayer(!viewBackgroundConfigObj[userId]);
+    setFit(viewBackgroundConfigObj[userId] ? 'fill' : 'cover');
+    setBackground(viewBackgroundConfigObj[userId] || avatar || defaultAvatarSrc);
+  }, [viewBackgroundConfigObj, userId]);
+
+  function WaitingH5() {
+    const avatarIcon = <Icon style={{ width: '100%', height: '100%' }} url={defaultAvatarSrc} />;
+    return (
+      <OverlayStream
+        className={classNames([
+          waitingStyle['groupcall-waiting-container'],
+          waitingStyle['waiting-mobile'],
+        ])}
+        showLoading={false}
+        showAvatar
+        blur
+        tip={t('Invited group call')}
+        showUsername
+        username={displayUserInfo}
+        avatar={avatar || defaultAvatarSrc}
+        theme={TUIGlobal.isPC ? 'circle' : 'dot'}
+        isMobile={!TUIGlobal.isPC}
+        background={background}
+        showOverlayer={showOverlayer}
+        fit={fit}
+      >
+        <div className={waitingStyle['groupcall-info']}>
+          <div className={waitingStyle.tip}>
+            {remoteList.length}
+            {t('people in the call')}
+            :
+          </div>
+          <div className={waitingStyle['avatar-group']}>
+            {remoteList?.map((item) => <Avatar key={item.userId} className={waitingStyle['avatar-item']} image={item.avatar} />)}
+          </div>
+        </div>
+      </OverlayStream>
+    );
+  }
+  function WaitingPC() {
+    return (
+      <OverlayStream
+        className={waitingStyle['groupcall-waiting-container']}
+        showLoading={false}
+        avatar={avatar || defaultAvatarSrc}
+        username={displayUserInfo}
+        showAvatar={!TUIGlobal.isPC}
+        isMobile={!TUIGlobal.isPC}
+        tip={t('Invited group call')}
+        background={background}
+        showOverlayer={showOverlayer}
+        fit={fit}
+      />
+    );
+  }
+
+  return TUIGlobal.isPC ? <WaitingPC /> : <WaitingH5 />;
+}