mdm-client 1.0.0

package/src/components/other/moreOptionDialog.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="more-option" :style="optionDialogOffset">
+    <div
+      :class="['more-option-item', { 'more-option-item-danger': option === '移出会议' }]"
+      v-for="(option, index) of optionList"
+      :key="'o' + index"
+      @click="pickOption(option)"
+    >
+      {{ option }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MoreOptionDialog",
+  props: {
+    curBlur: {
+      type: String,
+      default: "",
+    },
+    identity: {
+      type: String,
+      default: "",
+    },
+    meetingHost: {
+      type: Object,
+    },
+    optionDialogOffset: {
+      type: Object,
+      default: () => ({
+        left: "0px",
+        top: "0px",
+      }),
+    },
+    localIdentity: {
+      type: String,
+    },
+    participants: {
+      type: Array,
+    },
+    meetingCoHost: {
+      type: Array,
+    }
+  },
+  computed: {
+    optionList() {
+      const participantItem = this.getUserItemByIdentity(this.identity);
+      if (participantItem && participantItem?.metadata) {
+        const metadata = participantItem.metadata;
+        const isLocalParticipant = this.identity === this.localIdentity; // 判断是否为本地与会者
+        console.log("participantMetadata", metadata);
+        
+        if (this.judgeParticipantIsHost(this.localIdentity)) {
+          // 本地与会者为会议主持人
+          if (metadata?.platformID == 2 || metadata?.platformID == 5 || metadata?.platformID == 6) {
+            // 当前与会者为设备
+            const options = [
+              this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
+              participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
+              participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+            ];
+            // 如果不是本地与会者，添加主持人权限操作
+            if (!isLocalParticipant) {
+              options.push(
+                "修改名称",
+                "移出会议"
+              );
+            } else {
+              // 本地与会者只能修改名称
+              options.push("修改名称");
+            }
+            return options;
+          } else if(metadata?.platformID == 4) {
+            // 当前与会者为volte手机端
+            const options = [
+              this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
+              participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
+              participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+            ];
+            if (!isLocalParticipant) {
+              options.push(
+                metadata.isDeafness ? "取消置聋" : "置聋",
+                "修改名称",
+                "移出会议"
+              );
+            } else {
+              // 本地与会者只能修改名称
+              options.push("修改名称");
+            }
+            return options;
+          } else {
+            // 当前与会者为app手机端
+            const options = [
+              this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
+              participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
+              participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+            ];
+            if (!isLocalParticipant) {
+              options.push(
+                metadata.isDeafness ? "取消置聋" : "置聋",
+                "设为主持人",
+                metadata.isCoHost ? "取消设为联席主持人" : "设为联席主持人",
+                "修改名称",
+                "移出会议"
+              );
+            } else {
+              // 本地与会者只能修改名称
+              options.push("修改名称");
+            }
+            return options;
+          }
+        } else if(this.judgeParticipantIsCoHost(this.localIdentity)) {
+          // 本地与会者为联席主持人
+          if (metadata?.platformID == 2 || metadata?.platformID == 5 || metadata?.platformID == 6) {
+            // 当前与会者为设备
+            const options = [
+              this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
+              participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
+              participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+            ];
+            
+            // 如果不是本地与会者，添加联席主持人权限操作
+            if (!isLocalParticipant) {
+              options.push(
+                "修改名称",
+                "移出会议"
+              );
+            } else {
+              // 本地与会者只能修改名称
+              options.push("修改名称");
+            }
+            return options;
+          } else if(metadata?.platformID == 4) {
+            // 当前与会者为volte手机端
+            const options = [
+              this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
+              participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
+              participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+            ];
+            // 如果不是本地与会者，添加联席主持人权限操作
+            if (!isLocalParticipant) {
+              options.push(
+                metadata.isDeafness ? "取消置聋" : "置聋",
+                "修改名称",
+                "移出会议"
+              );
+            } else {
+              // 本地与会者只能修改名称
+              options.push("修改名称");
+            }
+            return options;
+          } else {
+            // 当前与会者非sip账号
+            const options = [
+              this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
+              participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
+              participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+            ];
+            
+            // 如果不是本地与会者，添加联席主持人权限操作
+            if (!isLocalParticipant) {
+              options.push(
+                metadata.isDeafness ? "取消置聋" : "置聋",
+                metadata.isCoHost ? "取消设为联席主持人" : "设为联席主持人",
+                "修改名称",
+                "移出会议"
+              );
+            } else {
+              // 本地与会者只能修改名称
+              options.push("修改名称");
+            }
+            
+            return options;
+          }
+        }
+      }
+      return [];
+    },
+    participantNum() {
+      return this.participants.length;
+    }
+  },
+  methods: {
+    judgeParticipantIsHost(identity) {
+      return this.meetingHost.ownerId === identity;
+    },
+    judgeParticipantIsCoHost(identity) {
+      if(this.meetingCoHost.length > 0) {
+        return this.meetingCoHost.some(item => item.coHostId === identity)
+      } else {
+        return false
+      }
+    },
+    // 根据与会者identity返回与会者
+    getUserItemByIdentity(identity) {
+      if (this.participantNum > 0) {
+        const index = this.participants.findIndex((item) => {
+          return item.identity === identity;
+        });
+        if (index > -1) {
+          return this.participants[index];
+        } else {
+          return null;
+        }
+      } else {
+        return null;
+      }
+    },
+    pickOption(option) {
+      switch (option) {
+        case "设为主屏":
+          this.$emit("setToBlur", this.identity);
+          break;
+        case "取消设为主屏":
+          this.$emit("removeFromBlur", this.identity);
+          break;
+        case "打开麦克风":
+          this.$emit("openMicro", this.identity);
+          break;
+        case "关闭麦克风":
+          this.$emit("closeMicro", this.identity);
+          break;
+        case "打开摄像头":
+          this.$emit("openCamera", this.identity);
+          break;
+        case "关闭摄像头":
+          this.$emit("closeCamera", this.identity);
+          break;
+        case "设为主持人":
+          this.$emit("setToHost", this.identity);
+          break;
+        case "取消设为联席主持人":
+          this.$emit("removeFromCoHost", this.identity);
+          break;
+        case "设为联席主持人":
+          this.$emit("setToCoHost", this.identity);
+          break;
+        case "置聋":
+          this.$emit("setToDeafness", this.identity);
+          break;
+        case "取消置聋":
+          this.$emit("cancelDeafness", this.identity);
+          break;
+        case "修改名称":
+          this.$emit("updateName", this.identity);
+          break;
+        case "移出会议":
+          this.$emit("remove", this.identity);
+          break;
+      }
+      this.$emit("close");
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style lang="scss" scoped>
+.more-option {
+  width: 130px;
+  background: var(--dialog-bg);
+  box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+  border-radius: 8px;
+  border: 1px solid var(--dialog-border-color);
+  padding: 4px 6px;
+  position: absolute;
+  z-index: 100;
+  &-item {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    white-space: nowrap;
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--theme-font-color);
+    cursor: pointer;
+    &:hover {
+      background: var(--dialog-item-hover);
+      border-radius: 8px;
+    }
+    &:not(:last-child) {
+      margin-bottom: 6px;
+    }
+    &-danger {
+      color: var(--btn-danger-bg);
+    }
+  }
+}
+</style>

package/src/components/other/screenShareBoard.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="screen-share-board">
+    <div class="screen-share-board-title">您正在共享屏幕</div>
+    <div class="screen-share-board-option">
+      <div class="option-list" @click="isFluencyPriority = !isFluencyPriority">
+        <div
+          :class="['option-list-check', { 'option-list-check-active': isFluencyPriority }]"
+        ></div>
+        <div class="option-list-label">流畅度优先</div>
+      </div>
+      <div class="option-list" @click="systemAudioInclude = !systemAudioInclude">
+        <div
+          :class="['option-list-check', { 'option-list-check-active': systemAudioInclude }]"
+        ></div>
+        <div class="option-list-label">共享电脑中的声音</div>
+      </div>
+    </div>
+    <div class="btn" @click="stopScreenShare">停止共享</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScreenShareBoard",
+  props: {
+    screenShareCaptureOption: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      isFluencyPriority: false,
+      systemAudioInclude: false,
+    };
+  },
+  watch: {
+    isFluencyPriority(newVal) {
+      this.$emit("screenShareOptionChange", {
+        isFluencyPriority: newVal,
+        systemAudioInclude: this.systemAudioInclude,
+      });
+    },
+    systemAudioInclude(newVal) {
+      this.$emit("screenShareOptionChange", {
+        isFluencyPriority: this.isFluencyPriority,
+        systemAudioInclude: newVal,
+      });
+    }
+  },
+  mounted() {
+    this.isFluencyPriority = (this.screenShareCaptureOption.frameRate === 60);
+    this.systemAudioInclude = this.screenShareCaptureOption.systemAudio === "include";
+  },
+  methods: {
+    stopScreenShare() {
+      this.$emit("stopScreenShare");
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+.screen-share-board {
+  position: absolute;
+  z-index: 4000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  // background: var(--meeting-bg);
+  background: var(--dialog-bg);
+  border-bottom: 1px solid var(--dialog-border-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &-title {
+    font-size: 30px;
+    font-weight: 400;
+    color: var(--theme-font-color);
+    line-height: 43px;
+    margin-bottom: 30px;
+  }
+  &-option {
+    .option-list {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      flex: 0 0;
+      cursor: pointer;
+      margin-bottom: 20px;
+      &-check {
+        width: 17px;
+        height: 17px;
+        background: url("../../assets/image/common/selector.png") no-repeat center center / 100% 100%;
+        margin-right: 12px;
+        &-active {
+          background: url("../../assets/image/common/selectorOn.png") no-repeat center center / 100% 100%;
+        }
+      }
+      &-label {
+        font-size: 14px;
+        font-weight: 400;
+        color: var(--theme-font-color);
+        line-height: 23px;
+        white-space: nowrap;
+      }
+    }
+  }
+  .btn {
+    width: 112px;
+    height: 36px;
+    margin-top: 10px;
+    @include button;
+    @include btnDanger;
+  }
+}
+</style>

package/src/components/other/selectDialog.vue

@@ -0,0 +1,279 @@
+<template>
+  <div :class="['check-dialog', {'check-dialog-mini': dialogType === 'other'}]" :style="position">
+    <div class="check-dialog-inner">
+      <template v-if="dialogType === 'audio'">
+        <div class="control-list" style="border: none">
+          <div class="control-list-title">麦克风</div>
+          <div
+            :class="[
+              'control-list-item',
+              {
+                'control-list-item-checked':
+                  activeDevice?.audioInputDevice && item.value == activeDevice?.audioInputDevice,
+              },
+            ]"
+            v-for="item of audioDevices"
+            :key="item.value"
+            @click="chooseAudioInputDevice(item)"
+          >
+            <div class="control-list-item-value" :title="item.label">{{ item.label }}</div>
+            <div
+              :class="[
+                'check',
+                {
+                  'is-checked':
+                    activeDevice?.audioInputDevice && item.value == activeDevice?.audioInputDevice,
+                },
+              ]"
+            ></div>
+          </div>
+        </div>
+        <!-- <div class="control-footer">
+          <div class="control-link" @click="detectMicroAndOutput">监测麦克风和扬声器</div>
+        </div> -->
+      </template>
+      <template v-else-if="dialogType === 'output'">
+        <div class="control-list">
+          <div class="control-list-title">扬声器</div>
+          <div
+            :class="[
+              'control-list-item',
+              {
+                'control-list-item-checked':
+                  activeDevice?.audioOutputDevice && item.value == activeDevice?.audioOutputDevice,
+              },
+            ]"
+            v-for="item of outputDevices"
+            :key="item.value"
+            @click="chooseAudioOutputDevice(item)"
+          >
+            <div class="control-list-item-value" :title="item.label">{{ item.label }}</div>
+            <div
+              :class="[
+                'check',
+                {
+                  'is-checked':
+                    activeDevice?.audioOutputDevice &&
+                    item.value == activeDevice?.audioOutputDevice,
+                },
+              ]"
+            ></div>
+          </div>
+        </div>
+      </template>
+      <template v-else-if="dialogType === 'video'">
+        <div class="control-list">
+          <div class="control-list-title">摄像头</div>
+          <div
+            :class="[
+              'control-list-item',
+              {
+                'control-list-item-checked':
+                  activeDevice?.videoDevice && item.value == activeDevice?.videoDevice,
+              },
+            ]"
+            v-for="item of videoDevices"
+            :key="item.value"
+            @click="chooseVideoDevice(item)"
+          >
+            <div class="control-list-item-value" :title="item.label">{{ item.label }}</div>
+            <div
+              :class="[
+                'check',
+                {
+                  'is-checked':
+                    activeDevice?.videoDevice && item.value == activeDevice?.videoDevice,
+                },
+              ]"
+            ></div>
+          </div>
+        </div>
+        <!-- <div class="control-footer">
+          <div class="control-link" @click="detectCamera">视频选项</div>
+        </div> -->
+      </template>
+      <template v-else-if="dialogType === 'other'">
+        <div class="control-list">
+          <div
+            :class="[
+              'control-list-item',
+              {
+                'control-list-item-checked': currentRoomMode === item.value,
+              },
+            ]"
+            v-for="item of otherOptionList"
+            :key="item.value"
+            @click="chooseOtherItem(item)"
+          >
+            <div class="control-list-item-value">{{ item.label }}</div>
+            <!-- <div
+              :class="[
+                'check',
+                {
+                  'is-checked': currentRoomMode === item.value,
+                },
+              ]"
+            ></div> -->
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SelectDialog",
+  props: {
+    position: {
+      type: Object,
+      default: () => {
+        return {
+          left: "0px",
+          bottom: "30px",
+        };
+      },
+    },
+    dialogType: {
+      type: String,
+      default: "audio",
+    },
+    otherOptionList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            label: "会议模式",
+            value: "normal",
+          },
+          {
+            label: "点调模式",
+            value: "pointTurn",
+          },
+        ];
+      },
+    },
+    audioDevices: {
+      type: Array,
+      default: () => [],
+    },
+    outputDevices: {
+      type: Array,
+      default: () => [],
+    },
+    videoDevices: {
+      type: Array,
+      default: () => [],
+    },
+    activeDevice: {
+      type: Object,
+      default: () => ({}),
+    },
+    currentRoomMode: {
+      type: String,
+      default: "normal",
+    },
+  },
+  methods: {
+    chooseAudioInputDevice(item) {
+      this.$emit("chooseAudioInputDevice", item.value)
+      this.$emit('close')
+    },
+    chooseAudioOutputDevice(item) {
+      this.$emit("chooseAudioOutputDevice", item.value)
+      this.$emit('close')
+    },
+    chooseVideoDevice(item) {
+      this.$emit("chooseVideoDevice", item.value)
+      this.$emit('close')
+    },
+    chooseOtherItem(item) {
+      this.$emit("chooseOtherItem", item.value)
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.check-dialog {
+  width: 340px;
+  padding-bottom: 10px;
+  position: absolute;
+  z-index: 1000;
+  &-mini {
+    width: 110px;
+    .control-list-item-value {
+      text-align: center !important;
+    }
+  }
+  &-inner {
+    width: 100%;
+    background: var(--dialog-bg);
+    box-shadow: 0px 0px 8px 0px var(--dialog-shadow-color);
+    border-radius: 6px;
+    border: 1px solid var(--dialog-border-color);
+    padding: 4px 6px;
+    .control-list {
+      width: 100%;
+      font-weight: 400;
+      color: var(--theme-font-color);
+
+      &-title {
+        text-align: left;
+        font-size: 14px;
+        line-height: 22px;
+        margin-bottom: 19px;
+      }
+      &-item {
+        width: 100%;
+        height: 36px;
+        cursor: pointer;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        padding: 0 12px;
+        &-checked {
+          background: var(--dialog-item-hover);
+          border-radius: 4px;
+        }
+        &:hover {
+          background: var(--dialog-item-hover);
+          border-radius: 4px;
+        }
+        &-value {
+          width: 100%;
+          text-align: left;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .check {
+          width: 20px;
+          height: 20px;
+        }
+        .is-checked {
+          background: var(--dialog-item-checked-icon) no-repeat center / 100% 100%;
+        }
+        &:not(:last-child) {
+          margin-bottom: 8px;
+        }
+      }
+    }
+    .control-footer {
+      width: 100%;
+      padding: 10px 0 3px;
+      .control-link {
+        width: 100%;
+        text-align: left;
+        cursor: pointer;
+        white-space: nowrap;
+        color: #5fa7fd;
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>