hehihoho3@gmail.com
921c24f143
폰에서 화면이 깨지던 문제 수정. - 전역 반응형 표 '카드뷰'가 모든 table에 적용돼, data-label 없는 목록 표 (수집함·발굴·발행 등)가 거대한 행으로 변해 페이지가 32만px로 늘어남. → 카드뷰를 .rcards opt-in 으로 스코프. 그 클래스 가진 레거시 표 (multi_channel_videos·videos)만 카드뷰, 나머지는 모바일에서 가로 스크롤. - 대시보드: 모바일(≤680px) 미디어쿼리 추가 — 마스트헤드 세로 정렬, 긴 브레드크럼 숨김, 떡상 리더보드 액션 버튼을 아랫줄 우측 정렬, 숫자 축소. - base.html: CSS/JS 링크에 v= 캐시버스팅 — 배포 후 브라우저가 옛 CSS를 캐시해 스타일이 깨지는 것 방지(CSS 변경 시 버전 올리기). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
452 lines
27 KiB
HTML
452 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{layout/base}">
|
|
|
|
<head>
|
|
<title>h-lab - Multi-Channel Videos</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div layout:fragment="content">
|
|
<header class="mb-6">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<a th:href="@{/channels}" class="text-muted hover:text-white transition-colors">
|
|
<i data-lucide="arrow-left" style="width: 20px;"></i>
|
|
</a>
|
|
<h1 class="text-2xl font-bold">Search within Selected Channels</h1>
|
|
</div>
|
|
|
|
<div class="card p-6 mb-6">
|
|
<div class="text-sm font-bold text-muted mb-4">Tracking <span th:text="${channels != null ? #lists.size(channels) : 0}">0</span> Channels</div>
|
|
<div class="flex flex-wrap gap-4" th:if="${channels != null}">
|
|
<div th:each="channel : ${channels}" class="flex items-center gap-2 p-2 rounded-lg bg-[var(--surface-2)] border border-[var(--glass-border)]">
|
|
<img th:src="${channel.thumbnailUrl}" alt="Thumbnail"
|
|
style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;" th:if="${channel.thumbnailUrl != null}">
|
|
<span class="text-sm font-medium" th:text="${channel.title}">Channel Name</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Search / Filter Area (Copied from videos.html) -->
|
|
<div class="card mb-6">
|
|
<form id="searchForm" onsubmit="event.preventDefault(); executeSearch();">
|
|
<div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;">
|
|
<!-- Period -->
|
|
<div style="display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px;">
|
|
<label class="text-sm font-bold text-muted">Period</label>
|
|
<select id="periodDays" class="w-full"
|
|
style="padding: 8px; height: 42px; background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--text); outline: none;">
|
|
<option value="1" style="background: var(--surface); color: var(--text);">Within 1 Day</option>
|
|
<option value="7" style="background: var(--surface); color: var(--text);" selected>Within 7 Days</option>
|
|
<option value="10" style="background: var(--surface); color: var(--text);">Within 10 Days</option>
|
|
<option value="15" style="background: var(--surface); color: var(--text);">Within 15 Days</option>
|
|
<option value="30" style="background: var(--surface); color: var(--text);">Within 30 Days</option>
|
|
<option value="0" style="background: var(--surface); color: var(--text);">전부 (All)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Format -->
|
|
<div style="display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 160px;">
|
|
<label class="text-sm font-bold text-muted">Format</label>
|
|
<div class="flex gap-4 w-full" style="padding: 8px; background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-md); justify-content: center; height: 42px; align-items: center;">
|
|
<label class="flex items-center gap-1 cursor-pointer hover:text-white">
|
|
<input type="radio" name="format" value="SHORTS" checked> Shorts
|
|
</label>
|
|
<label class="flex items-center gap-1 cursor-pointer hover:text-white">
|
|
<input type="radio" name="format" value="LONG_FORM"> Long
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page Size -->
|
|
<div style="display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 120px;">
|
|
<label class="text-sm font-bold text-muted">Load Size</label>
|
|
<select id="pageSize" class="w-full"
|
|
style="padding: 8px; height: 42px; background: var(--surface-2); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--text); outline: none;">
|
|
<option value="20" style="background: var(--surface); color: var(--text);">20 items</option>
|
|
<option value="50" style="background: var(--surface); color: var(--text);" selected>50 items</option>
|
|
<option value="100" style="background: var(--surface); color: var(--text);">100 items</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex justify-end">
|
|
<button type="submit" class="btn btn-primary px-8 py-2 flex items-center justify-center" id="searchBtn">
|
|
<i data-lucide="search" style="width: 18px; margin-right: 6px;"></i> <span class="font-bold">Search within Channels</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 수집 툴바 -->
|
|
<div class="flex items-center justify-between mb-3" style="gap:12px;">
|
|
<span id="selInfo" class="text-sm text-muted"></span>
|
|
<div class="flex gap-2">
|
|
<button class="btn btn-secondary px-4 py-2 flex items-center gap-1" onclick="collectSelected()" id="collectSelBtn">
|
|
<i data-lucide="check-square" style="width:16px;"></i> 선택 담기
|
|
</button>
|
|
<button class="btn btn-primary px-4 py-2 flex items-center gap-1" onclick="collectAll()" id="collectAllBtn">
|
|
<i data-lucide="download" style="width:16px;"></i> 전체 담기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video List Table -->
|
|
<div class="card p-0" style="overflow-x: auto;">
|
|
<table class="w-full rcards" style="border-collapse: collapse; text-align: left;">
|
|
<thead style="background: var(--surface-2); border-bottom: 1px solid var(--glass-border);">
|
|
<tr>
|
|
<th class="p-4 text-sm font-bold text-muted"><input type="checkbox" id="selectAll" onclick="toggleSelectAll(this.checked)" title="전체 선택"></th>
|
|
<th class="p-4 text-sm font-bold text-muted">Thumbnail</th>
|
|
<th class="p-4 text-sm font-bold text-muted">Title</th>
|
|
<th class="p-4 text-sm font-bold text-muted">Channel</th>
|
|
<th class="p-4 text-sm font-bold text-muted cursor-pointer hover:text-white" onclick="handleSort('date')" style="user-select: none;">
|
|
Publish Date <span id="sort-icon-date" style="display: inline-block; width: 14px;"></span>
|
|
</th>
|
|
<th class="p-4 text-sm font-bold text-muted cursor-pointer hover:text-white" onclick="handleSort('performance')" style="user-select: none;">
|
|
Performance <span id="sort-icon-performance" style="display: inline-block; width: 14px;">▼</span>
|
|
</th>
|
|
<th class="p-4 text-sm font-bold text-muted cursor-pointer hover:text-white" onclick="handleSort('views')" style="user-select: none;">
|
|
Views <span id="sort-icon-views" style="display: inline-block; width: 14px;"></span>
|
|
</th>
|
|
<th class="p-4 text-sm font-bold text-muted cursor-pointer hover:text-white" onclick="handleSort('subs')" style="user-select: none;">
|
|
Subscribers <span id="sort-icon-subs" style="display: inline-block; width: 14px;"></span>
|
|
</th>
|
|
<th class="p-4 text-sm font-bold text-muted">Download</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="resultBody">
|
|
<tr>
|
|
<td colspan="9" class="p-8 text-center text-muted">Select search conditions and click Search to find videos from these channels.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4 flex justify-center">
|
|
<button id="loadMoreBtn" class="btn btn-secondary w-full p-3" style="display: none;" onclick="handleLoadMore()">Load More</button>
|
|
</div>
|
|
|
|
<!-- Video Player Modal -->
|
|
<div id="videoModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center;" onclick="if(event.target === this) closeVideoModal()">
|
|
<div style="position: relative; width: 95%; max-width: 1200px; background-color: var(--glass-bg, var(--surface)); border-radius: 12px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid var(--glass-border);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
|
<h3 class="text-lg font-bold truncate pr-4" id="modalTitle">Video Player</h3>
|
|
<button onclick="closeVideoModal()" class="text-muted hover:text-white" style="font-size: 28px; line-height: 1; background: none; border: none; cursor: pointer;">×</button>
|
|
</div>
|
|
<div id="iframeContainer" style="width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script th:inline="javascript">
|
|
/*<![CDATA[*/
|
|
const selectedYoutubeChannelIds = /*[[${selectedYoutubeIds}]]*/ [];
|
|
/*]]>*/
|
|
|
|
let allLoadedVideos = [];
|
|
let currentTokens = {};
|
|
let displayedCount = 0;
|
|
let currentCondition = {};
|
|
|
|
let currentSortColumn = 'performance';
|
|
let currentSortOrder = 'desc';
|
|
|
|
function handleSort(column) {
|
|
if (currentSortColumn === column) {
|
|
currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
currentSortColumn = column;
|
|
currentSortOrder = 'desc';
|
|
}
|
|
updateSortIcons();
|
|
|
|
const size = parseInt(document.getElementById('pageSize').value) || 50;
|
|
const targetLimit = displayedCount > 0 ? displayedCount : size;
|
|
renderTable(targetLimit);
|
|
}
|
|
|
|
function updateSortIcons() {
|
|
['date', 'performance', 'views', 'subs'].forEach(col => {
|
|
const iconSpan = document.getElementById('sort-icon-' + col);
|
|
if (iconSpan) {
|
|
if (currentSortColumn === col) {
|
|
iconSpan.innerText = currentSortOrder === 'asc' ? '▲' : '▼';
|
|
} else {
|
|
iconSpan.innerText = '';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function executeSearch() {
|
|
const keyword = ''; // Removed input field, default to empty
|
|
const periodDays = parseInt(document.getElementById('periodDays').value);
|
|
const formatRadios = document.querySelectorAll('input[name="format"]:checked');
|
|
const format = formatRadios.length > 0 ? formatRadios[0].value : 'SHORTS';
|
|
|
|
currentCondition = {
|
|
keyword: keyword,
|
|
channelIds: selectedYoutubeChannelIds, // Use selected channels
|
|
periodDays: periodDays,
|
|
format: format,
|
|
pageTokens: {}
|
|
};
|
|
|
|
allLoadedVideos = [];
|
|
currentTokens = {};
|
|
displayedCount = 0;
|
|
|
|
document.getElementById('resultBody').innerHTML = '';
|
|
document.getElementById('loadMoreBtn').style.display = 'none';
|
|
|
|
fetchMore(true);
|
|
}
|
|
|
|
async function fetchMore(isFirst) {
|
|
const searchBtn = document.getElementById('searchBtn');
|
|
const loadMoreBtn = document.getElementById('loadMoreBtn');
|
|
const resultBody = document.getElementById('resultBody');
|
|
|
|
if (isFirst) {
|
|
searchBtn.disabled = true;
|
|
searchBtn.innerHTML = '<span class="text-sm">Searching...</span>';
|
|
resultBody.innerHTML = '<tr><td colspan="9" class="p-8 text-center text-muted">Loading results from ' + selectedYoutubeChannelIds.length + ' channels... This may take a moment.</td></tr>';
|
|
} else {
|
|
loadMoreBtn.disabled = true;
|
|
loadMoreBtn.innerHTML = 'Loading...';
|
|
}
|
|
|
|
currentCondition.pageTokens = currentTokens;
|
|
|
|
try {
|
|
const response = await fetch('/api/youtube/search', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(currentCondition)
|
|
});
|
|
|
|
if (!response.ok) throw new Error('API request failed');
|
|
|
|
const pageDto = await response.json();
|
|
|
|
if (isFirst) {
|
|
resultBody.innerHTML = '';
|
|
}
|
|
|
|
allLoadedVideos = allLoadedVideos.concat(pageDto.items || []);
|
|
currentTokens = pageDto.nextTokens || {};
|
|
|
|
const size = parseInt(document.getElementById('pageSize').value) || 50;
|
|
const targetLimit = isFirst ? size : displayedCount + size;
|
|
renderTable(targetLimit);
|
|
} catch (error) {
|
|
console.error('Search error:', error);
|
|
if (isFirst) {
|
|
resultBody.innerHTML = '<tr><td colspan="9" class="p-8 text-center text-danger">Error occurred during search.</td></tr>';
|
|
}
|
|
} finally {
|
|
if (isFirst) {
|
|
searchBtn.disabled = false;
|
|
searchBtn.innerHTML = '<i data-lucide="search" style="width: 18px; margin-right: 6px;"></i> Search within Channels';
|
|
if (window.lucide) window.lucide.createIcons();
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleLoadMore() {
|
|
const size = parseInt(document.getElementById('pageSize').value) || 50;
|
|
if (displayedCount < allLoadedVideos.length) {
|
|
renderTable(displayedCount + size);
|
|
} else {
|
|
fetchMore(false);
|
|
}
|
|
}
|
|
|
|
function renderTable(limit) {
|
|
const resultBody = document.getElementById('resultBody');
|
|
|
|
if (allLoadedVideos.length === 0) {
|
|
resultBody.innerHTML = '<tr><td colspan="9" class="p-8 text-center text-muted">No results found within selected channels.</td></tr>';
|
|
document.getElementById('loadMoreBtn').style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
allLoadedVideos.sort((a, b) => {
|
|
let valA = 0, valB = 0;
|
|
if (currentSortColumn === 'views') {
|
|
valA = a.viewCount || 0;
|
|
valB = b.viewCount || 0;
|
|
} else if (currentSortColumn === 'subs') {
|
|
valA = a.subscriberCount || 0;
|
|
valB = b.subscriberCount || 0;
|
|
} else if (currentSortColumn === 'date') {
|
|
valA = new Date(a.publishedAt).getTime();
|
|
valB = new Date(b.publishedAt).getTime();
|
|
} else if (currentSortColumn === 'performance') {
|
|
valA = (a.subscriberCount > 0) ? (a.viewCount / a.subscriberCount) : ((a.viewCount > 0) ? Infinity : -1);
|
|
valB = (b.subscriberCount > 0) ? (b.viewCount / b.subscriberCount) : ((b.viewCount > 0) ? Infinity : -1);
|
|
}
|
|
|
|
if (valA < valB) return currentSortOrder === 'asc' ? -1 : 1;
|
|
if (valA > valB) return currentSortOrder === 'asc' ? 1 : -1;
|
|
return 0;
|
|
});
|
|
|
|
resultBody.innerHTML = '';
|
|
const actualLimit = Math.min(limit, allLoadedVideos.length);
|
|
const videosToRender = allLoadedVideos.slice(0, actualLimit);
|
|
|
|
videosToRender.forEach(video => {
|
|
const tr = document.createElement('tr');
|
|
tr.style.borderBottom = '1px solid var(--glass-border)';
|
|
|
|
const pubDate = new Date(video.publishedAt);
|
|
let formattedDate = pubDate.getFullYear() + '-' + String(pubDate.getMonth() + 1).padStart(2, '0') + '-' + String(pubDate.getDate()).padStart(2, '0') + ' ' + String(pubDate.getHours()).padStart(2, '0') + ':' + String(pubDate.getMinutes()).padStart(2, '0');
|
|
|
|
const viewStr = video.viewCount != null ? video.viewCount.toLocaleString() : '0';
|
|
const subStr = video.subscriberCount != null ? video.subscriberCount.toLocaleString() : '0';
|
|
|
|
let perfStr = '-';
|
|
let perfStyle = 'color: var(--text-muted);';
|
|
if (video.viewCount != null && video.subscriberCount != null && video.subscriberCount > 0) {
|
|
const ratio = (video.viewCount / video.subscriberCount) * 100;
|
|
perfStr = ratio.toFixed(1) + '%';
|
|
if (ratio >= 100) perfStyle = 'color: #ef4444; font-weight: bold;';
|
|
else if (ratio >= 30) perfStyle = 'color: #f59e0b; font-weight: bold;';
|
|
else perfStyle = 'color: #10b981; font-weight: bold;';
|
|
}
|
|
|
|
const safeTitle = video.title.replace(/"/g, """);
|
|
|
|
tr.innerHTML =
|
|
'<td class="p-4">' +
|
|
'<input type="checkbox" class="rowChk" value="' + video.videoId + '" onchange="updateSelInfo()">' +
|
|
'</td>' +
|
|
'<td class="p-4">' +
|
|
'<div style="position: relative; display: inline-block; cursor: pointer;" data-videoid="' + video.videoId + '" data-videotitle="' + safeTitle + '" onclick="openVideoModal(this.dataset.videoid, this.dataset.videotitle)">' +
|
|
'<img src="' + video.thumbnailUrl + '" alt="Thumb" style="width: 120px; height: 68px; object-fit: cover; border-radius: 6px; transition: transform 0.2s;" onmouseover="this.style.transform=\'scale(1.05)\'" onmouseout="this.style.transform=\'scale(1)\'">' +
|
|
'<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.6); border-radius: 50%; padding: 8px; display: flex; align-items: center; justify-content: center;">' +
|
|
'<i data-lucide="play" style="color: var(--text); width: 16px; height: 16px; fill: white;"></i>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</td>' +
|
|
'<td class="p-4">' +
|
|
'<div class="flex items-start justify-between gap-2" style="max-width: 300px;">' +
|
|
'<div class="font-bold text-sm" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1;">' +
|
|
'<a href="https://www.youtube.com/watch?v=' + video.videoId + '" target="_blank" class="hover:underline">' + video.title + '</a>' +
|
|
'</div>' +
|
|
'<button onclick="copyToClipboard(\'https://www.youtube.com/watch?v=' + video.videoId + '\')" class="text-muted hover:text-white flex-shrink-0" title="URL 복사" style="background: none; border: none; cursor: pointer; padding: 2px;">' +
|
|
'<i data-lucide="copy" style="width: 14px; height: 14px;"></i>' +
|
|
'</button>' +
|
|
'</div>' +
|
|
'</td>' +
|
|
'<td class="p-4 text-sm text-muted">' +
|
|
'<div class="flex items-center gap-2">' +
|
|
'<a href="https://www.youtube.com/channel/' + video.channelId + '" target="_blank" class="hover:underline font-semibold" style="color: #e2e8f0;">' + video.channelTitle + '</a>' +
|
|
'</div>' +
|
|
'</td>' +
|
|
'<td class="p-4 text-sm text-muted">' + formattedDate + '</td>' +
|
|
'<td class="p-4 text-sm" style="' + perfStyle + '">' + perfStr + '</td>' +
|
|
'<td class="p-4 text-sm">' + viewStr + '</td>' +
|
|
'<td class="p-4 text-sm">' + subStr + '</td>' +
|
|
'<td class="p-4 text-sm">' +
|
|
'<button onclick="downloadVideo(\'https://www.youtube.com/watch?v=' + video.videoId + '\')" class="btn btn-secondary p-2 flex items-center justify-center" title="고화질 다운로드">' +
|
|
'<i data-lucide="download" style="width: 16px; height: 16px;"></i>' +
|
|
'</button>' +
|
|
'</td>';
|
|
resultBody.appendChild(tr);
|
|
});
|
|
|
|
displayedCount = actualLimit;
|
|
updateLoadMoreButton();
|
|
const selectAll = document.getElementById('selectAll');
|
|
if (selectAll) selectAll.checked = false;
|
|
updateSelInfo();
|
|
if (window.lucide) window.lucide.createIcons();
|
|
}
|
|
|
|
function downloadVideo(videoUrl) {
|
|
// cobalt.tools is a clean, ad-free high-quality downloader
|
|
// Since it doesn't support direct URL params for downloading in the same way,
|
|
// we'll open a popular service like 'ssyoutube' or similar which is easier for direct linking.
|
|
const downloadUrl = videoUrl.replace('youtube.com', 'ssyoutube.com');
|
|
window.open(downloadUrl, '_blank');
|
|
}
|
|
|
|
function updateLoadMoreButton() {
|
|
const loadMoreBtn = document.getElementById('loadMoreBtn');
|
|
if (displayedCount < allLoadedVideos.length || Object.keys(currentTokens).length > 0) {
|
|
loadMoreBtn.style.display = 'block';
|
|
loadMoreBtn.disabled = false;
|
|
loadMoreBtn.innerHTML = 'Load More (Next 50)';
|
|
} else {
|
|
loadMoreBtn.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function openVideoModal(videoId, title) {
|
|
const modal = document.getElementById('videoModal');
|
|
const container = document.getElementById('iframeContainer');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
modalTitle.textContent = title;
|
|
container.innerHTML = '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
|
modal.style.display = 'flex';
|
|
}
|
|
|
|
function closeVideoModal() {
|
|
document.getElementById('iframeContainer').innerHTML = '';
|
|
document.getElementById('videoModal').style.display = 'none';
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert('URL이 클립보드에 복사되었습니다.');
|
|
});
|
|
}
|
|
|
|
// ---- 수집함에 담기 ----
|
|
function toggleSelectAll(checked) {
|
|
document.querySelectorAll('.rowChk').forEach(cb => cb.checked = checked);
|
|
updateSelInfo();
|
|
}
|
|
function updateSelInfo() {
|
|
const checked = document.querySelectorAll('.rowChk:checked').length;
|
|
const info = document.getElementById('selInfo');
|
|
if (info) info.textContent = checked > 0 ? (checked + '개 선택됨') : '';
|
|
}
|
|
async function postCollect(items, btn) {
|
|
if (!items || items.length === 0) { alert('담을 영상이 없습니다.'); return; }
|
|
const original = btn ? btn.innerHTML : null;
|
|
if (btn) { btn.disabled = true; btn.innerHTML = '담는 중...'; }
|
|
try {
|
|
const res = await fetch('/api/youtube/collect', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(items)
|
|
});
|
|
const json = await res.json().catch(() => ({}));
|
|
if (!res.ok || (json && json.success === false)) throw new Error((json && json.message) || ('HTTP ' + res.status));
|
|
const d = json.data || {};
|
|
alert('수집함에 담기 완료\\n저장 ' + (d.saved || 0) + '건, 중복/스킵 ' + (d.skipped || 0) + '건');
|
|
} catch (e) {
|
|
alert('담기 실패: ' + e.message);
|
|
} finally {
|
|
if (btn) { btn.disabled = false; btn.innerHTML = original; if (window.lucide) window.lucide.createIcons(); }
|
|
}
|
|
}
|
|
function collectSelected() {
|
|
const ids = Array.from(document.querySelectorAll('.rowChk:checked')).map(cb => cb.value);
|
|
if (ids.length === 0) { alert('선택된 영상이 없습니다. 체크박스로 선택하세요.'); return; }
|
|
const set = new Set(ids);
|
|
postCollect(allLoadedVideos.filter(v => set.has(v.videoId)), document.getElementById('collectSelBtn'));
|
|
}
|
|
function collectAll() {
|
|
if (allLoadedVideos.length === 0) { alert('먼저 검색하세요.'); return; }
|
|
if (!confirm('현재 로드된 ' + allLoadedVideos.length + '개 영상을 모두 수집함에 담을까요? (이미 담긴 것은 자동 제외)')) return;
|
|
postCollect(allLoadedVideos, document.getElementById('collectAllBtn'));
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|