mdm-client 1.0.0

package/src/components/MiniumVideoDialog/MiniumVideoDialog.vue

@@ -0,0 +1,449 @@
+<template>
+  <div 
+    class="minium-video-dialog" 
+    id="minium-video-dialog" 
+    ref="dialogRef" 
+    :style="{ resize: isResizeable ? 'both' : 'none' }"
+    @mouseenter="handleMouseEnter"
+    @mousemove="handleMouseMove"
+  >
+    <div class="minium-video-dialog-content" v-drag="'minium-video-dialog'">
+      <div class="video-content" v-show="isExpand">
+        <video class="cur-speaker-video" id="video-contain" muted></video>
+        <div class="describe" v-if="curSpeaker && curSpeaker.name">
+          <div
+            :class="[
+              'microphone',
+              curSpeakerMicrophoneStatus ? 'microphone-active' : 'microphone-inactive',
+            ]"
+          ></div>
+          <div class="identity">{{ curSpeaker.name }}</div>
+        </div>
+      </div>
+      <div class="speaking-wrapper" v-show="!isExpand">
+        <div :class="['cur-speaking-mic', curSpeakerMicrophoneStatus ? 'mic-on' : 'mic-off']"></div>
+        <div class="cur-speaking">
+          <div class="cur-speaking-title">正在讲话：</div>
+          <div class="cur-speaking-list">{{ speakersName }}</div>
+        </div>
+      </div>
+    </div>
+    <div 
+      :class="['minium-video-dialog-footer', {'show-footer': showFooter}]" 
+      v-drag="'minium-video-dialog'"
+    >
+      <div class="minium-video-dialog-footer-btn mic-on" v-if="localMicrophoneStatus" @click="changeLocalMicrophoneStatus"></div>
+      <div class="minium-video-dialog-footer-btn mic-off" v-else @click="changeLocalMicrophoneStatus"></div>
+      <div class="minium-video-dialog-footer-btn camera-on" v-if="localCameraStatus" @click="changeLocalCameraStatus"></div>
+      <div class="minium-video-dialog-footer-btn camera-off" v-else @click="changeLocalCameraStatus"></div>
+      <div class="minium-video-dialog-footer-btn reset" @click="reset"></div>
+      <div :class="['minium-video-dialog-footer-btn', isExpand ? 'slide' : 'expand']" @click="changeExpand"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniumVideoDialog',
+  props: {
+    isResizeable: {
+      type: Boolean,
+      default: true,
+    },
+    trackData: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      isExpand: true,
+      curSpeakers: [],
+      curSpeaker: null,
+      localCameraStatus: false,
+      localMicrophoneStatus: false,
+      curSpeakerMicrophoneStatus: false,
+      curSpeakerCameraStatus: false,
+      curSpeakerTrack: null,
+      showFooter: false,
+      footerTimer: null,
+    };
+  },
+  computed: {
+    speakersName() {
+      if (this.curSpeakers.length > 0) {
+        return this.curSpeakers.map((item) => item.name).join(",");
+      }
+      return "";
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.setInitialPosition();
+    });
+    this.initLiveClient();
+  },
+  beforeDestroy() {
+    this.clearFooterTimer();
+    this.dispatchLiveClientEvent();
+  },
+  methods: {
+    changeExpand() {
+      const dialog = document.getElementById('minium-video-dialog');
+      if (!dialog) {
+        this.isExpand = !this.isExpand;
+        return;
+      }
+      
+      // 记录当前状态和高度
+      const wasExpanded = this.isExpand;
+      const currentHeight = dialog.offsetHeight;
+      
+      // 切换状态
+      this.isExpand = !this.isExpand;
+      
+      // 等待DOM更新后调整位置
+      this.$nextTick(() => {
+        const newHeight = dialog.offsetHeight;
+        const heightDifference = currentHeight - newHeight;
+        
+        // 获取当前的transform值
+        const currentTransform = dialog.style.transform;
+        
+        if (currentTransform) {
+          // 解析当前的translate值
+          const transformMatch = currentTransform.match(/translate\(([^,]+),\s*([^)]+)\)/);
+          if (transformMatch) {
+            const currentX = parseFloat(transformMatch[1]);
+            const currentY = parseFloat(transformMatch[2]);
+            
+            // 调整Y位置以保持底部对齐
+            const newY = currentY + heightDifference;
+            
+            // 确保不会超出屏幕顶部
+            const finalY = Math.max(20, newY);
+            
+            // 设置新的transform值
+            dialog.style.transform = `translate(${currentX}px, ${finalY}px)`;
+          }
+        }
+      });
+    },
+
+    // 初始化liveClient
+    initLiveClient() {
+      const liveClient = window['liveClient'];
+      if(!liveClient) {
+        return;
+      }
+      this.curSpeaker = {
+        identity: liveClient.room.localParticipant.identity,
+        name: liveClient.room.localParticipant.name,
+      };
+      this.localCameraStatus = liveClient.room.localParticipant.isCameraEnabled;
+      this.localMicrophoneStatus = liveClient.room.localParticipant.isMicrophoneEnabled;
+      this.curSpeakerMicrophoneStatus = liveClient.room.localParticipant.isMicrophoneEnabled;
+      this.curSpeakerCameraStatus = liveClient.room.localParticipant.isCameraEnabled;
+      this.curSpeakerTrack = this.trackData.videoTrack;
+      // 初始化视频轨道绑定
+      this.initVideoAttach();
+      // 监听并处理liveclient事件
+      this.initLiveClientEvent();
+    },
+
+    // 设置初始位置
+    setInitialPosition() {
+      const dialog = document.getElementById('minium-video-dialog');
+      if (dialog) {
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const dialogWidth = dialog.offsetWidth;
+        const dialogHeight = dialog.offsetHeight;
+        
+        // 计算右上角位置，保留20px边距
+        const rightPosition = windowWidth - dialogWidth - 20;
+        const topPosition = 20;
+        
+        // 设置transform属性
+        dialog.style.transform = `translate(${rightPosition}px, ${topPosition}px)`;
+      }
+    },
+
+    // 重置位置
+    resetPosition() {
+      this.setInitialPosition();
+    },
+
+    // 鼠标移入事件处理
+    handleMouseEnter() {
+      this.showFooter = true;
+      this.resetFooterTimer();
+    },
+
+    // 鼠标移动事件处理
+    handleMouseMove() {
+      this.showFooter = true;
+      this.resetFooterTimer();
+    },
+
+    // 重置footer定时器
+    resetFooterTimer() {
+      this.clearFooterTimer();
+      this.footerTimer = setTimeout(() => {
+        this.showFooter = false;
+      }, 2000);
+    },
+
+    initVideoAttach() {
+      if(this.curSpeakerTrack) {
+        const videoElm = document.getElementById('video-contain');
+        videoElm && this.curSpeakerTrack.attach(videoElm);
+      }
+    },
+
+    initLiveClientEvent() {
+      const liveClient = window['liveClient'];
+      if(!liveClient) {
+        return;
+      }
+      liveClient.on("localCameraChange", this.handleLocalCameraChange);
+      liveClient.on("localMicrophoneChange", this.handleLocalMicrophoneChange);
+      liveClient.on("activeSpeakerChange", this.handleActiveSpeakerChange);
+      liveClient.on("videoCallRender", this.handleVideoCallRender);
+      liveClient.on("roomDisconnected", this.handleRoomDisconnected);
+    },
+
+    handleLocalCameraChange(e) {
+      this.localCameraStatus = e;
+    },
+
+    handleLocalMicrophoneChange(e) {
+      this.localMicrophoneStatus = e;
+    },
+
+    handleActiveSpeakerChange(e) {
+      if (e.length > 0) {
+        let maxAudioLevel = 0;
+        let maxAudioLevelIndex = -1;
+        e.forEach((speaker, index) => {
+          if (speaker.audioLevel > maxAudioLevel) {
+            maxAudioLevel = speaker.audioLevel;
+            maxAudioLevelIndex = index;
+          }
+        });
+        if (maxAudioLevelIndex >= 0) {
+          this.curSpeaker = e[maxAudioLevelIndex];
+        }
+        this.curSpeakers = e;
+      }
+    },
+
+    handleVideoCallRender(e) {
+      if(e.local) {
+        this.localCameraStatus = e.isCameraEnabled;
+        this.localMicrophoneStatus = e.isMicrophoneEnabled;
+      }
+      if(e.identity === this.curSpeaker?.identity) {
+        this.curSpeakerCameraStatus = e.isCameraEnabled;
+        this.curSpeakerMicrophoneStatus = e.isMicrophoneEnabled;
+        if(e?.videoTrack) {
+          this.curSpeakerTrack = e.videoTrack;
+        }
+      }
+    },
+
+    handleRoomDisconnected() {
+      this.$emit('miniVideoDialogClose');
+    },
+
+    reset() {
+      this.$emit('resetMultiDialog');
+    },
+
+    dispatchLiveClientEvent() {
+      const liveClient = window['liveClient'];
+      if(liveClient) {
+        liveClient.off("localCameraChange", this.handleLocalCameraChange);
+        liveClient.off("localMicrophoneChange", this.handleLocalMicrophoneChange);
+        liveClient.off("activeSpeakerChange", this.handleActiveSpeakerChange);
+        liveClient.off("videoCallRender", this.handleVideoCallRender);
+        liveClient.off("roomDisconnected", this.handleRoomDisconnected);
+      }
+    },
+
+    async changeLocalMicrophoneStatus() {
+      const liveClient = window['liveClient'];
+      if(liveClient) {
+        await liveClient.changeMicrophoneStatus();
+      }
+    },
+
+    async changeLocalCameraStatus() { 
+      const liveClient = window['liveClient'];
+      if(liveClient) {
+        await liveClient.changeCameraStatus();
+      }
+    },
+
+    clearFooterTimer() {
+      if (this.footerTimer) {
+        clearTimeout(this.footerTimer);
+        this.footerTimer = null;
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.minium-video-dialog {
+  width: 320px;
+  height: fit-content;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2001;
+  background: var(--dialog-bg);
+  border-radius: 4px;
+  overflow: hidden;
+  transform: translate(0, 0);
+  &-content {
+    min-height: 40px;
+    height: auto;
+    position: relative;
+    .video-content {
+      position: relative;
+      .cur-speaker-video {
+        width: 100%;
+        height: 190px;
+        border-radius: 4px;
+        object-fit: contain;
+      }
+      .describe {
+        position: absolute;
+        bottom: 6px;
+        left: 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: url("@/assets/image/common/call_user_mic_on_icon.png") no-repeat center /
+              100% 100%;
+          }
+          &-inactive {
+            background: url("@/assets/image/common/call_user_mic_off_icon.png") no-repeat center /
+              100% 100%;
+          }
+        }
+        .identity {
+          white-space: nowrap;
+          font-weight: 400;
+          font-size: 14px;
+          color: var(--theme-font-color);
+        }
+      }
+    }
+    .speaking-wrapper {
+      height: 40px;
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      padding: 0 10px;
+      .cur-speaking-mic {
+        width: 11px;
+        height: 16px;
+        margin-right: 20px;
+        flex: 1 0;
+        &.mic-on {
+          background: url("@/assets/image/common/call_user_mic_on_icon.png") no-repeat center /
+            100% 100%;
+        }
+        &.mic-off {
+          background: url("@/assets/image/common/call_user_mic_off_icon.png") no-repeat center /
+            100% 100%;
+        }
+      }
+      .cur-speaking {
+        width: calc(100% - 11px - 20px);
+        color: var(--theme-font-color);
+        font-size: 14px;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        &-title {
+          width: fit-content;
+          white-space: nowrap;
+          flex: 0 0;
+        }
+        &-list {
+          flex: 1 0;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+  &-footer {
+    position: absolute;
+    z-index: 100;
+    bottom: -40px; /* 默认隐藏在底部外 */
+    left: 0;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    transition: bottom 0.3s ease-in-out;
+    justify-content: space-evenly;
+    background: rgba(0,0,0,0.4);
+    
+    &.show-footer {
+      bottom: 0; /* 显示时滑入 */
+    }
+    
+    &-btn {
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      &.mic-on {
+        background: url("@/assets/image/common/minum_mic_on_icon.png") no-repeat center /
+          100% 100%;
+      }
+      &.mic-off {
+        background: url("@/assets/image/common/minum_mic_off_icon.png") no-repeat center /
+          100% 100%;
+      }
+      &.camera-on {
+        background: url("@/assets/image/common/minum_cam_on_icon.png") no-repeat center /
+          100% 100%;
+      }
+      &.camera-off {
+        background: url("@/assets/image/common/minum_cam_off_icon.png") no-repeat center /
+          100% 100%;
+      }
+      &.reset {
+        background: url("@/assets/image/common/minum_reset_icon.png") no-repeat center /
+          100% 100%;
+      }
+      &.expand {
+        background: url("@/assets/image/common/minum_expand_icon.png") no-repeat center /
+          100% 100%;
+      }
+      &.slide {
+        background: url("@/assets/image/common/minum_slide_icon.png") no-repeat center /
+          100% 100%;
+      }
+    }
+  }
+}
+</style>

package/src/components/other/LayoutPlaceholder.vue

@@ -0,0 +1,184 @@
+<template>
+  <div 
+    class="layout-placeholder"
+    :class="{ 
+      'has-member': !!member,
+      'is-hover': isHover
+    }"
+    :style="gridAreaStyle"
+  >
+    <!-- 占位符状态 -->
+    <div v-if="!member" class="placeholder-empty"></div>
+    
+    <!-- 成员状态 -->
+    <div v-else class="placeholder-member">
+      <!-- 关闭按钮 - 右上角 -->
+      <div class="close-btn" @click="handleClose">
+        <div class="close-icon"></div>
+      </div>
+      
+      <!-- 成员头像 - 中间 -->
+      <div class="member-avatar">
+      </div>
+      
+      <!-- 成员名称 - 左下角 -->
+      <div class="member-name">{{ member.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LayoutPlaceholder",
+  props: {
+    index: {
+      type: Number,
+      required: true
+    },
+    member: {
+      type: Object,
+      default: null
+    },
+    layoutType: {
+      type: String,
+      default: 'grid4'
+    },
+    isHover: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    gridAreaStyle() {
+      if (this.layoutType === 'ring') {
+        const areaMap = {
+          1: 'main',
+          2: 'slot1',
+          3: 'slot2',
+          4: 'slot3',
+          5: 'slot4',
+          6: 'slot5',
+          7: 'slot6',
+          8: 'slot7'
+        };
+        return {
+          gridArea: areaMap[this.index]
+        };
+      } else if (this.layoutType === 'topSide') {
+        const areaMap = {
+          1: 'main',    // 下方焦点位置
+          2: 'slot2',   // 上排左侧
+          3: 'slot3',   // 上排中间
+          4: 'slot4'    // 上排右侧
+        };
+        return {
+          gridArea: areaMap[this.index]
+        };
+      } else if (this.layoutType === 'rightSide') {
+        const areaMap = {
+          1: 'main',    // 左侧焦点位置
+          2: 'slot2',   // 右侧上方
+          3: 'slot3',   // 右侧中间
+          4: 'slot4'    // 右侧下方
+        };
+        return {
+          gridArea: areaMap[this.index]
+        };
+      }
+      return {};
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('clear');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.layout-placeholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  
+  &.is-hover {
+    border: 2px dashed var(--theme-color);
+    background: rgba(1, 132, 255, 0.15);
+    transform: scale(1.02);
+    box-shadow: 0 2px 8px rgba(1, 132, 255, 0.3);
+  }
+  
+  .placeholder-empty {
+    width: 100%;
+    height: 100%;
+    background: var(--custom-layout-placeholder-bg) no-repeat center / cover;
+    border-radius: 4px;
+  }
+  
+  .placeholder-member {
+    width: 100%;
+    height: 100%;
+    background: var(--custom-layout-placeholder-bg) no-repeat center / cover;
+    border-radius: 4px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    .close-btn {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 20px;
+      height: 20px;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 10;
+      transition: background 0.2s ease;
+      
+      &:hover {
+        background: rgba(0, 0, 0, 0.7);
+      }
+      
+      .close-icon {
+        width: 10px;
+        height: 10px;
+        background: var(--close-icon) no-repeat center / contain;
+      }
+    }
+    
+    .member-avatar {
+      width: auto;
+      height: 30%;
+      aspect-ratio: 1/1;
+      background: var(--custom-layout-user-avatar) no-repeat center / cover;
+      border-radius: 50%;
+    }
+    
+    .member-name {
+      position: absolute;
+      bottom: 8px;
+      left: 8px;
+      color: var(--theme-font-color);
+      font-size: 12px;
+      font-weight: 400;
+      font-family: var(--main-font);
+      background: var(--custom-layout-des-bg);
+      padding: 2px 6px;
+      border-radius: 4px;
+      max-width: calc(100% - 16px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>