mdm-client 1.0.0

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

@@ -0,0 +1,337 @@
+// 会议室样式
+// 通用样式
+.meeting {
+  .participant {
+    background: var(--meeting-participant-bg);
+    position: relative;
+    // border: 1px solid #798BA4;
+    border-radius: 5px;
+    margin: 5px;
+    .p-video {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 10;
+      object-fit: contain;
+      border-radius: 5px;
+    }
+    .board {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 30;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--meeting-board-bg) no-repeat center / 100% 100%;
+      .board-icon {
+        width: 20%;
+        height: auto;
+        aspect-ratio: 1/1;
+        background: var(--default-avatar) no-repeat center / 100% 100%;
+      }
+    }
+    .screen-share-suspension {
+      &::before {
+        content: "";
+        position: absolute;
+        left: 11px;
+        top: 10px;
+        width: 20px;
+        height: 20px;
+        background: var(--meeting-share-icon) no-repeat center / 100% 100%;
+      }
+      & {
+        position: absolute;
+        left: 24px;
+        top: 20px;
+        z-index: 50;
+        padding: 9px 13px 9px 41px;
+        background: rgba(28,36,47,0.6);
+        border-radius: 8px;
+        white-space: nowrap;
+        font-weight: 500;
+        font-size: 16px;
+        color: var(--theme-font-color);
+      }
+    }
+    .describe {
+      position: absolute;
+      left: 30px;
+      bottom: 6px;
+      z-index: 50;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      padding: 0 10px;
+      background: var(--call-audio-text-bg);
+      border-radius: 4px;
+      .microphone {
+        width: 11px;
+        height: 16px;
+        cursor: pointer;
+        margin-right: 6px;
+        &-active {
+          background: var(--call-user-mic-on-icon) no-repeat center / 100% 100%;
+        }
+        &-inactive {
+          background: var(--call-user-mic-off-icon) no-repeat center / 100% 100%;
+        }
+      }
+      .identity {
+        white-space: nowrap;
+        font-weight: 400;
+        font-size: 14px;
+        color: var(--theme-font-color);
+      }
+    }
+    .signal-icon {
+      position: absolute;
+      top: 10px;
+      left: 14px;
+      z-index: 50;
+      width: auto;
+      height: 5%;
+      min-height: 30px;
+      aspect-ratio: 1/1;
+      visibility: hidden;
+      &-good {
+        background: var(--signal-good-icon) no-repeat center / 100% 100%;
+      }
+      &-poor {
+        background: var(--signal-poor-icon) no-repeat center / 100% 100%;
+      }
+    }
+    .more-icon {
+      visibility: hidden;
+      cursor: pointer;
+      position: absolute;
+      top: 10px;
+      right: 14px;
+      z-index: 50;
+      aspect-ratio: 1/1;
+      width: auto;
+      height: 5%;
+      min-height: 30px;
+      background: var(--more-icon) no-repeat center / 100% 100%;
+    }
+  }
+}
+// 宫格布局
+.grid1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .participant {
+    width: 100%;
+    height: 98%;
+    .p-video {
+      object-fit: cover !important;
+    }
+  }
+  .describe{
+    transform: scale(1.3);
+  }
+}
+.grid2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  .participant {
+    width: calc(50% - 10px);
+    height: auto;
+    aspect-ratio: 16/9;
+  }
+  .describe{
+    transform: scale(1.1);
+  }
+}
+.grid3 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  .participant {
+    width: calc(50% - 10px);
+    height: auto;
+    max-height: calc(50% - 10px);
+    aspect-ratio: 16/9;
+  }
+  .describe{
+    transform: scale(1.1);
+  }
+}
+.grid4 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  .participant {
+    width: calc(33.33% - 10px);
+    height: auto;
+    aspect-ratio: 16/9;
+  }
+  .describe{
+    transform: scale(0.9);
+  }
+}
+.grid5 {
+  // &::-webkit-scrollbar {
+  //   display: none;
+  // }
+  // &::-webkit-scrollbar {
+  //   display: none;
+  // }
+  & {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+    .participant {
+      width: calc(33.33% - 10px);
+      height: auto;
+      max-height: calc(33.33% - 10px);
+      aspect-ratio: 16/9;
+    }
+    .describe{
+      transform: scale(0.9);
+    }
+  }
+  
+}
+.grid6 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  .participant {
+    width: calc(25% - 10px);
+    height: auto;
+    max-height: calc(33.33% - 10px);
+    aspect-ratio: 16/9;
+  }
+  .describe{
+    transform: scale(0.75);
+  }
+}
+.grid7 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  .participant {
+    width: calc(25% - 10px);
+    height: auto;
+    max-height: calc(25% - 10px);
+    aspect-ratio: 16/9;
+  }
+  .describe{
+    transform: scale(0.75);
+  }
+}
+.grid8 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  // align-content: center;
+  .participant {
+    width: calc(25% - 10px);
+    // height: calc(25% - 10px);
+    height: auto;
+    aspect-ratio: 16/9;
+  }
+}
+// 焦点布局
+.rightSide {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  .layout-leftside {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    width: 77.1%;
+    height: 100%;
+    padding-right: 5px;
+    .participant {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16/9;
+      max-height: 100%;
+    }
+  }
+  .layout-rightside {
+    flex-shrink: 0;
+    width: 22.9%;
+    height: 100%;
+    overflow: auto;
+    padding: 10px 0 0 0;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    .participant {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16/9;
+      margin: 5px 0;
+      .describe {
+        left: 2px;
+        bottom: 2px;
+      }
+    }
+  }
+}
+// 点调模式
+.point-turn {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &-top {
+    width: 100%;
+    height: 25%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    .participant {
+      flex-shrink: 0;
+      width: calc(20% - 10px);
+      height: calc(100% - 10px);
+    }
+  }
+  &-center {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    .participant {
+      flex-shrink: 0;
+      width: calc(50% - 10px);
+      height: calc(100% - 10px);
+    }
+  }
+  &-bottom {
+    width: 100%;
+    height: 25%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: nowrap;
+    .participant {
+      flex-shrink: 0;
+      width: calc(20% - 10px);
+      height: calc(100% - 10px);
+    }
+  }
+  &-other {
+    display: none;
+  }
+}

package/src/components/LivePoint/LivePoint.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="live-point">
+    <!-- Components will be mounted to body using custom mounting -->
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+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";
+
+export default {
+  name: "LivePoint",
+  components: {
+    LiveCallBoard,
+    LivePointMeeting,
+    LiveInviteReceive,
+  },
+  props: {
+    defaultCallNum: {
+      type: String,
+      default: "",
+    },
+    isInviteReceiveShow: {
+      type: Boolean,
+      default: false,
+    },
+    inviteData: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isMeetingDialogShow: false,
+      pointMeetingData: {
+        joinType: "join",
+        meetingNum: "",
+        meetingType: "video",
+        invitePhone: "",
+        inviteType: 0,
+        inviteName: "",
+      },
+      inviteWays: "phoneCall",
+      inviteUserData: {},
+      isInMeeting: false,
+      liveClient: null,
+      showMessage: null,
+      // DOM mounting references
+      callBoardInstance: null,
+      inviteReceiveInstance: null,
+      pointMeetingInstance: null,
+      callBoardContainer: null,
+      inviteReceiveContainer: null,
+      pointMeetingContainer: null,
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  mounted() {
+    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会议
+    launchPcInvite(tempUserData, meetingType) {
+      this.pointMeetingData.joinType = "launch";
+      this.pointMeetingData.meetingType = meetingType;
+      this.inviteWays = "identity";
+      this.inviteUserData = tempUserData;
+      console.log("launchPcInvite", this.inviteUserData, meetingType);
+      this.isMeetingDialogShow = true;
+    },
+    // volte语音外呼
+    makeVoiceCall({ inviteName, invitePhone, inviteType = 0 } = {}) {
+      this.pointMeetingData.joinType = "launch";
+      this.pointMeetingData.meetingType = "voice";
+      this.pointMeetingData.invitePhone = invitePhone;
+      this.pointMeetingData.inviteName = inviteName;
+      this.pointMeetingData.inviteType = inviteType;
+      this.inviteWays = "phoneCall";
+      this.isMeetingDialogShow = true;
+    },
+    // volte视频外呼
+    makeVideoCall({ inviteName, invitePhone, inviteType = 0 } = {}) {
+      this.pointMeetingData.joinType = "launch";
+      this.pointMeetingData.meetingType = "video";
+      this.pointMeetingData.invitePhone = invitePhone;
+      this.pointMeetingData.inviteName = inviteName;
+      this.pointMeetingData.inviteType = inviteType;
+      this.inviteWays = "phoneCall";
+      this.isMeetingDialogShow = true;
+    },
+    // 通过小程序邀请
+    makeMiniCall({ inviteName, invitePhone, inviteType = 0 } = {}) {
+      this.pointMeetingData.joinType = "launch";
+      this.pointMeetingData.meetingType = "miniLink";
+      this.pointMeetingData.invitePhone = invitePhone;
+      this.pointMeetingData.inviteName = inviteName;
+      this.pointMeetingData.inviteType = inviteType;
+      this.inviteWays = "phoneCall";
+      this.isMeetingDialogShow = true;
+    },
+    inviteReceiveClose() {
+      this.$emit("inviteReceiveClose");
+    },
+    // 点击接收按钮
+    acceptInviteCall(e) {
+      this.liveClient
+        .acceptInvite(e.roomNum, e.fromIdentity)
+        .then((res) => {
+          if (res?.code == 200) {
+            this.pointMeetingData.joinType = "join";
+            this.pointMeetingData.meetingType = e.isVoice == 1 ? "voice" : "video";
+            this.pointMeetingData.meetingNum = e.roomNum;
+            this.isMeetingDialogShow = true;
+            this.inviteReceiveClose();
+          } else {
+            this.showMessage.message("error", res?.msg || "接受会议邀请失败,请重试");
+          }
+        })
+        .catch(() => {
+          this.showMessage.message("error", "接受会议邀请失败,请重试");
+        });
+    },
+    // 点击拒绝按钮
+    refuseInviteCall(e) {
+      this.liveClient
+        .refuseInvite(e.roomNum, e.fromIdentity)
+        .then((res) => {
+          if (res?.code == 200) {
+            this.inviteReceiveClose();
+          } else {
+            this.showMessage.message("error", res?.msg || "拒绝会议邀请失败,请重试");
+          }
+        })
+        .catch(() => {
+          this.showMessage.message("error", "拒绝会议邀请失败,请重试");
+        });
+    },
+    // 抛出小程序邀请事件给业务系统
+    miniLinkSend(e) {
+      this.$emit("miniLinkInvite", e);
+    },
+    // 点对点通话组件关闭事件监听
+    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>