feat: implement video site per README spec
- Express + EJS + express-session stack (auth/navbar ported from minecraft_launcher)
- Public: main folder list, folder video grid, internal popup player (/player/:videoId)
- Admin (/op): login, folder CRUD with right-click context menu + add-folder modal
- Admin folder: video grid with right-click edit/rename/delete, "영상 추가" -> editor
- Video editor: drag-drop upload, file picker, YouTube URL probe (ETA + 5분 경고),
background yt-dlp download with progress polling, navbar title edit, trim controls,
save runs ffmpeg trim (original preserved)
- Filesystem storage under data/folders/<name>/<videoId>/{meta.json, original.<ext>, edited.<ext>}
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
56
views/op/dashboard.ejs
Normal file
56
views/op/dashboard.ejs
Normal file
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>관리자 · 폴더</title>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
</head>
|
||||
<body class="siteBody">
|
||||
<%- include('../partials/navbar', { userId }) %>
|
||||
|
||||
<main class="pageWrap">
|
||||
<section class="dashboardHeader">
|
||||
<h1>폴더</h1>
|
||||
<div class="dashboardActions">
|
||||
<button type="button" class="primaryButton" id="addFolderBtn">폴더 추가</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="folderGrid" id="folderGrid">
|
||||
<% if (folders.length === 0) { %>
|
||||
<p class="muted">아직 폴더가 없습니다. 우측 상단에서 폴더를 추가해 주세요.</p>
|
||||
<% } %>
|
||||
<% folders.forEach(function (name) { %>
|
||||
<div class="folderCard adminFolder" data-name="<%= name %>">
|
||||
<a class="folderCardLink" href="/op/folder/<%= encodeURIComponent(name) %>">
|
||||
<span class="folderIcon">📁</span>
|
||||
<span class="folderName"><%= name %></span>
|
||||
</a>
|
||||
</div>
|
||||
<% }) %>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="ctxMenu" id="ctxMenu" hidden>
|
||||
<button type="button" data-action="rename">이름 변경</button>
|
||||
<button type="button" data-action="delete" class="dangerLink">삭제</button>
|
||||
</div>
|
||||
|
||||
<div class="modalOverlay" id="addFolderModal" hidden>
|
||||
<div class="modalCard">
|
||||
<h2>폴더 추가</h2>
|
||||
<label>
|
||||
<span>폴더 이름</span>
|
||||
<input type="text" id="addFolderInput" autofocus />
|
||||
</label>
|
||||
<div class="modalActions">
|
||||
<button type="button" class="secondaryButton" id="addFolderCancel">취소</button>
|
||||
<button type="button" class="primaryButton" id="addFolderConfirm">생성</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
64
views/op/editor.ejs
Normal file
64
views/op/editor.ejs
Normal file
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>영상 편집 · <%= folder %></title>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
</head>
|
||||
<body class="siteBody">
|
||||
<header class="editorNav">
|
||||
<div class="editorNavLeft">
|
||||
<a class="muted" href="/op/folder/<%= encodeURIComponent(folder) %>">← <%= folder %></a>
|
||||
<input type="text" id="titleInput" class="titleInput" placeholder="영상 제목" value="<%= video ? video.title : '' %>" />
|
||||
</div>
|
||||
<div class="editorNavRight">
|
||||
<button type="button" class="primaryButton" id="saveBtn">저장</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="editorMain">
|
||||
<section class="editorStage">
|
||||
<div id="dropZone" class="dropZone" <% if (video) { %>hidden<% } %>>
|
||||
<p class="dropTitle">영상 추가</p>
|
||||
<p class="muted">파일을 드래그&드롭하거나, 아래에서 직접 선택하거나, YouTube 주소를 붙여넣으세요.</p>
|
||||
<input type="file" id="fileInput" accept="video/*" />
|
||||
<div class="ytRow">
|
||||
<input type="text" id="ytUrl" placeholder="https://www.youtube.com/watch?v=..." />
|
||||
<button type="button" class="secondaryButton" id="ytProbeBtn">확인</button>
|
||||
<button type="button" class="primaryButton" id="ytStartBtn" disabled>가져오기</button>
|
||||
</div>
|
||||
<p id="probeInfo" class="muted"></p>
|
||||
<progress id="downloadProgress" value="0" max="100" hidden></progress>
|
||||
<p id="uploadStatus" class="muted"></p>
|
||||
</div>
|
||||
|
||||
<div id="videoPanel" class="videoPanel" <% if (!video) { %>hidden<% } %>>
|
||||
<video id="editVideo" controls preload="metadata"
|
||||
<% if (video) { %>src="/api/video/<%= video.id %>/file"<% } %>></video>
|
||||
<div class="trimControls">
|
||||
<label>
|
||||
<span>시작(초)</span>
|
||||
<input type="number" id="startSec" step="0.1" min="0" value="<%= video && video.trim ? video.trim.startSec : 0 %>" />
|
||||
<button type="button" class="secondaryButton" data-set-current="start">현재 시점</button>
|
||||
</label>
|
||||
<label>
|
||||
<span>종료(초, 비우면 끝까지)</span>
|
||||
<input type="number" id="endSec" step="0.1" min="0" value="<%= video && video.trim && video.trim.endSec != null ? video.trim.endSec : '' %>" />
|
||||
<button type="button" class="secondaryButton" data-set-current="end">현재 시점</button>
|
||||
</label>
|
||||
<p class="muted">저장하면 ffmpeg 가 원본을 보존한 채 편집본을 만듭니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
window.__EDITOR__ = {
|
||||
folder: <%- JSON.stringify(folder) %>,
|
||||
video: <%- JSON.stringify(video) %>
|
||||
}
|
||||
</script>
|
||||
<script src="/static/editor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
50
views/op/folder.ejs
Normal file
50
views/op/folder.ejs
Normal file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>관리자 · <%= folder %></title>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
</head>
|
||||
<body class="siteBody">
|
||||
<%- include('../partials/navbar', { userId }) %>
|
||||
|
||||
<main class="pageWrap">
|
||||
<section class="dashboardHeader">
|
||||
<div>
|
||||
<a class="muted" href="/op/dashboard">← 폴더 목록</a>
|
||||
<h1>📁 <%= folder %></h1>
|
||||
</div>
|
||||
<div class="dashboardActions">
|
||||
<a class="primaryButton" href="/op/folder/<%= encodeURIComponent(folder) %>/video/editor">영상 추가</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="videoGrid" id="videoGrid">
|
||||
<% if (videos.length === 0) { %>
|
||||
<p class="muted">이 폴더에 영상이 없습니다. 우측 상단에서 영상을 추가하세요.</p>
|
||||
<% } %>
|
||||
<% videos.forEach(function (v) { %>
|
||||
<div class="videoCard adminVideo" data-id="<%= v.id %>" data-title="<%= v.title %>">
|
||||
<div class="videoThumb">▶</div>
|
||||
<div class="videoTitle"><%= v.title %></div>
|
||||
<% if (v.sourceType === 'youtube' && !v.originalFile.includes('original.') === false) { %>
|
||||
<div class="muted">YouTube</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<% }) %>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="ctxMenu" id="ctxMenu" hidden>
|
||||
<button type="button" data-action="edit">수정</button>
|
||||
<button type="button" data-action="rename">이름 변경</button>
|
||||
<button type="button" data-action="delete" class="dangerLink">삭제</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__OP__ = { folder: <%- JSON.stringify(folder) %> }
|
||||
</script>
|
||||
<script src="/static/folder.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
24
views/op/login.ejs
Normal file
24
views/op/login.ejs
Normal file
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>관리자 로그인 · 비디오 사이트</title>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
</head>
|
||||
<body class="siteBody centerLayout">
|
||||
<main class="loginCard">
|
||||
<h1>관리자 로그인</h1>
|
||||
<% if (error) { %>
|
||||
<p class="errorBanner"><%= error %></p>
|
||||
<% } %>
|
||||
<form method="post" action="/op" class="loginForm">
|
||||
<label>
|
||||
<span>비밀번호</span>
|
||||
<input name="password" type="password" autocomplete="current-password" required autofocus />
|
||||
</label>
|
||||
<button class="primaryButton" type="submit">로그인</button>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user