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

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>';