@sgrsoft/vpe-react-sdk 0.1.2 → 0.1.4
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.
- package/README.md +75 -0
- package/dist/vpe-react-sdk.css +1 -1
- package/dist/vpe-react-sdk.es.js +8731 -7636
- package/dist/vpe-react-sdk.umd.js +20 -11
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -36,6 +36,81 @@ export function App() {
|
|
|
36
36
|
}
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
## 레이아웃 시스템 사용 가이드
|
|
40
|
+
`VpePlayer`는 `layout` props로 컨트롤바 구성을 유연하게 커스터마이즈할 수 있습니다.
|
|
41
|
+
기본값은 내부 `defaultLayout`이며, 지정하지 않으면 기본 레이아웃을 사용합니다.
|
|
42
|
+
|
|
43
|
+
### 1) 기본 레이아웃 정의
|
|
44
|
+
레이아웃은 섹션 단위(`top`, `upper`, `center`, `lower`, `bottom`)로 구성됩니다.
|
|
45
|
+
각 섹션은 그룹 배열이며, 그룹은 `items`로 버튼을 배치합니다.
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
const layout = {
|
|
49
|
+
top: [],
|
|
50
|
+
center: [{ key: "bigPlayBtn", items: ["BigPlayBtn"] }],
|
|
51
|
+
bottom: [
|
|
52
|
+
{ key: "play", items: ["PlayBtn"], wrapper: "Group", noPadding: true },
|
|
53
|
+
{ key: "volume", items: ["VolumeBtn"], wrapper: "Group" },
|
|
54
|
+
{ key: "time", items: ["TimeBtn"], wrapper: "Group" },
|
|
55
|
+
{ key: "blank", wrapper: "Blank", items: [] },
|
|
56
|
+
{ key: "right", items: ["SubtitleBtn", "FullscreenBtn"], cap: 2, wrapper: "Group" },
|
|
57
|
+
],
|
|
58
|
+
order: ["top", "upper", "center", "seekbar", "lower", "bottom"],
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
<VpePlayer layout={layout} />
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 2) 라이브/다시보기 분기
|
|
65
|
+
라이브/다시보기 레이아웃을 분기하려면 `live`, `vod`를 사용합니다.
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
const layoutVariant = {
|
|
69
|
+
live: { /* live 전용 레이아웃 */ },
|
|
70
|
+
vod: { /* vod 전용 레이아웃 */ },
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
<VpePlayer layout={layoutVariant} />
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### 3) 반응형 레이아웃
|
|
77
|
+
PC/모바일/전체화면을 분기하려면 `pc`, `mobile`, `fullscreen`을 사용합니다.
|
|
78
|
+
각 항목은 기본 레이아웃 또는 라이브/다시보기 분기 레이아웃을 받을 수 있습니다.
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
const responsiveLayout = {
|
|
82
|
+
pc: {
|
|
83
|
+
live: { /* pc live */ },
|
|
84
|
+
vod: { /* pc vod */ },
|
|
85
|
+
},
|
|
86
|
+
mobile: {
|
|
87
|
+
live: { /* mobile live */ },
|
|
88
|
+
vod: { /* mobile vod */ },
|
|
89
|
+
},
|
|
90
|
+
fullscreen: {
|
|
91
|
+
live: { /* fullscreen live */ },
|
|
92
|
+
vod: { /* fullscreen vod */ },
|
|
93
|
+
},
|
|
94
|
+
breakpoint: 768, // 모바일 판단 기준(px)
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
<VpePlayer layout={responsiveLayout} />
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### 4) 그룹 옵션 요약
|
|
101
|
+
- `items`: 버튼 배열 또는 커스텀 ReactNode
|
|
102
|
+
- `wrapper`: `"Group"` 또는 `"Blank"` (미지정 시 기본 컨테이너)
|
|
103
|
+
- `cap`: 그룹 내 표시 개수 제한
|
|
104
|
+
- `noPadding`: 그룹 패딩 제거
|
|
105
|
+
- `align`: `"left" | "right" | "center"`
|
|
106
|
+
|
|
107
|
+
### 5) 사용 가능한 `items`
|
|
108
|
+
```
|
|
109
|
+
PlayBtn, VolumeBtn, TimeBtn, SubtitleBtn, FullscreenBtn, SettingBtn, PipBtn,
|
|
110
|
+
LevelSelectBtn, MetaBtn, BigPlayBtn, SeekBar, SettingModal, DurationBtn,
|
|
111
|
+
SkipForwardBtn, SkipBackBtn, CurrentTimeBtn, MuteBtn, Blank
|
|
112
|
+
```
|
|
113
|
+
|
|
39
114
|
### UMD
|
|
40
115
|
```html
|
|
41
116
|
<link rel="stylesheet" href="./vpePlayer.css" />
|
package/dist/vpe-react-sdk.css
CHANGED
|
@@ -1 +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:#
|
|
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: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}
|