@sgrsoft/vpe-react-sdk 0.1.3 → 0.1.4

package/README.md

@@ -36,6 +36,81 @@ export function App() {
 }
 ```
 
+## 레이아웃 시스템 사용 가이드
+`VpePlayer`는 `layout` props로 컨트롤바 구성을 유연하게 커스터마이즈할 수 있습니다.
+기본값은 내부 `defaultLayout`이며, 지정하지 않으면 기본 레이아웃을 사용합니다.
+
+### 1) 기본 레이아웃 정의
+레이아웃은 섹션 단위(`top`, `upper`, `center`, `lower`, `bottom`)로 구성됩니다.
+각 섹션은 그룹 배열이며, 그룹은 `items`로 버튼을 배치합니다.
+
+```tsx
+const layout = {
+  top: [],
+  center: [{ key: "bigPlayBtn", items: ["BigPlayBtn"] }],
+  bottom: [
+    { key: "play", items: ["PlayBtn"], wrapper: "Group", noPadding: true },
+    { key: "volume", items: ["VolumeBtn"], wrapper: "Group" },
+    { key: "time", items: ["TimeBtn"], wrapper: "Group" },
+    { key: "blank", wrapper: "Blank", items: [] },
+    { key: "right", items: ["SubtitleBtn", "FullscreenBtn"], cap: 2, wrapper: "Group" },
+  ],
+  order: ["top", "upper", "center", "seekbar", "lower", "bottom"],
+};
+
+<VpePlayer layout={layout} />
+```
+
+### 2) 라이브/다시보기 분기
+라이브/다시보기 레이아웃을 분기하려면 `live`, `vod`를 사용합니다.
+
+```tsx
+const layoutVariant = {
+  live: { /* live 전용 레이아웃 */ },
+  vod: { /* vod 전용 레이아웃 */ },
+};
+
+<VpePlayer layout={layoutVariant} />
+```
+
+### 3) 반응형 레이아웃
+PC/모바일/전체화면을 분기하려면 `pc`, `mobile`, `fullscreen`을 사용합니다.
+각 항목은 기본 레이아웃 또는 라이브/다시보기 분기 레이아웃을 받을 수 있습니다.
+
+```tsx
+const responsiveLayout = {
+  pc: {
+    live: { /* pc live */ },
+    vod: { /* pc vod */ },
+  },
+  mobile: {
+    live: { /* mobile live */ },
+    vod: { /* mobile vod */ },
+  },
+  fullscreen: {
+    live: { /* fullscreen live */ },
+    vod: { /* fullscreen vod */ },
+  },
+  breakpoint: 768, // 모바일 판단 기준(px)
+};
+
+<VpePlayer layout={responsiveLayout} />
+```
+
+### 4) 그룹 옵션 요약
+- `items`: 버튼 배열 또는 커스텀 ReactNode
+- `wrapper`: `"Group"` 또는 `"Blank"` (미지정 시 기본 컨테이너)
+- `cap`: 그룹 내 표시 개수 제한
+- `noPadding`: 그룹 패딩 제거
+- `align`: `"left" | "right" | "center"`
+
+### 5) 사용 가능한 `items`
+```
+PlayBtn, VolumeBtn, TimeBtn, SubtitleBtn, FullscreenBtn, SettingBtn, PipBtn,
+LevelSelectBtn, MetaBtn, BigPlayBtn, SeekBar, SettingModal, DurationBtn,
+SkipForwardBtn, SkipBackBtn, CurrentTimeBtn, MuteBtn, Blank
+```
+
 ### UMD
 ```html
 <link rel="stylesheet" href="./vpePlayer.css" />

package/dist/vpe-react-sdk.css

@@ -1 +1 @@
-*,*: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:#25252573}.obtn-group{background-color:#25252573;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:#25252573}.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:#252525a6}@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){video::cue{font-size:1rem;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.8);background:#0009}.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}.vpe-big-play-btn{zoom:.7}.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){video::cue{font-size:1.5rem;color:#fff;background:#000000a6;line-height:.5;text-shadow:0 2px 6px rgba(0,0,0,.8)}.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}.VolumeBtnWrap{min-width:50px;display:flex;justify-content:center}.VolumeBtnWrap:hover{aspect-ratio:unset;padding-right:.8rem;padding-left:.8rem}.VolumeBtnWrap .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}.VolumeBtnWrap:hover .vslideWrap{width:5rem;opacity:1;transform:scaleX(1);pointer-events:auto;padding-right:.3rem}.VolumeBtnWrap{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{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;font-size:13px}
+*,*: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:#25252573}.obtn-group{background-color:#25252573;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:#25252573}.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:#252525a6}@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){video::cue{font-size:1rem;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.8);background:#0009}.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}.vpe-big-play-btn{zoom:.7}.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){video::cue{font-size:1.5rem;color:#fff;background:#000000a6;line-height:.5;text-shadow:0 2px 6px rgba(0,0,0,.8)}.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:hover .seekSliderThumb{width:18px;height:18px}.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}.VolumeBtnWrap{min-width:50px;display:flex;justify-content:center}.VolumeBtnWrap:hover{aspect-ratio:unset;padding-right:.8rem;padding-left:.8rem}.VolumeBtnWrap .vslideWrap{display:flex;align-items:center;width:0;opacity:0;overflow:hidden;transform:scaleX(0);transform-origin:left;transition:width .1s ease,opacity .1s ease,transform .1s ease;pointer-events:none}.VolumeBtnWrap:hover .vslideWrap{width:5rem;opacity:1;transform:scaleX(1);pointer-events:auto;padding-right:.3rem}.VolumeBtnWrap .VolumSlide{opacity:0}.VolumeBtnWrap:hover .VolumSlide{opacity:1}.VolumeBtnWrap{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{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;font-size:13px}