只显示一个摄像头，并自动切换到已开启用户，与共享屏幕顶部对齐

src/views/meeting.vue

@@ -297,6 +297,9 @@ const switchToVideoOn = () => {
   const nextBtn = document.querySelector(
     "#suspension-view-tabpanel-ribbon>div>div:last-child>.zmwebsdk-MuiBox-root>button:last-child"
   );
+  if (!prevBtn || !nextBtn) {
+    return;
+  }
   let isNextBtnHidden = nextBtn.className.includes(
     "zmwebsdk-makeStyles-hidePaginationIcon"
   );
@@ -333,7 +336,7 @@ const switchToVideoOn = () => {
       clearInterval(timer);
     }
   }, 100);
-  console.log(isNextBtnHidden);
+  // console.log(isNextBtnHidden);
 };
 
 const inSharing = ref(false); // 共享屏幕是否开启
@@ -369,8 +372,20 @@ setInterval(() => {
   // attendeeslist.value.splice(0, attendeeslist.value.length);
   attendeeslist.value = meetingConfig.client
     .getAttendeeslist()
-    .map((el) => JSON.stringify(el))
+    .map((el) => JSON.stringify({ userId: el.userId, bVideoOn: el.bVideoOn }))
     .join("$");
+
+  // 检测共享屏幕canvas距离父元素顶部距离
+  // const shareScreenWrapEl =
+  const shareScreenCanvasEl = document.querySelector(
+    'div[id*="suspension-view-tabpanel"]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div:first-child'
+  );
+  // console.log(shareScreenCanvasEl);
+  if (shareScreenCanvasEl) {
+    document.querySelector(
+      `div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > div[class*="inSharing"] + div`
+    ).style.top = `${shareScreenCanvasEl.offsetTop}px`;
+  }
 }, 500);
 
 // 监听共享屏幕状态
@@ -378,26 +393,19 @@ watch(inSharing, (val) => {
   console.log(val);
   if (val) {
     // setLayout(templateId.value);
-    makeVideoTop();
+    // makeVideoTop();
   } else {
     const galleryViewButton = document.querySelector(
       "#suspension-view-tab-thumbnail-gallery"
     );
     if (galleryViewButton) galleryViewButton.click();
-    // const videoScreenWrapEl = document.querySelectorAll(
-    //   ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
-    // )[2];
-    // if (!videoScreenWrapEl) return;
-    // const videoWrapEl = videoScreenWrapEl.lastChild;
-    // videoWrapEl.style.width = "";
-    // videoScreenWrapEl.style.flexDirection = "";
   }
 });
 
 watch(attendeeslist, (val) => {
   console.log(val);
   if (inSharing.value) {
-    // switchToVideoOn();
+    switchToVideoOn();
   }
 });
 
@@ -412,11 +420,8 @@ const setFullScreen = async () => {
     .forEach((el) => {
       el.setAttribute(
         `style`,
-        `height: ${screen.height - screen.width * 0.08 - 42}px !important`
+        `height: ${screen.height - screen.width * 0.08}px !important`
       );
-      // el.style.height = `${
-      //   screen.height - screen.width * 0.08 - 42
-      // }px !important;`;
     });
 };
 // 是否显示考试和问卷弹窗
@@ -662,11 +667,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
         right: 0;
         bottom: 0;
       }
-      // #video-element {
-      // width: $videoELementWidth;
-      // height: $videoElementHeight;
-      // background-color: indianred;
-      // }
       :deep(.text-tag) {
         position: absolute;
         z-index: 999;
@@ -686,11 +686,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 }
 
 .layout-template-1 {
-  :deep(#suspension-view-tabpanel-ribbon
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      > div[class*="inSharing"]
-      + div),
-  :deep(#suspension-view-tabpanel-speaker
+  :deep(div[id*="suspension-view-tabpanel"]
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
       > div[class*="inSharing"]
       + div) {
@@ -698,11 +694,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
   }
 }
 .layout-template-2 {
-  :deep(#suspension-view-tabpanel-ribbon
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      > div[class*="inSharing"]
-      + div),
-  :deep(#suspension-view-tabpanel-speaker
+  :deep(div[id*="suspension-view-tabpanel"]
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
       > div[class*="inSharing"]
       + div) {
@@ -717,31 +709,25 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 }
 
 .layout-template-3 {
-  :deep(#suspension-view-tabpanel-ribbon
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      > div[class*="inSharing"]
-      + div),
-  :deep(#suspension-view-tabpanel-speaker
+  :deep(div[id*="suspension-view-tabpanel"]
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
       > div[class*="inSharing"]
       + div) {
     width: $meetingComponentWitdh * 0.2;
     height: $meetingComponentWitdh * 0.2 * 9 / 16;
-    align-self: center;
+    position: relative;
+    // align-self: center;
   }
 }
 .layout-template-4 {
-  :deep(#suspension-view-tabpanel-ribbon
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-      > div[class*="inSharing"]
-      + div),
-  :deep(#suspension-view-tabpanel-speaker
+  :deep(div[id*="suspension-view-tabpanel"]
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
       > div[class*="inSharing"]
       + div) {
     width: $meetingComponentWitdh * 0.2;
     height: $meetingComponentWitdh * 0.2 * 9 / 16;
-    align-self: center;
+    position: relative;
+    // align-self: center;
   }
   :deep(#suspension-view-tabpanel-ribbon
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
@@ -770,11 +756,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
   width: 270px;
   background: #ccc;
 }
-:deep(#suspension-view-tabpanel-ribbon
-    > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
-:deep(#suspension-view-tabpanel-gallery
-    > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
-:deep(#suspension-view-tabpanel-speaker
+:deep(div[id*="suspension-view-tabpanel"]
     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
   height: calc(80vw * 0.9 * 9 / 16);
 }
@@ -784,6 +766,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
   box-shadow: 0 0;
 }
 
+// 适配移动端 屏幕宽度小于 900px
 @media screen and (max-width: 900px) {
   $meetingComponentWitdh: 100vw * 0.9;
   $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
@@ -799,21 +782,13 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       > .zmwebsdk-MuiPaper-root:nth-child(1)) {
     width: $meetingComponentWitdh !important;
   }
-  :deep(#suspension-view-tabpanel-ribbon
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
-  :deep(#suspension-view-tabpanel-gallery
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
-  :deep(#suspension-view-tabpanel-speaker
+  :deep(div[id="suspension-view-tabpanel"]
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
     height: calc(100vw * 0.9 * 9 / 16) !important;
   }
 
   .layout-template-1 {
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div),
-    :deep(#suspension-view-tabpanel-speaker
+    :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
@@ -823,11 +798,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     }
   }
   .layout-template-2 {
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div),
-    :deep(#suspension-view-tabpanel-speaker
+    :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
@@ -837,35 +808,30 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     }
   }
   .layout-template-3 {
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div),
-    :deep(#suspension-view-tabpanel-speaker
+    :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.2;
       height: $meetingComponentWitdh * 0.2 * 9 / 14;
-      align-self: center;
+      position: relative;
+      // align-self: center;
     }
   }
   .layout-template-4 {
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div),
-    :deep(#suspension-view-tabpanel-speaker
+    :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.2;
       height: $meetingComponentWitdh * 0.2 * 9 / 14;
-      align-self: center;
+      position: relative;
+      // align-self: center;
     }
   }
 }
 
+// 全屏样式
 #meeting-container.fullscreen {
   $meetingComponentWitdh: 100vw * 0.9;
   $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
@@ -873,11 +839,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
   width: 100vw !important;
 
   .layout-template-1 {
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div),
-    :deep(#suspension-view-tabpanel-speaker
+    :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
@@ -885,65 +847,36 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     }
   }
   .layout-template-2 {
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div),
-    :deep(#suspension-view-tabpanel-speaker
+    :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.5;
     }
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
-    :deep(#suspension-view-tabpanel-speaker
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-      flex-direction: row-reverse;
-    }
   }
-
   .layout-template-3 {
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div),
-    :deep(#suspension-view-tabpanel-speaker
+    :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.2;
       height: $meetingComponentWitdh * 0.2 * 9 / 16;
-      align-self: center;
+      position: relative;
+      // align-self: center;
     }
   }
   .layout-template-4 {
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div),
-    :deep(#suspension-view-tabpanel-speaker
+    :deep(div[id*="suspension-view-tabpanel"]
         > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.2;
       height: $meetingComponentWitdh * 0.2 * 9 / 16;
-      align-self: center;
-    }
-    :deep(#suspension-view-tabpanel-ribbon
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
-    :deep(#suspension-view-tabpanel-speaker
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-      flex-direction: row-reverse;
+      position: relative;
+      // align-self: center;
     }
   }
 
-  :deep(.zmwebsdk-MuiToolbar-root.zmwebsdk-MuiToolbar-regular) {
-    display: none; // 隐藏顶部 toolbar
-  }
-  :deep(div[class*="zmwebsdk-makeStyles-singleView"]) {
-    padding: 0; // 去掉会议组件边距
-  }
   :deep(#video-element
       > div
       > .zmwebsdk-MuiPaper-root
@@ -954,14 +887,9 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       > div
       > .zmwebsdk-MuiPaper-root
       > .zmwebsdk-MuiPaper-root:nth-child(2)) {
-    width: 270px;
-    background: #ccc;
+    display: none;
   }
-  :deep(#suspension-view-tabpanel-ribbon
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
-  :deep(#suspension-view-tabpanel-gallery
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
-  :deep(#suspension-view-tabpanel-speaker
+  :deep(div[id*="suspension-view-tabpanel"]
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
     height: calc(100vw * 0.9 * 9 / 16);
   }