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

314
src/views/meeting.vue
View File

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