@trtc/calls-uikit-react 4.1.0

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

@@ -0,0 +1,117 @@
+@use "../../../../../style/theme/util" as *;
+
+.floating-window-h5-singlecall-container {
+  width: 110px;
+  height: 196px;
+  top: 100px;
+  right: 0;
+  display: flex;
+  z-index: 99;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 12px;
+  overflow: hidden;
+  
+  @include theme() {
+    background-color: get(floating-color-default);
+    border: 1px solid get(floating-color-default);
+    box-shadow: 0px 0px 10px 0px get(black-8);
+  }
+
+  &.audio-call {
+    width: 72px;
+    height: 72px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    @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 {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    padding: 8px 18px 8px 18px;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    position: relative;
+    box-sizing: border-box;
+
+    &.video {
+      padding: 8px;
+    }
+
+    .info {
+      @include theme() {
+        color: get(white-1);
+      }
+      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;
+    }
+
+    .video-stream {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      z-index: 0;
+    
+      &.hidden {
+        visibility: hidden;
+      }
+    }
+
+    .audio-stream {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    
+      .info {
+        @include theme() {
+          color: get(text-color-success);
+        }
+      }
+    }
+
+    .earphone {
+      height: 36px;
+      width: 36px;
+      position: absolute;
+      top: 8px;
+    }
+  }
+  
+  .tip {
+    position: absolute;
+    bottom: 0;
+  }
+}

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

@@ -0,0 +1,123 @@
+@use "../../../../../style/theme/util" as *;
+
+.floating-window-pc-singlecall-container {
+  width: 196px;
+  height: 110px;
+  top: 100px;
+  right: 10px;
+  display: flex;
+  z-index: 99;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 12px;
+  overflow: hidden;
+  
+  @include theme() {
+    box-shadow: 0px 0px 10px 0px get(black-8);
+    background-color: get(floating-color-default);
+    border: 1px solid get(floating-color-default);
+  }
+
+  &.audio-call {
+    width: 72px;
+    height: 72px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    @include theme() {
+      box-shadow: 0px 0px 10px 0px get(black-8);
+      background-color: get(floating-color-default);
+    }
+  }
+
+  .click-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    z-index: 11;
+  }
+
+  .call-status {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    padding: 8px 18px 8px 18px;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    position: relative;
+    box-sizing: border-box;
+
+    &.video {
+      padding: 8px;
+    }
+
+    .info {
+      @include theme() {
+        color: get(white-1);
+      }
+      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;
+    }
+
+    .video-stream {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      z-index: 0;
+    
+      &.hidden {
+        visibility: hidden;
+      }
+
+      :global(.tk-togglewindowitem-small) {
+        border-radius: 3px;
+        width: 32%;
+        height: 31%;
+      }
+    }
+
+    .audio-stream {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    
+      .info {
+        @include theme() {
+          color: get(text-color-success);
+        }
+      }
+    }
+
+    .earphone {
+      height: 36px;
+      width: 36px;
+      position: absolute;
+      top: 8px;
+    }
+  }
+
+  .tip {
+    position: absolute;
+    bottom: 0;
+  }
+}

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

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

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

@@ -0,0 +1,9 @@
+.microphone-container {
+  height: 20px;
+  width: 20px;
+  flex-shrink: 0;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,50 @@
+import React, { CSSProperties } from 'react';
+import Icon from '../../base/Icon/Icon';
+import MicVolumnClose from '../../../assets/common/microphone-volumn-close.svg';
+import microphoneVolumnStyle from './MicrophoneVolumn.module.scss';
+
+interface IMicrophoneVolumnProps {
+  close?: boolean;
+  volume?: number;
+  style?: CSSProperties;
+}
+
+export default function MicrophoneVolumn(props: IMicrophoneVolumnProps) {
+  const { close, style = {}, volume = 0 } = props;
+  const renderClosed = () => <Icon url={MicVolumnClose} />;
+  const renderOpend = () => (
+    <svg xmlns='http://www.w3.org/2000/svg' fill='none' className='' viewBox='0 0 16 16'>
+      <g>
+        {volume > 0 && (
+        <path
+          d='M8.62462 7.17395C8.90076 7.17395 9.12462 7.38807 9.12462 7.65221C9.12462 7.89434 8.93651 8.09444 8.69246 8.12611L8.62462 8.13047H7.3335C7.05735 8.13047 6.8335 7.91635 6.8335 7.65221C6.8335 7.41009 7.0216 7.20998 7.26565 7.17832L7.3335 7.17395H8.62462Z'
+          fill='#43D92B'
+        />
+        )}
+        {volume > 5 && (
+        <path
+          d='M8.62462 5.57971C8.90076 5.57971 9.12462 5.79384 9.12462 6.05797C9.12462 6.3001 8.93651 6.5002 8.69246 6.53187L8.62462 6.53623H7.3335C7.05735 6.53623 6.8335 6.32211 6.8335 6.05797C6.8335 5.81585 7.0216 5.61575 7.26565 5.58408L7.3335 5.57971H8.62462Z'
+          fill='#43D92B'
+        />
+        )}
+        {volume > 10 && (
+        <path
+          d='M8.62462 3.98547C8.90076 3.98547 9.12462 4.1996 9.12462 4.46373C9.12462 4.70586 8.93651 4.90596 8.69246 4.93763L8.62462 4.942H7.3335C7.05735 4.942 6.8335 4.72787 6.8335 4.46373C6.8335 4.22161 7.0216 4.02151 7.26565 3.98984L7.3335 3.98547H8.62462Z'
+          fill='#43D92B'
+        />
+        )}
+      </g>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M11.3301 3.45938C11.2517 1.89175 9.77808 0.658081 8 0.658081C6.17253 0.658081 4.66667 1.96123 4.66667 3.59077V7.72539L4.66994 7.85678C4.7483 9.42442 6.22192 10.6581 8 10.6581C9.82747 10.6581 11.3333 9.35493 11.3333 7.72539V3.59077L11.3301 3.45938ZM6.0035 3.54179C6.06337 2.69234 6.92083 1.99146 8.00016 1.99146C9.11947 1.99146 10.0002 2.74521 10.0002 3.63675V7.67949L9.99682 7.77446C9.93695 8.62391 9.07949 9.32479 8.00016 9.32479C6.88086 9.32479 6.00016 8.57103 6.00016 7.67949V3.63675L6.0035 3.54179ZM8.33333 15.3333C8.51743 15.3333 8.66667 15.1841 8.66667 15V13.2964C11.5402 12.9793 14 10.6655 14 8.27322V7.68092C14 7.49682 13.8508 7.34758 13.6667 7.34758H13C12.8159 7.34758 12.6667 7.49682 12.6667 7.68092V8.27322L12.6634 8.39309C12.5681 10.1524 10.3982 11.9979 8.00396 12C8.00264 12 8.00132 12 8 12C7.99868 12 7.99736 12 7.99604 12C5.54737 11.9979 3.33333 10.0675 3.33333 8.27322L3.33043 7.65652C3.32956 7.47164 3.17839 7.32278 2.99352 7.32477L2.32975 7.33191C2.14706 7.33387 2 7.48252 2 7.66522V8.27322L2.00292 8.4162C2.09825 10.757 4.51708 12.9856 7.33333 13.2964V15C7.33333 15.1841 7.48257 15.3333 7.66667 15.3333H8.33333Z'
+        fill='#fff'
+      />
+    </svg>
+  );
+  return (
+    <div className={microphoneVolumnStyle['microphone-container']} style={style}>
+      {close ? renderClosed() : renderOpend()}
+    </div>
+  );
+}

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

@@ -0,0 +1,165 @@
+@use "../../../style/theme/util" as *;
+
+.overlay-stream-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+
+  .blur {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    position: absolute;
+    @include theme() {
+      :global(.overlay) {
+        background-color: get(black-3);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+      }
+    }
+  }
+
+  &.pc {
+    .user-info-container {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      
+      @include theme() {
+        color: get(white-1);
+      }
+
+      .avatar {
+        width: 100px;
+        height: 100px;
+
+        &.float {
+          width: 40px;
+          height: 40px;
+        }
+
+        &.small {
+          width: 40px;
+          height: 40px;
+
+          &.float {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+
+      .username {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+
+        .nick {
+          max-width: 50%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-align: center;
+          font-family: PingFang SC;
+          font-size: 40px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+          max-width: 50%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &.float {
+            font-size: 20px;
+          }
+  
+          &.small {
+            font-size: 20px;
+
+            &.float {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.mobile {
+    .user-info-container {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+      align-items: center;
+      top: 26%;
+      width: 100%;
+      z-index: 1;
+      
+      @include theme() {
+        color: get(white-1);
+      }
+
+      .avatar {
+        width: 100px;
+        height: 100px;
+
+        &.float {
+          width: 40px;
+          height: 40px;
+        }
+
+        &.small {
+          width: 40px;
+          height: 40px;
+
+          &.float {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+
+      .username {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+
+        .nick {
+          text-align: center;
+          // text-shadow: 0px 2px 4px rgba(15, 16, 20, 0.50);
+          margin-top: 12px;
+          font-family: PingFang SC;
+          font-size: 18px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+          max-width: 50%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+  
+          &.small {
+            font-size: 15px;
+          }
+        }
+      }
+
+      .tip {
+        margin-top: 12px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+import React, { CSSProperties, ReactNode, useContext } from 'react';
+import Overlayer from '../../base/Overlayer/Overlayer';
+import Avatar from '../../base/Avatar';
+import Loading from '../../base/Loading';
+import { CallInfoContext } from '../../../context';
+import { classNames } from '../../../util/classnames';
+import { TObjectFit } from '../../../const/common';
+import MicrophoneVolumn from '../MicrophoneVolumn/MicrophoneVolumn';
+import defaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
+import overlayStreamStyle from './OverlayStream.module.scss';
+
+interface IOverlayStreamProps {
+  avatar?: string;
+  username?: string;
+  isMobile?: boolean;
+  blur?: boolean;
+  showAvatar?: boolean;
+  showUsername?: boolean;
+  theme?: 'circle' | 'dot';
+  style?: CSSProperties;
+  showOverlayer?: boolean;
+  showLoading?: boolean;
+  showBackground?: boolean;
+  className?: string;
+  showVolumn?: boolean;
+  volume?: number;
+  isMute?: boolean;
+  tip?: string;
+  isSmall?: boolean;
+  showTip?: boolean;
+  children?: ReactNode;
+  background?: string;
+  fit?: TObjectFit;
+  onError?: (event?: object) => void;
+}
+
+export default function OverlayStream(props: IOverlayStreamProps) {
+  const {
+    avatar,
+    username,
+    isMobile,
+    isSmall,
+    blur = true,
+    theme = 'circle',
+    children,
+    className,
+    tip = '',
+    volume,
+    isMute = false,
+    showAvatar = true,
+    showUsername = true,
+    showOverlayer,
+    showBackground = true,
+    showLoading = true,
+    showVolumn = false,
+    style = {},
+    showTip = true,
+    background = '',
+    fit,
+    onError,
+  } = props;
+  const { isFloat } = useContext(CallInfoContext);
+  const classnames = classNames([
+    className,
+    overlayStreamStyle['overlay-stream-container'],
+    {
+      [overlayStreamStyle.mobile]: isMobile,
+      [overlayStreamStyle.pc]: !isMobile,
+    },
+  ]);
+
+  const handleImgError = (event) => {
+    onError?.(event);
+  };
+
+  return (
+    <div className={classnames} style={style}>
+      <Loading showLoading={showLoading} size={40} theme={theme} showOverlayer={false}>
+        <div className={overlayStreamStyle['user-info-container']}>
+          {showAvatar && (
+          <Avatar
+            className={classNames([
+              overlayStreamStyle.avatar,
+              {
+                [overlayStreamStyle.small]: isSmall,
+                [overlayStreamStyle.float]: isFloat,
+              },
+            ])}
+            image={avatar}
+          />
+          )}
+          {showUsername && (
+            <div className={overlayStreamStyle.username}>
+              <div className={classNames([
+                overlayStreamStyle.nick,
+                { [overlayStreamStyle.small]: isSmall, [overlayStreamStyle.float]: isFloat }])}
+              >
+                {username}
+              </div>
+              {showVolumn && <MicrophoneVolumn volume={volume} close={isMute} style={{ marginLeft: '10px' }} />}
+            </div>
+          )}
+          {showTip && <div className={overlayStreamStyle.tip}>{tip}</div>}
+          {children}
+        </div>
+        {showBackground && (
+          <Overlayer
+            showOverlayer={showOverlayer}
+            className={classNames({ [overlayStreamStyle.blur]: blur })}
+            background={background}
+            fit={fit}
+            defaultSrc={defaultAvatarSrc}
+            onError={handleImgError}
+          />
+        )}
+      </Loading>
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+@use "../../../style/theme/util" as *;
+
+.player-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  @include theme() {
+    background-color: get(white-6);
+  }
+}

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

@@ -0,0 +1,75 @@
+import React, { CSSProperties, useContext, useMemo } from 'react';
+import { IUserInfo } from '../../../../TUICallService/interface';
+import { TUIGlobal } from '../../../../TUICallService';
+import StreamInfo from '../StreamInfo';
+import { classNames } from '../../../util/classnames';
+import useGetVolumeMap from '../../../hooks/useGetVolumeMap';
+import { CallInfoContext } from '../../../context';
+import playerStyle from './Player.module.scss';
+
+interface IPlayer {
+  streamInfo?: IUserInfo;
+  style?: CSSProperties;
+  showStreamInfo?: boolean;
+  loading?: boolean;
+  renderLoading?: (params?: any) => any;
+  renderAudioStream?: (params?: any) => any;
+  className?: string;
+  isSpkear?: boolean;
+  isLargeView?: boolean;
+}
+
+export default function Player(props: IPlayer) {
+  const volumnMap = useGetVolumeMap();
+  const { isGroupCall } = useContext(CallInfoContext);
+  const {
+    streamInfo = {},
+    showStreamInfo = true,
+    isSpkear,
+    style,
+    renderAudioStream,
+    className,
+    loading,
+    renderLoading,
+    isLargeView = false,
+  } = props;
+  const {
+    domId,
+    isAudioAvailable,
+    displayUserInfo,
+  } = streamInfo as IUserInfo;
+
+  const classnames = classNames([
+    className,
+    playerStyle['player-container'],
+  ]);
+
+  const showUserName = useMemo(() => {
+    if (isGroupCall) {
+      return TUIGlobal.isPC
+        ? true
+        : !!isLargeView;
+    }
+
+    return false;
+  }, [isLargeView, isGroupCall]);
+
+  return (
+    <div id={domId} style={style} className={classnames}>
+      {!loading && renderAudioStream?.({
+        volume: volumnMap[domId],
+        isMute: !isAudioAvailable,
+      })}
+      {loading && renderLoading?.()}
+      {showStreamInfo && (
+        <StreamInfo
+          volume={volumnMap[domId]}
+          isSpkear={isSpkear}
+          isMute={!isAudioAvailable}
+          displayName={displayUserInfo}
+          showUserName={showUserName}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+@use "../../../style/theme/util" as *;
+
+.pusher-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  @include theme() {
+    background-color: get(white-6);
+  }
+}