@trtc/calls-uikit-vue2 4.1.0

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@trtc/calls-uikit-vue2",
+  "version": "4.1.0",
+  "main": "./tuicall-uikit-vue2.umd.js",
+  "module": "./tuicall-uikit-vue2.es.js",
+  "types": "./types/index.d.ts",
+  "description": "An Open-source Voice & Video Calling UI Component Based on Tencent Cloud Service.",
+  "homepage": "https://cloud.tencent.com/document/product/647/78731",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tencentyun/TUICallKit.git",
+    "directory": "Web"
+  },
+  "dependencies": {
+    "@tencentcloud/chat": "^3.5.2",
+    "@tencentcloud/tui-core": "latest",
+    "@trtc/call-engine-lite-js": "~3.4.0",
+    "@tencentcloud/lite-chat": "^1.4.1"
+},
+  "bugs": {
+    "url": "https://github.com/tencentyun/TUICallKit/issues"
+  },
+  "keywords": [
+    "call",
+    "video call",
+    "audio call",
+    "callkit",
+    "uikit",
+    "call uikit",
+    "video",
+    "audio",
+    "TRTC",
+    "camera",
+    "microphone",
+    "webrtc",
+    "real-time communication",
+    "javascript",
+    "rtc",
+    "@trtc/calls-uikit-vue2"
+  ]
+}

package/src/Components/TUICallKit.vue

@@ -0,0 +1,334 @@
+<template>
+  <div v-if="callInfoContextValue.callStatus !== CallStatus.IDLE" :style="[{ visibility: floatWindowContextValue.isFloatWindow ? 'hidden' : '' }]" id="tuicallkit-id" :class="[bodyStyle, miniMizedDeskStyle, mobileVideoStyle, mobileAudioStyle]">
+    <SingleCall v-if="!callInfoContextValue.isGroupCall" class="singCall"></SingleCall>
+    <GroupCall v-else class="singCall"></GroupCall>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, reactive, onUnmounted, toRefs, watchEffect, provide } from '../adapter-vue';
+import SingleCall from './components/SingleCall/SingleCall.vue';
+import GroupCall from './components/GroupCall/GroupCall.vue';
+import { PermitTip } from './components/common/PermitTip/PermitTip';
+import { Toast } from './components/common/Toast';
+import { TUIGlobal, TUIStore, StoreName, TUICallKitAPI, NAME, CallStatus, CallMediaType, VideoDisplayMode, VideoResolution } from '../TUICallService/index';
+import {
+  CallInfoContextKey,
+  CallerUserInfoContextKey,
+  UserInfoExcludeVolumeContextKey,
+  FloatWindowContextKey,
+  TCallerUserInfoValue,
+  TFloatWindowContextValue,
+  CustomUIConfigContextKey,
+  translateContextKey,
+} from './context';
+import { isEmpty } from './util/isEmpty';
+const isMobile = !TUIGlobal.isPC;
+const bodyStyle = isMobile ? 'TUICallKit-mobile transition-animation' : 'TUICallKit-desktop';
+const miniMizedDeskStyle = ref('');
+const mobileAudioStyle = ref('');
+const mobileVideoStyle = ref('');
+const isShowFloatWindow = ref(false);
+const props = withDefaults(
+  defineProps<{
+    beforeCalling?: (...args: any[]) => void;
+    afterCalling?: (...args: any[]) => void;
+    onMinimized?: (...args: any[]) => void;
+    onMessageSentByMe?: (...args: any[]) => void;
+    kickedOut?: (...args: any[]) => void;
+    statusChanged?: (...args: any[]) => void;
+    allowedMinimized?: boolean;
+    allowedFullScreen?: boolean;
+    videoDisplayMode?: string;
+    videoResolution?: string;
+  }>(),
+  {
+    allowedMinimized: false,
+    allowedFullScreen: true,
+    videoDisplayMode: VideoDisplayMode.COVER,
+    videoResolution: VideoResolution.RESOLUTION_720P,
+  },
+);
+
+const callStatus = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
+const callRole = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE));
+const callType = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE));
+const isGroupCall = ref(TUIStore.getData(StoreName.CALL, NAME.IS_GROUP));
+const isEarPhone = ref(TUIStore.getData(StoreName.CALL, NAME.IS_EAR_PHONE));
+const focusElement = ref(null);
+const localUserInfoExcludeVolume = ref(TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO_EXCLUDE_VOLUMN));
+const remoteUserListExcludeVolume = ref(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST));
+const callerUserInfo = ref(TUIStore.getData(StoreName.CALL, NAME.CALLER_USER_INFO));
+const isFloatWindow = ref(TUIStore.getData(StoreName.CALL, NAME.IS_MINIMIZED));
+const enableVirtualBackground = ref(TUIStore.getData(StoreName.CALL, NAME.ENABLE_VIRTUAL_BACKGROUND));
+const isShowEnableVirtualBackground = ref(TUIStore.getData(StoreName.CALL, NAME.IS_SHOW_ENABLE_VIRTUAL_BACKGROUND));
+const customUIConfigContextValue = ref(TUIStore.getData(StoreName.CALL, NAME.CUSTOM_UI_CONFIG));
+const isMuteSpeaker = ref(TUIStore.getData(StoreName.CALL, NAME.IS_MUTE_SPEAKER));
+const translate = ref(TUIStore.getData(StoreName.CALL, NAME.TRANSLATE));
+const callInfoContextValue = reactive({
+  callStatus,
+  callRole,
+  callType,
+  isGroupCall,
+  isEarPhone,
+  focusElement,
+  allowedFullScreen: props.allowedFullScreen,
+  enableVirtualBackground,
+  isShowEnableVirtualBackground,
+  isMuteSpeaker,
+});
+const callerUserInfoValue: TCallerUserInfoValue = reactive({ callerUserInfo });
+const userInfoExcludeVolumeContextValue = reactive({
+  localUserInfoExcludeVolume,
+  remoteUserListExcludeVolume,
+});
+const floatWindowContextValue: TFloatWindowContextValue = reactive({ isFloatWindow });
+const translateContextValue = ref(translate);
+
+const {
+  beforeCalling,
+  afterCalling,
+  onMinimized,
+  onMessageSentByMe,
+  videoDisplayMode,
+  videoResolution,
+  kickedOut,
+  statusChanged,
+  allowedMinimized,
+} = toRefs(props);
+
+const handleCallStatusChange = (value) => {
+  callInfoContextValue.callStatus = value;
+};
+const handleIsGroupChange = (value) => {
+  callInfoContextValue.isGroupCall = value;
+};
+const handleToastInfoChange = (value) => {
+  if (typeof value === 'object') {
+    const { content, type = 'info' } = value;
+    !isEmpty(content) && showToast(translate.value(content), type);
+  }
+};
+
+const handleCallMediaTypeChange = (value) => {
+  callInfoContextValue.callType = value;
+  if (isMobile && isShowFloatWindow.value) {
+    mobileVideoStyle.value = 'miniMized-mobile-audio';
+    mobileAudioStyle.value = '';
+  } 
+  
+  if (isMobile && !isShowFloatWindow.value) {
+    mobileAudioStyle.value = 'mobile-audio';
+  }
+};
+
+const handleIsMinimizedChange = (value) => {
+  floatWindowContextValue.isFloatWindow = value;
+  // 开启悬浮窗
+  if (value) {
+    if (!isMobile) {
+      miniMizedDeskStyle.value = 'miniMized';
+    } else {
+      if (callInfoContextValue.callType === CallMediaType.AUDIO) {
+        mobileAudioStyle.value = 'miniMized-mobile-audio';
+      } else {
+        mobileVideoStyle.value = 'miniMized-mobile-video';
+      }
+    }
+  } else {
+    // 关闭悬浮窗
+    mobileAudioStyle.value = 'mobile-audio';
+    miniMizedDeskStyle.value = '';
+    mobileVideoStyle.value = '';
+  }
+};
+
+const handlePermissionErrorTipChange = (data) => {
+  if (data && TUIGlobal.isPC) {
+    try {
+      PermitTip.show();
+    } catch (error) {
+      console.debug(error);
+    }
+  }
+};
+const handleCallRoleChange = (value) => {
+  callInfoContextValue.callRole = value;
+};
+const handleLocalUserInfoChange = (value) => {
+  userInfoExcludeVolumeContextValue.localUserInfoExcludeVolume = value;
+};
+const handleRemoteUserInfoListChange = (value) => {
+  userInfoExcludeVolumeContextValue.remoteUserListExcludeVolume = [...value];
+};
+const handleCallerUserInfoChange = (value) => {
+  callerUserInfoValue.callerUserInfo = value;
+};
+const handEarPhoneChange = (value) => {
+  callInfoContextValue.isEarPhone = value;
+};
+const handleEnableVirtualBackgroundChange = (value) => {
+  callInfoContextValue.enableVirtualBackground = value;
+};
+const handleIsShowEnableVirtualBackgroundChange = (value) => {
+  callInfoContextValue.isShowEnableVirtualBackground = value;
+};
+const handleCustomUIConfigChange = (value) => {
+  customUIConfigContextValue.value = value;
+};
+const handleMuteSpeakerChange = (value) => {
+  callInfoContextValue.isMuteSpeaker = value;
+};
+const handleTranslateChange = (value) => {
+  translate.value = value;
+};
+
+watchEffect(() => {
+  TUICallKitAPI.setCallback({
+    beforeCalling: beforeCalling && beforeCalling.value,
+    afterCalling: afterCalling && afterCalling.value,
+    onMinimized: onMinimized && onMinimized.value,
+    onMessageSentByMe: onMessageSentByMe && onMessageSentByMe.value,
+    kickedOut: kickedOut && kickedOut.value,
+    statusChanged: statusChanged && statusChanged.value,
+  });
+});
+
+const watchOptions = {
+  [NAME.CALL_STATUS]: handleCallStatusChange,
+  [NAME.IS_GROUP]: handleIsGroupChange,
+  [NAME.TOAST_INFO]: handleToastInfoChange,
+  [NAME.CALL_MEDIA_TYPE]: handleCallMediaTypeChange,
+  [NAME.SHOW_PERMISSION_TIP]: handlePermissionErrorTipChange,
+  [NAME.CALL_ROLE]: handleCallRoleChange,
+  [NAME.LOCAL_USER_INFO_EXCLUDE_VOLUMN]: handleLocalUserInfoChange,
+  [NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST]: handleRemoteUserInfoListChange,
+  [NAME.CALLER_USER_INFO]: handleCallerUserInfoChange,
+  [NAME.IS_EAR_PHONE]: handEarPhoneChange,
+  [NAME.ENABLE_VIRTUAL_BACKGROUND]: handleEnableVirtualBackgroundChange,
+  [NAME.IS_SHOW_ENABLE_VIRTUAL_BACKGROUND]: handleIsShowEnableVirtualBackgroundChange,
+  [NAME.CUSTOM_UI_CONFIG]: handleCustomUIConfigChange,
+  [NAME.IS_MUTE_SPEAKER]: handleMuteSpeakerChange,
+  [NAME.TRANSLATE]: handleTranslateChange,
+};
+
+onMounted(() => {
+  if(allowedMinimized.value){
+    TUICallKitAPI.enableFloatWindow(allowedMinimized.value)
+  }
+  TUICallKitAPI.setVideoDisplayMode(videoDisplayMode.value as any);
+  TUICallKitAPI.setVideoResolution(videoResolution.value as any);
+  TUIStore.watch(
+    StoreName.CALL,
+    watchOptions,
+    {
+      notifyRangeWhenWatch: NAME.MYSELF,
+    },
+  );
+  TUIStore.watch(StoreName.CALL, {
+    [NAME.IS_MINIMIZED]: handleIsMinimizedChange,
+  });
+});
+
+function showToast(value: string, type: string) {
+  switch (type) {
+    case 'info':
+      Toast?.info(value as any);
+      break;
+    case 'error':
+      Toast?.error(value as any);
+      break;
+    default:
+      break;
+  }
+}
+
+onUnmounted(async () => {
+  TUIStore.unwatch(StoreName.CALL, {
+    ...watchOptions,
+    [NAME.IS_MINIMIZED]: handleIsMinimizedChange,
+  });
+});
+
+provide(CallInfoContextKey, callInfoContextValue);
+provide(CallerUserInfoContextKey, callerUserInfoValue);
+provide(UserInfoExcludeVolumeContextKey, userInfoExcludeVolumeContextValue);
+provide(FloatWindowContextKey, floatWindowContextValue);
+provide(CustomUIConfigContextKey, customUIConfigContextValue);
+provide(translateContextKey, translateContextValue);
+</script>
+
+<style lang="scss">
+.TUICallKit-mobile {
+  width: 100%;
+  height: 100%;
+
+
+  .singCall {
+    width: 100%;
+    height: 100%;
+
+  }
+}
+
+.transition-animation {
+  transform: translateY(-100%);
+  animation: slideInDown 0.5s ease forwards;
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.TUICallKit-desktop {
+  margin: 0 auto;
+  position: relative;
+  position: relative;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 12;
+  border-radius: 16px;
+
+  .singCall {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.mobile-audio {
+  background-color: white;
+}
+
+.miniMized {
+  width: 168px !important;
+  height: 56px !important;
+  overflow: visible !important;
+}
+
+.miniMized-mobile-audio {
+  width: 72px;
+  height: 72px;
+  position: fixed;
+  top: 40px;
+  right: 40px;
+}
+
+.miniMized-mobile-video {
+  width: 40%;
+  height: 30%;
+  position: fixed;
+  top: 40px;
+  right: 40px;
+}
+</style>

package/src/Components/assets/MicrophoneVolume/desktop/mic-off.svg

@@ -0,0 +1,5 @@
+<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="M8.73708 12.9963C8.71266 12.8344 8.7 12.6687 8.7 12.5V6C8.7 4.17746 10.1775 2.7 12 2.7C13.5488 2.7 14.8484 3.76695 15.2038 5.20592L16.4458 3.70974C15.615 2.10033 13.936 1 12 1C9.23858 1 7 3.23858 7 6V12.5C7 13.2333 7.15786 13.9297 7.44145 14.5572L8.73708 12.9963ZM11.3385 15.7337L10.1618 17.1513C10.7308 17.3763 11.3509 17.5 12 17.5C14.7614 17.5 17 15.2614 17 12.5V8.9133L15.3 10.9613V12.5C15.3 14.3225 13.8225 15.8 12 15.8C11.7734 15.8 11.5522 15.7772 11.3385 15.7337ZM5.96519 16.3356C5.25933 15.2273 4.85039 13.9114 4.85039 12.5V11H3.15039V12.5C3.15039 14.4416 3.77562 16.2371 4.83572 17.6963L5.96519 16.3356ZM7.63218 20.1986L8.7394 18.8647C9.71718 19.3667 10.8257 19.65 12.0004 19.65C15.9492 19.65 19.1504 16.4488 19.1504 12.5V11H20.8504V12.5C20.8504 17.0498 17.4171 20.7976 13 21.2942V24H11V21.2941C9.78613 21.1575 8.64658 20.7754 7.63218 20.1986Z" fill="#fff" />
+  <path d="M5.73682 19.5513L18.2667 4.46371" stroke="#ED414D" style="stroke:#ED414D;stroke:color(display-p3 0.9292 0.2555 0.3004);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+

package/src/Components/assets/MicrophoneVolume/desktop/mic-on.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <rect x="11" y="20" width="2" height="4" fill="#fff" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.1499 11V12.5C3.1499 17.3877 7.11218 21.35 11.9999 21.35C16.8876 21.35 20.8499 17.3877 20.8499 12.5V11H19.1499V12.5C19.1499 16.4488 15.9487 19.65 11.9999 19.65C8.05107 19.65 4.8499 16.4488 4.8499 12.5V11H3.1499Z" fill="#fff"/>
+  <rect x="7.85" y="1.85" width="8.3" height="14.8" rx="4.15" stroke="#fff" stroke-width="1.7"/>
+</svg>

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

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="m557.2 512 233.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"/></svg>

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

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M512 97.524c228.913 0 414.476 185.563 414.476 414.476S740.913 926.476 512 926.476 97.524 740.913 97.524 512 283.087 97.524 512 97.524zM641.292 330.97 512.024 460.264 382.708 330.97l-51.737 51.737 129.317 129.268-129.317 129.316 51.737 51.737L512 563.688l129.292 129.316 51.737-51.736L563.688 512l129.316-129.292-51.736-51.737z" fill="#d54941"/></svg>

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

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M512 97.524c228.913 0 414.476 185.563 414.476 414.476S740.913 926.476 512 926.476 97.524 740.913 97.524 512 283.087 97.524 512 97.524zm36.571 341.333H475.43V731.43h73.142V438.857zm0-121.905H475.43v73.143h73.142v-73.143z" fill="#0052d9"/></svg>

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

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M520.665 64.564a29.244 29.244 0 0 0-7.071-.894c-16.211 0-29.35 13.14-29.35 29.35 0 15.83 12.538 28.696 28.223 29.293v.073c.375 0 .751-.014 1.127-.014 216.493 0 389.629 173.942 389.629 390.433 0 216.496-173.136 388.827-389.63 388.827s-389.63-172.333-389.63-388.829c0-.27.01-.536.01-.804h-.01c0-16.209-13.141-29.35-29.35-29.35s-29.35 13.139-29.35 29.35c0 .055.007.11.007.164-.001.214-.007.425-.007.64 0 247.609 200.722 448.331 448.33 448.331 247.607 0 448.33-200.722 448.33-448.33-.002-245.242-196.917-444.456-441.258-448.24z" fill="#fff"/></svg>

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

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512 97.524c228.913 0 414.476 185.563 414.476 414.476S740.913 926.476 512 926.476 97.524 740.913 97.524 512 283.087 97.524 512 97.524zm193.195 218.331L447.22 581.315 343.284 473.502l-52.663 50.762 156.38 162.23 310.661-319.683-52.467-50.956z" fill="#2ba471"/></svg>

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

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M512 97.524c228.913 0 414.476 185.563 414.476 414.476S740.913 926.476 512 926.476 97.524 740.913 97.524 512 283.087 97.524 512 97.524zm36.571 341.333H475.43V731.43h73.142V438.857zm0-121.905H475.43v73.143h73.142v-73.143z" fill="#e37318"/></svg>

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

@@ -0,0 +1 @@
+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M4.162 5.677C2.58 7.258 1.967 9.608 2.874 11.652a32.422 32.422 0 0 0 6.733 9.793 32.423 32.423 0 0 0 9.793 6.733c2.044.907 4.394.293 5.975-1.288l2.543-2.543a1.5 1.5 0 0 0-.073-2.19l-4.808-4.207a1.5 1.5 0 0 0-2.048.068l-2.131 2.131a.736.736 0 0 1-.932.095 26.385 26.385 0 0 1-3.9-3.218 26.385 26.385 0 0 1-3.218-3.9.736.736 0 0 1 .095-.932l2.13-2.13a1.5 1.5 0 0 0 .069-2.05L8.895 3.208a1.5 1.5 0 0 0-2.19-.073L4.162 5.677z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs></svg>

package/src/Components/assets/button/background-blur-close.svg

@@ -0,0 +1 @@
+<svg width="26" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h24a1 1 0 0 1 1 1v24a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm13 13a4.179 4.179 0 1 0 0-8.357A4.179 4.179 0 0 0 13 14zm-1.857 1.346a5.571 5.571 0 0 0-5.572 5.571v2.25a1 1 0 0 0 1 1H19.43a1 1 0 0 0 1-1v-2.25a5.571 5.571 0 0 0-5.572-5.571L13 18.019l-1.857-2.673zm-9.75-7.31 6.643-6.643h2.232l-8.875 8.875V8.036zm0 12.232v-2.233l6.642-6.641L9.15 12.51l-7.758 7.758zm23.214-5.447v2.233l-2.473 2.473-1.116-1.116 3.59-3.59zm0-10v2.233l-7.092 7.092-1.116-1.116 8.208-8.209zm-4.339-3.428-3.895 3.895-1.117-1.116 2.78-2.78h2.232z" fill="#000" style="fill:#000;fill-opacity:1"/></svg>

package/src/Components/assets/button/background-blur-open.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 2a1 1 0 0 1 1-1h24a1 1 0 0 1 1 1v24a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm14.653 14.801a4.18 4.18 0 1 0-3.306 0h-.204a5.571 5.571 0 0 0-5.572 5.572v2.25a1 1 0 0 0 1 1H20.43a1 1 0 0 0 1-1v-2.25a5.571 5.571 0 0 0-5.572-5.572h-.204zm-13.26-9.18L7.62 2.393h2.232l-7.46 7.46V7.621zm0 8.13v-2.232L13.518 2.393h2.233L2.393 15.75zm0 5.898v-2.233l5.459-5.459c.062.626.217 1.224.452 1.78L2.393 21.65zM16.398 7.644a6.14 6.14 0 0 0-1.78-.452l4.798-4.8h2.233l-5.251 5.252zM2.84 24.867l1.731-1.732V25c0 .118.007.234.02.348l-.258.258a1.996 1.996 0 0 1-1.493-.739zM18.549 9.158c.36.393.672.833.923 1.31l6.134-6.135a1.996 1.996 0 0 0-.739-1.493l-6.319 6.318zm.97 6.963.125.071 5.963-5.963V7.997l-5.43 5.43a6.149 6.149 0 0 1-.659 2.694zm2.12 1.741c.346.409.65.854.903 1.33l3.065-3.065v-2.232l-3.967 3.967zm1.79 4.888v1.453l2.178-2.178v-2.233l-2.215 2.215c.024.244.037.492.037.743z" fill="#fff"/></svg>

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

@@ -0,0 +1 @@
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" fill="#fff"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.952 23.334h8.881a1 1 0 0 0 1-1V11.43L9.952 23.334zM21.364 9.585l1.626-1.958 2.42-1.13a1 1 0 0 1 1.423.907v13.193a1 1 0 0 1-1.423.906l-2.952-1.378-.516-.24a1 1 0 0 1-.578-.907V9.585zm-3.5-4.918L2.367 23.334h-.201a1 1 0 0 1-1-1V5.667a1 1 0 0 1 1-1h15.696zM5.833 11.35h4.082v-1.7H5.833v1.7z"/></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M9.952 23.334h8.881a1 1 0 0 0 1-1V11.43L9.952 23.334zM21.364 9.585l1.626-1.958 2.42-1.13a1 1 0 0 1 1.423.907v13.193a1 1 0 0 1-1.423.906l-2.952-1.378-.516-.24a1 1 0 0 1-.578-.907V9.585zm-3.5-4.918L2.367 23.334h-.201a1 1 0 0 1-1-1V5.667a1 1 0 0 1 1-1h15.696zM5.833 11.35h4.082v-1.7H5.833v1.7z" fill="#fff" style="fill:#fff;fill-opacity:1"/><path d="m9.952 23.334-1.308-1.086-2.313 2.786h3.62v-1.7zm9.881-11.904h1.7V6.72l-3.008 3.624 1.308 1.086zm3.157-3.803-.72-1.54-.345.161-.244.294 1.309 1.085zm-1.626 1.958L20.056 8.5l-.392.472v.614h1.7zm4.046-3.087.72 1.54-.72-1.54zm1.423.906h1.7-1.7zm0 13.193h-1.7 1.7zm-1.423.906-.719 1.54.72-1.54zm-2.952-1.378.72-1.54-.72 1.54zm-.516-.24-.72 1.54.72-1.54zm-.578-.907h-1.7 1.7zM2.368 23.334v1.7h.798l.51-.614-1.308-1.086zM17.863 4.667l1.308 1.086 2.313-2.786h-3.62v1.7zM9.916 11.35v1.7h1.7v-1.7h-1.7zm-4.083 0h-1.7v1.7h1.7v-1.7zm4.083-1.7h1.7v-1.7h-1.7v1.7zm-4.083 0v-1.7h-1.7v1.7h1.7zm13 11.984H9.952v3.4h8.881v-3.4zm-.7.7a.7.7 0 0 1 .7-.7v3.4a2.7 2.7 0 0 0 2.7-2.7h-3.4zm0-10.904v10.904h3.4V11.43h-3.4zm.392-1.086L8.644 22.248l2.616 2.171 9.881-11.903-2.616-2.172zm3.157-3.802-1.626 1.957 2.616 2.172 1.626-1.958-2.616-2.171zm3.01-1.585-2.421 1.13 1.438 3.08 2.42-1.129-1.438-3.08zm3.841 2.447c0-1.976-2.052-3.282-3.842-2.447l1.438 3.081a.7.7 0 0 1-.996-.634h3.4zm0 13.193V7.404h-3.4v13.193h3.4zm-3.842 2.447c1.79.835 3.842-.472 3.842-2.447h-3.4a.7.7 0 0 1 .996-.635l-1.438 3.082zm-2.952-1.378 2.952 1.378 1.438-3.082-2.952-1.377-1.438 3.08zm-.516-.241.516.24 1.438-3.08-.517-.241-1.437 3.08zm-1.559-2.447a2.7 2.7 0 0 0 1.559 2.447l1.438-3.081a.7.7 0 0 1 .403.634h-3.4zm0-9.393v9.393h3.4V9.585h-3.4zM3.676 24.42 19.171 5.753 16.555 3.58 1.06 22.248l2.616 2.171zm-1.308-2.785h-.201v3.4h.201v-3.4zm-.201 0a.7.7 0 0 1 .7.7h-3.4a2.7 2.7 0 0 0 2.7 2.7v-3.4zm.7.7V5.667h-3.4v16.667h3.4zm0-16.667a.7.7 0 0 1-.7.7v-3.4a2.7 2.7 0 0 0-2.7 2.7h3.4zm-.7.7h15.696v-3.4H2.166v3.4zm7.75 3.283H5.832v3.4h4.083v-3.4zm-1.7 0v1.7h3.4v-1.7h-3.4zm-2.384 1.7h4.083v-3.4H5.833v3.4zm1.7 0v-1.7h-3.4v1.7h3.4z" fill="#fff" style="fill:#fff;fill-opacity:1" mask="url(#a)"/><path d="M4.563 25.269 22.14 4.084" stroke="#fff" style="stroke:#fff;stroke-opacity:1" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>

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

@@ -0,0 +1 @@
+<svg width="26" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.916 8.2h.85V4.8H3.984v3.4h4.933zm-7.9-6.533a.15.15 0 0 1 .15-.15h16.667a.15.15 0 0 1 .15.15v16.666a.15.15 0 0 1-.15.15H1.167a.15.15 0 0 1-.15-.15V1.667zm20.198 3.355a.15.15 0 0 1 .087-.136l3.469-1.618a.15.15 0 0 1 .213.135v13.193a.15.15 0 0 1-.213.136l-3.47-1.618a.15.15 0 0 1-.086-.136V5.022z" 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/inviteUser.svg

@@ -0,0 +1 @@
+<svg t="1708400849531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8267" width="200" height="200"><path d="M121.51 460.15h779.64v100.6H121.51z" p-id="8268" fill="#ffffff"></path><path d="M461.035 900.271v-779.64h100.6v779.64z" p-id="8269" fill="#ffffff"></path></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 @@
+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30 16.05c0-2.235-1.228-4.33-3.314-5.135A32.423 32.423 0 0 0 15 8.751c-4.12 0-8.06.766-11.685 2.164C1.228 11.719 0 13.815 0 16.051v3.597a1.5 1.5 0 0 0 1.6 1.496l6.375-.425a1.5 1.5 0 0 0 1.4-1.496v-3.014c0-.353.245-.659.591-.726A26.382 26.382 0 0 1 15 15.001c1.722 0 3.404.166 5.034.482a.736.736 0 0 1 .591.726v3.014a1.5 1.5 0 0 0 1.4 1.496l6.375.425a1.5 1.5 0 0 0 1.6-1.496V16.05z" fill="#fff"/></svg>

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

@@ -0,0 +1 @@
+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 7.5a6.25 6.25 0 0 1 11.133-3.902L8.873 16.862a6.28 6.28 0 0 1-.123-1.237V7.5zM6.806 19.352A8.967 8.967 0 0 1 6 15.625V13.75H4v1.875c0 1.963.514 3.806 1.416 5.402l1.39-1.675zm2.406 5.629 1.292-1.558A9 9 0 0 0 24 15.625v-1.874h2v1.875c0 5.738-4.393 10.45-10 10.955V30h-2v-3.42a10.934 10.934 0 0 1-4.788-1.6zm3.086-3.719 8.952-10.784v5.147a6.25 6.25 0 0 1-8.952 5.637z" fill="#fff" style="fill:#fff;fill-opacity:1"/><path d="M6.419 24.084 22.094 5.209" stroke="#fff" style="stroke:#fff;stroke-opacity:1" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>

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

@@ -0,0 +1 @@
+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 15.625V13.75h2v1.875a9 9 0 1 0 18 0V13.75h2v1.875c0 5.738-4.393 10.45-10 10.955V30h-2v-3.42c-5.607-.505-10-5.217-10-10.955z" 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 @@
+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity=".5" cx="15" cy="15" r="15" fill="#22262E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.484 14.313a.4.4 0 0 1 .014-.565l.87-.827a.4.4 0 0 1 .566.015L15 17.216l4.066-4.28a.4.4 0 0 1 .565-.015l.87.827a.4.4 0 0 1 .015.565l-5.033 5.298a.667.667 0 0 1-.966 0l-5.033-5.298z" fill="#fff"/></svg>

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

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><mask id="b" fill="#fff"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 11.05a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm-2 1.45a6 6 0 0 0-6 6V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2.5a6 6 0 0 0-6-6l-2 2.88-2-2.88z"/></mask><path d="m8.5 12.5 1.396-.97-.507-.73H8.5v1.7zm4 0v-1.7h-.889l-.507.73 1.396.97zm-2 2.88-1.396.969 1.396 2.01 1.396-2.01-1.396-.97zm2.8-8.83a2.8 2.8 0 0 1-2.8 2.8v3.4a6.2 6.2 0 0 0 6.2-6.2h-3.4zm-2.8-2.8a2.8 2.8 0 0 1 2.8 2.8h3.4a6.2 6.2 0 0 0-6.2-6.2v3.4zm-2.8 2.8a2.8 2.8 0 0 1 2.8-2.8V.35a6.2 6.2 0 0 0-6.2 6.2h3.4zm2.8 2.8a2.8 2.8 0 0 1-2.8-2.8H4.3a6.2 6.2 0 0 0 6.2 6.2v-3.4zM4.2 18.5a4.3 4.3 0 0 1 4.3-4.3v-3.4a7.7 7.7 0 0 0-7.7 7.7h3.4zm0 2.5v-2.5H.8V21h3.4zm-.7-.7a.7.7 0 0 1 .7.7H.8a2.7 2.7 0 0 0 2.7 2.7v-3.4zm14 0h-14v3.4h14v-3.4zm-.7.7a.7.7 0 0 1 .7-.7v3.4a2.7 2.7 0 0 0 2.7-2.7h-3.4zm0-2.5V21h3.4v-2.5h-3.4zm-4.3-4.3a4.3 4.3 0 0 1 4.3 4.3h3.4a7.7 7.7 0 0 0-7.7-7.7v3.4zm-.604 2.149 2-2.879-2.792-1.94-2 2.88 2.792 1.939zM7.104 13.47l2 2.879 2.792-1.94-2-2.879-2.792 1.94z" fill="#D5E0F2" mask="url(#b)"/></g><path d="M16 11h7m-3.5-3.5v7" stroke="#D5E0F2" stroke-width="1.7"/><defs><filter id="a" x="-5.5" y="-5.949" width="32" height="35.95" 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_2584_236"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_2584_236" result="shape"/></filter></defs></svg>

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

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 4H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5.5" stroke="#D5E0F2" stroke-width="1.5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 3.5v5h5v-5h-5zM11 2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-6z" fill="#D5E0F2"/></svg>

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

@@ -0,0 +1 @@
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M25.018 5.763a2 2 0 0 1 2 2v15.528a2 2 0 0 1-2 2H2.982a2 2 0 0 1-2-2V7.763a2 2 0 0 1 2-2h4.262a2 2 0 0 0 1.494-.67l1.41-1.587a2 2 0 0 1 1.495-.672h4.714a2 2 0 0 1 1.494.671l1.41 1.587a2 2 0 0 0 1.495.671h4.262zM11.723 9.585a5.907 5.907 0 0 1 2.186-.417c1.719 0 3.27.733 4.341 1.903V9.918h1.5v5.001h-1.5v-.005c-.002-2.332-1.932-4.245-4.34-4.245-.58 0-1.13.11-1.633.31l-.554-1.394zM8.25 19.919v-5h1.5c0 2.334 1.93 4.25 4.34 4.25.58 0 1.13-.111 1.633-.31l.554 1.393a5.908 5.908 0 0 1-2.186.417 5.873 5.873 0 0 1-4.341-1.903v1.153h-1.5z" fill="#fff"/></svg>

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

@@ -0,0 +1 @@
+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity=".5" cx="15" cy="15" r="15" fill="#22262E" style="fill:color(display-p3 .1333 .149 .1804);fill-opacity:1"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.516 17.452a.4.4 0 0 1-.014.565l-.87.827a.4.4 0 0 1-.566-.015L15 14.55l-4.066 4.28a.4.4 0 0 1-.566.015l-.87-.827a.4.4 0 0 1-.014-.565l5.033-5.298a.667.667 0 0 1 .966 0l5.033 5.298z" fill="#fff" style="fill:#fff;fill-opacity:1"/></svg>

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

@@ -0,0 +1 @@
+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m10.36 22.842 4.235 3.56c.697.587 1.76.091 1.76-.82V15.62l-5.995 7.223zm13.356-16.09 1.285-1.548A13.955 13.955 0 0 1 29 15c0 5.183-2.817 9.707-7 12.127l-.865.5-1.001-1.731.865-.5C24.59 23.318 27 19.44 27 15c0-3.194-1.248-6.097-3.284-8.248zm-3.278 3.95 1.288-1.553C23.14 10.613 24 12.71 24 15c0 2.869-1.35 5.433-3.445 6.832l-.831.555-1.11-1.663.83-.556C20.938 19.172 22 17.258 22 15c0-1.716-.613-3.232-1.562-4.299zm-4.082-4.22L3.928 21.456H2.252c-.592 0-1.072-.48-1.072-1.072V9.635c0-.591.478-1.07 1.069-1.072l6.073-.017c.251 0 .494-.09.687-.251l5.586-4.697c.697-.586 1.76-.091 1.76.82v2.065z" fill="#fff"/><path d="M4.564 25.268 22.14 4.084" stroke="#fff" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>

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

@@ -0,0 +1 @@
+<svg width="28" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m20.135.373.866.5C25.183 3.294 28 7.818 28 13c0 5.183-2.817 9.707-7 12.127l-.865.5-1.001-1.731.865-.5C23.59 21.318 26 17.44 26 13s-2.411-8.319-6-10.395l-.866-.5L20.135.372zm-6.49 1.016a1.071 1.071 0 0 1 1.71.86V23.75c0 .881-1.003 1.386-1.71.86l-6.65-4.945a1.071 1.071 0 0 0-.639-.211H1.252c-.592 0-1.072-.48-1.072-1.072V7.634c0-.59.478-1.07 1.068-1.071l5.11-.017c.23 0 .452-.075.636-.211l6.65-4.946zm5.91 4.78-.831-.556-1.111 1.663.832.556C19.937 8.828 21 10.742 21 13c0 2.259-1.063 4.172-2.555 5.168l-.832.556 1.11 1.663.832-.555C21.65 18.432 23 15.869 23 13c0-2.869-1.35-5.433-3.445-6.832z" fill="#2E333D"/></svg>

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

@@ -0,0 +1 @@
+<svg width="20" height="19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.302 2.09a7.164 7.164 0 0 0-8.287 7.539l-1.978.358A9.274 9.274 0 0 1 0 9.162C0 4.102 4.104 0 9.167 0c.508 0 1.007.041 1.493.12l-.358 1.97zm-.239 1.322A5.832 5.832 0 0 0 3.338 9.4l1.998-.364a3.832 3.832 0 0 1 4.37-3.655l.357-1.97zM8.181 7.218l10.445-.005a.47.47 0 0 1 .457.57l-2.287 10.186a.467.467 0 0 1-.823.19l-2.32-2.896C9.61 18.498 3.71 17.846.473 13.806c-.138-.172.049-.408.259-.339a8.44 8.44 0 0 0 7.94-1.42l1.463-1.172-2.32-2.896a.468.468 0 0 1 .365-.761z" fill="#fff" style="fill:#fff;fill-opacity:1"/></svg>

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

@@ -0,0 +1 @@
+<svg width="10" height="6" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 0 5 3.75.5 0v1.562l4.116 3.43.384.32.384-.32L9.5 1.562V0z" fill="#666"/></svg>

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

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.536 6.682c-.33-.955.088-1.98.9-2.581.617-.456 1.236-.916 1.589-1.178a.396.396 0 0 1 .539.062l1.925 2.264a.396.396 0 0 1 0 .513l-1.18 1.39a.388.388 0 0 0-.041.45 8.667 8.667 0 0 0 1.37 1.758c.57.57 1.12.982 1.765 1.364a.389.389 0 0 0 .45-.041l1.383-1.174a.397.397 0 0 1 .514 0l2.266 1.925c.159.135.186.37.062.538l-1.185 1.604c-.596.806-1.614 1.216-2.562.89a12.545 12.545 0 0 1-4.797-3.003 12.54 12.54 0 0 1-2.998-4.78z" fill="#1C66E5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.889 2.133a.356.356 0 0 0-.356.356v3.685c0 .196.16.355.356.355h3.685c.196 0 .355-.159.355-.355v-.186a.32.32 0 0 1 .455-.29l.687.32a.356.356 0 0 0 .506-.322v-2.73c0-.26-.27-.432-.506-.322l-.687.32a.32.32 0 0 1-.455-.29V2.49a.356.356 0 0 0-.355-.356H8.889z" fill="#1C66E5"/></svg>

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

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path d="M512 466.752 86.656 41.344a32 32 0 0 0-45.312 45.312L466.752 512 41.344 937.344a32 32 0 0 0 45.312 45.312L512 557.248l425.344 425.408a32 32 0 0 0 45.312-45.312L557.248 512 982.656 86.656a32 32 0 0 0-45.312-45.312L512 466.752z" fill="#707070"/></svg>

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

@@ -0,0 +1 @@
+<svg width="100" height="100" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="url(#a)" d="M-5-5h110v110H-5z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25 71.5c0-10.264 7.93-18.676 17.998-19.443.496-.038.997-.057 1.502-.057h13c.505 0 1.006.02 1.501.057C69.07 52.824 77 61.236 77 71.5v6.783H25V71.5zM44.5 45.605a14.075 14.075 0 0 1-.205-.104c-4.704-2.431-7.92-7.34-7.92-13.001 0-8.077 6.548-14.625 14.625-14.625S65.625 24.423 65.625 32.5c0 5.66-3.216 10.57-7.92 13-.068.036-.136.07-.205.105a14.565 14.565 0 0 1-6.5 1.52c-2.335 0-4.542-.547-6.5-1.52z" fill="#D5E0F2"/><defs><linearGradient id="a" 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/loading-audio.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512 170.667V256a256 256 0 1 1-223.573 131.2l-74.496-41.6A341.333 341.333 0 1 0 512 170.667z" opacity=".3"/></svg>

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

@@ -0,0 +1 @@
+<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.828 12.476c.754.429 1.61.722 2.505.82V15c0 .184.15.334.334.334h.666c.184 0 .334-.15.334-.334v-1.703C11.54 12.98 14 10.666 14 8.273v-.592a.333.333 0 0 0-.333-.333H13a.333.333 0 0 0-.333.333v.592l-.004.12c-.095 1.76-2.265 3.605-4.659 3.607h-.008c-.77 0-1.519-.192-2.181-.51l-.987.986zm2.004-2.004c.364.12.758.186 1.168.186 1.827 0 3.333-1.303 3.333-2.932V5.97l-4.501 4.502zm4.075-8.317-6.17 6.17a2.602 2.602 0 0 1-.067-.468l-.003-.131V3.59C4.667 1.961 6.173.658 8 .658c1.24 0 2.333.601 2.907 1.497zM3.625 9.437l-.979.978c-.384-.625-.615-1.307-.643-1.999L2 8.273v-.608c0-.182.147-.33.33-.333l.664-.007a.333.333 0 0 1 .336.332l.003.616c0 .389.104.784.292 1.164z" fill="#fff"/><rect x=".61" y="13.451" width="19.013" height="1.5" rx=".75" transform="rotate(-45 .61 13.451)" fill="#FE3C44"/></svg>

package/src/Components/assets/desktop/acceptAudio.svg

@@ -0,0 +1,4 @@
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" class="design-iconfont">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.95431 8.95431 0 20 0V0C31.0457 0 40 8.95431 40 20V20C40 31.0457 31.0457 40 20 40V40C8.95431 40 0 31.0457 0 20V20Z" fill="#19D255" />
+    <path d="M23.5397 16.9535C24.7172 18.131 25.4436 19.1544 28.0149 17.0938C30.5885 15.0308 28.5979 13.6354 27.4573 12.4955C26.1407 11.1806 21.2674 12.3951 16.4667 17.1935C11.6683 21.9919 10.4521 26.8677 11.7687 28.1844C12.9092 29.3249 14.3022 31.3156 16.3646 28.7437C18.4282 26.173 17.4041 25.446 16.2248 24.2691C15.4043 23.4444 17.1034 21.3853 18.8797 19.6066C20.656 17.8278 22.7174 16.1288 23.5397 16.9535Z" fill="white" />
+  </svg>

package/src/Components/assets/desktop/acceptVideo.svg

@@ -0,0 +1,8 @@
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" class="design-iconfont">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
+            fill="#19D255" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M24.0421 14.8129C23.8814 14.0792 23.3684 13.5231 22.7291 13.3902C21.6674 13.2126 20.3495 13 17.6667 13C14.7319 13 13.5011 13.2009 12.5263 13.3669C11.9235 13.5295 11.4484 14.0688 11.2926 14.7675C11.153 15.6419 11 17.8298 11 19.6667C11 21.4724 11.1481 23.6461 11.2912 24.5205C11.4519 25.2542 11.9649 25.8103 12.6042 25.9431C13.666 26.1207 14.9839 26.3333 17.6667 26.3333C20.3495 26.3333 21.6674 26.1207 22.7305 25.9522C23.3726 25.8194 23.8891 25.26 24.0512 24.5231C24.1853 23.6461 24.3333 21.4724 24.3333 19.6667C24.3333 17.8609 24.1853 15.6872 24.0421 14.8129ZM12.6667 15.5C12.6667 15.0398 13.0398 14.6667 13.5 14.6667H14.3333C14.7936 14.6667 15.1667 15.0398 15.1667 15.5C15.1667 15.9602 14.7936 16.3333 14.3333 16.3333H13.5C13.0398 16.3333 12.6667 15.9602 12.6667 15.5ZM28.5 14.6667C27.0942 14.6667 26 16.547 26 17.6429V21.6905C26 22.9804 26.8008 24.6667 28.5 24.6667C29.2858 24.6667 29.3333 21.4524 29.3333 19.6667C29.3333 17.881 29.3333 14.6667 28.5 14.6667Z"
+            fill="#fff" />
+    </svg>

package/src/Components/assets/desktop/camera-false.svg

@@ -0,0 +1,5 @@
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" class="design-iconfont">
+    <rect width="40" height="40" rx="20" fill="#DADADA" fill-opacity=".3" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.7221 12.9557C22.7001 12.9496 22.6779 12.944 22.6556 12.939C21.5553 12.7392 20.1895 12.5 17.4091 12.5C14.3676 12.5 13.092 12.726 12.0818 12.9127C11.4571 13.0957 10.9647 13.7024 10.8033 14.4884C10.6585 15.4721 10.5 17.9335 10.5 20C10.5 21.7343 10.6118 23.7703 10.7369 24.9409L22.7221 12.9557ZM12.755 27.1654C13.7704 27.3355 15.1033 27.5 17.4091 27.5C20.1658 27.5 21.5319 27.2649 22.6289 27.0761L22.6571 27.0712C23.3225 26.9218 23.8578 26.2925 24.0258 25.4634C24.1647 24.4769 24.3182 22.0315 24.3182 20C24.3182 18.5797 24.2432 16.957 24.1473 15.773L12.755 27.1654ZM13.0606 14.375C12.6004 14.375 12.2273 14.7481 12.2273 15.2083V15.4167C12.2273 15.8769 12.6004 16.25 13.0606 16.25H13.9848C14.4451 16.25 14.8182 15.8769 14.8182 15.4167V15.2083C14.8182 14.7481 14.4451 14.375 13.9848 14.375H13.0606ZM26.0455 17.7232C26.0455 16.4904 27.1794 14.375 28.6364 14.375C29.5 14.375 29.5 17.9911 29.5 20C29.5 22.0089 29.4508 25.625 28.6364 25.625C26.8754 25.625 26.0455 23.7279 26.0455 22.2768V17.7232Z" fill="#fff" />
+    <rect x="24.8574" y="11.8564" width="1.5" height="22" rx=".75" transform="rotate(45 24.8574 11.8564)" fill="#FE3C44" />
+  </svg>

package/src/Components/assets/desktop/camera.svg

@@ -0,0 +1,6 @@
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" class="design-iconfont">
+    <rect width="40" height="40" rx="20" fill="#DADADA" fill-opacity=".3" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M24.0164 14.5395C23.8498 13.7141 23.3182 13.0884 22.6556 12.939C21.5553 12.7392 20.1895 12.5 17.4091 12.5C14.3676 12.5 13.092 12.726 12.0818 12.9127C11.4571 13.0957 10.9647 13.7024 10.8033 14.4884C10.6585 15.4721 10.5 17.9335 10.5 20C10.5 22.0315 10.6535 24.4769 10.8018 25.4605C10.9684 26.2859 11.5 26.9116 12.1625 27.061C13.2629 27.2608 14.6287 27.5 17.4091 27.5C20.1895 27.5 21.5553 27.2608 22.6571 27.0712C23.3225 26.9218 23.8578 26.2925 24.0258 25.4634C24.1647 24.4769 24.3182 22.0315 24.3182 20C24.3182 17.9685 24.1647 15.5231 24.0164 14.5395ZM12.2273 15.2083C12.2273 14.7481 12.6004 14.375 13.0606 14.375H13.9848C14.4451 14.375 14.8182 14.7481 14.8182 15.2083V15.4167C14.8182 15.8769 14.4451 16.25 13.9848 16.25H13.0606C12.6004 16.25 12.2273 15.8769 12.2273 15.4167V15.2083ZM28.6364 14.375C27.1794 14.375 26.0455 16.4904 26.0455 17.7232V22.2768C26.0455 23.7279 26.8754 25.625 28.6364 25.625C29.4508 25.625 29.5 22.0089 29.5 20C29.5 17.9911 29.5 14.375 28.6364 14.375Z"
+      fill="#fff" />
+  </svg>

package/src/Components/assets/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/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/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/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/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/desktop/hangup.svg

@@ -0,0 +1,4 @@
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" class="design-iconfont">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z" fill="#FE3C44" />
+    <path d="M25.4437 20.449C25.4437 22.1142 25.2336 23.3515 28.5089 23.7126C31.7875 24.0737 31.3666 21.6794 31.3662 20.0669C31.3649 18.2061 27.0602 15.619 20.2726 15.6173C13.4866 15.6173 9.1789 18.205 9.17888 20.067C9.17887 21.68 8.75621 24.0726 12.0332 23.7123C15.3101 23.3537 15.1 22.1155 15.0984 20.4495C15.1013 19.2862 17.7587 19.0316 20.2725 19.0298C22.7863 19.0281 25.4454 19.2844 25.4437 20.449Z" fill="#fff" />
+  </svg>