@chaomingd/design 0.0.68

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# @chaomingd/design
+
+[![NPM version](https://img.shields.io/npm/v/@chaomingd/design.svg?style=flat)](https://npmjs.com/package/@chaomingd/design)
+[![NPM downloads](http://img.shields.io/npm/dm/@chaomingd/design.svg?style=flat)](https://npmjs.com/package/@chaomingd/design)
+
+## Install
+
+```bash
+$ pnpm install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/dist/esm/CheckGroup/context.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CheckGroupModel } from './hooks/useCheckGroup';
+import { CheckGroupProps } from './type';
+type CheckGroupContextType = {
+    model: CheckGroupModel<any>;
+    props: CheckGroupProps<any>;
+};
+export declare const CheckGroupContext: import("react").Context<CheckGroupContextType>;
+export {};

package/dist/esm/CheckGroup/context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { CheckGroupModel } from "./hooks/useCheckGroup";
+export var CheckGroupContext = /*#__PURE__*/createContext({
+  model: new CheckGroupModel(),
+  props: {}
+});

package/dist/esm/CheckGroup/hooks/useCheckGroup.d.ts

@@ -0,0 +1,21 @@
+import { Model } from '@chaomingd/store';
+import { CheckGroupProps, CheckGroupState, Key } from '../type';
+export declare class CheckGroupModel<K extends Key> extends Model<CheckGroupState<K>> {
+    keys: K[];
+    timer: any;
+    props: CheckGroupProps<K>;
+    useGroupKeys: boolean;
+    constructor();
+    getCheckAllInfo(checkMap?: Map<Key, boolean>): {
+        isCheckAll: boolean;
+        indeterminate: boolean;
+    };
+    handleToggleCheckAll: () => void;
+    handleToggleCheck: (key: K) => void;
+    handleCheckOne: (key: K) => void;
+    registerKey(key: K): void;
+    setKeys(keys: K[]): void;
+    unRegisterKey(key: K): void;
+    __updateKeys(): void;
+}
+export declare function useCheckGroup<K extends Key>(props: CheckGroupProps<K>): CheckGroupModel<K>;

package/dist/esm/CheckGroup/hooks/useCheckGroup.js

@@ -0,0 +1,180 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Model } from '@chaomingd/store';
+import { useCreation } from 'ahooks';
+import { useMemo } from 'react';
+export var CheckGroupModel = /*#__PURE__*/function (_Model) {
+  _inherits(CheckGroupModel, _Model);
+  var _super = _createSuper(CheckGroupModel);
+  function CheckGroupModel() {
+    var _this;
+    _classCallCheck(this, CheckGroupModel);
+    _this = _super.call(this, {
+      autoInit: false,
+      state: {
+        value: [],
+        valueMap: new Map(),
+        keys: [],
+        isCheckAll: false,
+        indeterminate: false
+      },
+      computed: [{
+        keys: ['value'],
+        hander: function hander(_ref) {
+          var value = _ref.value;
+          var m = new Map();
+          value.forEach(function (k) {
+            m.set(k, true);
+          });
+          return {
+            valueMap: m
+          };
+        }
+      }, {
+        keys: ['value', 'keys'],
+        hander: function hander(_ref2) {
+          var valueMap = _ref2.valueMap;
+          return _objectSpread({}, _this.getCheckAllInfo(valueMap));
+        }
+      }]
+    });
+    _defineProperty(_assertThisInitialized(_this), "keys", []);
+    _defineProperty(_assertThisInitialized(_this), "timer", void 0);
+    _defineProperty(_assertThisInitialized(_this), "props", {});
+    _defineProperty(_assertThisInitialized(_this), "useGroupKeys", false);
+    _defineProperty(_assertThisInitialized(_this), "handleToggleCheckAll", function () {
+      var _this$props$onChange, _this$props;
+      var _this$getState = _this.getState(),
+        isCheckAll = _this$getState.isCheckAll;
+      var newKeys;
+      if (isCheckAll) {
+        newKeys = [];
+      } else {
+        newKeys = _toConsumableArray(_this.keys);
+      }
+      if (!('value' in _this.props)) {
+        _this.setState({
+          value: newKeys
+        });
+      }
+      (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props, newKeys);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleToggleCheck", function (key) {
+      var _this$props$onChange2, _this$props2;
+      var _this$getState2 = _this.getState(),
+        valueMap = _this$getState2.valueMap,
+        value = _this$getState2.value;
+      var isCheck = valueMap.get(key);
+      var newKeys = _toConsumableArray(value);
+      if (isCheck) {
+        newKeys = newKeys.filter(function (k) {
+          return k !== key;
+        });
+      } else {
+        newKeys.push(key);
+      }
+      if (!('value' in _this.props)) {
+        _this.setState({
+          value: newKeys
+        });
+      }
+      (_this$props$onChange2 = (_this$props2 = _this.props).onChange) === null || _this$props$onChange2 === void 0 || _this$props$onChange2.call(_this$props2, newKeys);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCheckOne", function (key) {
+      var _this$props$onChange3, _this$props3;
+      var newKeys = [key];
+      if (!('value' in _this.props)) {
+        _this.setState({
+          value: newKeys
+        });
+      }
+      (_this$props$onChange3 = (_this$props3 = _this.props).onChange) === null || _this$props$onChange3 === void 0 || _this$props$onChange3.call(_this$props3, newKeys);
+    });
+    _this.init();
+    return _this;
+  }
+  _createClass(CheckGroupModel, [{
+    key: "getCheckAllInfo",
+    value: function getCheckAllInfo(checkMap) {
+      var _this$getState3 = this.getState(),
+        valueMap = _this$getState3.valueMap;
+      var ckMap = checkMap || valueMap;
+      var keys = this.keys;
+      var indeterminate = false;
+      var isCheckAll = true;
+      keys.forEach(function (k) {
+        var isCheck = ckMap.get(k);
+        if (isCheck) {
+          indeterminate = true;
+        } else {
+          isCheckAll = false;
+        }
+        return isCheck;
+      });
+      if (isCheckAll) {
+        indeterminate = false;
+      }
+      return {
+        isCheckAll: isCheckAll,
+        indeterminate: indeterminate
+      };
+    }
+  }, {
+    key: "registerKey",
+    value: function registerKey(key) {
+      if (!this.keys.includes(key)) {
+        this.keys.push(key);
+      }
+      this.__updateKeys();
+    }
+  }, {
+    key: "setKeys",
+    value: function setKeys(keys) {
+      this.keys = keys;
+      this.__updateKeys();
+    }
+  }, {
+    key: "unRegisterKey",
+    value: function unRegisterKey(key) {
+      this.keys = this.keys.filter(function (k) {
+        return k !== key;
+      });
+      this.__updateKeys();
+    }
+  }, {
+    key: "__updateKeys",
+    value: function __updateKeys() {
+      var _this2 = this;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(function () {
+        _this2.setState({
+          keys: _toConsumableArray(_this2.keys)
+        });
+      }, 10);
+    }
+  }]);
+  return CheckGroupModel;
+}(Model);
+export function useCheckGroup(props) {
+  var hasValue = ('value' in props);
+  var model = useCreation(function () {
+    return new CheckGroupModel();
+  }, []);
+  model.props = props;
+  useMemo(function () {
+    if (hasValue) {
+      model.setState({
+        value: props.value || []
+      }, {
+        silent: true
+      });
+    }
+  }, [props.value, model, hasValue]);
+  return model;
+}

package/dist/esm/CheckGroup/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CheckGroupProps, CheckItemProps, Key } from './type';
+declare const CheckItem: <K extends Key>(props: CheckItemProps<K>) => import("react").ReactNode;
+declare const CheckAllItem: <K extends Key>(props: CheckItemProps<K>) => import("react").ReactNode;
+declare const CheckGroup: (<K extends Key>(props: CheckGroupProps<K>) => import("react/jsx-runtime").JSX.Element) & {
+    CheckItem: typeof CheckItem;
+    CheckAllItem: typeof CheckAllItem;
+};
+export default CheckGroup;

package/dist/esm/CheckGroup/index.js

@@ -0,0 +1,79 @@
+import { useContext, useEffect, useMemo } from 'react';
+import { CheckGroupContext } from "./context";
+import { useCheckGroup } from "./hooks/useCheckGroup";
+import { jsx as _jsx } from "react/jsx-runtime";
+var _CheckGroup = function _CheckGroup(props) {
+  var model = useCheckGroup(props);
+  var hasKeys = ('keys' in props);
+  model.useGroupKeys = hasKeys;
+  // model.useUpdate();
+  useEffect(function () {
+    if (hasKeys) {
+      model.setKeys(props.keys || []);
+    }
+  }, [props.keys, model, hasKeys]);
+  var contextValue = useMemo(function () {
+    return {
+      model: model,
+      props: props
+    };
+  }, [model, props.value]);
+  return /*#__PURE__*/_jsx(CheckGroupContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+var CheckItem = function CheckItem(props) {
+  var value = props.value,
+    children = props.children;
+  var _useContext = useContext(CheckGroupContext),
+    model = _useContext.model;
+  var multiple = model.props.multiple;
+  var useGroupKeys = model.useGroupKeys;
+  var _model$useGetState = model.useGetState(),
+    valueMap = _model$useGetState.valueMap,
+    indeterminate = _model$useGetState.indeterminate;
+  var isCheck = valueMap.get(value) || false;
+  useMemo(function () {
+    if (!useGroupKeys) {
+      model.registerKey(value);
+    }
+    return function () {
+      if (!useGroupKeys) {
+        model.unRegisterKey(value);
+      }
+    };
+  }, [model, value, useGroupKeys]);
+  if (typeof children === 'function') {
+    var onChange = function onChange() {
+      multiple ? model.handleToggleCheck(value) : model.handleCheckOne(value);
+    };
+    return children({
+      checked: isCheck,
+      indeterminate: indeterminate,
+      onChange: onChange
+    });
+  }
+  return children;
+};
+var CheckAllItem = function CheckAllItem(props) {
+  var children = props.children;
+  var _useContext2 = useContext(CheckGroupContext),
+    model = _useContext2.model;
+  var _model$useGetState2 = model.useGetState(),
+    isCheckAll = _model$useGetState2.isCheckAll,
+    indeterminate = _model$useGetState2.indeterminate;
+  if (typeof children === 'function') {
+    return children({
+      checked: isCheckAll,
+      indeterminate: indeterminate,
+      onChange: model.handleToggleCheckAll
+    });
+  }
+  return children;
+};
+var _component = _CheckGroup;
+var CheckGroup = _component;
+CheckGroup.CheckItem = CheckItem;
+CheckGroup.CheckAllItem = CheckAllItem;
+export default CheckGroup;

package/dist/esm/CheckGroup/type.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export type Key = string | number | symbol;
+export interface CheckGroupProps<K extends Key> {
+    value?: K[];
+    onChange?: (val: K[]) => void;
+    children?: ReactNode | ReactNode[];
+    keys?: K[];
+    multiple?: boolean;
+}
+export interface CheckGroupState<K extends Key> {
+    value: K[];
+    valueMap: Map<K, boolean>;
+    keys: K[];
+    isCheckAll: boolean;
+    indeterminate: boolean;
+}
+type CheckItemChildren = ReactNode | ReactNode[] | ((props: {
+    checked: boolean;
+    indeterminate: boolean;
+    onChange: () => void;
+}) => ReactNode | ReactNode[]);
+export interface CheckItemProps<K extends Key> {
+    value: K;
+    children?: CheckItemChildren;
+    disabled?: boolean;
+    onChange?: (val: K) => void;
+}
+export {};

package/dist/esm/CheckGroup/type.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Grid/index.d.ts

@@ -0,0 +1,15 @@
+import React, { HTMLAttributes } from 'react';
+import './index.less';
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: number | [number, number];
+    col: number;
+    pxTransform?: (n: number) => string;
+}
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement | null>>;
+declare const GridItem: ({ className, children }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+type GridType = typeof Grid;
+interface IGrid extends GridType {
+    Item: typeof GridItem;
+}
+declare const GridCom: IGrid;
+export default GridCom;

package/dist/esm/Grid/index.js

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import React, { createContext, forwardRef, useContext } from 'react';
+import "./index.less";
+import { CSS_PREFIX } from "../styles/var";
+import { pxtorem } from '@chaomingd/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridContext = /*#__PURE__*/createContext({});
+function toMarginPadding(gap, type, pxTransform) {
+  if (!gap) return undefined;
+  var gaps;
+  if (Array.isArray(gap)) {
+    gaps = gap;
+  } else {
+    gaps = [gap, gap];
+  }
+  if (type === 'margin') {
+    return "".concat(pxTransform(-gaps[0] / 2), " ").concat(pxTransform(-gaps[1] / 2));
+  }
+  return "".concat(pxTransform(gaps[0] / 2), " ").concat(pxTransform(gaps[1] / 2));
+}
+var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    children = props.children,
+    gap = props.gap,
+    pxTransform = props.pxTransform,
+    col = props.col;
+  if (!col) return null;
+  return /*#__PURE__*/_jsx(GridContext.Provider, {
+    value: props,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: classNames(className, "".concat(CSS_PREFIX, "-grid")),
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          margin: toMarginPadding(gap, 'margin', pxTransform || pxtorem)
+        },
+        className: "".concat(CSS_PREFIX, "-grid-wrapper"),
+        children: children
+      })
+    })
+  });
+});
+
+// export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {}
+
+var GridItem = function GridItem(_ref) {
+  var className = _ref.className,
+    children = _ref.children;
+  var gridProps = useContext(GridContext);
+  var gap = gridProps.gap,
+    col = gridProps.col,
+    pxTransform = gridProps.pxTransform;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      padding: toMarginPadding(gap, 'padding', pxTransform || pxtorem),
+      width: "".concat(100 / col, "%")
+    },
+    className: classNames(className, "".concat(CSS_PREFIX, "-grid-item")),
+    children: children
+  });
+};
+var GridCom = Grid;
+GridCom.Item = GridItem;
+export default GridCom;

package/dist/esm/Grid/index.less

@@ -0,0 +1,7 @@
+@import '../styles/var.less';
+
+.@{prefix}-grid-item {
+  display: inline-block;
+  vertical-align: top;
+  box-sizing: border-box;
+}

package/dist/esm/KaTeXRenderer/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import 'katex/dist/katex.min.css';
+interface KaTeXRendererProps {
+    expression: string;
+    errorMessage?: string;
+    displayMode?: boolean;
+}
+declare const KaTeXRenderer: React.FC<KaTeXRendererProps>;
+export default KaTeXRenderer;

package/dist/esm/KaTeXRenderer/index.js

@@ -0,0 +1,33 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+// KaTeXRenderer.tsx
+import React, { useEffect, useRef } from 'react';
+import katex from 'katex';
+import 'katex/dist/katex.min.css'; // 引入 KaTeX 的样式
+import { jsx as _jsx } from "react/jsx-runtime";
+var KaTeXRenderer = function KaTeXRenderer(_ref) {
+  var expression = _ref.expression,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? 'Invalid LaTeX expression' : _ref$errorMessage,
+    _ref$displayMode = _ref.displayMode,
+    displayMode = _ref$displayMode === void 0 ? false : _ref$displayMode;
+  var containerRef = useRef(null);
+  console.log('expression', expression);
+  useEffect(function () {
+    if (containerRef.current) {
+      try {
+        katex.render(String.raw(_templateObject || (_templateObject = _taggedTemplateLiteral(["", ""])), expression), containerRef.current, {
+          throwOnError: false,
+          displayMode: displayMode
+        });
+      } catch (error) {
+        containerRef.current.innerHTML = "<span style=\"color: red;\">".concat(errorMessage, "</span>");
+        console.error('KaTeX render error:', error);
+      }
+    }
+  }, [expression, displayMode, errorMessage]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef
+  });
+};
+export default KaTeXRenderer;

package/dist/esm/PixelPlayer/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './index.less';
+interface CommonProps {
+    disablePictureInPicture?: boolean;
+    reconnectCount?: number;
+    poster?: string;
+}
+export interface VideoHandler {
+    play: () => void;
+    stop: () => void;
+    pause: () => void;
+    status: Status;
+}
+type Status = 'playing' | 'paused' | 'stopped' | 'connecting' | 'disconnected' | 'reConnecting';
+export declare const PixelPlayer: React.ForwardRefExoticComponent<{
+    disablePictureInPicture?: boolean | undefined;
+    onConnected?: (() => void) | undefined;
+    onDisconnected?: (() => void) | undefined;
+    onTryConnect?: (() => void) | undefined;
+    onClick?: (() => void) | undefined;
+    renderConnectingView?: (() => JSX.Element) | undefined;
+    renderDisconnectedView?: (() => JSX.Element) | undefined;
+    renderReconnectingView?: (() => JSX.Element) | undefined;
+    url: string;
+    className?: string | undefined;
+    positionOrigin?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+} & CommonProps & React.RefAttributes<VideoHandler>>;
+export {};

package/dist/esm/PixelPlayer/index.js

@@ -0,0 +1,118 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useImperativeHandle, forwardRef, useState, useCallback } from 'react';
+import { initialize } from "./lib/peer-stream";
+import { useVideoWithCustomEvent } from "./useVideoWithCustomEvent";
+import { useAutoLayoutContainer } from "./useAutoLayoutContainer";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+initialize({});
+var defaultRenderTextView = function defaultRenderTextView(text) {
+  return /*#__PURE__*/_jsx("div", {
+    className: "c-pixel-player__placeholder",
+    children: /*#__PURE__*/_jsx("p", {
+      className: "c-pixel-player__placeholder-text",
+      children: text
+    })
+  });
+};
+export var PixelPlayer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useState = useState('connecting'),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var externalOnConnected = props.onConnected,
+    externalOnDisconnected = props.onDisconnected,
+    externalOnTryConnect = props.onTryConnect,
+    onClick = props.onClick,
+    _props$renderConnecti = props.renderConnectingView,
+    renderConnectingView = _props$renderConnecti === void 0 ? function () {
+      return defaultRenderTextView('正在连接中......');
+    } : _props$renderConnecti,
+    _props$renderReconnec = props.renderReconnectingView,
+    renderReconnectingView = _props$renderReconnec === void 0 ? function () {
+      return defaultRenderTextView('正在重连中......');
+    } : _props$renderReconnec,
+    _props$renderDisconne = props.renderDisconnectedView,
+    renderDisconnectedView = _props$renderDisconne === void 0 ? function () {
+      return defaultRenderTextView('连接已断开');
+    } : _props$renderDisconne;
+  var onConnected = useCallback(function () {
+    setStatus('playing');
+    externalOnConnected === null || externalOnConnected === void 0 || externalOnConnected();
+  }, [externalOnConnected]);
+  var onDisconnected = useCallback(function () {
+    setStatus('disconnected');
+    externalOnDisconnected === null || externalOnDisconnected === void 0 || externalOnDisconnected();
+  }, [externalOnDisconnected]);
+  var onTryConnect = useCallback(function () {
+    setStatus('reConnecting');
+    externalOnTryConnect === null || externalOnTryConnect === void 0 || externalOnTryConnect();
+  }, []);
+  var filteredEventHandlers = Object.fromEntries(Object.entries({
+    onDisconnected: onDisconnected,
+    onConnected: onConnected,
+    onTryConnect: onTryConnect,
+    onClick: onClick
+  }).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      _ = _ref2[0],
+      value = _ref2[1];
+    return value !== undefined;
+  }));
+  var videoRef = useVideoWithCustomEvent(filteredEventHandlers);
+  var containerRef = useAutoLayoutContainer(videoRef, props.positionOrigin || 'top-left');
+  useImperativeHandle(ref, function () {
+    return {
+      play: function play() {
+        var _videoRef$current;
+        // console.log('播放')
+        (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 || _videoRef$current.customPlay();
+        // 默认播放成功
+        setStatus('playing');
+      },
+      pause: function pause() {
+        var _videoRef$current2;
+        // console.log('暂停')
+        (_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 || _videoRef$current2.customPause();
+        setStatus('paused');
+      },
+      stop: function stop() {
+        var _videoRef$current3;
+        // console.log('停止')
+        (_videoRef$current3 = videoRef.current) === null || _videoRef$current3 === void 0 || _videoRef$current3.customStop();
+        setStatus('stopped');
+      },
+      status: status
+      // 可以添加其他想要暴露的方法或属性
+    };
+  });
+  var videoProps = {
+    is: 'peer-stream',
+    signal: props.url,
+    reconnectCount: props.reconnectCount,
+    poster: props.poster,
+    disablePictureInPicture: true
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: ['c-pixel-player__container', props.className].join(' '),
+    ref: containerRef,
+    children: [function () {
+      switch (status) {
+        case 'connecting':
+          return renderConnectingView();
+        case 'disconnected':
+          return renderDisconnectedView();
+        case 'reConnecting':
+          return renderReconnectingView();
+        default:
+          return null;
+      }
+    }(), /*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({
+      className: "c-pixel-player__video"
+    }, videoProps), {}, {
+      ref: videoRef
+    }))]
+  });
+});