7105349a45
영상 파일 스트림 정규 주소를 재생 페이지와 동일한 폴더 경로 규칙으로 변경: /api/video/:topName[/:subName]/:videoId 경로의 폴더 부분이 영상 위치와 일치할 때만 200, 불일치 시 404. 재생 페이지(/video/...)와 ID 기반 레거시 스트림(/file/video/:id, /api/video/:id/file)은 그대로 유지(외부 공유 호환). Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
91 lines
4.6 KiB
Plaintext
91 lines
4.6 KiB
Plaintext
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>영상 편집 · <%= breadcrumb.join(' / ') %></title>
|
|
<link rel="stylesheet" href="/static/styles.css" />
|
|
</head>
|
|
<body class="siteBody">
|
|
<%
|
|
var folderPathEnc = breadcrumb.map(function (s) { return encodeURIComponent(s) }).join('/')
|
|
var folderHref = '/op/folder/' + folderPathEnc
|
|
var folderLabel = breadcrumb.join(' / ')
|
|
%>
|
|
<header class="editorNav">
|
|
<div class="editorNavLeft">
|
|
<a class="muted" href="<%= folderHref %>">← <%= folderLabel %></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<% } %>>
|
|
<div class="videoIdRow">
|
|
<label for="videoIdInput">영상 ID</label>
|
|
<input type="text" id="videoIdInput" autocomplete="off" spellcheck="false"
|
|
value="<%= video ? video.id : '' %>" />
|
|
<span id="idStatus" class="idStatus muted"></span>
|
|
<button type="button" class="secondaryButton" id="changeIdBtn" disabled>변경</button>
|
|
<button type="button" class="secondaryButton" id="copyShareBtn">공유 주소 복사</button>
|
|
</div>
|
|
|
|
<video id="editVideo" controls preload="metadata"
|
|
<% if (video) { %>src="/api/video/<%= folderPathEnc %>/<%= encodeURIComponent(video.id) %>?edited=0"<% } %>></video>
|
|
|
|
<div class="trimTimeline">
|
|
<div class="trimTimelineHeader">
|
|
<span class="timeReadout" id="timeReadout">00:00.0 / 00:00.0</span>
|
|
<div class="trimTimelineActions">
|
|
<button type="button" data-mark="start" title="현재 시점을 시작점으로">[ 시작점</button>
|
|
<button type="button" data-mark="end" title="현재 시점을 끝점으로">끝점 ]</button>
|
|
<button type="button" data-action="playSelection" title="선택 구간만 재생">▶ 선택 재생</button>
|
|
<button type="button" data-action="reset" title="자르기 초기화">초기화</button>
|
|
</div>
|
|
</div>
|
|
<div class="trimBar" id="trimBar">
|
|
<div class="trimRangeFill" id="trimRangeFill"></div>
|
|
<div class="trimHandle trimHandleStart" id="trimHandleStart" data-handle="start" title="시작 핸들"></div>
|
|
<div class="trimHandle trimHandleEnd" id="trimHandleEnd" data-handle="end" title="끝 핸들"></div>
|
|
<div class="trimPlayhead" id="trimPlayhead"></div>
|
|
</div>
|
|
<div class="trimNumericRow">
|
|
<label>시작(초) <input type="number" id="startSec" step="0.1" min="0" value="<%= video && video.trim ? video.trim.startSec : 0 %>" /></label>
|
|
<span class="trimDuration" id="trimDuration">선택: 0.0초</span>
|
|
<label>끝(초, 비우면 끝까지) <input type="number" id="endSec" step="0.1" min="0" value="<%= video && video.trim && video.trim.endSec != null ? video.trim.endSec : '' %>" /></label>
|
|
</div>
|
|
<p class="muted">재생바의 양쪽 파란 핸들을 끌어 구간을 정합니다. 타임라인을 클릭하면 그 지점으로 이동. 저장하면 ffmpeg 가 원본을 보존한 채 편집본을 만듭니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
window.__EDITOR__ = {
|
|
folderPath: <%- jsonForScript(breadcrumb) %>,
|
|
folderId: <%- jsonForScript(folder.id) %>,
|
|
video: <%- jsonForScript(video) %>
|
|
}
|
|
</script>
|
|
<script src="/static/editor.js"></script>
|
|
</body>
|
|
</html>
|