diff --git a/client/packages/lowcoder-design/src/icons/icon-autocomplete-comp.svg b/client/packages/lowcoder-design/src/icons/icon-autocomplete-comp.svg
index dd882963a..505c59adb 100644
--- a/client/packages/lowcoder-design/src/icons/icon-autocomplete-comp.svg
+++ b/client/packages/lowcoder-design/src/icons/icon-autocomplete-comp.svg
@@ -1 +1,20 @@
-<svg t="1690794551698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="41410" width="200" height="200"><path d="M826.515614 829.65762H94.474185C42.378083 829.65762 0 787.273538 0 735.179436V288.816564C0 236.722462 42.378083 194.34038 94.474185 194.34038h835.05363c52.094102 0 94.474185 42.382083 94.474185 94.476184v326.288637c0 15.58003-12.634025 28.212055-28.212055 28.212055-15.58003 0-28.212055-12.634025-28.212055-28.212055V288.816564c0-20.982041-17.068033-38.050074-38.048075-38.050074H94.474185c-20.978041-0.002-38.048074 17.068033-38.048075 38.050074V735.181436c0 20.982041 17.068033 38.050074 38.048075 38.050074h732.041429c15.58003 0 28.212055 12.634025 28.212055 28.212055 0 15.58203-12.634025 28.214055-28.212055 28.214055z" fill="#d7d9e0" p-id="41411" data-spm-anchor-id="a313x.7781069.0.i11" class=""></path><path d="M913.357784 739.061443c-7.222014 0-14.440028-2.756005-19.950039-8.264016l-95.760187-95.756187c-11.018022-11.018022-11.018022-28.882056 0-39.902078 11.020022-11.014022 28.878056-11.014022 39.902078 0l95.760187 95.756187c11.018022 11.018022 11.018022 28.882056 0 39.902078a28.132055 28.132055 0 0 1-19.952039 8.264016z" fill="#d7d9e0" p-id="41412" data-spm-anchor-id="a313x.7781069.0.i13" class=""></path><path d="M749.529464 547.043068m-122.72024 0a122.72024 122.72024 0 1 0 245.44048 0 122.72024 122.72024 0 1 0-245.44048 0Z" fill="#3377ff" p-id="41413" data-spm-anchor-id="a313x.7781069.0.i15" class="selected"></path><path d="M749.539464 697.963363c-40.316079 0-78.220153-15.698031-106.726209-44.206086-28.506056-28.508056-44.206086-66.41013-44.206086-106.724209 0-40.316079 15.698031-78.220153 44.206086-106.726208 28.508056-28.506056 66.41013-44.206086 106.726209-44.206086s78.220153 15.698031 106.726208 44.206086c58.846115 58.846115 58.846115 154.602302 0 213.448417-28.508056 28.512056-66.41013 44.208086-106.726208 44.208086z m0-245.436479c-25.242049 0-48.974096 9.830019-66.828131 27.682054-17.850035 17.848035-27.682054 41.580081-27.682054 66.82813 0 25.242049 9.830019 48.974096 27.682054 66.824131 17.850035 17.850035 41.582081 27.682054 66.828131 27.682054 25.244049 0 48.974096-9.830019 66.82813-27.682054 36.848072-36.848072 36.848072-96.804189 0-133.650261-17.854035-17.854035-41.586081-27.684054-66.82813-27.684054zM513.349003 635.277241H183.258358c-15.58003 0-28.212055-12.634025-28.212055-28.212055 0-15.58003 12.634025-28.212055 28.212055-28.212055h330.088645c15.58003 0 28.212055 12.634025 28.212055 28.212055 0.002 15.58003-12.628025 28.212055-28.210055 28.212055z" fill="#d7d9e0" p-id="41414" data-spm-anchor-id="a313x.7781069.0.i12" class=""></path></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#D7D9E0;}
+ .st1{fill:#3377FF;}
+</style>
+<path class="st0" d="M37.8,37.9H5.7c-2.3,0-4.1-1.9-4.1-4.1V14.2c0-2.3,1.9-4.1,4.1-4.1h36.6c2.3,0,4.1,1.9,4.1,4.1v14.3
+ c0,0.7-0.6,1.2-1.2,1.2c-0.7,0-1.2-0.6-1.2-1.2V14.2c0-0.9-0.7-1.7-1.7-1.7H5.7c-0.9,0-1.7,0.7-1.7,1.7v19.6c0,0.9,0.7,1.7,1.7,1.7
+ h32.1c0.7,0,1.2,0.6,1.2,1.2C39,37.4,38.5,37.9,37.8,37.9z"/>
+<path class="st0" d="M41.6,34c-0.3,0-0.6-0.1-0.9-0.4l-4.2-4.2c-0.5-0.5-0.5-1.3,0-1.7c0.5-0.5,1.3-0.5,1.7,0l4.2,4.2
+ c0.5,0.5,0.5,1.3,0,1.7C42.2,33.8,41.9,34,41.6,34L41.6,34z"/>
+<path class="st1" d="M29,25.5c0,3,2.4,5.4,5.4,5.4s5.4-2.4,5.4-5.4s-2.4-5.4-5.4-5.4S29,22.6,29,25.5z"/>
+<path class="st0" d="M34.4,32.2c-1.8,0-3.4-0.7-4.7-1.9c-1.2-1.2-1.9-2.9-1.9-4.7c0-1.8,0.7-3.4,1.9-4.7c1.2-1.2,2.9-1.9,4.7-1.9
+ s3.4,0.7,4.7,1.9c2.6,2.6,2.6,6.8,0,9.4C37.8,31.5,36.2,32.2,34.4,32.2L34.4,32.2z M34.4,21.4c-1.1,0-2.1,0.4-2.9,1.2
+ c-0.8,0.8-1.2,1.8-1.2,2.9c0,1.1,0.4,2.1,1.2,2.9c0.8,0.8,1.8,1.2,2.9,1.2c1.1,0,2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.9
+ C36.5,21.8,35.5,21.4,34.4,21.4L34.4,21.4z M24,29.4H9.6c-0.7,0-1.2-0.6-1.2-1.2c0-0.7,0.6-1.2,1.2-1.2H24c0.7,0,1.2,0.6,1.2,1.2
+ C25.3,28.9,24.7,29.4,24,29.4z"/>
+</svg>
diff --git a/client/packages/lowcoder-design/src/icons/icon-comment-comp.svg b/client/packages/lowcoder-design/src/icons/icon-comment-comp.svg
index b6828e6a0..5a737ee86 100644
--- a/client/packages/lowcoder-design/src/icons/icon-comment-comp.svg
+++ b/client/packages/lowcoder-design/src/icons/icon-comment-comp.svg
@@ -1 +1,13 @@
-<svg t="1690270225287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5882" width="200" height="200"><path d="M781.3 188.6H269.7c-59.6 0-108 51.1-108 113.9v312.8c0 64.8 50.3 119.5 109.9 119.5h120.2c30.4 32.8 109.8 117 109.8 117 6.2 6.7 14.9 10.5 23.9 10.5s17.6-3.8 24.6-11.3c0.6-0.7 62.1-72 105.6-116.2h123.7c59.6 0 110-54.7 110-119.5V302.6c-0.1-62.9-48.6-114-108.1-114z m-431.4 321c-25.2 0-45.6-20.4-45.6-45.6s20.4-45.6 45.6-45.6 45.6 20.4 45.6 45.6-20.4 45.6-45.6 45.6z m179.4 0c-25.2 0-45.6-20.4-45.6-45.6s20.4-45.6 45.6-45.6 45.6 20.4 45.6 45.6-20.4 45.6-45.6 45.6z m179.4 0c-25.2 0-45.6-20.4-45.6-45.6s20.4-45.6 45.6-45.6 45.6 20.4 45.6 45.6-20.4 45.6-45.6 45.6z" fill="#B2B2B2" p-id="5883"></path></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#4575F6;}
+</style>
+<path class="st0" d="M152.6,36.8H52.7c-11.6,0-21.1,10-21.1,22.2v61.1c0,12.7,9.8,23.3,21.5,23.3h23.5c5.9,6.4,21.4,22.9,21.4,22.9
+ c1.2,1.3,2.9,2.1,4.7,2.1s3.4-0.7,4.8-2.2c0.1-0.1,12.1-14.1,20.6-22.7h24.2c11.6,0,21.5-10.7,21.5-23.3V59.1
+ C173.7,46.8,164.2,36.8,152.6,36.8z M68.3,99.5c-4.9,0-8.9-4-8.9-8.9s4-8.9,8.9-8.9s8.9,4,8.9,8.9S73.3,99.5,68.3,99.5z M103.4,99.5
+ c-4.9,0-8.9-4-8.9-8.9s4-8.9,8.9-8.9c4.9,0,8.9,4,8.9,8.9S108.3,99.5,103.4,99.5z M138.4,99.5c-4.9,0-8.9-4-8.9-8.9s4-8.9,8.9-8.9
+ c4.9,0,8.9,4,8.9,8.9S143.3,99.5,138.4,99.5z"/>
+</svg>
diff --git a/client/packages/lowcoder-design/src/icons/icon-mention-comp.svg b/client/packages/lowcoder-design/src/icons/icon-mention-comp.svg
index 4c04c61e2..5b311e0b4 100644
--- a/client/packages/lowcoder-design/src/icons/icon-mention-comp.svg
+++ b/client/packages/lowcoder-design/src/icons/icon-mention-comp.svg
@@ -1 +1,20 @@
-<svg t="1690851406312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2494" width="200" height="200"><path d="M981.333333 938.666667h-384A469.333333 469.333333 0 0 1 128 469.333333a384 384 0 0 1 768 0v192a64 64 0 0 1-128 0V256a42.666667 42.666667 0 0 0-85.333333 0 209.92 209.92 0 0 0-128-42.666667h-42.666667a256 256 0 0 0 0 512h42.666667a213.333333 213.333333 0 0 0 128-45.226666 148.906667 148.906667 0 0 0 298.666666-18.773334V469.333333a469.333333 469.333333 0 0 0-938.666666 0 554.666667 554.666667 0 0 0 554.666666 554.666667h384a42.666667 42.666667 0 0 0 0-85.333333z m-426.666666-298.666667h-42.666667a170.666667 170.666667 0 0 1 0-341.333333h42.666667a128 128 0 0 1 128 128v85.333333a128 128 0 0 1-128 128z" p-id="2495" fill="#d7d9e0"></path></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#4575F6;}
+</style>
+<g>
+ <path class="st0" d="M14,38.5c-2.2-1-3.9-2.5-5-4.3c-1.1-1.9-1.7-4-1.7-6.6c0-3.6,0.9-6.9,2.6-9.9c1.8-3,4.2-5.3,7.2-7
+ c3.1-1.7,6.5-2.5,10.2-2.5c4.3,0,7.7,1,10.2,2.9c2.5,1.9,3.8,4.6,3.8,8.1c0,2.5-0.5,4.7-1.6,6.8c-1.1,2.1-2.6,3.8-4.4,5
+ s-3.9,1.8-6.1,1.8c-1.1,0-1.9-0.3-2.6-0.8c-0.7-0.5-1-1.2-1-2.2c-0.8,0.9-1.7,1.6-2.8,2.2c-1.1,0.5-2.3,0.8-3.5,0.8
+ c-1.6,0-2.8-0.4-3.6-1.2c-0.8-0.8-1.2-2-1.2-3.5c0-2.1,0.6-4.2,1.7-6.2c1.1-2,2.6-3.7,4.3-4.9c1.8-1.3,3.6-1.9,5.6-1.9
+ c1,0,1.8,0.2,2.5,0.7s1.1,1.1,1.4,1.9l1-2h3.6l-5.6,11.7c-0.2,0.4-0.3,0.7-0.3,1c0,0.6,0.4,0.8,1.3,0.8c1.2,0,2.3-0.5,3.4-1.4
+ c1-0.9,1.9-2.1,2.5-3.6c0.6-1.5,0.9-3.1,0.9-4.8c0-2.6-0.9-4.5-2.7-5.7c-1.8-1.2-4.3-1.8-7.4-1.8c-2.9,0-5.5,0.6-7.7,1.9
+ c-2.2,1.3-4,3-5.2,5.3c-1.2,2.3-1.8,4.9-1.8,7.8c0,2.9,0.9,5.1,2.7,6.6c1.8,1.5,4.5,2.3,8,2.3c1.8,0,3.4-0.2,4.9-0.5
+ c1.5-0.3,2.9-0.9,4.2-1.7c0.5-0.2,0.9-0.4,1.2-0.4c0.5,0,1,0.2,1.4,0.5s0.7,0.8,1,1.4c-1.8,1.6-3.9,2.8-6.2,3.5
+ C27,39.6,24.6,40,22.1,40C18.9,40,16.2,39.5,14,38.5z M23.6,28c1-1,1.9-2.2,2.6-3.6c0.7-1.4,1.1-2.8,1.1-4.1c0-1.2-0.6-1.9-1.9-1.9
+ c-1,0-2.1,0.5-3.1,1.4c-1.1,0.9-2,2.1-2.7,3.5s-1.1,2.8-1.1,4.1c0,1.3,0.7,2,2.2,2C21.6,29.4,22.6,28.9,23.6,28z"/>
+</g>
+</svg>
diff --git a/client/packages/lowcoder-design/src/icons/icon-timeline-comp.svg b/client/packages/lowcoder-design/src/icons/icon-timeline-comp.svg
index 329690d6d..e47f5fc79 100644
--- a/client/packages/lowcoder-design/src/icons/icon-timeline-comp.svg
+++ b/client/packages/lowcoder-design/src/icons/icon-timeline-comp.svg
@@ -1 +1,23 @@
-<svg t="1689814019529" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2710" data-spm-anchor-id="a313x.7781069.0.i26" width="200" height="200"><path d="M896 618.666667H443.733333c-10.666667 0-21.333333-4.266667-29.866666-12.8l-78.933334-78.933334c-8.533333-8.533333-8.533333-21.333333 0-29.866666l78.933334-78.933334c8.533333-8.533333 19.2-12.8 29.866666-12.8H896c12.8 0 21.333333 8.533333 21.333333 21.333334v170.666666c0 12.8-8.533333 21.333333-21.333333 21.333334z" fill="#3377ff" p-id="2711" data-spm-anchor-id="a313x.7781069.0.i22" class="selected"></path><path d="M192 128h42.666667v768H192z" fill="#CFD8DC" p-id="2712"></path><path d="M213.333333 213.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#90A4AE" p-id="2713"></path><path d="M213.333333 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#90A4AE" p-id="2714"></path><path d="M213.333333 810.666667m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#90A4AE" p-id="2715"></path><path d="M725.333333 917.333333H443.733333c-10.666667 0-21.333333-4.266667-29.866666-12.8l-78.933334-78.933333c-8.533333-8.533333-8.533333-21.333333 0-29.866667l78.933334-78.933333c8.533333-8.533333 19.2-12.8 29.866666-12.8H725.333333c12.8 0 21.333333 8.533333 21.333334 21.333333v170.666667c0 12.8-8.533333 21.333333-21.333334 21.333333z" fill="#dbdbdb" p-id="2716" data-spm-anchor-id="a313x.7781069.0.i23" class=""></path><path d="M746.666667 320H443.733333c-10.666667 0-21.333333-4.266667-29.866666-12.8l-78.933334-78.933333c-8.533333-8.533333-8.533333-21.333333 0-29.866667l78.933334-78.933333c8.533333-8.533333 19.2-12.8 29.866666-12.8H746.666667c12.8 0 21.333333 8.533333 21.333333 21.333333v170.666667c0 12.8-8.533333 21.333333-21.333333 21.333333z" fill="#dbdbdb" p-id="2717" data-spm-anchor-id="a313x.7781069.0.i24" class=""></path></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#3377FF;}
+ .st1{fill:#CFD8DC;}
+ .st2{fill:#90A4AE;}
+ .st3{fill:#DBDBDB;}
+</style>
+<path class="st0" d="M43.6,29.5H20.4c-0.5,0-1.1-0.2-1.5-0.7l-4-4c-0.4-0.4-0.4-1.1,0-1.5l4-4c0.4-0.4,1-0.7,1.5-0.7h23.2
+ c0.7,0,1.1,0.4,1.1,1.1v8.7C44.7,29,44.2,29.5,43.6,29.5z"/>
+<path class="st1" d="M7.5,4.3h2.2v39.3H7.5V4.3z"/>
+<path class="st2" d="M5.3,8.7c0,1.8,1.5,3.3,3.3,3.3c1.8,0,3.3-1.5,3.3-3.3c0,0,0,0,0,0c0-1.8-1.5-3.3-3.3-3.3S5.3,6.9,5.3,8.7
+ L5.3,8.7z"/>
+<path class="st2" d="M5.3,24c0,1.8,1.5,3.3,3.3,3.3s3.3-1.5,3.3-3.3c0,0,0,0,0,0c0-1.8-1.5-3.3-3.3-3.3S5.3,22.2,5.3,24L5.3,24z"/>
+<path class="st2" d="M5.3,39.3c0,1.8,1.5,3.3,3.3,3.3s3.3-1.5,3.3-3.3c0,0,0,0,0,0c0-1.8-1.5-3.3-3.3-3.3S5.3,37.5,5.3,39.3
+ L5.3,39.3z"/>
+<path class="st3" d="M34.8,44.8H20.4c-0.5,0-1.1-0.2-1.5-0.7l-4-4c-0.4-0.4-0.4-1.1,0-1.5l4-4c0.4-0.4,1-0.7,1.5-0.7h14.4
+ c0.7,0,1.1,0.4,1.1,1.1v8.7C35.9,44.3,35.5,44.8,34.8,44.8z"/>
+<path class="st3" d="M35.9,14.2H20.4c-0.5,0-1.1-0.2-1.5-0.7l-4-4c-0.4-0.4-0.4-1.1,0-1.5l4-4c0.4-0.4,1-0.7,1.5-0.7h15.5
+ c0.7,0,1.1,0.4,1.1,1.1v8.7C37,13.7,36.6,14.2,35.9,14.2L35.9,14.2z"/>
+</svg>
diff --git a/client/packages/lowcoder-design/src/icons/icon-undo.svg b/client/packages/lowcoder-design/src/icons/icon-undo.svg
index e7296453f..a1199d1bb 100644
--- a/client/packages/lowcoder-design/src/icons/icon-undo.svg
+++ b/client/packages/lowcoder-design/src/icons/icon-undo.svg
@@ -1,3 +1,10 @@
-<svg t="1675856776421" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2686" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
- <path d="M70.494 316.086c-3.484 3.173-3.484 8.656 0 11.829l193.119 175.883c5.137 4.679 13.387 1.034 13.387-5.915V368h395c114.875 0 208 93.125 208 208 0 114.876-93.125 208-208 208H256v80h416c159.058 0 288-128.942 288-288S831.058 288 672 288H277V146.117c0-6.948-8.25-10.593-13.387-5.914L70.494 316.086z" fill="#707070" p-id="2687"></path>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#707070;}
+</style>
+<path class="st0" d="M3.4,15.4c-0.2,0.1-0.2,0.4,0,0.5l9,8.2c0.2,0.2,0.6,0,0.6-0.3v-6h18.4c5.3,0,9.7,4.3,9.7,9.7
+ c0,5.3-4.3,9.7-9.7,9.7H12v3.7h19.3c7.4,0,13.4-6,13.4-13.4s-6-13.4-13.4-13.4H13V7.5c0-0.3-0.4-0.5-0.6-0.3L3.4,15.4z"/>
+</svg>
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
index fe4bcdb16..be45aede9 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
@@ -41,7 +41,7 @@ import { useUserViewMode } from "util/hooks";
import { isNumeric } from "util/stringUtils";
import { NameConfig, withExposingConfigs } from "../../generators/withExposing";
-import { v4 as uuidv4 } from 'uuid';
+import { v4 as uuidv4 } from "uuid";
// import axios from "axios";
@@ -147,6 +147,7 @@ const shareScreen = async (sharing: boolean) => {
try {
if (sharing === false) {
await client.unpublish(screenShareStream);
+ screenShareStream.close();
await client.publish(videoTrack);
videoTrack.play(userId + "");
} else {
@@ -165,11 +166,16 @@ const shareScreen = async (sharing: boolean) => {
}
};
const leaveChannel = async () => {
+ //stops local sharing video
+ screenShareStream.close();
+
+ //stops local video streaming and puts off the camera
if (videoTrack) {
await client.unpublish(videoTrack);
await turnOnCamera(false);
}
+ //mutes and stops locla audio stream
if (audioTrack) {
await turnOnMicrophone(false);
}
@@ -183,12 +189,12 @@ const publishVideo = async (
rtmToken: string,
rtcToken: string
) => {
- // initializing the Agora Meeting Client
- await turnOnCamera(true);
- await client.join(appId, channel, rtcToken, userId);
- await client.publish(videoTrack);
- // initializing the Agora RTM Client
- await rtmInit(appId, userId, rtmToken, channel);
+ // initializing the Agora Meeting Client
+ await turnOnCamera(true);
+ await client.join(appId, channel, rtcToken, userId);
+ await client.publish(videoTrack);
+ // initializing the Agora RTM Client
+ await rtmInit(appId, userId, rtmToken, channel);
};
const sendMessageRtm = (message: any) => {
@@ -231,8 +237,14 @@ export const meetingControllerChildren = {
participants: stateComp<JSONValue>([]),
usersScreenShared: stateComp<JSONValue>([]),
localUser: jsonObjectExposingStateControl(""),
- localUserID : withDefault(stringStateControl(trans("meeting.localUserID")), uuidv4() + ""),
- meetingName: withDefault(stringStateControl(trans("meeting.meetingName")), uuidv4() + ""),
+ localUserID: withDefault(
+ stringStateControl(trans("meeting.localUserID")),
+ uuidv4() + ""
+ ),
+ meetingName: withDefault(
+ stringStateControl(trans("meeting.meetingName")),
+ uuidv4() + ""
+ ),
rtmToken: stringStateControl(trans("meeting.rtmToken")),
rtcToken: stringStateControl(trans("meeting.rtcToken")),
messages: stateComp<JSONValue>([]),
@@ -265,7 +277,8 @@ let MTComp = (function () {
});
const [rtmMessages, setRtmMessages] = useState<any>([]);
const [localUserSpeaking, setLocalUserSpeaking] = useState<any>(false);
- const [localUserVideo, setLocalUserVideo] = useState<IAgoraRTCRemoteUser>();
+ const [localUserVideo, setLocalUserVideo] =
+ useState<IAgoraRTCRemoteUser>();
const [userJoined, setUserJoined] = useState<IAgoraRTCRemoteUser>();
const [userLeft, setUserLeft] = useState<IAgoraRTCRemoteUser>();
@@ -323,6 +336,8 @@ let MTComp = (function () {
}
}, [userLeft]);
+ console.log("sharing", props.sharing);
+
useEffect(() => {
if (updateVolume.userid) {
let prevUsers: [] = props.participants as [];
@@ -342,6 +357,28 @@ let MTComp = (function () {
}
}, [updateVolume]);
+ useEffect(() => {
+ let prevUsers: [] = props.participants as [];
+ const updatedItems = prevUsers.map((userInfo: any) => {
+ if (userInfo.user === localUserVideo?.uid) {
+ return { ...userInfo, streamingSharing: props.sharing.value };
+ }
+ return userInfo;
+ });
+ dispatch(
+ changeChildAction("participants", getData(updatedItems).data, false)
+ );
+
+ let localObject = {
+ user: userId + "",
+ audiostatus: props.audioControl.value,
+ streamingVideo: props.videoControl.value,
+ streamingSharing: props.sharing.value,
+ speaking: localUserSpeaking,
+ };
+ props.localUser.onChange(localObject);
+ }, [props.sharing.value]);
+
useEffect(() => {
let prevUsers: [] = props.participants as [];
const updatedItems = prevUsers.map((userInfo: any) => {
@@ -383,37 +420,52 @@ let MTComp = (function () {
if (prevMessages.length >= 500) {
prevMessages.pop(); // Remove the oldest message
}
- return [...prevMessages, {"peermessage" : JSON.parse(message.text + ""), "from" : peerId}];
+ return [
+ ...prevMessages,
+ { peermessage: JSON.parse(message.text + ""), from: peerId },
+ ];
});
});
-
+
rtmChannelResponse.on("ChannelMessage", function (message, memberId) {
setRtmMessages((prevMessages: any[]) => {
// Check if the messages array exceeds the maximum limit
if (prevMessages.length >= 500) {
prevMessages.pop(); // Remove the oldest message
}
- return [...prevMessages, {"channelmessage" : JSON.parse(message.text + ""), "from" : memberId}];
+ return [
+ ...prevMessages,
+ {
+ channelmessage: JSON.parse(message.text + ""),
+ from: memberId,
+ },
+ ];
});
-
- dispatch(changeChildAction("messages", getData(rtmMessages).data, false));
+
+ dispatch(
+ changeChildAction("messages", getData(rtmMessages).data, false)
+ );
});
}
}, [rtmChannelResponse]);
-
useEffect(() => {
if (client) {
+ //Enable Agora to send audio bytes
client.enableAudioVolumeIndicator();
+ //user activity listeners
client.on("user-joined", (user: IAgoraRTCRemoteUser) => {
setUserJoined(user);
});
client.on("user-left", (user: IAgoraRTCRemoteUser, reason: any) => {
setUserLeft(user);
});
+
+ //listen to user speaking,
client.on("volume-indicator", (volumeInfos: any) => {
if (volumeInfos.length === 0) return;
volumeInfos.map((volumeInfo: any) => {
+ //when the volume is above 30, user is probably speaking
const speaking = volumeInfo.level >= 30;
if (
volumeInfo.uid === userId &&
@@ -534,8 +586,8 @@ let MTComp = (function () {
})}
</Section>
<Section name={sectionNames.meetings}>
- {children.appId.propertyView({
- label: trans("meeting.appid")
+ {children.appId.propertyView({
+ label: trans("meeting.appid"),
})}
{children.meetingName.propertyView({
label: trans("meeting.meetingName"),
@@ -646,7 +698,10 @@ MTComp = withMethodExposing(MTComp, [
},
execute: async (comp, values) => {
if (comp.children.meetingActive.getView().value) return;
- userId = comp.children.localUserID.getView().value === "" ? uuidv4() : comp.children.localUserID.getView().value;
+ userId =
+ comp.children.localUserID.getView().value === ""
+ ? uuidv4()
+ : comp.children.localUserID.getView().value;
comp.children.localUser.change({
user: userId + "",
audiostatus: false,
@@ -669,7 +724,9 @@ MTComp = withMethodExposing(MTComp, [
comp.children.videoControl.change(true);
await publishVideo(
comp.children.appId.getView(),
- comp.children.meetingName.getView().value === "" ? uuidv4() : comp.children.meetingName.getView().value,
+ comp.children.meetingName.getView().value === ""
+ ? uuidv4()
+ : comp.children.meetingName.getView().value,
comp.children.rtmToken.getView().value,
comp.children.rtcToken.getView().value
);
@@ -790,7 +847,7 @@ export const VideoMeetingControllerComp = withExposingConfigs(MTComp, [
new NameConfig("meetingActive", trans("meeting.meetingActive")),
new NameConfig("meetingName", trans("meeting.meetingName")),
new NameConfig("localUserID", trans("meeting.localUserID")),
- new NameConfig("messages", trans("meeting.messages")),
+ new NameConfig("messages", trans("meeting.messages")),
new NameConfig("rtmToken", trans("meeting.rtmToken")),
new NameConfig("rtcToken", trans("meeting.rtcToken")),
]);
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
index 5fbc372b7..fe868117a 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
@@ -137,7 +137,6 @@ const typeOptions = [
export const meetingStreamChildren = {
autoHeight: withDefault(AutoHeightControl, "fixed"),
- shareScreen: withDefault(BoolShareVideoControl, false),
profilePadding: withDefault(StringControl, "0px"),
profileBorderRadius: withDefault(StringControl, "0px"),
videoAspectRatio: withDefault(StringControl, "1 / 1"),
@@ -236,6 +235,9 @@ let VideoCompBuilder = (function (props) {
}
}, [props.userId.value]);
+ console.log(props.userId);
+
+
return (
<EditorContext.Consumer>
{(editorState) => (
@@ -264,7 +266,7 @@ let VideoCompBuilder = (function (props) {
borderRadius: props.style.radius,
width: "auto",
}}
- id={props.shareScreen ? "share-screen" : userId}
+ id={userId}
></VideoContainer>
) : (
<></>
@@ -300,9 +302,6 @@ let VideoCompBuilder = (function (props) {
<Section name={sectionNames.basic}>
{children.userId.propertyView({ label: trans("meeting.videoId") })}
{children.autoHeight.getPropertyView()}
- {children.shareScreen.propertyView({
- label: trans("meeting.shareScreen"),
- })}
{children.profileImageUrl.propertyView({
label: trans("meeting.profileImageUrl"),
placeholder: "https://via.placeholder.com/120",
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
new file mode 100644
index 000000000..424d04853
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
@@ -0,0 +1,345 @@
+import { BoolCodeControl } from "comps/controls/codeControl";
+import { dropdownControl } from "comps/controls/dropdownControl";
+// import { IconControl } from "comps/controls/iconControl";
+import { CompNameContext, EditorContext, EditorState } from "comps/editorState";
+import { withDefault } from "comps/generators";
+import { UICompBuilder } from "comps/generators/uiCompBuilder";
+import ReactResizeDetector from "react-resize-detector";
+// import _ from "lodash";
+import {
+ CommonBlueLabel,
+ controlItem,
+ Dropdown,
+ Section,
+ sectionNames,
+} from "lowcoder-design";
+import { trans } from "i18n";
+
+import styled, { css } from "styled-components";
+import {
+ CommonNameConfig,
+ NameConfig,
+ withExposingConfigs,
+} from "../../generators/withExposing";
+import { IForm } from "../formComp/formDataConstants";
+import { SimpleNameComp } from "../simpleNameComp";
+import { ButtonStyleControl } from "./videobuttonCompConstants";
+import { RefControl } from "comps/controls/refControl";
+import { useEffect, useRef, useState } from "react";
+
+import { AutoHeightControl } from "comps/controls/autoHeightControl";
+import { client } from "./videoMeetingControllerComp";
+
+import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
+
+import {
+ MeetingEventHandlerControl,
+ StringControl,
+ StringStateControl,
+ hiddenPropertyView,
+ stringExposingStateControl,
+} from "@lowcoder-ee/index.sdk";
+import { BoolShareVideoControl } from "./meetingControlerUtils";
+
+const FormLabel = styled(CommonBlueLabel)`
+ font-size: 13px;
+ margin-right: 4px;
+`;
+
+function getFormOptions(editorState: EditorState) {
+ return editorState
+ .uiCompInfoList()
+ .filter((info) => info.type === "form")
+ .map((info) => ({
+ label: info.name,
+ value: info.name,
+ }));
+}
+
+const VideoContainer = styled.video`
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+`;
+
+function getForm(editorState: EditorState, formName: string) {
+ const comp = editorState?.getUICompByName(formName);
+ if (comp && comp.children.compType.getView() === "form") {
+ return comp.children.comp as unknown as IForm;
+ }
+}
+
+function getFormEventHandlerPropertyView(
+ editorState: EditorState,
+ formName: string
+) {
+ const form = getForm(editorState, formName);
+ if (!form) {
+ return undefined;
+ }
+
+ return (
+ <CompNameContext.Provider value={formName}>
+ {form.onEventPropertyView(
+ <>
+ <FormLabel
+ onClick={() =>
+ editorState.setSelectedCompNames(
+ new Set([formName]),
+ "rightPanel"
+ )
+ }
+ >
+ {formName}
+ </FormLabel>
+ {trans("button.formButtonEvent")}
+ </>
+ )}
+ </CompNameContext.Provider>
+ );
+}
+
+class SelectFormControl extends SimpleNameComp {
+ override getPropertyView() {
+ const label = trans("button.formToSubmit");
+ return controlItem(
+ { filterText: label },
+ <EditorContext.Consumer>
+ {(editorState) => (
+ <>
+ <Dropdown
+ label={label}
+ value={this.value}
+ options={getFormOptions(editorState)}
+ onChange={(value) => this.dispatchChangeValueAction(value)}
+ allowClear={true}
+ />
+ {getFormEventHandlerPropertyView(editorState, this.value)}
+ </>
+ )}
+ </EditorContext.Consumer>
+ );
+ }
+}
+
+const typeOptions = [
+ {
+ label: trans("button.default"),
+ value: "",
+ },
+ {
+ label: trans("button.submit"),
+ value: "submit",
+ },
+] as const;
+
+export const meetingStreamChildren = {
+ autoHeight: withDefault(AutoHeightControl, "fixed"),
+ profilePadding: withDefault(StringControl, "0px"),
+ profileBorderRadius: withDefault(StringControl, "0px"),
+ videoAspectRatio: withDefault(StringControl, "1 / 1"),
+ type: dropdownControl(typeOptions, ""),
+ onEvent: MeetingEventHandlerControl,
+ disabled: BoolCodeControl,
+ loading: BoolCodeControl,
+ form: SelectFormControl,
+ // prefixIcon: IconControl,
+ // suffixIcon: IconControl,
+ style: ButtonStyleControl,
+ viewRef: RefControl<HTMLElement>,
+ userId: stringExposingStateControl(""),
+ profileImageUrl: withDefault(
+ StringStateControl,
+ "https://api.dicebear.com/7.x/fun-emoji/svg?seed=Peanut&radius=50&backgroundColor=transparent&randomizeIds=true&eyes=wink,sleepClose"
+ ),
+ noVideoText: stringExposingStateControl("No Video"),
+};
+
+let SharingCompBuilder = (function (props) {
+ return new UICompBuilder(meetingStreamChildren, (props) => {
+ const videoRef = useRef<HTMLVideoElement>(null);
+ const conRef = useRef<HTMLDivElement>(null);
+ const [userId, setUserId] = useState();
+ const [userName, setUsername] = useState("");
+ const [showVideoSharing, setVideoSharing] = useState(true);
+
+ useEffect(() => {
+ if (props.userId.value !== "") {
+ let userData = JSON.parse(props.userId?.value);
+ client.on(
+ "user-published",
+ async (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
+ if (mediaType === "video") {
+ const remoteTrack = await client.subscribe(user, mediaType);
+ let userId = user.uid + "";
+ if (
+ user.hasVideo &&
+ user.uid + "" !== userData.user &&
+ userData.user !== ""
+ ) {
+ props.onEvent("videoOn");
+ }
+ const element = document.getElementById(userId);
+
+ if (element) {
+ remoteTrack.play(userId);
+ }
+ }
+ if (mediaType === "audio") {
+ const remoteTrack = await client.subscribe(user, mediaType);
+ if (
+ user.hasAudio &&
+ user.uid + "" !== userData.user &&
+ userData.user !== ""
+ ) {
+ userData.audiostatus = user.hasVideo;
+
+ props.onEvent("audioUnmuted");
+ }
+ remoteTrack.play();
+ }
+ }
+ );
+ client.on(
+ "user-unpublished",
+ (user: IAgoraRTCRemoteUser, mediaType: "video" | "audio") => {
+ console.log("user-unpublished");
+
+ if (mediaType === "audio") {
+ if (
+ !user.hasAudio &&
+ user.uid + "" !== userData.user &&
+ userData.user !== ""
+ ) {
+ userData.audiostatus = user.hasVideo;
+ props.onEvent("audioMuted");
+ }
+ }
+ if (mediaType === "video") {
+ if (videoRef.current && videoRef.current?.id === user.uid + "") {
+ videoRef.current.srcObject = null;
+ }
+ if (
+ !user.hasVideo &&
+ user.uid + "" !== userData.user &&
+ userData.user !== ""
+ ) {
+ props.onEvent("videoOff");
+ }
+ }
+ }
+ );
+
+ setUserId(userData.user);
+ setUsername(userData.userName);
+ setVideoSharing(userData.streamingSharing);
+ }
+ }, [props.userId.value]);
+
+ return (
+ <EditorContext.Consumer>
+ {(editorState) => (
+ <ReactResizeDetector>
+ <div
+ ref={conRef}
+ style={{
+ display: "flex",
+ alignItems: "center",
+ height: "100%",
+ overflow: "hidden",
+ borderRadius: props.style.radius,
+ aspectRatio: props.videoAspectRatio,
+ backgroundColor: props.style.background,
+ padding: props.style.padding,
+ margin: props.style.margin,
+ }}
+ >
+ {userId ? (
+ <VideoContainer
+ onClick={() => props.onEvent("videoClicked")}
+ ref={videoRef}
+ style={{
+ display: `${showVideoSharing ? "flex" : "none"}`,
+ aspectRatio: props.videoAspectRatio,
+ borderRadius: props.style.radius,
+ width: "auto",
+ }}
+ id="share-screen"
+ ></VideoContainer>
+ ) : (
+ <></>
+ )}
+ <div
+ style={{
+ flexDirection: "column",
+ alignItems: "center",
+ display: `${!showVideoSharing || userId ? "flex" : "none"}`,
+ margin: "0 auto",
+ padding: props.profilePadding,
+ }}
+ >
+ <img
+ alt=""
+ style={{
+ borderRadius: props.profileBorderRadius,
+ width: "100%",
+ overflow: "hidden",
+ }}
+ src={props.profileImageUrl.value}
+ />
+ <p style={{ margin: "0" }}>{userName ?? ""}</p>
+ </div>
+ </div>
+ </ReactResizeDetector>
+ )}
+ </EditorContext.Consumer>
+ );
+ })
+ .setPropertyViewFn((children) => (
+ <>
+ <Section name={sectionNames.basic}>
+ {children.userId.propertyView({ label: trans("meeting.videoId") })}
+ {children.autoHeight.getPropertyView()}
+ {children.profileImageUrl.propertyView({
+ label: trans("meeting.profileImageUrl"),
+ placeholder: "https://via.placeholder.com/120",
+ })}
+ </Section>
+
+ <Section name={sectionNames.interaction}>
+ {children.onEvent.getPropertyView()}
+ </Section>
+ <Section name={sectionNames.layout}>
+ {hiddenPropertyView(children)}
+ </Section>
+ <Section name={sectionNames.style}>
+ {children.profilePadding.propertyView({
+ label: "Profile Image Padding",
+ })}
+ {children.profileBorderRadius.propertyView({
+ label: "Profile Image Border Radius",
+ })}
+ {children.videoAspectRatio.propertyView({
+ label: "Video Aspect Ratio",
+ })}
+ {children.style.getPropertyView()}
+ </Section>
+ </>
+ ))
+ .build();
+})();
+
+SharingCompBuilder = class extends SharingCompBuilder {
+ override autoHeight(): boolean {
+ return this.children.autoHeight.getView();
+ }
+};
+
+export const VideoSharingStreamComp = withExposingConfigs(SharingCompBuilder, [
+ new NameConfig("loading", trans("button.loadingDesc")),
+ new NameConfig("profileImageUrl", trans("meeting.profileImageUrl")),
+
+ ...CommonNameConfig,
+]);
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index 8aa9386b7..a14e4e682 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -142,6 +142,7 @@ import { ResponsiveLayoutComp } from "./comps/responsiveLayout";
import { VideoMeetingStreamComp } from "./comps/meetingComp/videoMeetingStreamComp";
import { ControlButton } from "./comps/meetingComp/controlButton";
import { VideoMeetingControllerComp } from "./comps/meetingComp/videoMeetingControllerComp";
+import { VideoSharingStreamComp } from "./comps/meetingComp/videoSharingStreamComp";
type Registry = {
[key in UICompType]?: UICompManifest;
@@ -560,7 +561,17 @@ const uiCompMap: Registry = {
},
defaultDataFn: defaultContainerData,
},
-
+ //ADDED BY FRED
+ sharingcomponent: {
+ name: trans("meeting.sharingCompName"),
+ enName: "Sharing",
+ description: trans("meeting.sharingCompName"),
+ categories: ["meeting"],
+ icon: VideoCompIcon,
+ keywords: trans("meeting.meetingCompKeywords"),
+ comp: VideoSharingStreamComp,
+ withoutLoading: true,
+ },
videocomponent: {
name: trans("meeting.videoCompName"),
enName: "Video",
@@ -581,6 +592,7 @@ const uiCompMap: Registry = {
comp: ControlButton,
withoutLoading: true,
},
+ //END
tabbedContainer: {
name: trans("uiComp.tabbedContainerCompName"),
enName: "Tabbed Container",
@@ -931,7 +943,7 @@ const uiCompMap: Registry = {
layoutInfo: {
w: 13,
h: 55,
- }
+ },
},
mention: {
name: trans("uiComp.mentionCompName"),
diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
index c48be999e..54d0f5d2c 100644
--- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts
+++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
@@ -58,6 +58,7 @@ export type UICompType =
| "chart"
| "meeting"
| "videocomponent"
+ | "sharingcomponent"
| "controlButton"
| "imageEditor"
| "calendar"
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index ade1d8355..73756da19 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -861,6 +861,7 @@ export const en = {
audioCompDesc: "Audio component",
audioCompKeywords: "",
videoCompName: "Video",
+ sharingCompName: "Sharing",
videoCompDesc: "Video component",
videoCompKeywords: "",
drawerCompName: "Drawer",
@@ -1466,8 +1467,8 @@ export const en = {
meetingName: "Meeting Name",
localUserID: "Host User Id",
userName: "Host User Name",
- rtmToken : "Agora RTM Token",
- rtcToken : "Agora RTC Token",
+ rtmToken: "Agora RTM Token",
+ rtcToken: "Agora RTC Token",
videoCompText: "No video Text",
profileImageUrl: "Profile Image Url",
right: "Right",
@@ -1484,18 +1485,21 @@ export const en = {
actionBtnDesc: "Action Button",
broadCast: "BroadCast Messages",
title: "Meeting Title",
- meetingCompName: "Meeting Controller",
- videoCompName: "Video Stream",
- videoSharingCompName: "Screen Sharing",
- meetingControlCompName: "Controls Buttons",
- meetingCompDesc: "Meeting component",
- meetingCompControls: "Meeting control",
- meetingCompKeywords: "",
+ //ADDED BY FRED
+ meetingCompName: "Agora Meeting Controller",
+ sharingCompName: "Screen share Stream",
+ videoCompName: "Camera Stream",
+ videoSharingCompName: "Screen share Stream",
+ meetingControlCompName: "Control Button",
+ meetingCompDesc: "Meeting Component",
+ meetingCompControls: "Meeting Control",
+ meetingCompKeywords: "Agora Meeting, Web Meeting, Collaboration",
+ //END
iconSize: "Icon Size",
userId: "userId",
roomId: "roomId",
- meetingActive : "Ongoing Meeting",
- messages : "Broadcasted Messages",
+ meetingActive: "Ongoing Meeting",
+ messages: "Broadcasted Messages",
},
settings: {
title: "Settings",
@@ -1844,6 +1848,8 @@ export const en = {
preloadLibsEmpty: "No JavaScript libraries were added",
preloadLibsAddBtn: "Add a library",
saveSuccess: "Saved successfully",
+ AuthOrgTitle: "Workspace welcome Screen",
+ AuthOrgDescrition: "The URL for your users to Sign in to the current workspace.",
},
branding: {
title: "Branding",
diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
index 8baf2944d..2820e14c9 100644
--- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
@@ -88,6 +88,7 @@ export const CompStateIcon: {
meeting: <LeftMeeting />,
mermaid: <LeftChart />,
videocomponent: <LeftMeeting />,
+ sharingcomponent: <LeftMeeting />,
controlButton: <LeftButton />,
tabbedContainer: <LeftContainer />,
modal: <LeftModal />,
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
index 62f121ac0..353fba1a4 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
@@ -34,6 +34,7 @@ import { messageInstance, AddIcon } from "lowcoder-design";
import { currentOrgAdmin } from "../../../util/permissionUtils";
import CreateModal from "./createModal";
import _ from "lodash";
+import { HelpText } from "components/HelpText";
export const IdSourceList = (props: any) => {
const user = useSelector(getUser);
@@ -44,6 +45,18 @@ export const IdSourceList = (props: any) => {
const [modalVisible, setModalVisible] = useState(false);
const enableEnterpriseLogin = useSelector(selectSystemConfig)?.featureFlag?.enableEnterpriseLogin;
+ let protocol = window.location.protocol;
+ const port = window.location.port;
+ let currentDomain = window.location.hostname;
+
+ // Show port only if it is not a standard port
+ if (port && port !== '80' && port !== '443') {
+ currentDomain += `:${port}`;
+ }
+
+ const redirectUrl = encodeURIComponent(`${protocol}//${currentDomain}/apps`);
+ const loginUrl = `${protocol}//${currentDomain}/org/${currentOrgId}/auth/login?redirectUrl=${encodeURIComponent(redirectUrl)}`;
+
useEffect(() => {
if (!currentOrgId) {
return;
@@ -154,6 +167,11 @@ export const IdSourceList = (props: any) => {
)}
/>
</TableStyled>
+
+ <div style={{ marginTop: 20, marginLeft: 12 }} className="section-title">{trans("advanced.AuthOrgTitle")}</div>
+ <HelpText style={{ marginBottom: 12, marginLeft: 12 }}>{trans("advanced.AuthOrgDescrition") + ": "}</HelpText>
+ <HelpText style={{ marginBottom: 12, marginLeft: 12 }}><a href={loginUrl} target="blank">{loginUrl}</a></HelpText>
+
</Level1SettingPageContentWithList>
<CreateModal
modalVisible={modalVisible}
@@ -167,3 +185,4 @@ export const IdSourceList = (props: any) => {
</>
);
};
+