비디오 사이트

영상 업로드 및 저장을 위한 사이트

실행

npm install
npm run build
npm start     # 기본 http://127.0.0.1:3000  (PORT=3000, HOST=127.0.0.1)

• 외부 노출이 필요하면 HOST=0.0.0.0 npm start
• 관리자 비밀번호는 account.json 의 password 값 (초기값 admin, 운영 시 반드시 변경)
• 세션 비밀은 SESSION_SECRET 환경변수로 덮어쓰기 권장

외부 의존

• yt-dlp — YouTube 영상 가져오기 (PATH 또는 ./bin/yt-dlp 에 설치)
• ffmpeg — 영상 트림 저장 (PATH 에 설치). 없으면 trim 설정만 저장됩니다.

데이터 위치

data/
  folders/<폴더이름>/<videoId>/
    meta.json        # 영상 메타 (제목, trim, 원본/편집본 파일명)
    original.<ext>   # 원본 (항상 보존)
    edited.<ext>     # 편집본 (저장 시 생성)
  jobs/<jobId>.json  # YouTube 다운로드 작업 상태

스펙

메인 페이지 (/)

• 동영상이 저장되어있는 폴더를 나열합니다.
• 폴더를 선택해 안에 영상을 확인할수있습니다.
• 폴더를 선택하면 /folder/:폴더이름 으로 이동합니다.

폴더 화면 페이지 (/folder/:폴더이름)

• 폴더 내부에 영상을 유튜브처럼 목록으로 보여줍니다.
• 누르면 재생 플레이어가 뜨며 영상이 재생됩니다.
• 재생플레이어는 /player/:videoId로 합니다.
• 플레이어는 내부팝업처럼 띄워줍니다.

관리자 페이지 (/op)

• 동영상을 추가, 삭제, 관리하는 페이지입니다.
• https://git.tkrmagid.kr/tkrmagid/minecraft_launcher repo에 사이트에 있는 op페이지에 로그인 로직을 똑같이 가져와서 적용합니다. (navbar도 채택해서 가져오기)
• 메인 페이지처럼 폴더를 나열하고 우클릭으로 폴더 이름 수정, 삭제가 가능하도록 합니다.
• 폴더를 선택하면 /op/folder/:폴더이름 으로 이동합니다.
• 오른쪽위에 폴더추가버튼으로 폴더를 추가할수있도록 합니다.
• 폴더추가버튼 누르면 팝업으로 생성할 폴더이름을 작성한뒤 생성누르면 폴더 생성되게 설정합니다.

관리자 폴더 화면 (/op/folder/:폴더이름)

• 폴더 화면 페이지처럼 유튜브형식으로 영상을 나열하고 우클릭으로 수정, 삭제가 가능하도록 합니다.
• 오른쪽위에 영상추가버튼으로 영상을 추가할수있도록 합니다.
• 영상추가버튼 누르면 /op/folder/:폴더이름/video/editor 로 이동합니다.

영상추가 화면 (/op/folder/:폴더이름/video/editor)

• 예시1: https://github.com/boostcamp-2020/Project13-Web-Video-Editor
• 예시2: https://github.com/mifi/lossless-cut
• 예시1, 예시2 처럼 영상을 수정할수있는 편집기 페이지를 보여줍니다.
• 영상 추가는 컴퓨터에있는 영상을 드래그 드랍 하거나, 직접 폴더에서 찾거나, 유튜브 영상 주소를 추가해서 영상을 추가할수있도록 합니다.
• 유튜브에서 영상 가져오는건 백그라운드에서도 진행 되도록해서 하면서 다른걸 할수있도록 합니다.
• 영상 가져오는 시간을 미리 계산해서 5분 이상 걸릴거같으면 미리 경고를 보냅니다.
• 위쪽에 네비게이션바를 만듭니다.
• 네비게이션바 왼쪽에서 영상 이름을 수정합니다.
• 오른쪽 위에 저장을 누르면 수정한 영상이 저장됩니다.
• 원본 영상과 수정한 내용을 전부 저장해두고, 관리자폴더화면에서 영상을 우클릭해 수정을 누르면 수정하던 화면을 보여줍니다.