@sgrsoft/vpe-react-sdk 0.1.0

package/README.md

@@ -0,0 +1,53 @@
+# VPE React SDK (초안)
+
+React 19/Vite 기반 VPE 플레이어 UI 라이브러리입니다. hls.js/dashjs는 번들에 포함되지 않으며, 외부 플러그인으로 주입합니다.
+
+## 설치
+```bash
+pnpm add @sgrsoft/vpe-react-sdk
+# 선택: 스트리밍 라이브러리
+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-sdk";
+
+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?accessKey=YOUR_ACCESS_KEY"></script>
+<div id="video"></div>
+<script>
+  ncplayer.use(window.Hls).use(window.dashjs);
+  const player = new ncplayer("video", {
+    aspectRatio: "16/9",
+  });
+  // player.destroy() 로 해제 가능
+</script>
+```

package/dist/vpe-react-sdk.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\[2\]{z-index:2}.flex{display:flex}.h-full{height:100%}.max-h-\[100dvh\]{max-height:100dvh}.w-full{width:100%}.max-w-\[100dvw\]{max-width:100dvw}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-hidden{overflow:hidden}.p-3{padding:.75rem}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.vpe-root-wrap{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.flex-center{display:flex;align-items:center;justify-content:center}.vpe-root-wrap *{line-height:1rem;font-size:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vpe-root-wrap{background-color:#000}.gradient-overlay{width:100%;background:linear-gradient(to bottom,#0000 0% 70%,#0006 85%,#000c)}*,*:before,*:after{box-sizing:border-box}.vpe-ios-fullscreen{position:fixed;inset:0;z-index:9999999;max-height:100dvh;max-width:100dvw;width:100dvw;height:100dvh;overflow:hidden}.obtn,.obtnNoBg{aspect-ratio:1/1;height:100%;border-radius:500px;display:flex;justify-content:center;align-items:center;padding:.5em}.obtnNoBg:hover{background-color:#00000073}.obtn-group{background-color:#00000073;height:100%;border-radius:500px;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding-left:.5rem;padding-right:.5rem}.obtn-group-nobg:hover{background-color:#00000073}.obtn-group-nobg{height:100%;border-radius:500px;display:flex;justify-content:center;align-items:center;padding-left:.5rem;padding-right:.5rem}.obtn-group:hover{background-color:#000000a6}@keyframes vpe-setting-fadein{0%{opacity:0}to{opacity:1}}@keyframes vpe-setting-slidein{0%{transform:translateY(24px)}to{transform:translateY(0)}}@keyframes vpe-menu-slidein{0%{opacity:0;transform:translate(var(--vpe-menu-slide-from))}to{opacity:1;transform:translate(0)}}.vpe-setting-modal{position:fixed;inset:0;background-color:#00000080;display:flex;z-index:1000;opacity:0;animation:vpe-setting-fadein .2s ease forwards}.vpe-setting-modal .vpe-setting-content{min-width:320px;min-height:40dvh;background-color:#4c4c4c;color:#fff;transform:translateY(24px);animation:vpe-setting-slidein .25s ease forwards;border-radius:15px}.vpe-setting-modal button{color:#fff}.vpe-modal-menu{position:relative;overflow:hidden}.vpe-modal-menu-panel{animation:vpe-menu-slidein .2s ease}.vpe-modal-menu-forward{--vpe-menu-slide-from: 24px}.vpe-modal-menu-back{--vpe-menu-slide-from: -24px}@media(max-width:768px){.obtn,.obtn-group,.obtn-group-nobg{zoom:.8;font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,system-ui,Helvetica Neue,Arial,sans-serif}.seekSliderWrapper{font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,system-ui,Helvetica Neue,Arial,sans-serif}.center-play-btn-anim{display:inline-flex}.vpe-setting-modal{min-width:100%;width:100%;justify-content:center;align-items:end}.vpe-setting-modal .vpe-setting-content{width:100%;border-bottom-right-radius:0;border-bottom-left-radius:0;padding:.5rem}.seekSliderThumbVideo{width:8em;top:-7em}}@media(min-width:768px){.obtn,.obtn-group,.obtn-group-nobg{zoom:.8}.center-play-btn-anim{display:inline-flex;animation-delay:.5s;animation:center-play-btn 1.6s ease forwards}.vpe-setting-modal{min-width:520px;align-items:center;justify-content:center;height:100%}.vpe-setting-modal .vpe-setting-content{padding:.5rem}.seekSliderThumbVideo{width:12em;top:-9em}}@keyframes center-play-btn{0%{opacity:0;transform:scale(.8)}12.5%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border-radius:50%;cursor:pointer;border:none}.seekSliderWrapper .seekSliderBg{height:5px}.seekSliderWrapper:hover .seekSliderBg{height:8px}.seekSlider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;height:10px;width:10px}.seekSlider::-moz-range-thumb{-webkit-appearance:none;cursor:pointer;height:10px;width:10px}.tra200{transition:all .2s ease}.seekSlider{--seekSliderThumbScale: 1;background-color:transparent!important;transition:all .2s ease}.seekSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:transparent!important;width:12px;height:12px;border-radius:50%;cursor:pointer;border:none;transform:scale(var(--seekSliderThumbScale));-webkit-transition:transform .15s ease;transition:transform .15s ease}.seekSlider:hover::-webkit-slider-thumb{--seekSliderThumbScale: 1.4}.seekSliderWrapper .seekSliderThumb{width:14px;height:14px;min-width:14px;min-height:14px;border-radius:50%}.seekSliderWrapper .seekSliderThumbTime{opacity:0}.seekSliderWrapper:hover .seekSliderThumbTime{opacity:1}.seekSliderWrapper .seekSliderThumbVideo{opacity:0}.seekSliderWrapper:hover .seekSliderThumbVideo{opacity:1}.defObj{display:inline-flex;align-items:center;margin:0}.VolumSlide{width:100%;height:5px;background-color:#fff;border-radius:50px}.VolumSlide::-webkit-slider-thumb{-webkit-appearance:none;background-color:#fff;width:14px;height:14px;border-radius:100%;cursor:pointer}.VolumSlide::-moz-range-thumb{background-color:#fff;width:14px;height:14px;border-radius:100%;cursor:pointer}.VolumBtnWrap{min-width:50px;display:flex;justify-content:center}.VolumBtnWrap:hover{aspect-ratio:unset;padding-right:.8rem;padding-left:.8rem}.VolumBtnWrap .vslideWrap{display:flex;align-items:center;width:0;opacity:0;overflow:hidden;transform:scaleX(0);transform-origin:left;transition:width .25s ease,opacity .2s ease,transform .25s ease;pointer-events:none}.VolumBtnWrap:hover .vslideWrap{width:5rem;opacity:1;transform:scaleX(1);pointer-events:auto;padding-right:.3rem}.VolumBtnWrap{display:flex;gap:5px;padding-left:.5rem;padding-right:.3rem}.VolumSlide{height:5px;width:100%;border-radius:50px}.ncplayer-spinner,.ncplayer-spinner:after{border-radius:50%;width:6em;height:6em}.ncplayer-spinner{font-size:10px;position:absolute;top:calc(50% - 3em);left:calc(50% - 3em);text-indent:-9999em;border-top:.5em solid hsla(0,0%,100%,.2);border-right:.5em solid hsla(0,0%,100%,.2);border-bottom:.5em solid hsla(0,0%,100%,.2);border-left:.5em solid #fff;transform:translateZ(0);animation:load8 1.1s linear infinite;z-index:3}.ios-safe{top:calc(50% - (3em + 10px) + env(safe-area-inset-top))!important;left:calc(50% - (3em + 5px))!important}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.vpe-menu-item{background-color:transparent;font-weight:600}.vpe-menu-item:hover{background-color:#fff6}.vpe-popover-wrap{position:relative}.vpe-popover-wrap .vpe-popver{position:absolute;bottom:320%;min-width:120px;display:none}.vpe-popover-wrap:hover .vpe-popver{display:flex;align-items:center;justify-content:center}.vpe-popover-wrap.vp-left .vpe-popver{left:-100%}.vpe-popover-wrap.vp-right .vpe-popver{left:-200%}.vpe-popover-wrap:hover .vpe-popver .vpe-popver-text{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.6);background-color:#000000a1;border-radius:10px;text-align:center;padding:10px 15px}