cxc/meeting-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
cxc
2022-05-29 13:30:19 +08:00
parent 2eb9e43df2
commit 4f5f2475d7
4 changed files with 183 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/views/meeting.vue
View File

@ -89,9 +89,17 @@
</div>
</template>
<script setup>
import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue";
import {
computed,
reactive,
watch,
ref,
onMounted,
onUnmounted,
nextTick,
} from "vue";
import { useStore } from "vuex";
import axios from "axios";
import { signMeeting, generateSignature } from "@/api/meeting";
import questions from "@/components/questions";
import messageList from "@/components/messageList";
@ -253,6 +261,7 @@ const startMeeting = async (signature) => {
userEmail: meetingConfig.userEmail,
tk: meetingConfig.registrantToken,
});
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
initDesktopLayout();
isMeetingLoading.value = false;
} catch (error) {
@ -267,33 +276,27 @@ onMounted(() => {
});
// 初始化
const initDesktopLayout = () => {
// 切换到 gallery view
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
// 初始化高度
const heightEl =
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
) ||
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-252"
);
const heightEl = document.querySelectorAll(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
)[2];
heightEl.style.height = `${meetingHeight.value - 45}px`;
console.log(meetingHeight.value);
// 初始化宽度
// zmwebsdk-MuiPaper-root zmwebsdk-makeStyles-root-21 zmwebsdk-MuiPaper-elevation1 zmwebsdk-MuiPaper-rounded
document.querySelector(
".zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-21.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
).style.width = `${meetingWidth.value - 4}px`;
console.log(`${meetingWidth.value - 4}px`);
document.querySelectorAll(
".zmwebsdk-MuiPaper-root.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
)[1].style.width = `${meetingWidth.value - 4}px`;
// 加载完成显示 video element
document.querySelector("#video-element").style.visibility = "visible";
};
// 检测屏幕共享开启状态变化
const inSharing = ref(false); // 是否开启屏幕共享
setInterval(() => {
const elSharing = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
// console.log(elSharing);
const elSharing = document.querySelector(
"div[class*=zmwebsdk-makeStyles-inSharing]"
);
if (elSharing) {
inSharing.value = true;
} else {
@ -301,24 +304,79 @@ setInterval(() => {
}
}, 500);
const avatarList = ref("");
setInterval(() => {
const avatarElList = document.querySelectorAll(
'ul[class^="zmwebsdk-makeStyles-avatarList"] li'
);
const arr = [];
avatarElList.forEach((el) => {
arr.push({
videoOn: el.className.includes("videoOn"),
});
});
avatarList.value = arr
.map((el) => {
return el.videoOn ? "on" : "off";
})
.join(",");
// console.log(avatarList.value);
}, 500);
watch(avatarList, (val) => {
if (inSharing.value) {
document
.querySelectorAll(`ul[class^="zmwebsdk-makeStyles-avatarList"] li`)
.forEach((el) => {
if (el.className.includes("videoOn")) {
el.style.visibility = "visible";
} else {
el.style.visibility = "hidden";
}
});
}
});
// 当观众被设为嘉宾时，摄图会自动改为 ribbon,通过setInterval 监听变化，将其重新设为gallery view
const isRibbon = ref(null);
setInterval(() => {
isRibbon.value = document.querySelector(
"#suspension-view-tab-thumbnail-ribbon.zmwebsdk-MuiTab-selected"
);
}, 500);
watch(isRibbon, (val) => {
if (val) {
const galleryViewButton = document.querySelector(
"#suspension-view-tab-thumbnail-gallery"
);
if (galleryViewButton) galleryViewButton.click();
initDesktopLayout();
}
});
// 当被设为嘉宾时自动点击同意按钮
setInterval(() => {
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();
}
}, 500);
// 根据id设置布局
const setLayout = (templateId) => {
console.log(templateId);
const v_s_wrap_el =
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166"
) ||
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
); // 包含视频和课件的容器
const v_s_wrap_el = document.querySelectorAll(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
)[2]; // 包含视频和课件的容器
v_s_wrap_el.style.flexDirection = "";
const v_wrap_el =
document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
document.querySelector(".zmwebsdk-makeStyles-wrap-177");
const v_wrap_el = v_s_wrap_el.lastChild;
if (!inSharing.value) return;
const s_wrap_el = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
const s_wrap_el = document.querySelector(
`div[class*="zmwebsdk-makeStyles-inSharing"]`
);
if (templateId === "1") {
// 课件|视频 对半分
v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
@ -350,18 +408,13 @@ watch(inSharing, (newVal) => {
const galleryViewButton = document.querySelector(
"#suspension-view-tab-thumbnail-gallery"
);
galleryViewButton.click();
const v_wrap_el =
document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
document.querySelector(".zmwebsdk-makeStyles-wrap-177");
if (galleryViewButton) galleryViewButton.click();
const v_s_wrap_el = document.querySelectorAll(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
)[2];
if (!v_s_wrap_el) return;
const v_wrap_el = v_s_wrap_el.lastChild;
v_wrap_el.style.width = "";
const v_s_wrap_el =
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166"
) ||
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
);
v_s_wrap_el.style.flexDirection = "";
}
});
@ -578,6 +631,10 @@ const showQuestionnaireDialog = ref(false);
// background-color: transparent;
padding: 0;
}
:deep(.zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-50.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded) {
width: 20%;
background: #ccc;
}
.fullscreen-btn {
position: absolute;
right: 0;