@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.5.0

package/es/components/ManageMember/index.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, withDirectives, isRef, unref, vModelText, withCtx, toDisplayString, normalizeClass, createCommentVNode, Fragment, renderList, createBlock, createTextVNode } from "vue";
+import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, withDirectives, isRef, unref, vModelText, withCtx, toDisplayString, normalizeClass, createCommentVNode, Fragment, renderList, createBlock, createTextVNode, vShow } from "vue";
 import { storeToRefs } from "pinia";
 import MemberItem from "./MemberItem/index.vue.mjs";
 import SvgIcon from "../common/base/SvgIcon.vue.mjs";
@@ -9,6 +9,8 @@ import Dialog from "../common/base/Dialog/index.vue.mjs";
 import { useRoomStore } from "../../stores/room.mjs";
 import useIndex from "./useIndexHooks.mjs";
 import TuiButton from "../common/base/Button.vue.mjs";
+import ArrowUpIcon from "../common/icons/ArrowUpIcon.vue.mjs";
+import vClickOutside from "../../directives/vClickOutside.mjs";
 const _hoisted_1 = { class: "manage-member-container" };
 const _hoisted_2 = { class: "manage-member-header" };
 const _hoisted_3 = { class: "search-container" };
@@ -27,14 +29,18 @@ const _hoisted_9 = {
   key: 2,
   class: "global-setting"
 };
+const _hoisted_10 = { class: "more-container" };
+const _hoisted_11 = {
+  class: /* @__PURE__ */ normalizeClass(["tui-theme-white", "drop-down"])
+};
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = { class: "operate-text" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
     const roomStore = useRoomStore();
     const {
       applyToAnchorList,
-      isMicrophoneDisableForAllUser,
-      isCameraDisableForAllUser,
       isGeneralUser
     } = storeToRefs(roomStore);
     const {
@@ -53,8 +59,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       filteredUserList,
       isOnStateTabActive,
       handleToggleStaged,
-      applyToAnchorUserContent
+      applyToAnchorUserContent,
+      audioManageInfo,
+      videoManageInfo,
+      toggleClickMoreBtn,
+      showMoreControl,
+      moreControlList
     } = useIndex();
+    const handleShowMoreControl = () => {
+      if (showMoreControl.value) {
+        showMoreControl.value = false;
+      }
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
@@ -122,7 +138,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: _cache[3] || (_cache[3] = ($event) => unref(toggleManageAllMember)(unref(ManageControlType).AUDIO))
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(isMicrophoneDisableForAllUser) ? unref(t)("Enable all audios") : unref(t)("Disable all audios")), 1)
+              createTextVNode(toDisplayString(unref(audioManageInfo)), 1)
             ]),
             _: 1
           }),
@@ -132,10 +148,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: _cache[4] || (_cache[4] = ($event) => unref(toggleManageAllMember)(unref(ManageControlType).VIDEO))
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(isCameraDisableForAllUser) ? unref(t)("Enable all videos") : unref(t)("Disable all videos")), 1)
+              createTextVNode(toDisplayString(unref(videoManageInfo)), 1)
             ]),
             _: 1
-          })
+          }),
+          withDirectives((openBlock(), createElementBlock("div", _hoisted_10, [
+            createVNode(TuiButton, {
+              class: "button",
+              size: "default",
+              onClick: unref(toggleClickMoreBtn)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("More")) + " ", 1),
+                createVNode(SvgIcon, {
+                  size: "12",
+                  class: normalizeClass(["more-arrow", unref(showMoreControl) ? "up" : "down"]),
+                  icon: ArrowUpIcon
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            }, 8, ["onClick"]),
+            withDirectives(createElementVNode("div", _hoisted_11, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(moreControlList), (item) => {
+                return openBlock(), createElementBlock("div", {
+                  key: item.type,
+                  class: "user-operate-item",
+                  onClick: ($event) => item.func(item.type)
+                }, [
+                  createVNode(SvgIcon, {
+                    icon: item.icon
+                  }, null, 8, ["icon"]),
+                  createElementVNode("span", _hoisted_13, toDisplayString(item.title), 1)
+                ], 8, _hoisted_12);
+              }), 128))
+            ], 512), [
+              [vShow, unref(showMoreControl)]
+            ])
+          ])), [
+            [unref(vClickOutside), handleShowMoreControl]
+          ])
         ])) : createCommentVNode("", true),
         createVNode(Dialog, {
           modelValue: unref(showManageAllUserDialog),

package/es/components/ManageMember/useIndexHooks.mjs

@@ -8,6 +8,8 @@ import { TUIMediaDevice } from "@tencentcloud/tuiroom-engine-electron";
 import renderMsg from "../common/base/Message/Message.mjs";
 import { MESSAGE_DURATION } from "../../constants/message.mjs";
 import { isMobile } from "../../utils/environment.mjs";
+import AllMembersShareScreenIcon from "../common/icons/AllMembersShareScreenIcon.vue.mjs";
+import HostShareScreenIcon from "../common/icons/HostShareScreenIcon.vue.mjs";
 function useIndex() {
   const roomEngine = useGetRoomEngine();
   const { t } = useI18n();
@@ -17,10 +19,18 @@ function useIndex() {
     userList,
     anchorUserList,
     applyToAnchorList,
-    isOnStateTabActive
+    isOnStateTabActive,
+    generalUserScreenStreamList
   } = storeToRefs(roomStore);
+  let ManageControlType;
+  ((ManageControlType2) => {
+    ManageControlType2["AUDIO"] = "audio";
+    ManageControlType2["VIDEO"] = "video";
+    ManageControlType2["SCREEN"] = "screen";
+  })(ManageControlType || (ManageControlType = {}));
   const audienceUserList = computed(() => userList.value.filter((user) => !anchorUserList.value.includes(user)));
   const searchText = ref("");
+  const showMoreControl = ref(false);
   function handleToggleStaged() {
     isOnStateTabActive.value = !isOnStateTabActive.value;
     roomStore.setOnStageTabStatus(isOnStateTabActive.value);
@@ -36,8 +46,8 @@ function useIndex() {
       return list;
     }
     return list.filter((item) => {
-      var _a;
-      return ((_a = item.userName) == null ? void 0 : _a.includes(searchText.value)) || item.userId.includes(searchText.value);
+      var _a, _b;
+      return ((_a = item.nameCard) == null ? void 0 : _a.includes(searchText.value)) || ((_b = item.userName) == null ? void 0 : _b.includes(searchText.value)) || item.userId.includes(searchText.value);
     });
   });
   const alreadyStaged = computed(() => `${t("Already on stage")} (${anchorUserList.value.length})`);
@@ -47,26 +57,31 @@ function useIndex() {
   }
   const audioManageInfo = computed(() => roomStore.isMicrophoneDisableForAllUser ? t("Lift all mute") : t("All mute"));
   const videoManageInfo = computed(() => roomStore.isCameraDisableForAllUser ? t("Lift stop all video") : t("All stop video"));
+  const moreControlList = computed(() => [
+    {
+      title: roomStore.isScreenShareDisableForAllUser ? t("All members can share screen") : t("Screen sharing for host/admin only"),
+      icon: roomStore.isScreenShareDisableForAllUser ? AllMembersShareScreenIcon : HostShareScreenIcon,
+      func: toggleManageAllMember,
+      type: "screen"
+      /* SCREEN */
+    }
+  ]);
   const showManageAllUserDialog = ref(false);
   const dialogContent = ref("");
   const dialogTitle = ref("");
   const dialogActionInfo = ref("");
   let stateForAllAudio = false;
   let stateForAllVideo = false;
-  let ManageControlType;
-  ((ManageControlType2) => {
-    ManageControlType2["AUDIO"] = "audio";
-    ManageControlType2["VIDEO"] = "video";
-  })(ManageControlType || (ManageControlType = {}));
+  let stateForScreenShare = false;
   const currentControlType = ref(
     "audio"
     /* AUDIO */
   );
   async function toggleManageAllMember(type) {
-    showManageAllUserDialog.value = true;
     currentControlType.value = type;
     switch (type) {
       case "audio":
+        showManageAllUserDialog.value = true;
         dialogTitle.value = roomStore.isMicrophoneDisableForAllUser ? t("Enable all audios") : t("All current and new members will be muted");
         dialogContent.value = roomStore.isMicrophoneDisableForAllUser ? t("After unlocking, users can freely turn on the microphone") : t("Members will not be able to open the microphone");
         stateForAllAudio = !roomStore.isMicrophoneDisableForAllUser;
@@ -74,15 +89,27 @@ function useIndex() {
         dialogActionInfo.value = audioManageInfo.value;
         break;
       case "video":
+        showManageAllUserDialog.value = true;
         dialogTitle.value = roomStore.isCameraDisableForAllUser ? t("Enable all videos") : t("All and new members will be banned from the camera");
         dialogContent.value = roomStore.isCameraDisableForAllUser ? t("After unlocking, users can freely turn on the camera") : t("Members will not be able to open the camera");
         stateForAllVideo = !roomStore.isCameraDisableForAllUser;
         await nextTick();
         dialogActionInfo.value = videoManageInfo.value;
         break;
+      case "screen":
+        stateForScreenShare = !roomStore.isScreenShareDisableForAllUser;
+        if (generalUserScreenStreamList.value.length === 0) {
+          toggleAllScreenShare();
+          break;
+        }
+        showManageAllUserDialog.value = true;
+        dialogTitle.value = t("Is it turned on that only the host/admin can share the screen?");
+        dialogContent.value = t("Other member is sharing the screen is now, the member's sharing will be terminated after you turning on");
+        break;
     }
   }
   async function doToggleManageAllMember() {
+    var _a;
     switch (currentControlType.value) {
       case "audio":
         toggleAllAudio();
@@ -90,9 +117,25 @@ function useIndex() {
       case "video":
         toggleAllVideo();
         break;
+      case "screen":
+        await ((_a = roomEngine.instance) == null ? void 0 : _a.closeRemoteDeviceByAdmin({
+          userId: generalUserScreenStreamList.value[0].userId,
+          device: TUIMediaDevice.kScreen
+        }));
+        toggleAllScreenShare();
+        break;
     }
     showManageAllUserDialog.value = false;
   }
+  async function toggleAllScreenShare() {
+    var _a;
+    await ((_a = roomEngine.instance) == null ? void 0 : _a.disableDeviceForAllUserByAdmin({
+      isDisable: stateForScreenShare,
+      device: TUIMediaDevice.kScreen
+    }));
+    roomStore.setDisableScreenShareForAllUserByAdmin(stateForScreenShare);
+    showMoreControl.value = false;
+  }
   function showApplyUserList() {
     if (isMobile) {
       basicStore.setSidebarOpenStatus(true);
@@ -116,7 +159,7 @@ function useIndex() {
       isDisable: stateForAllAudio,
       device: TUIMediaDevice.kMicrophone
     }));
-    roomStore.setMicrophoneDisableState(stateForAllAudio);
+    roomStore.setDisableMicrophoneForAllUserByAdmin(stateForAllAudio);
   }
   async function toggleAllVideo() {
     var _a;
@@ -133,17 +176,20 @@ function useIndex() {
       isDisable: stateForAllVideo,
       device: TUIMediaDevice.kCamera
     }));
-    roomStore.setCameraDisableState(stateForAllVideo);
+    roomStore.setDisableCameraForAllUserByAdmin(stateForAllVideo);
   }
   const applyToAnchorUserContent = computed(() => {
-    var _a, _b;
+    var _a, _b, _c;
     const lastIndex = applyToAnchorList.value.length - 1;
-    const userName = ((_a = applyToAnchorList.value[lastIndex]) == null ? void 0 : _a.userName) || ((_b = applyToAnchorList.value[lastIndex]) == null ? void 0 : _b.userId);
+    const userName = ((_a = applyToAnchorList.value[lastIndex]) == null ? void 0 : _a.nameCard) || ((_b = applyToAnchorList.value[lastIndex]) == null ? void 0 : _b.userName) || ((_c = applyToAnchorList.value[lastIndex]) == null ? void 0 : _c.userId);
     if (applyToAnchorList.value.length === 1) {
       return `${userName} ${t("Applying for the stage")}`;
     }
     return `${userName} ${t("and so on number people applying to stage", { number: applyToAnchorList.value.length })}`;
   });
+  function toggleClickMoreBtn() {
+    showMoreControl.value = !showMoreControl.value;
+  }
   return {
     showApplyUserList,
     searchText,
@@ -163,7 +209,10 @@ function useIndex() {
     filteredUserList,
     isOnStateTabActive,
     handleToggleStaged,
-    applyToAnchorUserContent
+    applyToAnchorUserContent,
+    toggleClickMoreBtn,
+    showMoreControl,
+    moreControlList
   };
 }
 export {

package/es/components/RoomContent/StreamContainer/index.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./index.vue2.mjs";
 import "./index.vue3.mjs";
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const StreamContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d8433998"]]);
+const StreamContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-06523284"]]);
 export {
   StreamContainer as default
 };

package/es/components/RoomContent/StreamContainer/index.vue2.mjs

@@ -5,13 +5,14 @@ import { useBasicStore } from "../../../stores/basic.mjs";
 import { LAYOUT } from "../../../constants/render.mjs";
 import StreamRegion from "../StreamRegion/index.vue.mjs";
 import renderMsg from "../../common/base/Message/Message.mjs";
+import MessageBox from "../../common/base/MessageBox/index.mjs";
 import { MESSAGE_DURATION } from "../../../constants/message.mjs";
 import { debounce } from "../../../utils/utils.mjs";
 import logger from "../../../utils/common/logger/index.mjs";
 import ArrowStroke from "../../common/ArrowStroke.vue.mjs";
 import SvgIcon from "../../common/base/SvgIcon.vue.mjs";
 import ArrowStrokeTurnPageIcon from "../../common/icons/ArrowStrokeTurnPageIcon.vue.mjs";
-import TUIRoomEngine, { TUIRoomEvents, TUIChangeReason, TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-electron";
+import TUIRoomEngine__default, { TUIRoomEvents, TUIChangeReason, TUIVideoStreamType } from "@tencentcloud/tuiroom-engine-electron";
 import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
 import useStreamContainer from "./useStreamContainerHooks.mjs";
 import "../../../services/main.mjs";
@@ -346,10 +347,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           roomStore.setCanControlSelfVideo(!roomStore.isCameraDisableForAllUser);
         }
         if (streamType === TUIVideoStreamType.kScreenStream) {
-          renderMsg({
-            type: "warning",
-            message: t("The host has turned off your screen sharing"),
-            duration: MESSAGE_DURATION.NORMAL
+          MessageBox({
+            title: t("Your screen sharing has been stopped"),
+            message: t("Your screen sharing has been stopped, Now only the host/admin can share the screen"),
+            confirmButtonText: t("I got it")
           });
         }
       }
@@ -403,8 +404,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const handleStreamContainerScroll = async () => {
-      const childDom = streamListRef.value.children[0];
       await nextTick();
+      const childDom = streamListRef.value.children[0];
       let index = 0;
       let finalIndex = 0;
       let number = 0;
@@ -447,7 +448,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onUnmounted(() => {
       streamListRef.value && streamListRef.value.removeEventListener("scroll", handleStreamContainerScrollDebounce);
     });
-    TUIRoomEngine.once("ready", () => {
+    TUIRoomEngine__default.once("ready", () => {
       var _a, _b, _c, _d, _e;
       (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEvents.onRemoteUserEnterRoom, onRemoteUserEnterRoom);
       (_b = roomEngine.instance) == null ? void 0 : _b.on(TUIRoomEvents.onRemoteUserLeaveRoom, onRemoteUserLeaveRoom);
@@ -500,8 +501,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "enlarge-dom-id": enlargeDomId.value,
                 class: "single-stream",
                 style: normalizeStyle(streamStyle.value),
-                onRoom_dblclick: ($event) => handleEnlargeStreamRegion(stream)
-              }, null, 8, ["stream", "enlarge-dom-id", "style", "onRoom_dblclick"])), [
+                onRoomDblclick: ($event) => handleEnlargeStreamRegion(stream)
+              }, null, 8, ["stream", "enlarge-dom-id", "style", "onRoomDblclick"])), [
                 [vShow, showStreamList.value.indexOf(stream) > -1]
               ]);
             }), 128))

package/es/components/RoomContent/StreamContainer/useStreamContainerHooks.d.ts

@@ -1,6 +1,10 @@
 import { TUIChangeReason, TUIUserInfo } from '@tencentcloud/tuiroom-engine-electron';
+import { StreamInfo } from '../../../stores/room';
+import { Ref } from 'vue';
 
 export default function useStreamContainer(): {
+    currentRemoteSpeakerUserId: Ref<string>;
+    currentSpeakerUserId: Ref<string>;
     onRemoteUserEnterRoom: (eventInfo: {
         userInfo: TUIUserInfo;
     }) => void;
@@ -17,5 +21,9 @@ export default function useStreamContainer(): {
         hasAudio: boolean;
         reason: TUIChangeReason;
     }) => void;
+    onUserVoiceVolumeChanged: (eventInfo: {
+        userVolumeList: any[];
+    }) => void;
+    isSameStream: (stream1: StreamInfo | null, stream2: StreamInfo | null) => boolean;
     t: any;
 };

package/es/components/RoomContent/StreamContainer/useStreamContainerHooks.mjs

@@ -1,4 +1,4 @@
-import { watch } from "vue";
+import { ref, watch } from "vue";
 import useGetRoomEngine from "../../../hooks/useRoomEngine.mjs";
 import { useRoomStore } from "../../../stores/room.mjs";
 import { TUIMediaDeviceType, TUIChangeReason } from "@tencentcloud/tuiroom-engine-electron";
@@ -8,16 +8,20 @@ import { useBasicStore } from "../../../stores/basic.mjs";
 import { MESSAGE_DURATION } from "../../../constants/message.mjs";
 import { storeToRefs } from "pinia";
 import { isWeChat, isMobile } from "../../../utils/environment.mjs";
-import logger from "../../../utils/common/logger/index.mjs";
 import { SMALL_VIDEO_ENC_PARAM } from "../../../constants/room.mjs";
 import useDeviceManager from "../../../hooks/useDeviceManager.mjs";
-const logPrefix = "[StreamContainer]";
+import { throttle } from "../../../utils/utils.mjs";
+import { LAYOUT } from "../../../constants/render.mjs";
 function useStreamContainer() {
   const roomEngine = useGetRoomEngine();
   const basicStore = useBasicStore();
   const roomStore = useRoomStore();
+  const { layout } = storeToRefs(basicStore);
+  const { localStream } = storeToRefs(roomStore);
   const { t } = useI18n();
   const { deviceManager } = useDeviceManager();
+  const currentRemoteSpeakerUserId = ref("");
+  const currentSpeakerUserId = ref("");
   const onRemoteUserEnterRoom = (eventInfo) => {
     roomStore.addRemoteUser(eventInfo.userInfo);
   };
@@ -40,53 +44,88 @@ function useStreamContainer() {
       roomStore.setCanControlSelfAudio(!roomStore.isMicrophoneDisableForAllUser);
     }
   };
+  function handleUserVoiceVolume(userVolumeList) {
+    const localUserVolume = {
+      userId: basicStore.userId,
+      volume: 0
+    };
+    const largestRemoteUserVolume = {
+      userId: "",
+      volume: 0
+    };
+    userVolumeList.forEach((item) => {
+      var _a;
+      if (item.userId === basicStore.userId && localStream.value.hasAudioStream) {
+        localUserVolume.volume = item.volume;
+      } else if (item.userId !== basicStore.userId && ((_a = roomStore.remoteUserObj[item.userId]) == null ? void 0 : _a.hasAudioStream)) {
+        const { userId, volume } = item;
+        if (volume > largestRemoteUserVolume.volume) {
+          largestRemoteUserVolume.userId = userId;
+          largestRemoteUserVolume.volume = volume;
+        }
+      }
+    });
+    const largestUserVolume = localUserVolume.volume > largestRemoteUserVolume.volume ? localUserVolume : largestRemoteUserVolume;
+    if (currentRemoteSpeakerUserId.value) {
+      const lastRemoteSpeakerUserVolumeInfo = userVolumeList.find((item) => item.userId === currentRemoteSpeakerUserId.value);
+      if (!lastRemoteSpeakerUserVolumeInfo || lastRemoteSpeakerUserVolumeInfo.volume === 0) {
+        if (largestRemoteUserVolume.volume > 0) {
+          currentRemoteSpeakerUserId.value = largestRemoteUserVolume.userId;
+        }
+      }
+    } else {
+      if (largestRemoteUserVolume.volume > 0) {
+        currentRemoteSpeakerUserId.value = largestRemoteUserVolume.userId;
+      }
+    }
+    if (currentSpeakerUserId.value) {
+      const lastSpeakerUserVolumeInfo = userVolumeList.find((item) => item.userId === currentSpeakerUserId.value);
+      if (!lastSpeakerUserVolumeInfo || lastSpeakerUserVolumeInfo.volume === 0) {
+        if (largestUserVolume.volume > 0) {
+          currentSpeakerUserId.value = largestUserVolume.userId;
+        }
+      }
+    } else {
+      if (largestUserVolume.volume > 0) {
+        currentSpeakerUserId.value = largestUserVolume.userId;
+      }
+    }
+  }
+  const handleUserVoiceVolumeThrottle = throttle(handleUserVoiceVolume, 1e3);
+  const onUserVoiceVolumeChanged = (eventInfo) => {
+    const { userVolumeList } = eventInfo;
+    if (layout.value === LAYOUT.LARGE_SMALL_WINDOW) {
+      handleUserVoiceVolumeThrottle(userVolumeList);
+    }
+  };
   const {
     isDefaultOpenCamera,
     isDefaultOpenMicrophone
   } = storeToRefs(roomStore);
   watch(isDefaultOpenCamera, async (val) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f;
     if (val) {
       if (isWeChat) {
-        await ((_a = roomEngine.instance) == null ? void 0 : _a.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`
-        }));
-        await ((_b = roomEngine.instance) == null ? void 0 : _b.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera }));
+        await ((_a = roomEngine.instance) == null ? void 0 : _a.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera }));
       } else if (isMobile) {
-        const previewDom = document == null ? void 0 : document.getElementById(`${roomStore.localStream.userId}_${roomStore.localStream.streamType}`);
-        if (!previewDom) {
-          logger.error(`${logPrefix}watch isDefaultOpenCamera:`, isDefaultOpenCamera, previewDom);
-          return;
-        }
-        await ((_c = roomEngine.instance) == null ? void 0 : _c.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`
-        }));
-        const trtcCloud = (_d = roomEngine.instance) == null ? void 0 : _d.getTRTCCloud();
+        const trtcCloud = (_b = roomEngine.instance) == null ? void 0 : _b.getTRTCCloud();
         trtcCloud == null ? void 0 : trtcCloud.enableSmallVideoStream(false, SMALL_VIDEO_ENC_PARAM);
-        await ((_e = roomEngine.instance) == null ? void 0 : _e.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera }));
+        await ((_c = roomEngine.instance) == null ? void 0 : _c.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera }));
         return;
       } else {
-        const previewDom = document == null ? void 0 : document.getElementById(`${roomStore.localStream.userId}_${roomStore.localStream.streamType}`);
-        if (!previewDom) {
-          logger.error(`${logPrefix}watch isDefaultOpenCamera:`, isDefaultOpenCamera, previewDom);
-          return;
-        }
         if (!roomStore.currentCameraId) {
-          const cameraList = await ((_f = deviceManager.instance) == null ? void 0 : _f.getDevicesList({
+          const cameraList = await ((_d = deviceManager.instance) == null ? void 0 : _d.getDevicesList({
             type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera
           }));
           if (cameraList && cameraList.length > 0) {
             roomStore.setCurrentCameraId(cameraList[0].deviceId);
           }
         }
-        await ((_g = deviceManager.instance) == null ? void 0 : _g.setCurrentDevice({
+        await ((_e = deviceManager.instance) == null ? void 0 : _e.setCurrentDevice({
           type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera,
           deviceId: roomStore.currentCameraId
         }));
-        await ((_h = roomEngine.instance) == null ? void 0 : _h.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`
-        }));
-        await ((_i = roomEngine.instance) == null ? void 0 : _i.openLocalCamera());
+        await ((_f = roomEngine.instance) == null ? void 0 : _f.openLocalCamera());
       }
     }
   }, { immediate: true });
@@ -115,11 +154,16 @@ function useStreamContainer() {
       await ((_f = roomEngine.instance) == null ? void 0 : _f.muteLocalAudio());
     }
   }, { immediate: true });
+  const isSameStream = (stream1, stream2) => `${stream1 == null ? void 0 : stream1.userId}_${stream1 == null ? void 0 : stream1.streamType}` === `${stream2 == null ? void 0 : stream2.userId}_${stream2 == null ? void 0 : stream2.streamType}`;
   return {
+    currentRemoteSpeakerUserId,
+    currentSpeakerUserId,
     onRemoteUserEnterRoom,
     onRemoteUserLeaveRoom,
     onSeatListChanged,
     onUserAudioStateChanged,
+    onUserVoiceVolumeChanged,
+    isSameStream,
     t
   };
 }

package/es/components/RoomContent/StreamRegion/index.vue.d.ts

@@ -5,7 +5,11 @@ interface Props {
     enlargeDomId?: string;
     changeLargeStream?: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "room-dblclick": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+    "onRoom-dblclick"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/es/components/RoomContent/StreamRegion/index.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./index.vue2.mjs";
 import "./index.vue3.mjs";
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const StreamRegion = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f3b29630"]]);
+const StreamRegion = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d119ad48"]]);
 export {
   StreamRegion as default
 };

package/es/components/RoomContent/StreamRegion/index.vue2.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch, nextTick, openBlock, createElementBlock, createBlock, Fragment, createVNode, createCommentVNode, createElementVNode, normalizeClass, toDisplayString, unref } from "vue";
 import { useRoomStore } from "../../../stores/room.mjs";
-import Avatar from "../../common/Avatar.vue.mjs";
+import TuiAvatar from "../../common/Avatar.vue.mjs";
 import { useBasicStore } from "../../../stores/basic.mjs";
 import logger from "../../../utils/common/logger/index.mjs";
 import AudioIcon from "../../common/AudioIcon.vue.mjs";
@@ -29,6 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     enlargeDomId: {},
     changeLargeStream: { type: Boolean }
   },
+  emits: ["room-dblclick"],
   setup(__props) {
     const roomEngine = useGetRoomEngine();
     const basicStore = useBasicStore();
@@ -53,10 +54,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isScreenStream = computed(() => props.stream.streamType === TUIVideoStreamType.kScreenStream);
     const userInfo = computed(() => {
       if (isInnerScene) {
-        return `${props.stream.userName} | ${props.stream.userId}` || props.stream.userId;
+        return `${props.stream.nameCard || props.stream.userName} | ${props.stream.userId}`;
       }
-      return props.stream.userName || props.stream.userId;
+      return props.stream.nameCard || props.stream.userName || props.stream.userId;
     });
+    watch(
+      () => props.stream.hasVideoStream,
+      async (val) => {
+        var _a, _b;
+        if (props.stream.userId === basicStore.userId && props.stream.streamType === TUIVideoStreamType.kCameraStream) {
+          if (val) {
+            await nextTick();
+            const userIdEl = document == null ? void 0 : document.getElementById(`${playRegionDomId.value}`);
+            if (userIdEl) {
+              logger.debug(`${logPrefix}watch isVideoStreamAvailable:`, props.stream.userId, userIdEl);
+              await ((_a = roomEngine.instance) == null ? void 0 : _a.setLocalVideoView({
+                view: `${playRegionDomId.value}`
+              }));
+            }
+          } else {
+            await ((_b = roomEngine.instance) == null ? void 0 : _b.setLocalVideoView({
+              view: null
+            }));
+          }
+        }
+      },
+      { immediate: true }
+    );
     const streamTypeToFetch = computed(() => {
       const { streamType, userId } = props.stream;
       const { kScreenStream, kCameraStream } = TUIVideoStreamType;
@@ -166,7 +190,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "streamRegionRef",
         ref: streamRegionRef,
         class: "user-stream-container",
-        onDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("room_dblclick"))
+        onDblclick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("room-dblclick"))
       }, [
         isLocalScreen.value ? (openBlock(), createBlock(LocalScreenStream, {
           key: 0,
@@ -188,7 +212,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref: centerUserInfoRef,
             class: "center-user-info-container"
           }, [
-            createVNode(Avatar, {
+            createVNode(TuiAvatar, {
               class: "avatar-region",
               "img-src": _ctx.stream.avatarUrl
             }, null, 8, ["img-src"])

package/es/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./index.vue2.mjs";
 import "./index.vue3.mjs";
 import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.mjs";
-const MasterApplyControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5e2dbb41"]]);
+const MasterApplyControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1d9fb310"]]);
 export {
   MasterApplyControl as default
 };