mdm-client 1.0.3 → 1.0.4

package/src/components/LiveMultipleMeeting/style/index.scss

@@ -1,3 +1,11 @@
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 // 会议室样式
 // 通用样式
 .meeting {
@@ -7,6 +15,7 @@
     // border: 1px solid #798BA4;
     border-radius: 5px;
     margin: 5px;
+    overflow: hidden; // 旋转后裁剪溢出内容，避免页面出现“怪异”形态
     .p-video {
       position: absolute;
       width: 100%;
@@ -16,6 +25,33 @@
       z-index: 10;
       object-fit: contain;
       border-radius: 5px;
+      backface-visibility: hidden; // 避免3D旋转引发的锯齿闪烁
+      will-change: transform; // 提示浏览器优化旋转
+    }
+    .loadingIndicator {
+      position: absolute;
+      z-index: 20;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .loading-icon {
+        height: 20%;
+        width: auto;
+        border-radius: 50%;
+        aspect-ratio: 1/1;
+        background: var(--meeting-loading-icon) no-repeat center / 100% 100%;
+        animation: rotate 2s linear infinite;
+      }
+      .loading-text {
+        font-size: 14px;
+        line-height: 22px;
+        color: var(--theme-font-color);
+      }
     }
     .board {
       position: absolute;
@@ -120,6 +156,43 @@
       min-height: 30px;
       background: var(--more-icon) no-repeat center / 100% 100%;
     }
+    .rotate-icon {
+      visibility: hidden;
+      cursor: pointer;
+      position: absolute;
+      bottom: 10px;
+      right: 14px;
+      z-index: 50;
+      aspect-ratio: 1/1;
+      width: auto;
+      height: 5%;
+      min-height: 30px;
+      &1 {
+        background: var(--rotate-icon1) no-repeat center / 100% 100%;
+      }
+      &2 {
+        background: var(--rotate-icon2) no-repeat center / 100% 100%;
+      }
+      &3 {
+        background: var(--rotate-icon3) no-repeat center / 100% 100%;
+      }
+      &4 {
+        background: var(--rotate-icon4) no-repeat center / 100% 100%;
+      }
+    }
+    .bitrate-indicator {
+      display: none;
+      position: absolute;
+      top: 10px;
+      left: 50px; /* Position next to the signal icon */
+      z-index: 60;
+      padding: 4px 8px;
+      background-color: rgba(0, 0, 0, 0.6);
+      color: var(--theme-font-color, #ffffff);
+      font-size: 12px;
+      border-radius: 4px;
+      white-space: nowrap;
+    }
   }
 }
 // 宫格布局
@@ -130,11 +203,11 @@
   .participant {
     width: 100%;
     height: 98%;
-    .p-video {
-      object-fit: cover !important;
-    }
+    // .p-video {
+    //   object-fit: contain !important;
+    // }
   }
-  .describe{
+  .describe {
     transform: scale(1.3);
   }
 }
@@ -148,7 +221,7 @@
     height: auto;
     aspect-ratio: 16/9;
   }
-  .describe{
+  .describe {
     transform: scale(1.1);
   }
 }
@@ -163,7 +236,7 @@
     max-height: calc(50% - 10px);
     aspect-ratio: 16/9;
   }
-  .describe{
+  .describe {
     transform: scale(1.1);
   }
 }
@@ -177,7 +250,7 @@
     height: auto;
     aspect-ratio: 16/9;
   }
-  .describe{
+  .describe {
     transform: scale(0.9);
   }
 }
@@ -199,11 +272,10 @@
       max-height: calc(33.33% - 10px);
       aspect-ratio: 16/9;
     }
-    .describe{
+    .describe {
       transform: scale(0.9);
     }
   }
-  
 }
 .grid6 {
   display: flex;
@@ -213,10 +285,10 @@
   .participant {
     width: calc(25% - 10px);
     height: auto;
-    max-height: calc(33.33% - 10px);
+    max-height: calc(25% - 10px);
     aspect-ratio: 16/9;
   }
-  .describe{
+  .describe {
     transform: scale(0.75);
   }
 }
@@ -226,12 +298,12 @@
   justify-content: center;
   align-content: center;
   .participant {
-    width: calc(25% - 10px);
+    width: calc(20% - 10px);
     height: auto;
-    max-height: calc(25% - 10px);
+    max-height: calc(20% - 10px);
     aspect-ratio: 16/9;
   }
-  .describe{
+  .describe {
     transform: scale(0.75);
   }
 }
@@ -334,4 +406,63 @@
   &-other {
     display: none;
   }
+}
+// 环形布局（非 scoped，适配动态创建的 DOM）
+.layout-ring {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+
+  &-top {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    gap: 5px;
+    align-items: center;
+    justify-items: center;
+    box-sizing: border-box;
+    position: relative;
+
+    .ring-slot {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      .participant {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .ring-center {
+      grid-column: 2 / span 2;
+      grid-row: 2 / span 2;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      .participant {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &-bottom {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-rows: 1fr;
+    gap: 5px;
+    box-sizing: border-box;
+    .participant {
+      aspect-ratio: 16/9;
+    }
+  }
 }

package/src/components/LivePoint/LivePoint.vue

@@ -1,6 +1,44 @@
 <template>
   <div class="live-point">
-    <!-- Components will be mounted to body using custom mounting -->
+    <teleport to="body">
+      <LiveCallBoard
+        v-if="model"
+        :default-call-num="defaultCallNum"
+        @voiceCall="makeVoiceCall"
+        @videoCall="makeVideoCall"
+        @miniCall="makeMiniCall"
+        @callBoardClose="model = false"
+      ></LiveCallBoard>
+    </teleport>
+    <teleport to="body">
+      <LiveInviteReceive
+        v-if="isInviteReceiveShow"
+        :inviteData="inviteData"
+        @receiveBoardClose="inviteReceiveClose"
+        @acceptInviteCall="acceptInviteCall"
+        @refuseInviteCall="refuseInviteCall"
+      >
+      </LiveInviteReceive>
+    </teleport>
+    <teleport to="body">
+      <LivePointMeeting
+        v-if="isMeetingDialogShow"
+        :joinType="pointMeetingData.joinType"
+        :meetingNum="pointMeetingData.meetingNum"
+        :meetingType="pointMeetingData.meetingType"
+        :inviteName="pointMeetingData.inviteName"
+        :inviteType="pointMeetingData.inviteType"
+        :invitePhone="pointMeetingData.invitePhone"
+        :inviteWays="inviteWays"
+        :inviteUserData="inviteUserData"
+        :isInMeeting="isInMeeting"
+        @meetingDialogClose="meetingDialogClose"
+        @miniLinkSend="miniLinkSend"
+        @meetingStarted="isInMeeting = true"
+        @meetingEnded="isInMeeting = false"
+      >
+      </LivePointMeeting>
+    </teleport>
   </div>
 </template>
 
@@ -10,6 +48,7 @@ import { mittBus, ShowMessage } from "../../utils/index.js";
 import LiveCallBoard from "../LiveCallBoard/LiveCallBoard.vue";
 import LivePointMeeting from "../LivePointMeeting/LivePointMeeting.vue";
 import LiveInviteReceive from "../LiveInviteReceive/LiveInviteReceive.vue";
+import Teleport from 'vue2-teleport'
 
 export default {
   name: "LivePoint",
@@ -17,6 +56,7 @@ export default {
     LiveCallBoard,
     LivePointMeeting,
     LiveInviteReceive,
+    Teleport
   },
   props: {
     defaultCallNum: {
@@ -52,13 +92,6 @@ export default {
       isInMeeting: false,
       liveClient: null,
       showMessage: null,
-      // DOM mounting references
-      callBoardInstance: null,
-      inviteReceiveInstance: null,
-      pointMeetingInstance: null,
-      callBoardContainer: null,
-      inviteReceiveContainer: null,
-      pointMeetingContainer: null,
     };
   },
   computed: {
@@ -75,15 +108,10 @@ export default {
     this.showMessage = new ShowMessage();
     this.handleLiveClientInitSuccess();
     mittBus.on("liveClientInitSuccess", this.handleLiveClientInitSuccess);
-    
-    // Initialize DOM containers for body mounting
-    this.createMountContainers();
+
   },
   beforeDestroy() {
     mittBus.off("liveClientInitSuccess", this.handleLiveClientInitSuccess);
-    
-    // Clean up mounted components
-    this.destroyMountedComponents();
   },
   methods: {
     // 对外暴露方法, 发起PC会议
@@ -96,7 +124,7 @@ export default {
       this.isMeetingDialogShow = true;
     },
     // volte语音外呼
-    makeVoiceCall({ inviteName, invitePhone, inviteType = 0 } = {}) {
+    makeVoiceCall({ inviteName, invitePhone, inviteType = 0 } = e) {
       this.pointMeetingData.joinType = "launch";
       this.pointMeetingData.meetingType = "voice";
       this.pointMeetingData.invitePhone = invitePhone;
@@ -106,7 +134,7 @@ export default {
       this.isMeetingDialogShow = true;
     },
     // volte视频外呼
-    makeVideoCall({ inviteName, invitePhone, inviteType = 0 } = {}) {
+    makeVideoCall({ inviteName, invitePhone, inviteType = 0 } = e) {
       this.pointMeetingData.joinType = "launch";
       this.pointMeetingData.meetingType = "video";
       this.pointMeetingData.invitePhone = invitePhone;
@@ -116,7 +144,7 @@ export default {
       this.isMeetingDialogShow = true;
     },
     // 通过小程序邀请
-    makeMiniCall({ inviteName, invitePhone, inviteType = 0 } = {}) {
+    makeMiniCall({ inviteName, invitePhone, inviteType = 0 } = e) {
       this.pointMeetingData.joinType = "launch";
       this.pointMeetingData.meetingType = "miniLink";
       this.pointMeetingData.invitePhone = invitePhone;
@@ -126,7 +154,7 @@ export default {
       this.isMeetingDialogShow = true;
     },
     inviteReceiveClose() {
-      this.$emit("inviteReceiveClose");
+      this.$emit("inviteReceiveClose")
     },
     // 点击接收按钮
     acceptInviteCall(e) {
@@ -137,7 +165,7 @@ export default {
             this.pointMeetingData.joinType = "join";
             this.pointMeetingData.meetingType = e.isVoice == 1 ? "voice" : "video";
             this.pointMeetingData.meetingNum = e.roomNum;
-            this.isMeetingDialogShow = true;
+            this.isMeetingDialogShow.value = true;
             this.inviteReceiveClose();
           } else {
             this.showMessage.message("error", res?.msg || "接受会议邀请失败,请重试");
@@ -170,203 +198,13 @@ export default {
     meetingDialogClose() {
       this.isMeetingDialogShow = false;
     },
-    handleCallBoardClose() {
-      this.model = false;
-    },
-    handleMeetingStarted() {
-      this.isInMeeting = true;
-    },
-    handleMeetingEnded() {
-      this.isInMeeting = false;
-    },
     handleLiveClientInitSuccess() {
       this.liveClient = window["liveClient"];
-    },
-    
-    // Create mount containers for body mounting (replacing Teleport)
-    createMountContainers() {
-      // CallBoard container
-      this.callBoardContainer = document.createElement('div');
-      this.callBoardContainer.id = 'live-call-board-container';
-      
-      // InviteReceive container
-      this.inviteReceiveContainer = document.createElement('div');
-      this.inviteReceiveContainer.id = 'live-invite-receive-container';
-      
-      // PointMeeting container
-      this.pointMeetingContainer = document.createElement('div');
-      this.pointMeetingContainer.id = 'live-point-meeting-container';
-    },
-    
-    // Mount CallBoard component to body
-    mountCallBoard() {
-      if (!this.callBoardContainer || document.getElementById('live-call-board-container')) return;
-      
-      document.body.appendChild(this.callBoardContainer);
-      
-      const CallBoardConstructor = Vue.extend(LiveCallBoard);
-      this.callBoardInstance = new CallBoardConstructor({
-        propsData: {
-          defaultCallNum: this.defaultCallNum
-        }
-      });
-      
-      this.callBoardInstance.$on('voiceCall', this.makeVoiceCall);
-      this.callBoardInstance.$on('videoCall', this.makeVideoCall);
-      this.callBoardInstance.$on('miniCall', this.makeMiniCall);
-      this.callBoardInstance.$on('callBoardClose', this.handleCallBoardClose);
-      
-      this.callBoardInstance.$mount(this.callBoardContainer);
-    },
-    
-    // Mount InviteReceive component to body
-    mountInviteReceive() {
-      if (!this.inviteReceiveContainer || document.getElementById('live-invite-receive-container')) return;
-      
-      if (!this.isInviteReceiveShow) return;
-      
-      document.body.appendChild(this.inviteReceiveContainer);
-      
-      const InviteReceiveConstructor = Vue.extend(LiveInviteReceive);
-      this.inviteReceiveInstance = new InviteReceiveConstructor({
-        propsData: {
-          inviteData: this.inviteData
-        }
-      });
-      
-      this.inviteReceiveInstance.$on('receiveBoardClose', this.inviteReceiveClose);
-      this.inviteReceiveInstance.$on('acceptInviteCall', this.acceptInviteCall);
-      this.inviteReceiveInstance.$on('refuseInviteCall', this.refuseInviteCall);
-      
-      this.inviteReceiveInstance.$mount(this.inviteReceiveContainer);
-    },
-    
-    // Mount PointMeeting component to body
-    mountPointMeeting() {
-      if (!this.pointMeetingContainer || document.getElementById('live-point-meeting-container')) return;
-      
-      if (!this.isMeetingDialogShow) return;
-      
-      document.body.appendChild(this.pointMeetingContainer);
-      
-      const PointMeetingConstructor = Vue.extend(LivePointMeeting);
-      this.pointMeetingInstance = new PointMeetingConstructor({
-        propsData: {
-          joinType: this.pointMeetingData.joinType,
-          meetingNum: this.pointMeetingData.meetingNum,
-          meetingType: this.pointMeetingData.meetingType,
-          inviteName: this.pointMeetingData.inviteName,
-          inviteType: this.pointMeetingData.inviteType,
-          invitePhone: this.pointMeetingData.invitePhone,
-          inviteWays: this.inviteWays,
-          inviteUserData: this.inviteUserData
-        }
-      });
-      
-      this.pointMeetingInstance.$on('meetingDialogClose', this.meetingDialogClose);
-      this.pointMeetingInstance.$on('miniLinkSend', this.miniLinkSend);
-      this.pointMeetingInstance.$on('meetingStarted', this.handleMeetingStarted);
-      this.pointMeetingInstance.$on('meetingEnded', this.handleMeetingEnded);
-      
-      this.pointMeetingInstance.$mount(this.pointMeetingContainer);
-    },
-    
-    // Unmount CallBoard component
-    unmountCallBoard() {
-      if (this.callBoardInstance) {
-        this.callBoardInstance.$destroy();
-        this.callBoardInstance.$el.remove();
-        this.callBoardInstance = null;
-      }
-      if (this.callBoardContainer && this.callBoardContainer.parentNode) {
-        this.callBoardContainer.parentNode.removeChild(this.callBoardContainer);
-      }
-    },
-    
-    // Unmount InviteReceive component
-    unmountInviteReceive() {
-      if (this.inviteReceiveInstance) {
-        this.inviteReceiveInstance.$destroy();
-        this.inviteReceiveInstance.$el.remove();
-        this.inviteReceiveInstance = null;
-      }
-      if (this.inviteReceiveContainer && this.inviteReceiveContainer.parentNode) {
-        this.inviteReceiveContainer.parentNode.removeChild(this.inviteReceiveContainer);
-      }
-    },
-    
-    // Unmount PointMeeting component
-    unmountPointMeeting() {
-      if (this.pointMeetingInstance) {
-        this.pointMeetingInstance.$destroy();
-        this.pointMeetingInstance.$el.remove();
-        this.pointMeetingInstance = null;
-      }
-      if (this.pointMeetingContainer && this.pointMeetingContainer.parentNode) {
-        this.pointMeetingContainer.parentNode.removeChild(this.pointMeetingContainer);
-      }
-    },
-    
-    // Clean up all mounted components
-    destroyMountedComponents() {
-      this.unmountCallBoard();
-      this.unmountInviteReceive();
-      this.unmountPointMeeting();
-    },
+    }
   },
-  
   watch: {
-    model(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          this.mountCallBoard();
-        });
-      } else {
-        this.unmountCallBoard();
-      }
-    },
-    
-    isInviteReceiveShow(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          this.mountInviteReceive();
-        });
-      } else {
-        this.unmountInviteReceive();
-      }
-    },
-    
-    isMeetingDialogShow(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          this.mountPointMeeting();
-        });
-      } else {
-        this.unmountPointMeeting();
-      }
-    },
-    
-    inviteData: {
-      handler(newVal) {
-        if (this.inviteReceiveInstance) {
-          this.inviteReceiveInstance.inviteData = newVal;
-        }
-      },
-      deep: true
-    },
-    
-    pointMeetingData: {
-      handler(newVal) {
-        if (this.pointMeetingInstance) {
-          Object.keys(newVal).forEach(key => {
-            this.pointMeetingInstance[key] = newVal[key];
-          });
-        }
-      },
-      deep: true
-    }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>