@trtc/calls-uikit-react 4.1.0

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

@@ -0,0 +1,86 @@
+import React, {
+  useContext, useEffect, useMemo, useState,
+} from 'react';
+import { CallInfoContext } from '../../../../context';
+import { CallMediaType, TUIGlobal } from '../../../../../TUICallService';
+import useViewBackgroundConfig from '../../../../hooks/useViewBackgroundConfig';
+import OverlayStream from '../../../common/OverlayStream/OverlayStream';
+import { TObjectFit } from '../../../../const/common';
+import defaultAvatarSrc from '../../../../assets/common/defaultAvatar.svg';
+import { classNames } from '../../../../util/classnames';
+
+interface IRenderAudioStreamProps {
+  avatar?: string;
+  username?: string;
+  visible?: boolean;
+  isSmall?: boolean;
+  isVideoAvailable?: boolean;
+  userId?: string;
+  classnames?: string;
+}
+
+export default function AudioStream(props: IRenderAudioStreamProps) {
+  const {
+    avatar,
+    username,
+    isSmall,
+    isVideoAvailable,
+    userId,
+    classnames,
+    ...rest
+  } = props;
+  const [audioStreamVisible, setAudioStreamVisible] = useState('hidden');
+  const viewBackgroundConfigObj = useViewBackgroundConfig();
+  const { callType, isFloat } = useContext(CallInfoContext);
+  const isAudioCall = useMemo(() => callType === CallMediaType.AUDIO, [callType]);
+  const [showOverlayer, setShowOverlayer] = useState(!viewBackgroundConfigObj[userId]);
+  const [fit, setFit] = useState<TObjectFit>(viewBackgroundConfigObj[userId] ? 'fill' : 'cover');
+  const [background, setBackground] = useState(viewBackgroundConfigObj[userId] || avatar);
+  const [imgError, setImgError] = useState(false);
+  const audioStreamClassNames = classNames([
+    classnames,
+  ]);
+
+  useEffect(() => {
+    if (((isAudioCall && !isSmall) || (!isAudioCall && !isVideoAvailable))) {
+      setAudioStreamVisible('');
+    } else {
+      setAudioStreamVisible('hidden');
+    }
+    if (!imgError) {
+      if (isAudioCall) {
+        setShowOverlayer(!viewBackgroundConfigObj[userId]);
+      } else {
+        setShowOverlayer(!isVideoAvailable && !viewBackgroundConfigObj[userId]);
+      }
+
+      setFit(viewBackgroundConfigObj[userId] ? 'fill' : 'cover');
+      setBackground(viewBackgroundConfigObj[userId] || avatar || defaultAvatarSrc);
+    }
+  }, [isFloat, isSmall, isAudioCall, isVideoAvailable, viewBackgroundConfigObj]);
+
+  const handleImgError = () => {
+    setImgError(true);
+    setFit('cover');
+  };
+
+  return (
+    <OverlayStream
+      className={audioStreamClassNames}
+      showLoading={false}
+      avatar={avatar || defaultAvatarSrc}
+      showAvatar={!TUIGlobal.isPC}
+      username={username}
+      showVolumn={TUIGlobal.isPC && callType === CallMediaType.AUDIO}
+      isMobile={!TUIGlobal.isPC}
+      isSmall={isSmall}
+      background={background}
+      showOverlayer={showOverlayer}
+      fit={fit}
+      // @ts-ignore
+      style={{ visibility: audioStreamVisible, zIndex: 1 }}
+      {...rest}
+      onError={handleImgError}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+@use "../../../style/theme/util" as *;
+
+.single-stream-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &.pc {
+    border-radius: 12px;
+    overflow: hidden;
+
+    @include theme() {
+      background-color: get(black-2);
+    }
+
+    .single-call-audio-stream {
+      :global(.overlay) {
+        border-radius: 12px;
+        overflow: hidden;
+      }
+    }
+  }
+
+  &.float {
+    position: absolute;
+    visibility: hidden;
+  }
+}

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

@@ -0,0 +1,121 @@
+import React, {
+  useContext, useEffect, useMemo, useState,
+} from 'react';
+import { CallMediaType, CallStatus, TUIGlobal } from '../../../../TUICallService';
+import { ToggleWindow, ToggleWindowItem } from '../../base/ToggleWindow';
+import Player from '../../common/Player/Player';
+import Pusher from '../../common/Pusher/Pusher';
+import { CallInfoContext, UserInfoContext } from '../../../context';
+import AudioStream from './AudioStream/AudioStream';
+import { classNames } from '../../../util/classnames';
+import Portal from '../../base/Portal/Portal';
+import useGetLargeViewName from './hooks/useGetLargeViewName';
+import { ViewName } from '../../../../TUICallService/const/index';
+import mediaContainerStyle from './MediaContainer.module.scss';
+
+interface IRenderAudioStreamProps {
+  avatar?: string;
+  username?: string;
+  visible?: boolean;
+  isSmall?: boolean;
+  isVideoAvailable?: boolean;
+  userId?: string;
+  classnames?: string;
+}
+
+export default function MediaContainer() {
+  const { remoteList, localUserInfo } = useContext(UserInfoContext);
+  const { callType, callStatus, isFloat } = useContext(CallInfoContext);
+  const [largeViewName, setLargeViewName] = useGetLargeViewName();
+  const isAudioCall = useMemo(() => callType === CallMediaType.AUDIO, [callType]);
+  const [showSmallWindow, setShowSmallWindow] = useState(false);
+
+  useEffect(() => {
+    if (remoteList?.[0]?.isEnter) {
+      if (!isAudioCall) {
+        setShowSmallWindow(true);
+      } else {
+        setShowSmallWindow(false);
+      }
+    }
+  }, [remoteList, isAudioCall]);
+
+  function renderAudioStream(props: IRenderAudioStreamProps) {
+    return <AudioStream {...props} />;
+  }
+
+  const attachId = useMemo(() => {
+    if (isFloat) {
+      return '#float';
+    }
+
+    return '#single-container';
+  }, [isFloat]);
+
+  const showPusherStreamInfo = TUIGlobal.isPC
+    && callStatus === CallStatus.CONNECTED
+    && !isAudioCall
+    && !isFloat;
+  const classnames = classNames([
+    mediaContainerStyle['single-stream-container'],
+    {
+      [mediaContainerStyle.mobile]: !TUIGlobal.isPC,
+      [mediaContainerStyle.pc]: TUIGlobal.isPC,
+      [mediaContainerStyle.float]: isFloat,
+    },
+  ]);
+
+  return (
+    <div id='single-container' className={classnames}>
+      <Portal attach={attachId} style={{ width: '100%', height: '100%', position: 'relative' }}>
+        <ToggleWindow
+          isMobile={!TUIGlobal.isPC}
+          bigWindow={largeViewName}
+          showSmallWindow={showSmallWindow}
+          onToggle={setLargeViewName}
+        >
+          <ToggleWindowItem key={ViewName.LOCAL} value={ViewName.LOCAL}>
+            <Pusher
+              loading={
+                callStatus === CallStatus.CALLING
+                && (callType === CallMediaType.VIDEO ? !localUserInfo?.isVideoAvailable : true)
+              }
+              renderAudioStream={() => renderAudioStream({
+                isVideoAvailable: localUserInfo.isVideoAvailable,
+                avatar: isAudioCall ? remoteList?.[0]?.avatar : localUserInfo.avatar,
+                username: isAudioCall
+                  ? remoteList?.[0]?.displayUserInfo
+                  : (localUserInfo.nick || localUserInfo.userId),
+                isSmall: largeViewName !== ViewName.LOCAL,
+                userId: isAudioCall ? remoteList?.[0]?.userId : localUserInfo.userId,
+                classnames: mediaContainerStyle['single-call-audio-stream'],
+              })}
+              showStreamInfo={showPusherStreamInfo}
+            />
+          </ToggleWindowItem>
+          <ToggleWindowItem
+            key={ViewName.REMOTE}
+            value={ViewName.REMOTE}
+            className={mediaContainerStyle.remote}
+          >
+            {remoteList.length !== 0 && callStatus === CallStatus.CONNECTED && (
+              <Player
+                renderAudioStream={(props) => renderAudioStream({
+                  isVideoAvailable: remoteList[0].isVideoAvailable,
+                  avatar: remoteList[0].avatar,
+                  username: remoteList[0].displayUserInfo,
+                  isSmall: largeViewName !== ViewName.REMOTE,
+                  userId: remoteList[0].userId,
+                  classnames: mediaContainerStyle['single-call-audio-stream'],
+                  ...props,
+                })}
+                showStreamInfo={TUIGlobal.isPC && !isAudioCall && !isFloat}
+                streamInfo={remoteList[0]}
+              />
+            )}
+          </ToggleWindowItem>
+        </ToggleWindow>
+      </Portal>
+    </div>
+  );
+}

package/src/Components/components/SingleCall/MediaContainer/hooks/useGetLargeViewName.ts

@@ -0,0 +1,29 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { CallInfoContext, CustomUIConfigContext, UserInfoContext } from '../../../../context';
+import { CallStatus, LayoutMode, ViewName } from '../../../../../TUICallService/const';
+
+export default function useGetLargeViewName() {
+  const { layoutMode } = useContext(CustomUIConfigContext);
+  const { remoteList } = useContext(UserInfoContext);
+  const { callStatus } = useContext(CallInfoContext);
+  const [largeViewName, setLargeViewName] = useState(ViewName.LOCAL);
+
+  useEffect(() => {
+    if (callStatus === CallStatus.CALLING) {
+      return;
+    }
+
+    const c2cLayoutModes = [LayoutMode.RemoteInLargeView, LayoutMode.LocalInLargeView];
+    if (c2cLayoutModes.includes(layoutMode)) {
+      // @ts-ignore
+      setLargeViewName(layoutMode);
+      return;
+    }
+
+    if (remoteList?.[0]?.isEnter) {
+      setLargeViewName(ViewName.REMOTE);
+    }
+  }, [remoteList, layoutMode, callStatus]);
+
+  return [largeViewName, setLargeViewName] as const;
+}

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

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

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

@@ -0,0 +1,28 @@
+.single-container {
+  width: 100%;
+  height: 100%;
+  .singlecall-tip {
+    position: absolute;
+    top: 56%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 5;
+  }
+  &.mobile {
+    animation: pulldown 0.5s linear;
+
+    .singlecall-tip {
+      position: absolute;
+      max-width: 80%;
+      top: 53.6vh;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 5;
+    }
+  }
+}
+
+@keyframes pulldown {
+  from {transform: translateY(-100%)}
+  to {transform: translateY(0%)}
+}

package/src/Components/components/SingleCall/SingleCall.tsx

@@ -0,0 +1,54 @@
+import React, { useContext } from 'react';
+import { CallStatus, TUIGlobal } from '../../../TUICallService';
+import TopBar from '../common/TopBar/TopBar';
+import ButtonPanel from '../common/ButtonPanel';
+import Waiting from './Waiting/Waiting';
+import { CallInfoContext, UserInfoContext } from '../../context';
+import MediaContainer from './MediaContainer';
+import { classNames } from '../../util/classnames';
+import Tip from '../common/Tip/Tip';
+import singleCallStyle from './SingleCall.module.scss';
+
+const SingleCall = React.memo(() => {
+  const { remoteList } = useContext(UserInfoContext);
+  const { callRole, callStatus, isFloat } = useContext(CallInfoContext);
+  const classnames = classNames([
+    singleCallStyle['single-container'],
+    { [singleCallStyle.mobile]: !TUIGlobal.isPC },
+  ]);
+
+  const renderTopBar = () => {
+    if (!isFloat) {
+      return <TopBar />;
+    }
+  };
+  const renderWaiting = () => {
+    if (callStatus === CallStatus.CALLING && !isFloat) {
+      return (
+        <Waiting
+          avatar={remoteList?.[0]?.avatar}
+          username={remoteList?.[0]?.displayUserInfo}
+          callRole={callRole}
+          userId={remoteList?.[0]?.userId}
+        />
+      );
+    }
+  };
+  const renderButtonPanel = () => {
+    if (!isFloat) {
+      return <ButtonPanel />;
+    }
+  };
+
+  return (
+    <div className={classnames}>
+      {renderTopBar()}
+      {renderWaiting()}
+      <MediaContainer />
+      <Tip className={singleCallStyle['singlecall-tip']} />
+      {renderButtonPanel()}
+    </div>
+  );
+});
+
+export default SingleCall;

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

@@ -0,0 +1,3 @@
+.singlecall-waiting-container {
+  z-index: 1;
+}

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

@@ -0,0 +1,45 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { CallRole, TUIGlobal } from '../../../../TUICallService';
+import OverlayStream from '../../common/OverlayStream/OverlayStream';
+import { UserInfoContext } from '../../../context';
+import defaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
+import useViewBackgroundConfig from '../../../hooks/useViewBackgroundConfig';
+import waitingStyle from './Waiting.module.scss';
+
+interface IWaitingProps {
+  avatar?: string;
+  username?: string;
+  callRole?: CallRole;
+  userId?: string;
+}
+type TObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+
+export default function Waiting(props: IWaitingProps) {
+  const { avatar, username, userId } = props;
+  const { localUserInfo } = useContext(UserInfoContext);
+  const viewBackgroundConfigObj = useViewBackgroundConfig();
+  const [background, setBackground] = useState(viewBackgroundConfigObj[userId] || avatar);
+  const [showOverlayer, setShowOverlayer] = useState(!viewBackgroundConfigObj[userId]);
+  const [fit, setFit] = useState<TObjectFit>(viewBackgroundConfigObj[userId] ? 'fill' : 'cover');
+
+  useEffect(() => {
+    setBackground(viewBackgroundConfigObj[userId] || avatar || defaultAvatarSrc);
+    setShowOverlayer(!localUserInfo.isVideoAvailable && !viewBackgroundConfigObj[userId]);
+    setFit(viewBackgroundConfigObj[userId] ? 'fill' : 'cover');
+  }, [viewBackgroundConfigObj, userId]);
+
+  return (
+    <OverlayStream
+      className={waitingStyle['singlecall-waiting-container']}
+      showLoading={false}
+      avatar={avatar || defaultAvatarSrc}
+      username={username}
+      showAvatar={!TUIGlobal.isPC}
+      background={background}
+      showBackground={!localUserInfo.isVideoAvailable}
+      isMobile={!TUIGlobal.isPC}
+      showOverlayer={showOverlayer}
+      fit={fit}
+    />
+  );
+}

package/src/Components/components/base/Avatar/Avatar.scss

@@ -0,0 +1,28 @@
+@use '../../../style/theme/util' as *;
+@import '../../../style/common/var.scss';
+
+.#{$prefix}-avatar-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0px;
+  padding: 0;
+  overflow: hidden;
+  @include theme() {
+    background-color: get(white-1);
+  }
+
+  &.#{$prefix}-avatar-shape-round {
+    border-radius: 6px;
+  }
+
+  &.#{$prefix}-avatar-shape-circle {
+    border-radius: 50%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
+}

package/src/Components/components/base/Avatar/Avatar.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+import { classNames } from '../../../util/classnames';
+import { classPrefix } from '../../../const/common';
+import DefaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
+import './Avatar.scss';
+
+interface IAvatarProps {
+  shape?: 'round' | 'circle';
+  image?: string;
+  icon?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  style?: object;
+}
+
+export default function Avatar(props: IAvatarProps) {
+  const {
+    shape = 'round',
+    image,
+    icon,
+    children,
+    className,
+    style,
+  } = props;
+
+  const setDefaultImg = (e) => {
+    e.target.src = DefaultAvatarSrc;
+  };
+
+  const renderContent = () => {
+    if (typeof image === 'string') {
+      return <img src={image} onError={setDefaultImg} />;
+    }
+    if (icon) {
+      return icon;
+    }
+
+    return children;
+  };
+
+  const classnames = classNames([
+    className,
+    `${classPrefix}-avatar-container`,
+    `${classPrefix}-avatar-shape-${shape}`,
+  ]);
+
+  return (
+    <div className={classnames} style={style}>
+      {renderContent()}
+    </div>
+  );
+}

package/src/Components/components/base/Avatar/index.ts

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

package/src/Components/components/base/Button/Button.scss

@@ -0,0 +1,122 @@
+@use "../../../style/theme/util" as *;
+@import '../../../style/common/var.scss';
+@import '../../../style/common/mixin.scss';
+
+// size
+$btn-height-s: 36px;
+$btn-height-m: 40px;
+$btn-height-l: 60px;
+$btn-height-auto: auto;
+
+// Font size
+$btn-font-large: $font-size-l;
+$btn-font-middle: $font-size-base;
+$btn-font-small: $font-size-base;
+
+// icon size
+$btn-icon-size-s: $font-size-base;
+$btn-icon-size-m: $font-size-l;
+$btn-icon-size-l: $font-size-xl;
+
+.#{$prefix}-btn-container {
+  display: flex;
+  @include theme() {
+    color: get(white-2);
+  }
+  transition-property: width,height,left,top;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+
+  &.pc {
+    cursor: pointer;
+  }
+
+  &.#{$prefix}-flex-vertical {
+    flex-direction: column;
+    align-items: center;
+
+    &.#{$prefix}-size-s {
+      &.pc {
+        @include button-size($btn-height-auto, $btn-font-small, 20px, 0);
+      }
+      &.mobile {
+        @include button-size($btn-height-auto, $btn-font-small, 40px, 0);
+      }
+    }
+
+    &.#{$prefix}-size-m {
+      &.pc {
+        @include button-size($btn-height-auto, $btn-font-small, 60px, 0);
+        .#{$prefix}-icon {
+          width: 40px;
+          height: 40px;
+        }
+      }
+      &.mobile {
+        @include button-size($btn-height-auto, $btn-font-small, 60px, 0);
+        .#{$prefix}-icon {
+          width: 60px;
+          height: 60px;
+        }
+      }
+    }
+
+    &.#{$prefix}-size-l {
+      &.pc {
+        @include button-size($btn-height-auto, $btn-font-small, 60px, 0);
+      }
+      &.mobile {
+        @include button-size($btn-height-auto, $btn-font-small, 80px, 0);
+      }
+    }
+  }
+
+  &.#{$prefix}-flex-horizontal {
+    flex-direction: row;
+    align-items: center;
+
+    &.#{$prefix}-size-s {
+      @include button-size($btn-height-s, $btn-font-small, $btn-icon-size-s, 0);
+    }
+
+    &.#{$prefix}-size-m {
+      @include button-size($btn-height-m, $btn-font-middle, $btn-icon-size-m, 0);
+    }
+
+    &.#{$prefix}-size-l {
+      @include button-size($btn-height-l, $btn-font-middle, $btn-icon-size-l, 0);
+    }
+  }
+
+  &.#{$prefix}-ghost {
+    background: none;
+  }
+
+  .#{$prefix}-content {
+    margin-top: 8px;
+    text-align: center;
+    line-height: 15px;
+    font-style: normal;
+    font-weight: 400;
+    max-height: 30px;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  .#{$prefix}-icon {
+    transition-property: width,height,left,top;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in;
+    &.#{$prefix}-size-s {
+      @include button-size($btn-height-s, $btn-font-small, $btn-icon-size-s, 0);
+    }
+
+    &.#{$prefix}-size-m {
+      @include button-size($btn-height-m, $btn-font-middle, $btn-icon-size-m, 0);
+    }
+
+    &.#{$prefix}-size-l {
+      @include button-size($btn-height-l, $btn-font-middle, $btn-icon-size-l, 0);
+    }
+  }
+}