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

强制全屏 90%

Browse Source
This commit is contained in:
quantulr
2022-06-07 00:49:44 +08:00
parent 03a0dcf84b
commit 4cfdbc7edc
1 changed files with 156 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/views/meeting.vue
View File

@ -83,6 +83,7 @@
<el-dialog <el-dialog
custom-class="check-media" custom-class="check-media"
destroy-on-close
v-model="showCheckMediaVideo" v-model="showCheckMediaVideo"
:close-on-click-modal="false" :close-on-click-modal="false"
title="摄像头和麦克风" title="摄像头和麦克风"
@ -307,7 +308,7 @@ const setSize = () => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9; meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingHeight.value = (meetingWidth.value * 9) / 16; 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`; videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
document.querySelector( document.querySelector(
@ -522,45 +523,37 @@ const setFullScreen = async () => {
// return; // return;
// } // }
document.querySelector(".fullscreen-wrap").requestFullscreen(); document.querySelector(".fullscreen-wrap").requestFullscreen();
// meetingContainerRef.value.requestFullscreen();
isFullScreen.value = true; isFullScreen.value = true;
nextTick(() => { nextTick(() => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9; meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingHeight.value = (meetingWidth.value * 9) / 16; meetingHeight.value = (meetingWidth.value * 9) / 16;
// 当手机竖屏时
if (window.orientation === 0) { if (window.orientation === 0) {
// const height = innerHeight;
isVerticalFullScreen.value = true; isVerticalFullScreen.value = true;
videoElementRef.value.style.height = `${
screen.width - screen.height * 0.08
}px`;
nextTick(() => { 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 document
.querySelectorAll( .querySelectorAll(
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root" "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
) )
.forEach((el) => { .forEach((el) => {
el.setAttribute( el.style.height = `${screen.width - screen.height * 0.08}px`;
`style`, });
`height: ${screen.height - screen.width * 0.08}px !important` });
); }
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`; meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9; meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingHeight.value = (meetingWidth.value * 9) / 16; meetingHeight.value = (meetingWidth.value * 9) / 16;
videoElementRef.value.style.width = `${meetingWidth.value}px`;
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`; videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
// 当全屏状态改变时 // 当全屏状态改变时
@ -750,7 +743,7 @@ onMounted(() => {
nextTick(() => { nextTick(() => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9; meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingHeight.value = (meetingWidth.value * 9) / 16; 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`; videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
document document
.querySelectorAll( .querySelectorAll(
@ -758,7 +751,8 @@ onMounted(() => {
) )
.forEach((el) => { .forEach((el) => {
console.log(`${meetingHeight.value}px`); 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(); setTextLabel();
startMeeting(); startMeeting();
}); });
// 当修改窗口尺寸时
window.addEventListener("resize", (e) => { window.addEventListener("resize", (e) => {
console.log(e); console.log(e);
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9; meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingHeight.value = (meetingWidth.value * 9) / 16; meetingHeight.value = (meetingWidth.value * 9) / 16;
videoElementRef.value.style.width = `${meetingWidth.value}px`;
videoElementRef.value.style.height = `${meetingHeight.value + 42}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 () { window.addEventListener("orientationchange", function () {
console.log( console.log(
@ -800,8 +786,6 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$videoELementWidth: 80vw * 0.9;
$videoElementHeight: $videoELementWidth * 9 / 16 + 1.5vw;
$meetingComponentWitdh: 80vw * 0.9; $meetingComponentWitdh: 80vw * 0.9;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16; $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
@ -820,6 +804,9 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
justify-content: center; justify-content: center;
width: 80vw; width: 80vw;
position: relative; position: relative;
#video-element {
width: 72vw;
}
.el-button { .el-button {
position: absolute; position: absolute;
right: 1vw; right: 1vw;
@ -878,7 +865,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
width: $meetingComponentWitdh * 0.2; width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 16; height: $meetingComponentWitdh * 0.2 * 9 / 16;
position: relative; position: relative;
// align-self: center;
} }
} }
.layout-template-4 { .layout-template-4 {
@ -889,7 +875,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
width: $meetingComponentWitdh * 0.2; width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 16; height: $meetingComponentWitdh * 0.2 * 9 / 16;
position: relative; position: relative;
// align-self: center;
} }
:deep(#suspension-view-tabpanel-ribbon :deep(#suspension-view-tabpanel-ribbon
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root), > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root),
@ -916,7 +901,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> .zmwebsdk-MuiPaper-root > .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(2)) { > .zmwebsdk-MuiPaper-root:nth-child(2)) {
width: 270px; width: 270px;
// height: 1.5vw;
background: #ccc; background: #ccc;
} }
:deep(div[id*="suspension-view-tabpanel"] :deep(div[id*="suspension-view-tabpanel"]
@ -940,7 +924,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
#check-media-wrap { #check-media-wrap {
display: inline-block; display: inline-block;
margin: 1vw auto; margin: 1vw auto;
// text-align: center;
border-radius: 1vw; border-radius: 1vw;
overflow: hidden; overflow: hidden;
width: 36vw; width: 36vw;
@ -968,24 +951,28 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
} }
// 适配移动端 屏幕宽度小于 900px // 适配移动端 屏幕宽度小于 900px
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
$meetingComponentWitdh: 100vw * 0.9; // $meetingComponentWitdh: 100vw * 0.9;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16; // $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
#app-container {
#meeting-chat-row {
#meeting-container { #meeting-container {
width: 100vw !important; width: 100vw;
} #video-element {
#right-chat { width: 90vw;
display: none !important;
} }
:deep(#video-element :deep(#video-element
> div > div
> .zmwebsdk-MuiPaper-root > .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(1)) { > .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 { .layout-template-1 {
:deep(div[id*="suspension-view-tabpanel"] :deep(div[id*="suspension-view-tabpanel"]
@ -1017,7 +1004,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
width: $meetingComponentWitdh * 0.2; width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 14.5; height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
position: relative; position: relative;
// align-self: center;
} }
} }
.layout-template-4 { .layout-template-4 {
@ -1028,7 +1014,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
width: $meetingComponentWitdh * 0.2; width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 14.5; height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
position: relative; position: relative;
// align-self: center;
} }
} }
:deep(div[id*="suspension-view-tabpanel"] :deep(div[id*="suspension-view-tabpanel"]
@ -1036,30 +1021,36 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
height: calc(100vw * 0.9 * 9 / 16); height: calc(100vw * 0.9 * 9 / 16);
} }
:deep(.check-media) { :deep(.check-media) {
.el-dialog__body {
#check-media-wrap { #check-media-wrap {
margin: 2vw auto !important; margin: 2vw auto;
width: 80vw !important; width: 80vw;
height: 54vw !important; height: 54vw;
svg { svg {
width: 6vw !important; width: 6vw;
height: 6vw !important; height: 6vw;
}
} }
} }
} }
} }
// 全屏样式 // 全屏样式
#app-container {
#meeting-chat-row {
.fullscreen-wrap { .fullscreen-wrap {
width: 100%; // $meetingComponentWitdh: 90vw;
height: 100%; // width: 100%;
// height: 100%;
width: 80vw;
#meeting-container.fullscreen { #meeting-container.fullscreen {
$meetingComponentWitdh: 100vw * 0.9; $meetingComponentWitdh: 100vw * 0.9;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16; // $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
padding-top: calc(100vw * 0.08) !important; padding-top: 8vw;
width: 100vw !important; width: 100vw;
#video-element { #video-element {
// width: calc(100vw * 0.9) !important; width: 90vw;
// height: calc(100vw * 0.9 * 9 / 16 + 1.5vw) !important;
} }
.layout-template-1 { .layout-template-1 {
:deep(div[id*="suspension-view-tabpanel"] :deep(div[id*="suspension-view-tabpanel"]
@ -1068,8 +1059,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+ div) { + div) {
width: $meetingComponentWitdh * 0.5; width: $meetingComponentWitdh * 0.5;
height: $meetingComponentWitdh * 0.5 * 9 / 16; height: $meetingComponentWitdh * 0.5 * 9 / 16;
position: relative;
// align-self: initial;
} }
} }
.layout-template-2 { .layout-template-2 {
@ -1079,10 +1068,9 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+ div) { + div) {
width: $meetingComponentWitdh * 0.5; width: $meetingComponentWitdh * 0.5;
height: $meetingComponentWitdh * 0.5 * 9 / 16; height: $meetingComponentWitdh * 0.5 * 9 / 16;
position: relative;
// align-self: initial;
} }
} }
.layout-template-3 { .layout-template-3 {
:deep(div[id*="suspension-view-tabpanel"] :deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
@ -1090,8 +1078,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+ div) { + div) {
width: $meetingComponentWitdh * 0.2; width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 16; height: $meetingComponentWitdh * 0.2 * 9 / 16;
position: relative;
// align-self: center;
} }
} }
.layout-template-4 { .layout-template-4 {
@ -1101,16 +1087,13 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+ div) { + div) {
width: $meetingComponentWitdh * 0.2; width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 16; height: $meetingComponentWitdh * 0.2 * 9 / 16;
position: relative;
// align-self: center;
} }
} }
:deep(#video-element :deep(#video-element
> div > div
> .zmwebsdk-MuiPaper-root > .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(1)) { > .zmwebsdk-MuiPaper-root:nth-child(1)) {
width: calc(100vw * 0.9); width: 90vw;
} }
:deep(#video-element :deep(#video-element
> div > div
@ -1118,13 +1101,15 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> .zmwebsdk-MuiPaper-root:nth-child(2)) { > .zmwebsdk-MuiPaper-root:nth-child(2)) {
display: none; display: none;
} }
:deep(div[id*="suspension-view-tabpanel"] // :deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) { // > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
height: calc(100vw * 0.9 * 9 / 16) !important; // height: calc(100vw * 0.9 * 9 / 16);
} // }
} }
#meeting-container.verticalFullScreen { #meeting-container.verticalFullScreen {
$meetingComponentWitdh: 100vw * 0.9;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
position: absolute; position: absolute;
transform-origin: 0% 0%; transform-origin: 0% 0%;
transform: rotate(90deg); transform: rotate(90deg);
@ -1132,11 +1117,22 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
left: 100vw; left: 100vw;
width: 100vh !important; width: 100vh !important;
height: calc(92vw); 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 :deep(#video-element
> div > div
> .zmwebsdk-MuiPaper-root > .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(1)) { > .zmwebsdk-MuiPaper-root:nth-child(1)) {
width: calc(100vh * 0.9) !important; // width: calc(100vh * 0.9) !important;
width: 90vh;
} }
:deep(#video-element :deep(#video-element
> div > div
@ -1150,4 +1146,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
// } // }
} }
} }
}
}
</style> </style>