强制全屏 90%

2022-06-07 00:49:44 +08:00
parent 03a0dcf84b
commit 4cfdbc7edc
1 changed files with 156 additions and 158 deletions
--- a/src/views/meeting.vue
+++ b/src/views/meeting.vue
@ -83,6 +83,7 @@

    <el-dialog
      custom-class="check-media"
+      destroy-on-close
      v-model="showCheckMediaVideo"
      :close-on-click-modal="false"
      title="摄像头和麦克风"
@ -307,7 +308,7 @@ const setSize = () => {
  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
  meetingHeight.value = (meetingWidth.value * 9) / 16;

-  videoElementRef.value.style.width = `${meetingWidth.value}px`;
+  // videoElementRef.value.style.width = `${meetingWidth.value}px`;
  videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;

  document.querySelector(
@ -522,45 +523,37 @@ const setFullScreen = async () => {
  //   return;
  // }
  document.querySelector(".fullscreen-wrap").requestFullscreen();
-  // meetingContainerRef.value.requestFullscreen();
+
  isFullScreen.value = true;
  nextTick(() => {
    meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
    meetingHeight.value = (meetingWidth.value * 9) / 16;
+    // 当手机竖屏时
    if (window.orientation === 0) {
-      // const height = innerHeight;
      isVerticalFullScreen.value = true;
+      videoElementRef.value.style.height = `${
+        screen.width - screen.height * 0.08
+      }px`;
      nextTick(() => {
-        videoElementRef.value.setAttribute(
-          "style",
-          `width: ${innerHeight * 0.9}px !important; height: ${
-            (innerHeight * 0.9 * 9) / 16
-          }px !important`
-        );
-        document
-          .querySelectorAll(
-            'div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root'
-          )
-          .forEach((el) => {
-            el.setAttribute("style", `height: ${92}vw !important`);
-          });
-      });
-    }
-    videoElementRef.value.setAttribute(
-      `style`,
-      `width: ${meetingWidth.value}px !important; height: ${
-        screen.height - screen.width * 0.08
-      }px !important`
-    );
        document
          .querySelectorAll(
            "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
          )
          .forEach((el) => {
-        el.setAttribute(
-          `style`,
-          `height: ${screen.height - screen.width * 0.08}px !important`
-        );
+            el.style.height = `${screen.width - screen.height * 0.08}px`;
+          });
+      });
+    }
+
+    videoElementRef.value.style.height = `${
+      screen.height - screen.width * 0.08
+    }px`;
+    document
+      .querySelectorAll(
+        "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
+      )
+      .forEach((el) => {
+        el.style.height = `${screen.height - screen.width * 0.08}px`;
      });
  });
 };
@ -737,7 +730,7 @@ onMounted(() => {
  meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
  meetingHeight.value = (meetingWidth.value * 9) / 16;
-  videoElementRef.value.style.width = `${meetingWidth.value}px`;
+
  videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;

  // 当全屏状态改变时
@ -750,7 +743,7 @@ onMounted(() => {
      nextTick(() => {
        meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
        meetingHeight.value = (meetingWidth.value * 9) / 16;
-        videoElementRef.value.style.width = `${meetingWidth.value}px`;
+        // videoElementRef.value.style.width = `${meetingWidth.value}px`;
        videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
        document
          .querySelectorAll(
@ -758,7 +751,8 @@ onMounted(() => {
          )
          .forEach((el) => {
            console.log(`${meetingHeight.value}px`);
-            el.style.height = `${meetingHeight.value}px`;
+            // el.style.height = `${meetingHeight.value}px`;
+            el.style.height = "";
          });
      });
    }
@ -766,20 +760,12 @@ onMounted(() => {
  setTextLabel();
  startMeeting();
 });
+// 当修改窗口尺寸时
 window.addEventListener("resize", (e) => {
  console.log(e);
  meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
  meetingHeight.value = (meetingWidth.value * 9) / 16;
-  videoElementRef.value.style.width = `${meetingWidth.value}px`;
  videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
-  document
-    .querySelectorAll(
-      "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
-    )
-    .forEach((el) => {
-      console.log(`${meetingHeight.value}px`);
-      el.style.height = `${meetingHeight.value}px`;
-    });
 });
 window.addEventListener("orientationchange", function () {
  console.log(
@ -800,8 +786,6 @@ onUnmounted(() => {
 </script>

 <style lang="scss" scoped>
-$videoELementWidth: 80vw * 0.9;
-$videoElementHeight: $videoELementWidth * 9 / 16 + 1.5vw;
 $meetingComponentWitdh: 80vw * 0.9;
 $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;

@ -820,6 +804,9 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
      justify-content: center;
      width: 80vw;
      position: relative;
+      #video-element {
+        width: 72vw;
+      }
      .el-button {
        position: absolute;
        right: 1vw;
@ -878,7 +865,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
    width: $meetingComponentWitdh * 0.2;
    height: $meetingComponentWitdh * 0.2 * 9 / 16;
    position: relative;
-    // align-self: center;
  }
 }
 .layout-template-4 {
@ -889,7 +875,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
    width: $meetingComponentWitdh * 0.2;
    height: $meetingComponentWitdh * 0.2 * 9 / 16;
    position: relative;
-    // align-self: center;
  }
  :deep(#suspension-view-tabpanel-ribbon
      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
@ -916,7 +901,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
    > .zmwebsdk-MuiPaper-root
    > .zmwebsdk-MuiPaper-root:nth-child(2)) {
  width: 270px;
-  // height: 1.5vw;
  background: #ccc;
 }
 :deep(div[id*="suspension-view-tabpanel"]
@ -940,7 +924,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
    #check-media-wrap {
      display: inline-block;
      margin: 1vw auto;
-      // text-align: center;
      border-radius: 1vw;
      overflow: hidden;
      width: 36vw;
@ -968,24 +951,28 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 }
 // 适配移动端 屏幕宽度小于 900px
@media screen and (max-width: 900px) {
-  $meetingComponentWitdh: 100vw * 0.9;
-  $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+  // $meetingComponentWitdh: 100vw * 0.9;
+  // $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+
+  #app-container {
+    #meeting-chat-row {
      #meeting-container {
-    width: 100vw !important;
-  }
-  #right-chat {
-    display: none !important;
+        width: 100vw;
+        #video-element {
+          width: 90vw;
        }
        :deep(#video-element
            > div
            > .zmwebsdk-MuiPaper-root
            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-    width: $meetingComponentWitdh !important;
+          width: 90vw;
+        }
+      }
+    }
+  }
+  #right-chat {
+    display: none !important;
  }
-  // :deep(div[id*="suspension-view-tabpanel"]
-  //     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-  //   height: calc(100vw * 0.9 * 9 / 16) !important;
-  // }

  .layout-template-1 {
    :deep(div[id*="suspension-view-tabpanel"]
@ -1017,7 +1004,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
      width: $meetingComponentWitdh * 0.2;
      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
      position: relative;
-      // align-self: center;
    }
  }
  .layout-template-4 {
@ -1028,7 +1014,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
      width: $meetingComponentWitdh * 0.2;
      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
      position: relative;
-      // align-self: center;
    }
  }
  :deep(div[id*="suspension-view-tabpanel"]
@ -1036,30 +1021,36 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
    height: calc(100vw * 0.9 * 9 / 16);
  }
  :deep(.check-media) {
+    .el-dialog__body {
      #check-media-wrap {
-      margin: 2vw auto !important;
-      width: 80vw !important;
-      height: 54vw !important;
+        margin: 2vw auto;
+        width: 80vw;
+        height: 54vw;
        svg {
-        width: 6vw !important;
-        height: 6vw !important;
+          width: 6vw;
+          height: 6vw;
+        }
      }
    }
  }
 }

 // 全屏样式
-.fullscreen-wrap {
-  width: 100%;
-  height: 100%;
+#app-container {
+  #meeting-chat-row {
+    .fullscreen-wrap {
+      // $meetingComponentWitdh: 90vw;
+      // width: 100%;
+      // height: 100%;
+      width: 80vw;
+
      #meeting-container.fullscreen {
        $meetingComponentWitdh: 100vw * 0.9;
-    $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
-    padding-top: calc(100vw * 0.08) !important;
-    width: 100vw !important;
+        // $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+        padding-top: 8vw;
+        width: 100vw;
        #video-element {
-      // width: calc(100vw * 0.9) !important;
-      // height: calc(100vw * 0.9 * 9 / 16 + 1.5vw) !important;
+          width: 90vw;
        }
        .layout-template-1 {
          :deep(div[id*="suspension-view-tabpanel"]
@ -1068,8 +1059,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
              + div) {
            width: $meetingComponentWitdh * 0.5;
            height: $meetingComponentWitdh * 0.5 * 9 / 16;
-        position: relative;
-        // align-self: initial;
          }
        }
        .layout-template-2 {
@ -1079,10 +1068,9 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
              + div) {
            width: $meetingComponentWitdh * 0.5;
            height: $meetingComponentWitdh * 0.5 * 9 / 16;
-        position: relative;
-        // align-self: initial;
          }
        }
+
        .layout-template-3 {
          :deep(div[id*="suspension-view-tabpanel"]
              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
@ -1090,8 +1078,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
              + div) {
            width: $meetingComponentWitdh * 0.2;
            height: $meetingComponentWitdh * 0.2 * 9 / 16;
-        position: relative;
-        // align-self: center;
          }
        }
        .layout-template-4 {
@ -1101,16 +1087,13 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
              + div) {
            width: $meetingComponentWitdh * 0.2;
            height: $meetingComponentWitdh * 0.2 * 9 / 16;
-        position: relative;
-        // align-self: center;
          }
        }
-
        :deep(#video-element
            > div
            > .zmwebsdk-MuiPaper-root
            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-      width: calc(100vw * 0.9);
+          width: 90vw;
        }
        :deep(#video-element
            > div
@ -1118,13 +1101,15 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
            > .zmwebsdk-MuiPaper-root:nth-child(2)) {
          display: none;
        }
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-      height: calc(100vw * 0.9 * 9 / 16) !important;
-    }
+        // :deep(div[id*="suspension-view-tabpanel"]
+        //     > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+        //   height: calc(100vw * 0.9 * 9 / 16);
+        // }
      }

      #meeting-container.verticalFullScreen {
+        $meetingComponentWitdh: 100vw * 0.9;
+        $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
        position: absolute;
        transform-origin: 0% 0%;
        transform: rotate(90deg);
@ -1132,11 +1117,22 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
        left: 100vw;
        width: 100vh !important;
        height: calc(92vw);
+        #video-element {
+          width: 90vh;
+          :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.5;
+          }
+        }
        :deep(#video-element
            > div
            > .zmwebsdk-MuiPaper-root
            > .zmwebsdk-MuiPaper-root:nth-child(1)) {
-      width: calc(100vh * 0.9) !important;
+          // width: calc(100vh * 0.9) !important;
+          width: 90vh;
        }
        :deep(#video-element
            > div
@ -1149,5 +1145,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
        //   height: calc(100vh * 0.9 * 9 / 16) !important;
        // }
      }
+    }
+  }
 }
 </style>