ff_plugins/youtube-dl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.2: 검색 속도 개선, 인피니티 스크롤 최적화, 미니 플레이어 추가

Browse Source
This commit is contained in:
projectdx
2026-01-24 22:22:02 +09:00
parent b27bf655f2
commit 901fcd0541
15 changed files with 893 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
static/youtube-dl_list.css
View File

@@ -24,3 +24,34 @@
padding-left: 10px;
padding-top: 3px;
}
/* Mobile Responsive - 5px padding for maximum screen usage */
@media (max-width: 768px) {
.container, .container-fluid, #main_container {
padding-left: 5px !important;
padding-right: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
[class*="col-"] {
padding-left: 4px !important;
padding-right: 4px !important;
}
.card {
border-radius: 8px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.table-responsive {
margin: 0 !important;
}
}

74
static/youtube-dl_list.js
View File

@@ -35,66 +35,86 @@
const list_tbody = document.getElementById('list_tbody');
const get_item = (data) => {
let str = `<td>${data.index + 1}</td>`;
str += `<td>${data.plugin}</td>`;
str += `<td>${data.start_time}</td>`;
str += `<td>${data.extractor}</td>`;
str += `<td>${data.title}</td>`;
str += `<td>${data.status_ko}</td>`;
let str = `<td class="text-center font-weight-bold text-muted">${data.index + 1}</td>`;
str += `<td class="text-center"><span class="badge badge-light border" style="font-size:11px;">${data.plugin}</span></td>`;
str += `<td class="text-muted" style="font-size:12px;">${data.start_time}</td>`;
str += `<td class="text-center"><span class="badge badge-info" style="font-size:11px; opacity:0.8;">${data.extractor}</span></td>`;
str += `<td class="font-weight-bold">${data.title}</td>`;
// Status color mapping
let status_class = 'badge-secondary';
if (data.status_str === 'COMPLETED') status_class = 'badge-success';
else if (data.status_str === 'DOWNLOADING') status_class = 'badge-primary';
else if (data.status_str === 'ERROR') status_class = 'badge-danger';
str += `<td class="text-center"><span class="badge ${status_class}" style="padding: 5px 10px;">${data.status_ko}</span></td>`;
let visi = 'hidden';
if (parseInt(data.percent) > 0 && data.status_str !== 'STOP') {
visi = 'visible';
}
str += `<td><div class="progress"><div class="progress-bar" style="visibility: ${visi}; width: ${data.percent}%">${data.percent}%</div></div></td>`;
str += `<td>${data.download_time}</td>`;
str += '<td class="tableRowHoverOff">';
str += `<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
style="visibility: ${visi}; width: ${data.percent}%"
aria-valuenow="${data.percent}" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="text-right text-muted" style="font-size: 10px; margin-top: 2px; visibility: ${visi}; font-weight: 600;">${data.percent}%</div>
</td>`;
str += `<td class="text-center text-muted">${data.download_time}</td>`;
str += '<td class="tableRowHoverOff text-center">';
if (
data.status_str === 'START' ||
data.status_str === 'DOWNLOADING' ||
data.status_str === 'FINISHED'
) {
str += `<button class="align-middle btn btn-outline-danger btn-sm youtubeDl-stop" data-index="${data.index}">중지</button>`;
str += `<button class="btn btn-outline-danger btn-sm youtubeDl-stop" data-index="${data.index}"><i class="fa fa-stop-circle mr-1"></i>중지</button>`;
}
str += '</td>';
return str;
};
const info_html = (left, right, option) => {
let str = '<div class="row">';
if (!right) return '';
let str = '<div class="row align-items-center py-2 border-bottom mx-0">';
const link = left === 'URL' || left === '업로더';
str += '<div class="col-sm-2">';
str += `<b>${left}</b>`;
str += '<div class="col-sm-3 text-muted font-weight-bold" style="font-size: 13px;">';
str += `${left}`;
str += '</div>';
str += '<div class="col-sm-10">';
str += '<div class="input-group col-sm-9">';
str += '<span class="text-left info-padding">';
str += '<div class="col-sm-9">';
str += '<div class="info-value">';
if (link) {
str += `<a href="${option}" target="_blank">`;
str += `<a href="${option}" target="_blank" class="text-primary font-weight-bold">`;
}
str += right;
if (link) {
str += '</a>';
}
str += '</span></div></div></div>';
str += '</div></div></div>';
return str;
};
const get_detail = (data) => {
let str = info_html('URL', data.url, data.url);
let str = '<div class="details-container p-3 rounded shadow-inner" style="background: #1e293b; border: 1px solid #334155;">';
str += info_html('URL', data.url, data.url);
str += info_html('업로더', data.uploader, data.uploader_url);
str += info_html('임시폴더', data.temp_path);
str += info_html('저장폴더', data.save_path);
str += info_html('종료시간', data.end_time);
if (data.status_str === 'DOWNLOADING') {
str += info_html('', '<b>현재 다운로드 중인 파일에 대한 정보</b>');
str += '<div class="mt-3 p-2 rounded border" style="background: #0f172a; border-color: #334155 !important;">';
str += '<div class="font-weight-bold text-info mb-2" style="font-size: 12px;"><i class="fa fa-info-circle mr-1"></i>실시간 다운로드 정보</div>';
str += info_html('파일명', data.filename);
str += info_html(
'진행률(current/total)',
`${data.percent}% (${data.downloaded_bytes_str} / ${data.total_bytes_str})`
'현재 진행량',
`<span class="text-light font-weight-bold">${data.percent}%</span> <small class="text-muted">(${data.downloaded_bytes_str} / ${data.total_bytes_str})</small>`
);
str += info_html('남은 시간', `${data.eta}초`);
str += info_html('다운 속도', data.speed_str);
str += info_html('남은 시간', `<span class="text-info">${data.eta}초</span>`);
str += info_html('다운 속도', `<span class="text-success font-weight-bold">${data.speed_str}</span>`);
str += '</div>';
}
str += '</div>';
return str;
};
@@ -102,9 +122,9 @@
let str = `<tr id="item_${data.index}" class="cursor-pointer" aria-expanded="true" data-toggle="collapse" data-target="#collapse_${data.index}">`;
str += get_item(data);
str += '</tr>';
str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff">`;
str += '<td colspan="9">';
str += `<div id="detail_${data.index}">`;
str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff" style="background-color: #0f172a;">`;
str += '<td colspan="9" class="p-0 border-0">';
str += `<div id="detail_${data.index}" class="p-4" style="background: #111827;">`;
str += get_detail(data);
str += '</div>';
str += '</td>';

191
static/youtube-dl_modern.css Normal file
View File

@@ -0,0 +1,191 @@
/* Modern & Professional Design for youtube-dl */
:root {
--primary-color: #38bdf8; /* Softer Light Blue */
--primary-hover: #7dd3fc;
--bg-body: #0f172a; /* Deep Soothing Navy */
--bg-surface: #1e293b; /* Surface color */
--text-main: #e2e8f0; /* Soft Off-White */
--text-muted: #94a3b8; /* Muted Blue-Gray */
--border-color: #334155; /* Subtle Border */
--radius-md: 8px;
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
}
/* Base adjustment for global layout */
body {
background-color: var(--bg-body) !important;
font-size: 14px;
color: var(--text-main);
}
#main_container {
padding-top: 20px;
padding-bottom: 40px;
}
/* Compact Margins - Desktop */
.row {
margin-right: -10px !important;
margin-left: -10px !important;
}
.col, [class*="col-"] {
padding-right: 10px !important;
padding-left: 10px !important;
}
/* Professional Card Style */
.card, .form-container {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
margin-bottom: 1.5rem;
overflow: hidden;
}
/* Modern Inputs & Macros adjustment */
.form-control-sm {
height: 34px !important;
background-color: #0f172a !important;
color: #f1f5f9 !important;
border-radius: 6px !important;
border: 1px solid var(--border-color) !important;
padding: 0.5rem 0.75rem !important;
transition: all 0.2s;
}
.form-control-sm:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}
.col-sm-3.col-form-label {
font-weight: 600;
color: var(--text-main);
font-size: 0.875rem;
padding-top: 8px !important;
}
.small.text-muted {
font-size: 0.75rem !important;
margin-top: 4px;
}
/* Professional Buttons */
.btn-sm {
border-radius: 6px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
transition: all 0.2s !important;
}
.btn-primary {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #0f172a !important; /* Dark text on light button */
}
.btn-primary:hover {
background-color: var(--primary-hover) !important;
border-color: var(--primary-hover) !important;
color: #000000 !important;
}
/* Modern Progress Bar */
.progress {
height: 10px !important;
background-color: #e2e8f0 !important;
border-radius: 9999px !important;
overflow: hidden;
margin-top: 4px;
}
.progress-bar {
background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
border-radius: 9999px !important;
font-size: 0 !important; /* Hide text inside thin bar */
transition: width 0.4s ease-in-out !important;
}
/* Table Enhancements */
.table {
color: var(--text-main) !important;
}
.table-sm td, .table-sm th {
padding: 0.75rem 0.5rem !important;
vertical-align: middle !important;
border-top: 1px solid #334155 !important;
}
.table thead th {
background: #1e293b;
border-bottom: 2px solid var(--border-color);
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.025em;
}
.tableRowHover tr:hover {
background-color: rgba(56, 189, 248, 0.05) !important;
}
/* Detail Info row in list */
.info-padding {
padding: 8px 12px !important;
background: #0f172a;
border-radius: 6px;
display: inline-block;
color: #38bdf8;
}
.info-value {
color: #cbd5e1;
}
.details-container {
background: #1e293b !important;
border: 1px solid #334155 !important;
}
/* Mobile Responsive - 5px padding */
@media (max-width: 768px) {
.container, .container-fluid, #main_container {
padding-left: 5px !important;
padding-right: 5px !important;
}
.row {
margin-left: -5px !important;
margin-right: -5px !important;
}
[class*="col-"] {
padding-left: 5px !important;
padding-right: 5px !important;
}
/* Stack labels and inputs on mobile */
.col-sm-3.col-form-label {
text-align: left !important;
width: 100%;
max-width: 100%;
flex: 0 0 100%;
padding-bottom: 4px !important;
}
.col-sm-9 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
form > .row {
margin-bottom: 12px !important;
}
}

297
static/youtube-dl_search.js Normal file
View File

@@ -0,0 +1,297 @@
'use strict';
(() => {
// ====================
// DOM 요소 참조
// ====================
const searchKeyword = document.getElementById('search_keyword');
const searchBtn = document.getElementById('search_btn');
const searchResults = document.getElementById('search_results');
const sentinel = document.getElementById('sentinel');
const sentinelLoading = document.getElementById('sentinel_loading');
const playerWrapper = document.getElementById('player-wrapper');
const initialMessage = document.getElementById('initial_message');
// ====================
// 상태 변수
// ====================
let currentPage = 1;
let isLoading = false;
let hasMore = true;
let art = null;
let lastPreviewUrl = '';
// ====================
// AJAX 헬퍼
// ====================
const postAjax = (url, data) => {
return fetch(`/${package_name}/ajax${url}`, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
body: new URLSearchParams(data),
})
.then(res => res.json())
.then(ret => {
if (ret.msg) notify(ret.msg, ret.ret);
return ret;
})
.catch(err => {
console.error('[YouTube-DL] AJAX Error:', err);
notify('요청 실패', 'danger');
return { ret: 'error' };
});
};
// ====================
// 유틸리티 함수
// ====================
const formatDuration = (seconds) => {
if (!seconds) return '--:--';
const hrs = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const secs = Math.floor(seconds % 60);
if (hrs > 0) return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
return `${mins}:${secs.toString().padStart(2, '0')}`;
};
const formatUploadDate = (item) => {
const dateVal = item.upload_date || item.publication_date || item.date;
if (!dateVal) return '';
const dateStr = String(dateVal);
if (dateStr.length === 8 && /^\d+$/.test(dateStr)) {
return `${dateStr.slice(0, 4)}.${dateStr.slice(4, 6)}.${dateStr.slice(6, 8)}`;
}
return dateStr;
};
const getBestThumbnail = (item) => {
if (item.thumbnail && typeof item.thumbnail === 'string') return item.thumbnail;
if (item.thumbnails && item.thumbnails.length > 0) {
const sorted = [...item.thumbnails].sort((a, b) => (b.width || 0) - (a.width || 0));
return sorted[0].url;
}
return '/static/img/no_image.png';
};
// ====================
// 플레이어 초기화
// ====================
const initArtplayer = (videoUrl) => {
playerWrapper.style.display = 'block';
if (art) { art.switchUrl(videoUrl); return; }
art = new Artplayer({
container: '#player-wrapper',
url: videoUrl,
autoplay: true, muted: false, volume: 1.0,
autoSize: false, // 컨테이너 크기에 맞춤
aspectRatio: true, // 16:9 비율 유지
pip: true, setting: true,
playbackRate: true, fullscreen: true, fullscreenWeb: true,
theme: '#38bdf8',
autoMini: true, // 스크롤 시 미니 플레이어로 자동 전환
customType: {
m3u8: (video, url) => {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
}
}
}
});
};
// ====================
// 결과 카드 생성
// ====================
const makeResultCard = (item) => {
const videoId = item.id || item.url;
const url = (item.url && item.url.startsWith('http'))
? item.url
: `https://www.youtube.com/watch?v=${videoId}`;
const thumbnail = getBestThumbnail(item);
const duration = formatDuration(item.duration);
const uploader = item.uploader || item.channel || '';
const uploadDate = formatUploadDate(item);
return `
<div class="search-result-card">
<div class="thumbnail-wrapper preview-trigger" data-url="${url}">
<img src="${thumbnail}" alt="${item.title}" loading="lazy" onerror="this.src='/static/img/no_image.png'">
<div class="play-overlay"><i class="fa fa-play-circle"></i></div>
<span class="duration-badge">${duration}</span>
</div>
<div class="card-body-content">
<h5 class="video-title" title="${item.title}">${item.title}</h5>
<div class="meta-info">
${uploader ? `<div class="uploader-info"><i class="fa fa-user-circle mr-1"></i>${uploader}</div>` : ''}
${uploadDate ? `<div class="upload-date"><i class="fa fa-calendar-alt mr-1"></i>${uploadDate}</div>` : ''}
</div>
<div class="card-actions">
<button class="btn btn-primary btn-sm flex-grow-1 download-video-btn" data-url="${url}">
<i class="fa fa-download mr-1"></i>다운로드
</button>
<a href="${url}" target="_blank" class="btn btn-outline-info btn-sm"><i class="fa fa-external-link"></i></a>
</div>
</div>
</div>
`;
};
// ====================
// 검색 결과 렌더링
// ====================
const renderResults = (data) => {
const fragment = document.createDocumentFragment();
data.forEach(item => {
if (!item) return; // null 아이템 스킵
const col = document.createElement('div');
col.className = 'col-12 col-sm-6 col-lg-4 col-xl-3 mb-4';
col.innerHTML = makeResultCard(item);
// 이벤트 바인딩
col.querySelector('.download-video-btn')?.addEventListener('click', (e) => {
e.preventDefault();
triggerDownload(e.currentTarget);
});
col.querySelector('.preview-trigger')?.addEventListener('click', (e) => {
e.preventDefault();
triggerPreview(e.currentTarget);
});
fragment.appendChild(col);
});
searchResults.appendChild(fragment);
};
// ====================
// 검색 수행
// ====================
const performSearch = (isNew = true) => {
const keyword = searchKeyword.value.trim();
if (!keyword) {
if (isNew) notify('검색어를 입력하세요.', 'warning');
return;
}
// 이미 로딩 중이면 무시
if (isLoading) return;
// 새 검색 시 상태 초기화
if (isNew) {
currentPage = 1;
hasMore = true;
searchResults.innerHTML = `
<div class="col-12 text-center py-5">
<div class="spinner-border text-primary mb-3" role="status"></div>
<p class="text-muted">유튜브 검색 중...</p>
</div>
`;
playerWrapper.style.display = 'none';
if (art) { art.destroy(); art = null; }
} else {
if (!hasMore) return;
if (sentinelLoading) sentinelLoading.style.display = 'block';
}
isLoading = true;
console.log(`[YouTube-DL] Search: "${keyword}" (Page ${currentPage})`);
postAjax('/basic/search', { keyword, page: currentPage })
.then(ret => {
// 새 검색이면 기존 로딩 스피너 제거
if (isNew) searchResults.innerHTML = '';
// 초기 안내 메시지 숨기기
if (initialMessage) initialMessage.style.display = 'none';
if (ret.ret === 'success' && ret.data && ret.data.length > 0) {
renderResults(ret.data);
// 다음 페이지 체크
if (ret.data.length < 20) {
hasMore = false;
} else {
currentPage++;
}
} else {
if (isNew) {
searchResults.innerHTML = `
<div class="col-12 text-center py-5 text-muted">
<i class="fa fa-exclamation-triangle fa-3x mb-3" style="opacity: 0.3;"></i>
<p>검색 결과가 없습니다.</p>
</div>
`;
}
hasMore = false;
}
})
.finally(() => {
isLoading = false;
if (sentinelLoading) sentinelLoading.style.display = 'none';
});
};
// ====================
// 미리보기 & 다운로드
// ====================
const triggerPreview = (el) => {
const targetUrl = el.dataset.url;
if (!targetUrl) return;
if (targetUrl === lastPreviewUrl && art) {
window.scrollTo({ top: 0, behavior: 'smooth' });
art.play();
return;
}
lastPreviewUrl = targetUrl;
postAjax('/basic/preview', { url: targetUrl }).then(ret => {
if (ret.ret === 'success' && ret.data) {
initArtplayer(ret.data);
window.scrollTo({ top: 0, behavior: 'smooth' });
}
});
};
const triggerDownload = (btn) => {
postAjax('/basic/download', {
url: btn.dataset.url,
filename: '%(title)s-%(id)s.%(ext)s',
format: 'bestvideo+bestaudio/best',
postprocessor: ''
}).then(res => {
if (res.ret === 'success' || res.ret === 'info') {
btn.disabled = true;
btn.innerHTML = '<i class="fa fa-check mr-1"></i>추가됨';
btn.classList.replace('btn-primary', 'btn-success');
}
});
};
// ====================
// 인피니티 스크롤 (단순화)
// ====================
// 1초마다 sentinel 위치 체크 (가장 확실한 방법)
setInterval(() => {
if (isLoading || !hasMore) return;
if (!sentinel) return;
const rect = sentinel.getBoundingClientRect();
// sentinel이 화면 아래 800px 이내에 들어오면 다음 페이지 로드
if (rect.top < window.innerHeight + 800) {
console.log('[YouTube-DL] Loading next page...');
performSearch(false);
}
}, 1000);
// ====================
// 이벤트 바인딩
// ====================
searchBtn.addEventListener('click', (e) => { e.preventDefault(); performSearch(true); });
searchKeyword.addEventListener('keypress', (e) => { if (e.key === 'Enter') performSearch(true); });
})();