call-live-sdk1 0.0.2 → 0.0.3

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

@@ -25593,9 +25593,6 @@ var define_import_meta_env_default = {};
 const envConfig$1 = {
   // 环境名称
   env: define_import_meta_env_default.VITE_ENV || "development",
-  // 地图相关配置
-  amapKey: "d3e9b4bd66a3ed8533f2e5d01c24e273",
-  amapCode: "ff1c6caa84b5fe4e179dc6a84580995c",
   // SDK 授权配置
   queenSdkKey: "hP7in57avgV12eJB7dff0052b8ac0481da28769b23b37bc77",
   // API 相关配置
@@ -25633,6 +25630,10 @@ const envConfig = {
     liveId: envConfig$1.env === "production" ? null : 53065,
     agentId: envConfig$1.env === "production" ? null : 38735989,
     apiDomain: envConfig$1.liveProxyUrl
+  },
+  styleConfig: {
+    minHeight: 770,
+    minWidth: 1500
   }
 };
 const useSdkStore = create$c((set3, get4) => ({
@@ -46579,10 +46580,14 @@ const errorConfig = {
     console.warn("Login expired, please re-login");
   }
 };
-console.log("<<envConfig.env>>", envConfig$1);
-console.log("=====>", envConfig$1.env === "production" ? useSdkStore.getState().getApiDomain() : envConfig$1);
+const map$d = {
+  production: useSdkStore.getState().getApiDomain(),
+  test: envConfig$1.liveProxyUrl,
+  dev: ""
+};
+console.log("envConfig.env", envConfig$1.env);
 const axiosInstance = axios.create({
-  baseURL: envConfig$1.env === "production" ? useSdkStore.getState().getApiDomain() : envConfig$1.liveProxyUrl,
+  baseURL: map$d[envConfig$1.env],
   // 只在生产环境设置基础 URL，开发环境使用代理
   timeout: 3e4,
   // 30秒超时
@@ -85377,7 +85382,6 @@ function useLiveInfo() {
         live_id
       }
     }).then((res) => {
-      console.log("直播信息请求成功：", res);
       if (res.success === false) {
         staticMethods.error(res.errorMessage);
         requestResult.cancel();
@@ -85563,7 +85567,6 @@ const Head = ({
     run: state.run,
     cancel: state.cancel
   }));
-  console.log("data,title", data2);
   const {
     fetchActivityType
   } = useActivityTypeStore();
@@ -85582,10 +85585,16 @@ const Head = ({
     livePushCode
   } = useLivePushCodeStore();
   const {
-    data: liveInfoData
+    data: liveInfoData,
+    run: runLiveInfo
   } = useRequest(() => request(`/bis/live-info?id=${liveId}`).then((res) => res.data), {
-    manual: callConfig.role !== "main"
+    manual: true
   });
+  reactExports.useEffect(() => {
+    if (callConfig.rule === "main") {
+      runLiveInfo();
+    }
+  }, [callConfig.rule]);
   const [isLive, setIsLive] = reactExports.useState(false);
   const [isCurrentPagePushing, setIsCurrentPagePushing] = reactExports.useState(false);
   const [isModalVisible, setIsModalVisible] = reactExports.useState(false);
@@ -195591,46 +195600,37 @@ const useDrawingToolsStore = create$c((set3, get4) => ({
   setPenSize: (size) => set3((state) => {
     const newSize = typeof size === "function" ? size(state.penSize) : size;
     return {
-      penSize: newSize,
-      penSizeRef: { current: newSize }
+      penSize: newSize
     };
   }),
   penColor: "#ff5a5a",
   setPenColor: (color) => set3((state) => {
     const newColor = typeof color === "function" ? color(state.penColor) : color;
     return {
-      penColor: newColor,
-      penColorRef: { current: newColor }
+      penColor: newColor
     };
   }),
-  penSizeRef: { current: 2 },
-  penColorRef: { current: "#ff5a5a" },
   // 激光笔设置
   laserPenSize: 2,
   setLaserPenSize: (size) => set3((state) => {
     const newSize = typeof size === "function" ? size(state.laserPenSize) : size;
     return {
-      laserPenSize: newSize,
-      laserPenSizeRef: { current: newSize }
+      laserPenSize: newSize
     };
   }),
   laserPenColor: "#ff5a5a",
   setLaserPenColor: (color) => set3((state) => {
     const newColor = typeof color === "function" ? color(state.laserPenColor) : color;
     return {
-      laserPenColor: newColor,
-      laserPenColorRef: { current: newColor }
+      laserPenColor: newColor
     };
   }),
-  laserPenSizeRef: { current: 2 },
-  laserPenColorRef: { current: "#ff5a5a" },
   // 形状设置
   shapeSize: 2,
   setShapeSize: (size) => set3((state) => {
     const newSize = typeof size === "function" ? size(state.shapeSize) : size;
     return {
-      shapeSize: newSize,
-      shapeSizeRef: { current: newSize }
+      shapeSize: newSize
     };
   }),
   shapeType: "rect",
@@ -195645,39 +195645,32 @@ const useDrawingToolsStore = create$c((set3, get4) => ({
   setShapeColor: (color) => set3((state) => {
     const newColor = typeof color === "function" ? color(state.shapeColor) : color;
     return {
-      shapeColor: newColor,
-      shapeColorRef: { current: newColor }
+      shapeColor: newColor
     };
   }),
-  shapeSizeRef: { current: 2 },
-  shapeTypeRef: { current: "rect" },
-  shapeColorRef: { current: "#ff5a5a" },
   // 文字设置
   textSize: 16,
   setTextSize: (size) => set3((state) => {
     const newSize = typeof size === "function" ? size(state.textSize) : size;
     return {
-      textSize: newSize,
-      textSizeRef: { current: newSize }
+      textSize: newSize
     };
   }),
   textColor: "#ff5a5a",
   setTextColor: (color) => set3((state) => {
     const newColor = typeof color === "function" ? color(state.textColor) : color;
     return {
-      textColor: newColor,
-      textColorRef: { current: newColor }
+      textColor: newColor
     };
   }),
-  textSizeRef: { current: 16 },
-  textColorRef: { current: "#ff5a5a" },
   // 预览弹窗状态
   isPreviewModalVisible: false,
   setIsPreviewModalVisible: (visible) => set3({ isPreviewModalVisible: visible }),
   // 绘图相关引用
   downPoint: { current: null },
   upPoint: { current: null },
-  currentShape: { current: null }
+  currentShape: { current: null },
+  getter: () => get4()
 }));
 const useCallUserPagination = (config2) => {
   const { gridCols } = config2;
@@ -265727,7 +265720,7 @@ const Document$1 = ({
       return /* @__PURE__ */ jsxRuntimeExports.jsx("a", {
         href: r3.buy_url,
         target: "_blank",
-        className: "flex text-stone-500",
+        className: "text-[--call-live-sdk-color-primary]",
         rel: "noreferrer",
         children: r3.name
       });
@@ -266087,13 +266080,13 @@ const Document$1 = ({
         title: "预览文档",
         width: 715,
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-          className: "w-670px pt-4 h-430px bg-#e8e8e8 flex items-center flex-col",
+          className: "w-670px pt-4 h-430px bg-#1a1a1a flex items-center flex-col",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx("img", {
             src: urlList[listIndex],
-            className: " h-92  object-contain"
+            className: " h-92  object-contain bg-#0e121c p-4 rounded"
           }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-            className: "flex items-center h-40px",
-            children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+            className: "flex items-center h-40px text-white",
+            children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, {
               onClick: () => {
                 if (listIndex > 0) {
                   setListIndex(listIndex - 1);
@@ -266101,12 +266094,13 @@ const Document$1 = ({
                   setListIndex(urlList.length - 1);
                 }
               },
-              className: " cursor-pointer bg-white px-2",
+              type: "primary",
+              ghost: true,
               children: "上一页"
             }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-              className: "mx-2",
+              className: "mx-2 text-white",
               children: [listIndex + 1, "/", urlList.length]
-            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, {
               onClick: () => {
                 if (listIndex < urlList.length - 1) {
                   setListIndex(listIndex + 1);
@@ -266114,7 +266108,8 @@ const Document$1 = ({
                   setListIndex(0);
                 }
               },
-              className: " cursor-pointer bg-white px-2",
+              type: "primary",
+              ghost: true,
               children: "下一页"
             })]
           })]
@@ -266211,7 +266206,6 @@ const DocumentControler = ({
     setDocumentIndex(selectedScene.documentIndex);
     handleImageClick(selectedScene.documentIndex);
   }, [currentScene]);
-  console.log("documentInfo", documentInfo);
   reactExports.useEffect(() => {
     if (!documentInfo.name) {
       setDocumentScrollLeft(0);
@@ -266528,30 +266522,20 @@ const ToolOption = reactExports.memo(({
   });
 });
 ToolOption.displayName = "ToolOption";
+const COLORS = ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"];
+const LINE_SIZES = [2, 4, 6];
+const TEXT_SIZES = [16, 20, 24, 28, 32];
+const TOOL_IDS = {
+  SELECT: 1,
+  PEN: 2,
+  LASER_PEN: 3,
+  SHAPE: 4,
+  TEXT: 5
+};
 const DrawingToolbar = ({
   onToolClick,
   onClearCanvas,
-  onPreviewClick,
-  // 初始值 - 仅用于初始化，实际状态由 model 管理
-  initialPenSize = 2,
-  initialPenColor = "#ff5a5a",
-  initialLaserPenSize = 2,
-  initialLaserPenColor = "#ff5a5a",
-  initialShapeSize = 2,
-  initialShapeType = "rect",
-  initialShapeColor = "#ff5a5a",
-  initialTextSize = 16,
-  initialTextColor = "#ff5a5a",
-  // 状态更新回调 - 用于向父组件通知变化
-  onPenSizeChange,
-  onPenColorChange,
-  onLaserPenSizeChange,
-  onLaserPenColorChange,
-  onShapeSizeChange,
-  onShapeTypeChange,
-  onShapeColorChange,
-  onTextSizeChange,
-  onTextColorChange
+  onPreviewClick
 }) => {
   const {
     // 工具选择
@@ -266582,114 +266566,23 @@ const DrawingToolbar = ({
     // 预览弹窗状态
     setIsPreviewModalVisible
   } = useDrawingToolsStore();
-  const prevPropsRef = reactExports.useRef({
-    initialPenSize,
-    initialPenColor,
-    initialLaserPenSize,
-    initialLaserPenColor,
-    initialShapeSize,
-    initialShapeType,
-    initialShapeColor,
-    initialTextSize,
-    initialTextColor
-  });
-  reactExports.useEffect(() => {
-    const prevProps = prevPropsRef.current;
-    if (prevProps.initialPenSize !== initialPenSize) {
-      setPenSize(initialPenSize);
-      prevPropsRef.current.initialPenSize = initialPenSize;
-    }
-    if (prevProps.initialPenColor !== initialPenColor) {
-      setPenColor(initialPenColor);
-      prevPropsRef.current.initialPenColor = initialPenColor;
-    }
-    if (prevProps.initialLaserPenSize !== initialLaserPenSize) {
-      setLaserPenSize(initialLaserPenSize);
-      prevPropsRef.current.initialLaserPenSize = initialLaserPenSize;
-    }
-    if (prevProps.initialLaserPenColor !== initialLaserPenColor) {
-      setLaserPenColor(initialLaserPenColor);
-      prevPropsRef.current.initialLaserPenColor = initialLaserPenColor;
-    }
-    if (prevProps.initialShapeSize !== initialShapeSize) {
-      setShapeSize(initialShapeSize);
-      prevPropsRef.current.initialShapeSize = initialShapeSize;
-    }
-    if (prevProps.initialShapeType !== initialShapeType) {
-      setShapeType(initialShapeType);
-      prevPropsRef.current.initialShapeType = initialShapeType;
-    }
-    if (prevProps.initialShapeColor !== initialShapeColor) {
-      setShapeColor(initialShapeColor);
-      prevPropsRef.current.initialShapeColor = initialShapeColor;
-    }
-    if (prevProps.initialTextSize !== initialTextSize) {
-      setTextSize(initialTextSize);
-      prevPropsRef.current.initialTextSize = initialTextSize;
-    }
-    if (prevProps.initialTextColor !== initialTextColor) {
-      setTextColor(initialTextColor);
-      prevPropsRef.current.initialTextColor = initialTextColor;
-    }
-  }, [initialPenSize, initialPenColor, initialLaserPenSize, initialLaserPenColor, initialShapeSize, initialShapeType, initialShapeColor, initialTextSize, initialTextColor]);
   const handleToolClick = (tool) => {
     setSelectedTool(tool);
     onToolClick(tool);
   };
-  const handlePenSizeChange = (size) => {
-    setPenSize(size);
-    if (onPenSizeChange)
-      onPenSizeChange(size);
-    setTimeout(() => onToolClick(2));
-  };
-  const handlePenColorChange = (color) => {
-    setPenColor(color);
-    if (onPenColorChange)
-      onPenColorChange(color);
-    setTimeout(() => onToolClick(2));
-  };
-  const handleLaserPenSizeChange = (size) => {
-    setLaserPenSize(size);
-    if (onLaserPenSizeChange)
-      onLaserPenSizeChange(size);
-    setTimeout(() => onToolClick(3));
-  };
-  const handleLaserPenColorChange = (color) => {
-    setLaserPenColor(color);
-    if (onLaserPenColorChange)
-      onLaserPenColorChange(color);
-    setTimeout(() => onToolClick(3));
-  };
-  const handleShapeSizeChange = (size) => {
-    setShapeSize(size);
-    if (onShapeSizeChange)
-      onShapeSizeChange(size);
-    setTimeout(() => onToolClick(4));
-  };
-  const handleShapeTypeChange = (type4) => {
-    setShapeType(type4);
-    if (onShapeTypeChange)
-      onShapeTypeChange(type4);
-    setTimeout(() => onToolClick(4));
-  };
-  const handleShapeColorChange = (color) => {
-    setShapeColor(color);
-    if (onShapeColorChange)
-      onShapeColorChange(color);
-    setTimeout(() => onToolClick(4));
-  };
-  const handleTextSizeChange = (size) => {
-    setTextSize(size);
-    if (onTextSizeChange)
-      onTextSizeChange(size);
-    setTimeout(() => onToolClick(5));
-  };
-  const handleTextColorChange = (color) => {
-    setTextColor(color);
-    if (onTextColorChange)
-      onTextColorChange(color);
-    setTimeout(() => onToolClick(5));
-  };
+  const handleToolSettingChange = (setter, toolId) => (value) => {
+    setter(value);
+    setTimeout(() => onToolClick(toolId));
+  };
+  const handlePenSizeChange = handleToolSettingChange(setPenSize, TOOL_IDS.PEN);
+  const handlePenColorChange = handleToolSettingChange(setPenColor, TOOL_IDS.PEN);
+  const handleLaserPenSizeChange = handleToolSettingChange(setLaserPenSize, TOOL_IDS.LASER_PEN);
+  const handleLaserPenColorChange = handleToolSettingChange(setLaserPenColor, TOOL_IDS.LASER_PEN);
+  const handleShapeSizeChange = handleToolSettingChange(setShapeSize, TOOL_IDS.SHAPE);
+  const handleShapeTypeChange = handleToolSettingChange(setShapeType, TOOL_IDS.SHAPE);
+  const handleShapeColorChange = handleToolSettingChange(setShapeColor, TOOL_IDS.SHAPE);
+  const handleTextSizeChange = handleToolSettingChange(setTextSize, TOOL_IDS.TEXT);
+  const handleTextColorChange = handleToolSettingChange(setTextColor, TOOL_IDS.TEXT);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
     className: "flex items-center",
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, {
@@ -266700,10 +266593,10 @@ const DrawingToolbar = ({
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
           className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
           style: {
-            background: selectedTool === 1 ? "#12151a" : "",
-            color: selectedTool === 1 ? "#6672fc" : "#fff"
+            background: selectedTool === TOOL_IDS.SELECT ? "#12151a" : "",
+            color: selectedTool === TOOL_IDS.SELECT ? "#6672fc" : "#fff"
           },
-          onClick: () => handleToolClick(1),
+          onClick: () => handleToolClick(TOOL_IDS.SELECT),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgGuideO, {
             className: "text-24px"
           })
@@ -266713,11 +266606,11 @@ const DrawingToolbar = ({
         optionContent: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
           className: "w-260px py-4 px-3 flex flex-col justify-between",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx(SizePicker, {
-            sizes: [2, 4, 6],
+            sizes: LINE_SIZES,
             selectedSize: penSize,
             onSizeChange: handlePenSizeChange
           }), /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, {
-            colors: ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"],
+            colors: COLORS,
             selectedColor: penColor,
             onColorChange: handlePenColorChange
           })]
@@ -266729,10 +266622,10 @@ const DrawingToolbar = ({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
             style: {
-              background: selectedTool === 2 ? "#12151a" : "",
-              color: selectedTool === 2 ? "#6672fc" : "#fff"
+              background: selectedTool === TOOL_IDS.PEN ? "#12151a" : "",
+              color: selectedTool === TOOL_IDS.PEN ? "#6672fc" : "#fff"
             },
-            onClick: () => handleToolClick(2),
+            onClick: () => handleToolClick(TOOL_IDS.PEN),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgEdit, {
               className: "text-18px"
             })
@@ -266743,11 +266636,11 @@ const DrawingToolbar = ({
         optionContent: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
           className: "w-260px py-4 px-3 flex flex-col justify-between",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx(SizePicker, {
-            sizes: [2, 4, 6],
+            sizes: LINE_SIZES,
             selectedSize: laserPenSize,
             onSizeChange: handleLaserPenSizeChange
           }), /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, {
-            colors: ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"],
+            colors: COLORS,
             selectedColor: laserPenColor,
             onColorChange: handleLaserPenColorChange
           })]
@@ -266759,10 +266652,10 @@ const DrawingToolbar = ({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
             style: {
-              background: selectedTool === 3 ? "#12151a" : "",
-              color: selectedTool === 3 ? "#6672fc" : "#fff"
+              background: selectedTool === TOOL_IDS.LASER_PEN ? "#12151a" : "",
+              color: selectedTool === TOOL_IDS.LASER_PEN ? "#6672fc" : "#fff"
             },
-            onClick: () => handleToolClick(3),
+            onClick: () => handleToolClick(TOOL_IDS.LASER_PEN),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$r, {
               className: "text-18px"
             })
@@ -266777,7 +266670,7 @@ const DrawingToolbar = ({
               marginBottom: 10
             },
             children: [/* @__PURE__ */ jsxRuntimeExports.jsx(SizePicker, {
-              sizes: [2, 4, 6],
+              sizes: LINE_SIZES,
               selectedSize: shapeSize,
               onSizeChange: handleShapeSizeChange
             }), /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeTypePicker, {
@@ -266786,7 +266679,7 @@ const DrawingToolbar = ({
               onTypeChange: handleShapeTypeChange
             })]
           }), /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, {
-            colors: ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"],
+            colors: COLORS,
             selectedColor: shapeColor,
             onColorChange: handleShapeColorChange
           })]
@@ -266798,10 +266691,10 @@ const DrawingToolbar = ({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
             style: {
-              background: selectedTool === 4 ? "#12151a" : "",
-              color: selectedTool === 4 ? "#6672fc" : "#fff"
+              background: selectedTool === TOOL_IDS.SHAPE ? "#12151a" : "",
+              color: selectedTool === TOOL_IDS.SHAPE ? "#6672fc" : "#fff"
             },
-            onClick: () => handleToolClick(4),
+            onClick: () => handleToolClick(TOOL_IDS.SHAPE),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$p, {
               className: "text-18px"
             })
@@ -266812,11 +266705,11 @@ const DrawingToolbar = ({
         optionContent: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
           className: "w-260px py-4 px-3 flex flex-col justify-between",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx(TextSizePicker, {
-            sizes: [16, 20, 24, 28, 32],
+            sizes: TEXT_SIZES,
             selectedSize: textSize,
             onSizeChange: handleTextSizeChange
           }), /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, {
-            colors: ["#ff5a5a", "#ffbf48", "#3a9bff", "#58efb8", "#000000", "#808080", "#ffffff"],
+            colors: COLORS,
             selectedColor: textColor,
             onColorChange: handleTextColorChange
           })]
@@ -266828,10 +266721,10 @@ const DrawingToolbar = ({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
             className: "w-32px h-32px flex justify-center items-center cursor-pointer hover:bg-#12151a",
             style: {
-              background: selectedTool === 5 ? "#12151a" : "",
-              color: selectedTool === 5 ? "#6672fc" : "#fff"
+              background: selectedTool === TOOL_IDS.TEXT ? "#12151a" : "",
+              color: selectedTool === TOOL_IDS.TEXT ? "#6672fc" : "#fff"
             },
-            onClick: () => handleToolClick(5),
+            onClick: () => handleToolClick(TOOL_IDS.TEXT),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$e, {
               className: "text-18px"
             })
@@ -267049,14 +266942,11 @@ const LivePlayer = ({
     callUsers: state.callUsers,
     toggleRightSidebar: state.toggleRightSidebar
   }));
-  useSdkStore((state) => state.callConfig.el);
   const canvasRef = reactExports.useRef(null);
   const canvasContainerRef = reactExports.useRef(null);
   const streamRef = reactExports.useRef(null);
   const streamContainerRef = reactExports.useRef(null);
   const {
-    // 工具选择
-    selectedTool,
     setSelectedTool,
     // 绘图相关引用
     downPoint,
@@ -267064,37 +266954,37 @@ const LivePlayer = ({
     currentShape,
     // 形状设置
     shapeType,
-    setShapeType,
-    shapeTypeRef,
     shapeColor,
-    setShapeColor,
-    shapeColorRef,
     shapeSize,
-    setShapeSize,
-    shapeSizeRef,
     // 画笔设置
     penColor,
-    setPenColor,
-    penColorRef,
     penSize,
-    setPenSize,
-    penSizeRef,
     // 激光笔设置
     laserPenColor,
-    setLaserPenColor,
-    laserPenColorRef,
     laserPenSize,
-    setLaserPenSize,
-    laserPenSizeRef,
     // 文字设置
     textColor,
-    setTextColor,
-    textColorRef,
     textSize,
-    setTextSize,
-    textSizeRef,
-    setIsPreviewModalVisible
-  } = useDrawingToolsStore();
+    // 预览弹窗状态
+    setIsPreviewModalVisible,
+    getter: getDrawing
+  } = useDrawingToolsStore((state) => ({
+    setSelectedTool: state.setSelectedTool,
+    downPoint: state.downPoint,
+    upPoint: state.upPoint,
+    currentShape: state.currentShape,
+    shapeType: state.shapeType,
+    shapeColor: state.shapeColor,
+    shapeSize: state.shapeSize,
+    penColor: state.penColor,
+    penSize: state.penSize,
+    laserPenColor: state.laserPenColor,
+    laserPenSize: state.laserPenSize,
+    textColor: state.textColor,
+    textSize: state.textSize,
+    getter: state.getter,
+    setIsPreviewModalVisible: state.setIsPreviewModalVisible
+  }));
   const canvasSettingRef = reactExports.useRef("horizontal");
   const worker = reactExports.useRef(null);
   const isWorkerRunning = reactExports.useRef(false);
@@ -267631,9 +267521,9 @@ const LivePlayer = ({
   };
   const drawShapeMouseDown = (e3) => {
     downPoint.current = e3.absolutePointer;
-    const shapeType2 = shapeTypeRef.current;
-    const shapeColor2 = shapeColorRef.current;
-    const shapeSize2 = shapeSizeRef.current;
+    const shapeType2 = getDrawing().shapeType;
+    const shapeColor2 = getDrawing().shapeColor;
+    const shapeSize2 = getDrawing().shapeSize;
     if (shapeType2 === "circle" || shapeType2 === "rect") {
       currentShape.current = shapeType2 === "circle" ? new xo({
         left: downPoint.current.x,
@@ -267661,7 +267551,7 @@ const LivePlayer = ({
   const drawShapeMouseMove = (e3) => {
     if (!currentShape.current)
       return;
-    const shapeType2 = shapeTypeRef.current;
+    const shapeType2 = getDrawing().shapeType;
     const currentPoint = e3.absolutePointer;
     const dx = currentPoint.x - downPoint.current.x;
     const dy = currentPoint.y - downPoint.current.y;
@@ -267695,7 +267585,7 @@ const LivePlayer = ({
     canvasRequestRenderAll();
   };
   const drawShareMouseUp = () => {
-    const shapeColor2 = shapeColorRef.current;
+    const shapeColor2 = getDrawing().shapeColor;
     if (currentShape.current) {
       if (JSON.stringify(downPoint.current) === JSON.stringify(upPoint.current)) {
         return;
@@ -267710,8 +267600,8 @@ const LivePlayer = ({
   const drawTextMouseDown = (e3) => {
     var _a3;
     const pointer = (_a3 = getter().fabricInstance) == null ? void 0 : _a3.getPointer(e3.e);
-    const textColor2 = textColorRef.current;
-    const textSize2 = textSizeRef.current;
+    const textColor2 = getDrawing().textColor;
+    const textSize2 = getDrawing().textSize;
     if (pointer) {
       const {
         x,
@@ -267732,8 +267622,8 @@ const LivePlayer = ({
   };
   const enablePenDrawing = () => {
     const canvas = getter().fabricInstance;
-    const penColor2 = penColorRef.current;
-    const penSize2 = penSizeRef.current;
+    const penColor2 = getDrawing().penColor;
+    const penSize2 = getDrawing().penSize;
     const pencilBrush = new oo(canvas);
     pencilBrush.color = penColor2;
     pencilBrush.width = penSize2;
@@ -267744,8 +267634,8 @@ const LivePlayer = ({
   };
   const enableLaserPenDrawing = () => {
     const canvas = getter().fabricInstance;
-    const laserPenColor2 = laserPenColorRef.current;
-    const laserPenSize2 = laserPenSizeRef.current;
+    const laserPenColor2 = getDrawing().laserPenColor;
+    const laserPenSize2 = getDrawing().laserPenSize;
     const pencilBrush = new oo(canvas);
     pencilBrush.color = laserPenColor2;
     pencilBrush.width = laserPenSize2;
@@ -269247,28 +269137,9 @@ const LivePlayer = ({
       children: [isMainRole && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
         className: " flex items-center justify-center h-48px gap-5 bg-#222933",
         children: [/* @__PURE__ */ jsxRuntimeExports.jsx(DrawingToolbar, {
-          selectedTool,
           onToolClick: clickTool,
           onClearCanvas: clearCanvas,
-          onPreviewClick: () => setIsPreviewModalVisible(true),
-          initialPenSize: penSize,
-          initialPenColor: penColor,
-          initialLaserPenSize: laserPenSize,
-          initialLaserPenColor: laserPenColor,
-          initialShapeSize: shapeSize,
-          initialShapeType: shapeType,
-          initialShapeColor: shapeColor,
-          initialTextSize: textSize,
-          initialTextColor: textColor,
-          onPenSizeChange: setPenSize,
-          onPenColorChange: setPenColor,
-          onLaserPenSizeChange: setLaserPenSize,
-          onLaserPenColorChange: setLaserPenColor,
-          onShapeSizeChange: setShapeSize,
-          onShapeTypeChange: setShapeType,
-          onShapeColorChange: setShapeColor,
-          onTextSizeChange: setTextSize,
-          onTextColorChange: setTextColor
+          onPreviewClick: () => setIsPreviewModalVisible(true)
         }), callConfig.isCall && /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutSwitcher, {
           className: "absolute right-10",
           currentLayout: layoutMode,
@@ -280200,6 +280071,618 @@ let ErrorBoundary$1 = class ErrorBoundary extends reactExports.Component {
     return this.props.children;
   }
 };
+const AudioVisualizer = reactExports.memo(
+  ({ selectedMicrophone, isVisible: isVisible3, onVolumeLevelsChange }) => {
+    const [audioContext, setAudioContext] = reactExports.useState(null);
+    const [analyser, setAnalyser] = reactExports.useState(null);
+    const [microphoneStream, setMicrophoneStream] = reactExports.useState(null);
+    const [volumeLevels, setVolumeLevels] = reactExports.useState(Array(12).fill(0));
+    const animationFrameRef = reactExports.useRef(null);
+    const canvasRef = reactExports.useRef(null);
+    const microphoneStreamRef = reactExports.useRef(microphoneStream);
+    const audioContextRef = reactExports.useRef(audioContext);
+    const analyserRef = reactExports.useRef(analyser);
+    reactExports.useEffect(() => {
+      microphoneStreamRef.current = microphoneStream;
+      audioContextRef.current = audioContext;
+      analyserRef.current = analyser;
+    }, [microphoneStream, audioContext, analyser]);
+    const cleanupMediaResources = reactExports.useCallback(() => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      if (microphoneStreamRef.current) {
+        microphoneStreamRef.current.getTracks().forEach((track) => track.stop());
+        setMicrophoneStream(null);
+      }
+      if (audioContextRef.current) {
+        audioContextRef.current.close().catch((err2) => console.error("关闭音频上下文失败:", err2));
+        setAudioContext(null);
+        setAnalyser(null);
+      }
+    }, []);
+    reactExports.useEffect(() => {
+      if (onVolumeLevelsChange) {
+        onVolumeLevelsChange(volumeLevels);
+      }
+    }, [volumeLevels, onVolumeLevelsChange]);
+    reactExports.useEffect(() => {
+      if (isVisible3 && selectedMicrophone) {
+        const context = new (window.AudioContext || window.webkitAudioContext)();
+        setAudioContext(context);
+        const audioAnalyser = context.createAnalyser();
+        audioAnalyser.fftSize = 2048;
+        setAnalyser(audioAnalyser);
+        navigator.mediaDevices.getUserMedia({
+          audio: {
+            deviceId: selectedMicrophone ? { exact: selectedMicrophone } : void 0
+          }
+        }).then((stream) => {
+          setMicrophoneStream(stream);
+          const source = context.createMediaStreamSource(stream);
+          source.connect(audioAnalyser);
+          const canvas = canvasRef.current;
+          const canvasCtx = canvas == null ? void 0 : canvas.getContext("2d");
+          const frequencyDataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
+          const timeDataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
+          const analyzeVolume = () => {
+            audioAnalyser.getByteFrequencyData(frequencyDataArray);
+            audioAnalyser.getByteTimeDomainData(timeDataArray);
+            if (canvasCtx && canvas) {
+              canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+              canvasCtx.lineWidth = 2;
+              canvasCtx.strokeStyle = "#2196F3";
+              canvasCtx.beginPath();
+              const sliceWidth = canvas.width / timeDataArray.length;
+              let x = 0;
+              for (let i = 0; i < timeDataArray.length; i++) {
+                const v3 = timeDataArray[i] / 128;
+                const y3 = v3 * canvas.height / 2;
+                if (i === 0) {
+                  canvasCtx.moveTo(x, y3);
+                } else {
+                  canvasCtx.lineTo(x, y3);
+                }
+                x += sliceWidth;
+              }
+              canvasCtx.lineTo(canvas.width, canvas.height / 2);
+              canvasCtx.stroke();
+            }
+            const segmentSize = Math.floor(frequencyDataArray.length / 12);
+            const normalizedLevels = Array(12).fill(0).map((_2, index2) => {
+              const start2 = index2 * segmentSize;
+              const end2 = start2 + segmentSize;
+              const segmentAvg = frequencyDataArray.slice(start2, end2).reduce((sum2, value) => sum2 + value, 0) / segmentSize;
+              return Math.min(1, Math.pow(segmentAvg / 255, 0.8));
+            });
+            setVolumeLevels(normalizedLevels);
+            animationFrameRef.current = requestAnimationFrame(analyzeVolume);
+          };
+          analyzeVolume();
+        }).catch((err2) => {
+          console.error("获取麦克风失败:", err2);
+          const interval = setInterval(() => {
+            const newLevels = Array(12).fill(0).map(() => Math.random());
+            setVolumeLevels(newLevels);
+          }, 200);
+          return () => clearInterval(interval);
+        });
+        return cleanupMediaResources;
+      }
+    }, [isVisible3, selectedMicrophone, cleanupMediaResources]);
+    reactExports.useEffect(() => {
+      return () => {
+        cleanupMediaResources();
+      };
+    }, [cleanupMediaResources]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: " h-24 bg-gray-50 rounded border border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { ref: canvasRef, className: " h-full", width: "400", height: "100" }) }) });
+  }
+);
+AudioVisualizer.displayName = "AudioVisualizer";
+class MediaErrorBoundary extends reactExports.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      errorMessage: ""
+    };
+  }
+  static getDerivedStateFromError(error2) {
+    return {
+      hasError: true,
+      errorMessage: error2.message
+    };
+  }
+  componentDidCatch(error2, errorInfo) {
+    console.error("媒体设备错误:", error2, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+        className: "p-4 border border-red-300 rounded bg-red-50",
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
+          message: "媒体设备错误",
+          description: `无法访问媒体设备: ${this.state.errorMessage}。请检查设备权限或连接。`,
+          type: "error",
+          showIcon: true,
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {})
+        }), /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, {
+          type: "primary",
+          className: "mt-4",
+          onClick: () => this.setState({
+            hasError: false,
+            errorMessage: ""
+          }),
+          children: "重试"
+        })]
+      });
+    }
+    return this.props.children;
+  }
+}
+const MediaSettings = () => {
+  const {
+    callCurrentUser,
+    toggleVideo,
+    rtc,
+    getter
+  } = useCallStore();
+  const [isModalVisible, setIsModalVisible] = reactExports.useState(false);
+  const [mirrorEnabled, setMirrorEnabled] = reactExports.useState(true);
+  const [cameraDevices, setCameraDevices] = reactExports.useState([]);
+  const [microphoneDevices, setMicrophoneDevices] = reactExports.useState([]);
+  const [selectedCamera, setSelectedCamera] = reactExports.useState("");
+  const [selectedMicrophone, setSelectedMicrophone] = reactExports.useState("");
+  const [beautySettings, setBeautySettings] = reactExports.useState({
+    enabled: false,
+    whiteIntensity: 0.5,
+    smoothIntensity: 0.5,
+    sharpenIntensity: 0.5
+  });
+  const [beautyExtension, setBeautyExtension] = reactExports.useState(null);
+  const [beautyCompatible, setBeautyCompatible] = reactExports.useState(false);
+  console.log("beautyCompatible", beautyCompatible);
+  const [beautyInitialized, setBeautyInitialized] = reactExports.useState(false);
+  const getDevices = reactExports.useCallback(async () => {
+    try {
+      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+        console.error("浏览器不支持获取媒体设备列表");
+        staticMethods.error("您的浏览器不支持媒体设备选择功能");
+        return;
+      }
+      await navigator.mediaDevices.getUserMedia({
+        audio: true,
+        video: true
+      }).catch((err2) => console.error("获取媒体权限失败:", err2));
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const cameras = devices.filter((device) => device.kind === "videoinput").map((device) => ({
+        id: device.deviceId,
+        label: device.label || `摄像头 ${device.deviceId.slice(0, 5)}...`
+      }));
+      const microphones = devices.filter((device) => device.kind === "audioinput").map((device) => ({
+        id: device.deviceId,
+        label: device.label || `麦克风 ${device.deviceId.slice(0, 5)}...`
+      }));
+      if (cameras.length > 0) {
+        setCameraDevices(cameras);
+        setSelectedCamera((prevCamera) => {
+          return cameras.find((cam) => cam.id === prevCamera) ? prevCamera : cameras[0].id;
+        });
+      }
+      if (microphones.length > 0) {
+        setMicrophoneDevices(microphones);
+        setSelectedMicrophone((prevMic) => {
+          return microphones.find((mic) => mic.id === prevMic) ? prevMic : microphones[0].id;
+        });
+      }
+    } catch (error2) {
+      console.error("获取设备列表失败:", error2);
+      staticMethods.error("获取媒体设备失败，请检查设备权限");
+      setCameraDevices([{
+        id: "default",
+        label: "默认摄像头"
+      }]);
+      setMicrophoneDevices([{
+        id: "default",
+        label: "默认麦克风"
+      }]);
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    if (isModalVisible) {
+      getDevices();
+    }
+    if (navigator.mediaDevices) {
+      navigator.mediaDevices.addEventListener("devicechange", getDevices);
+      return () => {
+        navigator.mediaDevices.removeEventListener("devicechange", getDevices);
+      };
+    }
+  }, [getDevices, isModalVisible]);
+  reactExports.useEffect(() => {
+    if (isModalVisible && !beautyInitialized) {
+      initializeBeautyExtension();
+    }
+  }, [isModalVisible, beautyInitialized]);
+  const initializeBeautyExtension = reactExports.useCallback(async () => {
+    try {
+      const rtcInstance = getter().rtc;
+      if (rtcInstance && rtcInstance.beautyExtension) {
+        const extension = rtcInstance.beautyExtension;
+        const compatibilityResult = await extension.checkCompatibility();
+        console.log("浏览器兼容性检查结果:", compatibilityResult);
+        if (compatibilityResult.isCompatible) {
+          setBeautyExtension(extension);
+          setBeautyCompatible(true);
+          setBeautyInitialized(true);
+          console.log("美颜扩展初始化成功");
+        } else {
+          console.warn("浏览器不支持美颜功能:", compatibilityResult.message || "兼容性检查失败");
+          setBeautyCompatible(false);
+          staticMethods.warning("您的浏览器不支持美颜功能，请使用 Chrome 78+ 或其他兼容浏览器");
+        }
+      } else {
+        console.warn("RTC客户端或美颜扩展未初始化");
+        setBeautyCompatible(false);
+        staticMethods.warning("RTC客户端未初始化，无法使用美颜功能");
+      }
+    } catch (error2) {
+      console.error("美颜扩展初始化失败:", error2);
+      setBeautyCompatible(false);
+      staticMethods.error("美颜功能初始化失败");
+    }
+  }, [rtc]);
+  const handleBeautyToggle = reactExports.useCallback((enabled) => {
+    if (!beautyExtension || !beautyCompatible) {
+      staticMethods.warning("美颜功能不可用");
+      return;
+    }
+    try {
+      if (enabled) {
+        beautyExtension.enableBeauty();
+        console.log("美颜已开启");
+      } else {
+        beautyExtension.disableBeauty();
+        console.log("美颜已关闭");
+      }
+      setBeautySettings((prev2) => ({
+        ...prev2,
+        enabled
+      }));
+    } catch (error2) {
+      console.error("美颜开关操作失败:", error2);
+      staticMethods.error("美颜开关操作失败");
+    }
+  }, [beautyExtension, beautyCompatible]);
+  const handleBeautyIntensityChange = reactExports.useCallback(
+    debounce$6((type4, value) => {
+      if (!beautyExtension || !beautyCompatible) {
+        return;
+      }
+      try {
+        let mode;
+        let settingKey;
+        switch (type4) {
+          case "white":
+            mode = EffectBeautyMode.EFFECT_WHITE_MODE;
+            settingKey = "whiteIntensity";
+            break;
+          case "smooth":
+            mode = EffectBeautyMode.EFFECT_SMOOTH_MODE;
+            settingKey = "smoothIntensity";
+            break;
+          case "sharpen":
+            mode = EffectBeautyMode.EFFECT_SHARPEN_MODE;
+            settingKey = "sharpenIntensity";
+            break;
+          default:
+            return;
+        }
+        beautyExtension.setBeautyIntensity(mode, value);
+        setBeautySettings((prev2) => ({
+          ...prev2,
+          [settingKey]: value
+        }));
+        console.log(`${type4} 强度已设置为:`, value);
+      } catch (error2) {
+        console.error("美颜强度设置失败:", error2);
+        staticMethods.error("美颜强度设置失败");
+      }
+    }, 300),
+    // 300ms 防抖延迟
+    [beautyExtension, beautyCompatible]
+  );
+  reactExports.useEffect(() => {
+    const savedBeautySettings = localStorage.getItem("beautySettings");
+    if (savedBeautySettings) {
+      try {
+        const parsed = JSON.parse(savedBeautySettings);
+        setBeautySettings(parsed);
+      } catch (error2) {
+        console.error("加载美颜设置失败:", error2);
+      }
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    localStorage.setItem("beautySettings", JSON.stringify(beautySettings));
+  }, [beautySettings]);
+  const handleCameraChange = reactExports.useCallback(async (newCameraId) => {
+    setSelectedCamera(newCameraId);
+    try {
+      const rtcInstance = getter().rtc;
+      if (rtcInstance && rtcInstance.setMediaDevices) {
+        const result = await rtcInstance.setMediaDevices({
+          cameraId: newCameraId,
+          mirrorEnabled
+        });
+        if (result.success) {
+          console.log("摄像头设备已切换:", newCameraId);
+        } else {
+          console.error("摄像头切换失败:", result.message);
+          staticMethods.error("摄像头切换失败");
+        }
+      }
+    } catch (error2) {
+      console.error("摄像头配置失败:", error2);
+      staticMethods.error("摄像头配置失败");
+    }
+  }, [rtc, mirrorEnabled]);
+  const handleMicrophoneChange = reactExports.useCallback(async (newMicrophoneId) => {
+    setSelectedMicrophone(newMicrophoneId);
+    try {
+      const rtcInstance = getter().rtc;
+      if (rtcInstance && rtcInstance.setMediaDevices) {
+        const result = await rtcInstance.setMediaDevices({
+          microphoneId: newMicrophoneId
+        });
+        if (result.success) {
+          console.log("麦克风设备已切换:", newMicrophoneId);
+        } else {
+          console.error("麦克风切换失败:", result.message);
+          staticMethods.error("麦克风切换失败");
+        }
+      }
+    } catch (error2) {
+      console.error("麦克风配置失败:", error2);
+      staticMethods.error("麦克风配置失败");
+    }
+  }, [rtc]);
+  const handleMirrorChange = reactExports.useCallback(async (checked) => {
+    setMirrorEnabled(checked);
+    try {
+      const rtcInstance = getter().rtc;
+      if (rtcInstance && rtcInstance.setMediaDevices) {
+        const result = await rtcInstance.setMediaDevices({
+          cameraId: selectedCamera,
+          mirrorEnabled: checked
+        });
+        if (result.success) {
+          console.log("镜像翻转已设置:", checked);
+        } else {
+          console.error("镜像翻转设置失败:", result.message);
+          staticMethods.error("镜像翻转设置失败");
+        }
+      }
+    } catch (error2) {
+      console.error("镜像翻转配置失败:", error2);
+      staticMethods.error("镜像翻转配置失败");
+    }
+  }, [rtc, selectedCamera]);
+  const closeMediaSettings = reactExports.useCallback(() => {
+    setIsModalVisible(false);
+  }, []);
+  const openMediaSettings = () => {
+    console.log("openMediaSettings");
+    setIsModalVisible(true);
+  };
+  const handleClose = reactExports.useCallback(() => {
+    closeMediaSettings();
+  }, [closeMediaSettings]);
+  reactExports.useEffect(() => {
+    console.log("useEffect openMediaSettings");
+    eventBus.on("openMediaSettings", openMediaSettings);
+    eventBus.on("closeMediaSettings", closeMediaSettings);
+    return () => {
+      eventBus.off("openMediaSettings", openMediaSettings);
+      eventBus.off("closeMediaSettings", closeMediaSettings);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, {
+    open: isModalVisible,
+    title: "媒体设置",
+    onCancel: handleClose,
+    width: 910,
+    footer: null,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+      className: "flex justify-between",
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+            className: "mb-6",
+            children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+              className: "flex items-center mb-2",
+              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                className: "mr-2",
+                children: "摄像头："
+              }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                className: "flex-1",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
+                  className: "w-full",
+                  value: selectedCamera,
+                  onChange: handleCameraChange,
+                  options: reactExports.useMemo(() => cameraDevices.map((device) => ({
+                    value: device.id,
+                    label: device.label
+                  })), [cameraDevices])
+                })
+              })]
+            }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+              className: "flex items-center mb-2",
+              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                className: "mr-2",
+                children: "麦克风："
+              }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                className: "flex-1",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
+                  className: "w-full",
+                  value: selectedMicrophone,
+                  onChange: handleMicrophoneChange,
+                  options: reactExports.useMemo(() => microphoneDevices.map((device) => ({
+                    value: device.id,
+                    label: device.label
+                  })), [microphoneDevices])
+                })
+              })]
+            }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+              className: "mt-8",
+              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                className: "flex items-center justify-between mb-2",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                  children: "音频监控"
+                })
+              }), /* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AudioVisualizer, {
+                  selectedMicrophone,
+                  isVisible: isModalVisible
+                })
+              })]
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+              className: "mt-8",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                className: "flex items-center justify-between mb-2",
+                children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                  children: "镜像翻转"
+                }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
+                  checked: mirrorEnabled,
+                  onChange: handleMirrorChange,
+                  size: "small"
+                })]
+              })
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+              className: "mt-8 border-t pt-6",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                className: "mb-4",
+                children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", {
+                  className: "text-lg font-medium mb-4 flex items-center",
+                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                    className: "mr-2",
+                    children: "🎨"
+                  }), "美颜设置", !beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                    className: "ml-2 text-xs text-red-500 bg-red-50 px-2 py-1 rounded",
+                    children: "不支持"
+                  })]
+                }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                  className: "flex items-center justify-between mb-4",
+                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                    className: "text-sm",
+                    children: "启用美颜"
+                  }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
+                    checked: beautySettings.enabled,
+                    onChange: handleBeautyToggle,
+                    disabled: !beautyCompatible,
+                    size: "small"
+                  })]
+                }), beautySettings.enabled && beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                  className: "space-y-4",
+                  children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                      className: "flex items-center justify-between mb-2",
+                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                        className: "text-sm",
+                        children: "美白强度"
+                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+                        className: "text-xs text-gray-500",
+                        children: [Math.round(beautySettings.whiteIntensity * 100), "%"]
+                      })]
+                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
+                      min: 0,
+                      max: 1,
+                      step: 0.1,
+                      value: beautySettings.whiteIntensity,
+                      onChange: (value) => handleBeautyIntensityChange("white", value),
+                      tooltip: {
+                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
+                      }
+                    })]
+                  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                      className: "flex items-center justify-between mb-2",
+                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                        className: "text-sm",
+                        children: "磨皮强度"
+                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+                        className: "text-xs text-gray-500",
+                        children: [Math.round(beautySettings.smoothIntensity * 100), "%"]
+                      })]
+                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
+                      min: 0,
+                      max: 1,
+                      step: 0.1,
+                      value: beautySettings.smoothIntensity,
+                      onChange: (value) => handleBeautyIntensityChange("smooth", value),
+                      tooltip: {
+                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
+                      }
+                    })]
+                  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+                      className: "flex items-center justify-between mb-2",
+                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                        className: "text-sm",
+                        children: "锐化强度"
+                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+                        className: "text-xs text-gray-500",
+                        children: [Math.round(beautySettings.sharpenIntensity * 100), "%"]
+                      })]
+                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
+                      min: 0,
+                      max: 1,
+                      step: 0.1,
+                      value: beautySettings.sharpenIntensity,
+                      onChange: (value) => handleBeautyIntensityChange("sharpen", value),
+                      tooltip: {
+                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
+                      }
+                    })]
+                  })]
+                }), !beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
+                  message: "美颜功能不可用",
+                  description: "您的浏览器不支持美颜功能，请使用 Chrome 78+ 或其他兼容浏览器",
+                  type: "warning",
+                  showIcon: true,
+                  icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {}),
+                  className: "mt-4"
+                })]
+              })
+            })]
+          })
+        })
+      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
+            children: isModalVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(CallUserVideo, {
+              video_id: (callCurrentUser == null ? void 0 : callCurrentUser.rtc_userid) + "preview",
+              user: callCurrentUser,
+              className: " h-60",
+              selectable: false
+            })
+          })
+        }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+          className: "mt-4 flex items-center justify-center",
+          children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+            className: "text-sm",
+            children: [(callCurrentUser == null ? void 0 : callCurrentUser.isVideoEnabled) ? "开启" : "关闭", "摄像头"]
+          }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
+            checked: callCurrentUser == null ? void 0 : callCurrentUser.isVideoEnabled,
+            onChange: toggleVideo,
+            size: "small"
+          })]
+        })]
+      })]
+    })
+  });
+};
 const CallComponent = () => {
   const liveId = useLiveId();
   const {
@@ -280310,7 +280793,7 @@ const CallComponent = () => {
             })
           }), callConfig.rule === "main" && callConfig.isCall && /* @__PURE__ */ jsxRuntimeExports.jsx(CallBottomActions, {
             onConfigUpdate: handleUpdateRTCConfig
-          })]
+          }), (callConfig == null ? void 0 : callConfig.isCall) && /* @__PURE__ */ jsxRuntimeExports.jsx(MediaSettings, {})]
         })
       })
     })
@@ -280967,10 +281450,141 @@ const useCommentSocketStore = create$c((set3, get4) => ({
   disconnect: void 0,
   // 业务方法（空实现，后续由 Hook 覆盖）
   fetChatUrl: async (id3) => {
-  },
-  setCallback: () => {
   }
 }));
+function useCommentSocket() {
+  const liveId = useLiveId();
+  const callbackRef = reactExports.useRef();
+  const fetchLivePush = useLivePushCodeStore((state) => state.fetchLivePush);
+  const chat_url = useCommentSocketStore((state) => state.chat_url);
+  const handleMessageChange = reactExports.useCallback((mess) => {
+    var _a2;
+    if (!(mess == null ? void 0 : mess.data))
+      return;
+    let message2;
+    try {
+      message2 = JSON.parse(mess.data);
+    } catch (e3) {
+      console.error("解析 WebSocket 消息失败：", e3);
+      return;
+    }
+    useCommentSocketStore.setState({ latestMessage: mess });
+    switch (message2.type) {
+      case "comment_delete":
+        useCommentSocketStore.setState({ commentDeleteItem: message2.data });
+        setTimeout(() => {
+          useCommentSocketStore.setState({ commentDeleteItem: {} });
+        }, 0);
+        break;
+      case "chat_forward":
+        (_a2 = callbackRef.current) == null ? void 0 : _a2.call(callbackRef, message2.data);
+        break;
+      case "activity_config_change":
+        useCommentSocketStore.setState({ activityConfigChange: message2.data });
+        break;
+    }
+  }, []);
+  const socketRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (!chat_url) {
+      return;
+    }
+    if (socketRef.current) {
+      socketRef.current.close();
+      socketRef.current = null;
+    }
+    try {
+      socketRef.current = new WebSocket(chat_url);
+      socketRef.current.onopen = (event) => {
+        if (liveId && socketRef.current) {
+          try {
+            const joinRoomMessage = JSON.stringify({
+              type: "join_room",
+              data: { room_id: liveId }
+            });
+            socketRef.current.send(joinRoomMessage);
+          } catch (error2) {
+            console.error("❌ WebSocket: 发送 join_room 失败:", error2);
+          }
+        }
+        useCommentSocketStore.setState({ readyState: 1 });
+      };
+      socketRef.current.onclose = (event) => {
+        useCommentSocketStore.setState({ readyState: 3 });
+      };
+      socketRef.current.onerror = (error2) => {
+        console.error("❌ WebSocket: 连接错误:", error2);
+        useCommentSocketStore.setState({ readyState: 3 });
+      };
+      socketRef.current.onmessage = (event) => {
+        handleMessageChange(event);
+      };
+    } catch (error2) {
+      console.error("❌ WebSocket: 创建连接失败:", error2);
+      useCommentSocketStore.setState({ readyState: 3 });
+    }
+    return () => {
+      if (socketRef.current) {
+        socketRef.current.close();
+        socketRef.current = null;
+      }
+    };
+  }, [chat_url, liveId, handleMessageChange]);
+  const fetChatUrl = reactExports.useCallback(
+    async (id3) => {
+      if (!id3) {
+        return;
+      }
+      try {
+        const res = await fetchLivePush(id3);
+        if (!res) {
+          console.error("❌ 获取直播推流配置失败");
+          return;
+        }
+        let newChatUrl = res.chat_url || "";
+        if (newChatUrl) {
+          const userAgentParam = `equipment=${encodeURIComponent(navigator.userAgent)}`;
+          newChatUrl += newChatUrl.includes("?") ? `&${userAgentParam}` : `?${userAgentParam}`;
+        } else {
+          console.error("❌ 未获取到有效的 chat_url");
+        }
+        useCommentSocketStore.setState({
+          chat_url: newChatUrl,
+          rtmUrl: res.rtm_push_url || "",
+          webTransportUrl: res.web_transport_url || ""
+        });
+      } catch (error2) {
+        console.error("❌ 获取直播推流配置失败:", error2);
+      }
+    },
+    [fetchLivePush]
+  );
+  const setCallback = reactExports.useCallback((callback) => {
+    callbackRef.current = callback;
+  }, []);
+  const sendMessage = reactExports.useCallback((message2) => {
+    if (socketRef.current && socketRef.current.readyState === 1) {
+      socketRef.current.send(message2);
+    } else {
+      console.error("useCommentSocket - 发送消息失败，WebSocket 未连接");
+    }
+  }, []);
+  const disconnect = reactExports.useCallback(() => {
+    if (socketRef.current) {
+      socketRef.current.close();
+      socketRef.current = null;
+      useCommentSocketStore.setState({ readyState: 3 });
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    useCommentSocketStore.setState({
+      sendMessage,
+      disconnect,
+      fetChatUrl
+    });
+  }, [sendMessage, disconnect, fetChatUrl]);
+  return { ...useCommentSocketStore.getState(), setCallback };
+}
 function getTargetElement(target, defaultElement) {
   if (!target) {
     return defaultElement;
@@ -288902,7 +289516,7 @@ const ChatComponent = () => {
     fetChatUrl,
     disconnect,
     setCallback
-  } = useCommentSocketStore();
+  } = useCommentSocket();
   const [selectFilter, setSelectFilter] = reactExports.useState(1);
   const fetchInteractionList = async () => {
     const res = await request("/bis/interaction-list", {
@@ -288942,11 +289556,20 @@ const ChatComponent = () => {
     }
   };
   reactExports.useEffect(() => {
-    fetChatUrl(liveId);
+    setCallback(handleMessage);
     return () => {
-      disconnect == null ? void 0 : disconnect();
+      setCallback(() => {
+      });
     };
   }, []);
+  reactExports.useEffect(() => {
+    if (liveId) {
+      fetChatUrl(liveId);
+    }
+    return () => {
+      disconnect == null ? void 0 : disconnect();
+    };
+  }, [liveId, fetChatUrl, disconnect]);
   const handleMessage = (message2) => {
     console.log("New message received:", message2);
     if (Object.keys(message2).length === 0)
@@ -288971,13 +289594,6 @@ const ChatComponent = () => {
       }
     }
   };
-  reactExports.useEffect(() => {
-    setCallback(handleMessage);
-    return () => {
-      setCallback(() => {
-      });
-    };
-  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
     className: " h-full",
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
@@ -292200,618 +292816,6 @@ const RtcJoomRoom = reactExports.memo(({
     })
   });
 });
-const AudioVisualizer = reactExports.memo(
-  ({ selectedMicrophone, isVisible: isVisible3, onVolumeLevelsChange }) => {
-    const [audioContext, setAudioContext] = reactExports.useState(null);
-    const [analyser, setAnalyser] = reactExports.useState(null);
-    const [microphoneStream, setMicrophoneStream] = reactExports.useState(null);
-    const [volumeLevels, setVolumeLevels] = reactExports.useState(Array(12).fill(0));
-    const animationFrameRef = reactExports.useRef(null);
-    const canvasRef = reactExports.useRef(null);
-    const microphoneStreamRef = reactExports.useRef(microphoneStream);
-    const audioContextRef = reactExports.useRef(audioContext);
-    const analyserRef = reactExports.useRef(analyser);
-    reactExports.useEffect(() => {
-      microphoneStreamRef.current = microphoneStream;
-      audioContextRef.current = audioContext;
-      analyserRef.current = analyser;
-    }, [microphoneStream, audioContext, analyser]);
-    const cleanupMediaResources = reactExports.useCallback(() => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-      if (microphoneStreamRef.current) {
-        microphoneStreamRef.current.getTracks().forEach((track) => track.stop());
-        setMicrophoneStream(null);
-      }
-      if (audioContextRef.current) {
-        audioContextRef.current.close().catch((err2) => console.error("关闭音频上下文失败:", err2));
-        setAudioContext(null);
-        setAnalyser(null);
-      }
-    }, []);
-    reactExports.useEffect(() => {
-      if (onVolumeLevelsChange) {
-        onVolumeLevelsChange(volumeLevels);
-      }
-    }, [volumeLevels, onVolumeLevelsChange]);
-    reactExports.useEffect(() => {
-      if (isVisible3 && selectedMicrophone) {
-        const context = new (window.AudioContext || window.webkitAudioContext)();
-        setAudioContext(context);
-        const audioAnalyser = context.createAnalyser();
-        audioAnalyser.fftSize = 2048;
-        setAnalyser(audioAnalyser);
-        navigator.mediaDevices.getUserMedia({
-          audio: {
-            deviceId: selectedMicrophone ? { exact: selectedMicrophone } : void 0
-          }
-        }).then((stream) => {
-          setMicrophoneStream(stream);
-          const source = context.createMediaStreamSource(stream);
-          source.connect(audioAnalyser);
-          const canvas = canvasRef.current;
-          const canvasCtx = canvas == null ? void 0 : canvas.getContext("2d");
-          const frequencyDataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
-          const timeDataArray = new Uint8Array(audioAnalyser.frequencyBinCount);
-          const analyzeVolume = () => {
-            audioAnalyser.getByteFrequencyData(frequencyDataArray);
-            audioAnalyser.getByteTimeDomainData(timeDataArray);
-            if (canvasCtx && canvas) {
-              canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
-              canvasCtx.lineWidth = 2;
-              canvasCtx.strokeStyle = "#2196F3";
-              canvasCtx.beginPath();
-              const sliceWidth = canvas.width / timeDataArray.length;
-              let x = 0;
-              for (let i = 0; i < timeDataArray.length; i++) {
-                const v3 = timeDataArray[i] / 128;
-                const y3 = v3 * canvas.height / 2;
-                if (i === 0) {
-                  canvasCtx.moveTo(x, y3);
-                } else {
-                  canvasCtx.lineTo(x, y3);
-                }
-                x += sliceWidth;
-              }
-              canvasCtx.lineTo(canvas.width, canvas.height / 2);
-              canvasCtx.stroke();
-            }
-            const segmentSize = Math.floor(frequencyDataArray.length / 12);
-            const normalizedLevels = Array(12).fill(0).map((_2, index2) => {
-              const start2 = index2 * segmentSize;
-              const end2 = start2 + segmentSize;
-              const segmentAvg = frequencyDataArray.slice(start2, end2).reduce((sum2, value) => sum2 + value, 0) / segmentSize;
-              return Math.min(1, Math.pow(segmentAvg / 255, 0.8));
-            });
-            setVolumeLevels(normalizedLevels);
-            animationFrameRef.current = requestAnimationFrame(analyzeVolume);
-          };
-          analyzeVolume();
-        }).catch((err2) => {
-          console.error("获取麦克风失败:", err2);
-          const interval = setInterval(() => {
-            const newLevels = Array(12).fill(0).map(() => Math.random());
-            setVolumeLevels(newLevels);
-          }, 200);
-          return () => clearInterval(interval);
-        });
-        return cleanupMediaResources;
-      }
-    }, [isVisible3, selectedMicrophone, cleanupMediaResources]);
-    reactExports.useEffect(() => {
-      return () => {
-        cleanupMediaResources();
-      };
-    }, [cleanupMediaResources]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: " h-24 bg-gray-50 rounded border border-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("canvas", { ref: canvasRef, className: " h-full", width: "400", height: "100" }) }) });
-  }
-);
-AudioVisualizer.displayName = "AudioVisualizer";
-class MediaErrorBoundary extends reactExports.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false,
-      errorMessage: ""
-    };
-  }
-  static getDerivedStateFromError(error2) {
-    return {
-      hasError: true,
-      errorMessage: error2.message
-    };
-  }
-  componentDidCatch(error2, errorInfo) {
-    console.error("媒体设备错误:", error2, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-        className: "p-4 border border-red-300 rounded bg-red-50",
-        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
-          message: "媒体设备错误",
-          description: `无法访问媒体设备: ${this.state.errorMessage}。请检查设备权限或连接。`,
-          type: "error",
-          showIcon: true,
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {})
-        }), /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, {
-          type: "primary",
-          className: "mt-4",
-          onClick: () => this.setState({
-            hasError: false,
-            errorMessage: ""
-          }),
-          children: "重试"
-        })]
-      });
-    }
-    return this.props.children;
-  }
-}
-const MediaSettings = () => {
-  const {
-    callCurrentUser,
-    toggleVideo,
-    rtc,
-    getter
-  } = useCallStore();
-  const [isModalVisible, setIsModalVisible] = reactExports.useState(false);
-  const [mirrorEnabled, setMirrorEnabled] = reactExports.useState(true);
-  const [cameraDevices, setCameraDevices] = reactExports.useState([]);
-  const [microphoneDevices, setMicrophoneDevices] = reactExports.useState([]);
-  const [selectedCamera, setSelectedCamera] = reactExports.useState("");
-  const [selectedMicrophone, setSelectedMicrophone] = reactExports.useState("");
-  const [beautySettings, setBeautySettings] = reactExports.useState({
-    enabled: false,
-    whiteIntensity: 0.5,
-    smoothIntensity: 0.5,
-    sharpenIntensity: 0.5
-  });
-  const [beautyExtension, setBeautyExtension] = reactExports.useState(null);
-  const [beautyCompatible, setBeautyCompatible] = reactExports.useState(false);
-  console.log("beautyCompatible", beautyCompatible);
-  const [beautyInitialized, setBeautyInitialized] = reactExports.useState(false);
-  const getDevices = reactExports.useCallback(async () => {
-    try {
-      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
-        console.error("浏览器不支持获取媒体设备列表");
-        staticMethods.error("您的浏览器不支持媒体设备选择功能");
-        return;
-      }
-      await navigator.mediaDevices.getUserMedia({
-        audio: true,
-        video: true
-      }).catch((err2) => console.error("获取媒体权限失败:", err2));
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      const cameras = devices.filter((device) => device.kind === "videoinput").map((device) => ({
-        id: device.deviceId,
-        label: device.label || `摄像头 ${device.deviceId.slice(0, 5)}...`
-      }));
-      const microphones = devices.filter((device) => device.kind === "audioinput").map((device) => ({
-        id: device.deviceId,
-        label: device.label || `麦克风 ${device.deviceId.slice(0, 5)}...`
-      }));
-      if (cameras.length > 0) {
-        setCameraDevices(cameras);
-        setSelectedCamera((prevCamera) => {
-          return cameras.find((cam) => cam.id === prevCamera) ? prevCamera : cameras[0].id;
-        });
-      }
-      if (microphones.length > 0) {
-        setMicrophoneDevices(microphones);
-        setSelectedMicrophone((prevMic) => {
-          return microphones.find((mic) => mic.id === prevMic) ? prevMic : microphones[0].id;
-        });
-      }
-    } catch (error2) {
-      console.error("获取设备列表失败:", error2);
-      staticMethods.error("获取媒体设备失败，请检查设备权限");
-      setCameraDevices([{
-        id: "default",
-        label: "默认摄像头"
-      }]);
-      setMicrophoneDevices([{
-        id: "default",
-        label: "默认麦克风"
-      }]);
-    }
-  }, []);
-  reactExports.useEffect(() => {
-    if (isModalVisible) {
-      getDevices();
-    }
-    if (navigator.mediaDevices) {
-      navigator.mediaDevices.addEventListener("devicechange", getDevices);
-      return () => {
-        navigator.mediaDevices.removeEventListener("devicechange", getDevices);
-      };
-    }
-  }, [getDevices, isModalVisible]);
-  reactExports.useEffect(() => {
-    if (isModalVisible && !beautyInitialized) {
-      initializeBeautyExtension();
-    }
-  }, [isModalVisible, beautyInitialized]);
-  const initializeBeautyExtension = reactExports.useCallback(async () => {
-    try {
-      const rtcInstance = getter().rtc;
-      if (rtcInstance && rtcInstance.beautyExtension) {
-        const extension = rtcInstance.beautyExtension;
-        const compatibilityResult = await extension.checkCompatibility();
-        console.log("浏览器兼容性检查结果:", compatibilityResult);
-        if (compatibilityResult.isCompatible) {
-          setBeautyExtension(extension);
-          setBeautyCompatible(true);
-          setBeautyInitialized(true);
-          console.log("美颜扩展初始化成功");
-        } else {
-          console.warn("浏览器不支持美颜功能:", compatibilityResult.message || "兼容性检查失败");
-          setBeautyCompatible(false);
-          staticMethods.warning("您的浏览器不支持美颜功能，请使用 Chrome 78+ 或其他兼容浏览器");
-        }
-      } else {
-        console.warn("RTC客户端或美颜扩展未初始化");
-        setBeautyCompatible(false);
-        staticMethods.warning("RTC客户端未初始化，无法使用美颜功能");
-      }
-    } catch (error2) {
-      console.error("美颜扩展初始化失败:", error2);
-      setBeautyCompatible(false);
-      staticMethods.error("美颜功能初始化失败");
-    }
-  }, [rtc]);
-  const handleBeautyToggle = reactExports.useCallback((enabled) => {
-    if (!beautyExtension || !beautyCompatible) {
-      staticMethods.warning("美颜功能不可用");
-      return;
-    }
-    try {
-      if (enabled) {
-        beautyExtension.enableBeauty();
-        console.log("美颜已开启");
-      } else {
-        beautyExtension.disableBeauty();
-        console.log("美颜已关闭");
-      }
-      setBeautySettings((prev2) => ({
-        ...prev2,
-        enabled
-      }));
-    } catch (error2) {
-      console.error("美颜开关操作失败:", error2);
-      staticMethods.error("美颜开关操作失败");
-    }
-  }, [beautyExtension, beautyCompatible]);
-  const handleBeautyIntensityChange = reactExports.useCallback(
-    debounce$6((type4, value) => {
-      if (!beautyExtension || !beautyCompatible) {
-        return;
-      }
-      try {
-        let mode;
-        let settingKey;
-        switch (type4) {
-          case "white":
-            mode = EffectBeautyMode.EFFECT_WHITE_MODE;
-            settingKey = "whiteIntensity";
-            break;
-          case "smooth":
-            mode = EffectBeautyMode.EFFECT_SMOOTH_MODE;
-            settingKey = "smoothIntensity";
-            break;
-          case "sharpen":
-            mode = EffectBeautyMode.EFFECT_SHARPEN_MODE;
-            settingKey = "sharpenIntensity";
-            break;
-          default:
-            return;
-        }
-        beautyExtension.setBeautyIntensity(mode, value);
-        setBeautySettings((prev2) => ({
-          ...prev2,
-          [settingKey]: value
-        }));
-        console.log(`${type4} 强度已设置为:`, value);
-      } catch (error2) {
-        console.error("美颜强度设置失败:", error2);
-        staticMethods.error("美颜强度设置失败");
-      }
-    }, 300),
-    // 300ms 防抖延迟
-    [beautyExtension, beautyCompatible]
-  );
-  reactExports.useEffect(() => {
-    const savedBeautySettings = localStorage.getItem("beautySettings");
-    if (savedBeautySettings) {
-      try {
-        const parsed = JSON.parse(savedBeautySettings);
-        setBeautySettings(parsed);
-      } catch (error2) {
-        console.error("加载美颜设置失败:", error2);
-      }
-    }
-  }, []);
-  reactExports.useEffect(() => {
-    localStorage.setItem("beautySettings", JSON.stringify(beautySettings));
-  }, [beautySettings]);
-  const handleCameraChange = reactExports.useCallback(async (newCameraId) => {
-    setSelectedCamera(newCameraId);
-    try {
-      const rtcInstance = getter().rtc;
-      if (rtcInstance && rtcInstance.setMediaDevices) {
-        const result = await rtcInstance.setMediaDevices({
-          cameraId: newCameraId,
-          mirrorEnabled
-        });
-        if (result.success) {
-          console.log("摄像头设备已切换:", newCameraId);
-        } else {
-          console.error("摄像头切换失败:", result.message);
-          staticMethods.error("摄像头切换失败");
-        }
-      }
-    } catch (error2) {
-      console.error("摄像头配置失败:", error2);
-      staticMethods.error("摄像头配置失败");
-    }
-  }, [rtc, mirrorEnabled]);
-  const handleMicrophoneChange = reactExports.useCallback(async (newMicrophoneId) => {
-    setSelectedMicrophone(newMicrophoneId);
-    try {
-      const rtcInstance = getter().rtc;
-      if (rtcInstance && rtcInstance.setMediaDevices) {
-        const result = await rtcInstance.setMediaDevices({
-          microphoneId: newMicrophoneId
-        });
-        if (result.success) {
-          console.log("麦克风设备已切换:", newMicrophoneId);
-        } else {
-          console.error("麦克风切换失败:", result.message);
-          staticMethods.error("麦克风切换失败");
-        }
-      }
-    } catch (error2) {
-      console.error("麦克风配置失败:", error2);
-      staticMethods.error("麦克风配置失败");
-    }
-  }, [rtc]);
-  const handleMirrorChange = reactExports.useCallback(async (checked) => {
-    setMirrorEnabled(checked);
-    try {
-      const rtcInstance = getter().rtc;
-      if (rtcInstance && rtcInstance.setMediaDevices) {
-        const result = await rtcInstance.setMediaDevices({
-          cameraId: selectedCamera,
-          mirrorEnabled: checked
-        });
-        if (result.success) {
-          console.log("镜像翻转已设置:", checked);
-        } else {
-          console.error("镜像翻转设置失败:", result.message);
-          staticMethods.error("镜像翻转设置失败");
-        }
-      }
-    } catch (error2) {
-      console.error("镜像翻转配置失败:", error2);
-      staticMethods.error("镜像翻转配置失败");
-    }
-  }, [rtc, selectedCamera]);
-  const closeMediaSettings = reactExports.useCallback(() => {
-    setIsModalVisible(false);
-  }, []);
-  const openMediaSettings = () => {
-    console.log("openMediaSettings");
-    setIsModalVisible(true);
-  };
-  const handleClose = reactExports.useCallback(() => {
-    closeMediaSettings();
-  }, [closeMediaSettings]);
-  reactExports.useEffect(() => {
-    console.log("useEffect openMediaSettings");
-    eventBus.on("openMediaSettings", openMediaSettings);
-    eventBus.on("closeMediaSettings", closeMediaSettings);
-    return () => {
-      eventBus.off("openMediaSettings", openMediaSettings);
-      eventBus.off("closeMediaSettings", closeMediaSettings);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, {
-    open: isModalVisible,
-    title: "媒体设置",
-    onCancel: handleClose,
-    width: 910,
-    footer: null,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: "flex justify-between",
-      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-            className: "mb-6",
-            children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-              className: "flex items-center mb-2",
-              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                className: "mr-2",
-                children: "摄像头："
-              }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                className: "flex-1",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
-                  className: "w-full",
-                  value: selectedCamera,
-                  onChange: handleCameraChange,
-                  options: reactExports.useMemo(() => cameraDevices.map((device) => ({
-                    value: device.id,
-                    label: device.label
-                  })), [cameraDevices])
-                })
-              })]
-            }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-              className: "flex items-center mb-2",
-              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                className: "mr-2",
-                children: "麦克风："
-              }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                className: "flex-1",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select$1, {
-                  className: "w-full",
-                  value: selectedMicrophone,
-                  onChange: handleMicrophoneChange,
-                  options: reactExports.useMemo(() => microphoneDevices.map((device) => ({
-                    value: device.id,
-                    label: device.label
-                  })), [microphoneDevices])
-                })
-              })]
-            }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-              className: "mt-8",
-              children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                className: "flex items-center justify-between mb-2",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                  children: "音频监控"
-                })
-              }), /* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(AudioVisualizer, {
-                  selectedMicrophone,
-                  isVisible: isModalVisible
-                })
-              })]
-            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              className: "mt-8",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                className: "flex items-center justify-between mb-2",
-                children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                  children: "镜像翻转"
-                }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
-                  checked: mirrorEnabled,
-                  onChange: handleMirrorChange,
-                  size: "small"
-                })]
-              })
-            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              className: "mt-8 border-t pt-6",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                className: "mb-4",
-                children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("h3", {
-                  className: "text-lg font-medium mb-4 flex items-center",
-                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                    className: "mr-2",
-                    children: "🎨"
-                  }), "美颜设置", !beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                    className: "ml-2 text-xs text-red-500 bg-red-50 px-2 py-1 rounded",
-                    children: "不支持"
-                  })]
-                }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                  className: "flex items-center justify-between mb-4",
-                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                    className: "text-sm",
-                    children: "启用美颜"
-                  }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
-                    checked: beautySettings.enabled,
-                    onChange: handleBeautyToggle,
-                    disabled: !beautyCompatible,
-                    size: "small"
-                  })]
-                }), beautySettings.enabled && beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                  className: "space-y-4",
-                  children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                      className: "flex items-center justify-between mb-2",
-                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                        className: "text-sm",
-                        children: "美白强度"
-                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-                        className: "text-xs text-gray-500",
-                        children: [Math.round(beautySettings.whiteIntensity * 100), "%"]
-                      })]
-                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
-                      min: 0,
-                      max: 1,
-                      step: 0.1,
-                      value: beautySettings.whiteIntensity,
-                      onChange: (value) => handleBeautyIntensityChange("white", value),
-                      tooltip: {
-                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
-                      }
-                    })]
-                  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                      className: "flex items-center justify-between mb-2",
-                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                        className: "text-sm",
-                        children: "磨皮强度"
-                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-                        className: "text-xs text-gray-500",
-                        children: [Math.round(beautySettings.smoothIntensity * 100), "%"]
-                      })]
-                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
-                      min: 0,
-                      max: 1,
-                      step: 0.1,
-                      value: beautySettings.smoothIntensity,
-                      onChange: (value) => handleBeautyIntensityChange("smooth", value),
-                      tooltip: {
-                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
-                      }
-                    })]
-                  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-                      className: "flex items-center justify-between mb-2",
-                      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                        className: "text-sm",
-                        children: "锐化强度"
-                      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-                        className: "text-xs text-gray-500",
-                        children: [Math.round(beautySettings.sharpenIntensity * 100), "%"]
-                      })]
-                    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Slider2, {
-                      min: 0,
-                      max: 1,
-                      step: 0.1,
-                      value: beautySettings.sharpenIntensity,
-                      onChange: (value) => handleBeautyIntensityChange("sharpen", value),
-                      tooltip: {
-                        formatter: (value) => `${Math.round((value || 0) * 100)}%`
-                      }
-                    })]
-                  })]
-                }), !beautyCompatible && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, {
-                  message: "美颜功能不可用",
-                  description: "您的浏览器不支持美颜功能，请使用 Chrome 78+ 或其他兼容浏览器",
-                  type: "warning",
-                  showIcon: true,
-                  icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {}),
-                  className: "mt-4"
-                })]
-              })
-            })]
-          })
-        })
-      }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-        children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediaErrorBoundary, {
-            children: isModalVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(CallUserVideo, {
-              video_id: (callCurrentUser == null ? void 0 : callCurrentUser.rtc_userid) + "preview",
-              user: callCurrentUser,
-              className: " h-60",
-              selectable: false
-            })
-          })
-        }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-          className: "mt-4 flex items-center justify-center",
-          children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-            className: "text-sm",
-            children: [(callCurrentUser == null ? void 0 : callCurrentUser.isVideoEnabled) ? "开启" : "关闭", "摄像头"]
-          }), /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, {
-            checked: callCurrentUser == null ? void 0 : callCurrentUser.isVideoEnabled,
-            onChange: toggleVideo,
-            size: "small"
-          })]
-        })]
-      })]
-    })
-  });
-};
 const CallHome$1 = () => {
   const audioContextRef = reactExports.useRef(null);
   const audioDestinationRef = reactExports.useRef(null);
@@ -292877,7 +292881,7 @@ const CallHome$1 = () => {
           rule: "sub"
         }), /* @__PURE__ */ jsxRuntimeExports.jsx(RightSidebar, {
           canvasSetting
-        }), (callConfig == null ? void 0 : callConfig.isCall) && /* @__PURE__ */ jsxRuntimeExports.jsx(MediaSettings, {})]
+        })]
       })]
     }), (callCurrentUser == null ? void 0 : callCurrentUser.waiting_mode_state) === WaitingModeState.WAITING && /* @__PURE__ */ jsxRuntimeExports.jsx(LiveWaitingRoom, {
       hostName: callConfig.title
@@ -296185,13 +296189,13 @@ const CanvasUploadVideo = ({
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Dragger$1, {
         ...props,
         children: videoUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-          className: "relative  aspect-video flex items-center justify-center videoUploadWrap",
+          className: "relative w-full aspect-video flex items-center justify-center videoUploadWrap",
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx("video", {
             src: videoUrl,
             autoPlay: !isVideoAutoPlay,
-            className: " aspect-video"
+            className: "w-full"
           }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-            className: " h-full absolute top-0 left-0 text-#fff bg-#0009 items-center justify-center uploadContent flex-col",
+            className: "w-full h-full absolute top-0 left-0 text-#fff bg-#0009 items-center justify-center uploadContent flex-col",
             style: {
               display: "none"
             },
@@ -296335,7 +296339,7 @@ const CanvasUploadAudio = ({
             className: "mt-2",
             children: fileData.current.name
           }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-            className: " h-full absolute top-0 left-0 text-#fff bg-#0009 items-center justify-center uploadContent flex-col",
+            className: "w-full h-full absolute top-0 left-0 text-#fff bg-#0009 items-center justify-center uploadContent flex-col",
             style: {
               display: "none"
             },
@@ -305608,7 +305612,6 @@ const CallHome = () => {
     fabricInstance,
     updateCallConfig
   } = useCallStore();
-  console.log("重新渲染推流端");
   const pcRef = reactExports.useRef(null);
   const audioContextRef = reactExports.useRef(null);
   const audioDestinationRef = reactExports.useRef(null);
@@ -305773,16 +305776,6 @@ const CallHome = () => {
       newBackgroundAudioStreams.set(streamId, audioStream);
       audioStreamRef.current = newBackgroundAudioStreams;
     });
-    return () => {
-      var _a3;
-      const rtmp = rtmpRef.current;
-      console.log("rtmp", rtmp);
-      if (rtmpRef.current) {
-        rtmpRef.current.stopPush();
-        (_a3 = rtmpRef.current) == null ? void 0 : _a3.destroy();
-        rtmpRef.current = null;
-      }
-    };
   }, []);
   reactExports.useEffect(() => {
     const handleBeforeUnload = (e3) => {
@@ -305835,26 +305828,54 @@ const CallHome = () => {
       return;
     (_a3 = livePlayerRef.current) == null ? void 0 : _a3.canvasRequestRenderAll();
   }, [isSelectedId, isHoveredId]);
-  const sizeEl = useSdkStore((state) => state.callConfig.el);
+  const {
+    sizeEl,
+    styleConfig
+  } = useSdkStore((state) => ({
+    sizeEl: state.callConfig.el,
+    styleConfig: state.styleConfig
+  }));
   const wapRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
-    console.log("[livePlayer.设置视频容器高度]", sizeEl);
     if (!wapRef.current)
       return;
-    let el2;
+    let el2 = null;
     if (typeof sizeEl === "string") {
       el2 = document.getElementById(sizeEl);
-    } else {
+      if (!el2) {
+        console.warn(`[ResizeObserver] 找不到 ID 为 "${sizeEl}" 的元素，`);
+      }
+    } else if (sizeEl instanceof HTMLElement) {
       el2 = sizeEl;
+    } else {
+      console.warn("[ResizeObserver] sizeEl 无效，");
     }
-    if (!el2)
+    if (!el2) {
+      console.error("[ResizeObserver] 无法获取要观察的元素");
       return;
+    }
+    console.log("[ResizeObserver] 开始观察元素:", el2);
+    const updateHeight = () => {
+      if (wapRef.current) {
+        const newHeight = el2.clientHeight - 60;
+        wapRef.current.style.height = newHeight + "px";
+        wapRef.current.style.minHeight = "770px";
+        console.log("[ResizeObserver] 更新高度:", newHeight);
+      }
+    };
     const resizeObserver2 = new ResizeObserver(() => {
-      wapRef.current.style.height = (el2 == null ? void 0 : el2.clientHeight) - 60 + "px";
+      updateHeight();
     });
     resizeObserver2.observe(el2);
+    const handleWindowResize = () => {
+      updateHeight();
+    };
+    window.addEventListener("resize", handleWindowResize);
+    updateHeight();
     return () => {
+      console.log("[ResizeObserver] 停止观察元素:", el2);
       resizeObserver2.disconnect();
+      window.removeEventListener("resize", handleWindowResize);
     };
   }, [sizeEl]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ConfigProvider$1, {
@@ -305869,7 +305890,7 @@ const CallHome = () => {
       }
     },
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(RtcJoomRoom, {}), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: "h-full bg-#0e131c min-w-[1500px] min-h-[770px] overflow-auto",
+      className: `h-full bg-#0e131c min-w-[${styleConfig.minWidth}] min-h-[${styleConfig.minHeight}] overflow-auto`,
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Head$1, {
         canvasSetting,
         setCanvasSetting,
@@ -305880,7 +305901,7 @@ const CallHome = () => {
         audioDestinationRef
       }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
         ref: wapRef,
-        className: "h-[calc(100vh-60px)] relative flex mt-1 gap-1 ",
+        className: "h-[calc(100%-60px)] relative flex mt-1 gap-1 ",
         children: [/* @__PURE__ */ jsxRuntimeExports.jsx(LeftSidebar, {
           onSceneClick: handleSceneClick,
           currentScene,