优化小窗口样式

src/components/EquipmentManagement/index.tsx

@@ -26,6 +26,7 @@ const EquipmentManagement = forwardRef((_props: any, ref: any) => {
     const isOpen = await getKeyOpenChildWindow('shareScreenWindow')
     if (isOpen) {
       window.electron.mainWindowHide()
+      window.electron.setViewStatus('hide')
     }
     setEquipmentManagementModal(false)
   }

src/components/StupWizard/index.tsx

@@ -103,6 +103,7 @@ const StupWizard = forwardRef((props: any, ref: any) => {
                                 const isOpen = await getKeyOpenChildWindow('shareScreenWindow')
                                 if (isOpen) {
                                     window.electron.mainWindowHide()
+                                    window.electron.setViewStatus('hide')
                                 }
                                 setIsStupWizard(false)
                             }}

src/page/Meeting/ChatSmallWindow/index.module.scss

@@ -60,5 +60,10 @@
 
   >div:nth-child(2) {
     flex-shrink: 0;
+    opacity: 0.4;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 }

src/page/Meeting/ShareScreenWindow/index.module.scss

@@ -32,8 +32,24 @@
         cursor: pointer;
         width: calc(100% / 6);
 
+        >div {
+          position: relative;
+
           >img {
             height: 24px;
+            width: 24px;
+          }
+
+          >div {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background-repeat: no-repeat;
+            background-position: bottom center;
+            background-size: cover;
+            width: 100%;
+            height: 0%;
+          }
         }
 
         >span {

src/page/Meeting/ShareScreenWindow/index.tsx

@@ -59,7 +59,7 @@ const ShareScreenWindow: React.FC = () => {
   useEffect(() => {
     getRoomUser()
     channel.onmessage = function (event) {
-      const { type, time, roomUserList, footerList } = event.data;
+      const { type, time, roomUserList, footerList, currentSpeakUserMe } = event.data;
       const footerListTemplate = [...footerLists];
       switch (type) {
         case 'time':
@@ -77,6 +77,12 @@ const ShareScreenWindow: React.FC = () => {
           footerListTemplate[5].active = footerList[1][3].active;
           setFooterLists(footerListTemplate)
           break;
+        case 'currentSpeakUserMe':
+          let domMe = document.getElementById(`micr-item-${userInfo.uid}`) as HTMLDivElement;
+          if (domMe) {
+            domMe.style.height = `${currentSpeakUserMe}%`
+          }
+          break;
       }
     }
   }, []);
@@ -105,6 +111,15 @@ const ShareScreenWindow: React.FC = () => {
       }
     })
   }
+  // 底部按钮点击效果
+  const changeFooterListSelect = (item: any, index: number, bool: boolean): void => {
+    let arr = ['静音', '解除静音', '关闭视频', '开启视频']
+    if (arr.indexOf(item.title) === -1) {
+      const footerListTemplate = [...footerLists]
+      footerListTemplate[index].select = bool;
+      setFooterLists(footerListTemplate)
+    }
+  }
   return (
     <>
       <div className={styles.shareScreenWindow}>
@@ -114,6 +129,9 @@ const ShareScreenWindow: React.FC = () => {
             {footerLists.map((item: any, index: number) => {
               return (
                 <div
+                  onMouseDown={() => changeFooterListSelect(item, index, true)}
+                  onMouseUp={() => changeFooterListSelect(item, index, false)}
+                  onMouseLeave={() => changeFooterListSelect(item, index, false)}
                   onClick={async () => {
                     switch (item.title) {
                       case '静音':
@@ -159,7 +177,11 @@ const ShareScreenWindow: React.FC = () => {
                     }
                   }}
                   key={index}>
+                  <div>
+                    {!item.active ? <div style={{ backgroundImage: `url(${ImageUrl.icon49})` }} id={`micr-item-${userInfo.uid}`}>
+                    </div> : ''}
                     {item.select ? <img src={item.iconSelect} alt="" /> : <img src={item.active ? item.iconActive : item.icon} alt="" />}
+                  </div>
                   <span>{item.title}{item.title === '成员列表' ? `(${roomUserLists.filter((item: any) => item.isRoom).length})` : ''}</span>
                 </div>
               )

src/page/Meeting/index.tsx

@@ -232,6 +232,7 @@ const Meeting: React.FC = () => {
         case 'shareScreenWindowSetting':
           stupWizardRef.current.changeModal(3);
           window.electron.mainWindowCenter()
+          window.electron.setViewStatus('show')
           break;
         case 'shareScreenWindowfooterListsTitle':
           switch (shareScreenWindowfooterListsTitle) {
@@ -284,6 +285,7 @@ const Meeting: React.FC = () => {
         case 'shareScreenWindowEquipmentManagement':
           equipmentManagement(shareScreenWindowEquipmentManagement.uid, shareScreenWindowEquipmentManagement.userName)
           window.electron.mainWindowCenter()
+          window.electron.setViewStatus('show')
           break;
         case 'chatSmallWindowSendChannelMsg':
           sendMsg(chatSmallWindowSendChannelMsg.msg)
@@ -314,6 +316,7 @@ const Meeting: React.FC = () => {
         case 'chatBigWindowEquipmentManagement':
           equipmentManagement(chatBigWindowEquipmentManagement.uid, chatBigWindowEquipmentManagement.userName)
           window.electron.mainWindowCenter()
+          window.electron.setViewStatus('show')
           break;
         case 'chatBigWindowGetRoomKickout':
           GetRoomKickout(state.channelId, chatBigWindowGetRoomKickout.uid)
@@ -934,6 +937,10 @@ const Meeting: React.FC = () => {
             if (domMe && !item.uid) {
               const percentage = (item.volume / 255) * 100
               domMe.style.height = `${percentage}%`
+              channel.postMessage({
+                type: 'currentSpeakUserMe',
+                currentSpeakUserMe: percentage,
+              });
             }
           });
           const uidArr = (speakers.filter((item: any) => item.volume)).map(item => item.uid || userInfo.uid) as number[];