@chaomingd/design 0.0.68

package/dist/lib/CheckGroup/type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/lib/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/lib/Grid/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.less");
+var _var = require("../styles/var");
+var _utils = require("@chaomingd/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const GridContext = /*#__PURE__*/(0, _react.createContext)({});
+function toMarginPadding(gap, type, pxTransform) {
+  if (!gap) return undefined;
+  let gaps;
+  if (Array.isArray(gap)) {
+    gaps = gap;
+  } else {
+    gaps = [gap, gap];
+  }
+  if (type === 'margin') {
+    return `${pxTransform(-gaps[0] / 2)} ${pxTransform(-gaps[1] / 2)}`;
+  }
+  return `${pxTransform(gaps[0] / 2)} ${pxTransform(gaps[1] / 2)}`;
+}
+const Grid = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    children,
+    gap,
+    pxTransform,
+    col
+  } = props;
+  if (!col) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridContext.Provider, {
+    value: props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      className: (0, _classnames.default)(className, `${_var.CSS_PREFIX}-grid`),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          margin: toMarginPadding(gap, 'margin', pxTransform || _utils.pxtorem)
+        },
+        className: `${_var.CSS_PREFIX}-grid-wrapper`,
+        children: children
+      })
+    })
+  });
+});
+
+// export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {}
+
+const GridItem = ({
+  className,
+  children
+}) => {
+  const gridProps = (0, _react.useContext)(GridContext);
+  const {
+    gap,
+    col,
+    pxTransform
+  } = gridProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      padding: toMarginPadding(gap, 'padding', pxTransform || _utils.pxtorem),
+      width: `${100 / col}%`
+    },
+    className: (0, _classnames.default)(className, `${_var.CSS_PREFIX}-grid-item`),
+    children: children
+  });
+};
+const GridCom = Grid;
+GridCom.Item = GridItem;
+var _default = exports.default = GridCom;

package/dist/lib/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/lib/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/lib/KaTeXRenderer/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _katex = _interopRequireDefault(require("katex"));
+require("katex/dist/katex.min.css");
+var _jsxRuntime = require("react/jsx-runtime");
+// KaTeXRenderer.tsx
+
+// 引入 KaTeX 的样式
+
+const KaTeXRenderer = ({
+  expression,
+  errorMessage = 'Invalid LaTeX expression',
+  displayMode = false
+}) => {
+  const containerRef = (0, _react.useRef)(null);
+  console.log('expression', expression);
+  (0, _react.useEffect)(() => {
+    if (containerRef.current) {
+      try {
+        _katex.default.render(String.raw`${expression}`, containerRef.current, {
+          throwOnError: false,
+          displayMode
+        });
+      } catch (error) {
+        containerRef.current.innerHTML = `<span style="color: red;">${errorMessage}</span>`;
+        console.error('KaTeX render error:', error);
+      }
+    }
+  }, [expression, displayMode, errorMessage]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: containerRef
+  });
+};
+var _default = exports.default = KaTeXRenderer;

package/dist/lib/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/lib/PixelPlayer/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PixelPlayer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _peerStream = require("./lib/peer-stream");
+var _useVideoWithCustomEvent = require("./useVideoWithCustomEvent");
+var _useAutoLayoutContainer = require("./useAutoLayoutContainer");
+require("./index.less");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _peerStream.initialize)({});
+const defaultRenderTextView = text => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "c-pixel-player__placeholder",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "c-pixel-player__placeholder-text",
+      children: text
+    })
+  });
+};
+const PixelPlayer = exports.PixelPlayer = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const [status, setStatus] = (0, _react.useState)('connecting');
+  const {
+    onConnected: externalOnConnected,
+    onDisconnected: externalOnDisconnected,
+    onTryConnect: externalOnTryConnect,
+    onClick,
+    renderConnectingView = () => {
+      return defaultRenderTextView('正在连接中......');
+    },
+    renderReconnectingView = () => {
+      return defaultRenderTextView('正在重连中......');
+    },
+    renderDisconnectedView = () => {
+      return defaultRenderTextView('连接已断开');
+    }
+  } = props;
+  const onConnected = (0, _react.useCallback)(() => {
+    setStatus('playing');
+    externalOnConnected?.();
+  }, [externalOnConnected]);
+  const onDisconnected = (0, _react.useCallback)(() => {
+    setStatus('disconnected');
+    externalOnDisconnected?.();
+  }, [externalOnDisconnected]);
+  const onTryConnect = (0, _react.useCallback)(() => {
+    setStatus('reConnecting');
+    externalOnTryConnect?.();
+  }, []);
+  const filteredEventHandlers = Object.fromEntries(Object.entries({
+    onDisconnected,
+    onConnected,
+    onTryConnect,
+    onClick
+  }).filter(([_, value]) => value !== undefined));
+  const videoRef = (0, _useVideoWithCustomEvent.useVideoWithCustomEvent)(filteredEventHandlers);
+  const containerRef = (0, _useAutoLayoutContainer.useAutoLayoutContainer)(videoRef, props.positionOrigin || 'top-left');
+  (0, _react.useImperativeHandle)(ref, () => ({
+    play: () => {
+      // console.log('播放')
+      videoRef.current?.customPlay();
+      // 默认播放成功
+      setStatus('playing');
+    },
+    pause: () => {
+      // console.log('暂停')
+      videoRef.current?.customPause();
+      setStatus('paused');
+    },
+    stop: () => {
+      // console.log('停止')
+      videoRef.current?.customStop();
+      setStatus('stopped');
+    },
+    status
+    // 可以添加其他想要暴露的方法或属性
+  }));
+  const videoProps = {
+    is: 'peer-stream',
+    signal: props.url,
+    reconnectCount: props.reconnectCount,
+    poster: props.poster,
+    disablePictureInPicture: true
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ['c-pixel-player__container', props.className].join(' '),
+    ref: containerRef,
+    children: [(() => {
+      switch (status) {
+        case 'connecting':
+          return renderConnectingView();
+        case 'disconnected':
+          return renderDisconnectedView();
+        case 'reConnecting':
+          return renderReconnectingView();
+        default:
+          return null;
+      }
+    })(), /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+      className: "c-pixel-player__video",
+      ...videoProps,
+      ref: videoRef
+    })]
+  });
+});

package/dist/lib/PixelPlayer/index.less

@@ -0,0 +1,29 @@
+.c-pixel-player {
+  &__container {
+    position: relative;
+    overflow: hidden;
+    width: 800px;
+    height: 400px;
+  }
+  &__video {
+    position: absolute;
+  }
+  &__placeholder {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #111;
+    &-text {
+      position: absolute;
+      transform: translate(-50%, -50%);
+      left: 50%;
+      font-size: 20px;
+      color: #fff;
+letter-spacing: 1px;
+      top: 50%;
+    }
+  }
+}

package/dist/lib/PixelPlayer/lib/peer-stream.d.ts

@@ -0,0 +1,62 @@
+type CreatePeerStreamOptions = {
+    poster?: string;
+    onInitialize?: () => void;
+};
+declare const customEventsArray: readonly ["initialize", "connected", "disconnected", "tryConnect", "message", "error"];
+export declare class PeerStream extends HTMLVideoElement {
+    ws: WebSocket;
+    pc: RTCPeerConnection;
+    VideoEncoderQP?: number;
+    QualityControlOwnership?: boolean;
+    InitialSettings: any;
+    disablepictureinpicture?: boolean;
+    dc: any;
+    audio?: HTMLAudioElement;
+    ping: number;
+    customEvents: {
+        [K in (typeof customEventsArray)[number]]: CustomEvent;
+    };
+    reconnect: number;
+    reconnectCount: number;
+    constructor(...params: any[]);
+    createCustomEvents(): void;
+    customPlay(): void;
+    customPause(): void;
+    customStop(): void;
+    setupWebsocket(): void;
+    setupAttributes(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    adoptedCallback(): void;
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    onWebSocketMessage(msgStr: string): Promise<void>;
+    onDataChannelMessage(message: ArrayBuffer): void;
+    setupVideo(): void;
+    setupDataChannel(label?: string): void;
+    setupPeerConnection(): void;
+    setupOffer(): Promise<void>;
+    registerKeyboardEvents(): void;
+    registerTouchEvents(): void;
+    registerFakeMouseEvents(): void;
+    registerMouseHoverEvents(): void;
+    registerPointerlockEvents(): void;
+    registerMouseEnterAndLeaveEvents(): void;
+    emitMouseMove(x: number, y: number, deltaX: number, deltaY: number): void;
+    emitMouseDown(button: number, x: number, y: number): void;
+    emitMouseUp(button: number, x: number, y: number): void;
+    emitMouseWheel(delta: number, x: number, y: number): void;
+    emitTouchData(type: number, touches: string | any[] | TouchList, fingerIds: {
+        [x: string]: number;
+    }): void;
+    emitMessage(msg: string | any[], messageType?: number): boolean;
+    _normalize(x: number, y: number): {
+        inRange: boolean;
+        x: number;
+        y: number;
+    };
+    debug(NodeJS: any): void;
+}
+type InitialSettings = {} & CreatePeerStreamOptions;
+export declare function initialize(initialSettings: InitialSettings): void;
+export {};