@sgrsoft/vpe-react-sdk 0.1.7 → 0.1.8

package/README.md

@@ -72,6 +72,41 @@ export function App() {
 `VpePlayer`는 `layout` props로 컨트롤바 구성을 유연하게 커스터마이즈할 수 있습니다.
 기본값은 내부 `defaultLayout`이며, 지정하지 않으면 기본 레이아웃을 사용합니다.
 
+### 실시간 레이아웃 변경 (메소드)
+UMD/ES 인스턴스에서 `layout(nextLayout, merge?)`를 호출하면 즉시 반영됩니다.
+기본 동작은 **전달된 필드만 교체**하며, `merge=false`를 전달하면 전체 교체합니다.
+
+#### ES (setup 인스턴스)
+```ts
+import { setup } from "@sgrsoft/vpe-react-sdk";
+
+const instance = setup("#video", "ACCESS_KEY", {
+  options: { playlist: [{ file: "..." }] },
+});
+
+instance.layout({
+  bottom: [{ key: "custom", items: ["SettingBtn"] }],
+});
+
+// 기존 bottom 삭제
+// instance.layout({ bottom: [] });
+
+// 전체 교체
+// instance.layout({ bottom: [] }, false);
+```
+
+#### UMD (ncplayer 인스턴스)
+```html
+<script>
+  const player = new ncplayer("#video", "ACCESS_KEY", {});
+  player.layout({
+    bottom: [{ key: "custom", items: ["SettingBtn"] }],
+  });
+  // player.layout({ bottom: [] });
+  // player.layout({ bottom: [] }, false);
+</script>
+```
+
 ### 1) 기본 레이아웃 정의
 레이아웃은 섹션 단위(`top`, `upper`, `center`, `lower`, `bottom`)로 구성됩니다.
 각 섹션은 그룹 배열이며, 그룹은 `items`로 버튼을 배치합니다.
@@ -138,7 +173,7 @@ const responsiveLayout = {
 ### 5) 사용 가능한 `items`
 ```
 PlayBtn, VolumeBtn, TimeBtn, SubtitleBtn, FullscreenBtn, SettingBtn, PipBtn,
-LevelSelectBtn, MetaDesc, BigPlayBtn, SeekBar, SettingModal, DurationBtn,
+ MetaDesc, BigPlayBtn, SeekBar, SettingModal, DurationBtn,
 SkipForwardBtn, SkipBackBtn, CurrentTimeBtn, MuteBtn, PrevBtn, NextBtn,
 NextPrevBtn, Blank
 ```