声音提示

src/page/Meeting/index.module.scss

@@ -302,6 +302,25 @@
           padding: 10px 20px;
           white-space: nowrap;
         }
+
+        .meetingContentSwiperCardBorder {
+          position: absolute;
+          height: 1px;
+          width: calc(100% - 20px);
+          background-color: #2C2C2C;
+          overflow: hidden;
+          left: 10px;
+          z-index: 1;
+          bottom: 9px;
+
+          >div {
+            background-color: #5575F2;
+            position: absolute;
+            height: 1px;
+            left: 0;
+            top: 0;
+          }
+        }
       }
 
       .meetingContentBodyRight {

src/page/Meeting/index.tsx

@@ -174,7 +174,20 @@ const Meeting: React.FC = () => {
         })
       },
       onAudioVolumeIndication: async (speakers: any) => {
-        // console.log(speakers);
+        setRoomUserList((res: any) => {
+          speakers.forEach((item: any) => {
+            if (item.uid) {
+              let itemUser = res.find((row: any) => row.uid === String(item.uid))
+              itemUser.volumeNumber = (item.volume / 255) * 100;
+            } else {
+              let me = res.find((row: any) => row.uid === userInfo.uid)
+              if (me) {
+                me.volumeNumber = (item.volume / 255) * 100;
+              }
+            }
+          });
+          return res
+        })
       }
     })
     agora.startCameraCapture()
@@ -352,7 +365,6 @@ const Meeting: React.FC = () => {
     setRoomUserList((res: any) => {
       res.forEach((item: any) => {
         if (item.uid === userInfo.uid) {
-          console.log(item.enableMicr, userInfo.uid,'哈哈哈哈哈哈哈');
           const footerListTemplate = [...footerList]
           footerListTemplate[0][0].title = item.enableMicr ? '静音' : '解除静音'
           footerListTemplate[0][0].active = !item.enableMicr
@@ -984,6 +996,9 @@ const Meeting: React.FC = () => {
                         }} />
                       </div>
                     </Popover>
+                    <div className={styles.meetingContentSwiperCardBorder}>
+                      {item.enableMicr  ? <div style={{ width: `${item.volumeNumber}%` }}></div> : null}
+                    </div>
                   </div>
                 }
                 )}