885 lines
34 KiB
JavaScript
885 lines
34 KiB
JavaScript
/* 플레이리스트 import UI.
|
|
*
|
|
* 흐름:
|
|
* 1) URL 입력 → 목록 불러오기 (POST /playlist/probe)
|
|
* 2) 항목 목록 렌더 + 인라인 편집 (제목, ID) + 드래그 재정렬 + 항목 삭제
|
|
* 3) ID 모드 토글 (랜덤 / 시퀀셜) — 시퀀셜이면 zero-pad 토글 노출
|
|
* 4) 등록 → POST /playlist/start → 폴더 페이지로 돌아가서 다운로드 폴링
|
|
*/
|
|
(function () {
|
|
var ctx = window.__PLAYLIST__ || {}
|
|
var folderPath = ctx.folderPath || []
|
|
var folderPathEnc = folderPath
|
|
.map(function (s) { return encodeURIComponent(s) })
|
|
.join('/')
|
|
var folderBaseUrl = '/op/folder/' + folderPathEnc
|
|
var probeUrl = folderBaseUrl + '/playlist/probe'
|
|
var startUrl = folderBaseUrl + '/playlist/start'
|
|
|
|
var ID_RE = /^[a-zA-Z0-9_-]{1,64}$/
|
|
var DEFAULT_LENGTH = 15 // 기본 재생 길이(초)
|
|
|
|
// ─── state ────────────────────────────────────────────────────────────
|
|
// entries: [{ url, title, videoId, durationSec, thumbnailUrl, ytId,
|
|
// startSec:number(기본0), lengthSec:number(기본15, 시작부터 재생할 초),
|
|
// idStatus:'pending'|'ok'|'bad', idReason:string, idDebounce:number }]
|
|
var state = {
|
|
entries: [],
|
|
idMode: 'random', // 'random' | 'sequential'
|
|
zeroPad: false,
|
|
busy: false
|
|
}
|
|
|
|
// ─── DOM refs ─────────────────────────────────────────────────────────
|
|
var urlInput = document.getElementById('playlistUrl')
|
|
var probeBtn = document.getElementById('probeBtn')
|
|
var probeStatus = document.getElementById('probeStatus')
|
|
var entriesSection = document.getElementById('entriesSection')
|
|
var entryList = document.getElementById('entryList')
|
|
var entriesCount = document.getElementById('entriesCount')
|
|
var idModeRadios = document.getElementsByName('idMode')
|
|
var zeroPadWrap = document.getElementById('zeroPadWrap')
|
|
var zeroPadToggle = document.getElementById('zeroPadToggle')
|
|
var registerBtn = document.getElementById('registerBtn')
|
|
var registerStatus = document.getElementById('registerStatus')
|
|
|
|
// ─── 유틸 ─────────────────────────────────────────────────────────────
|
|
function randomId() {
|
|
// 24자 hex (UUID 압축). crypto.randomUUID 가 없는 옛 브라우저 폴백.
|
|
if (window.crypto && typeof crypto.randomUUID === 'function') {
|
|
return crypto.randomUUID().replace(/-/g, '').slice(0, 24)
|
|
}
|
|
var s = ''
|
|
for (var i = 0; i < 24; i++) {
|
|
s += Math.floor(Math.random() * 16).toString(16)
|
|
}
|
|
return s
|
|
}
|
|
|
|
function formatDuration(sec) {
|
|
if (sec == null || !isFinite(sec)) return ''
|
|
sec = Math.round(sec)
|
|
var h = Math.floor(sec / 3600)
|
|
var m = Math.floor((sec % 3600) / 60)
|
|
var s = sec % 60
|
|
if (h > 0) return h + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0')
|
|
return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0')
|
|
}
|
|
|
|
function setProbeStatus(text, cls) {
|
|
probeStatus.textContent = text || ''
|
|
probeStatus.className = cls || 'muted'
|
|
}
|
|
function setRegisterStatus(text, cls) {
|
|
registerStatus.textContent = text || ''
|
|
registerStatus.className = cls || 'muted'
|
|
}
|
|
|
|
// ─── ID 생성 / 재계산 ─────────────────────────────────────────────────
|
|
function regenerateIds() {
|
|
var n = state.entries.length
|
|
if (state.idMode === 'random') {
|
|
for (var i = 0; i < n; i++) {
|
|
state.entries[i].videoId = randomId()
|
|
state.entries[i].idStatus = 'ok'
|
|
state.entries[i].idReason = ''
|
|
}
|
|
} else {
|
|
// sequential: 1..n, optional zero-pad based on n
|
|
var width = state.zeroPad ? String(n).length : 0
|
|
for (var j = 0; j < n; j++) {
|
|
var num = String(j + 1)
|
|
if (width > 0) while (num.length < width) num = '0' + num
|
|
state.entries[j].videoId = num
|
|
state.entries[j].idStatus = 'pending'
|
|
state.entries[j].idReason = ''
|
|
}
|
|
// 시퀀셜은 짧은 숫자 ID 라 충돌 가능성이 상대적으로 크므로 일괄 가용성 확인.
|
|
for (var k = 0; k < n; k++) {
|
|
scheduleIdCheck(k, 0)
|
|
}
|
|
}
|
|
}
|
|
|
|
// ─── ID 가용성 확인 (단건) ────────────────────────────────────────────
|
|
function scheduleIdCheck(idx, delay) {
|
|
var entry = state.entries[idx]
|
|
if (!entry) return
|
|
if (entry.idDebounce) { clearTimeout(entry.idDebounce); entry.idDebounce = 0 }
|
|
var v = entry.videoId
|
|
if (!v) {
|
|
entry.idStatus = 'bad'
|
|
entry.idReason = '비어 있음'
|
|
paintEntryStatus(idx)
|
|
return
|
|
}
|
|
if (!ID_RE.test(v)) {
|
|
entry.idStatus = 'bad'
|
|
entry.idReason = '형식: 영문/숫자/_/- (1~64자)'
|
|
paintEntryStatus(idx)
|
|
return
|
|
}
|
|
// 요청 내 중복 검사
|
|
for (var i = 0; i < state.entries.length; i++) {
|
|
if (i !== idx && state.entries[i].videoId === v) {
|
|
entry.idStatus = 'bad'
|
|
entry.idReason = '같은 ID 가 다른 항목에 있음'
|
|
paintEntryStatus(idx)
|
|
return
|
|
}
|
|
}
|
|
entry.idStatus = 'pending'
|
|
entry.idReason = '확인 중…'
|
|
paintEntryStatus(idx)
|
|
entry.idDebounce = setTimeout(function () {
|
|
var current = state.entries[idx]
|
|
if (!current || current.videoId !== v) return
|
|
fetch('/op/videos/idAvailable?id=' + encodeURIComponent(v), { cache: 'no-store' })
|
|
.then(function (r) { return r.json() })
|
|
.then(function (j) {
|
|
var c = state.entries[idx]
|
|
if (!c || c.videoId !== v) return
|
|
if (j && j.ok && j.available) {
|
|
c.idStatus = 'ok'
|
|
c.idReason = ''
|
|
} else {
|
|
c.idStatus = 'bad'
|
|
c.idReason = (j && j.reason) || '이미 사용 중'
|
|
}
|
|
paintEntryStatus(idx)
|
|
})
|
|
.catch(function () {
|
|
var c = state.entries[idx]
|
|
if (!c || c.videoId !== v) return
|
|
c.idStatus = 'pending'
|
|
c.idReason = '확인 실패 (재시도 자동 대기)'
|
|
paintEntryStatus(idx)
|
|
})
|
|
}, delay != null ? delay : 250)
|
|
}
|
|
|
|
// ─── 렌더 ─────────────────────────────────────────────────────────────
|
|
function render() {
|
|
entriesCount.textContent = state.entries.length + ' 항목'
|
|
entryList.innerHTML = ''
|
|
for (var i = 0; i < state.entries.length; i++) {
|
|
entryList.appendChild(buildRow(i))
|
|
}
|
|
// sequential 모드에서 아무 항목이라도 충돌 있으면 등록 버튼 비활성.
|
|
updateRegisterEnable()
|
|
}
|
|
|
|
function buildRow(idx) {
|
|
var entry = state.entries[idx]
|
|
var li = document.createElement('li')
|
|
li.className = 'playlistEntryRow'
|
|
li.draggable = true
|
|
li.dataset.idx = String(idx)
|
|
li.innerHTML = ''
|
|
+ '<span class="dragHandle" title="드래그로 순서 변경">≡</span>'
|
|
+ '<span class="entryNum">' + (idx + 1) + '</span>'
|
|
+ '<div class="entryThumb" title="클릭하면 재생"></div>'
|
|
+ '<div class="entryFields">'
|
|
+ '<input type="text" class="entryTitleInput" />'
|
|
+ '<div class="entryIdRow">'
|
|
+ '<input type="text" class="entryIdInput" autocomplete="off" spellcheck="false" />'
|
|
+ '<span class="entryIdStatus muted"></span>'
|
|
+ '</div>'
|
|
+ '</div>'
|
|
+ '<div class="entryTrim">'
|
|
+ '<label>시작 <input type="text" class="entryStartInput" autocomplete="off" /></label>'
|
|
+ '<label>길이(초) <input type="text" class="entryLengthInput" autocomplete="off" /></label>'
|
|
+ '</div>'
|
|
+ '<span class="entryDuration muted"></span>'
|
|
+ '<button type="button" class="entryRemove" title="제외">✕</button>'
|
|
|
|
var thumbBox = li.querySelector('.entryThumb')
|
|
var titleInput = li.querySelector('.entryTitleInput')
|
|
var idInput = li.querySelector('.entryIdInput')
|
|
var startInput = li.querySelector('.entryStartInput')
|
|
var lengthInput = li.querySelector('.entryLengthInput')
|
|
var durSpan = li.querySelector('.entryDuration')
|
|
var removeBtn = li.querySelector('.entryRemove')
|
|
|
|
if (entry.thumbnailUrl) {
|
|
var img = document.createElement('img')
|
|
img.src = entry.thumbnailUrl
|
|
img.alt = ''
|
|
img.loading = 'lazy'
|
|
// 이미지가 깨지면(예: 비공개/삭제 영상) 빈 박스로 둔다.
|
|
img.addEventListener('error', function () { thumbBox.classList.add('entryThumbEmpty') })
|
|
thumbBox.appendChild(img)
|
|
} else {
|
|
thumbBox.classList.add('entryThumbEmpty')
|
|
}
|
|
|
|
titleInput.value = entry.title || ''
|
|
idInput.value = entry.videoId || ''
|
|
durSpan.textContent = formatDuration(entry.durationSec)
|
|
paintTrimInputs(idx, startInput, lengthInput)
|
|
|
|
titleInput.addEventListener('input', function () {
|
|
state.entries[idx].title = titleInput.value
|
|
})
|
|
idInput.addEventListener('input', function () {
|
|
state.entries[idx].videoId = idInput.value.trim()
|
|
scheduleIdCheck(idx, 250)
|
|
// 요청 내 중복은 다른 행에도 영향 → 가시적으로 갱신
|
|
revalidateOtherIds(idx)
|
|
})
|
|
startInput.addEventListener('change', function () {
|
|
var e = state.entries[idx]
|
|
var sec = parseClock(startInput.value)
|
|
e.startSec = sec != null && sec > 0 ? sec : 0
|
|
paintTrimInputs(idx, startInput, lengthInput)
|
|
})
|
|
lengthInput.addEventListener('change', function () {
|
|
var e = state.entries[idx]
|
|
var sec = parseClock(lengthInput.value)
|
|
e.lengthSec = sec != null && sec > 0 ? sec : DEFAULT_LENGTH
|
|
paintTrimInputs(idx, startInput, lengthInput)
|
|
})
|
|
thumbBox.addEventListener('click', function () { openPreview(idx) })
|
|
li.addEventListener('contextmenu', function (ev) {
|
|
// input/버튼 위에서의 우클릭은 기본 메뉴를 살려 둔다 (텍스트 편집 편의).
|
|
var t = ev.target
|
|
if (t && (t.tagName === 'INPUT' || t.tagName === 'BUTTON')) return
|
|
ev.preventDefault()
|
|
openEntryCtxMenu(idx, ev.clientX, ev.clientY)
|
|
})
|
|
removeBtn.addEventListener('click', function () {
|
|
state.entries.splice(idx, 1)
|
|
// sequential 이면 번호 재계산
|
|
if (state.idMode === 'sequential') regenerateIds()
|
|
render()
|
|
})
|
|
|
|
attachRowDnd(li, idx)
|
|
paintEntryStatusInto(idx, li)
|
|
return li
|
|
}
|
|
|
|
// 항목의 시작/길이 입력칸 값을 상태로부터 다시 그린다.
|
|
function paintTrimInputs(idx, startInput, lengthInput) {
|
|
var e = state.entries[idx]
|
|
if (!e) return
|
|
if (!startInput) {
|
|
var row = findRow(idx)
|
|
if (!row) return
|
|
startInput = row.querySelector('.entryStartInput')
|
|
lengthInput = row.querySelector('.entryLengthInput')
|
|
if (!startInput || !lengthInput) return
|
|
}
|
|
startInput.value = formatClock(e.startSec || 0)
|
|
lengthInput.value = formatLength(e.lengthSec)
|
|
}
|
|
|
|
function findRow(idx) {
|
|
var rows = entryList.children
|
|
for (var i = 0; i < rows.length; i++) {
|
|
if (Number(rows[i].dataset.idx) === idx) return rows[i]
|
|
}
|
|
return null
|
|
}
|
|
|
|
function paintEntryStatus(idx) {
|
|
var rows = entryList.children
|
|
for (var i = 0; i < rows.length; i++) {
|
|
var r = rows[i]
|
|
if (Number(r.dataset.idx) === idx) {
|
|
paintEntryStatusInto(idx, r)
|
|
break
|
|
}
|
|
}
|
|
updateRegisterEnable()
|
|
}
|
|
function paintEntryStatusInto(idx, rowEl) {
|
|
var entry = state.entries[idx]
|
|
if (!entry) return
|
|
var statusEl = rowEl.querySelector('.entryIdStatus')
|
|
if (!statusEl) return
|
|
if (entry.idStatus === 'ok') {
|
|
statusEl.textContent = '사용 가능'
|
|
statusEl.className = 'entryIdStatus idStatusOk'
|
|
} else if (entry.idStatus === 'bad') {
|
|
statusEl.textContent = entry.idReason || '오류'
|
|
statusEl.className = 'entryIdStatus idStatusBad'
|
|
} else {
|
|
statusEl.textContent = entry.idReason || '확인 중…'
|
|
statusEl.className = 'entryIdStatus muted'
|
|
}
|
|
}
|
|
|
|
// 한 항목의 ID 가 바뀌면 같은 ID 를 가진 다른 항목의 상태도 새로 평가해야 한다.
|
|
function revalidateOtherIds(changedIdx) {
|
|
for (var i = 0; i < state.entries.length; i++) {
|
|
if (i === changedIdx) continue
|
|
scheduleIdCheck(i, 0)
|
|
}
|
|
}
|
|
|
|
function updateRegisterEnable() {
|
|
var ok = state.entries.length > 0 && !state.busy
|
|
if (ok) {
|
|
for (var i = 0; i < state.entries.length; i++) {
|
|
if (state.entries[i].idStatus !== 'ok') { ok = false; break }
|
|
if (!state.entries[i].title || !state.entries[i].title.trim()) { ok = false; break }
|
|
}
|
|
}
|
|
registerBtn.disabled = !ok
|
|
}
|
|
|
|
// ─── 드래그 재정렬 ────────────────────────────────────────────────────
|
|
// 패턴: 원본 요소 자체를 dragover 동안 이동시켜 placeholder 없이 라이브 미리보기.
|
|
var drag = null // { srcEl }
|
|
function attachRowDnd(li) {
|
|
li.addEventListener('dragstart', function (e) {
|
|
// input 안에서 드래그 시작은 막는다 (텍스트 드래그와 충돌).
|
|
var t = e.target
|
|
if (t && t.tagName === 'INPUT') {
|
|
e.preventDefault()
|
|
return
|
|
}
|
|
drag = { srcEl: li }
|
|
try {
|
|
e.dataTransfer.setData('text/plain', li.dataset.idx)
|
|
e.dataTransfer.effectAllowed = 'move'
|
|
} catch (_) {}
|
|
setTimeout(function () {
|
|
if (drag && drag.srcEl) drag.srcEl.classList.add('dragGhost')
|
|
}, 0)
|
|
})
|
|
li.addEventListener('dragend', function () {
|
|
if (drag && drag.srcEl) drag.srcEl.classList.remove('dragGhost')
|
|
drag = null
|
|
})
|
|
}
|
|
entryList.addEventListener('dragover', function (e) {
|
|
if (!drag) return
|
|
e.preventDefault()
|
|
try { e.dataTransfer.dropEffect = 'move' } catch (_) {}
|
|
var target = null
|
|
for (var i = 0; i < entryList.children.length; i++) {
|
|
var c = entryList.children[i]
|
|
if (c === drag.srcEl) continue
|
|
var rect = c.getBoundingClientRect()
|
|
if (e.clientY < rect.top + rect.height / 2) { target = c; break }
|
|
}
|
|
if (target) {
|
|
if (drag.srcEl.nextSibling !== target) entryList.insertBefore(drag.srcEl, target)
|
|
} else {
|
|
if (drag.srcEl !== entryList.lastChild) entryList.appendChild(drag.srcEl)
|
|
}
|
|
})
|
|
entryList.addEventListener('drop', function (e) {
|
|
if (!drag) return
|
|
e.preventDefault()
|
|
// 새 순서 = DOM 순서대로 state 배열을 다시 만든다.
|
|
var newOrder = []
|
|
for (var i = 0; i < entryList.children.length; i++) {
|
|
var idx = Number(entryList.children[i].dataset.idx)
|
|
newOrder.push(state.entries[idx])
|
|
}
|
|
state.entries = newOrder
|
|
drag = null
|
|
if (state.idMode === 'sequential') regenerateIds()
|
|
render()
|
|
})
|
|
|
|
// ─── ID 모드 토글 ─────────────────────────────────────────────────────
|
|
for (var i = 0; i < idModeRadios.length; i++) {
|
|
idModeRadios[i].addEventListener('change', function (e) {
|
|
if (!e.target.checked) return
|
|
state.idMode = e.target.value
|
|
zeroPadWrap.hidden = state.idMode !== 'sequential'
|
|
regenerateIds()
|
|
render()
|
|
})
|
|
}
|
|
zeroPadToggle.addEventListener('change', function () {
|
|
state.zeroPad = zeroPadToggle.checked
|
|
if (state.idMode === 'sequential') {
|
|
regenerateIds()
|
|
render()
|
|
}
|
|
})
|
|
|
|
// ─── probe ────────────────────────────────────────────────────────────
|
|
probeBtn.addEventListener('click', function () {
|
|
var url = (urlInput.value || '').trim()
|
|
if (!url) {
|
|
setProbeStatus('플레이리스트 URL 을 입력해 주세요.', 'idStatusBad')
|
|
return
|
|
}
|
|
probeBtn.disabled = true
|
|
setProbeStatus('목록을 불러오는 중…', 'muted')
|
|
fetch(probeUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ url: url })
|
|
})
|
|
.then(function (r) { return r.json().then(function (j) { return { status: r.status, body: j } }) })
|
|
.then(function (res) {
|
|
if (!res.body || !res.body.ok) {
|
|
var msg = (res.body && res.body.message) || ('HTTP ' + res.status)
|
|
setProbeStatus(msg, 'idStatusBad')
|
|
return
|
|
}
|
|
var raw = res.body.entries || []
|
|
state.entries = raw.map(function (e) {
|
|
return {
|
|
url: e.url,
|
|
title: e.title || '제목 없음',
|
|
durationSec: e.durationSec,
|
|
thumbnailUrl: e.thumbnailUrl || null,
|
|
ytId: extractYouTubeId(e.url),
|
|
videoId: '',
|
|
startSec: 0,
|
|
lengthSec: DEFAULT_LENGTH,
|
|
idStatus: 'pending',
|
|
idReason: ''
|
|
}
|
|
})
|
|
regenerateIds()
|
|
render()
|
|
entriesSection.hidden = state.entries.length === 0
|
|
setProbeStatus(state.entries.length + ' 개 항목을 불러왔습니다.', 'idStatusOk')
|
|
})
|
|
.catch(function (err) {
|
|
setProbeStatus('요청 실패: ' + (err && err.message ? err.message : err), 'idStatusBad')
|
|
})
|
|
.finally(function () {
|
|
probeBtn.disabled = false
|
|
})
|
|
})
|
|
|
|
// ─── register ────────────────────────────────────────────────────────
|
|
registerBtn.addEventListener('click', function () {
|
|
if (registerBtn.disabled) return
|
|
var payload = {
|
|
entries: state.entries.map(function (e) {
|
|
return {
|
|
url: e.url,
|
|
title: (e.title || '').trim(),
|
|
videoId: (e.videoId || '').trim(),
|
|
startSec: e.startSec || 0,
|
|
endSec: computeEndSec(e)
|
|
}
|
|
})
|
|
}
|
|
state.busy = true
|
|
registerBtn.disabled = true
|
|
setRegisterStatus('등록 중…', 'muted')
|
|
fetch(startUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
})
|
|
.then(function (r) { return r.json().then(function (j) { return { status: r.status, body: j } }) })
|
|
.then(function (res) {
|
|
if (!res.body || !res.body.ok) {
|
|
var msg = (res.body && res.body.message) || ('HTTP ' + res.status)
|
|
state.busy = false
|
|
setRegisterStatus(msg, 'idStatusBad')
|
|
updateRegisterEnable()
|
|
return
|
|
}
|
|
setRegisterStatus(
|
|
(res.body.jobs ? res.body.jobs.length : 0) + ' 개 다운로드가 큐에 등록되었습니다. 폴더 페이지로 이동합니다…',
|
|
'idStatusOk'
|
|
)
|
|
setTimeout(function () {
|
|
location.href = folderBaseUrl
|
|
}, 800)
|
|
})
|
|
.catch(function (err) {
|
|
state.busy = false
|
|
setRegisterStatus('요청 실패: ' + (err && err.message ? err.message : err), 'idStatusBad')
|
|
updateRegisterEnable()
|
|
})
|
|
})
|
|
|
|
// ─── 시간 파싱/표시 + YouTube id 추출 ──────────────────────────────────
|
|
// "ss" / "mm:ss" / "hh:mm:ss" / 소수 초 를 모두 받아 초(number)로. 빈칸/오류는 null.
|
|
function parseClock(str) {
|
|
if (str == null) return null
|
|
str = String(str).trim()
|
|
if (!str) return null
|
|
var total = 0
|
|
if (str.indexOf(':') >= 0) {
|
|
var parts = str.split(':')
|
|
for (var i = 0; i < parts.length; i++) {
|
|
var n = Number(parts[i])
|
|
if (!isFinite(n) || n < 0) return null
|
|
total = total * 60 + n
|
|
}
|
|
} else {
|
|
var v = Number(str)
|
|
if (!isFinite(v) || v < 0) return null
|
|
total = v
|
|
}
|
|
return total
|
|
}
|
|
// 입력칸 표시용. formatDuration 과 동일 포맷(mm:ss / h:mm:ss).
|
|
function formatClock(sec) {
|
|
if (sec == null || !isFinite(sec)) return ''
|
|
return formatDuration(sec)
|
|
}
|
|
function extractYouTubeId(url) {
|
|
if (!url) return null
|
|
var m = String(url).match(
|
|
/(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|v\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/
|
|
)
|
|
return m ? m[1] : null
|
|
}
|
|
// 재생 길이(초) 표시용. 정수면 "15", 소수면 "12.3".
|
|
function formatLength(sec) {
|
|
if (sec == null || !isFinite(sec) || sec <= 0) return ''
|
|
var r = Math.round(sec * 10) / 10
|
|
return r % 1 === 0 ? String(r) : r.toFixed(1)
|
|
}
|
|
// 시작 + 길이 → 백엔드용 종료초. 영상 끝을 넘으면 null(끝까지)로.
|
|
function computeEndSec(e) {
|
|
var start = e.startSec || 0
|
|
var len = e.lengthSec != null && e.lengthSec > 0 ? e.lengthSec : DEFAULT_LENGTH
|
|
var end = start + len
|
|
if (e.durationSec != null && end >= e.durationSec - 0.01) return null
|
|
return end
|
|
}
|
|
function clampNum(v, lo, hi) { return Math.min(hi, Math.max(lo, v)) }
|
|
|
|
// ─── 일괄 시작/길이 적용 + 초기화 ──────────────────────────────────────
|
|
var bulkStart = document.getElementById('bulkStart')
|
|
var bulkLength = document.getElementById('bulkLength')
|
|
var bulkApplyBtn = document.getElementById('bulkApplyBtn')
|
|
var bulkResetBtn = document.getElementById('bulkResetBtn')
|
|
|
|
bulkApplyBtn.addEventListener('click', function () {
|
|
var s = parseClock(bulkStart.value)
|
|
var startSec = s != null && s > 0 ? s : 0
|
|
var len = parseClock(bulkLength.value)
|
|
var lengthSec = len != null && len > 0 ? len : DEFAULT_LENGTH
|
|
for (var i = 0; i < state.entries.length; i++) {
|
|
var e = state.entries[i]
|
|
e.startSec = startSec
|
|
e.lengthSec = lengthSec
|
|
}
|
|
render()
|
|
})
|
|
bulkResetBtn.addEventListener('click', function () {
|
|
for (var i = 0; i < state.entries.length; i++) {
|
|
state.entries[i].startSec = 0
|
|
state.entries[i].lengthSec = DEFAULT_LENGTH
|
|
}
|
|
bulkStart.value = ''
|
|
bulkLength.value = ''
|
|
render()
|
|
})
|
|
|
|
// ─── YouTube IFrame API 준비 ───────────────────────────────────────────
|
|
var ytReady = false
|
|
var ytReadyCbs = []
|
|
window.onYouTubeIframeAPIReady = function () {
|
|
ytReady = true
|
|
var cbs = ytReadyCbs; ytReadyCbs = []
|
|
cbs.forEach(function (cb) { cb() })
|
|
}
|
|
function whenYt(cb) {
|
|
if (ytReady && window.YT && window.YT.Player) cb()
|
|
else ytReadyCbs.push(cb)
|
|
}
|
|
function resetHost(wrap, id) {
|
|
if (!wrap) return
|
|
wrap.innerHTML = '<div id="' + id + '"></div>'
|
|
}
|
|
|
|
// ─── 미리보기 재생 모달 ────────────────────────────────────────────────
|
|
var previewOverlay = document.getElementById('previewOverlay')
|
|
var previewClose = document.getElementById('previewClose')
|
|
var previewTitle = document.getElementById('previewTitle')
|
|
var previewPlayer = null
|
|
|
|
function openPreview(idx) {
|
|
var e = state.entries[idx]
|
|
if (!e) return
|
|
if (!e.ytId) {
|
|
setRegisterStatus('이 항목은 YouTube 영상이 아니라 미리보기를 지원하지 않습니다.', 'idStatusBad')
|
|
return
|
|
}
|
|
previewTitle.textContent = e.title || ''
|
|
previewOverlay.hidden = false
|
|
whenYt(function () {
|
|
if (previewOverlay.hidden) return // API 준비 전에 닫혔으면 무시
|
|
destroyPreview()
|
|
resetHost(previewOverlay.querySelector('.ytEmbedWrap'), 'previewPlayer')
|
|
previewPlayer = new YT.Player('previewPlayer', {
|
|
videoId: e.ytId,
|
|
playerVars: { autoplay: 1, rel: 0, modestbranding: 1, start: Math.floor(e.startSec || 0) }
|
|
})
|
|
})
|
|
}
|
|
function destroyPreview() {
|
|
if (previewPlayer) { try { previewPlayer.destroy() } catch (_) {} previewPlayer = null }
|
|
}
|
|
function closePreview() {
|
|
previewOverlay.hidden = true
|
|
destroyPreview()
|
|
}
|
|
previewClose.addEventListener('click', closePreview)
|
|
previewOverlay.addEventListener('click', function (e) {
|
|
if (e.target === previewOverlay) closePreview()
|
|
})
|
|
|
|
// ─── 우클릭 컨텍스트 메뉴 (자르기) ─────────────────────────────────────
|
|
var entryCtxMenu = document.getElementById('entryCtxMenu')
|
|
var ctxIdx = -1
|
|
function openEntryCtxMenu(idx, x, y) {
|
|
ctxIdx = idx
|
|
entryCtxMenu.hidden = false
|
|
// 화면 밖으로 넘치지 않게 살짝 보정
|
|
var mw = 180, mh = 60
|
|
entryCtxMenu.style.left = Math.min(x, window.innerWidth - mw) + 'px'
|
|
entryCtxMenu.style.top = Math.min(y, window.innerHeight - mh) + 'px'
|
|
}
|
|
function closeCtxMenu() { entryCtxMenu.hidden = true }
|
|
document.addEventListener('click', closeCtxMenu)
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') { closeCtxMenu(); closePreview(); closeTrim() }
|
|
})
|
|
entryCtxMenu.querySelector('[data-action="trim"]').addEventListener('click', function () {
|
|
var idx = ctxIdx
|
|
closeCtxMenu()
|
|
if (idx >= 0) openTrim(idx)
|
|
})
|
|
|
|
// ─── 자르기(트림) 모달 — YouTube 임베드 + 타임라인 ─────────────────────
|
|
var trimOverlay = document.getElementById('trimOverlay')
|
|
var trimClose = document.getElementById('trimClose')
|
|
var trimCancel = document.getElementById('trimCancel')
|
|
var trimApply = document.getElementById('trimApply')
|
|
var trimTitle = document.getElementById('trimTitle')
|
|
var plTrimBar = document.getElementById('plTrimBar')
|
|
var plTrimRangeFill = document.getElementById('plTrimRangeFill')
|
|
var plTrimHandleStart = document.getElementById('plTrimHandleStart')
|
|
var plTrimHandleEnd = document.getElementById('plTrimHandleEnd')
|
|
var plTrimPlayhead = document.getElementById('plTrimPlayhead')
|
|
var plTimeReadout = document.getElementById('plTimeReadout')
|
|
var plTrimDuration = document.getElementById('plTrimDuration')
|
|
var plStartSec = document.getElementById('plStartSec')
|
|
var plLengthSec = document.getElementById('plLengthSec')
|
|
|
|
var MIN_SEL = 0.05
|
|
var trimPlayer = null
|
|
var trimPoll = null
|
|
var selStopAt = null // 선택 재생 정지 지점(초). null 이면 비활성.
|
|
// 현재 편집 중 컨텍스트: { idx, duration, start, end(null=끝까지) }
|
|
var tctx = null
|
|
|
|
function tEnd() { return tctx.end != null ? tctx.end : tctx.duration }
|
|
|
|
function formatTimeF(sec) {
|
|
if (!isFinite(sec) || sec < 0) sec = 0
|
|
var m = Math.floor(sec / 60)
|
|
var s = sec - m * 60
|
|
var sStr = s.toFixed(1)
|
|
if (s < 10) sStr = '0' + sStr
|
|
return (m < 10 ? '0' + m : '' + m) + ':' + sStr
|
|
}
|
|
|
|
function renderTrimBar() {
|
|
if (!tctx) return
|
|
var d = tctx.duration || 0
|
|
var end = tEnd()
|
|
var startPct = d ? (tctx.start / d) * 100 : 0
|
|
var endPct = d ? (end / d) * 100 : 0
|
|
plTrimRangeFill.style.left = startPct + '%'
|
|
plTrimRangeFill.style.width = Math.max(0, endPct - startPct) + '%'
|
|
plTrimHandleStart.style.left = startPct + '%'
|
|
plTrimHandleEnd.style.left = endPct + '%'
|
|
plTrimDuration.textContent = '선택: ' + (end - tctx.start).toFixed(1) + '초'
|
|
plStartSec.value = (tctx.start || 0).toFixed(2)
|
|
// 끝 대신 재생 길이(초)를 보여준다 (끝까지면 영상 끝 - 시작).
|
|
plLengthSec.value = Math.max(0, end - tctx.start).toFixed(2)
|
|
}
|
|
function renderPlayhead() {
|
|
if (!tctx) return
|
|
var d = tctx.duration || 0
|
|
var cur = 0
|
|
if (trimPlayer && trimPlayer.getCurrentTime) {
|
|
try { cur = trimPlayer.getCurrentTime() || 0 } catch (_) { cur = 0 }
|
|
}
|
|
plTrimPlayhead.style.left = (d ? clampNum((cur / d) * 100, 0, 100) : 0) + '%'
|
|
plTimeReadout.textContent = formatTimeF(cur) + ' / ' + formatTimeF(d)
|
|
if (selStopAt != null && cur >= selStopAt - 0.05) {
|
|
try { trimPlayer.pauseVideo() } catch (_) {}
|
|
selStopAt = null
|
|
}
|
|
}
|
|
|
|
function openTrim(idx) {
|
|
var e = state.entries[idx]
|
|
if (!e) return
|
|
if (!e.ytId) {
|
|
setRegisterStatus('이 항목은 YouTube 영상이 아니라 자르기를 지원하지 않습니다.', 'idStatusBad')
|
|
return
|
|
}
|
|
trimTitle.textContent = e.title || ''
|
|
trimOverlay.hidden = false
|
|
// 항목의 시작 + 길이를 타임라인의 시작/끝으로 변환. 영상 길이를 넘으면 끝까지로.
|
|
var startSec = e.startSec || 0
|
|
var lenSec = e.lengthSec != null && e.lengthSec > 0 ? e.lengthSec : DEFAULT_LENGTH
|
|
var dur = e.durationSec || 0
|
|
var endSec = startSec + lenSec
|
|
if (dur && endSec >= dur - 0.01) endSec = null
|
|
tctx = {
|
|
idx: idx,
|
|
duration: dur,
|
|
start: startSec,
|
|
end: endSec
|
|
}
|
|
selStopAt = null
|
|
renderTrimBar()
|
|
renderPlayhead()
|
|
whenYt(function () {
|
|
if (trimOverlay.hidden) return // API 준비 전에 닫혔으면 무시
|
|
destroyTrimPlayer()
|
|
resetHost(trimOverlay.querySelector('.ytEmbedWrap'), 'trimPlayer')
|
|
trimPlayer = new YT.Player('trimPlayer', {
|
|
videoId: e.ytId,
|
|
playerVars: { rel: 0, modestbranding: 1, start: Math.floor(tctx.start || 0) },
|
|
events: {
|
|
onReady: function () {
|
|
var d = 0
|
|
try { d = trimPlayer.getDuration() } catch (_) {}
|
|
if (d && isFinite(d) && d > 0) {
|
|
tctx.duration = d
|
|
tctx.start = clampNum(tctx.start, 0, Math.max(0, d - MIN_SEL))
|
|
if (tctx.end != null) tctx.end = clampNum(tctx.end, tctx.start + MIN_SEL, d)
|
|
renderTrimBar()
|
|
}
|
|
startTrimPoll()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
function startTrimPoll() {
|
|
if (trimPoll) clearInterval(trimPoll)
|
|
trimPoll = setInterval(renderPlayhead, 200)
|
|
}
|
|
function destroyTrimPlayer() {
|
|
if (trimPoll) { clearInterval(trimPoll); trimPoll = null }
|
|
if (trimPlayer) { try { trimPlayer.destroy() } catch (_) {} trimPlayer = null }
|
|
}
|
|
function closeTrim() {
|
|
trimOverlay.hidden = true
|
|
selStopAt = null
|
|
destroyTrimPlayer()
|
|
tctx = null
|
|
}
|
|
trimClose.addEventListener('click', closeTrim)
|
|
trimCancel.addEventListener('click', closeTrim)
|
|
trimOverlay.addEventListener('click', function (e) {
|
|
if (e.target === trimOverlay) closeTrim()
|
|
})
|
|
trimApply.addEventListener('click', function () {
|
|
if (!tctx) return
|
|
var e = state.entries[tctx.idx]
|
|
if (e) {
|
|
e.startSec = tctx.start > 0 ? tctx.start : 0
|
|
// 타임라인의 끝(없으면 영상 끝) - 시작 = 재생 길이.
|
|
var end = tctx.end != null ? tctx.end : tctx.duration
|
|
var len = end - e.startSec
|
|
e.lengthSec = len > 0 ? len : DEFAULT_LENGTH
|
|
if (tctx.duration && e.durationSec == null) e.durationSec = tctx.duration
|
|
paintTrimInputs(tctx.idx)
|
|
}
|
|
closeTrim()
|
|
})
|
|
|
|
// 타임라인 드래그/클릭/마크/숫자입력
|
|
function trimClientXtoTime(clientX) {
|
|
var rect = plTrimBar.getBoundingClientRect()
|
|
var ratio = clampNum((clientX - rect.left) / rect.width, 0, 1)
|
|
return ratio * (tctx ? tctx.duration : 0)
|
|
}
|
|
function attachTrimHandle(handle, which) {
|
|
handle.addEventListener('pointerdown', function (e) {
|
|
if (!tctx || !tctx.duration) return
|
|
e.preventDefault()
|
|
handle.setPointerCapture(e.pointerId)
|
|
handle.classList.add('dragging')
|
|
function onMove(ev) {
|
|
var t = trimClientXtoTime(ev.clientX)
|
|
if (which === 'start') tctx.start = clampNum(t, 0, tEnd() - MIN_SEL)
|
|
else tctx.end = clampNum(t, tctx.start + MIN_SEL, tctx.duration)
|
|
renderTrimBar()
|
|
}
|
|
function onUp() {
|
|
handle.classList.remove('dragging')
|
|
handle.removeEventListener('pointermove', onMove)
|
|
handle.removeEventListener('pointerup', onUp)
|
|
handle.removeEventListener('pointercancel', onUp)
|
|
}
|
|
handle.addEventListener('pointermove', onMove)
|
|
handle.addEventListener('pointerup', onUp)
|
|
handle.addEventListener('pointercancel', onUp)
|
|
})
|
|
}
|
|
attachTrimHandle(plTrimHandleStart, 'start')
|
|
attachTrimHandle(plTrimHandleEnd, 'end')
|
|
plTrimBar.addEventListener('pointerdown', function (e) {
|
|
if (!tctx || !tctx.duration) return
|
|
if (e.target === plTrimHandleStart || e.target === plTrimHandleEnd) return
|
|
var t = trimClientXtoTime(e.clientX)
|
|
if (trimPlayer && trimPlayer.seekTo) { try { trimPlayer.seekTo(t, true) } catch (_) {} }
|
|
renderPlayhead()
|
|
})
|
|
trimOverlay.querySelectorAll('[data-pmark]').forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
if (!tctx || !tctx.duration || !trimPlayer) return
|
|
var t = 0
|
|
try { t = trimPlayer.getCurrentTime() || 0 } catch (_) {}
|
|
if (btn.getAttribute('data-pmark') === 'start') tctx.start = clampNum(t, 0, tEnd() - MIN_SEL)
|
|
else tctx.end = clampNum(t, tctx.start + MIN_SEL, tctx.duration)
|
|
renderTrimBar()
|
|
})
|
|
})
|
|
trimOverlay.querySelectorAll('[data-paction]').forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
var action = btn.getAttribute('data-paction')
|
|
if (action === 'reset') {
|
|
if (!tctx) return
|
|
tctx.start = 0; tctx.end = null
|
|
renderTrimBar()
|
|
} else if (action === 'playSelection') {
|
|
if (!tctx || !trimPlayer) return
|
|
try {
|
|
trimPlayer.seekTo(tctx.start, true)
|
|
trimPlayer.playVideo()
|
|
} catch (_) {}
|
|
selStopAt = tEnd()
|
|
}
|
|
})
|
|
})
|
|
plStartSec.addEventListener('change', function () {
|
|
if (!tctx) return
|
|
var v = Number(plStartSec.value || 0)
|
|
if (!isFinite(v) || v < 0) v = 0
|
|
tctx.start = tctx.duration ? clampNum(v, 0, tEnd() - MIN_SEL) : v
|
|
renderTrimBar()
|
|
})
|
|
plLengthSec.addEventListener('change', function () {
|
|
if (!tctx) return
|
|
// 길이(초) 입력 → 끝 = 시작 + 길이.
|
|
var v = Number(plLengthSec.value)
|
|
if (!isFinite(v) || v <= 0) { renderTrimBar(); return }
|
|
var end = tctx.start + v
|
|
tctx.end = tctx.duration ? clampNum(end, tctx.start + MIN_SEL, tctx.duration) : end
|
|
renderTrimBar()
|
|
})
|
|
|
|
// 초기 상태
|
|
updateRegisterEnable()
|
|
})()
|