npm - @sgrsoft/vpe-react-ui - Versions diffs - 0.2.6 → 0.2.8 - Mend

@sgrsoft/vpe-react-ui 0.2.6 → 0.2.8

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 CHANGED Viewed

@@ -52,3 +52,193 @@ export function App() {
   // player.destroy() 로 해제 가능
 </script>
 ```
+## UI 컴포넌트
+이 섹션은 `src/main.tsx`에서 export되는 UI 컴포넌트들의 사용법입니다. 대부분 컴포넌트는 내부 상태(`usePlayerState`, `usePlayerController`)를 사용하므로, **동일한 플레이어 영역 안에서 렌더링**되어야 합니다. 여러 플레이어를 동시에 사용하는 경우 `PlayerStoreProvider`로 스코프를 분리하세요.
+### 공통 구성
+- `BaseStyle`: 기본 스타일과 폰트를 주입합니다. 앱 최상단 혹은 플레이어 루트에서 1회 렌더링하세요.
+  ```tsx
+  import { BaseStyle } from "@sgrsoft/vpe-react-ui";
+  export function App() {
+    return (
+      <>
+        <BaseStyle />
+        {/* ... */}
+      </>
+    );
+  }
+  ```
+- `PlayerStoreProvider`: 여러 플레이어 인스턴스를 독립 상태로 운용할 때 사용합니다.
+  ```tsx
+  import { PlayerStoreProvider } from "@sgrsoft/vpe-react-ui";
+  <PlayerStoreProvider>
+    {/* 해당 범위의 UI 컴포넌트들이 동일 상태를 공유 */}
+  </PlayerStoreProvider>
+  ```
+- `.vpe-root-wrap`: 키보드/전체화면 처리에서 기준으로 사용하는 루트 클래스입니다. 플레이어 컨테이너에 적용을 권장합니다.
+### 비디오 컴포넌트
+모든 비디오 컴포넌트는 공통적으로 다음 props를 받습니다.
+- `src`: `{ file, poster, vtt }` 형태의 소스. `vtt`는 자막 목록 배열입니다.
+- `options`: 내부 동작 옵션. 공통적으로 `autoPause`, `playbackRate`를 지원합니다.
+- `onError`: 에러 콜백.
+- `emitEvent`: `useVideoStateEvents` 이벤트 훅(예: `"timeupdate"`, `"ended"` 등)을 외부로 전달합니다.
+#### `HlsVideo`
+- HLS(m3u8) 재생 컴포넌트입니다. `hlsLib`에 `hls.js` 인스턴스를 주입합니다.
+- 추가 `options`: `lowLatencyMode`, `retry: { maxRetry, interval }`.
+```tsx
+import Hls from "hls.js";
+import { HlsVideo } from "@sgrsoft/vpe-react-ui";
+<HlsVideo
+  hlsLib={Hls}
+  src={{ file: "https://example.com/stream.m3u8", poster: "/poster.jpg" }}
+  options={{ lowLatencyMode: true, retry: { maxRetry: 3, interval: 3000 } }}
+/>;
+```
+#### `DashVideo`
+- MPEG-DASH(mpd) 재생 컴포넌트입니다. `dashLib`에 `dashjs` 인스턴스를 주입합니다.
+- 추가 `options`: `autostart`, `retry: { maxRetry, interval }`.
+```tsx
+import dashjs from "dashjs";
+import { DashVideo } from "@sgrsoft/vpe-react-ui";
+<DashVideo
+  dashLib={dashjs}
+  src={{ file: "https://example.com/stream.mpd" }}
+  options={{ autostart: true }}
+/>;
+```
+#### `Mp4Video`
+- MP4 파일 재생 컴포넌트입니다.
+```tsx
+import { Mp4Video } from "@sgrsoft/vpe-react-ui";
+<Mp4Video src={{ file: "https://example.com/video.mp4", poster: "/poster.jpg" }} />;
+```
+#### `NativeVideo`
+- 브라우저 네이티브 재생(HLS 포함) 컴포넌트입니다.
+- FairPlay DRM을 사용할 경우 `src.drm["com.apple.fps"]`에 라이선스/인증서 정보를 전달하세요.
+```tsx
+import { NativeVideo } from "@sgrsoft/vpe-react-ui";
+<NativeVideo
+  src={{
+    file: "https://example.com/stream.m3u8",
+    drm: {
+      "com.apple.fps": {
+        licenseUri: "https://license.example.com",
+        licenseRequestHeader: { Authorization: "Bearer token" },
+        certificateUri: "https://license.example.com/cert",
+      },
+    },
+  }}
+/>;
+```
+### 시킹/프로그레스
+#### `SeekBar`
+- 시킹 바와 버퍼 표시를 제공합니다. `hlsLib`/`dashLib`를 전달하면 마우스 오버 시 미리보기 영상이 표시됩니다.
+- 주요 props:
+  - `color`: 진행바 색상.
+  - `src`: `{ file, poster }`. 미리보기에 사용됩니다.
+  - `hlsLib`, `dashLib`: 미리보기에 사용할 라이브러리.
+  - `options`: 미리보기 로딩 옵션 전달.
+  - `seekingPreview`: 미리보기 사용 여부(기본 `true`).
+```tsx
+import Hls from "hls.js";
+import { SeekBar } from "@sgrsoft/vpe-react-ui";
+<SeekBar hlsLib={Hls} src={{ file: "https://example.com/stream.m3u8" }} />;
+```
+### 재생/시간 버튼
+아래 버튼들은 공통적으로 `PlayBtnProps`를 사용합니다.
+- 공통 props: `size`, `color`, `weight`, `pos`(팝오버 위치), `text`(라벨 문구), `options`.
+#### `PlayBtn`
+- 재생/일시정지 토글 버튼입니다. `text.play`, `text.pause`로 라벨을 변경할 수 있습니다.
+#### `BigPlayBtn`
+- 중앙 재생 버튼입니다. 모바일/세로 화면에서만 클릭 동작을 수행합니다.
+- 재생목록 컨트롤: `pidx`, `playlistCnt`, `next`, `prev`, `isMobile`, `isPortrait`.
+#### `SkipBackBtn` / `SkipForwardBtn`
+- 일정 초 단위 점프 버튼입니다. `options.skipSeconds`(기본 10초).
+- 라이브 + non-DVR 상태에서는 동작하지 않습니다.
+#### `PrevBtn` / `NextBtn` / `NextPrevBtn`
+- 재생목록 이동 버튼입니다. `pidx`, `playlistCnt`, `prev`, `next` 필요.
+#### `CurrentTimeBtn` / `DurationBtn`
+- 현재 시간/전체 길이를 표시합니다.
+#### `TimeBtn`
+- 라이브일 때는 LIVE 버튼, VOD일 때는 `current/duration` 텍스트를 표시합니다.
+#### `LevelSelectBtn`
+- 품질 레벨 선택 버튼입니다. `text.auto`로 Auto 라벨을 변경할 수 있습니다.
+- `HlsVideo`/`DashVideo`가 로딩한 품질 목록(`playerState.levels`) 기반으로 동작합니다.
+### 컨트롤 버튼
+#### `FullscreenBtn`
+- 전체화면 토글 버튼입니다. `options.iosFullscreenNativeMode`로 iOS 대응을 제어합니다.
+#### `SubtitleBtn`
+- 자막 on/off 버튼입니다. `playerState.hasSubtitle`가 true일 때만 노출됩니다.
+#### `MuteBtn`
+- 음소거 토글 버튼입니다.
+#### `VolumeBtn`
+- 음소거 버튼 + 볼륨 슬라이더를 함께 제공합니다.
+#### `SettingBtn`
+- 설정 모달 토글 버튼입니다. `playerState.isSettingModal`을 토글합니다.
+#### `PipBtn`
+- Picture-in-Picture 토글 버튼입니다.
+### 레이아웃/메타
+#### `MetaDesc`
+- 타이틀/프로필 정보 영역입니다.
+- props: `title`, `profileImage`, `profileName`, `createdAt`, `color`.
+#### `Blank`
+- 좌/우/중앙 정렬용 빈 공간 레이아웃 컴포넌트입니다.
+- props: `align`(`left`/`right`/`center`), `style`, `children`.
+#### `Group`
+- 버튼 그룹 래퍼입니다. 내부적으로 `BtnGroup`을 사용합니다.
+- props: `noPadding`, `cap`(간격), `noBg`, `style`.
+### 오버레이/모달
+#### `InitPlayerUi`
+- 포스터 위에 초기 재생 버튼을 띄우는 오버레이입니다.
+- props: `poster`, `options.objectFit`.
+#### `LoadingUi`
+- 로딩 스피너 오버레이입니다. `playerState.isLoading`이 true일 때 표시됩니다.
+#### `DoubleTapSeekOverlay`
+- 모바일 더블탭 시킹 오버레이입니다.
+- props:
+  - `seekSeconds`: 한번에 이동할 초(기본 10).
+  - `doubleTapWindowMs`: 더블탭 인식 시간(기본 300ms).
+  - `executeDelayMs`: 시킹 실행 지연(기본 300ms).
+  - `onSingleTap`: 단일 탭 콜백.
+#### `SettingModal`
+- 화질/재생속도/자막 설정 모달입니다.
+- props:
+  - `text`: `{ setting, quality, autoplay, playbackRate, captions, auto, notUse }` 라벨.
+  - `options.playRateSetting`: 재생 속도 선택 리스트(예: `[0.5, 1, 1.5, 2]`).
+  - `vtt` 또는 `src.vtt`: 자막 리스트.
+- 표시 여부는 `usePlayerState`의 `isSettingModal` 상태로 제어하는 패턴을 권장합니다.

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,312 @@
+import { jsx as f, Fragment as w } from "react/jsx-runtime";
+import * as a from "react";
+import x, { createContext as N, useSyncExternalStore as I, useRef as T, useEffect as Z } from "react";
+var M = { exports: {} }, R = {};
+var b;
+function j() {
+  if (b) return R;
+  b = 1;
+  var t = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  return R.c = function(e) {
+    return t.H.useMemoCache(e);
+  }, R;
+}
+var P;
+function B() {
+  return P || (P = 1, M.exports = j()), M.exports;
+}
+var g = B();
+const D = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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" }))
+  ]
+]), O = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.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" }))
+  ]
+]), U = N({
+  color: "currentColor",
+  size: "1em",
+  weight: "regular",
+  mirrored: !1
+}), S = a.forwardRef(
+  (t, e) => {
+    const {
+      alt: n,
+      color: l,
+      size: i,
+      weight: c,
+      mirrored: r,
+      children: o,
+      weights: m,
+      ...s
+    } = t, {
+      color: u = "currentColor",
+      size: E,
+      weight: V = "regular",
+      mirrored: d = !1,
+      ...H
+    } = a.useContext(U);
+    return /* @__PURE__ */ a.createElement(
+      "svg",
+      {
+        ref: e,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: i ?? E,
+        height: i ?? E,
+        fill: l ?? u,
+        viewBox: "0 0 256 256",
+        transform: r || d ? "scale(-1, 1)" : void 0,
+        ...H,
+        ...s
+      },
+      !!n && /* @__PURE__ */ a.createElement("title", null, n),
+      o,
+      m.get(c ?? V)
+    );
+  }
+);
+S.displayName = "IconBase";
+const L = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(S, { ref: e, ...t, weights: D }));
+L.displayName = "PauseIcon";
+const p = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(S, { ref: e, ...t, weights: O }));
+p.displayName = "PlayIcon";
+const _ = /* @__PURE__ */ new Map();
+function z(t, e) {
+  if (_.has(t))
+    return _.get(t);
+  const l = {
+    value: typeof e == "function" ? e() : e,
+    listeners: /* @__PURE__ */ new Set()
+  };
+  return _.set(t, l), l;
+}
+function q(t, e) {
+  const n = g.c(12);
+  let l;
+  n[0] !== e || n[1] !== t ? (l = z(t, e), n[0] = e, n[1] = t, n[2] = l) : l = n[2];
+  const i = l;
+  let c;
+  n[3] !== i.listeners ? (c = (d) => (i.listeners.add(d), () => i.listeners.delete(d)), n[3] = i.listeners, n[4] = c) : c = n[4];
+  const r = c;
+  let o;
+  n[5] !== i.value ? (o = () => i.value, n[5] = i.value, n[6] = o) : o = n[6];
+  const m = o;
+  let s;
+  n[7] !== i ? (s = (d) => {
+    i.value = typeof d == "function" ? d(i.value) : d, i.listeners.forEach(Y);
+  }, n[7] = i, n[8] = s) : s = n[8];
+  const u = s, E = I(r, m);
+  let V;
+  return n[9] !== u || n[10] !== E ? (V = [E, u], n[9] = u, n[10] = E, n[11] = V) : V = n[11], V;
+}
+function Y(t) {
+  return t();
+}
+const k = "playerState", G = {
+  isPlaying: !1,
+  initPlay: !1
+};
+function F() {
+  const t = g.c(5), [e, n] = q(k, G);
+  let l;
+  t[0] !== n ? (l = (r) => {
+    n((o) => {
+      const m = typeof r == "function" ? r(o) : r;
+      return {
+        ...o,
+        ...m
+      };
+    });
+  }, t[0] = n, t[1] = l) : l = t[1];
+  const i = l;
+  let c;
+  return t[2] !== i || t[3] !== e ? (c = [e, i], t[2] = i, t[3] = e, t[4] = c) : c = t[4], c;
+}
+function K(t) {
+  const e = g.c(23), n = T(null), [l, i] = F(), c = t.hlsLib, r = t.options;
+  let o;
+  e[0] !== c || e[1] !== r || e[2] !== t ? (o = () => {
+    const h = n.current, y = t?.src?.file;
+    if (!(!h || !y)) {
+      if (c?.isSupported?.()) {
+        const A = new c({
+          lowLatencyMode: r.lowLatencyMode
+        });
+        return A.attachMedia(h), A.on(c.Events.MEDIA_ATTACHED, () => {
+          A.loadSource(y);
+        }), A.on(c.Events.ERROR, ($, C) => {
+          t.onError && t.onError({
+            evt: $,
+            data: C
+          });
+        }), () => {
+          A.destroy();
+        };
+      }
+      h.src = y;
+    }
+  }, e[0] = c, e[1] = r, e[2] = t, e[3] = o) : o = e[3];
+  const m = t?.src?.file;
+  let s;
+  e[4] !== c || e[5] !== t.onError || e[6] !== m ? (s = [c, m, t.onError], e[4] = c, e[5] = t.onError, e[6] = m, e[7] = s) : s = e[7], Z(o, s);
+  let u, E;
+  e[8] !== r ? (u = () => {
+    const h = n.current;
+    if (!h)
+      return;
+    const y = r?.playbackRate;
+    typeof y == "number" && (h.playbackRate = y);
+  }, E = [r], e[8] = r, e[9] = u, e[10] = E) : (u = e[9], E = e[10]), Z(u, E);
+  let V, d;
+  e[11] !== i ? (V = () => {
+    const h = n.current;
+    if (!h)
+      return;
+    const y = () => {
+      i({
+        isPlaying: !0,
+        initPlay: !0
+      });
+    }, A = () => {
+      i({
+        isPlaying: !1
+      });
+    };
+    return h.addEventListener("play", y), h.addEventListener("pause", A), () => {
+      h.removeEventListener("play", y), h.removeEventListener("pause", A);
+    };
+  }, d = [i], e[11] = i, e[12] = V, e[13] = d) : (V = e[12], d = e[13]), Z(V, d);
+  let H;
+  e[14] !== r?.autostart || e[15] !== r?.muted || e[16] !== r?.objectFit || e[17] !== r?.repeat || e[18] !== l || e[19] !== t.src ? (H = t?.src?.file && /* @__PURE__ */ f("video", { playsInline: !0, ref: n, className: "w-full h-full", controls: !1, autoPlay: r?.autostart, muted: r?.muted, loop: r?.repeat, style: {
+    background: t.src.poster ? l.initPlay ? "transparent" : `url(${t.src.poster}) center / ${r?.objectFit ?? "contain"} no-repeat` : void 0,
+    objectFit: r?.objectFit ?? "contain"
+  } }), e[14] = r?.autostart, e[15] = r?.muted, e[16] = r?.objectFit, e[17] = r?.repeat, e[18] = l, e[19] = t.src, e[20] = H) : H = e[20];
+  let v;
+  return e[21] !== H ? (v = /* @__PURE__ */ f(w, { children: H }), e[21] = H, e[22] = v) : v = e[22], v;
+}
+function W(t) {
+  const e = g.c(4);
+  let n;
+  e[0] !== t.src ? (n = t?.src?.file && /* @__PURE__ */ f("div", { children: t.src.file }), e[0] = t.src, e[1] = n) : n = e[1];
+  let l;
+  return e[2] !== n ? (l = /* @__PURE__ */ f(w, { children: n }), e[2] = n, e[3] = l) : l = e[3], l;
+}
+function J(t) {
+  const e = g.c(4);
+  let n;
+  e[0] !== t.src ? (n = t?.src?.file && /* @__PURE__ */ f("div", { children: t.src.file }), e[0] = t.src, e[1] = n) : n = e[1];
+  let l;
+  return e[2] !== n ? (l = /* @__PURE__ */ f(w, { children: n }), e[2] = n, e[3] = l) : l = e[3], l;
+}
+function Q(t) {
+  const e = g.c(3);
+  let n;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (n = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }, e[0] = n) : n = e[0];
+  let l;
+  return e[1] !== t.children ? (l = /* @__PURE__ */ f("div", { style: n, className: "obtn", children: t.children }), e[1] = t.children, e[2] = l) : l = e[2], l;
+}
+function te(t) {
+  const e = g.c(2);
+  let n;
+  return e[0] !== t ? (n = /* @__PURE__ */ f(K, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
+}
+function ne(t) {
+  const e = g.c(2);
+  let n;
+  return e[0] !== t ? (n = /* @__PURE__ */ f(W, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
+}
+function ae(t) {
+  const e = g.c(2);
+  let n;
+  return e[0] !== t ? (n = /* @__PURE__ */ f(J, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
+}
+function le(t) {
+  const e = g.c(6), {
+    size: n,
+    weight: l,
+    color: i
+  } = t, c = n === void 0 ? 25 : n, r = l === void 0 ? "fill" : l, o = i === void 0 ? "#ffffff" : i, [m] = F();
+  let s;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (s = {
+    background: "transparent",
+    border: 0,
+    padding: 0,
+    lineHeight: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }, e[0] = s) : s = e[0];
+  let u;
+  return e[1] !== o || e[2] !== m.isPlaying || e[3] !== c || e[4] !== r ? (u = /* @__PURE__ */ f(Q, { children: /* @__PURE__ */ f("button", { type: "button", style: s, children: m.isPlaying ? /* @__PURE__ */ f(L, { size: c, weight: r, color: o }) : /* @__PURE__ */ f(p, { size: c, weight: r, color: o }) }) }), e[1] = o, e[2] = m.isPlaying, e[3] = c, e[4] = r, e[5] = u) : u = e[5], u;
+}
+function re() {
+  const t = g.c(1);
+  let e;
+  return t[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ f("div", { children: "btn2" }), t[0] = e) : e = t[0], e;
+}
+export {
+  ne as DashVideo,
+  te as HlsVideo,
+  ae as Mp4Video,
+  le as PlayBtn,
+  re as PlayBtn2
+};

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

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@sgrsoft/vpe-react-ui",
   "private": false,
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
   "main": "./dist/vpe-react-ui.umd.js",
   "module": "./dist/vpe-react-ui.es.js",