call-live-sdk1 0.0.20 → 0.0.22

package/dist/call-live-sdk.es.js

@@ -189243,7 +189243,7 @@ const useCallStore = create$c()(
         nickname,
         token: token2,
         device: isMobile$3 ? "mobile" : "pc",
-        videoList: [rtc_userid, rtc_userid + "screen", rtc_userid + "main"],
+        videoList: [rtc_userid, rtc_userid + "screen", rtc_userid + "main", rtc_userid + "self"],
         ...initCallUser,
         // 根据enter_muted配置设置初始音频状态
         // enter_muted: 0-否(音频开启) 1-是(音频关闭/静音)
@@ -189921,17 +189921,6 @@ const useCallStore = create$c()(
           isAudioEnabled,
           isAudioDisabled: isBanned ?? false
         });
-        if (rtc && rtc.engine) {
-          await rtc.engine.sendRoomMessage(
-            JSON.stringify({
-              type: "media",
-              data: {
-                media_type: "audio",
-                media_state: isAudioEnabled ? 1 : 0
-              }
-            })
-          );
-        }
         return {
           success: true,
           message: isAudioEnabled ? "麦克风已开启" : "麦克风已关闭",
@@ -189958,17 +189947,6 @@ const useCallStore = create$c()(
           isVideoEnabled: newVideoState,
           isVideoDisabled: isBanned ?? false
         });
-        if (rtc && rtc.engine) {
-          await rtc.engine.sendRoomMessage(
-            JSON.stringify({
-              type: "media",
-              data: {
-                media_type: "video",
-                media_state: newVideoState ? 1 : 0
-              }
-            })
-          );
-        }
         return {
           success: true,
           message: newVideoState ? "摄像头已开启" : "摄像头已关闭",
@@ -190182,7 +190160,7 @@ const useCallStore = create$c()(
       context.arc(avatarX + avatarRadius, avatarY + avatarRadius, avatarRadius, 0, 2 * Math.PI);
       context.fill();
       if (user && user.nickname) {
-        const firstLetter = user.nickname.charAt(0).toUpperCase();
+        const firstLetter = user.nickname.trim().charAt(0);
         context.fillStyle = "#ffffff";
         context.font = `${avatarSize * 0.5}px Arial`;
         context.textAlign = "center";
@@ -202729,6 +202707,185 @@ const DropdownButton = (props) => {
 DropdownButton.__ANT_BUTTON = true;
 const Dropdown = Dropdown$1;
 Dropdown.Button = DropdownButton;
+const useVideoSlotBinding = ({
+  item,
+  livePlayerRef,
+  fenge
+}) => {
+  const { callUsers, getter } = useCallStore();
+  const [selectedValue, setSelectedValue] = reactExports.useState(
+    item.objectType === "videoSlot" && item.userId && item.streamIndex ? `${item.userId}${fenge}${item.streamIndex}` : ""
+  );
+  reactExports.useEffect(() => {
+    if (item.objectType === "videoSlot" && item.userId && item.streamIndex) {
+      setSelectedValue(`${item.userId}${fenge}${item.streamIndex}`);
+    }
+  }, [item.userId, item.streamIndex, item.objectType, fenge]);
+  const targetUser = reactExports.useMemo(() => {
+    if (!selectedValue)
+      return void 0;
+    const userId = selectedValue.split(fenge)[0];
+    return callUsers.find((user) => user.rtc_userid === userId);
+  }, [selectedValue, fenge, callUsers]);
+  const handleStreamChange = (value, option) => {
+    var _a2, _b;
+    console.log("选择的视频槽:", value, option);
+    setSelectedValue(value);
+    if (!value) {
+      try {
+        if (!livePlayerRef.current) {
+          console.error("livePlayerRef未初始化");
+          return;
+        }
+        livePlayerRef.current.addEmptyVideoSlot({ id: item.id });
+        console.log("成功清除连麦嘉宾绑定状态");
+      } catch (error2) {
+        console.error("清除连麦嘉宾绑定状态失败:", error2);
+      }
+      return;
+    }
+    try {
+      const [userId, streamIndex] = String(value).split(fenge);
+      const canvas = getter().fabricInstance;
+      if (!canvas) {
+        console.error("画布未初始化");
+        return;
+      }
+      const videoSlotObj = ((_a2 = canvas.getObjects()) == null ? void 0 : _a2.find((o2) => o2.id === item.id)) || item;
+      canvas.setActiveObject(videoSlotObj);
+      const user = callUsers.find((user2) => user2.rtc_userid === userId);
+      if (!user) {
+        console.error("找不到用户:", userId);
+        return;
+      }
+      if (user.isVideoEnabled) {
+        livePlayerRef.current.bindVideoSlotToFirstEmpty({
+          id: item.id,
+          userId,
+          device: user.device,
+          streamIndex: streamIndex === "screen" ? "screen" : "main",
+          userName: targetUser == null ? void 0 : targetUser.nickname
+        });
+        if (videoSlotObj) {
+          videoSlotObj.userId = userId;
+          videoSlotObj.streamIndex = streamIndex;
+        }
+      } else {
+        const targetObj = (_b = canvas.getObjects()) == null ? void 0 : _b.find((o2) => o2.id === item.id);
+        if (targetObj) {
+          livePlayerRef.current.createCameraClosedPlaceholder(
+            { ...targetObj, streamIndex },
+            user
+          );
+        }
+      }
+    } catch (error2) {
+      console.error("绑定连麦嘉宾失败:", error2);
+    }
+  };
+  reactExports.useEffect(() => {
+    var _a2;
+    if (item.objectType !== "videoSlot" || !livePlayerRef.current)
+      return;
+    try {
+      const canvas = getter().fabricInstance;
+      if (!canvas) {
+        console.error("画布未初始化");
+        return;
+      }
+      const videoSlotObj = (_a2 = canvas.getObjects()) == null ? void 0 : _a2.find((o2) => o2.id === item.id);
+      if (!videoSlotObj) {
+        console.error("找不到对应的连麦嘉宾对象:", item.id);
+        return;
+      }
+      const [, streamIndex = "main"] = selectedValue.split(fenge);
+      if (!targetUser || streamIndex === "screen" && !targetUser.isScreenEnabled) {
+        console.log(`用户${item.userId}已退出，恢复为空连麦嘉宾`);
+        setSelectedValue("");
+        try {
+          livePlayerRef.current.addEmptyVideoSlot({ id: item.id });
+        } catch (error2) {
+          console.error("恢复空连麦嘉宾失败:", error2);
+        }
+        return;
+      }
+      console.log(
+        `${targetUser.nickname || targetUser.rtc_userid}摄像头状态变更为: ${targetUser.isVideoEnabled ? "开启" : "关闭"}`
+      );
+      if (targetUser.isVideoEnabled) {
+        try {
+          livePlayerRef.current.bindVideoSlotToFirstEmpty({
+            id: item.id,
+            userId: targetUser.rtc_userid,
+            streamIndex: streamIndex === "screen" ? "screen" : "main",
+            userName: targetUser.nickname
+          });
+          videoSlotObj.userId = targetUser.rtc_userid;
+          videoSlotObj.streamIndex = streamIndex;
+        } catch (bindError) {
+          console.error("绑定视频流失败:", bindError);
+        }
+      } else {
+        try {
+          livePlayerRef.current.createCameraClosedPlaceholder(
+            { ...videoSlotObj, streamIndex },
+            targetUser
+          );
+          videoSlotObj._cameraClosedPlaceholder = true;
+        } catch (placeholderError) {
+          console.error("创建摄像头关闭占位符失败:", placeholderError);
+        }
+      }
+    } catch (error2) {
+      console.error("监听嘉宾视频状态变化时发生错误:", error2);
+    }
+  }, [targetUser, targetUser == null ? void 0 : targetUser.isVideoEnabled, targetUser == null ? void 0 : targetUser.isPublishStream, item.userId, item.id, selectedValue, fenge, livePlayerRef, getter]);
+  return {
+    selectedValue,
+    setSelectedValue,
+    targetUser,
+    handleStreamChange
+  };
+};
+const useVideoSlotStreams = () => {
+  const { callUsers, callConfig } = useCallStore();
+  const fenge = '-":}{_+';
+  const availableStreams = reactExports.useMemo(
+    () => callUsers.flatMap((user) => {
+      const list = [];
+      if (user.waiting_mode_state === WaitingModeState.WAITING) {
+        return list;
+      }
+      if (user.rtc_userid === (callConfig == null ? void 0 : callConfig.drawing_board_id)) {
+        return list;
+      }
+      list.push({
+        label: `${user.nickname || user.rtc_userid} · 摄像头`,
+        value: `${user.rtc_userid}${fenge}main`,
+        isVideoEnabled: user.isVideoEnabled,
+        rtc_userid: user.rtc_userid,
+        nickname: user.nickname,
+        isScreenEnabled: user.isScreenEnabled
+      });
+      if (user == null ? void 0 : user.isScreenEnabled) {
+        list.push({
+          label: `${user.nickname || user.rtc_userid} · 屏幕共享`,
+          value: `${user.rtc_userid}${fenge}screen`,
+          isVideoEnabled: user.isScreenEnabled,
+          rtc_userid: user.rtc_userid,
+          nickname: user.nickname,
+          isScreenEnabled: user.isScreenEnabled
+        });
+      }
+      return list;
+    }),
+    [callUsers, callConfig == null ? void 0 : callConfig.drawing_board_id]
+  );
+  return {
+    availableStreams,
+    fenge
+  };
+};
 const {
   useToken: useToken$2
 } = theme;
@@ -202753,31 +202910,32 @@ const MetaItem = ({
     setFabricObjects,
     setDocumentInfo,
     scenes,
-    currentScene
-  } = useCallStore();
-  const {
-    callUsers,
-    getter,
-    callConfig
+    currentScene,
+    callConfig,
+    getter
   } = useCallStore();
   const [items, setItems] = reactExports.useState(item);
   const [isHoveredId, setIsHoveredId] = reactExports.useState(null);
+  const [itemKeyColor, setItemKeyColor] = reactExports.useState((_a2 = item == null ? void 0 : item.chromaKeyOptions) == null ? void 0 : _a2.keyColor);
   reactExports.useEffect(() => {
     setItems(item);
   }, [item]);
+  const videoSlotStreams = useVideoSlotStreams();
+  const videoSlotBinding = useVideoSlotBinding({
+    item,
+    livePlayerRef,
+    fenge: videoSlotStreams.fenge
+  });
   const isMutedRef = reactExports.useRef(true);
   const [isMuted, setIsMuted] = reactExports.useState(true);
   const [isLoop, setIsLoop] = reactExports.useState(false);
-  const fenge = '-":}{_+';
-  const [selectedValue, setSelectedValue] = reactExports.useState(item.objectType === "videoSlot" && item.userId && item.streamIndex ? `${item.userId}${fenge}${item.streamIndex}` : "");
   const [currentTime, setCurrentTime] = reactExports.useState(0);
   const [isPlay, setIsPlay] = reactExports.useState(false);
   const [duration, setDuration] = reactExports.useState(0);
   const sliderStateRef = reactExports.useRef(false);
+  const [isSliderHovered, setIsSliderHovered] = reactExports.useState(false);
   const [hasMicrophone, setHasMicrophone] = reactExports.useState(false);
   const [micMuted, setMicMuted] = reactExports.useState(true);
-  const [isSliderHovered, setIsSliderHovered] = reactExports.useState(false);
-  const [itemKeyColor, setItemKeyColor] = reactExports.useState((_a2 = item == null ? void 0 : item.chromaKeyOptions) == null ? void 0 : _a2.keyColor);
   const handleLoopChange = (checked) => {
     setIsLoop(checked);
     if (item.objectType === "video" || item.objectType === "audio") {
@@ -202800,7 +202958,7 @@ const MetaItem = ({
     },
     audio: (checked) => {
       var _a3, _b;
-      const audioStream = livePlayerRef.current.getBackgroundAudioStreams().get(item.id);
+      const audioStream = livePlayerRef.current.getActiveVideoStreams().get(item.id);
       if (audioStream) {
         audioStream.getAudioTracks().forEach((track) => {
           track.enabled = !checked;
@@ -202965,34 +203123,6 @@ const MetaItem = ({
     width: 300,
     padding: "12px 16px"
   };
-  const availableStreams = React$2.useMemo(() => callUsers.flatMap((user) => {
-    const list = [];
-    if (user.waiting_mode_state === WaitingModeState.WAITING) {
-      return list;
-    }
-    if (user.rtc_userid === (callConfig == null ? void 0 : callConfig.drawing_board_id)) {
-      return list;
-    }
-    list.push({
-      label: `${user.nickname || user.rtc_userid} · 摄像头`,
-      value: `${user.rtc_userid}${fenge}main`,
-      isVideoEnabled: user.isVideoEnabled,
-      rtc_userid: user.rtc_userid,
-      nickname: user.nickname,
-      isScreenEnabled: user.isScreenEnabled
-    });
-    if (user == null ? void 0 : user.isScreenEnabled) {
-      list.push({
-        label: `${user.nickname || user.rtc_userid} · 屏幕共享`,
-        value: `${user.rtc_userid}${fenge}screen`,
-        isVideoEnabled: user.isScreenEnabled,
-        rtc_userid: user.rtc_userid,
-        nickname: user.nickname,
-        isScreenEnabled: user.isScreenEnabled
-      });
-    }
-    return list;
-  }), [callUsers]);
   reactExports.useEffect(() => {
     const handleCallStatusChanged = (data2) => {
       if (item.objectType === "camera" || item.objectType === "microphone") {
@@ -203011,67 +203141,6 @@ const MetaItem = ({
       }
     }
   }, [callConfig.isCall]);
-  const targetUser = reactExports.useMemo(() => availableStreams.find((user) => user.rtc_userid === (selectedValue == null ? void 0 : selectedValue.split(fenge)[0])), [selectedValue, availableStreams]);
-  reactExports.useEffect(() => {
-    var _a3;
-    if (item.objectType !== "videoSlot" || !livePlayerRef.current)
-      return;
-    try {
-      const canvas = getter().fabricInstance;
-      if (!canvas) {
-        console.error("画布未初始化");
-        return;
-      }
-      const videoSlotObj = (_a3 = canvas.getObjects()) == null ? void 0 : _a3.find((o2) => o2.id === item.id);
-      if (!videoSlotObj) {
-        console.error("找不到对应的连麦嘉宾对象:", item.id);
-        return;
-      }
-      const [, streamIndex = "main"] = selectedValue.split(fenge);
-      if (!targetUser || streamIndex === "screen" && !targetUser.isScreenEnabled) {
-        console.log(`用户${item.userId}已退出，恢复为空连麦嘉宾`);
-        setSelectedValue("");
-        try {
-          livePlayerRef.current.addEmptyVideoSlot({
-            id: item.id
-          });
-        } catch (error2) {
-          console.error("恢复空连麦嘉宾失败:", error2);
-        }
-        return;
-      }
-      console.log(`${targetUser.nickname || targetUser.rtc_userid}摄像头状态变更为: ${targetUser.isVideoEnabled ? "开启" : "关闭"}`);
-      if (targetUser.isVideoEnabled) {
-        try {
-          livePlayerRef.current.bindVideoSlotToFirstEmpty({
-            id: item.id,
-            userId: targetUser.rtc_userid,
-            streamIndex: streamIndex === "screen" ? "screen" : "main",
-            userName: targetUser.nickname
-          });
-          videoSlotObj.userId = targetUser.rtc_userid;
-          videoSlotObj.streamIndex = streamIndex;
-        } catch (bindError) {
-          console.error("绑定视频流失败:", bindError);
-        }
-      } else {
-        try {
-          livePlayerRef.current.createCameraClosedPlaceholder({
-            ...videoSlotObj,
-            streamIndex
-          }, targetUser);
-          videoSlotObj._cameraClosedPlaceholder = true;
-        } catch (placeholderError) {
-          console.error("创建摄像头关闭占位符失败:", placeholderError);
-        }
-      }
-    } catch (error2) {
-      console.error("监听嘉宾视频状态变化时发生错误:", error2);
-    }
-  }, [targetUser, targetUser == null ? void 0 : targetUser.isVideoEnabled, item.userId, item.id, selectedValue]);
-  reactExports.useEffect(() => {
-    setItems(item);
-  }, [item]);
   return (
     // 媒体项容器
     // - 根据选中/悬停状态应用不同背景色
@@ -203214,72 +203283,15 @@ const MetaItem = ({
         })]
       }), item.objectType === "videoSlot" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
         className: "mt-3.5 pl-1 pr-1",
-        children: callConfig.isCall ? availableStreams.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
+        children: callConfig.isCall ? videoSlotStreams.availableStreams.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
           className: "w-full",
           allowClear: true,
-          value: selectedValue,
+          value: videoSlotBinding.selectedValue,
           placeholder: "选择嘉宾视频流绑定到此槽",
-          options: availableStreams,
+          options: videoSlotStreams.availableStreams,
           showSearch: true,
           optionFilterProp: "label",
-          onChange: (val, opt) => {
-            var _a3, _b;
-            console.log("选择的视频槽:", val, opt);
-            setSelectedValue(val);
-            if (!val) {
-              try {
-                if (!livePlayerRef.current) {
-                  console.error("livePlayerRef未初始化");
-                  return;
-                }
-                livePlayerRef.current.addEmptyVideoSlot({
-                  id: item.id
-                });
-                console.log("成功清除连麦嘉宾绑定状态");
-              } catch (error2) {
-                console.error("清除连麦嘉宾绑定状态失败:", error2);
-              }
-              return;
-            }
-            try {
-              const [userId, streamIndex] = String(val).split(fenge);
-              const canvas = getter().fabricInstance;
-              if (!canvas) {
-                console.error("画布未初始化");
-                return;
-              }
-              const videoSlotObj = ((_a3 = canvas.getObjects()) == null ? void 0 : _a3.find((o2) => o2.id === item.id)) || item;
-              canvas.setActiveObject(videoSlotObj);
-              const user = callUsers.find((user2) => user2.rtc_userid === userId);
-              if (!user) {
-                console.error("找不到用户:", userId);
-                return;
-              }
-              if (user.isVideoEnabled) {
-                livePlayerRef.current.bindVideoSlotToFirstEmpty({
-                  id: item.id,
-                  userId,
-                  device: user.device,
-                  streamIndex: streamIndex === "screen" ? "screen" : "main",
-                  userName: targetUser.nickname
-                });
-                if (videoSlotObj) {
-                  videoSlotObj.userId = userId;
-                  videoSlotObj.streamIndex = streamIndex;
-                }
-              } else {
-                const targetObj = (_b = canvas.getObjects()) == null ? void 0 : _b.find((o2) => o2.id === item.id);
-                if (targetObj) {
-                  livePlayerRef.current.createCameraClosedPlaceholder({
-                    ...targetObj,
-                    streamIndex
-                  }, user);
-                }
-              }
-            } catch (error2) {
-              console.error("绑定连麦嘉宾失败:", error2);
-            }
-          },
+          onChange: videoSlotBinding.handleStreamChange,
           notFoundContent: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "text-#fff/80",
             children: "暂无可用的远程视频流"
@@ -271100,6 +271112,7 @@ class RtcClient {
    */
   join(token2, roomId, uid2, extraInfo, autoOption) {
     console.log("autoOption", autoOption);
+    console.log("extraInfo", extraInfo);
     return this.engine.joinRoom(
       token2,
       roomId,
@@ -272872,7 +272885,7 @@ const LivePlayer = ({
       await new Promise((resolve) => {
         audioElement.onloadedmetadata = resolve;
       });
-      const audioStream = audioElement.captureStream();
+      audioElement.captureStream();
       const audioObject = new oa(audioElement, {
         selectable: true,
         hasControls: true,
@@ -272898,9 +272911,10 @@ const LivePlayer = ({
         canvas.add(audioObject);
         setFabricObjects((old) => [audioObject, ...old]);
         canvasRequestRenderAll();
-        const newBackgroundAudioStreams = new Map(backgroundAudioStreamsRef.current);
-        newBackgroundAudioStreams.set(streamId, audioStream);
-        backgroundAudioStreamsRef.current = newBackgroundAudioStreams;
+        const videoStream = audioElement.captureStream();
+        const newVideoStreams = new Map(activeVideoStreamsRef.current);
+        newVideoStreams.set(streamId, videoStream);
+        activeVideoStreamsRef.current = newVideoStreams;
         if (rtmpRef.current || canvasRtc) {
           await audioMixing();
         }
@@ -302238,13 +302252,29 @@ const RtcJoomRoom = reactExports.memo(({
     try {
       (_a2 = getter().rtc) == null ? void 0 : _a2.bindEngineEvents();
       console.log(`[rtcJoin]:token${token2},rtc_room_id${rtc_room_id},rtc_userid${rtc_userid}`);
-      await ((_b = getter().rtc) == null ? void 0 : _b.join(token2, rtc_room_id, rtc_userid, JSON.stringify({
-        nickname,
+      const extraInfo = {
+        nickname: nickname || "",
         device: isMobile$3 ? "mobile" : "pc",
-        microphone: isAudioEnabled ?? false,
-        camera: isVideoEnabled ?? false,
-        mirror: (media_devices == null ? void 0 : media_devices.mirrorEnabled) ?? false
-      }), {
+        // 防御性代码：确保 device 总是有值
+        microphone: !!isAudioEnabled,
+        // 转换为布尔值
+        camera: !!isVideoEnabled,
+        // 转换为布尔值
+        mirrorEnabled: !!(media_devices == null ? void 0 : media_devices.mirrorEnabled)
+        // 防御性代码：转换为布尔值
+      };
+      console.log("[rtcJoin] 发送的 extraInfo:", JSON.stringify(extraInfo, null, 2));
+      console.log("[rtcJoin] media_devices:", media_devices);
+      console.log("[rtcJoin] isMobile:", isMobile$3);
+      console.log("[rtcJoin] isAudioEnabled:", isAudioEnabled);
+      console.log("[rtcJoin] isVideoEnabled:", isVideoEnabled);
+      console.log("[rtcJoin] nickname:", nickname);
+      Object.keys(extraInfo).forEach((key) => {
+        if (extraInfo[key] === void 0 || extraInfo[key] === null) {
+          console.error(`[rtcJoin] 警告：${key} 字段值为 ${extraInfo[key]}`);
+        }
+      });
+      await ((_b = getter().rtc) == null ? void 0 : _b.join(token2, rtc_room_id, rtc_userid, JSON.stringify(extraInfo), {
         // 自动发布本地音视频流
         isAutoPublish: false,
         // 自动订阅房间内其他用户的音频流
@@ -302346,6 +302376,9 @@ const RtcJoomRoom = reactExports.memo(({
                 (_a3 = rtc2 == null ? void 0 : rtc2.engine) == null ? void 0 : _a3.unsubscribeStream(userId, MediaType$1.AUDIO);
               }, 100);
             }
+            updateCallUser(userId, {
+              isPublishStream: stream.mediaType
+            });
           },
           handleUserUnpublishStream: async (event) => {
             var _a2, _b;
@@ -302360,6 +302393,9 @@ const RtcJoomRoom = reactExports.memo(({
             if (mediaType & MediaType$1.AUDIO) {
               await ((_b = getter().rtc) == null ? void 0 : _b.engine.unsubscribeStream(userId, MediaType$1.AUDIO));
             }
+            updateCallUser(userId, {
+              isPublishStream: mediaType
+            });
           },
           handleUserStartVideoCapture: (event) => {
             const {
@@ -302441,12 +302477,14 @@ const RtcJoomRoom = reactExports.memo(({
               userId,
               extraInfo
             } = userInfo;
+            console.log("[handleUserJoin] 接收到的 extraInfo:", extraInfo);
             const extraObj = JSON.parse(extraInfo || "");
+            console.log("[handleUserJoin] 解析后的 extraObj:", extraObj);
             const rtc_canvasid = callConfig.drawing_board_id === userId;
             joinCallUser({
               rtc_userid: userId,
-              nickname: (extraObj == null ? void 0 : extraObj.nickname) || userId,
-              device: (extraObj == null ? void 0 : extraObj.device) || "pc",
+              nickname: extraObj == null ? void 0 : extraObj.nickname,
+              device: extraObj == null ? void 0 : extraObj.device,
               rtc_room_id: callConfig.rtc_room_id,
               isVideoEnabled: (extraObj == null ? void 0 : extraObj.camera) ?? false,
               isAudioEnabled: (extraObj == null ? void 0 : extraObj.microphone) ?? false,
@@ -303694,7 +303732,7 @@ const WebLiveLogin = () => {
         nickname: loginData.data.nickname || "",
         token: loginData.data.token || "",
         device: isMobile$3 ? "mobile" : "pc",
-        videoList: [rtc_userid, rtc_userid + "screen", rtc_userid + "main"],
+        videoList: [rtc_userid, rtc_userid + "screen", rtc_userid + "main", rtc_userid + "self"],
         isAudioEnabled: !rtcConfig.enter_muted && devicePermissions.microphone.granted && devicePermissions.microphone.enabled,
         isScreenEnabled: false,
         // 屏幕共享是否开启
@@ -304252,8 +304290,7 @@ const UserAvatar = reactExports.memo(({
   size = 40,
   className = ""
 }) => {
-  var _a2;
-  const avatarText = ((_a2 = nickname == null ? void 0 : nickname.charAt(0)) == null ? void 0 : _a2.toUpperCase()) || "?";
+  const avatarText = (nickname == null ? void 0 : nickname.trim().charAt(0)) || "?";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, {
     size,
     className,
@@ -304853,8 +304890,12 @@ const UserVideoContainer = reactExports.memo(({
   const displayName = reactExports.useMemo(() => {
     return user.nickname || "未知用户";
   }, [user.nickname]);
+  const isSelfWindow = reactExports.useMemo(() => {
+    return videoId == null ? void 0 : videoId.includes("self");
+  }, [videoId]);
+  const maxNameLength = isSelfWindow ? 3 : 4;
   const avatarChar = reactExports.useMemo(() => {
-    return displayName.charAt(0).toUpperCase();
+    return displayName.trim().charAt(0);
   }, [displayName]);
   const handleClick = reactExports.useCallback(() => {
     onClick == null ? void 0 : onClick(videoId || "");
@@ -304868,6 +304909,14 @@ const UserVideoContainer = reactExports.memo(({
       console.log("main======", user, videoId);
     }
     const noMirror = user.rtc_userid === callConfig.drawing_board_id || (videoId == null ? void 0 : videoId.includes("screen")) || !user.isMirror;
+    console.log("[UserVideoContainer] 镜像设置调试:", {
+      videoId,
+      userRtcUserid: user.rtc_userid,
+      callConfigRtcUserid: callConfig.rtc_userid,
+      userIsMirror: user.isMirror,
+      noMirror,
+      shouldMirror: +!noMirror
+    });
     const isModeFit = user.rtc_userid === callConfig.drawing_board_id || (videoId == null ? void 0 : videoId.includes("screen")) || user.device === "pc";
     if (user.rtc_userid === callConfig.rtc_userid) {
       rtc.engine.setLocalVideoPlayer((videoId == null ? void 0 : videoId.includes("screen")) ? StreamIndex$1.STREAM_INDEX_SCREEN : StreamIndex$1.STREAM_INDEX_MAIN, {
@@ -304935,7 +304984,7 @@ const UserVideoContainer = reactExports.memo(({
               className: "",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
                 className: "bg-black bg-opacity-50 rounded px-2 py-1 text-white text-xs font-medium truncate",
-                children: displayName ? displayName.length > 4 ? `${displayName.substring(0, 4)}...` : displayName : ""
+                children: displayName ? displayName.length > maxNameLength ? `${displayName.substring(0, maxNameLength)}...` : displayName : ""
               })
             }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
               className: `
@@ -305059,23 +305108,23 @@ const VideoSwipeContainer = reactExports.memo(
           cols: 2,
           rows: 1,
           maxVisibleItems: 2,
-          needsScroll: false,
-          centerVertically: true
+          needsScroll: true,
+          centerVertically: false
         };
       } else if (userCount <= 4) {
         return {
           cols: 2,
           rows: 2,
           maxVisibleItems: userCount,
-          needsScroll: false,
-          centerVertically: true
+          needsScroll: true,
+          centerVertically: false
         };
       } else if (userCount <= 6) {
         return {
-          cols: 2,
-          rows: 3,
+          cols: 3,
+          rows: 2,
           maxVisibleItems: userCount,
-          needsScroll: false,
+          needsScroll: true,
           centerVertically: true
         };
       } else if (userCount <= 9) {
@@ -305083,8 +305132,8 @@ const VideoSwipeContainer = reactExports.memo(
           cols: 3,
           rows: 3,
           maxVisibleItems: userCount,
-          needsScroll: false,
-          centerVertically: true
+          needsScroll: true,
+          centerVertically: false
         };
       } else {
         return {
@@ -305100,79 +305149,85 @@ const VideoSwipeContainer = reactExports.memo(
       const baseStyles = {
         display: "grid",
         width: "100%",
-        height: gridLayout.needsScroll ? "100%" : "auto",
         alignContent: gridLayout.centerVertically ? "center" : "start",
         justifyContent: "center",
         margin: "0 auto",
         gap: "0",
         // 网格间距
-        padding: "0",
+        padding: "0"
         // 无内边距
-        paddingBottom: gridLayout.needsScroll ? "env(safe-area-inset-bottom, 20px)" : "0"
       };
       if (userCount === 1) {
         return {
           ...baseStyles,
           gridTemplateColumns: "1fr",
-          gridTemplateRows: "1fr",
+          gridTemplateRows: "auto",
           width: "100%",
           height: "100%"
         };
       } else if (userCount === 2) {
         return {
           ...baseStyles,
-          gridTemplateColumns: "repeat(2, 1fr)",
-          gridTemplateRows: "1fr",
+          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+          gridAutoRows: "min-content",
+          // 不压缩子元素
           width: "100%",
-          height: "100%"
+          maxHeight: "100%",
+          overflowY: "auto"
         };
       } else if (userCount <= 4) {
         return {
           ...baseStyles,
-          gridTemplateColumns: "repeat(2, 1fr)",
-          gridTemplateRows: "repeat(2, 1fr)",
+          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+          gridAutoRows: "min-content",
+          // 不压缩子元素
           width: "100%",
-          height: "100%"
+          maxHeight: "100%",
+          overflowY: "auto"
         };
       } else if (userCount <= 6) {
         return {
           ...baseStyles,
-          gridTemplateColumns: "repeat(2, 1fr)",
-          gridTemplateRows: "repeat(3, 1fr)",
+          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+          gridAutoRows: "min-content",
+          // 不压缩子元素
           width: "100%",
-          height: "100%"
+          maxHeight: "100%",
+          overflowY: "auto"
         };
       } else if (userCount <= 9) {
         return {
           ...baseStyles,
-          gridTemplateColumns: "repeat(3, 1fr)",
-          gridTemplateRows: "repeat(3, 1fr)",
+          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+          gridAutoRows: "min-content",
+          // 不压缩子元素
           width: "100%",
-          height: "100%"
+          maxHeight: "100%",
+          overflowY: "auto"
         };
       } else {
         return {
           ...baseStyles,
-          gridTemplateColumns: "repeat(3, 1fr)",
-          gridAutoRows: "minmax(calc(9/16 * min(33vw, 200px)), auto)",
-          // 基于宽度计算高度
+          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+          gridAutoRows: "min-content",
+          // 不压缩子元素
           width: "100%",
           height: "100%",
-          overflowY: "auto"
+          overflowY: "auto",
+          paddingBottom: "env(safe-area-inset-bottom, 20px)"
         };
       }
     }, [gridLayout.centerVertically, gridLayout.needsScroll, userCount]);
     const videoContainerStyles = reactExports.useMemo(() => {
       return {
         width: "100%",
-        height: "100%",
         aspectRatio: "9/16"
-        // 保持9:16比例
+        // 保持9:16比例，高度自动计算
       };
     }, [userCount]);
     const gridItemClassName = reactExports.useMemo(() => {
       const baseClass = " overflow-hidden shadow-sm";
-      return `${baseClass} flex-shrink-0 w-full h-full`;
+      return `${baseClass} flex-shrink-0 w-full`;
     }, [userCount]);
     const slideContainerStyle = reactExports.useMemo(
       () => ({
@@ -305651,13 +305706,20 @@ const MobileLive = reactExports.memo(({
     }
     const callUser = callUsers.find((user) => user.videoList.includes(videoId));
     const index2 = callUser == null ? void 0 : callUser.videoList.findIndex((id3) => id3 === videoId);
-    if ((callUser == null ? void 0 : callUser.rtc_userid) !== callConfig.drawing_board_id && index2 !== 1 && (callUser == null ? void 0 : callUser.isMirror)) {
+    if (
+      // 画板
+      (callUser == null ? void 0 : callUser.rtc_userid) !== callConfig.drawing_board_id && // 共享屏幕
+      index2 !== 1 && // 开镜像
+      (callUser == null ? void 0 : callUser.isMirror)
+    ) {
       videoElement.style.transform = "scaleX(-1)";
     } else {
       videoElement.style.transform = "scaleX(1)";
     }
     videoElement.className = "w-full h-full ";
-    videoElement.style.objectFit = index2 === 1 ? "contain" : (callUser == null ? void 0 : callUser.device) === "pc" ? "contain" : "cover";
+    const isModeFit = callUser.rtc_userid === callConfig.drawing_board_id || index2 === 1 || callUser.device === "pc";
+    debugger;
+    videoElement.style.objectFit = isModeFit ? "contain" : "cover";
     videoElement.setAttribute("playsinline", "");
     videoElement.setAttribute("webkit-playsinline", "");
     videoElement.srcObject = _videoElement.srcObject;