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

Description

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

Installation

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

Usage

import { useState, useEffect, useRef } from "react";
import { VpePlayerUiEditor } from "@sgrsoft/react-vpe-player-ui-editor";
import "@sgrsoft/react-vpe-player-ui-editor/style.css";

function App() {
    const playerRef = useRef<any>(null);
    const [layoutMode, setLayoutMode] = useState<"pc" | "mobile" | "fullscreen">("pc");
    const [playMode, setPlayMode] = useState<"vod" | "live">("vod");
    const [layoutValue, setLayoutValue] = useState<any>();

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

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

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

    // 미리보기용 플레이어 로드
    useEffect(() => {
        playerRef.current = 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,
        });
    }, []);

    return (
        <div>
            {/* 미리보기용 플레이어 */}
            <div id="video"></div>

            <div>
                <select
                    value={layoutMode}
                    onChange={(e) => setLayoutMode(e.target.value as any)}
                >
                    <option value="pc">PC</option>
                    <option value="mobile">Mobile</option>
                    <option value="fullscreen">Fullscreen</option>
                </select>

                <select
                    value={playMode}
                    onChange={(e) => setPlayMode(e.target.value as any)}
                >
                    <option value="vod">VOD</option>
                    <option value="live">LIVE</option>
                </select>
            </div>

            {/* 플레이어 UI 에디터 */}
            <VpePlayerUiEditor
                layoutMode={layoutMode}
                playMode={playMode}
                locale="ko"
                value={layoutValue}
                onChange={changeLayout}
            />
        </div>
    );
}

Props

• layoutMode: "pc" | "mobile" | "fullscreen" 레이아웃 모드
• playMode: "vod" | "live" 재생 모드
• value?: Record<string, Record<string, unknown>> 기본 레이아웃 값 설정
• locale?: "en" | "ko" | "ja" 문구 언어 (미지정 시 브라우저 언어 감지, 기본 en)
• onChange?: (layout) => void 드래그/정렬/그룹 변경 시 전체 레이아웃 맵을 전달합니다. (layout[layoutMode][playMode] 형태로 접근)

CSS Import

스타일을 반드시 별도로 import 해야 합니다:

import "@sgrsoft/react-vpe-player-ui-editor/style.css";