npm - @sgrsoft/vpe-react-ui - Versions diffs - 0.1.0 - Mend

@sgrsoft/vpe-react-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,54 @@
+# VPE React SDK (초안)
+React 19/Vite 기반 VPE 플레이어 UI 라이브러리입니다. hls.js/dashjs는 번들에 포함되지 않으며, 외부 플러그인으로 주입합니다.
+## 설치
+```bash
+pnpm add @sgrsoft/vpe-react-ui
+# 선택: 스트리밍 라이브러리
+pnpm add hls.js dashjs
+```
+- hls.js/dashjs는 선택적 peerDependency입니다. 브라우저/CDN 또는 `import Hls from "hls.js"`, `import dashjs from "dashjs"`로 주입하세요.
+## 사용법
+### React (ESM)
+```tsx
+import Hls from "hls.js";
+import dashjs from "dashjs";
+import { VpePlayer } from "@sgrsoft/vpe-react-ui";
+export function App() {
+  return (
+    <VpePlayer
+      accessKey="..."
+      appId="..."
+      platform="pub"
+      stage="prod"
+      aspectRatio="16/9"
+      hls={Hls}
+      dashjs={dashjs}
+      options={{
+        playlist: [...],
+      }}
+    />
+  );
+}
+```
+### UMD
+```html
+<link rel="stylesheet" href="./vpePlayer.css" />
+<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
+<script src="https://cdn.jsdelivr.net/npm/dashjs@4"></script>
+<script src="./vpePlayer.js"></script>
+<div id="video"></div>
+<script>
+  const player = vpe.setup("#video", {
+    aspectRatio: "16/9",
+    hls: window.Hls,
+    dashjs: window.dashjs,
+  });
+  // player.destroy() 로 해제 가능
+</script>
+```

package/dist/vpe-react-ui.css ADDED Viewed

@@ -0,0 +1 @@

+ .obtn{background-color:#00000073;aspect-ratio:1/1;width:2.5em;border-radius:500px;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.obtnNoBg{aspect-ratio:1.2/1;width:2.3em;border-radius:500px;display:flex;justify-content:center;align-items:center}.obtn:hover{background-color:#000000a6}.obtnNoBg:hover{background-color:#00000073}.obtn-group{background-color:#00000040;height:2.5em;border-radius:500px;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.obtn-group:hover{background-color:#0000004d}.tra200{transition:all .2s ease}

package/dist/vpe-react-ui.es.js ADDED Viewed

@@ -0,0 +1,699 @@
+var U = { exports: {} }, L = {};
+var K;
+function pe() {
+  if (K) return L;
+  K = 1;
+  var r = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function o(l, a, m) {
+    var f = null;
+    if (m !== void 0 && (f = "" + m), a.key !== void 0 && (f = "" + a.key), "key" in a) {
+      m = {};
+      for (var p in a)
+        p !== "key" && (m[p] = a[p]);
+    } else m = a;
+    return a = m.ref, {
+      $$typeof: r,
+      type: l,
+      key: f,
+      ref: a !== void 0 ? a : null,
+      props: m
+    };
+  }
+  return L.Fragment = t, L.jsx = o, L.jsxs = o, L;
+}
+var ee;
+function _e() {
+  return ee || (ee = 1, U.exports = pe()), U.exports;
+}
+var h = _e(), F = { exports: {} }, D = {}, z = { exports: {} }, s = {}, te;
+function ye() {
+  if (te) return s;
+  te = 1;
+  var r = {};
+  var t = Symbol.for("react.transitional.element"), o = Symbol.for("react.portal"), l = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), m = Symbol.for("react.profiler"), f = Symbol.for("react.consumer"), p = Symbol.for("react.context"), g = Symbol.for("react.forward_ref"), v = Symbol.for("react.suspense"), R = Symbol.for("react.memo"), C = Symbol.for("react.lazy"), x = Symbol.for("react.activity"), A = Symbol.iterator;
+  function M(e) {
+    return e === null || typeof e != "object" ? null : (e = A && e[A] || e["@@iterator"], typeof e == "function" ? e : null);
+  }
+  var P = {
+    isMounted: function() {
+      return !1;
+    },
+    enqueueForceUpdate: function() {
+    },
+    enqueueReplaceState: function() {
+    },
+    enqueueSetState: function() {
+    }
+  }, H = Object.assign, V = {};
+  function T(e, n, c) {
+    this.props = e, this.context = n, this.refs = V, this.updater = c || P;
+  }
+  T.prototype.isReactComponent = {}, T.prototype.setState = function(e, n) {
+    if (typeof e != "object" && typeof e != "function" && e != null)
+      throw Error(
+        "takes an object of state variables to update or a function which returns an object of state variables."
+      );
+    this.updater.enqueueSetState(this, e, n, "setState");
+  }, T.prototype.forceUpdate = function(e) {
+    this.updater.enqueueForceUpdate(this, e, "forceUpdate");
+  };
+  function O() {
+  }
+  O.prototype = T.prototype;
+  function $(e, n, c) {
+    this.props = e, this.context = n, this.refs = V, this.updater = c || P;
+  }
+  var b = $.prototype = new O();
+  b.constructor = $, H(b, T.prototype), b.isPureReactComponent = !0;
+  var J = Array.isArray;
+  function I() {
+  }
+  var _ = { H: null, A: null, T: null, S: null }, W = Object.prototype.hasOwnProperty;
+  function Y(e, n, c) {
+    var i = c.ref;
+    return {
+      $$typeof: t,
+      type: e,
+      key: n,
+      ref: i !== void 0 ? i : null,
+      props: c
+    };
+  }
+  function ce(e, n) {
+    return Y(e.type, n, e.props);
+  }
+  function k(e) {
+    return typeof e == "object" && e !== null && e.$$typeof === t;
+  }
+  function le(e) {
+    var n = { "=": "=0", ":": "=2" };
+    return "$" + e.replace(/[=:]/g, function(c) {
+      return n[c];
+    });
+  }
+  var Q = /\/+/g;
+  function q(e, n) {
+    return typeof e == "object" && e !== null && e.key != null ? le("" + e.key) : n.toString(36);
+  }
+  function fe(e) {
+    switch (e.status) {
+      case "fulfilled":
+        return e.value;
+      case "rejected":
+        throw e.reason;
+      default:
+        switch (typeof e.status == "string" ? e.then(I, I) : (e.status = "pending", e.then(
+          function(n) {
+            e.status === "pending" && (e.status = "fulfilled", e.value = n);
+          },
+          function(n) {
+            e.status === "pending" && (e.status = "rejected", e.reason = n);
+          }
+        )), e.status) {
+          case "fulfilled":
+            return e.value;
+          case "rejected":
+            throw e.reason;
+        }
+    }
+    throw e;
+  }
+  function Z(e, n, c, i, E) {
+    var d = typeof e;
+    (d === "undefined" || d === "boolean") && (e = null);
+    var y = !1;
+    if (e === null) y = !0;
+    else
+      switch (d) {
+        case "bigint":
+        case "string":
+        case "number":
+          y = !0;
+          break;
+        case "object":
+          switch (e.$$typeof) {
+            case t:
+            case o:
+              y = !0;
+              break;
+            case C:
+              return y = e._init, Z(
+                y(e._payload),
+                n,
+                c,
+                i,
+                E
+              );
+          }
+      }
+    if (y)
+      return E = E(e), y = i === "" ? "." + q(e, 0) : i, J(E) ? (c = "", y != null && (c = y.replace(Q, "$&/") + "/"), Z(E, n, c, "", function(de) {
+        return de;
+      })) : E != null && (k(E) && (E = ce(
+        E,
+        c + (E.key == null || e && e.key === E.key ? "" : ("" + E.key).replace(
+          Q,
+          "$&/"
+        ) + "/") + y
+      )), n.push(E)), 1;
+    y = 0;
+    var j = i === "" ? "." : i + ":";
+    if (J(e))
+      for (var S = 0; S < e.length; S++)
+        i = e[S], d = j + q(i, S), y += Z(
+          i,
+          n,
+          c,
+          d,
+          E
+        );
+    else if (S = M(e), typeof S == "function")
+      for (e = S.call(e), S = 0; !(i = e.next()).done; )
+        i = i.value, d = j + q(i, S++), y += Z(
+          i,
+          n,
+          c,
+          d,
+          E
+        );
+    else if (d === "object") {
+      if (typeof e.then == "function")
+        return Z(
+          fe(e),
+          n,
+          c,
+          i,
+          E
+        );
+      throw n = String(e), Error(
+        "Objects are not valid as a React child (found: " + (n === "[object Object]" ? "object with keys {" + Object.keys(e).join(", ") + "}" : n) + "). If you meant to render a collection of children, use an array instead."
+      );
+    }
+    return y;
+  }
+  function N(e, n, c) {
+    if (e == null) return e;
+    var i = [], E = 0;
+    return Z(e, i, "", "", function(d) {
+      return n.call(c, d, E++);
+    }), i;
+  }
+  function me(e) {
+    if (e._status === -1) {
+      var n = e._result;
+      n = n(), n.then(
+        function(c) {
+          (e._status === 0 || e._status === -1) && (e._status = 1, e._result = c);
+        },
+        function(c) {
+          (e._status === 0 || e._status === -1) && (e._status = 2, e._result = c);
+        }
+      ), e._status === -1 && (e._status = 0, e._result = n);
+    }
+    if (e._status === 1) return e._result.default;
+    throw e._result;
+  }
+  var X = typeof reportError == "function" ? reportError : function(e) {
+    if (typeof window == "object" && typeof window.ErrorEvent == "function") {
+      var n = new window.ErrorEvent("error", {
+        bubbles: !0,
+        cancelable: !0,
+        message: typeof e == "object" && e !== null && typeof e.message == "string" ? String(e.message) : String(e),
+        error: e
+      });
+      if (!window.dispatchEvent(n)) return;
+    } else if (typeof r == "object" && typeof r.emit == "function") {
+      r.emit("uncaughtException", e);
+      return;
+    }
+    console.error(e);
+  }, Ee = {
+    map: N,
+    forEach: function(e, n, c) {
+      N(
+        e,
+        function() {
+          n.apply(this, arguments);
+        },
+        c
+      );
+    },
+    count: function(e) {
+      var n = 0;
+      return N(e, function() {
+        n++;
+      }), n;
+    },
+    toArray: function(e) {
+      return N(e, function(n) {
+        return n;
+      }) || [];
+    },
+    only: function(e) {
+      if (!k(e))
+        throw Error(
+          "React.Children.only expected to receive a single React element child."
+        );
+      return e;
+    }
+  };
+  return s.Activity = x, s.Children = Ee, s.Component = T, s.Fragment = l, s.Profiler = m, s.PureComponent = $, s.StrictMode = a, s.Suspense = v, s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = _, s.__COMPILER_RUNTIME = {
+    __proto__: null,
+    c: function(e) {
+      return _.H.useMemoCache(e);
+    }
+  }, s.cache = function(e) {
+    return function() {
+      return e.apply(null, arguments);
+    };
+  }, s.cacheSignal = function() {
+    return null;
+  }, s.cloneElement = function(e, n, c) {
+    if (e == null)
+      throw Error(
+        "The argument must be a React element, but you passed " + e + "."
+      );
+    var i = H({}, e.props), E = e.key;
+    if (n != null)
+      for (d in n.key !== void 0 && (E = "" + n.key), n)
+        !W.call(n, d) || d === "key" || d === "__self" || d === "__source" || d === "ref" && n.ref === void 0 || (i[d] = n[d]);
+    var d = arguments.length - 2;
+    if (d === 1) i.children = c;
+    else if (1 < d) {
+      for (var y = Array(d), j = 0; j < d; j++)
+        y[j] = arguments[j + 2];
+      i.children = y;
+    }
+    return Y(e.type, E, i);
+  }, s.createContext = function(e) {
+    return e = {
+      $$typeof: p,
+      _currentValue: e,
+      _currentValue2: e,
+      _threadCount: 0,
+      Provider: null,
+      Consumer: null
+    }, e.Provider = e, e.Consumer = {
+      $$typeof: f,
+      _context: e
+    }, e;
+  }, s.createElement = function(e, n, c) {
+    var i, E = {}, d = null;
+    if (n != null)
+      for (i in n.key !== void 0 && (d = "" + n.key), n)
+        W.call(n, i) && i !== "key" && i !== "__self" && i !== "__source" && (E[i] = n[i]);
+    var y = arguments.length - 2;
+    if (y === 1) E.children = c;
+    else if (1 < y) {
+      for (var j = Array(y), S = 0; S < y; S++)
+        j[S] = arguments[S + 2];
+      E.children = j;
+    }
+    if (e && e.defaultProps)
+      for (i in y = e.defaultProps, y)
+        E[i] === void 0 && (E[i] = y[i]);
+    return Y(e, d, E);
+  }, s.createRef = function() {
+    return { current: null };
+  }, s.forwardRef = function(e) {
+    return { $$typeof: g, render: e };
+  }, s.isValidElement = k, s.lazy = function(e) {
+    return {
+      $$typeof: C,
+      _payload: { _status: -1, _result: e },
+      _init: me
+    };
+  }, s.memo = function(e, n) {
+    return {
+      $$typeof: R,
+      type: e,
+      compare: n === void 0 ? null : n
+    };
+  }, s.startTransition = function(e) {
+    var n = _.T, c = {};
+    _.T = c;
+    try {
+      var i = e(), E = _.S;
+      E !== null && E(c, i), typeof i == "object" && i !== null && typeof i.then == "function" && i.then(I, X);
+    } catch (d) {
+      X(d);
+    } finally {
+      n !== null && c.types !== null && (n.types = c.types), _.T = n;
+    }
+  }, s.unstable_useCacheRefresh = function() {
+    return _.H.useCacheRefresh();
+  }, s.use = function(e) {
+    return _.H.use(e);
+  }, s.useActionState = function(e, n, c) {
+    return _.H.useActionState(e, n, c);
+  }, s.useCallback = function(e, n) {
+    return _.H.useCallback(e, n);
+  }, s.useContext = function(e) {
+    return _.H.useContext(e);
+  }, s.useDebugValue = function() {
+  }, s.useDeferredValue = function(e, n) {
+    return _.H.useDeferredValue(e, n);
+  }, s.useEffect = function(e, n) {
+    return _.H.useEffect(e, n);
+  }, s.useEffectEvent = function(e) {
+    return _.H.useEffectEvent(e);
+  }, s.useId = function() {
+    return _.H.useId();
+  }, s.useImperativeHandle = function(e, n, c) {
+    return _.H.useImperativeHandle(e, n, c);
+  }, s.useInsertionEffect = function(e, n) {
+    return _.H.useInsertionEffect(e, n);
+  }, s.useLayoutEffect = function(e, n) {
+    return _.H.useLayoutEffect(e, n);
+  }, s.useMemo = function(e, n) {
+    return _.H.useMemo(e, n);
+  }, s.useOptimistic = function(e, n) {
+    return _.H.useOptimistic(e, n);
+  }, s.useReducer = function(e, n, c) {
+    return _.H.useReducer(e, n, c);
+  }, s.useRef = function(e) {
+    return _.H.useRef(e);
+  }, s.useState = function(e) {
+    return _.H.useState(e);
+  }, s.useSyncExternalStore = function(e, n, c) {
+    return _.H.useSyncExternalStore(
+      e,
+      n,
+      c
+    );
+  }, s.useTransition = function() {
+    return _.H.useTransition();
+  }, s.version = "19.2.1", s;
+}
+var ne;
+function ue() {
+  return ne || (ne = 1, z.exports = ye()), z.exports;
+}
+var re;
+function ve() {
+  if (re) return D;
+  re = 1;
+  var r = ue().__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  return D.c = function(t) {
+    return r.H.useMemoCache(t);
+  }, D;
+}
+var oe;
+function he() {
+  return oe || (oe = 1, F.exports = ve()), F.exports;
+}
+var w = he(), u = ue();
+const Re = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M200,28H160a20,20,0,0,0-20,20V208a20,20,0,0,0,20,20h40a20,20,0,0,0,20-20V48A20,20,0,0,0,200,28Zm-4,176H164V52h32ZM96,28H56A20,20,0,0,0,36,48V208a20,20,0,0,0,20,20H96a20,20,0,0,0,20-20V48A20,20,0,0,0,96,28ZM92,204H60V52H92Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
+      "path",
+      {
+        d: "M208,48V208a8,8,0,0,1-8,8H160a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8h40A8,8,0,0,1,208,48ZM96,40H56a8,8,0,0,0-8,8V208a8,8,0,0,0,8,8H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ u.createElement("path", { d: "M200,32H160a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm0,176H160V48h40ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Zm0,176H56V48H96Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M200,34H160a14,14,0,0,0-14,14V208a14,14,0,0,0,14,14h40a14,14,0,0,0,14-14V48A14,14,0,0,0,200,34Zm2,174a2,2,0,0,1-2,2H160a2,2,0,0,1-2-2V48a2,2,0,0,1,2-2h40a2,2,0,0,1,2,2ZM96,34H56A14,14,0,0,0,42,48V208a14,14,0,0,0,14,14H96a14,14,0,0,0,14-14V48A14,14,0,0,0,96,34Zm2,174a2,2,0,0,1-2,2H56a2,2,0,0,1-2-2V48a2,2,0,0,1,2-2H96a2,2,0,0,1,2,2Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M200,32H160a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm0,176H160V48h40ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Zm0,176H56V48H96Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M200,36H160a12,12,0,0,0-12,12V208a12,12,0,0,0,12,12h40a12,12,0,0,0,12-12V48A12,12,0,0,0,200,36Zm4,172a4,4,0,0,1-4,4H160a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4h40a4,4,0,0,1,4,4ZM96,36H56A12,12,0,0,0,44,48V208a12,12,0,0,0,12,12H96a12,12,0,0,0,12-12V48A12,12,0,0,0,96,36Zm4,172a4,4,0,0,1-4,4H56a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H96a4,4,0,0,1,4,4Z" }))
+  ]
+]), Ae = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M234.49,111.07,90.41,22.94A20,20,0,0,0,60,39.87V216.13a20,20,0,0,0,30.41,16.93l144.08-88.13a19.82,19.82,0,0,0,0-33.86ZM84,208.85V47.15L216.16,128Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
+      "path",
+      {
+        d: "M228.23,134.69,84.15,222.81A8,8,0,0,1,72,216.12V39.88a8,8,0,0,1,12.15-6.69l144.08,88.12A7.82,7.82,0,0,1,228.23,134.69Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ u.createElement("path", { d: "M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M231.36,116.19,87.28,28.06a14,14,0,0,0-14.18-.27A13.69,13.69,0,0,0,66,39.87V216.13a13.69,13.69,0,0,0,7.1,12.08,14,14,0,0,0,14.18-.27l144.08-88.13a13.82,13.82,0,0,0,0-23.62Zm-6.26,13.38L81,217.7a2,2,0,0,1-2.06,0,1.78,1.78,0,0,1-1-1.61V39.87a1.78,1.78,0,0,1,1-1.61A2.06,2.06,0,0,1,80,38a2,2,0,0,1,1,.31L225.1,126.43a1.82,1.82,0,0,1,0,3.14Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("path", { d: "M230.32,117.9,86.24,29.79a11.91,11.91,0,0,0-12.17-.23A11.71,11.71,0,0,0,68,39.89V216.11a11.71,11.71,0,0,0,6.07,10.33,11.91,11.91,0,0,0,12.17-.23L230.32,138.1a11.82,11.82,0,0,0,0-20.2Zm-4.18,13.37L82.06,219.39a4,4,0,0,1-4.07.07,3.77,3.77,0,0,1-2-3.35V39.89a3.77,3.77,0,0,1,2-3.35,4,4,0,0,1,4.07.07l144.08,88.12a3.8,3.8,0,0,1,0,6.54Z" }))
+  ]
+]), ge = u.createContext({
+  color: "currentColor",
+  size: "1em",
+  weight: "regular",
+  mirrored: !1
+}), G = u.forwardRef(
+  (r, t) => {
+    const {
+      alt: o,
+      color: l,
+      size: a,
+      weight: m,
+      mirrored: f,
+      children: p,
+      weights: g,
+      ...v
+    } = r, {
+      color: R = "currentColor",
+      size: C,
+      weight: x = "regular",
+      mirrored: A = !1,
+      ...M
+    } = u.useContext(ge);
+    return /* @__PURE__ */ u.createElement(
+      "svg",
+      {
+        ref: t,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: a ?? C,
+        height: a ?? C,
+        fill: l ?? R,
+        viewBox: "0 0 256 256",
+        transform: f || A ? "scale(-1, 1)" : void 0,
+        ...M,
+        ...v
+      },
+      !!o && /* @__PURE__ */ u.createElement("title", null, o),
+      p,
+      g.get(m ?? x)
+    );
+  }
+);
+G.displayName = "IconBase";
+const se = u.forwardRef((r, t) => /* @__PURE__ */ u.createElement(G, { ref: t, ...r, weights: Re }));
+se.displayName = "PauseIcon";
+const ie = u.forwardRef((r, t) => /* @__PURE__ */ u.createElement(G, { ref: t, ...r, weights: Ae }));
+ie.displayName = "PlayIcon";
+const B = /* @__PURE__ */ new Map();
+function He(r, t) {
+  if (B.has(r))
+    return B.get(r);
+  const l = {
+    value: typeof t == "function" ? t() : t,
+    listeners: /* @__PURE__ */ new Set()
+  };
+  return B.set(r, l), l;
+}
+function Te(r, t) {
+  const o = w.c(12);
+  let l;
+  o[0] !== t || o[1] !== r ? (l = He(r, t), o[0] = t, o[1] = r, o[2] = l) : l = o[2];
+  const a = l;
+  let m;
+  o[3] !== a.listeners ? (m = (A) => (a.listeners.add(A), () => a.listeners.delete(A)), o[3] = a.listeners, o[4] = m) : m = o[4];
+  const f = m;
+  let p;
+  o[5] !== a.value ? (p = () => a.value, o[5] = a.value, o[6] = p) : p = o[6];
+  const g = p;
+  let v;
+  o[7] !== a ? (v = (A) => {
+    a.value = typeof A == "function" ? A(a.value) : A, a.listeners.forEach(Ce);
+  }, o[7] = a, o[8] = v) : v = o[8];
+  const R = v, C = u.useSyncExternalStore(f, g);
+  let x;
+  return o[9] !== R || o[10] !== C ? (x = [C, R], o[9] = R, o[10] = C, o[11] = x) : x = o[11], x;
+}
+function Ce(r) {
+  return r();
+}
+const Se = "playerState", xe = {
+  isPlaying: !1,
+  initPlay: !1
+};
+function ae() {
+  const r = w.c(5), [t, o] = Te(Se, xe);
+  let l;
+  r[0] !== o ? (l = (f) => {
+    o((p) => {
+      const g = typeof f == "function" ? f(p) : f;
+      return {
+        ...p,
+        ...g
+      };
+    });
+  }, r[0] = o, r[1] = l) : l = r[1];
+  const a = l;
+  let m;
+  return r[2] !== a || r[3] !== t ? (m = [t, a], r[2] = a, r[3] = t, r[4] = m) : m = r[4], m;
+}
+function Ve(r) {
+  const t = w.c(23), o = u.useRef(null), [l, a] = ae(), m = r.hlsLib, f = r.options;
+  let p;
+  t[0] !== m || t[1] !== f || t[2] !== r ? (p = () => {
+    const H = o.current, V = r?.src?.file;
+    if (!(!H || !V)) {
+      if (m?.isSupported?.()) {
+        const T = new m({
+          lowLatencyMode: f.lowLatencyMode
+        });
+        return T.attachMedia(H), T.on(m.Events.MEDIA_ATTACHED, () => {
+          T.loadSource(V);
+        }), T.on(m.Events.ERROR, (O, $) => {
+          r.onError && r.onError({
+            evt: O,
+            data: $
+          });
+        }), () => {
+          T.destroy();
+        };
+      }
+      H.src = V;
+    }
+  }, t[0] = m, t[1] = f, t[2] = r, t[3] = p) : p = t[3];
+  const g = r?.src?.file;
+  let v;
+  t[4] !== m || t[5] !== r.onError || t[6] !== g ? (v = [m, g, r.onError], t[4] = m, t[5] = r.onError, t[6] = g, t[7] = v) : v = t[7], u.useEffect(p, v);
+  let R, C;
+  t[8] !== f ? (R = () => {
+    const H = o.current;
+    if (!H)
+      return;
+    const V = f?.playbackRate;
+    typeof V == "number" && (H.playbackRate = V);
+  }, C = [f], t[8] = f, t[9] = R, t[10] = C) : (R = t[9], C = t[10]), u.useEffect(R, C);
+  let x, A;
+  t[11] !== a ? (x = () => {
+    const H = o.current;
+    if (!H)
+      return;
+    const V = () => {
+      a({
+        isPlaying: !0,
+        initPlay: !0
+      });
+    }, T = () => {
+      a({
+        isPlaying: !1
+      });
+    };
+    return H.addEventListener("play", V), H.addEventListener("pause", T), () => {
+      H.removeEventListener("play", V), H.removeEventListener("pause", T);
+    };
+  }, A = [a], t[11] = a, t[12] = x, t[13] = A) : (x = t[12], A = t[13]), u.useEffect(x, A);
+  let M;
+  t[14] !== f?.autostart || t[15] !== f?.muted || t[16] !== f?.objectFit || t[17] !== f?.repeat || t[18] !== l || t[19] !== r.src ? (M = r?.src?.file && /* @__PURE__ */ h.jsx("video", { playsInline: !0, ref: o, className: "w-full h-full", controls: !1, autoPlay: f?.autostart, muted: f?.muted, loop: f?.repeat, style: {
+    background: r.src.poster ? l.initPlay ? "transparent" : `url(${r.src.poster}) center / ${f?.objectFit ?? "contain"} no-repeat` : void 0,
+    objectFit: f?.objectFit ?? "contain"
+  } }), t[14] = f?.autostart, t[15] = f?.muted, t[16] = f?.objectFit, t[17] = f?.repeat, t[18] = l, t[19] = r.src, t[20] = M) : M = t[20];
+  let P;
+  return t[21] !== M ? (P = /* @__PURE__ */ h.jsx(h.Fragment, { children: M }), t[21] = M, t[22] = P) : P = t[22], P;
+}
+function we(r) {
+  const t = w.c(4);
+  let o;
+  t[0] !== r.src ? (o = r?.src?.file && /* @__PURE__ */ h.jsx("div", { children: r.src.file }), t[0] = r.src, t[1] = o) : o = t[1];
+  let l;
+  return t[2] !== o ? (l = /* @__PURE__ */ h.jsx(h.Fragment, { children: o }), t[2] = o, t[3] = l) : l = t[3], l;
+}
+function Me(r) {
+  const t = w.c(4);
+  let o;
+  t[0] !== r.src ? (o = r?.src?.file && /* @__PURE__ */ h.jsx("div", { children: r.src.file }), t[0] = r.src, t[1] = o) : o = t[1];
+  let l;
+  return t[2] !== o ? (l = /* @__PURE__ */ h.jsx(h.Fragment, { children: o }), t[2] = o, t[3] = l) : l = t[3], l;
+}
+function je(r) {
+  const t = w.c(3);
+  let o;
+  t[0] === Symbol.for("react.memo_cache_sentinel") ? (o = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }, t[0] = o) : o = t[0];
+  let l;
+  return t[1] !== r.children ? (l = /* @__PURE__ */ h.jsx("div", { style: o, className: "obtn", children: r.children }), t[1] = r.children, t[2] = l) : l = t[2], l;
+}
+function Pe(r) {
+  const t = w.c(2);
+  let o;
+  return t[0] !== r ? (o = /* @__PURE__ */ h.jsx(Ve, { ...r }), t[0] = r, t[1] = o) : o = t[1], o;
+}
+function Ze(r) {
+  const t = w.c(2);
+  let o;
+  return t[0] !== r ? (o = /* @__PURE__ */ h.jsx(we, { ...r }), t[0] = r, t[1] = o) : o = t[1], o;
+}
+function $e(r) {
+  const t = w.c(2);
+  let o;
+  return t[0] !== r ? (o = /* @__PURE__ */ h.jsx(Me, { ...r }), t[0] = r, t[1] = o) : o = t[1], o;
+}
+function Le(r) {
+  const t = w.c(6), {
+    size: o,
+    weight: l,
+    color: a
+  } = r, m = o === void 0 ? 25 : o, f = l === void 0 ? "fill" : l, p = a === void 0 ? "#ffffff" : a, [g] = ae();
+  let v;
+  t[0] === Symbol.for("react.memo_cache_sentinel") ? (v = {
+    background: "transparent",
+    border: 0,
+    padding: 0,
+    lineHeight: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }, t[0] = v) : v = t[0];
+  let R;
+  return t[1] !== p || t[2] !== g.isPlaying || t[3] !== m || t[4] !== f ? (R = /* @__PURE__ */ h.jsx(je, { children: /* @__PURE__ */ h.jsx("button", { type: "button", style: v, children: g.isPlaying ? /* @__PURE__ */ h.jsx(se, { size: m, weight: f, color: p }) : /* @__PURE__ */ h.jsx(ie, { size: m, weight: f, color: p }) }) }), t[1] = p, t[2] = g.isPlaying, t[3] = m, t[4] = f, t[5] = R) : R = t[5], R;
+}
+function Oe() {
+  const r = w.c(1);
+  let t;
+  return r[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ h.jsx("div", { children: "btn2" }), r[0] = t) : t = r[0], t;
+}
+export {
+  Ze as DashVideo,
+  Pe as HlsVideo,
+  $e as Mp4Video,
+  Le as PlayBtn,
+  Oe as PlayBtn2
+};

package/dist/vpe-react-ui.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,56 @@
+{
+  "name": "@sgrsoft/vpe-react-ui",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/vpe-react-ui.umd.js",
+  "module": "./dist/vpe-react-ui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vpe-react-ui.es.js",
+      "require": "./dist/vpe-react-ui.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "release Private": "release-it --only-version --access=restricted",
+    "release:beta Private": "release-it --preRelease=beta  --access=restricted",
+    "release": "release-it --only-version",
+    "release:beta": "release-it --preRelease=beta"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@release-it/conventional-changelog": "^10.0.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "release-it": "^19.0.6",
+    "tailwindcss": "^3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "packageManager": "pnpm@10.23.0+sha256.a1cdd7b468386a9d78a081da05d6049d7e598db62a299db92df21a7062a4b183"
+}