745b1db1cc
플레이리스트 추가 버튼 옆에 "목록 뽑기"를 두어, 누르면 `<영상ID> <실제 영상 주소>` 형식의 txt 를 내려받는다. YouTube 는 watch?v=/embed/shorts/live/youtu.be 등 어떤 형식이든 11자 영상 ID 를 뽑아 https://youtu.be/ID 로 간결화하고, 그 외(네이버 등) source_url 은 원본 그대로 출력한다. 업로드 영상처럼 주소가 없으면 ID 만 남긴다. GET /op/folder/:topName/:subName/list.txt (3세그먼트라 폴더 라우트와 충돌 없음). 파일명은 폴더 경로 기반, RFC5987 UTF-8 + ASCII 폴백. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
128 lines
5.2 KiB
Plaintext
128 lines
5.2 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">
|
|
<%- include('../partials/navbar', { userId }) %>
|
|
|
|
<%
|
|
var folderPathEnc = breadcrumb.map(function (s) { return encodeURIComponent(s) }).join('/')
|
|
var parentHref = isSubFolder ? '/op/folder/' + encodeURIComponent(breadcrumb[0]) : '/op/dashboard'
|
|
var parentLabel = isSubFolder ? '← ' + breadcrumb[0] : '← 폴더 목록'
|
|
var editorHref = '/op/folder/' + folderPathEnc + '/video/editor'
|
|
var playlistHref = '/op/folder/' + folderPathEnc + '/playlist/new'
|
|
var listTxtHref = '/op/folder/' + folderPathEnc + '/list.txt'
|
|
%>
|
|
|
|
<main class="pageWrap">
|
|
<section class="dashboardHeader">
|
|
<div>
|
|
<a class="muted" href="<%= parentHref %>"><%= parentLabel %></a>
|
|
<h1>📁 <%= breadcrumb.join(' / ') %></h1>
|
|
</div>
|
|
<div class="dashboardActions">
|
|
<% if (!isSubFolder) { %>
|
|
<button type="button" class="primaryButton" id="addSubFolderBtn">하위 폴더 추가</button>
|
|
<% } %>
|
|
<a class="primaryButton" href="<%= editorHref %>">영상 추가</a>
|
|
<% if (isSubFolder) { %>
|
|
<a class="primaryButton" href="<%= playlistHref %>">플레이리스트 추가</a>
|
|
<a class="primaryButton" href="<%= listTxtHref %>" download>목록 뽑기</a>
|
|
<% } %>
|
|
</div>
|
|
</section>
|
|
|
|
<% if (!isSubFolder) { %>
|
|
<section class="folderGrid" id="subFolderGrid">
|
|
<% if (!subFolders || subFolders.length === 0) { %>
|
|
<p class="muted">아직 하위 폴더가 없습니다. 우측 상단에서 하위 폴더를 추가하세요. (영상도 이 폴더에 바로 추가할 수 있습니다.)</p>
|
|
<% } %>
|
|
<% (subFolders || []).forEach(function (sf) { %>
|
|
<div class="folderCard adminFolder" data-folder-id="<%= sf.id %>" data-name="<%= sf.name %>">
|
|
<a class="folderCardLink" href="/op/folder/<%= folderPathEnc %>/<%= encodeURIComponent(sf.name) %>">
|
|
<span class="folderIcon">📁</span>
|
|
<span class="folderName"><%= sf.name %></span>
|
|
</a>
|
|
</div>
|
|
<% }) %>
|
|
</section>
|
|
<% } %>
|
|
|
|
<section class="videoGrid" id="videoGrid">
|
|
<% if (videos.length === 0) { %>
|
|
<p class="muted">이 폴더에 영상이 없습니다. 우측 상단에서 영상을 추가하세요.</p>
|
|
<% } %>
|
|
<% videos.forEach(function (v) {
|
|
var shareUrl = '/video/' + folderPathEnc + '/' + encodeURIComponent(v.id)
|
|
%>
|
|
<div class="videoCard adminVideo"
|
|
data-id="<%= v.id %>"
|
|
data-video-id="<%= v.id %>"
|
|
data-title="<%= v.title %>"
|
|
data-share-url="<%= shareUrl %>">
|
|
<div class="videoThumb">
|
|
<img class="videoThumbImg" src="/file/video/<%= folderPathEnc %>/<%= encodeURIComponent(v.id) %>/thumb" alt="" loading="lazy" onerror="this.style.display='none'" />
|
|
<span class="videoThumbPlay">▶</span>
|
|
</div>
|
|
<div class="videoTitle"><%= v.title %></div>
|
|
<% if (v.sourceType === 'youtube') { %>
|
|
<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="changeId">ID 변경</button>
|
|
<button type="button" data-action="copyUrl">영상 주소 복사</button>
|
|
<button type="button" data-action="delete" class="dangerLink">삭제</button>
|
|
</div>
|
|
|
|
<div class="ctxMenu" id="folderCtxMenu" hidden>
|
|
<button type="button" data-action="rename">이름 변경</button>
|
|
<button type="button" data-action="delete" class="dangerLink">삭제</button>
|
|
</div>
|
|
|
|
<div class="playerOverlay" id="playerOverlay" hidden>
|
|
<div class="playerModal" role="dialog" aria-modal="true">
|
|
<button type="button" class="playerClose" id="playerClose" aria-label="닫기">✕</button>
|
|
<div class="playerTitle" id="playerTitle"></div>
|
|
<video id="playerVideo" controls preload="metadata"></video>
|
|
</div>
|
|
</div>
|
|
|
|
<% if (!isSubFolder) { %>
|
|
<div class="modalOverlay" id="addSubFolderModal" hidden>
|
|
<div class="modalCard">
|
|
<h2>하위 폴더 추가</h2>
|
|
<label>
|
|
<span>폴더 이름</span>
|
|
<input type="text" id="addSubFolderInput" autofocus />
|
|
</label>
|
|
<div class="modalActions">
|
|
<button type="button" class="secondaryButton" id="addSubFolderCancel">취소</button>
|
|
<button type="button" class="primaryButton" id="addSubFolderConfirm">생성</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
|
|
<script>
|
|
window.__OP__ = {
|
|
folderId: <%- jsonForScript(folder.id) %>,
|
|
folderPath: <%- jsonForScript(breadcrumb) %>,
|
|
isSubFolder: <%- jsonForScript(isSubFolder) %>
|
|
}
|
|
</script>
|
|
<script src="/static/folder.js"></script>
|
|
<script src="/static/player.js"></script>
|
|
</body>
|
|
</html>
|