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

缩小视频组件宽度

Browse Source
This commit is contained in:
cxc
2022-09-28 17:14:07 +08:00
parent 73a1309cc2
commit 3dd80235a8
2 changed files with 27 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -4,6 +4,9 @@
<script setup></script>
<style>
#app {
overflow: auto;
}
body {
margin: 0;
padding: 0;

48
src/views/meeting.vue
View File

@ -344,7 +344,7 @@ const startMeeting = async () => {
};
// const setSize = () => {
// meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
// meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.88;
// meetingHeight.value = (meetingWidth.value * 9) / 16;
// // videoElementRef.value.style.width = `${meetingWidth.value}px`;
@ -547,13 +547,13 @@ const setFullScreen = async () => {
isFullScreen.value = true;
nextTick(() => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.88;
meetingHeight.value = (meetingWidth.value * 9) / 16;
// 当手机竖屏时
if (window.orientation === 0) {
isVerticalFullScreen.value = true;
videoElementRef.value.style.height = `${
screen.width - screen.height * 0.08
screen.width - screen.height * 0.06
}px`;
nextTick(() => {
document
@ -561,21 +561,21 @@ const setFullScreen = async () => {
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
)
.forEach((el) => {
el.style.height = `${screen.width - screen.height * 0.08}px`;
el.style.height = `${screen.width - screen.height * 0.06}px`;
});
});
}
videoElementRef.value.style.height = `${
screen.height - screen.width * 0.08
screen.height - screen.width * 0.06
}px`;
// console.log(`${screen.height - screen.width * 0.08}px`);
// console.log(`${screen.height - screen.width * 0.06}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`;
el.style.height = `${screen.height - screen.width * 0.06}px`;
});
});
};
@ -815,12 +815,12 @@ onMounted(() => {
meetingContainerRef.value.style.background = ` url(${
store.getters.templateBackgroundPic || store.getters.defaultBackground
}) 0% 0% / cover no-repeat`;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.88;
meetingHeight.value = (meetingWidth.value * 9) / 16;
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
rightChatRef.value.style.height = `${
meetingContainerRef.value.offsetWidth * 0.08 + meetingHeight.value + 42
meetingContainerRef.value.offsetWidth * 0.06 + meetingHeight.value + 42
}px`;
const handleFullscreenChange = () => {
if (document.fullscreenElement) {
@ -829,7 +829,7 @@ onMounted(() => {
isFullScreen.value = false;
isVerticalFullScreen.value = false;
nextTick(() => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.88;
meetingHeight.value = (meetingWidth.value * 9) / 16;
// videoElementRef.value.style.width = `${meetingWidth.value}px`;
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
@ -860,7 +860,7 @@ onMounted(() => {
// 当修改窗口尺寸时
window.addEventListener("resize", (e) => {
screenWidth.value = window.screen.width;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.88;
meetingHeight.value = (meetingWidth.value * 9) / 16;
if (!document.fullscreenElement) {
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
@ -903,7 +903,7 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
$meetingComponentWitdh: 80vw * 0.96; // 会议组件宽度
$meetingComponentWitdh: 80vw * 0.88; // 会议组件宽度
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
$meetingBackgroundWidth: 80vw; //会议背景宽度
@ -935,7 +935,7 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
}
#meeting-container {
box-sizing: border-box;
padding-top: calc(80vw * 0.08);
padding-top: calc(80vw * 0.06);
display: flex;
justify-content: center;
width: $meetingBackgroundWidth;
@ -1074,7 +1074,7 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
// 适配移动端 屏幕宽度小于 900px
@media screen and (max-width: 900px) {
$meetingComponentWitdh: 96vw;
$meetingComponentWitdh: 88vw;
// $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
#app-container {
@ -1089,14 +1089,14 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
width: $meetingComponentWitdh;
}
#meeting-container {
padding-top: calc(100vw * 0.08);
padding-top: calc(100vw * 0.06);
width: 100vw;
.text-label-container {
width: 100vw;
// height: 100%;
}
#video-element {
width: 96vw;
width: 88vw;
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div[class*="inSharing"]
@ -1141,13 +1141,13 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div) {
width: 96vw;
width: 88vw;
}
#meeting-container.fullscreen {
$meetingComponentWitdh: 96vw;
padding-top: calc(100vw * 0.08);
$meetingComponentWitdh: 88vw;
padding-top: calc(100vw * 0.06);
// @media screen and (max-width: 900px) {
// padding-top: calc(80vw * 0.08);
// padding-top: calc(80vw * 0.06);
// }
width: 100vw;
height: 100vh;
@ -1200,7 +1200,7 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
> div
> .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(1)) {
width: 96vw;
width: 88vw;
}
:deep(#video-element
> div
@ -1217,12 +1217,12 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div) {
width: 96vh;
width: 88vh;
}
#meeting-container.verticalFullScreen {
$meetingComponentWitdh: 96vh;
$meetingComponentWitdh: 88vh;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
padding-top: calc(100vh * 0.08);
padding-top: calc(100vh * 0.06);
position: absolute;
transform-origin: 0% 0%;
transform: rotate(90deg);