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

Description

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

Installation

npm install @sgrsoft/vue3-vpe-player-ui-editor

Usage

<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] 형태로 접근)