fullscreen

src/views/meeting.vue

@@ -2,13 +2,17 @@
   <div id="app-container" ref="appContainerRef">
     <!-- zoom 会议组件 -->
     <div id="meeting-chat-row">
-      <div id="meeting-container" ref="meetingContainerRef">
+      <div
+        id="meeting-container"
+        ref="meetingContainerRef"
+        :class="{ fullscreen: isFullScreen }"
+      >
         <div
           id="video-element"
-          class="layout-template-4"
+          :class="`layout-template-${templateId}`"
           ref="videoElementRef"
         ></div>
-        <el-button :icon="FullScreen" @click="setFullScreen"></el-button>
+        <el-button :icon="FullScreen" circle @click="setFullScreen"></el-button>
       </div>
       <div id="right-chat">
         <Chat
@@ -79,7 +83,15 @@
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch,
+} from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
 
@@ -117,7 +129,8 @@ const videoElementRef = ref(null); // zoom会议组件
 const meetingWidth = ref(0); // 视频和共享屏幕宽度
 const meetingHeight = ref(0); // 视频和共享屏幕高度
 const isMeetingLoading = ref(false);
-const templateId = ref(1);
+const templateId = ref(0);
+templateId.value = store.getters.templateId;
 /* 会议配置 */
 const meetingConfig = reactive({
   client: ZoomMtgEmbedded.createClient(),
@@ -130,20 +143,8 @@ const meetingConfig = reactive({
   registrantToken: route.name === "Host" ? "" : store.getters.token,
 });
 
-// /* 初始化尺寸 */
-// const initDesktopLayout = () => {
-//   // 初始化高度
-//   document.querySelectorAll(
-//     ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
-//   )[2].style.height = `${meetingHeight.value}px`;
-
-//   // 初始化宽度
-//   document.querySelectorAll(
-//     ".zmwebsdk-MuiPaper-root.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
-//   )[1].style.width = `${meetingWidth.value}px`;
-// };
-
 // 开始会议
+const isJoinFirstTime = ref(true);
 const startMeeting = async () => {
   const { sign } = await generateSignature({
     meetingNumber: store.getters.meetingNumber,
@@ -158,7 +159,7 @@ const startMeeting = async () => {
       language: "zh-CN",
       customize: {
         video: {
-          isResizable: true,
+          isResizable: false,
           popper: {
             disableDraggable: true,
           },
@@ -169,17 +170,17 @@ const startMeeting = async () => {
             },
           },
         },
-        meetingInfo: [
+        // meetingInfo: [
-          "topic",
+        //   "topic",
-          "host",
+        //   "host",
-          "mn",
+        //   "mn",
-          "pwd",
+        //   "pwd",
-          "telPwd",
+        //   "telPwd",
-          "invite",
+        //   "invite",
-          "participant",
+        //   "participant",
-          "dc",
+        //   "dc",
-          "enctype",
+        //   "enctype",
-        ],
+        // ],
       },
     });
 
@@ -193,7 +194,7 @@ const startMeeting = async () => {
       userEmail: meetingConfig.userEmail,
       tk: meetingConfig.registrantToken,
     });
-
+    isJoinFirstTime.value = false;
     console.log(meetingConfig.client.getAttendeeslist());
     document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
 
@@ -217,14 +218,22 @@ const startMeeting = async () => {
 };
 window.client = meetingConfig.client;
 window.startMeeting = startMeeting;
-// 根据id设置布局
+
-const setLayout = (templateId) => {
+// 使摄像头窗口显示在右上角，当切换布局或resize、横屏时执行
-  videoElementRef.value.className = `layout-template-${templateId}`;
+const makeVideoTop = () => {
-  // if (templateId === "1") {
+  const screenShareEl = document.querySelector(
-  // } else if (templateId === "2") {
+    'div[id*="suspension-view-tabpanel"]>div.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div'
-  // } else if (templateId === "3") {
+  );
-  // }
+  if (screenShareEl) console.log(screenShareEl.offsetTop);
 };
+// 根据id设置布局
+// const setLayout = (templateId) => {
+// videoElementRef.value.className = `layout-template-${templateId}`;
+// if (templateId === "1") {
+// } else if (templateId === "2") {
+// } else if (templateId === "3") {
+// }
+// };
 // const setLayout = (templateId) => {
 //   console.log(templateId);
 //   const videoScreenWrapEl = document.querySelectorAll(
@@ -368,7 +377,8 @@ setInterval(() => {
 watch(inSharing, (val) => {
   console.log(val);
   if (val) {
-    setLayout(templateId.value);
+    // setLayout(templateId.value);
+    makeVideoTop();
   } else {
     const galleryViewButton = document.querySelector(
       "#suspension-view-tab-thumbnail-gallery"
@@ -394,19 +404,20 @@ watch(attendeeslist, (val) => {
 // 点击进入全屏模式
 const setFullScreen = async () => {
   meetingContainerRef.value.requestFullscreen();
-  // meetingContainerRef.value.className =
+  isFullScreen.value = true;
-  // meetingContainerRef.value.className + " fullscreen";
+  document
-  // meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
+    .querySelectorAll(
-  // meetingHeight.value = (meetingWidth.value * 9) / 16;
+      "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
-  // console.log(meetingWidth.value, meetingHeight.value);
+    )
-  // videoElementRef.value.style.width = `${meetingWidth.value}px`;
+    .forEach((el) => {
-  // videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
+      el.setAttribute(
-  // await meetingConfig.client.leaveMeeting();
+        `style`,
-  // startMeeting();
+        `height: ${screen.height - screen.width * 0.08 - 42}px !important`
-  // setTimeout(() => {
+      );
-  // startMeeting();
+      // el.style.height = `${
-  // }, 5000);
+      //   screen.height - screen.width * 0.08 - 42
-  // startMeeting();
+      // }px !important;`;
+    });
 };
 // 是否显示考试和问卷弹窗
 const showExamDialog = ref(false);
@@ -486,9 +497,9 @@ const initWebSocket = () => {
     // 会议信息更新时
     if (data.type === "isRefreshMeeting") {
       await store.dispatch("getMeetingInfo", store.getters.meetingId);
-      meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
+      meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
       templateId.value = store.getters.templateId;
-      setLayout(templateId.value);
+      // setLayout(templateId.value);
       setTextLabel();
     }
     // 收到聊天消息时
@@ -573,12 +584,36 @@ const getStageQuestionnaireAnswer = (val) => {
   questionnaireQuestionsList.value = val.map((el) => el);
 };
 
+const isFullScreen = ref(false);
+
 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`;
+
+  // 当退出全屏模式时
+  meetingContainerRef.value.addEventListener("fullscreenchange", () => {
+    if (document.fullscreenElement) {
+      isFullScreen.value = true;
+    } else {
+      isFullScreen.value = false;
+      nextTick(() => {
+        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) => {
+            el.style.height = `${meetingHeight.value}px`;
+          });
+      });
+    }
+  });
   setTextLabel();
   startMeeting();
 });
@@ -783,6 +818,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.5;
+      height: $meetingComponentWitdh * 0.5 * 9 / 14;
+      align-self: center;
     }
   }
   .layout-template-2 {
@@ -795,6 +832,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.5;
+      height: $meetingComponentWitdh * 0.5 * 9 / 14;
+      align-self: center;
     }
   }
   .layout-template-3 {
@@ -807,7 +846,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 16;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14;
+      align-self: center;
     }
   }
   .layout-template-4 {
@@ -820,7 +860,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
         > div[class*="inSharing"]
         + div) {
       width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 16;
+      height: $meetingComponentWitdh * 0.2 * 9 / 14;
+      align-self: center;
     }
   }
 }