@trtc/calls-uikit-react 4.1.0

package/src/Components/TUICallKit/TUICallKit.tsx

@@ -0,0 +1,267 @@
+import React, {
+  useState, useEffect, CSSProperties, useMemo, useLayoutEffect,
+} from 'react';
+import {
+  TUIGlobal,
+  TUIStore,
+  StoreName,
+  NAME,
+  CallStatus,
+  TUICallKitAPI,
+  CallMediaType,
+  VideoDisplayMode,
+  VideoResolution,
+} from '../../TUICallService';
+import SingleCall from '../components/SingleCall/SingleCall';
+import GroupCall from '../components/GroupCall/GroupCall';
+import { classNames } from '../util/classnames';
+import {
+  CallInfoContext,
+  UserInfoContext,
+  CallerUserInfoContext,
+  CustomUIConfigContext,
+  TranslateContext,
+} from '../context';
+import { MessagePlugin } from '../components/base/Message/MessagePlugin';
+import FloatingWindow from '../components/common/FloatingWindow';
+import useGetSpeakers from '../hooks/useGetSpeakers';
+import TUICallKitStyle from './TUICallKit.module.scss';
+import Portal from '../components/base/Portal/Portal';
+
+interface ITUICallKitProps {
+  style?: CSSProperties;
+  className?: string;
+  allowedMinimized?: boolean;
+  allowedFullScreen?: boolean;
+  videoDisplayMode?: VideoDisplayMode;
+  videoResolution?: VideoResolution;
+  beforeCalling?: any;
+  afterCalling?: any;
+  onMinimized?: any;
+}
+
+export default function TUICallKit(props: ITUICallKitProps) {
+  const {
+    style,
+    className,
+    allowedMinimized = true,
+    allowedFullScreen = true,
+    videoDisplayMode = VideoDisplayMode.COVER,
+    videoResolution = VideoResolution.RESOLUTION_720P,
+    beforeCalling,
+    afterCalling,
+    onMinimized,
+  } = props;
+  const [callStatus, setCallStatus] = useState(TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
+  const [isGroupCall, setIsGroupCall] = useState(TUIStore.getData(StoreName.CALL, NAME.IS_GROUP));
+  const [
+    callerUserInfo,
+    setCallerUserInfo,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.CALLER_USER_INFO));
+  const [
+    localUserInfo,
+    setLocalUserInfo,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO));
+  const [
+    remoteList,
+    setRemoteList,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST));
+  const [callType, setCallType] = useState(TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE));
+  const [callRole, setCallRole] = useState(TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE));
+  const [isEarPhone, setIsEarPhone] = useState(TUIStore.getData(StoreName.CALL, NAME.IS_EAR_PHONE));
+  const [isFloat, setIsFloat] = useState(false);
+  const [
+    enableVirtualBackground,
+    setEnableVirtualBackground,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.ENABLE_VIRTUAL_BACKGROUND));
+  const [
+    isShowEnableVirtualBackground,
+    setIsShowEnableVirtualBackground,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.IS_SHOW_ENABLE_VIRTUAL_BACKGROUND));
+  const [
+    isMuteSpeaker,
+    setIsMuteSpeaker,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.IS_MUTE_SPEAKER));
+  const speakerIdList = useGetSpeakers();
+  const callInfoContextValue = useMemo(() => ({
+    callStatus,
+    callRole,
+    callType,
+    isEarPhone,
+    isGroupCall,
+    isFloat,
+    allowedMinimized,
+    allowedFullScreen,
+    enableVirtualBackground,
+    isShowEnableVirtualBackground,
+    isMuteSpeaker,
+  }), [
+    callStatus,
+    callRole,
+    callType,
+    isEarPhone,
+    isGroupCall,
+    isFloat,
+    allowedFullScreen,
+    enableVirtualBackground,
+    isShowEnableVirtualBackground,
+    isMuteSpeaker,
+  ]);
+  const UserInfoContextValue = useMemo(() => ({
+    localUserInfo,
+    remoteList,
+  }), [localUserInfo, remoteList]);
+  const [
+    customUIConfigContextValue,
+    setCustomUIConfigContextValue,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.CUSTOM_UI_CONFIG));
+  const [translateContextValue, setTranslateContextValue] = useState({ t: TUIStore.getData(StoreName.CALL, NAME.TRANSLATE) });
+  const classnames = classNames([
+    className,
+    TUICallKitStyle['tuicallkit-container'],
+    {
+      [TUICallKitStyle.mobile]: !TUIGlobal.isPC,
+      [TUICallKitStyle.float]: isFloat,
+    },
+  ]);
+
+  const handleCallStatusChange = (value) => {
+    setCallStatus(value);
+  };
+  const handleIsGroupChange = (value) => {
+    setIsGroupCall(value);
+  };
+  const handleCallerUserInfoChange = (value) => {
+    setCallerUserInfo(value);
+  };
+  const handleLocalUserInfoChange = (value) => {
+    setLocalUserInfo(value);
+  };
+  const handleRemoteUserInfoListChange = (value) => {
+    setRemoteList(value);
+  };
+  const handleCallMediaTypeChange = (value) => {
+    setCallType(value);
+  };
+  const handleCallRoleChange = (value) => {
+    setCallRole(value);
+  };
+  const handEarPhoneChange = (value) => {
+    setIsEarPhone(value);
+  };
+
+  const handleToastInfoChange = (value) => {
+    const { content, type = 'info' } = value || {};
+    if (content) {
+      MessagePlugin[type]({ content: translateContextValue?.t?.(content) });
+    }
+  };
+  const handleIsMinizedChange = (value) => {
+    setIsFloat(value);
+  };
+  const handleEnableVirtualBackgroundChange = (value) => {
+    setEnableVirtualBackground(value);
+  };
+  const handleIsShowEnableVirtualBackgroundChange = (value) => {
+    setIsShowEnableVirtualBackground(value);
+  };
+  const handleCustomUIConfigChange = (value) => {
+    setCustomUIConfigContextValue(value);
+  };
+  const handleMuteSpeakerChange = (value) => {
+    setIsMuteSpeaker(value);
+  };
+  const handleTranslateChange = (value) => {
+    setTranslateContextValue({ t: value });
+  }
+
+  const watchOptions = {
+    [NAME.CALL_STATUS]: handleCallStatusChange,
+    [NAME.IS_GROUP]: handleIsGroupChange,
+    [NAME.CALLER_USER_INFO]: handleCallerUserInfoChange,
+    [NAME.LOCAL_USER_INFO_EXCLUDE_VOLUMN]: handleLocalUserInfoChange,
+    [NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST]: handleRemoteUserInfoListChange,
+    [NAME.CALL_MEDIA_TYPE]: handleCallMediaTypeChange,
+    [NAME.CALL_ROLE]: handleCallRoleChange,
+    [NAME.IS_EAR_PHONE]: handEarPhoneChange,
+    [NAME.TOAST_INFO]: handleToastInfoChange,
+    [NAME.CUSTOM_UI_CONFIG]: handleCustomUIConfigChange,
+    [NAME.ENABLE_VIRTUAL_BACKGROUND]: handleEnableVirtualBackgroundChange,
+    [NAME.IS_SHOW_ENABLE_VIRTUAL_BACKGROUND]: handleIsShowEnableVirtualBackgroundChange,
+    [NAME.IS_MUTE_SPEAKER]: handleMuteSpeakerChange,
+    [NAME.TRANSLATE]: handleTranslateChange,
+  };
+
+  useLayoutEffect(() => {
+    const uikitTheme = document.documentElement.dataset?.uikitTheme;
+    if (['light', 'dark'].indexOf(uikitTheme) === -1) {
+      document.documentElement.dataset.uikitTheme = 'light';
+    }
+  }, []);
+
+  useEffect(() => {
+    TUIStore.watch(
+      StoreName.CALL,
+      watchOptions,
+      {
+        notifyRangeWhenWatch: NAME.MYSELF,
+      },
+    );
+
+    TUIStore.watch(StoreName.CALL, {
+      [NAME.IS_MINIMIZED]: handleIsMinizedChange,
+    });
+
+    return () => {
+      TUIStore.unwatch(
+        StoreName.CALL,
+        { ...watchOptions, [NAME.IS_MINIMIZED]: handleIsMinizedChange },
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    TUICallKitAPI.enableFloatWindow(allowedMinimized);
+    TUICallKitAPI.setVideoDisplayMode(videoDisplayMode as any);
+    TUICallKitAPI.setVideoResolution(videoResolution as any);
+    TUICallKitAPI.setCallback({
+      beforeCalling,
+      afterCalling,
+      onMinimized,
+    });
+  }, [
+    beforeCalling,
+    afterCalling,
+    TUICallKitAPI,
+    videoDisplayMode,
+    videoResolution,
+    allowedMinimized,
+    onMinimized,
+  ]);
+
+  return callStatus !== CallStatus.IDLE && (
+    <UserInfoContext.Provider value={UserInfoContextValue}>
+      <CallerUserInfoContext.Provider value={callerUserInfo}>
+        <CallInfoContext.Provider value={callInfoContextValue}>
+          <CustomUIConfigContext.Provider value={customUIConfigContextValue}>
+            <TranslateContext.Provider value={translateContextValue}>
+              <div style={{ ...style }} className={classnames} id='tuicallkit-id'>
+                {!isGroupCall && <SingleCall />}
+                {isGroupCall && <GroupCall />}
+              </div>
+              <Portal attach="body">
+                <FloatingWindow
+                  show={isFloat}
+                  hasVideo={isGroupCall
+                    ? speakerIdList.length !== 0
+                    : callType === CallMediaType.VIDEO}
+                  isAudioAvailable={localUserInfo.isAudioAvailable}
+                />
+              </Portal>
+            </TranslateContext.Provider>
+          </CustomUIConfigContext.Provider>
+        </CallInfoContext.Provider>
+      </CallerUserInfoContext.Provider>
+    </UserInfoContext.Provider>
+  );
+}

package/src/Components/TUICallKit/index.ts

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

package/src/Components/assets/base/close.svg

@@ -0,0 +1 @@
+<svg t="1700123766247" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8282" width="32" height="32"><path d="M557.2 512l233.4-233.4c12.5-12.5 12.5-32.8 0-45.2s-32.8-12.5-45.2 0L512 466.8 278.6 233.4c-12.5-12.5-32.8-12.5-45.2 0s-12.5 32.8 0 45.2L466.8 512 233.4 745.4c-12.5 12.5-12.5 32.8 0 45.2 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4L512 557.2l233.4 233.4c6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4c12.5-12.5 12.5-32.8 0-45.2L557.2 512z" p-id="8283"></path></svg>

package/src/Components/assets/base/error.svg

@@ -0,0 +1 @@
+<svg t="1700123349738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6300" width="32" height="32"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m129.29219 233.447619l-129.267809 129.29219-129.316571-129.29219-51.736381 51.736381 129.316571 129.267809-129.316571 129.316571 51.736381 51.736381L512 563.687619l129.29219 129.316571 51.736381-51.73638L563.687619 512l129.316571-129.29219-51.73638-51.736381z" p-id="6301" fill="#d54941"></path></svg>

package/src/Components/assets/base/info.svg

@@ -0,0 +1 @@
+<svg t="1700123274686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5050" width="32" height="32"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m36.571429 341.333333h-73.142858v292.571428h73.142858V438.857143z m0-121.904762h-73.142858v73.142857h73.142858v-73.142857z" p-id="5051" fill="#0052d9"></path></svg>

package/src/Components/assets/base/loading-circle.svg

@@ -0,0 +1 @@
+<svg t="1700054633241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5767" width="64" height="64"><path d="M520.665099 64.564131a29.244341 29.244341 0 0 0-7.071394-0.894196c-16.210984 0-29.350001 13.140974-29.350001 29.35 0 15.829434 12.53832 28.696474 28.222961 29.293258v0.072396c0.37568 0 0.75136-0.013697 1.12704-0.013696 216.493432 0 389.629086 173.941801 389.629086 390.433275 0 216.495388-173.135654 388.826852-389.629086 388.826853s-389.631042-172.333421-389.631042-388.828809c0-0.27002 0.009783-0.536127 0.009783-0.80419h-0.009783c0-16.209027-13.140974-29.350001-29.350001-29.350001s-29.350001 13.139017-29.350001 29.350001c0 0.054787 0.007827 0.109573 0.007827 0.16436-0.001957 0.213277-0.007827 0.424597-0.007827 0.63983 0 247.608346 200.722698 448.331044 448.331044 448.331043 247.606389 0 448.329087-200.722698 448.329087-448.331043-0.001957-245.240779-196.916981-444.454887-441.257693-448.239081z" fill="#ffffff" p-id="5768"></path></svg>

package/src/Components/assets/base/success.svg

@@ -0,0 +1 @@
+<svg t="1700121539788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4018" width="200" height="200"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m193.194667 218.331428L447.21981 581.315048l-103.936-107.812572-52.662858 50.761143 156.379429 162.230857 310.662095-319.683047-52.467809-50.956191z" p-id="4019" fill="#2ba471"></path></svg>

package/src/Components/assets/base/waring.svg

@@ -0,0 +1 @@
+<svg t="1700123274686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5050" width="32" height="32"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m36.571429 341.333333h-73.142858v292.571428h73.142858V438.857143z m0-121.904762h-73.142858v73.142857h73.142858v-73.142857z" p-id="5051" fill="#e37318"></path></svg>

package/src/Components/assets/button/accept.svg

@@ -0,0 +1,10 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_22_1697)">
+<path d="M4.16182 5.67699C2.58049 7.25832 1.96718 9.60805 2.87395 11.6523C4.44977 15.2049 6.69399 18.5328 9.6066 21.4454C12.5192 24.358 15.8471 26.6022 19.3997 28.1781C21.444 29.0848 23.7937 28.4715 25.375 26.8902L27.9183 24.3469C28.5319 23.7333 28.4984 22.7288 27.8454 22.1574L23.0371 17.9501C22.4428 17.4301 21.5471 17.4599 20.9887 18.0183L18.8577 20.1493C18.6084 20.3986 18.2184 20.4415 17.9262 20.2443C16.5505 19.3161 15.2434 18.2433 14.026 17.026C12.8087 15.8086 11.7359 14.5015 10.8077 13.1258C10.6105 12.8336 10.6534 12.4436 10.9027 12.1943L13.0337 10.0633C13.5921 9.50494 13.6219 8.60923 13.1019 8.01493L8.89464 3.2066C8.32325 2.55359 7.31867 2.52014 6.70511 3.1337L4.16182 5.67699Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_22_1697">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Components/assets/button/backgroundBlurClose.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2C1 1.44772 1.44772 1 2 1H26C26.5523 1 27 1.44772 27 2V26C27 26.5523 26.5523 27 26 27H2C1.44772 27 1 26.5523 1 26V2ZM15.6528 16.8013C17.1385 16.1608 18.1786 14.683 18.1786 12.9624C18.1786 10.6546 16.3078 8.7838 14 8.7838C11.6922 8.7838 9.82143 10.6546 9.82143 12.9624C9.82143 14.683 10.8615 16.1608 12.3472 16.8013H12.1429C9.06584 16.8013 6.57143 19.2957 6.57143 22.3728V24.6228C6.57143 25.175 7.01914 25.6228 7.57143 25.6228H20.4286C20.9809 25.6228 21.4286 25.175 21.4286 24.6228V22.3728C21.4286 19.2957 18.9342 16.8013 15.8571 16.8013H15.6528ZM2.39286 7.62094L7.62094 2.39286H9.85337L2.39286 9.85337V7.62094ZM2.39286 15.751V13.5185L13.5185 2.39286H15.751L2.39286 15.751ZM2.39286 21.6486V19.4161L7.85185 13.9571C7.91394 14.583 8.0694 15.1811 8.30396 15.7375L2.39286 21.6486ZM16.3978 7.64363C15.8412 7.40904 15.243 7.25365 14.6174 7.19157L19.4161 2.39286H21.6486L16.3978 7.64363ZM2.83951 24.8671L4.57139 23.1352V25.0001C4.57139 25.1176 4.57815 25.2336 4.59131 25.3477L4.33274 25.6063C3.73014 25.5885 3.19445 25.3041 2.83951 24.8671ZM18.5485 9.15806C18.9099 9.55094 19.221 9.99075 19.4717 10.4673L25.6063 4.33274C25.5885 3.73014 25.3041 3.19445 24.8671 2.83951L18.5485 9.15806ZM19.5184 16.1212C19.5606 16.1445 19.6025 16.1682 19.6442 16.1924L25.6071 10.2294V7.997L20.1779 13.4262C20.1646 14.3952 19.9283 15.3097 19.5184 16.1212ZM21.6396 17.8621C21.9852 18.2706 22.2883 18.7162 22.5421 19.192L25.6071 16.127V13.8946L21.6396 17.8621ZM23.4285 22.7501V24.2032L25.6071 22.0246V19.7922L23.3925 22.0068C23.4163 22.2513 23.4285 22.4993 23.4285 22.7501Z" fill="white"/>
+</svg>

package/src/Components/assets/button/backgroundBlurOpen.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447716 0.447715 0 1 0H25C25.5523 0 26 0.447715 26 1V25C26 25.5523 25.5523 26 25 26H1C0.447716 26 0 25.5523 0 25V1ZM13 14C15.3078 14 17.1786 12.1292 17.1786 9.82143C17.1786 7.51367 15.3078 5.64286 13 5.64286C10.6922 5.64286 8.82143 7.51367 8.82143 9.82143C8.82143 12.1292 10.6922 14 13 14ZM11.1429 15.3459C8.06584 15.3459 5.57143 17.8403 5.57143 20.9174V23.1674C5.57143 23.7196 6.01914 24.1674 6.57143 24.1674H19.4286C19.9809 24.1674 20.4286 23.7196 20.4286 23.1674V20.9174C20.4286 17.8403 17.9342 15.3459 14.8571 15.3459L13 18.0193L11.1429 15.3459ZM1.39286 8.03553L8.03553 1.39286H10.268L1.39286 10.268V8.03553ZM1.39286 20.268V18.0355L8.03466 11.3937L9.15088 12.5099L1.39286 20.268ZM24.6071 14.8212V17.0537L22.134 19.5269L21.0177 18.4106L24.6071 14.8212ZM24.6071 4.82129V7.05373L17.5149 14.146L16.3987 13.0298L24.6071 4.82129ZM20.268 1.39286L16.3726 5.28821L15.2564 4.17199L18.0355 1.39286H20.268Z" fill="#22262E"/>
+</svg>

package/src/Components/assets/button/camera-close.svg

@@ -0,0 +1,8 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_287_9" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.95191 23.3337H18.8332C19.3855 23.3337 19.8332 22.8859 19.8332 22.3337V11.4298L9.95191 23.3337ZM21.3644 9.58512L22.9896 7.62735L25.4103 6.49767C26.0733 6.18828 26.8332 6.67224 26.8332 7.40385L26.8332 20.5968C26.8332 21.3284 26.0733 21.8124 25.4103 21.503L22.4582 20.1253L21.9416 19.8842C21.5895 19.7199 21.3644 19.3666 21.3644 18.978L21.3644 9.58512ZM17.8631 4.66699L2.36811 23.3337H2.1665C1.61422 23.3337 1.1665 22.8859 1.1665 22.3337V5.66699C1.1665 5.11471 1.61422 4.66699 2.1665 4.66699H17.8631ZM5.83317 11.3501H9.9165V9.65015H5.83317V11.3501Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.95191 23.3337H18.8332C19.3855 23.3337 19.8332 22.8859 19.8332 22.3337V11.4298L9.95191 23.3337ZM21.3644 9.58512L22.9896 7.62735L25.4103 6.49767C26.0733 6.18828 26.8332 6.67224 26.8332 7.40385L26.8332 20.5968C26.8332 21.3284 26.0733 21.8124 25.4103 21.503L22.4582 20.1253L21.9416 19.8842C21.5895 19.7199 21.3644 19.3666 21.3644 18.978L21.3644 9.58512ZM17.8631 4.66699L2.36811 23.3337H2.1665C1.61422 23.3337 1.1665 22.8859 1.1665 22.3337V5.66699C1.1665 5.11471 1.61422 4.66699 2.1665 4.66699H17.8631ZM5.83317 11.3501H9.9165V9.65015H5.83317V11.3501Z" fill="white" style="fill:white;fill:white;fill-opacity:1;"/>
+<path d="M9.95191 23.3337L8.64385 22.2479L6.33138 25.0337H9.95191V23.3337ZM19.8332 11.4298H21.5332V6.72024L18.5251 10.344L19.8332 11.4298ZM22.9896 7.62735L22.2707 6.08684L21.9251 6.24811L21.6815 6.54154L22.9896 7.62735ZM21.3644 9.58512L20.0564 8.49931L19.6644 8.97148L19.6644 9.58512L21.3644 9.58512ZM25.4103 6.49767L26.1292 8.03818L26.1292 8.03818L25.4103 6.49767ZM26.8332 7.40385L28.5332 7.40385V7.40385H26.8332ZM26.8332 20.5968L25.1332 20.5968V20.5968H26.8332ZM25.4103 21.503L24.6914 23.0435L24.6914 23.0435L25.4103 21.503ZM22.4582 20.1253L23.1771 18.5848L23.1771 18.5848L22.4582 20.1253ZM21.9416 19.8842L21.2226 21.4247L21.2227 21.4247L21.9416 19.8842ZM21.3644 18.978L19.6644 18.978V18.978H21.3644ZM2.36811 23.3337V25.0337H3.16633L3.67617 24.4195L2.36811 23.3337ZM17.8631 4.66699L19.1712 5.7528L21.4837 2.96699H17.8631V4.66699ZM9.9165 11.3501V13.0501H11.6165V11.3501H9.9165ZM5.83317 11.3501H4.13317V13.0501H5.83317V11.3501ZM9.9165 9.65015H11.6165V7.95015H9.9165V9.65015ZM5.83317 9.65015V7.95015H4.13317V9.65015H5.83317ZM18.8332 21.6337H9.95191V25.0337H18.8332V21.6337ZM18.1332 22.3337C18.1332 21.9471 18.4466 21.6337 18.8332 21.6337V25.0337C20.3243 25.0337 21.5332 23.8248 21.5332 22.3337H18.1332ZM18.1332 11.4298V22.3337H21.5332V11.4298H18.1332ZM18.5251 10.344L8.64385 22.2479L11.26 24.4195L21.1412 12.5156L18.5251 10.344ZM21.6815 6.54154L20.0564 8.49931L22.6725 10.6709L24.2976 8.71316L21.6815 6.54154ZM24.6914 4.95716L22.2707 6.08684L23.7085 9.16786L26.1292 8.03818L24.6914 4.95716ZM28.5332 7.40385C28.5332 5.42848 26.4815 4.1218 24.6914 4.95716L26.1292 8.03818C25.6651 8.25476 25.1332 7.91599 25.1332 7.40385H28.5332ZM28.5332 20.5968L28.5332 7.40385L25.1332 7.40385L25.1332 20.5968L28.5332 20.5968ZM24.6914 23.0435C26.4814 23.8788 28.5332 22.5722 28.5332 20.5968H25.1332C25.1332 20.0847 25.6651 19.7459 26.1292 19.9625L24.6914 23.0435ZM21.7393 21.6658L24.6914 23.0435L26.1292 19.9625L23.1771 18.5848L21.7393 21.6658ZM21.2227 21.4247L21.7393 21.6658L23.1771 18.5848L22.6605 18.3437L21.2227 21.4247ZM19.6644 18.978C19.6644 20.0271 20.272 20.9811 21.2226 21.4247L22.6605 18.3437C22.9069 18.4587 23.0644 18.7061 23.0644 18.978H19.6644ZM19.6644 9.58512L19.6644 18.978L23.0644 18.978L23.0644 9.58512L19.6644 9.58512ZM3.67617 24.4195L19.1712 5.7528L16.5551 3.58118L1.06005 22.2479L3.67617 24.4195ZM2.36811 21.6337H2.1665V25.0337H2.36811V21.6337ZM2.1665 21.6337C2.55311 21.6337 2.8665 21.9471 2.8665 22.3337H-0.533496C-0.533496 23.8248 0.675329 25.0337 2.1665 25.0337V21.6337ZM2.8665 22.3337V5.66699H-0.533496V22.3337H2.8665ZM2.8665 5.66699C2.8665 6.05359 2.5531 6.36699 2.1665 6.36699V2.96699C0.675339 2.96699 -0.533496 4.17582 -0.533496 5.66699H2.8665ZM2.1665 6.36699H17.8631V2.96699H2.1665V6.36699ZM9.9165 9.65015H5.83317V13.0501H9.9165V9.65015ZM8.2165 9.65015V11.3501H11.6165V9.65015H8.2165ZM5.83317 11.3501H9.9165V7.95015H5.83317V11.3501ZM7.53317 11.3501V9.65015H4.13317V11.3501H7.53317Z" fill="white" style="fill:white;fill:white;fill-opacity:1;" mask="url(#path-1-inside-1_287_9)"/>
+<path d="M4.56348 25.2686L22.1405 4.08389" stroke="white" style="stroke:white;stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

package/src/Components/assets/button/camera-open.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.9165 8.19978H9.7665V7.34978V5.64978V4.79978H8.9165H4.83317H3.98317V5.64978V7.34978V8.19978H4.83317H8.9165ZM1.0165 1.66662C1.0165 1.58378 1.08366 1.51663 1.1665 1.51663H17.8332C17.916 1.51663 17.9832 1.58378 17.9832 1.66663V18.3333C17.9832 18.4161 17.916 18.4833 17.8332 18.4833H1.1665C1.08366 18.4833 1.0165 18.4161 1.0165 18.3333V1.66662ZM21.2143 5.02224C21.2143 4.96396 21.248 4.91096 21.3008 4.88631L24.7696 3.26756C24.869 3.22115 24.983 3.29375 24.983 3.40349L24.983 16.5964C24.983 16.7062 24.869 16.7788 24.7696 16.7324L21.3008 15.1136C21.248 15.089 21.2143 15.036 21.2143 14.9777L21.2143 5.02224Z" fill="#22262E" stroke="#22262E" stroke-width="1.7" stroke-linecap="round"/>
+</svg>

package/src/Components/assets/button/desktop/fullScreen.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66683 9.33337H3.3335V4.00004C3.3335 3.63185 3.63197 3.33337 4.00016 3.33337L9.3335 3.33337V4.66671H5.60963L9.8049 8.86199L8.86209 9.8048L4.66683 5.60952V9.33337ZM15.3333 10.6667H16.6667V16C16.6667 16.3682 16.3682 16.6667 16 16.6667L10.6667 16.6667L10.6667 15.3333H14.3905L10.1953 11.138L11.1381 10.1952L15.3333 14.3905V10.6667Z" fill="white"/>
+<path d="M0.666667 1.33333C0.666667 0.965144 0.965144 0.666667 1.33333 0.666667H18.6667C19.0349 0.666667 19.3333 0.965144 19.3333 1.33333V18.6667C19.3333 19.0349 19.0349 19.3333 18.6667 19.3333H1.33333C0.965143 19.3333 0.666667 19.0349 0.666667 18.6667V1.33333Z" stroke="white" stroke-width="1.33333"/>
+</svg>

package/src/Components/assets/button/desktop/minimize.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.769231" y="0.769231" width="18.4615" height="18.4615" rx="0.769231" stroke="white" stroke-width="1.53846"/>
+    <path d="M11.5385 12.3077C11.5385 11.8829 11.8829 11.5385 12.3077 11.5385H19.2308V18.4615C19.2308 18.8864 18.8864 19.2308 18.4616 19.2308H11.5385V12.3077Z" stroke="white" stroke-width="1.53846"/>
+    <path d="M0.769287 0.769226L8.9723 8.92412" stroke="white" stroke-width="1.53846"/>
+    <path d="M9.4967 4.71716V9.4486H4.74146" stroke="white" stroke-width="1.53846" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>

package/src/Components/assets/button/hangup.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 16.0509C30 13.8146 28.7722 11.7194 26.6855 10.915C23.0591 9.51726 19.119 8.75098 15 8.75098C10.8809 8.75098 6.94086 9.51726 3.31453 10.915C1.22784 11.7194 0 13.8146 0 16.0509V19.6476C0 20.5153 0.734003 21.202 1.59978 21.1443L7.97478 20.7193C8.76272 20.6668 9.375 20.0123 9.375 19.2226V16.209C9.375 15.8564 9.62034 15.5503 9.96644 15.4831C11.5955 15.1667 13.2784 15.001 15 15.001C16.7216 15.001 18.4045 15.1667 20.0336 15.4831C20.3797 15.5503 20.625 15.8564 20.625 16.209V19.2226C20.625 20.0123 21.2373 20.6668 22.0252 20.7193L28.4002 21.1443C29.266 21.202 30 20.5153 30 19.6476V16.0509Z" fill="white"/>
+</svg>

package/src/Components/assets/button/microphone-close.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 7.5C8.75 4.04822 11.5482 1.25 15 1.25C16.9758 1.25 18.7376 2.16686 19.8829 3.59834L8.87248 16.8624C8.79215 16.4624 8.75 16.0486 8.75 15.625V7.5ZM6.80567 19.3523C6.28825 18.2166 6 16.9544 6 15.625V13.75H4V15.625C4 17.5882 4.51431 19.4313 5.41555 21.0269L6.80567 19.3523ZM9.21177 24.9807L10.5044 23.4235C11.8272 24.1877 13.3625 24.625 15 24.625C19.9706 24.625 24 20.5956 24 15.625V13.75H26V15.625C26 21.363 21.6065 26.0749 16 26.5802V30H14V26.5802C12.2543 26.4228 10.6262 25.8577 9.21177 24.9807ZM12.2983 21.2625L21.25 10.4784V15.625C21.25 19.0768 18.4518 21.875 15 21.875C14.0323 21.875 13.116 21.6551 12.2983 21.2625Z" fill="white" style="fill:white;fill:white;fill-opacity:1;"/>
+<path d="M6.41895 24.084L22.0939 5.20938" stroke="white" style="stroke:white;stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

package/src/Components/assets/button/microphone-open.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 15.625V13.75H6V15.625C6 20.5956 10.0294 24.625 15 24.625C19.9706 24.625 24 20.5956 24 15.625V13.75H26V15.625C26 21.363 21.6065 26.0749 16 26.5802V30H14V26.5802C8.3935 26.0749 4 21.363 4 15.625Z" fill="#22262E"/>
+<rect x="8.75" y="1.25" width="12.5" height="20.625" rx="6.25" fill="#22262E"/>
+</svg>

package/src/Components/assets/button/mobile/down.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.5" cx="15" cy="15" r="15" fill="#22262E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.48375 14.3133C9.3316 14.1531 9.33809 13.8999 9.49825 13.7478L10.3683 12.9213C10.5284 12.7691 10.7816 12.7756 10.9338 12.9358L14.9999 17.2159L19.0658 12.9358C19.218 12.7756 19.4711 12.7691 19.6313 12.9213L20.5013 13.7477C20.6615 13.8999 20.668 14.1531 20.5158 14.3132L15.4833 19.611C15.2204 19.8876 14.7794 19.8876 14.5166 19.611L9.48375 14.3133Z" fill="white"/>
+</svg>

package/src/Components/assets/button/mobile/minimize.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.49991 4H2.99991C2.44762 4 1.99991 4.44772 1.99991 5V17C1.99991 17.5523 2.44762 18 2.99991 18H14.9999C15.5522 18 15.9999 17.5523 15.9999 17V11.5" stroke="#D5E0F2" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4999 3.5V8.5H16.4999V3.5H11.4999ZM10.9999 2C10.4476 2 9.99991 2.44772 9.99991 3V9C9.99991 9.55228 10.4476 10 10.9999 10H16.9999C17.5522 10 17.9999 9.55228 17.9999 9V3C17.9999 2.44772 17.5522 2 16.9999 2H10.9999Z" fill="#D5E0F2"/>
+</svg>

package/src/Components/assets/button/mobile/switch-camera.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.0184 5.76336C26.1229 5.76336 27.0184 6.65879 27.0184 7.76336V23.2909C27.0184 24.3955 26.1229 25.2909 25.0184 25.2909H2.98163C1.87706 25.2909 0.981628 24.3955 0.981628 23.2909V7.76336C0.981628 6.65879 1.87706 5.76336 2.98163 5.76336H7.2436C7.81488 5.76336 8.35888 5.51907 8.73842 5.09209L10.1487 3.5055C10.5283 3.07852 11.0723 2.83423 11.6435 2.83423H14H16.3565C16.9277 2.83423 17.4717 3.07852 17.8513 3.5055L19.2616 5.09209C19.6411 5.51907 20.1851 5.76336 20.7564 5.76336H25.0184ZM11.7229 9.58495C12.3994 9.31602 13.1377 9.16846 13.9091 9.16846C15.6277 9.16846 17.1788 9.90132 18.25 11.071V9.91846H19.75V14.9138L19.75 14.9185H18.25L18.25 14.9144C18.2478 12.5817 16.3179 10.6685 13.9091 10.6685C13.3302 10.6685 12.7797 10.779 12.2771 10.9788L11.7229 9.58495ZM8.25 19.9185V14.9185H9.75C9.75 17.253 11.6807 19.1685 14.0909 19.1685C14.6698 19.1685 15.2203 19.0579 15.7229 18.8581L16.2771 20.252C15.6006 20.5209 14.8623 20.6685 14.0909 20.6685C12.3723 20.6685 10.8212 19.9356 9.75 18.766V19.9185H8.25Z" fill="white"/>
+</svg>

package/src/Components/assets/button/mobile/up.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.5" cx="15" cy="15" r="15" fill="#22262E" style="fill:#22262E;fill:color(display-p3 0.1333 0.1490 0.1804);fill-opacity:1;"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.516 17.4516C20.6682 17.6118 20.6617 17.865 20.5015 18.0171L19.6315 18.8436C19.4713 18.9958 19.2182 18.9893 19.066 18.8291L14.9999 14.549L10.9339 18.8291C10.7818 18.9893 10.5286 18.9958 10.3684 18.8436L9.49842 18.0172C9.33826 17.865 9.33176 17.6118 9.48391 17.4517L14.5165 12.1539C14.7793 11.8773 15.2203 11.8772 15.4832 12.1539L20.516 17.4516Z" fill="white" style="fill:white;fill:white;fill-opacity:1;"/>
+</svg>

package/src/Components/assets/button/speaker-close.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3602 22.8416L14.5946 26.4025C15.2916 26.9886 16.3556 26.4931 16.3556 25.5825V15.619L10.3602 22.8416ZM23.7162 6.75187L25.0013 5.20364C27.4741 7.72791 29 11.1855 29 15C29 20.1833 26.1827 24.7073 22.0007 27.1265L21.1351 27.6272L20.1337 25.896L20.9993 25.3953C24.5887 23.3189 27 19.4405 27 15C27 11.806 25.7524 8.90282 23.7162 6.75187ZM20.4377 10.7014L21.7262 9.14917C23.1393 10.6132 24 12.7094 24 15C24 17.8689 22.6499 20.4329 20.5554 21.8316L19.7237 22.387L18.613 20.7238L19.4446 20.1684C20.9369 19.1719 22 17.2589 22 15C22 13.2842 21.3866 11.768 20.4377 10.7014ZM16.3556 6.48288L3.92756 21.4548H2.25164C1.6599 21.4548 1.18021 20.9751 1.18021 20.3834V9.63459C1.18021 9.04401 1.6581 8.56479 2.24867 8.56316L8.32215 8.54636C8.57342 8.54567 8.81646 8.45668 9.00877 8.29496L14.5946 3.59761C15.2916 3.01151 16.3556 3.50699 16.3556 4.41763V6.48288Z" fill="white"/>
+<path d="M4.56372 25.2683L22.1407 4.08365" stroke="white" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

package/src/Components/assets/button/speaker-open.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.1351 2.37286L22.0007 2.87359C26.1827 5.29275 29 9.81679 29 15C29 20.1833 26.1827 24.7073 22.0007 27.1265L21.1351 27.6272L20.1336 25.896L20.9992 25.3953C24.5887 23.3189 27 19.4405 27 15C27 10.5596 24.5887 6.68117 20.9992 4.6048L20.1336 4.10408L21.1351 2.37286ZM14.6448 3.38893C15.3517 2.86327 16.3556 3.36779 16.3556 4.24869V25.7514C16.3556 26.6323 15.3517 27.1368 14.6448 26.6111L7.9957 21.6665C7.81087 21.529 7.58667 21.4548 7.35634 21.4548H2.2516C1.65987 21.4548 1.18018 20.9751 1.18018 20.3834V9.63411C1.18018 9.04371 1.65779 8.56457 2.24819 8.56269L7.35824 8.54639C7.5874 8.54566 7.81029 8.47147 7.99418 8.33472L14.6448 3.38893ZM20.5553 8.1684L19.7237 7.61304L18.613 9.27626L19.4446 9.83162C20.9368 10.8281 22 12.7411 22 15C22 17.2589 20.9368 19.1719 19.4446 20.1684L18.613 20.7238L19.7237 22.387L20.5553 21.8316C22.6499 20.4328 24 17.8688 24 15C24 12.1312 22.6499 9.56717 20.5553 8.1684Z" fill="#2E333D"/>
+</svg>

package/src/Components/assets/button/switch-audio.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3017 2.0893C9.932 2.03053 9.55291 2 9.16667 2C5.20759 2 2 5.2074 2 9.16161C2 9.31826 2.00503 9.47373 2.01495 9.62788L0.0367294 9.98735C0.0124179 9.71535 0 9.43993 0 9.16161C0 4.10179 4.10406 -2.21291e-07 9.16667 0C9.67509 2.22353e-08 10.1738 0.0413685 10.6597 0.120921L10.3017 2.0893ZM10.0633 3.41167C9.77107 3.36663 9.47168 3.34325 9.16684 3.34325C5.94517 3.34325 3.3335 5.95349 3.3335 9.17337C3.3335 9.24912 3.33495 9.32453 3.33781 9.39959L5.33591 9.0365C5.40803 6.98554 7.0946 5.34325 9.16684 5.34325C9.34953 5.34325 9.52923 5.35602 9.70509 5.38071L10.0633 3.41167ZM8.18113 7.21788L18.6262 7.21251C18.6964 7.21257 18.7657 7.22839 18.829 7.25879C18.8922 7.28919 18.9478 7.3334 18.9917 7.38815C19.0356 7.44291 19.0666 7.50681 19.0824 7.57515C19.0983 7.64348 19.0986 7.71451 19.0833 7.78297L16.7957 17.9689C16.7764 18.0549 16.7331 18.1337 16.6709 18.1962C16.6087 18.2587 16.5301 18.3024 16.4442 18.3223C16.3583 18.3422 16.2685 18.3374 16.1851 18.3086C16.1018 18.2797 16.0282 18.228 15.973 18.1592L13.6523 15.263C9.6108 18.4979 3.71105 17.8458 0.474417 13.8065C0.336028 13.6338 0.522631 13.3975 0.732698 13.4673C1.94454 13.8703 3.23549 13.9941 4.50805 13.825C6.03249 13.6225 7.47257 13.0075 8.67264 12.0463L10.1362 10.8749L7.81549 7.9787C7.76045 7.90981 7.72598 7.8268 7.71603 7.73921C7.70608 7.65162 7.72106 7.56299 7.75925 7.48353C7.79744 7.40407 7.85729 7.33698 7.93192 7.28999C8.00655 7.243 8.09293 7.218 8.18113 7.21788Z" fill="white" style="fill:white;fill:white;fill-opacity:1;"/>
+</svg>

package/src/Components/assets/callMessage/audioCall.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.8205 5.90723L6.4211 4.33468C6.84833 3.88844 7.54101 3.88844 7.96825 4.33468L10.5525 7.03388C10.9798 7.48012 10.9798 8.20361 10.5525 8.64984L9.40756 9.84572C9.89906 10.9263 10.5867 11.9091 11.4429 12.7349C12.3911 13.6494 13.5066 14.3333 14.7098 14.7541L15.7569 13.6605C16.1841 13.2143 16.8768 13.2143 17.304 13.6605L19.6796 16.1417C20.1068 16.5879 20.1068 17.3114 19.6796 17.7576L17.9485 19.6191C17.9389 19.6191 17.9581 19.6191 17.9485 19.6191C17.7709 19.8047 17.5385 19.9285 17.2854 19.9726L17.128 20C13.7538 19.97 10.8495 18.6054 8.36844 16.2124C5.859 13.7921 4.27163 10.987 4 7.43077C4 6.94502 4.20228 6.4812 4.55826 6.1507L4.8205 5.90723Z" fill="#147AFF" style="fill:#147AFF;fill:color(display-p3 0.0784 0.4784 1.0000);fill-opacity:1;"/>
+</svg>

package/src/Components/assets/callMessage/videoCall.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7143 9.78746C15.7143 9.84463 15.6549 9.94468 15.5362 10.0876C15.4175 10.2305 15.2904 10.3992 15.1547 10.5936C15.0191 10.788 14.8919 10.9995 14.7732 11.2282C14.6545 11.4569 14.5951 11.6913 14.5951 11.9314C14.5951 12.1715 14.6545 12.4031 14.7732 12.6261C14.8919 12.849 15.0191 13.052 15.1547 13.2349C15.2904 13.4179 15.4175 13.5694 15.5362 13.6895C15.6549 13.8095 15.7143 13.8867 15.7143 13.921V15.7219C15.7143 15.9163 15.6436 16.1364 15.5023 16.3823C15.361 16.6281 15.1858 16.8597 14.9767 17.0769C14.7675 17.2942 14.5358 17.4743 14.2814 17.6172C14.0271 17.7601 13.7869 17.8316 13.5608 17.8316H5.13327C4.82805 17.8316 4.54826 17.7773 4.29391 17.6687C4.03956 17.56 3.81629 17.4085 3.62412 17.2141C3.43194 17.0198 3.28215 16.7911 3.17476 16.5281C3.06737 16.2651 3.01367 15.9792 3.01367 15.6705V8.27811C3.01367 8.04942 3.06454 7.81216 3.16628 7.56632C3.26802 7.32048 3.41216 7.09465 3.59868 6.88883C3.7852 6.68301 4.00564 6.51149 4.25999 6.37428C4.51435 6.23706 4.79413 6.16846 5.09935 6.16846H13.5269C13.8321 6.16846 14.1175 6.22277 14.3832 6.3314C14.6488 6.44003 14.8806 6.58867 15.0784 6.77734C15.2762 6.96601 15.4317 7.19184 15.5447 7.45483C15.6578 7.71782 15.7143 7.99797 15.7143 8.29526V9.78746ZM20.9878 8.1752V16.0135C20.9878 16.2651 20.9228 16.488 20.7928 16.6824C20.6628 16.8768 20.4678 16.974 20.2078 16.974C20.1174 16.974 20.0015 16.9397 19.8602 16.8711C19.7189 16.8025 19.5776 16.7225 19.4363 16.631C19.295 16.5395 19.1622 16.448 19.0378 16.3566C18.9135 16.2651 18.823 16.1908 18.7665 16.1336C18.6196 16.0078 18.3963 15.7905 18.0967 15.4818C17.7971 15.1731 17.4948 14.8243 17.1895 14.4356C16.8843 14.0468 16.6158 13.6466 16.3841 13.2349C16.1523 12.8233 16.0365 12.446 16.0365 12.1029C16.0365 11.7599 16.1608 11.3683 16.4095 10.928C16.6582 10.4878 16.9578 10.0562 17.3082 9.6331C17.6587 9.21002 18.0261 8.81839 18.4104 8.45821C18.7948 8.09802 19.117 7.82645 19.377 7.6435C19.4787 7.57489 19.6172 7.49199 19.7924 7.3948C19.9676 7.29761 20.1231 7.24901 20.2587 7.24901C20.5639 7.24901 20.7618 7.33477 20.8522 7.50629C20.9426 7.6778 20.9878 7.88934 20.9878 8.1409V8.1752Z" fill="#147AFF" style="fill:#147AFF;fill:color(display-p3 0.0784 0.4784 1.0000);fill-opacity:1;"/>
+</svg>

package/src/Components/assets/common/defaultAvatar.svg

@@ -0,0 +1,11 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="-5" y="-5" width="110" height="110" fill="url(#paint0_linear_2964_1758)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.9999 71.5C24.9999 61.2357 32.9304 52.8237 42.9983 52.057C43.4939 52.0193 43.9947 52 44.4999 52H57.4999C58.0051 52 58.5059 52.0193 59.0014 52.057C69.0694 52.8237 76.9999 61.2357 76.9999 71.5V78.2826H24.9999L24.9999 71.5Z" fill="#D5E0F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.4999 45.6048C44.4312 45.5707 44.3629 45.536 44.2948 45.5008C39.5906 43.0697 36.3749 38.1604 36.3749 32.5C36.3749 24.4228 42.9227 17.875 50.9999 17.875C59.077 17.875 65.6249 24.4228 65.6249 32.5C65.6249 38.1604 62.4092 43.0697 57.7049 45.5008C57.6369 45.536 57.5686 45.5707 57.4999 45.6048C55.5418 46.5779 53.3347 47.125 50.9999 47.125C48.665 47.125 46.4579 46.5779 44.4999 45.6048Z" fill="#D5E0F2"/>
+<defs>
+<linearGradient id="paint0_linear_2964_1758" x1="73.5" y1="-5" x2="5" y2="98.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C859B"/>
+<stop offset="1" stop-color="#747C90"/>
+</linearGradient>
+</defs>
+</svg>

package/src/Components/assets/common/microphone-volumn-close.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="design-iconfont">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.82825 12.4759C5.58172 12.9048 6.43742 13.1978 7.33333 13.2967V15.0002C7.33333 15.1843 7.48257 15.3335 7.66667 15.3335H8.33333C8.51743 15.3335 8.66667 15.1843 8.66667 15.0002V13.2967C11.5402 12.9796 14 10.6658 14 8.27347V7.68116C14 7.49707 13.8508 7.34783 13.6667 7.34783H13C12.8159 7.34783 12.6667 7.49707 12.6667 7.68116V8.27347L12.6634 8.39333C12.5681 10.1526 10.3982 11.9982 8.00396 12.0002L8 12.0002L7.99604 12.0002C7.22514 11.9996 6.47749 11.8078 5.81487 11.4893L4.82825 12.4759ZM6.83168 10.4725C7.196 10.5927 7.5899 10.6583 8 10.6583C9.82747 10.6583 11.3333 9.35517 11.3333 7.72563V5.97083L6.83168 10.4725ZM10.9068 2.1547L4.73629 8.32524C4.70043 8.17327 4.67793 8.01689 4.66994 7.85702L4.66667 7.72563V3.59102C4.66667 1.96148 6.17253 0.658325 8 0.658325C9.24072 0.658325 10.3332 1.25901 10.9068 2.1547ZM3.62455 9.43698L2.64622 10.4153C2.26208 9.78985 2.03108 9.10804 2.00292 8.41644L2 8.27347V7.66546C2 7.48277 2.14706 7.33411 2.32975 7.33215L2.99352 7.32502C3.17839 7.32303 3.32956 7.47188 3.33043 7.65676L3.33333 8.27347C3.33333 8.66191 3.4371 9.05672 3.62455 9.43698Z"
+      fill="#fff"
+    />
+    <rect x=".609863" y="13.4514" width="19.0127" height="1.5" rx=".75" transform="rotate(-45 .609863 13.4514)" fill="#FE3C44" />
+  </svg>

package/src/Components/assets/floatingWindow/desktop/floatCallEnd.svg

@@ -0,0 +1,3 @@
+ <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M18.4437 12.449C18.4437 14.1142 18.2336 15.3515 21.5089 15.7126C24.7875 16.0737 24.3666 13.6794 24.3662 12.0669C24.3649 10.2061 20.0602 7.61895 13.2726 7.6173C6.48662 7.61735 2.1789 10.205 2.17888 12.067C2.17887 13.68 1.75621 16.0726 5.03315 15.7123C8.31009 15.3537 8.10005 14.1155 8.09837 12.4495C8.10134 11.2862 10.7587 11.0316 13.2725 11.0298C15.7863 11.0281 18.4454 11.2844 18.4437 12.449Z" fill="#FE3C44"/>
+    </svg>

package/src/Components/assets/floatingWindow/desktop/floatFullScreen.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.33337 9.33331H0.333374V0.99998C0.333374 0.63179 0.631851 0.333313 1.00004 0.333313L9.33338 0.333313V2.33331H3.74758L10.0405 8.62624L8.62627 10.0404L2.33337 3.74753V9.33331ZM18.3331 11.3333H20.3331V19.6666C20.3331 20.0348 20.0347 20.3333 19.6665 20.3333L11.3331 20.3333L11.3331 18.3333H16.9189L10.626 12.0403L12.0402 10.6261L18.3331 16.919V11.3333Z" fill="#101419"/>
+</svg>

package/src/Components/assets/floatingWindow/desktop/floatMicrophone.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 4.16668C6.66666 2.32834 8.16166 0.833344 9.99999 0.833344C11.8383 0.833344 13.3333 2.32834 13.3333 4.16668V9.16668C13.3333 11.005 11.8383 12.5 9.99999 12.5C8.16166 12.5 6.66666 11.005 6.66666 9.16668V4.16668ZM6.66666 18.3333C6.66666 17.8725 7.03999 17.5 7.49999 17.5H12.5C12.9608 17.5 13.3333 17.8725 13.3333 18.3333C13.3333 18.7942 12.9608 19.1667 12.5 19.1667H7.49999C7.03999 19.1667 6.66666 18.7942 6.66666 18.3333Z" fill="#101419"/>
+<path d="M15.8333 8.3512V9.50825C15.8333 12.081 13.2217 15 9.99999 15C6.77833 15 4.16666 12.081 4.16666 9.50825V8.33334" stroke="#101419" stroke-width="1.66667" stroke-linecap="round"/>
+</svg>

package/src/Components/assets/floatingWindow/desktop/floatMicrophoneClosed.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="21" viewBox="0 0 15 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6247 0.719168C14.1934 0.374158 13.5641 0.44408 13.2191 0.875342L10.8168 3.83203C10.1789 3.02455 9.15387 2.50004 8.00001 2.50004C6.06976 2.50004 4.50001 3.96785 4.50001 5.77276V10.6819C4.50001 10.9563 4.5363 11.2229 4.60463 11.4778L3.388 12.9752C2.98449 12.3433 2.75001 11.6522 2.75001 10.9717V9.81819L2.74319 9.71556C2.6892 9.31213 2.32108 9.00001 1.87501 9.00001C1.39176 9.00001 1.00001 9.36632 1.00001 9.81819V10.9717L1.00466 11.1761C1.05557 12.2968 1.52161 13.4016 2.26939 14.3519L0.219137 16.8753L0.146861 16.9782C-0.112977 17.4017 -0.0227767 17.9624 0.375311 18.2809C0.806573 18.6259 1.43587 18.556 1.78088 18.1247L3.71661 15.7423C3.71849 15.7437 3.72038 15.745 3.72227 15.7464L4.2997 15.0246L8.28088 10.1247L14.7809 2.12473L14.8532 2.02191C15.113 1.59834 15.0228 1.03764 14.6247 0.719168ZM7.72499 13.9446L11.5 9.22582V10.6819C11.5 12.4868 9.93026 13.9546 8.00001 13.9546C7.90746 13.9546 7.81575 13.9512 7.72499 13.9446ZM6.60445 15.3453L5.50798 16.7159C6.29225 17.0136 7.13532 17.1818 8.00001 17.1818C11.6976 17.1818 15 14.1064 15 10.9717V9.83572L14.9932 9.73309C14.9392 9.32966 14.5711 9.01754 14.125 9.01754C13.6418 9.01754 13.25 9.38385 13.25 9.83572V10.9717L13.2445 11.1527C13.1138 13.3262 10.6589 15.5455 8.00001 15.5455C7.52424 15.5455 7.05501 15.4744 6.60445 15.3453ZM5.37501 18.8637C4.89201 18.8637 4.50001 19.2294 4.50001 19.6819C4.50001 20.1343 4.89201 20.5 5.37501 20.5H10.625C11.1089 20.5 11.5 20.1343 11.5 19.6819C11.5 19.2294 11.1089 18.8637 10.625 18.8637H5.37501Z" fill="#101419"/>
+</svg>

package/src/Components/assets/floatingWindow/mobile/camera-close.svg

@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6716 5.77659C12.4687 5.87835 12.3406 6.08591 12.3406 6.31291V9.00614C12.3406 9.23315 12.4687 9.44072 12.6716 9.54248L15.4744 10.948C15.6074 11.0147 15.764 10.918 15.764 10.7693L15.764 4.54962C15.764 4.40084 15.6074 4.30415 15.4744 4.37085L12.6716 5.77659Z" fill="#ADADAD"/>
+<g filter="url(#filter0_b_131_1449)">
+<rect x="0.666748" y="2.55322" width="10.6667" height="10.2128" rx="1.5" fill="#ADADAD"/>
+</g>
+<defs>
+<filter id="filter0_b_131_1449" x="-7.33325" y="-5.44678" width="26.6667" height="26.2126" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_131_1449"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_131_1449" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/Components/assets/floatingWindow/mobile/camera-open.svg

@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6716 6.11692C12.4687 6.21869 12.3406 6.42625 12.3406 6.65324V9.34648C12.3406 9.57348 12.4687 9.78105 12.6716 9.88281L15.4744 11.2884C15.6074 11.3551 15.764 11.2584 15.764 11.1096L15.764 4.88996C15.764 4.74117 15.6074 4.64448 15.4744 4.71118L12.6716 6.11692Z" fill="#12B969"/>
+<g filter="url(#filter0_b_1977_11630)">
+<rect x="0.666748" y="2.89355" width="10.6667" height="10.2128" rx="1.5" fill="#12B969"/>
+</g>
+<defs>
+<filter id="filter0_b_1977_11630" x="-7.33325" y="-5.10645" width="26.6666" height="26.2126" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1977_11630"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1977_11630" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/Components/assets/floatingWindow/mobile/earphone.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.760961 9.33154C0.00123507 7.13371 0.962968 4.77323 2.83345 3.39097C4.25152 2.34304 5.67603 1.2847 6.48889 0.680124C6.87515 0.392837 7.41661 0.45568 7.72841 0.822397L12.158 6.03214C12.4476 6.37275 12.4477 6.87295 12.1583 7.21373L9.4422 10.4119C9.19496 10.7031 9.15378 11.1183 9.34925 11.4465C10.2293 12.9238 11.195 14.1891 12.5 15.4938C13.8127 16.806 15.0778 17.7529 16.5635 18.6308C16.8919 18.8248 17.3065 18.7836 17.5974 18.5368L20.7826 15.8351C21.1234 15.5459 21.6237 15.5461 21.9643 15.8356L27.1783 20.2662C27.5441 20.577 27.6066 21.1179 27.3213 21.5038L24.5937 25.1936C23.2225 27.0486 20.8804 27.9919 18.6987 27.2413C14.6658 25.8538 10.8781 23.5511 7.65922 20.3331C4.44957 17.1244 2.15015 13.3503 0.760961 9.33154Z" fill="#12B969"/>
+</svg>

package/src/Components/assets/floatingWindow/mobile/microphone-close.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.9165 7.56937V6.83887H3.4165V7.56937C3.4165 10.1007 5.46853 12.1527 7.99984 12.1527C10.5311 12.1527 12.5832 10.1007 12.5832 7.56936V6.83887H14.0832V7.56936C14.0832 10.6751 11.7557 13.2373 8.74988 13.6069V14.9089H7.24988V13.6069C4.24398 13.2374 1.9165 10.6752 1.9165 7.56937Z" fill="#ADADAD"/>
+<rect x="4.66675" y="1.09082" width="6.66667" height="9.8969" rx="3.33333" fill="#ADADAD"/>
+</svg>

package/src/Components/assets/floatingWindow/mobile/microphone-open.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.9165 7.56937V6.83887H3.4165V7.56937C3.4165 10.1007 5.46853 12.1527 7.99984 12.1527C10.5311 12.1527 12.5832 10.1007 12.5832 7.56936V6.83887H14.0832V7.56936C14.0832 10.6751 11.7557 13.2373 8.74988 13.6069V14.9089H7.24988V13.6069C4.24398 13.2374 1.9165 10.6752 1.9165 7.56937Z" fill="#12B969"/>
+<rect x="4.66675" y="1.09082" width="6.66667" height="9.8969" rx="3.33333" fill="#12B969"/>
+</svg>

package/src/Components/assets/permission/desktop/index.ts

@@ -0,0 +1,11 @@
+import MacPermitZhPng from './mac/permit-zh.jpg';
+import MacPermitEnPng from './mac/permit-en.jpg';
+import WinPermitZhPng from './win/permit-zh.png';
+import WinPermitEnPng from './win/permit-en.png';
+
+export {
+  MacPermitZhPng,
+  MacPermitEnPng,
+  WinPermitZhPng,
+  WinPermitEnPng,
+};

package/src/Components/assets/streamInfo/mobile/microphone-close-group.svg

@@ -0,0 +1,19 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1741_10678)">
+<circle cx="14" cy="14" r="12" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6667 10.0001C10.6667 8.15913 12.159 6.66675 14 6.66675C15.0538 6.66675 15.9934 7.15574 16.6042 7.9192L10.732 14.9934C10.6891 14.7801 10.6667 14.5594 10.6667 14.3334V10.0001ZM9.62975 16.3212C9.35375 15.7155 9.2 15.0423 9.2 14.3332V13.3332H8.13333V14.3332C8.13333 15.3803 8.40766 16.3634 8.88836 17.2144L9.62975 16.3212ZM10.913 19.323L11.6025 18.4925C12.3079 18.9 13.1267 19.1332 14 19.1332C16.651 19.1332 18.8 16.9842 18.8 14.3332V13.3332H19.8667V14.3332C19.8667 17.3935 17.5235 19.9065 14.5333 20.176V22.0001H13.4667V20.176C12.5357 20.0921 11.6674 19.7907 10.913 19.323ZM12.5591 17.3401L17.3333 11.5886V14.3334C17.3333 16.1744 15.8409 17.6667 14 17.6667C13.4839 17.6667 12.9952 17.5495 12.5591 17.3401Z" fill="#E6395C"/>
+<path d="M9.4234 18.8447L17.7834 8.77827" stroke="#E6395C" stroke-width="1.06667" stroke-linecap="square" stroke-linejoin="round"/>
+<defs>
+<filter id="filter0_d_1741_10678" 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_1741_10678"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1741_10678" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/Components/assets/streamInfo/mobile/microphone-close-single.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.83325 4.99998C5.83325 2.69879 7.69873 0.833313 9.99992 0.833313C11.6098 0.833313 13.0064 1.74632 13.7003 3.08278L6.19703 12.1219C5.96328 11.6014 5.83325 11.0242 5.83325 10.4166V4.99998ZM5.06083 13.4906C4.50464 12.5988 4.18328 11.5453 4.18328 10.4169V9.16687H2.48328V10.4169C2.48328 12.0756 3.02058 13.6089 3.93064 14.8521L5.06083 13.4906ZM7.07212 17.342L8.22197 15.9568C8.78239 16.1365 9.37984 16.2335 9.99994 16.2335C13.2124 16.2335 15.8166 13.6293 15.8166 10.4169V9.16687H17.5166V10.4169C17.5166 14.2865 14.5925 17.4732 10.8333 17.8879V20.0001H9.16663V17.8879C8.43129 17.8068 7.72791 17.6196 7.07212 17.342ZM9.39791 14.5401L14.1666 8.79537V10.4166C14.1666 12.7178 12.3011 14.5833 9.99992 14.5833C9.79548 14.5833 9.59447 14.5686 9.39791 14.5401Z" fill="#D5E0F2"/>
+<path d="M5.04102 16.6536L15.3253 4.27002" stroke="#D5E0F2" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>