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

上边距

Browse Source
This commit is contained in:
cxc
2022-06-07 17:36:04 +08:00
parent 4cfdbc7edc
commit 049d15340a
1 changed files with 103 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/views/meeting.vue
View File

@ -203,7 +203,8 @@ 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 screenWidth = ref(0);
screenWidth.value = window.screen.width;
const joinName = ref(""); // 显示昵称
const joinAccount = ref(""); // 用于连接 websocket，提交考试
joinAccount.value =
@ -332,6 +333,7 @@ const checkMediaWrapRef = ref(null);
const showCheckMediaVideo = ref(true);
const isVideoAvailable = ref(undefined);
const isAudioAvailable = ref(undefined);
// TODO:可能有摄像头占用问题。
onMounted(() => {
nextTick(() => {
const videoWidth = checkMediaWrapRef.value.offsetWidth;
@ -433,6 +435,7 @@ const switchToVideoOn = () => {
const inSharing = ref(false); // 共享屏幕是否开启
const attendeeslist = ref("");
setInterval(() => {
screenWidth.value = window.screen.width;
// 共享屏幕状态变化
const screenShareEl = document.querySelector(
`div[class*="zmwebsdk-makeStyles-inSharing"]`
@ -464,16 +467,17 @@ setInterval(() => {
isSetAsGuest.click();
}
// -------
// attendeeslist.value.splice(0, attendeeslist.value.length);
// 检测参会嘉宾及其摄像头开关状态
attendeeslist.value = meetingConfig.client
.getAttendeeslist()
.map((el) => JSON.stringify({ userId: el.userId, bVideoOn: el.bVideoOn }))
.join("$");
// -------
// 检测共享屏幕canvas距离父元素顶部距离
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) {
if (templateId.value == 3 || templateId.value == 4 || screen.width < 900) {
document.querySelector(
@ -498,6 +502,15 @@ watch(inSharing, (val) => {
"#suspension-view-tab-thumbnail-gallery"
);
if (galleryViewButton) galleryViewButton.click();
/* 在手机上，关闭共享屏幕时，未能把去掉摄像头的top样式 (?), 需要在此处再次清除top样式 */
document
.querySelectorAll(
`div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div:last-child`
)
.forEach((el) => {
el.style.top = "";
});
}
});
@ -522,7 +535,12 @@ const setFullScreen = async () => {
// }, 1500);
// return;
// }
document.querySelector(".fullscreen-wrap").requestFullscreen();
try {
document.querySelector(".fullscreen-wrap").requestFullscreen();
} catch (error) {
console.log(error);
document.querySelector(".fullscreen-wrap").webkitRequestFullscreen();
}
isFullScreen.value = true;
nextTick(() => {
@ -548,6 +566,7 @@ const setFullScreen = async () => {
videoElementRef.value.style.height = `${
screen.height - screen.width * 0.08
}px`;
console.log(`${screen.height - screen.width * 0.08}px`);
document
.querySelectorAll(
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
@ -733,8 +752,7 @@ onMounted(() => {
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
// 当全屏状态改变时
fullscreenWrapRef.value.addEventListener("fullscreenchange", () => {
const handleFullscreenChange = () => {
if (document.fullscreenElement) {
isFullScreen.value = true;
} else {
@ -756,7 +774,16 @@ onMounted(() => {
});
});
}
});
};
// 当全屏状态改变时
fullscreenWrapRef.value.addEventListener(
"fullscreenchange",
handleFullscreenChange
);
fullscreenWrapRef.value.addEventListener(
"onwebkitfullscreenchange",
handleFullscreenChange
);
setTextLabel();
startMeeting();
});
@ -765,12 +792,31 @@ window.addEventListener("resize", (e) => {
console.log(e);
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingHeight.value = (meetingWidth.value * 9) / 16;
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
if (!document.fullscreenElement) {
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
}
});
window.addEventListener("orientationchange", function () {
console.log(
"the orientation of the device is now " + screen.orientation.angle
);
if (window.orientation === 90) {
if (isFullScreen.value === true) {
isVerticalFullScreen.value = false;
videoElementRef.value.style.height = ``;
nextTick(() => {
document
.querySelectorAll(
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
)
.forEach((el) => {
el.style.height = ``;
});
setFullScreen();
});
}
} else if (window.orientation === 0) {
if (isFullScreen.value === true) {
setFullScreen();
}
}
});
window.getCurrentUser = meetingConfig.client.getCurrentUser;
window.getAttendeeslist = meetingConfig.client.getAttendeeslist;
@ -799,6 +845,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
display: flex;
justify-content: space-between;
#meeting-container {
box-sizing: border-box;
padding-top: calc(80vw * 0.08);
display: flex;
justify-content: center;
@ -806,6 +853,12 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
position: relative;
#video-element {
width: 72vw;
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div[class*="inSharing"]
> div) {
padding-top: 6px;
}
}
.el-button {
position: absolute;
@ -930,6 +983,10 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
height: 24vw;
background-color: #000;
position: relative;
// #check-media-video {
// width: 100%;
// height: 100%;
// }
svg {
position: absolute;
left: 1vw;
@ -951,15 +1008,36 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
}
// 适配移动端 屏幕宽度小于 900px
@media screen and (max-width: 900px) {
// $meetingComponentWitdh: 100vw * 0.9;
$meetingComponentWitdh: 90vw;
// $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
#app-container {
#meeting-chat-row {
#meeting-container {
padding-top: calc(100vw * 0.08);
width: 100vw;
#video-element {
width: 90vw;
: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;
position: relative;
align-self: initial;
}
// width: 72vw;
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div[class*="inSharing"]
> div) {
padding-top: initial;
}
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
height: calc(100vw * 0.9 * 9 / 16);
}
}
:deep(#video-element
> div
@ -974,52 +1052,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
display: none !important;
}
.layout-template-1 {
: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;
position: relative;
align-self: initial;
}
}
.layout-template-2 {
: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;
position: relative;
align-self: initial;
}
}
.layout-template-3 {
: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;
position: relative;
}
}
.layout-template-4 {
: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;
position: relative;
}
}
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
height: calc(100vw * 0.9 * 9 / 16);
}
:deep(.check-media) {
.el-dialog__body {
#check-media-wrap {
@ -1039,16 +1071,13 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
#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: 8vw;
$meetingComponentWitdh: 90vw;
padding-top: calc(80vw * 0.08);
width: 100vw;
height: 100vh;
#video-element {
width: 90vw;
}
@ -1089,6 +1118,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
height: $meetingComponentWitdh * 0.2 * 9 / 16;
}
}
:deep(#video-element
> div
> .zmwebsdk-MuiPaper-root
@ -1108,15 +1138,16 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
}
#meeting-container.verticalFullScreen {
$meetingComponentWitdh: 100vw * 0.9;
$meetingComponentWitdh: 90vh;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
padding-top: calc(80vh * 0.08);
position: absolute;
transform-origin: 0% 0%;
transform: rotate(90deg);
top: 0;
left: 100vw;
width: 100vh !important;
height: calc(92vw);
height: 100vw;
#video-element {
width: 90vh;
:deep(div[id*="suspension-view-tabpanel"]
@ -1126,6 +1157,12 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
}
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div[class*="inSharing"]
> div) {
padding-top: initial;
}
}
:deep(#video-element
> div