feat(folder): right-click "영상 주소 복사" on public and admin
- 공개 폴더(/folder/:name): 새 ctxMenu + public-folder.js 로 우클릭 메뉴 신설
("영상 주소 복사" 만 포함). 좌클릭 재생 기능은 그대로 유지.
- 관리자 폴더(/op/folder/:name): 기존 ctxMenu 에 "영상 주소 복사" 항목과
folder.js 에 copyUrl 핸들러 추가.
- 양쪽 모두 navigator.clipboard.writeText(origin + "/player/" + id) 사용,
실패하면 hidden textarea + execCommand("copy") fallback, 그것도 실패하면
window.prompt 으로 직접 복사 안내. 성공 시 flashToast 로 피드백.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -30,6 +30,8 @@
|
|||||||
var action = btn.getAttribute('data-action')
|
var action = btn.getAttribute('data-action')
|
||||||
if (action === 'edit') {
|
if (action === 'edit') {
|
||||||
location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(targetId)
|
location.href = '/op/folder/' + encodeURIComponent(folder) + '/video/editor?id=' + encodeURIComponent(targetId)
|
||||||
|
} else if (action === 'copyUrl') {
|
||||||
|
copyVideoUrl(targetId)
|
||||||
} else if (action === 'rename') {
|
} else if (action === 'rename') {
|
||||||
var t = window.prompt('새 영상 제목', targetTitle)
|
var t = window.prompt('새 영상 제목', targetTitle)
|
||||||
if (t && t !== targetTitle) {
|
if (t && t !== targetTitle) {
|
||||||
@@ -56,4 +58,44 @@
|
|||||||
}
|
}
|
||||||
hideCtx()
|
hideCtx()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function copyVideoUrl(id) {
|
||||||
|
var url = location.origin + '/player/' + encodeURIComponent(id)
|
||||||
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||||
|
navigator.clipboard.writeText(url).then(function () {
|
||||||
|
flashToast('주소가 복사되었습니다.')
|
||||||
|
}, function () {
|
||||||
|
fallbackCopy(url)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
fallbackCopy(url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function fallbackCopy(text) {
|
||||||
|
try {
|
||||||
|
var ta = document.createElement('textarea')
|
||||||
|
ta.value = text
|
||||||
|
ta.style.position = 'fixed'
|
||||||
|
ta.style.left = '-9999px'
|
||||||
|
document.body.appendChild(ta)
|
||||||
|
ta.focus(); ta.select()
|
||||||
|
var ok = document.execCommand && document.execCommand('copy')
|
||||||
|
document.body.removeChild(ta)
|
||||||
|
if (ok) flashToast('주소가 복사되었습니다.')
|
||||||
|
else window.prompt('주소를 복사하세요:', text)
|
||||||
|
} catch (e) {
|
||||||
|
window.prompt('주소를 복사하세요:', text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function flashToast(msg) {
|
||||||
|
var el = document.createElement('div')
|
||||||
|
el.className = 'flashToast'
|
||||||
|
el.textContent = msg
|
||||||
|
document.body.appendChild(el)
|
||||||
|
requestAnimationFrame(function () { el.classList.add('show') })
|
||||||
|
setTimeout(function () {
|
||||||
|
el.classList.remove('show')
|
||||||
|
setTimeout(function () { el.parentNode && el.parentNode.removeChild(el) }, 200)
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
})()
|
})()
|
||||||
|
|||||||
75
public/public-folder.js
Normal file
75
public/public-folder.js
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
(function () {
|
||||||
|
var ctxMenu = document.getElementById('ctxMenu')
|
||||||
|
if (!ctxMenu) return
|
||||||
|
var targetId = null
|
||||||
|
|
||||||
|
function showCtx(x, y) {
|
||||||
|
ctxMenu.style.left = x + 'px'
|
||||||
|
ctxMenu.style.top = y + 'px'
|
||||||
|
ctxMenu.hidden = false
|
||||||
|
}
|
||||||
|
function hideCtx() { ctxMenu.hidden = true }
|
||||||
|
|
||||||
|
document.querySelectorAll('.videoCard').forEach(function (card) {
|
||||||
|
card.addEventListener('contextmenu', function (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
targetId = card.getAttribute('data-video-id') || card.getAttribute('data-id')
|
||||||
|
showCtx(e.clientX, e.clientY)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
document.addEventListener('click', function (e) {
|
||||||
|
if (!ctxMenu.contains(e.target)) hideCtx()
|
||||||
|
})
|
||||||
|
document.addEventListener('scroll', hideCtx, true)
|
||||||
|
|
||||||
|
ctxMenu.addEventListener('click', function (e) {
|
||||||
|
var btn = e.target.closest('button')
|
||||||
|
if (!btn) return
|
||||||
|
var action = btn.getAttribute('data-action')
|
||||||
|
if (action === 'copyUrl' && targetId) {
|
||||||
|
copyVideoUrl(targetId)
|
||||||
|
}
|
||||||
|
hideCtx()
|
||||||
|
})
|
||||||
|
|
||||||
|
function copyVideoUrl(id) {
|
||||||
|
var url = location.origin + '/player/' + encodeURIComponent(id)
|
||||||
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||||
|
navigator.clipboard.writeText(url).then(function () {
|
||||||
|
flashToast('주소가 복사되었습니다.')
|
||||||
|
}, function () {
|
||||||
|
fallbackCopy(url)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
fallbackCopy(url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function fallbackCopy(text) {
|
||||||
|
try {
|
||||||
|
var ta = document.createElement('textarea')
|
||||||
|
ta.value = text
|
||||||
|
ta.style.position = 'fixed'
|
||||||
|
ta.style.left = '-9999px'
|
||||||
|
document.body.appendChild(ta)
|
||||||
|
ta.focus(); ta.select()
|
||||||
|
var ok = document.execCommand && document.execCommand('copy')
|
||||||
|
document.body.removeChild(ta)
|
||||||
|
if (ok) flashToast('주소가 복사되었습니다.')
|
||||||
|
else window.prompt('주소를 복사하세요:', text)
|
||||||
|
} catch (e) {
|
||||||
|
window.prompt('주소를 복사하세요:', text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function flashToast(msg) {
|
||||||
|
var el = document.createElement('div')
|
||||||
|
el.className = 'flashToast'
|
||||||
|
el.textContent = msg
|
||||||
|
document.body.appendChild(el)
|
||||||
|
requestAnimationFrame(function () { el.classList.add('show') })
|
||||||
|
setTimeout(function () {
|
||||||
|
el.classList.remove('show')
|
||||||
|
setTimeout(function () { el.parentNode && el.parentNode.removeChild(el) }, 200)
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
})()
|
||||||
@@ -146,6 +146,17 @@ body.siteBody.centerLayout { display: flex; align-items: center; justify-content
|
|||||||
}
|
}
|
||||||
.ctxMenu button:hover { background: var(--bg-alt); }
|
.ctxMenu button:hover { background: var(--bg-alt); }
|
||||||
|
|
||||||
|
.flashToast {
|
||||||
|
position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 12px);
|
||||||
|
background: var(--bg-card); color: var(--text);
|
||||||
|
border: 1px solid var(--border); border-radius: 8px;
|
||||||
|
padding: 10px 18px; font-size: 14px;
|
||||||
|
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
|
||||||
|
opacity: 0; transition: opacity 180ms ease, transform 180ms ease;
|
||||||
|
z-index: 300; pointer-events: none;
|
||||||
|
}
|
||||||
|
.flashToast.show { opacity: 1; transform: translate(-50%, 0); }
|
||||||
|
|
||||||
/* modal */
|
/* modal */
|
||||||
.modalOverlay {
|
.modalOverlay {
|
||||||
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
|
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
|
||||||
|
|||||||
@@ -42,9 +42,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="ctxMenu" id="ctxMenu" hidden>
|
||||||
|
<button type="button" data-action="copyUrl">영상 주소 복사</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.__SITE__ = { folder: <%- jsonForScript(folder) %> }
|
window.__SITE__ = { folder: <%- jsonForScript(folder) %> }
|
||||||
</script>
|
</script>
|
||||||
<script src="/static/player.js"></script>
|
<script src="/static/player.js"></script>
|
||||||
|
<script src="/static/public-folder.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -39,6 +39,7 @@
|
|||||||
<div class="ctxMenu" id="ctxMenu" hidden>
|
<div class="ctxMenu" id="ctxMenu" hidden>
|
||||||
<button type="button" data-action="edit">수정</button>
|
<button type="button" data-action="edit">수정</button>
|
||||||
<button type="button" data-action="rename">이름 변경</button>
|
<button type="button" data-action="rename">이름 변경</button>
|
||||||
|
<button type="button" data-action="copyUrl">영상 주소 복사</button>
|
||||||
<button type="button" data-action="delete" class="dangerLink">삭제</button>
|
<button type="button" data-action="delete" class="dangerLink">삭제</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user