声音显示优化

src/page/Meeting/index.module.scss

@@ -29,9 +29,28 @@
         }
       }
 
-      >img {
+      >label {
+        height: 18px;
         width: 18px;
-        margin-right: 4px;
+        position: relative;
+
+        >img {
+          width: 100%;
+          height: 100%;
+          margin-right: 4px;
+        }
+
+        >div {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          height: 0%;
+          width: 100%;
+          overflow: hidden;
+          background-repeat: no-repeat;
+          background-position: bottom center;
+          background-size: cover;
+        }
       }
 
       >span {
@@ -397,25 +416,6 @@
           padding: 10px 20px;
           white-space: nowrap;
         }
-
-        .meetingContentSwiperCardBorder {
-          position: absolute;
-          height: 3px;
-          width: calc(100% - 20px);
-          background-color: #2C2C2C;
-          overflow: hidden;
-          left: 10px;
-          z-index: 1;
-          bottom: 9px;
-
-          >div {
-            background-color: #5575F2;
-            position: absolute;
-            height: 3px;
-            left: 0;
-            top: 0;
-          }
-        }
       }
 
       .meetingContentBodyRight {
@@ -742,6 +742,31 @@
             right: -10px;
           }
 
+          >label {
+            height: 50px;
+            height: 50px;
+            cursor: pointer;
+            position: relative;
+
+            >img {
+              width: 100%;
+              height: 100%;
+              margin-right: 4px;
+            }
+
+            >div {
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              height: 0%;
+              width: 100%;
+              overflow: hidden;
+              background-repeat: no-repeat;
+              background-position: bottom center;
+              background-size: cover;
+            }
+          }
+
           &:hover {
             background-color: #161A29;
           }

src/page/Meeting/index.tsx

@@ -637,10 +637,15 @@ const Meeting: React.FC = () => {
       },
       onAudioVolumeIndication: async (speakers: any) => {
         speakers.forEach((item: any) => {
+          let domMe = document.getElementById(`micr-item-${userInfo.uid}`);
           let dom = document.getElementById(`micr-${item.uid ? item.uid : userInfo.uid}`);
           if (dom) {
             const percentage = (item.volume / 255) * 100
-            dom.style.width = `${percentage}%`
+            dom.style.height = `${percentage}%`
+          }
+          if (domMe && !item.uid) {
+            const percentage = (item.volume / 255) * 100
+            domMe.style.height = `${percentage}%`
           }
         });
       }
@@ -1598,9 +1603,6 @@ const Meeting: React.FC = () => {
                         }} />
                       </div>
                     </Popover> : null}
-                    <div className={styles.meetingContentSwiperCardBorder}>
-                      {item.enableMicr ? <div id={`micr-${item.uid}`}></div> : null}
-                    </div>
                   </div> : null)
                 }
                 )}
@@ -2095,6 +2097,22 @@ const Meeting: React.FC = () => {
                             }}
                           >{noViewChatList}</div> : null}
                         </div>
+                      case '静音':
+                      case '解除静音':
+                        return <div
+                          className='drag'
+                          onClick={() => changeStatusList(row, itemIndex, rowIndex)}
+                          onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)}
+                          onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          key={rowIndex}>
+                          <label>
+                            <img src={row.active ? row.iconActive : row.icon} alt="" />
+                            <div style={{ backgroundImage: `url(${ImageUrl.icon49})` }} id={`micr-item-${userInfo.uid}`}>
+                            </div>
+                          </label>
+                          <span>{row.title}</span>
+                        </div>
                       default:
                         return <div
                           className='drag'
@@ -2194,7 +2212,11 @@ const meetingContentUser = (item: any, bool?: boolean) => {
             <div style={{ background: item.roleId === '1' ? '#FDC229' : '#3F51B5' }}>
               <img src={ImageUrl.icon32} alt="" />
             </div> : null}
-          {!item.enableMicr ? <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" /> : ''}
+          <label>
+            <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" />
+            <div style={{ backgroundImage: `url(${ImageUrl.icon49})` }} id={`micr-${item.uid}`}>
+            </div>
+          </label>
           <span style={{ maxWidth: bool ? '' : '8vw' }} title={`${item.userName}${item.roleId === '1' || item.isRoomManager ? item.roleId === '1' ? '(管理员)' : '(发言人)' : ''}`}>
             {item.userName}
             {item.roleId === '1' || item.isRoomManager ? item.roleId === '1' ? '(管理员)' : '(发言人)' : ''}

src/utils/package/imageUrl.ts

@@ -70,6 +70,7 @@ import icon47 from '@/assets/icon47.png'
 import icon47Active from '@/assets/icon47-active.png'
 import icon48 from '@/assets/icon48.png'
 import icon48Select from '@/assets/icon48-select.png'
+import icon49 from '@/assets/icon49.png'
 export default {
   loading,
   icon,
@@ -142,5 +143,6 @@ export default {
   icon47,
   icon47Active,
   icon48,
-  icon48Select
+  icon48Select,
+  icon49,
 }