@trtc/calls-uikit-vue 4.1.0

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

@@ -0,0 +1,5 @@
+<svg color="red" 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="M20 12C19.4477 12 19 12.4477 19 13V19H13C12.4477 19 12 19.4477 12 20C12 20.5523 12.4477 21 13 21H19V27C19 27.5523 19.4477 28 20 28C20.5523 28 21 27.5523 21 27V21H27C27.5523 21 28 20.5523 28 20C28 19.4477 27.5523 19 27 19H21V13C21 12.4477 20.5523 12 20 12Z" fill="#fff"/>
+</svg>
+

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

@@ -0,0 +1,8 @@
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" class="design-iconfont">
+    <rect opacity=".3" width="40" height="40" rx="20" fill="#fff" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M20 11.5C18.0697 11.5 16.5 12.9678 16.5 14.7727V19.6818C16.5 20.2623 16.6623 20.8078 16.9468 21.281L23.4997 14.7281C23.4741 12.9437 21.9143 11.5 20 11.5ZM23.5 18.9704L19.5436 22.9269C19.693 22.9451 19.8453 22.9545 20 22.9545C21.9303 22.9545 23.5 21.4867 23.5 19.6818V18.9704ZM15.7321 22.4957C15.1207 21.7452 14.75 20.8727 14.75 20.0171V18.8636L14.7432 18.761C14.6892 18.3575 14.3211 18.0454 13.875 18.0454C13.3918 18.0454 13 18.4117 13 18.8636V20.0171L13.0047 20.2215C13.0611 21.4647 13.6284 22.6883 14.5245 23.7033L15.7321 22.4957ZM16.9482 25.5222L18.2094 24.261C18.7777 24.4715 19.3834 24.5909 20 24.5909C22.6589 24.5909 25.1138 22.3716 25.2445 20.1981L25.25 20.0171V18.8811C25.25 18.4293 25.6418 18.0629 26.125 18.0629C26.5711 18.0629 26.9392 18.3751 26.9932 18.7785L27 18.8811V20.0171C27 23.1518 23.6976 26.2272 20 26.2272C18.9256 26.2272 17.8845 25.9676 16.9482 25.5222ZM16.5 28.6818C16.5 28.2294 16.892 27.8636 17.375 27.8636H22.625C23.1089 27.8636 23.5 28.2294 23.5 28.6818C23.5 29.1343 23.1089 29.5 22.625 29.5H17.375C16.892 29.5 16.5 29.1343 16.5 28.6818Z"
+      fill="#fff" />
+    <rect x="27.249" y="11.7688" width="1.5" height="22" rx=".75" transform="rotate(45 27.249 11.7688)"
+      fill="#FE3C44" />
+  </svg>

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

@@ -0,0 +1,9 @@
+  <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="M16.6665 14.1667C16.6665 12.3284 18.1615 10.8334 19.9998 10.8334C21.8382 10.8334 23.3332 12.3284 23.3332 14.1667V19.1667C23.3332 21.005 21.8382 22.5 19.9998 22.5C18.1615 22.5 16.6665 21.005 16.6665 19.1667V14.1667ZM16.6665 28.3334C16.6665 27.8725 17.0398 27.5 17.4998 27.5H22.4998C22.9607 27.5 23.3332 27.8725 23.3332 28.3334C23.3332 28.7942 22.9607 29.1667 22.4998 29.1667H17.4998C17.0398 29.1667 16.6665 28.7942 16.6665 28.3334Z"
+            fill="#fff" />
+        <path
+            d="M25.8332 18.3512V19.5083C25.8332 22.0811 23.2215 25 19.9998 25C16.7782 25 14.1665 22.0811 14.1665 19.5083V18.3334"
+            stroke="#fff" stroke-width="1.66667" stroke-linecap="round" />
+    </svg>

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

@@ -0,0 +1,5 @@
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="design-iconfont">
+        <path
+            d="M13.733 6.99996C13.7997 6.99996 13.933 6.99996 13.9997 6.93329C14.133 6.86663 14.2663 6.73329 14.333 6.59996C14.3997 6.46663 14.3997 6.26663 14.333 6.06663C14.2663 5.99996 14.2663 5.93329 14.1997 5.86663L10.1997 1.86663C9.93301 1.59996 9.53301 1.59996 9.26634 1.86663C8.99967 2.13329 8.99967 2.53329 9.26634 2.79996L12.133 5.66663H1.99967C1.59967 5.66663 1.33301 5.93329 1.33301 6.33329C1.33301 6.73329 1.59967 6.99996 1.99967 6.99996H13.733ZM13.9997 8.99996H2.26634C2.19967 8.99996 2.06634 8.99996 1.99967 9.06663C1.86634 9.13329 1.73301 9.26663 1.66634 9.39996C1.59967 9.53329 1.59967 9.73329 1.66634 9.93329C1.73301 9.99996 1.73301 10.0666 1.79967 10.1333L5.79967 14.1333C5.93301 14.2666 6.13301 14.3333 6.26634 14.3333C6.39967 14.3333 6.59967 14.2666 6.73301 14.1333C6.99967 13.8666 6.99967 13.4666 6.73301 13.2L3.86634 10.3333H13.9997C14.3997 10.3333 14.6663 10.0666 14.6663 9.66663C14.6663 9.26663 14.3997 8.99996 13.9997 8.99996Z"
+            fill="#fff" />
+    </svg>

package/src/Components/assets/desktop/trans.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 d="M17.7311 15.7485C17.7311 15.4339 18.1333 15.289 18.3596 15.507L22.9808 19.6831C23.1314 19.828 23.1314 20.0453 22.9808 20.166L18.3341 24.3435C18.1086 24.5608 17.7063 24.3917 17.7063 24.102V22.3396C17.7063 22.1464 17.5303 22.0016 17.3296 22.0016C14.2147 22.074 12.4319 22.8707 10.649 24.5366C10.3726 24.778 9.89538 24.5366 10.0205 24.1986C11.1007 21.1565 12.9345 18.4042 17.7311 17.8006V15.7485Z" fill="#fff" />
+        <path d="M24.7603 17.0411C26.4103 18.6911 26.4328 21.3438 24.8106 22.9661C24.5788 23.1978 24.1999 23.1946 23.9642 22.9589C23.7284 22.7232 23.7252 22.3442 23.957 22.1124C25.1157 20.9537 25.0996 19.0589 23.9211 17.8803C23.6853 17.6446 23.6821 17.2656 23.9139 17.0339C24.1456 16.8021 24.5246 16.8053 24.7603 17.0411Z" fill="#fff" />
+        <path d="M26.8765 14.925C29.7051 17.7536 29.7437 22.3011 26.9627 25.0821C26.731 25.3138 26.352 25.3106 26.1163 25.0749C25.8806 24.8392 25.8773 24.4602 26.1091 24.2285C28.4266 21.911 28.3944 18.1214 26.0373 15.7642C25.8016 15.5285 25.7983 15.1495 26.0301 14.9178C26.2618 14.686 26.6408 14.6893 26.8765 14.925Z" fill="#fff" />
+    </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 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.672 5.777a.6.6 0 0 0-.331.536v2.693a.6.6 0 0 0 .33.536l2.803 1.406a.2.2 0 0 0 .29-.179V4.55a.2.2 0 0 0-.29-.178l-2.802 1.406z" fill="#ADADAD"/><g filter="url(#a)"><rect x=".667" y="2.553" width="10.667" height="10.213" rx="1.5" fill="#ADADAD"/></g><defs><filter id="a" x="-7.333" y="-5.447" width="26.667" height="26.213" 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 in="SourceGraphic" in2="effect1_backgroundBlur_131_1449" result="shape"/></filter></defs></svg>

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

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.672 6.117a.6.6 0 0 0-.331.536v2.693a.6.6 0 0 0 .33.537l2.803 1.405a.2.2 0 0 0 .29-.178V4.89a.2.2 0 0 0-.29-.179l-2.802 1.406z" fill="#12B969"/><g filter="url(#a)"><rect x=".667" y="2.894" width="10.667" height="10.213" rx="1.5" fill="#12B969"/></g><defs><filter id="a" x="-7.333" y="-5.106" width="26.667" height="26.213" 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 in="SourceGraphic" in2="effect1_backgroundBlur_1977_11630" result="shape"/></filter></defs></svg>

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

@@ -0,0 +1 @@
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.761 9.332C.001 7.134.963 4.773 2.833 3.39 4.252 2.343 5.676 1.285 6.49.681a.912.912 0 0 1 1.24.141l4.429 5.21c.29.34.29.841 0 1.182l-2.716 3.198a.893.893 0 0 0-.093 1.034 19.946 19.946 0 0 0 3.151 4.048 19.62 19.62 0 0 0 4.064 3.137.895.895 0 0 0 1.033-.094l3.186-2.702a.913.913 0 0 1 1.181 0l5.214 4.431c.366.311.429.852.143 1.238l-2.727 3.69c-1.372 1.855-3.714 2.798-5.895 2.047a28.865 28.865 0 0 1-11.04-6.908A28.855 28.855 0 0 1 .761 9.332z" fill="#12B969"/></svg>

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

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.917 7.57v-.731h1.5v.73a4.583 4.583 0 1 0 9.166 0v-.73h1.5v.73a6.084 6.084 0 0 1-5.333 6.038v1.302h-1.5v-1.302a6.084 6.084 0 0 1-5.333-6.038z" fill="#ADADAD"/><rect x="4.667" y="1.091" width="6.667" height="9.897" rx="3.333" fill="#ADADAD"/></svg>

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

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.917 7.57v-.731h1.5v.73a4.583 4.583 0 1 0 9.166 0v-.73h1.5v.73a6.084 6.084 0 0 1-5.333 6.038v1.302h-1.5v-1.302a6.084 6.084 0 0 1-5.333-6.038z" fill="#12B969"/><rect x="4.667" y="1.091" width="6.667" height="9.897" rx="3.333" 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/mic-off-h5.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><circle cx="14" cy="14" r="12" fill="#fff"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M10.667 10a3.333 3.333 0 0 1 5.937-2.08l-5.872 7.073a3.345 3.345 0 0 1-.065-.66V10zM9.63 16.321a4.782 4.782 0 0 1-.43-1.988v-1H8.133v1c0 1.047.275 2.03.755 2.881l.742-.893zm1.283 3.002.69-.83a4.8 4.8 0 0 0 7.198-4.16v-1h1.066v1a5.867 5.867 0 0 1-5.334 5.843V22h-1.066v-1.824a5.831 5.831 0 0 1-2.554-.853zm1.646-1.983 4.774-5.751v2.744a3.333 3.333 0 0 1-4.774 3.007z" fill="#E6395C"/><path d="m9.423 18.845 8.36-10.067" stroke="#E6395C" stroke-width="1.067" stroke-linecap="square" stroke-linejoin="round"/><defs><filter id="a" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" 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 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1741_10678"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1741_10678" result="shape"/></filter></defs></svg>

package/src/Components/assets/streamInfo/mobile/mic-on-h5.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><circle cx="14" cy="14" r="12" fill="#fff"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M15.812 22.538c4.716-4.715 4.716-12.36 0-17.076l-1.767 1.767a9.575 9.575 0 0 1 0 13.541l1.767 1.768z" fill="#1C66E5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.188 19.136a7.264 7.264 0 0 0 0-10.273l-1.768 1.768a4.764 4.764 0 0 1 0 6.737l1.768 1.768zM9.121 16.07a2.927 2.927 0 0 0 0-4.14l-2.018 2.018a.073.073 0 0 1 0 .103l2.018 2.018z" fill="#1C66E5"/><defs><filter id="a" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" 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 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_124_647"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_124_647" result="shape"/></filter></defs></svg>

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

@@ -0,0 +1 @@
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><circle cx="14" cy="14" r="12" fill="#fff"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M10.667 10a3.333 3.333 0 0 1 5.937-2.08l-5.872 7.073a3.345 3.345 0 0 1-.065-.66V10zM9.63 16.321a4.782 4.782 0 0 1-.43-1.988v-1H8.133v1c0 1.047.275 2.03.755 2.881l.742-.893zm1.283 3.002.69-.83a4.8 4.8 0 0 0 7.198-4.16v-1h1.066v1a5.867 5.867 0 0 1-5.334 5.843V22h-1.066v-1.824a5.831 5.831 0 0 1-2.554-.853zm1.646-1.983 4.774-5.751v2.744a3.333 3.333 0 0 1-4.774 3.007z" fill="#E6395C"/><path d="m9.423 18.845 8.36-10.067" stroke="#E6395C" stroke-width="1.067" stroke-linecap="square" stroke-linejoin="round"/><defs><filter id="a" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" 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 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1741_10678"/><feBlend 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 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".8"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.833 5A4.167 4.167 0 0 1 13.7 3.083l-7.503 9.039a4.152 4.152 0 0 1-.364-1.705V5zm-.772 8.49a5.79 5.79 0 0 1-.878-3.073v-1.25h-1.7v1.25c0 1.659.538 3.192 1.448 4.435l1.13-1.361zm2.011 3.852 1.15-1.385a5.817 5.817 0 0 0 7.595-5.54v-1.25h1.7v1.25a7.518 7.518 0 0 1-6.684 7.47V20H9.167v-2.112a7.468 7.468 0 0 1-2.095-.546zm2.326-2.802 4.769-5.745v1.622a4.167 4.167 0 0 1-4.77 4.123z" fill="#D5E0F2"/><path d="M5.041 16.654 15.325 4.27" stroke="#D5E0F2" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

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

@@ -0,0 +1 @@
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#a)"><circle cx="14" cy="14" r="12" fill="#fff"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M15.812 22.538c4.716-4.715 4.716-12.36 0-17.076l-1.767 1.767a9.575 9.575 0 0 1 0 13.541l1.767 1.768z" fill="#1C66E5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.188 19.136a7.264 7.264 0 0 0 0-10.273l-1.768 1.768a4.764 4.764 0 0 1 0 6.737l1.768 1.768zM9.121 16.07a2.927 2.927 0 0 0 0-4.14l-2.018 2.018a.073.073 0 0 1 0 .103l2.018 2.018z" fill="#1C66E5"/><defs><filter id="a" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" 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 values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_124_647"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_124_647" result="shape"/></filter></defs></svg>

package/src/Components/components/GroupCall/BackGround/BackGround.vue

@@ -0,0 +1,20 @@
+<template>
+  <Overlay
+    bgColor="#22262ed9"
+    :bgImage="defaultAvatarSrc"
+    :customStyle="{ position: 'absolute', zIndex: 0 }"
+  />
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import Overlay from '../../base/Overlay/Overlay.vue';
+import defaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
+</script>

package/src/Components/components/GroupCall/GroupCall.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="groupcall-container">
+    <TopBar />
+    <Waiting v-if="callStatus === CallStatus.CALLING && callRole === CallRole.CALLEE && !isFloatWindow" />
+    <MediaContainer />
+    <Tip />
+    <ButtonPanel />
+    <BackGround />
+    <SelectUser
+      v-if="showSelectUser"
+      :isNeedSearch="true"
+      :userList="groupMemberList"
+      :isPC="TUIGlobal.isPC"
+      :total="memberCount"
+      @confirm="handleSelectedResult"
+      @cancel="handleCancel"
+      @getMore="getMoreMemberList"
+      @search="handleSearch"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, provide, toRefs, onMounted, onUnmounted } from '../../../adapter-vue';
+import TopBar from '../common/TopBar/TopBar.vue';
+import Waiting from '../common/Waiting/Waiting.vue';
+import MediaContainer from './MediaContainer/MediaContainer.vue';
+import Tip from '../common/Tip/Tip.vue';
+import ButtonPanel from '../common/ButtonPanel/ButtonPanel.vue';
+import SelectUser from '../common/SelectUser/SelectUser.vue';
+import BackGround from './BackGround/BackGround.vue';
+import { ButtonPanelContextKey, FocusContextKey } from '../../context';
+import { useCallInfoContext, useFloatWindowContext, useUserInfoExcludeVolumeContext } from '../../hooks';
+import { CallRole, CallStatus, TUIGlobal, TUIStore, TUICallKitAPI, StoreName, NAME } from '../../../TUICallService';
+
+const focusElement = ref(null);
+const buttonPanelStatus = ref('open');
+const showSelectUser = ref(false);
+const memberCount = ref(0);
+const groupMemberList = ref([]);
+const backupGroupMemberList = ref([]);
+const offset = ref(0);
+const count: number = 30;
+
+const FocusContextValue = focusElement;
+const ButtonPanelContextValue = { status: buttonPanelStatus };
+
+
+const { callRole, callStatus } = toRefs(useCallInfoContext());
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+const { localUserInfoExcludeVolume, remoteUserListExcludeVolume } = toRefs(useUserInfoExcludeVolumeContext());
+
+const handleShowSelectUser = async (value: boolean) => {
+  showSelectUser.value = value;
+  if (showSelectUser.value) {
+    await getGroupMemberList();
+    const groupProfile = await TUICallKitAPI.getGroupProfile();
+    memberCount.value = groupProfile.memberCount;
+  }
+}
+const handleCancel = () => {
+  showSelectUser.value = false;
+  TUIStore.update(StoreName.CALL, NAME.SHOW_SELECT_USER, false);
+  offset.value = 0;
+  groupMemberList.value = [];
+}
+const getMoreMemberList = async () => {
+  offset.value += count;
+  await getGroupMemberList();
+}
+const getGroupMemberList = async () => {
+  const memberList = await TUICallKitAPI.getGroupMemberList(count, offset.value);
+  const inCallUserIdList = [...remoteUserListExcludeVolume.value, localUserInfoExcludeVolume.value].map(obj => obj.userId);
+  groupMemberList.value.push(...memberList);
+  groupMemberList.value = groupMemberList.value.map(obj => {
+    if (inCallUserIdList.includes(obj.userID)) {
+      obj = { ...obj, isDisabled: true };
+    }
+    return obj;
+  });
+  backupGroupMemberList.value = groupMemberList.value;
+};
+const handleSelectedResult = async (selectedUserInfoList: Array<any>) => {
+  try {
+    if (selectedUserInfoList.length <= 0) {
+      return ;
+    }
+    showSelectUser.value = false;
+    TUIStore.update(StoreName.CALL, NAME.SHOW_SELECT_USER, false);
+    offset.value = 0;
+    const userIDList = selectedUserInfoList.map(obj => obj.userID);
+    await TUICallKitAPI.inviteUser({userIDList});
+    groupMemberList.value = [];
+  } catch (error) {
+    console.debug(error);
+  }
+};
+const handleSearch = (searchValue: string) => {
+  if (searchValue) {
+    groupMemberList.value = groupMemberList.value.filter(obj => {
+      return obj.userID.includes(searchValue) || obj.nick.includes(searchValue)
+    });
+  } else {
+    groupMemberList.value = backupGroupMemberList.value;
+  }
+};
+
+const watchOptions = {
+  [NAME.SHOW_SELECT_USER]: handleShowSelectUser,
+};
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, watchOptions, { notifyRangeWhenWatch: NAME.MYSELF });
+});
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, watchOptions);
+});
+
+ButtonPanelContextValue.status = ref('open');
+FocusContextValue.value = null;
+provide(ButtonPanelContextKey, ButtonPanelContextValue);
+provide(FocusContextKey, FocusContextValue);
+</script>
+
+<style lang="scss" scoped>
+.groupcall-container {
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,267 @@
+<template>
+  <Portal id="source" :disabled="!isFloatWindow" source="#source" to="body">
+    <FloatWindow>
+      <div
+        :class="groupMediaContainerClassName"
+        :style="[mediaContainerStyle]"
+      >
+        <Grid
+          :unit="unit"
+          :enable-focus="enableFocus"
+          :focus="focus"
+          :length="streamLength"
+          :layout="layout"
+          @toggle="changeFocus"
+        >
+          <GridItem :index="0" :key="localUserInfoExcludeVolume.userId">
+            <Pusher
+              :domId="localUserInfoExcludeVolume.domId"
+              :show-audio-stream="!localUserInfoExcludeVolume.isVideoAvailable"
+              :show="visibleStreamIdList.includes(localUserInfoExcludeVolume.domId) && showStream"
+            >
+              <template v-slot:audio-stream>
+                <AudioStream
+                  :user-id="localUserInfoExcludeVolume.userId"
+                  :username="localUserInfoExcludeVolume.displayUserInfo"
+                  :avatar="localUserInfoExcludeVolume.avatar"
+                  :is-video-available="localUserInfoExcludeVolume.isVideoAvailable"
+                />
+              </template>
+              <template v-slot:loading>
+                <StreamLoading v-if="isPusherLoading" />
+              </template>
+              <template v-slot:stream-info>
+                <TKStreamInfo
+                  v-if="!isFloatWindow"
+                  :is-self="true"
+                  :show-nick-name="showNickName"
+                  :showSwitchCameraButton="showSwitchCameraButton"
+                  :showVirtualBackgroundButton="showVirtualBackgroundButton"
+                  :showNetWorkStatus="isShowNetWork(localUserInfoExcludeVolume.userId)"
+                  :nickName="localUserInfoExcludeVolume.displayUserInfo"
+                  :isMuted="!localUserInfoExcludeVolume.isAudioAvailable"
+                  :volume="volumeMap && volumeMap[localUserInfoExcludeVolume.domId]"
+                />
+              </template>
+            </Pusher>
+          </GridItem>
+          <GridItem v-for="(remoteStreamItem, index) in remoteUserListExcludeVolume" :key="remoteStreamItem.userId" :index="index + 1">
+            <Player
+              :domId="remoteStreamItem.domId"
+              :show-audio-stream="isShowAudioStream(remoteStreamItem)"
+              :show="visibleStreamIdList.includes(remoteStreamItem.domId) && showStream"
+            >
+              <template v-slot:audio-stream>
+                <AudioStream
+                  :user-id="remoteStreamItem.userId"
+                  :username="remoteStreamItem.displayUserInfo"
+                  :avatar="remoteStreamItem.avatar"
+                />
+              </template>
+              <template v-slot:loading>
+                <StreamLoading v-if="!remoteStreamItem.isEnter" />
+              </template>
+              <template v-slot:stream-info>
+                <TKStreamInfo
+                  v-if="!isFloatWindow"
+                  :show-nick-name="TUIGlobal.isPC || String(focus) === String(index + 1)"
+                  :show-control-button="false"
+                  :showNetWorkStatus="isShowNetWork(remoteStreamItem.userId)"
+                  :nickName="remoteStreamItem.displayUserInfo"
+                  :is-muted="isMute(remoteStreamItem)"
+                  :volume="volumeMap && volumeMap[remoteStreamItem.domId]"
+                />
+              </template>
+            </Player>
+          </GridItem>
+        </Grid>
+      </div>
+    </FloatWindow>
+  </Portal>
+  
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { ref, watch, toRefs, computed } from '../../../../adapter-vue';
+import { CallMediaType, CallStatus, TUIGlobal, CallRole } from '../../../../TUICallService';
+import Pusher from '../../common/Pusher/Pusher.vue';
+import Player from '../../common/Player/Player.vue';
+import Grid from '../../base/Grid/Grid.vue';
+import GridItem from '../../base/Grid/GridItem/GridItem.vue';
+import AudioStream from '../../common/AudioStream/AudioStream.vue';
+import TKStreamInfo from '../../common/TKStreamInfo/TKStreamInfo.vue';
+import FloatWindow from '../../common/FloatWindow/FloatWindow.vue';
+import Portal from '../../base/Portal/Portal.vue';
+import {
+  useUserInfoExcludeVolumeContext,
+  useCallInfoContext,
+  usePlayer,
+  useGetVolumeMap,
+  useFloatWindowContext,
+  useFocusContext,
+  useButtonPanelStatus,
+  useGroupCallLayout,
+  useCustomUI,
+  useNetWorkStatus
+} from '../../../hooks';
+import { classNames } from '../../base/util';
+import StreamLoading from './StreamLoading/StreamLoading.vue';
+
+const bigWindow = ref('local');
+const showSmallWindow = ref(false);
+const customUI = useCustomUI();
+
+const { localUserInfoExcludeVolume, remoteUserListExcludeVolume } = toRefs(useUserInfoExcludeVolumeContext());
+const { callStatus, callType, isShowEnableVirtualBackground, callRole } = toRefs(useCallInfoContext());
+const focus = ref(TUIGlobal.isPC 
+                    ? null 
+                    : callType.value === CallMediaType.VIDEO ? 0 : null); // video call localView default big
+const { netWorkQualityList } = useNetWorkStatus();
+const streamLength = computed(() => remoteUserListExcludeVolume.value.length + 1);
+const wxPlayer = usePlayer();
+const layout = useGroupCallLayout(focus, streamLength);
+const volumeMap = useGetVolumeMap();
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+const focusElement = useFocusContext();
+const { status: panelStatus } = useButtonPanelStatus() || {};
+const enableFocus = !TUIGlobal.isPC;
+const isCurrentUserStreamZoomIn = computed(() => String(focus.value) === '0');
+const showControlButton = computed(() => !TUIGlobal.isPC && isCurrentUserStreamZoomIn.value && localUserInfoExcludeVolume.value.isVideoAvailable)
+
+const showSwitchCameraButton = computed(() => showControlButton.value);
+const showVirtualBackgroundButton = computed(() => showControlButton.value && isShowEnableVirtualBackground.value && TUIGlobal.isWeChat);
+const showNickName = computed(() => TUIGlobal.isPC || isCurrentUserStreamZoomIn.value);
+const unit = computed(() => (TUIGlobal.isPC || isFloatWindow.value) ? '%' : 'vw');
+const visibleStreamIdList = computed(() => {
+  return [localUserInfoExcludeVolume.value, ...remoteUserListExcludeVolume.value].map((stream) => {
+    if (isFloatWindow.value) {
+      if (volumeMap.value?.[stream.domId] >= 10) {
+        return stream.domId;
+      }
+    } else {
+      return stream.domId;
+    }
+  });
+});
+const showStream = computed(() => !(
+  callRole.value === CallRole.CALLEE
+  && callStatus.value === CallStatus.CALLING
+  && !isFloatWindow.value
+));
+
+const mediaContainerStyle = computed(() => {
+  let visibility = '';
+
+  if (callRole.value === CallRole.CALLEE && callStatus.value === CallStatus.CALLING && !isFloatWindow.value) {
+    visibility = 'hidden';
+  }
+
+  return {
+    visibility,
+  }
+});
+
+function changeFocus(value) {
+  focus.value = value;
+  focusElement.value = value;
+  panelStatus.value = value !== null ? 'close' : 'open';
+}
+
+function isShowAudioStream(stream) {
+  return !stream.isVideoAvailable;
+}
+
+function isMute(stream) {
+  return !stream.isAudioAvailable;
+}
+
+function isShowNetWork(userId) {
+  if(!netWorkQualityList.value) return;
+  const isRemoteUser = userId !== localUserInfoExcludeVolume.value.userId;
+  if(!TUIGlobal.isWeChat && isRemoteUser) return;
+  const targetNetwork = netWorkQualityList.value.find(item => item.userId === userId);
+  return targetNetwork && targetNetwork?.quality >= 4;
+}
+
+watch([remoteUserListExcludeVolume, callType], () => {  
+  if (remoteUserListExcludeVolume.value?.[0]?.isEnter) {
+    bigWindow.value = 'remote';
+  }
+
+  if (callType.value === CallMediaType.AUDIO) {
+    showSmallWindow.value = false;
+  } else {
+    showSmallWindow.value = true;
+  }
+});
+const groupMediaContainerClassName = computed(() => classNames([
+  'groupcall-media-container',
+  {
+    mobile: !TUIGlobal.isPC,
+    pc: TUIGlobal.isPC,
+    'two-layout': streamLength.value === 2 && focus.value === null,
+    float: isFloatWindow.value,
+  }
+]));
+const isPusherLoading = computed(() => {
+  if (callStatus.value === CallStatus.CALLING) {
+    if ((callType.value === CallMediaType.AUDIO && !localUserInfoExcludeVolume.value.isAudioAvailable)
+          || (callType.value === CallMediaType.VIDEO && !localUserInfoExcludeVolume.value.isVideoAvailable)) {
+      return true;
+    }
+  }
+
+  return false;
+});
+</script>
+
+<style lang="scss" scoped>
+.groupcall-media-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+
+  &.pc {
+    border-radius: 12px;
+    overflow: hidden;
+
+    &.two-layout {
+      margin-top: 20%;
+    }
+
+    .tk-toggle-window-item--small {
+      top: 2%;
+      left: 2%;
+      width: 22%;
+      height: 21%;
+      border-radius: 12px;
+      overflow: hidden;
+    }
+  }
+
+  &.mobile {
+    margin-top: 5.5vh;
+
+    &.float {
+      margin-top: 0;
+    }
+
+    &.two-layout {
+      margin-top: 15vh;
+
+      &.float {
+        margin-top: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+
+<template>
+  <div class="stream-loading-container">
+    <Loading mode="dot" color="#FFF" loadingWidth="50px" loadingHeight="50px" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Loading from '../../../base/Loading/Loading.vue';
+</script>
+
+<style scoped>
+.stream-loading-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>