deepsea-components 3.0.0 → 3.0.1

package/dist/cjs/components/HlsPlayer.d.ts

@@ -0,0 +1,6 @@
+import { MediaHTMLAttributes } from "react";
+export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+    src: string;
+}
+declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
+export default HlsPlayer;

package/dist/cjs/components/HlsPlayer.js

@@ -0,0 +1,64 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/HlsPlayer.tsx
+var HlsPlayer_exports = {};
+__export(HlsPlayer_exports, {
+  default: () => HlsPlayer_default
+});
+module.exports = __toCommonJS(HlsPlayer_exports);
+var import_hls = __toESM(require("hls.js"));
+var import_react = require("react");
+var HlsPlayer = (0, import_react.forwardRef)((props, ref) => {
+  const { src, ...rest } = props;
+  const video = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => video.current, []);
+  (0, import_react.useEffect)(() => {
+    const { current: player } = video;
+    if (!player || !src)
+      return;
+    if (player.canPlayType("application/vnd.apple.mpegurl")) {
+      player.src = src;
+      player.play();
+      return;
+    }
+    if (import_hls.default.isSupported()) {
+      const hls = new import_hls.default();
+      hls.loadSource(src);
+      hls.attachMedia(player);
+      player.play();
+      return () => {
+        hls.destroy();
+      };
+    }
+  }, [src]);
+  return /* @__PURE__ */ React.createElement("video", { ref: video, ...rest });
+});
+var HlsPlayer_default = HlsPlayer;
+//# sourceMappingURL=HlsPlayer.js.map

package/dist/cjs/components/HlsPlayer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/HlsPlayer.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            player.play()\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            player.play()\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAgB;AAChB,mBAAwF;AAMxF,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAC3E,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb,aAAO,KAAK;AACZ;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,KAAK;AACZ,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;AAED,IAAO,oBAAQ;",
+  "names": ["Hls"]
+}

package/dist/cjs/components/Skeleton.js

@@ -26,11 +26,12 @@ module.exports = __toCommonJS(Skeleton_exports);
 var import_css = require("@emotion/css");
 var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
-var Skeleton = (0, import_react.forwardRef)((props) => {
+var Skeleton = (0, import_react.forwardRef)((props, ref) => {
   const { className, ...rest } = props;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref,
       className: (0, import_deepsea_tools.clsx)(
         import_css.css`
                     @keyframes shimmer {

package/dist/cjs/components/Skeleton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Skeleton.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(props => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAE3C,IAAM,eAAW,yBAA2D,WAAS;AACjF,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAE/B,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;AAED,IAAO,mBAAQ;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAE3C,IAAM,eAAW,yBAA2D,CAAC,OAAO,QAAQ;AACxF,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAE/B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;AAED,IAAO,mBAAQ;",
   "names": []
 }

package/dist/cjs/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/AutoScroll";
 export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
+export * from "./components/HlsPlayer";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

package/dist/cjs/index.js

@@ -21,6 +21,7 @@ __reExport(src_exports, require("./components/AutoScroll"), module.exports);
 __reExport(src_exports, require("./components/AutoSizeTextarea"), module.exports);
 __reExport(src_exports, require("./components/CircleText"), module.exports);
 __reExport(src_exports, require("./components/Flow"), module.exports);
+__reExport(src_exports, require("./components/HlsPlayer"), module.exports);
 __reExport(src_exports, require("./components/InputFile"), module.exports);
 __reExport(src_exports, require("./components/LoopSwiper"), module.exports);
 __reExport(src_exports, require("./components/Ring"), module.exports);
@@ -37,6 +38,7 @@ __reExport(src_exports, require("./components/Trapezium"), module.exports);
   ...require("./components/AutoSizeTextarea"),
   ...require("./components/CircleText"),
   ...require("./components/Flow"),
+  ...require("./components/HlsPlayer"),
   ...require("./components/InputFile"),
   ...require("./components/LoopSwiper"),
   ...require("./components/Ring"),

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,8BAJd;AAKA,wBAAc,mCALd;AAMA,wBAAc,oCANd;AAOA,wBAAc,8BAPd;AAQA,wBAAc,gCARd;AASA,wBAAc,qCATd;AAUA,wBAAc,kCAVd;AAWA,wBAAc,uCAXd;AAYA,wBAAc,uCAZd;AAaA,wBAAc,mCAbd;",
+  "sourcesContent": ["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/HlsPlayer\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,8BAJd;AAKA,wBAAc,mCALd;AAMA,wBAAc,mCANd;AAOA,wBAAc,oCAPd;AAQA,wBAAc,8BARd;AASA,wBAAc,gCATd;AAUA,wBAAc,qCAVd;AAWA,wBAAc,kCAXd;AAYA,wBAAc,uCAZd;AAaA,wBAAc,uCAbd;AAcA,wBAAc,mCAdd;",
   "names": []
 }

package/dist/esm/components/HlsPlayer.d.ts

@@ -0,0 +1,6 @@
+import { MediaHTMLAttributes } from "react";
+export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+    src: string;
+}
+declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
+export default HlsPlayer;

package/dist/esm/components/HlsPlayer.js

@@ -0,0 +1,39 @@
+"use client";
+
+import Hls from "hls.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    src,
+    ...rest
+  } = props;
+  const video = useRef(null);
+  useImperativeHandle(ref, () => video.current, []);
+  useEffect(() => {
+    const {
+      current: player
+    } = video;
+    if (!player || !src) return;
+    if (player.canPlayType("application/vnd.apple.mpegurl")) {
+      player.src = src;
+      player.play();
+      return;
+    }
+    if (Hls.isSupported()) {
+      const hls = new Hls();
+      hls.loadSource(src);
+      hls.attachMedia(player);
+      player.play();
+      return () => {
+        hls.destroy();
+      };
+    }
+  }, [src]);
+  return /*#__PURE__*/_jsx("video", {
+    ref: video,
+    ...rest
+  });
+});
+export default HlsPlayer;
+//# sourceMappingURL=HlsPlayer.js.map

package/dist/esm/components/HlsPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Hls","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","play","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            player.play()\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            player.play()\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,GAAG,MAAM,QAAQ;AACxB,SAA8BC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM/F,MAAMC,SAAS,gBAAGN,UAAU,CAAmC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACM,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDX,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEW,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChBI,MAAM,CAACE,IAAI,CAAC,CAAC;MACb;IACJ;IACA,IAAIhB,GAAG,CAACiB,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIlB,GAAG,CAAC,CAAC;MACrBkB,GAAG,CAACC,UAAU,CAACT,GAAG,CAAC;MACnBQ,GAAG,CAACE,WAAW,CAACN,MAAM,CAAC;MACvBA,MAAM,CAACE,IAAI,CAAC,CAAC;MACb,OAAO,MAAM;QACTE,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACX,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAeJ,SAAS"}

package/dist/esm/components/Skeleton.js

@@ -4,12 +4,13 @@ import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
 import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Skeleton = /*#__PURE__*/forwardRef(props => {
+const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     className,
     ...rest
   } = props;
   return /*#__PURE__*/_jsx("div", {
+    ref: ref,
     className: clsx(css`
                     @keyframes shimmer {
                         0% {

package/dist/esm/components/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","className","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(props => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElD,MAAMC,QAAQ,gBAAGH,UAAU,CAAiDI,KAAK,IAAI;EACjF,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGF,KAAK;EAEpC,oBACIF,IAAA;IACIG,SAAS,EAAEN,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDO,SACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC;AAEF,eAAeH,QAAQ"}
+{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","ref","className","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElD,MAAMC,QAAQ,gBAAGH,UAAU,CAAiD,CAACI,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAEpC,oBACIF,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEP,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDQ,SACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC;AAEF,eAAeJ,QAAQ"}

package/dist/esm/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/AutoScroll";
 export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
+export * from "./components/HlsPlayer";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

package/dist/esm/index.js

@@ -3,6 +3,7 @@ export * from "./components/AutoScroll";
 export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
+export * from "./components/HlsPlayer";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/index.tsx"],"sourcesContent":["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":[],"sources":["../../src/index.tsx"],"sourcesContent":["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/HlsPlayer\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "deepsea-components",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "格数科技自用组件库",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -33,6 +33,7 @@
         "@emotion/css": "^11.11.2",
         "ahooks": "^3.7.11",
         "deepsea-tools": "npm:deepsea-tools@latest",
+        "hls.js": "^1.5.8",
         "smooth-scrollbar": "^8.8.4",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
     },

package/src/components/HlsPlayer.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import Hls from "hls.js"
+import { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
+export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+    src: string
+}
+
+const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
+    const { src, ...rest } = props
+    const video = useRef<HTMLVideoElement>(null)
+
+    useImperativeHandle(ref, () => video.current!, [])
+
+    useEffect(() => {
+        const { current: player } = video
+        if (!player || !src) return
+        if (player.canPlayType("application/vnd.apple.mpegurl")) {
+            player.src = src
+            player.play()
+            return
+        }
+        if (Hls.isSupported()) {
+            const hls = new Hls()
+            hls.loadSource(src)
+            hls.attachMedia(player)
+            player.play()
+            return () => {
+                hls.destroy()
+            }
+        }
+    }, [src])
+
+    return <video ref={video} {...rest} />
+})
+
+export default HlsPlayer

package/src/components/Skeleton.tsx

@@ -4,11 +4,12 @@ import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import { forwardRef, HTMLAttributes } from "react"
 
-const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(props => {
+const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
     const { className, ...rest } = props
 
     return (
         <div
+            ref={ref}
             className={clsx(
                 css`
                     @keyframes shimmer {

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from "./components/AutoScroll"
 export * from "./components/AutoSizeTextarea"
 export * from "./components/CircleText"
 export * from "./components/Flow"
+export * from "./components/HlsPlayer"
 export * from "./components/InputFile"
 export * from "./components/LoopSwiper"
 export * from "./components/Ring"