meeting-client/src/views/meeting.vue

<template>
  <div id="app-container" ref="appContainerRef">
    <!-- zoom 会议组件 -->
    <div id="meeting-chat-row">
      <div
        id="meeting-container"
        ref="meetingContainerRef"
        :class="{ fullscreen: isFullScreen }"
      >
        <div
          id="video-element"
          :class="`layout-template-${templateId}`"
          ref="videoElementRef"
        ></div>
        <el-button :icon="FullScreen" circle @click="setFullScreen"></el-button>
      </div>
      <div id="right-chat">
        <Chat
          :is-rich="route.name === 'Host'"
          place="right"
          :account="joinName"
          :message-list="messages"
          @send="sendMessage"
        />
      </div>
    </div>
    <el-tabs class="tabs" type="border-card">
      <el-tab-pane label="会议介绍">
        <div class="meeting-info meeting-note" v-html="meetingNote"></div>
      </el-tab-pane>
      <el-tab-pane label="会议日程"
        ><div
          class="meeting-info meeting-schedule"
          v-html="meetingSchedule"
        ></div
      ></el-tab-pane>
      <el-tab-pane label="专家介绍"
        ><div class="meeting-info expert-info" v-html="expertInfo"></div
      ></el-tab-pane>
      <el-tab-pane label="聊天" class="chat-pane" v-if="screenWidth < 900">
        <Chat
          :is-rich="route.name === 'Host'"
          place="bottom"
          :account="joinName"
          :message-list="messages"
          @send="sendMessage"
        />
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      v-model="showSignDialog"
      :close-on-click-modal="false"
      title="签到"
      width="30%"
    >
      <span>是否确认签到</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitSign">确定</el-button>
          <el-button type="primary" @click="showSignDialog = false"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
    <questions
      mode="1"
      @stage="getStageExamAnswer"
      v-if="showExamDialog && route.name !== 'Host'"
      :showDialog="showExamDialog"
      @close="showExamDialog = $event"
    ></questions>

    <questions
      mode="2"
      @state="getStageQuestionnaireAnswer"
      v-if="showQuestionnaireDialog && route.name !== 'Host'"
      :showDialog="showQuestionnaireDialog"
      @close="showQuestionnaireDialog = $event"
    ></questions>
  </div>
</template>

<script setup>
import {
  computed,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";

import dayjs from "dayjs";
import { uniqueId } from "lodash";
import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
import ReconnectingWebSocket from "reconnecting-websocket";
import { ElMessage, ElMessageBox } from "element-plus";
import { FullScreen } from "@element-plus/icons-vue";
import { signMeeting, generateSignature } from "@/api/meeting";
import Chat from "@/components/chat";
import questions from "@/components/questions";
import {
  getQuestionsList,
  commitQuestionnaire,
  commitExam,
} from "@/api/meeting";

const store = useStore();
const route = useRoute();

const meetingNote = computed(() => store.getters.meetingNote); // 会议介绍
const meetingSchedule = computed(() => store.getters.meetingSchedule); // 会议日程
const expertInfo = computed(() => store.getters.expertInfo); // 专家信息
const screenWidth = window.screen.width;
const joinName = ref(""); // 显示昵称
const joinAccount = ref(""); // 用于连接 websocket，提交考试
joinAccount.value =
  store.getters.icCard || store.getters.phone || store.getters.nickname;
joinName.value =
  store.getters.nickname || store.getters.phone || store.getters.icCard;

const meetingContainerRef = ref(null); // 会议组件容器，包含背景和会议组件
const videoElementRef = ref(null); // zoom会议组件
const meetingWidth = ref(0); // 视频和共享屏幕宽度
const meetingHeight = ref(0); // 视频和共享屏幕高度
const isMeetingLoading = ref(false);
const templateId = ref(0);
templateId.value = store.getters.templateId;
/* 会议配置 */
const meetingConfig = reactive({
  client: ZoomMtgEmbedded.createClient(),
  sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
  meetingNumber: store.getters.meetingNumber,
  passWord: store.state.password,
  role: route.name === "Host" ? 1 : 0,
  userEmail: store.getters.email,
  userName: joinName.value,
  registrantToken: route.name === "Host" ? "" : store.getters.token,
});

// 开始会议
const isJoinFirstTime = ref(true);
const startMeeting = async () => {
  const { sign } = await generateSignature({
    meetingNumber: store.getters.meetingNumber,
    role: meetingConfig.role,
  });
  let meetingSDKElement = document.getElementById("video-element");

  try {
    await meetingConfig.client.init({
      // debug: true,
      zoomAppRoot: meetingSDKElement,
      language: "zh-CN",
      customize: {
        video: {
          isResizable: false,
          popper: {
            disableDraggable: true,
          },
          viewSizes: {
            default: {
              width: meetingWidth.value,
              height: meetingHeight.value, // 不包括顶部toolbar和底部按钮高度
            },
          },
        },
        // meetingInfo: [
        //   "topic",
        //   "host",
        //   "mn",
        //   "pwd",
        //   "telPwd",
        //   "invite",
        //   "participant",
        //   "dc",
        //   "enctype",
        // ],
      },
    });

    console.log(meetingWidth.value, meetingHeight.value);
    await meetingConfig.client.join({
      sdkKey: meetingConfig.sdkKey,
      signature: sign,
      meetingNumber: meetingConfig.meetingNumber,
      password: meetingConfig.passWord,
      userName: meetingConfig.userName,
      userEmail: meetingConfig.userEmail,
      tk: meetingConfig.registrantToken,
    });
    isJoinFirstTime.value = false;
    console.log(meetingConfig.client.getAttendeeslist());
    document.querySelector("#suspension-view-tab-thumbnail-gallery").click();

    // 自动点击允许共享屏幕
    if (route.name === "Host") {
      const safeButton = document.querySelector('button[title="安全"]');
      if (safeButton) {
        safeButton.click();
        const allowScreenShare = document.querySelectorAll(
          ".zmwebsdk-MuiButtonBase-root.zmwebsdk-MuiListItem-root.zmwebsdk-MuiMenuItem-root.zmwebsdk-MuiMenuItem-gutters.zmwebsdk-MuiListItem-gutters.zmwebsdk-MuiListItem-button"
        )[1];
        if (allowScreenShare.childElementCount === 0) {
          allowScreenShare.click();
        }
      }
    }
    isMeetingLoading.value = false;
  } catch (error) {
    isMeetingLoading.value = false;
  }
};
window.client = meetingConfig.client;
window.startMeeting = startMeeting;

// 使摄像头窗口显示在右上角，当切换布局或resize、横屏时执行
const makeVideoTop = () => {
  const screenShareEl = document.querySelector(
    'div[id*="suspension-view-tabpanel"]>div.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div'
  );
  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(
//     ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
//   )[2]; // 包含视频和课件的容器
//   videoScreenWrapEl.style.flexDirection = "";
//   const videoWrapEl = videoScreenWrapEl.lastChild;

//   if (!inSharing.value) return;
//   const screenWrapEl = document.querySelector(
//     `div[class*="zmwebsdk-makeStyles-inSharing"]`
//   );
//   if (templateId === "1") {
//     // 课件|视频 对半分
//     videoWrapEl.style.width = `${meetingWidth.value / 2 - 2}px`;
//   } else if (templateId === "2") {
//     // 视频|课件 对半分
//     videoWrapEl.style.width = `${meetingWidth.value / 2 - 2}px`;
//     videoScreenWrapEl.style.flexDirection = "row-reverse";
//   } else if (templateId === "3") {
//     // 课件|视频 左4/5 | 右边1/5
//     videoWrapEl.style.width = `${(meetingWidth.value - 4) / 5}px`;
//   } else if (templateId === "4") {
//     // 视频|课件 左1/4 | 右边3/4
//     videoWrapEl.style.width = `${(meetingWidth.value - 4) / 5}px`;
//     videoScreenWrapEl.style.flexDirection = "row-reverse";
//   } else if (templateId === "5") {
//     // 只显示课件
//     videoWrapEl.style.display = `none`;
//   } else if (templateId === "6") {
//     // 只显示视频
//     screenWrapEl.style.display = "none";
//     videoWrapEl.style.width = `${meetingWidth.value - 4}px`;
//   }
// };

// 设置文本标签
const setTextLabel = () => {
  document.querySelectorAll(".text-tag").forEach((el) => {
    el.remove();
  });
  store.getters.textLabelList.forEach((item) => {
    const labelObj = JSON.parse(item.textLabel);
    const textEl = document.createElement("div");
    textEl.id = `${uniqueId("tag-")}`;
    textEl.innerHTML = labelObj.content;
    textEl.className = "text-tag";
    textEl.style.backgroundColor = labelObj.backgroundColor;
    textEl.style.visibility =
      labelObj.visibility === "1" ? "visible" : "hidden";
    textEl.style.left = `${labelObj.x}`;
    textEl.style.top = `${labelObj.y}`;
    meetingContainerRef.value.appendChild(textEl);
  });
};

const switchToVideoOn = () => {
  const prevBtn = document.querySelector(
    "#suspension-view-tabpanel-ribbon>div>div:last-child>.zmwebsdk-MuiBox-root>button:first-child"
  );
  const nextBtn = document.querySelector(
    "#suspension-view-tabpanel-ribbon>div>div:last-child>.zmwebsdk-MuiBox-root>button:last-child"
  );
  let isNextBtnHidden = nextBtn.className.includes(
    "zmwebsdk-makeStyles-hidePaginationIcon"
  );
  let isPrevBtnHidden = prevBtn.className.includes(
    "zmwebsdk-makeStyles-hidePaginationIcon"
  );
  while (!isPrevBtnHidden) {
    prevBtn.click();
    isPrevBtnHidden = prevBtn.className.includes(
      "zmwebsdk-makeStyles-hidePaginationIcon"
    );
  }
  let timer = setInterval(() => {
    const displayLiEl = document.querySelector(
      'ul[class^="zmwebsdk-makeStyles-avatarList"]>li'
    );
    console.log(displayLiEl);
    if (displayLiEl.className.includes("videoOn")) {
      console.log("开启了视频");
      clearInterval(timer);
      return;
    }
    nextBtn.click();
    isNextBtnHidden = nextBtn.className.includes(
      "zmwebsdk-makeStyles-hidePaginationIcon"
    );
    if (isNextBtnHidden) {
      setTimeout(() => {
        const displayLiEl = document.querySelector(
          'ul[class^="zmwebsdk-makeStyles-avatarList"]>li'
        );
        console.log(displayLiEl);
      }, 100);
      clearInterval(timer);
    }
  }, 100);
  console.log(isNextBtnHidden);
};

const inSharing = ref(false); // 共享屏幕是否开启
const attendeeslist = ref("");
setInterval(() => {
  // 共享屏幕状态变化
  const screenShareEl = document.querySelector(
    `div[class*="zmwebsdk-makeStyles-inSharing"]`
  );
  inSharing.value = screenShareEl ? true : false;
  // ------

  // 检测是否是ribbon视图, 如果是, 则切换到gallery view, 当观众被设为嘉宾或嘉宾被设为观众时需要切换视图.
  const isRibbon = document.querySelector(
    "#suspension-view-tab-thumbnail-ribbon.zmwebsdk-MuiTab-selected"
  );
  if (isRibbon && !inSharing.value) {
    const galleryViewButton = document.querySelector(
      "#suspension-view-tab-thumbnail-gallery"
    );
    if (galleryViewButton) galleryViewButton.click();
  }
  // ------

  // 检测是否存在"同意被设为嘉宾按钮",存在则自动点击
  const isSetAsGuest = document.querySelector(
    ".zmwebsdk-MuiButtonBase-root.zmwebsdk-MuiButton-root.zmwebsdk-MuiButton-contained.zmwebsdk-MuiButton-containedPrimary.zmwebsdk-MuiButton-containedSizeSmall.zmwebsdk-MuiButton-sizeSmall.zmwebsdk-MuiButton-disableElevation"
  );
  if (isSetAsGuest) {
    isSetAsGuest.click();
  }
  // -------
  // attendeeslist.value.splice(0, attendeeslist.value.length);
  attendeeslist.value = meetingConfig.client
    .getAttendeeslist()
    .map((el) => JSON.stringify(el))
    .join("$");
}, 500);

// 监听共享屏幕状态
watch(inSharing, (val) => {
  console.log(val);
  if (val) {
    // setLayout(templateId.value);
    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();
  }
});

// 点击进入全屏模式
const setFullScreen = async () => {
  meetingContainerRef.value.requestFullscreen();
  isFullScreen.value = true;
  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 - 42}px !important`
      );
      // el.style.height = `${
      //   screen.height - screen.width * 0.08 - 42
      // }px !important;`;
    });
};
// 是否显示考试和问卷弹窗
const showExamDialog = ref(false);
const showQuestionnaireDialog = ref(false);
const examStarted = ref(false); //考试是否开始
/* 签到功能 */
// 提交签到
const showSignDialog = ref(false); //是否显示签到窗口
const submitSign = async () => {
  await signMeeting({
    meetingId: store.getters.meetingId,
    signTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    account: joinAccount.value,
  });
  showSignDialog.value = false;
  ElMessage.success("签到成功");
};
// 当考试和问卷弹框未能正确弹出时，（即考试开始时，未加入会议），加载题目列表
const loadQuestionsList = async (mode) => {
  const { data } = await getQuestionsList({
    meetingId: store.getters.meetingId,
    type: mode,
  });
  return data.map((item) => {
    return {
      ...item,
      choiceAnswerIdStr: [],
    };
  });
};

// 当会议结束时，如果没有手动点击提交则自动提交试卷
const submitQuestion = async (mode) => {
  if (mode == "1") {
    await commitExam({
      meetingId: store.getters.meetingId,
      userAccount: joinAccount.value,
      commitExamList: examQuestionsList.value.map((item) => {
        return {
          questionId: item.id,
          choiceAnswerIdStr: item.choiceAnswerIdStr.join(",") + ",",
        };
      }),
    });
    ElMessage.success("提交考试成功");
  } else if (mode == "2") {
    await commitQuestionnaire({
      meetingId: store.getters.meetingId,
      userAccount: joinAccount.value,
      commitExamList: questionnaireQuestionsList.value.map((item) => {
        return {
          questionId: item.id,
          choiceAnswerIdStr: item.choiceAnswerIdStr.join(",") + ",",
        };
      }),
    });
    ElMessage.success("提交问卷成功");
  }
  // closeDialog();
};

// loadQuestionsList("1");
let socket = reactive({});
const initWebSocket = () => {
  // 建立websocket连接
  socket = new ReconnectingWebSocket(
    `wss://meeting.chuhuankj.com/wss/websocket/meeting/${store.getters.meetingId}/${joinAccount.value}`
  );
  socket.addEventListener("open", () => {
    console.log("websocket,已连接");
  });

  // 监听websocket消息
  socket.addEventListener("message", async (event) => {
    const data = JSON.parse(JSON.parse(event.data));
    console.log(data);
    // 会议信息更新时
    if (data.type === "isRefreshMeeting") {
      await store.dispatch("getMeetingInfo", store.getters.meetingId);
      meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
      templateId.value = store.getters.templateId;
      // setLayout(templateId.value);
      setTextLabel();
    }
    // 收到聊天消息时
    else if (data.type === "isChat") {
      console.log(data.content);
      console.log(JSON.parse(JSON.parse(JSON.parse(data.content).msg)));
      messages.value.push({
        ...JSON.parse(JSON.parse(JSON.parse(data.content).msg)),
        id: uniqueId(),
        time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      });
    }
    // 开始签到时
    else if (data.type === "isStartSign" && route.name !== "Host") {
      showSignDialog.value = true;
    }
    // 签到结束时
    else if (data.type === "isEndSign" && route.name !== "Host") {
      showSignDialog.value = false;
    }
    // 开始考试时
    else if (data.type === "isStartExam" && route.name !== "Host") {
      showExamDialog.value = true;
    }
    // 开始问卷时
    else if (data.type === "isStartQuestionnaire" && route.name !== "Host") {
      showQuestionnaireDialog.value = true;
    }
    // 会议结束时
    else if (data.type === "isCloseMeeting") {
      showExamDialog.value = false;
      showQuestionnaireDialog.value = false;
      ElMessageBox.alert("会议已结束");
      socket.close();
      if (store.getters.bankId && !store.state.joinUser.examSubmited) {
        if (examQuestionsList.value.length === 0) {
          examQuestionsList.value = await loadQuestionsList("1");
        }
        submitQuestion("1");
      }
      if (
        store.getters.questionnaireId &&
        !store.state.joinUser.questionnaireSubmited
      ) {
        if (questionnaireQuestionsList.value.length === 0) {
          questionnaireQuestionsList.value = await loadQuestionsList("2");
        }
        submitQuestion("2");
      }
    }
  });
  socket.addEventListener("close", (event) => {
    console.log(event, "close");
  });
  socket.addEventListener("error", (event) => {
    console.log(event, "error");
  });
};
initWebSocket();

// 消息列表
const messages = ref([]);
const sendMessage = (msgObj) => {
  console.log(JSON.stringify(JSON.stringify(msgObj)));
  socket.send(
    JSON.stringify(
      JSON.stringify({
        account: joinName.value,
        msg: msgObj.msg,
      })
    )
  );
  messages.value.push(msgObj);
};

const examQuestionsList = ref([]);
const getStageExamAnswer = (val) => {
  examQuestionsList.value = val.map((el) => el);
};
const questionnaireQuestionsList = ref([]);
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();
});
window.addEventListener(
  "resize",
  _.throttle(() => {
    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`;
  }, 500)
);
window.getCurrentUser = meetingConfig.client.getCurrentUser;
window.getAttendeeslist = meetingConfig.client.getAttendeeslist;
window.getCurrentMeetingInfo = meetingConfig.client.getCurrentMeetingInfo;
window.checkSystemRequirements = meetingConfig.client.checkSystemRequirements;
const leaveConference = () => {
  meetingConfig.client.leaveMeeting();
};
window.addEventListener("beforeunload", leaveConference);
onUnmounted(() => {
  window.removeEventListener("beforeunload", leaveConference);
});
</script>

<style lang="scss" scoped>
// $videoELementWidth: 80vw * 0.9;
// $videoElementHeight: $videoELementWidth * 9 / 16 + 42px;
// $videoWidth: 470px;
// $videoHeight: $videoWidth * 9 / 16;
$meetingComponentWitdh: 80vw * 0.9;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;

#app-container {
  #meeting-chat-row {
    display: flex;
    justify-content: space-between;
    #meeting-container {
      padding-top: calc(80vw * 0.08);
      display: flex;
      justify-content: center;
      width: 80vw;
      position: relative;
      .el-button {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      // #video-element {
      // width: $videoELementWidth;
      // height: $videoElementHeight;
      // background-color: indianred;
      // }
      :deep(.text-tag) {
        position: absolute;
        z-index: 999;
        border-radius: 4px;
        padding: 5px;
        background-color: #fff;
        * {
          margin: 0;
          padding: 0;
        }
      }
    }
    #right-chat {
      width: 20vw;
    }
  }
}

.layout-template-1 {
  :deep(#suspension-view-tabpanel-ribbon
      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
      > div[class*="inSharing"]
      + div),
  :deep(#suspension-view-tabpanel-speaker
      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
      > div[class*="inSharing"]
      + div) {
    width: $meetingComponentWitdh * 0.5;
  }
}
.layout-template-2 {
  :deep(#suspension-view-tabpanel-ribbon
      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
      > div[class*="inSharing"]
      + div),
  :deep(#suspension-view-tabpanel-speaker
      > .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
      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
      > div[class*="inSharing"]
      + div) {
    width: $meetingComponentWitdh * 0.2;
    height: $meetingComponentWitdh * 0.2 * 9 / 16;
    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
      > .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;
  }
}

: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
    > .zmwebsdk-MuiPaper-root:nth-child(1)) {
  width: calc(80vw * 0.9);
}
:deep(#video-element
    > div
    > .zmwebsdk-MuiPaper-root
    > .zmwebsdk-MuiPaper-root:nth-child(2)) {
  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
    > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
  height: calc(80vw * 0.9 * 9 / 16);
}

:deep(.zmwebsdk-MuiPaper-root) {
  background: transparent;
  box-shadow: 0 0;
}

@media screen and (max-width: 900px) {
  $meetingComponentWitdh: 100vw * 0.9;
  $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
  #meeting-container {
    width: 100vw !important;
  }
  #right-chat {
    display: none !important;
  }
  :deep(#video-element
      > div
      > .zmwebsdk-MuiPaper-root
      > .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
      > .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
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div) {
      width: $meetingComponentWitdh * 0.5;
      height: $meetingComponentWitdh * 0.5 * 9 / 14;
      align-self: center;
    }
  }
  .layout-template-2 {
    :deep(#suspension-view-tabpanel-ribbon
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div),
    :deep(#suspension-view-tabpanel-speaker
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div) {
      width: $meetingComponentWitdh * 0.5;
      height: $meetingComponentWitdh * 0.5 * 9 / 14;
      align-self: center;
    }
  }
  .layout-template-3 {
    :deep(#suspension-view-tabpanel-ribbon
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div),
    :deep(#suspension-view-tabpanel-speaker
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div) {
      width: $meetingComponentWitdh * 0.2;
      height: $meetingComponentWitdh * 0.2 * 9 / 14;
      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
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div) {
      width: $meetingComponentWitdh * 0.2;
      height: $meetingComponentWitdh * 0.2 * 9 / 14;
      align-self: center;
    }
  }
}

#meeting-container.fullscreen {
  $meetingComponentWitdh: 100vw * 0.9;
  $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
  padding-top: calc(100vw * 0.08) !important;
  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
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div) {
      width: $meetingComponentWitdh * 0.5;
    }
  }
  .layout-template-2 {
    :deep(#suspension-view-tabpanel-ribbon
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div),
    :deep(#suspension-view-tabpanel-speaker
        > .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
        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
        > div[class*="inSharing"]
        + div) {
      width: $meetingComponentWitdh * 0.2;
      height: $meetingComponentWitdh * 0.2 * 9 / 16;
      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
        > .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;
    }
  }

  :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
      > .zmwebsdk-MuiPaper-root:nth-child(1)) {
    width: calc(100vw * 0.9);
  }
  :deep(#video-element
      > div
      > .zmwebsdk-MuiPaper-root
      > .zmwebsdk-MuiPaper-root:nth-child(2)) {
    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
      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
    height: calc(100vw * 0.9 * 9 / 16);
  }
}
</style>