npm package: @sgrsoft/vue3-vpe-player-ui-editor
Description: <img src="https://tkmenfxu2702.edge.naverncp.com/profile/202602/931184ccc3b3f83834ca842a658a50c8.png">
Latest version: 0.1.12

# @sgrsoft/vue3-vpe-player-ui-editor


<img src="https://tkmenfxu2702.edge.naverncp.com/profile/202602/931184ccc3b3f83834ca842a658a50c8.png">

## Description
VPE 플레이어 UI 레이아웃을 드래그앤드롭으로 편집하는 Vue 3 컴포넌트입니다.

## Installation
```bash
npm install @sgrsoft/vue3-vpe-player-ui-editor
```

## Usage

```vue
<script setup lang="ts">
import VpePlayerUiEditor from "@sgrsoft/vue3-vpe-player-ui-editor";
import { onMounted, ref, watch } from "vue";

const player = ref(null);
const layoutMode = ref<"pc" | "mobile" | "fullscreen">("pc");
const playMode = ref<"vod" | "live">("vod");
const layoutValue = ref();

// 플레이어를 편집 모드를 위한 정지/유지
const playerPauseAction = () => {
    try {
        player.value?.changeUiMode(layoutMode.value);
        player.value?.changePlayMode(playMode.value);
        player.value?.pause();
        player.value?.currentTime(5);
        player.value?.changeOptions({
            controlActiveTime: 30000000,
        });
        player.value?.controlBarActive();
    } catch (e) {}
};

// 레이아웃 변경 시 플레이어와 미리보기 코드 동기화
const changeLayout = (data: any) => {
    playerPauseAction();
    //layout 메소드를 이용하여 UI 실시간 적용
    player.value?.layout(data);
    layoutValue.value = data;
};

// watch: 레이아웃/재생 모드 변경 시 플레이어 상태 유지
watch(
        () => [layoutMode.value, playMode.value],
        () => {
            playerPauseAction();
        }, { immediate: true },
);

// watch: v-model 레이아웃 변경 시 플레이어/코드 동기화
watch(
        layoutValue,
        (value) => {
            if (!value) return;
            changeLayout(value);
        }, { deep: true },
);

onMounted(() => {
    //미리보기용 플레이어 로드
    player.value = new ncplayer("video", {
        playlist: [
            {
                file: "https://m4qgahqg2249.edge.naverncp.com/hls/a4oif2oPHP-HlGGWOFm29A__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_,FHD_2Pass_30fps,HD_2Pass_30fps,SD_2Pass_30fps,.mp4.smil/master.m3u8",
                poster: "https://2ardrvaj2252.edge.naverncp.com/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_01.jpg",
                description: {
                    created_at: "Wed Jul 13 2022 00:00:00 GMT+0900 (한국 표준시)",
                    profile_image:
                            "https://tkmenfxu2702.edge.naverncp.com/profile/202511/cf38c0603c57faacd99cbe6d967c38b3.png",
                    profile_name: "네이버클라우드",
                    title: "네이버클라우드 테스트 영상",
                },
            },
        ],
        autostart: true,
        muted: true,
    });
});
</script>

<template>
    <!-- 미리보기용 플레이어 -->
    <div id="video"></div>
    <!-- 미리보기용 플레이어 -->
    <div>
        <select v-model="layoutMode">
            <option value="pc">PC</option>
            <option value="mobile">Mobile</option>
            <option value="fullscreen">Fullscreen</option>
        </select>

        <select v-model="playMode">
            <option value="vod">VOD</option>
            <option value="live">LIVE</option>
        </select>
    </div>

    <!-- 플레이어 UI 에디터 -->
    <VpePlayerUiEditor
        v-model="layoutValue"
        :layoutMode="layoutMode"
        :playMode="playMode"
        locale="ko"
    />
    <!-- 플레이어 UI 에디터 -->
</template>
```

## Props
- `layoutMode: "pc" | "mobile" | "fullscreen"`
  레이아웃 모드
- `playMode: "vod" | "live"`
  재생 모드
- `modelValue?: Record<string, Record<string, unknown>>`
  v-model로 기본 레이아웃 값 설정
- `locale?: "en" | "ko" | "ja"`
  문구 언어 (미지정 시 브라우저 언어 감지, 기본 en)

## Events
- `update:modelValue(layout)`
  v-model 업데이트 이벤트
- `onChange(layout)`
  드래그/정렬/그룹 변경 시 전체 레이아웃 맵을 전달합니다.
  (`layout[layoutMode][playMode]` 형태로 접근)