mdm-client 1.0.0

package/src/components/LiveCallBoard/LiveCallBoard.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="live-call-board" id="live-call-board">
+    <div class="live-call-board-title" v-drag="'live-call-board'">
+      <span>拨号盘</span>
+      <div class="title-close-icon" @click="$emit('callBoardClose')" ></div>
+    </div>
+    <div class="input-box">
+      <el-input v-model="callNum" type="mobile" placeholder="请输入号码">
+        <template #suffix>
+          <div class="del-icon" @click="delCallNum"></div>
+        </template>
+      </el-input>
+    </div>
+    
+    <div class="live-call-board-list">
+      <div class="live-call-board-list-item" v-for="item of '123456789*0#'" @click="inputCallNum(item)">
+        {{ item }}
+      </div>
+    </div>
+    <div class="live-call-board-foot">
+      <div class="live-call-board-foot-btn voice-btn" v-throttle-click:500="voiceCall">
+        <div class="btn-icon"></div>
+      </div>
+      <div class="live-call-board-foot-btn video-btn" v-throttle-click:500="videoCall">
+        <div class="btn-icon"></div>
+      </div>
+      <div class="live-call-board-foot-btn mini-btn" v-throttle-click:500="miniCall">
+        <div class="btn-icon"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ShowMessage } from "../../utils/index.js"
+
+export default {
+  name: "LiveCallBoard",
+  props: {
+    isInMeeting: {
+      type: Boolean,
+      default: false
+    },
+    defaultCallNum: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      callNum: "",
+      showMessage: null
+    }
+  },
+  mounted() {
+    this.showMessage = new ShowMessage()
+    this.callNum = this.defaultCallNum
+  },
+  methods: {
+    verifyMobile(num) {
+      const reg = /^[\d#*]+$/
+      return reg.test(num)
+    },
+    inputCallNum(item) {
+      this.callNum += item
+    },
+    voiceCall() {
+      if(this.isInMeeting) {
+        this.showMessage.message("error", '当前在会议中，无法呼叫')
+        return
+      }
+      if (!this.callNum) {
+        this.showMessage.message("error", '联系方式不能为空')
+      } else {
+        if (this.verifyMobile(this.callNum)) {
+          this.$emit("voiceCall", {
+            inviteName: "",
+            invitePhone: this.callNum,
+          })
+          this.$emit('callBoardClose')
+        } else {
+          this.showMessage.message("error", '手机号中包含不合法字符')
+        }
+      }
+    },
+    videoCall() {
+      if(this.isInMeeting) {
+        this.showMessage.message("error", '当前在会议中，无法呼叫')
+        return
+      }
+      if (!this.callNum) {
+        this.showMessage.message("error", '联系方式不能为空')
+      } else {
+        if (this.verifyMobile(this.callNum)) {
+          this.$emit("videoCall", {
+            inviteName: "",
+            invitePhone: this.callNum,
+          })
+          this.$emit('callBoardClose')
+        } else {
+          this.showMessage.message("error", '手机号中包含不合法字符')
+        }
+      }
+    },
+    miniCall() {
+      if(this.isInMeeting) {
+        this.showMessage.message("error", '当前在会议中，无法呼叫')
+        return
+      }
+      if (!this.callNum) {
+        this.showMessage.message("error", '联系方式不能为空')
+      } else {
+        if (this.verifyMobile(this.callNum)) {
+          this.$emit("miniCall", {
+            inviteName: "",
+            invitePhone: this.callNum,
+          })
+          this.$emit('callBoardClose')
+        } else {
+          this.showMessage.message("error", '手机号中包含不合法字符')
+        }
+      }
+    },
+    delCallNum() {
+      if(this.callNum.length > 0) {
+        this.callNum = this.callNum.substring(0, this.callNum.length - 1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+.live-call-board {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  z-index: 2000;
+  width: 300px;
+  height: fit-content;
+  background: var(--dialog-bg);
+  box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+  border-radius: 10px;
+  font-weight: 500;
+  font-size: 18px;
+  color: var(--theme-font-color);
+  transform: translate(0, 0);
+  border: 1px solid var(--dialog-border-color);
+  .input-box {
+    padding: 0 20px;
+    margin-bottom: 10px;
+    :deep(.el-input) {
+      width: 100%;
+      height: 42px;
+      @include elInput;
+    }
+  }
+  &-title {
+    width: 100%;
+    height: 43px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--dialog-border-color);
+    .title-close-icon {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      background: var(--close-icon) no-repeat center / 100% 100%;
+    }
+  }
+  &-list {
+    width: 100%;
+    padding: 0 20px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px 10px;
+    margin-bottom: 10px;
+    &-item {
+      cursor: pointer;
+      height: 48px;
+      line-height: 48px;
+      text-align: center;
+      font-weight: 400;
+      font-size: 24px;
+      background: var(--call-border-item-bg);
+      border-radius: 6px 6px 6px 6px;
+    }
+  }
+  &-foot {
+    width: 100%;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    &-btn {
+      width: 80px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--call-border-item-bg);
+      border-radius: 6px 6px 6px 6px;
+      .btn-icon {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
+    }
+    .voice-btn {
+      .btn-icon {
+        background: var(--call-voice-icon) no-repeat center / 100% 100%;
+      }
+    }
+    .video-btn {
+      .btn-icon {
+        background: var(--call-video-icon) no-repeat center / 100% 100%;
+      }
+    }
+    .mini-btn {
+      .btn-icon {
+        background: var(--call-mini-icon) no-repeat center / 100% 100%;
+      }
+    }
+  }
+  .del-icon {
+    width: 17px;
+    height: 17px;
+    cursor: pointer;
+    background: var(--call-border-del-icon) no-repeat center / 100% 100%;
+  }
+}
+</style>

package/src/components/LiveInviteReceive/LiveInviteReceive.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="receive-board" id="receive-board">
+    <div class="receive-board-title" v-drag="'receive-board'">
+      <span>{{ inviteData.isVoice == '1' ? '语音呼叫' : '视频呼叫' }}</span>
+      <div class="title-close-icon" @click="$emit('receiveBoardClose')"></div>
+    </div>
+    <div class="receive-board-msg">
+      <div
+        :class="['receive-type-icon', inviteData.isVoice == '1' ? 'receive-type-icon-voice' : 'receive-type-icon-video']"
+      ></div>
+      <span>{{ `【${inviteData?.fromName ?? '会议发起人'}】邀请您进行${inviteData.isVoice == '1' ? '语音' : '视频'}通话` }}</span>
+    </div>
+    <div class="receive-board-foot">
+      <div class="receive-board-foot-btn accept-btn" @click="acceptInviteCall">
+        <div class="btn-icon"></div>
+        <span>接听</span>
+      </div>
+      <div class="receive-board-foot-btn refuse-btn" @click="refuseInviteCall">
+        <div class="btn-icon"></div>
+        <span>挂断</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LiveInviteReceive",
+  props: {
+    inviteData: {
+      type: Object,
+      default: () => ({ })
+    }
+  },
+  methods: {
+    acceptInviteCall() {
+      console.log("acceptInviteCall", this.inviteData);
+      this.$emit("acceptInviteCall", this.inviteData)
+    },
+    refuseInviteCall() {
+      this.$emit("refuseInviteCall", this.inviteData)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.receive-board {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  z-index: 2000;
+  width: 330px;
+  height: fit-content;
+  background: var(--receive-board-bg);
+  box-shadow: 0px 0px 10px 0px var(--dialog-shadow-color);
+  border-radius: 0px;
+  padding: 0;
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--theme-font-color);
+  transform: translate(0, 0);
+
+  &-title {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--dialog-title-bg);
+    font-size: 16px;
+    padding: 0 12px;
+
+    .title-close-icon {
+      width: 14px;
+      height: 14px;
+      cursor: pointer;
+      background: var(--close-icon) no-repeat center center / 100% 100%;
+    }
+  }
+
+  &-msg {
+    width: 100%;
+    height: 108px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .receive-type-icon {
+      width: 22px;
+      height: 22px;
+      margin-right: 5px;
+      &-voice {
+        background: var(--receive-voice-icon) no-repeat center center / 100% 100%;
+      }
+      &-video {
+        background: var(--receive-video-icon) no-repeat center center / 100% 100%;
+      }
+    }
+
+    span {
+      line-height: 22px;
+      font-size: 16px;
+    }
+  }
+
+  &-foot {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 26px;
+
+    &-btn {
+      padding: 0 30px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      border-radius: 6px 6px 6px 6px;
+      cursor: pointer;
+
+      .btn-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+
+      &:not(:last-child) {
+        margin-right: 12px;
+      }
+    }
+
+    .accept-btn {
+      background: #019A22;
+      color: var(--theme-font-color);
+      .btn-icon {
+        background: var(--receive-hang-on-icon) no-repeat center center / 100% 100%;
+      }
+    }
+
+    .refuse-btn {
+      border: 1px solid var(--btn-danger-bg);
+      color: var(--btn-danger-bg);
+      .btn-icon {
+        background: var(--receive-hang-off-icon) no-repeat center center / 100% 100%;
+      }
+    }
+  }
+}
+</style>

package/src/components/LiveMulti/LiveMulti.vue

@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <teleport to="body">
+      <MeetingReadyDialog
+        v-if="modelValue"
+        :dialogType="dialogType"
+        :tempRoomNum="tempRoomNum"
+        :tempRoomName="tempRoomName"
+        @launchMeeting="launchMeeting"
+        @joinMeeting="joinMeeting"
+        @close="closeReadyDialog"
+      />
+    </teleport>
+    <teleport to="body">
+      <live-multiple-meeting
+        v-if="isMeetingDialogShow"
+        ref="liveMultipleMeetingRef"
+        :tempMeetingName="multiMeetingData.roomName"
+        :tempMeetingNum="multiMeetingData.roomNum"
+        :tempCameraStatus="multiMeetingData.cameraStatus"
+        :tempMicroStatus="multiMeetingData.microphoneStatus"
+        :tempOutputStatus="multiMeetingData.outputStatus"
+        :tempActiveDevice="{
+          audioInputDevice: multiMeetingData.audioInputDevice,
+          audioOutputDevice: multiMeetingData.audioOutputDevice,
+          videoDevice: multiMeetingData.videoDevice,
+        }"
+        :joinType="multiMeetingData.joinType"
+        :tempInviteList="inviteList"
+        :deviceList="deviceList"
+        :isCustomizeMiniInvitations="isCustomizeMiniInvitations"
+        :miniPagePath="miniPagePath"
+        :defaultInviteWay="defaultInviteWay"
+        :baseUrl="baseUrl"
+        :userData="userData"
+        :isInMeeting="isInMeeting"
+        :org="org"
+        :token="token"
+        @multiMeetingClose="closeMultiMeeting"
+        @miniInviteSend="sendMiniInvite"
+        @inviteMessageSend="sendMessageInvite"
+        @multiMeetingMinum="openMiniVideoDialog"
+        @meetingStart="handleMeetingStart"
+        @meetingEnd="handleMeetingEnd"
+      ></live-multiple-meeting>
+    </teleport>
+    <teleport to="body">
+      <LiveInviteReceive
+        v-if="isInviteReceiveShow"
+        :inviteData="inviteData"
+        @receiveBoardClose="inviteReceiveClose"
+        @acceptInviteCall="acceptInviteCall"
+        @refuseInviteCall="refuseInviteCall"
+      >
+      </LiveInviteReceive>
+    </teleport>
+    <teleport to="body">
+      <minium-video-dialog
+        v-if="isMiniVideoDialogShow"
+        ref="miniumVideoDialogRef"
+        :trackData="trackData"
+        @resetMultiDialog="resetMultiDialog"
+        @miniVideoDialogClose="closeMiniVideoDialog"
+      ></minium-video-dialog>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import MeetingReadyDialog from "../MeetingReadyDialog/MeetingReadyDialog.vue";
+import MiniumVideoDialog from "../MiniumVideoDialog/MiniumVideoDialog.vue";
+import LiveInviteReceive from "../LiveInviteReceive/LiveInviteReceive.vue";
+import LiveMultipleMeeting from "../LiveMultipleMeeting/LiveMultipleMeeting.vue";
+import Teleport from 'vue2-teleport'
+import { ShowMessage } from "@/utils/index";
+
+export default {
+  name: "LiveMulti",
+  components: {
+    MeetingReadyDialog,
+    MiniumVideoDialog,
+    LiveInviteReceive,
+    LiveMultipleMeeting,
+    Teleport
+  },
+  props: {
+    dialogType: {
+      type: String,
+      default: "launch"
+    },
+    tempRoomNum: {
+      type: String,
+      default: ""
+    },
+    tempRoomName: {
+      type: String,
+      default: ""
+    },
+    inviteList: {
+      type: Array,
+      default: () => []
+    },
+    deviceList: {
+      type: Array,
+      default: () => []
+    },
+    isCustomizeMiniInvitations: {
+      type: Boolean,
+      default: false
+    },
+    miniPagePath: {
+      type: String,
+      default: ""
+    },
+    defaultInviteWay: {
+      type: String,
+      default: "identity"
+    },
+    baseUrl: {
+      type: String,
+      default: ""
+    },
+    userData: {
+      type: Object,
+      default: () => ({})
+    },
+    org: {
+      type: String,
+      default: "default"
+    },
+    token: {
+      type: String,
+      default: ""
+    },
+    isInviteReceiveShow: {
+      type: Boolean,
+      default: false
+    },
+    inviteData: {
+      type: Object,
+      default: () => ({})
+    },
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isMeetingDialogShow: false,
+      isMiniVideoDialogShow: false,
+      multiMeetingData: {
+        roomName: "",
+        roomNum: "",
+        cameraStatus: true,
+        microphoneStatus: true,
+        outputStatus: true,
+        audioInputDevice: "",
+        audioOutputDevice: "",
+        videoDevice: "",
+        joinType: "launch"
+      },
+      trackData: {},
+      isInMeeting: false
+    };
+  },
+  computed: {
+    modelValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    }
+  },
+  methods: {
+    launchMeeting(e) {
+      this.multiMeetingData = {
+        ...e,
+        roomNum: "",
+        joinType: "launch"
+      };
+      this.isMeetingDialogShow = true;
+    },
+    joinMeeting(e) {
+      this.multiMeetingData = {
+        ...e,
+        roomName: "",
+        joinType: "join"
+      };
+      this.isMeetingDialogShow = true;
+    },
+    quickLaunch() {
+      this.multiMeetingData = {
+        roomName: this.userData.username + "的视频会议",
+        roomNum: "",
+        cameraStatus: true,
+        microphoneStatus: true,
+        audioInputDevice: "",
+        audioOutputDevice: "",
+        videoDevice: "",
+        joinType: "launch"
+      };
+      this.isMeetingDialogShow = true;
+    },
+    closeReadyDialog() {
+      this.modelValue = false;
+    },
+    closeMultiMeeting() {
+      this.isMeetingDialogShow = false;
+    },
+    sendMiniInvite(e) {
+      this.$emit("miniInviteSend", e);
+    },
+    sendMessageInvite(e) {
+      this.$emit("inviteMessageSend", e);
+    },
+    async appendInvite(e) {
+      this.$nextTick(() => {
+        if (this.$refs.liveMultipleMeetingRef) {
+          if (this.isInMeeting) {
+            this.$refs.liveMultipleMeetingRef.appendInvite(e.inviteList, e.inviteWay);
+          } else {
+            this.showMessage.error("请先进入会议");
+          }
+        }
+      })
+    },
+    pullMonitorDevice(monitorID, monitorName) {
+      if (this.$refs.liveMultipleMeetingRef) {
+        if (this.isInMeeting) {
+          this.$refs.liveMultipleMeetingRef.pullMonitorDevice(monitorID, monitorName);
+        } else {
+          this.showMessage.error("请先进入会议");
+        }
+      }
+    },
+    openMiniVideoDialog(e) {
+      this.trackData = e;
+      this.isMiniVideoDialogShow = true;
+    },
+    resetMultiDialog() {
+      this.isMiniVideoDialogShow = false;
+      this.$refs.liveMultipleMeetingRef.resetDialog();
+    },
+    closeMiniVideoDialog() {
+      this.isMiniVideoDialogShow = false;
+    },
+    inviteReceiveClose() {
+      this.$emit("inviteReceiveClose");
+    },
+    handleMeetingStart() {
+      this.isInMeeting = true;
+    },
+    handleMeetingEnd() {
+      this.isInMeeting = false;
+    },
+    acceptInviteCall(e) {
+      liveClient
+        .acceptInvite(e.roomNum, e.fromIdentity)
+        .then((res) => {
+          if (res?.code == 200) {
+            this.joinMeeting({
+              roomNum: e.roomNum,
+              cameraStatus: true,
+              microphoneStatus: true,
+              outputStatus: true,
+              audioInputDevice: "",
+              audioOutputDevice: "",
+              videoDevice: ""
+            });
+            this.inviteReceiveClose();
+          } else {
+            this.showMessage.error(res?.msg || "接受会议邀请失败,请重试");
+          }
+        })
+        .catch(() => {
+          this.showMessage.error("接受会议邀请失败,请重试");
+        });
+    },
+    refuseInviteCall(e) {
+      liveClient
+        .refuseInvite(e.roomNum, e.fromIdentity)
+        .then((res) => {
+          if (res?.code == 200) {
+            this.inviteReceiveClose();
+          } else {
+            this.showMessage.error(res?.msg || "拒绝会议邀请失败,请重试");
+          }
+        })
+        .catch(() => {
+          this.showMessage.error("拒绝会议邀请失败,请重试");
+        });
+    }
+  },
+  created() {
+    this.showMessage = new ShowMessage();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>