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> <script setup></script>
<style> <style>
#app {
overflow: auto;
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;

48
src/views/meeting.vue
View File

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