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

다크 테마용 임시 코드 제거

Browse Source
This commit is contained in:
joyfuI
2020-10-05 18:02:43 +09:00
parent 5d2c2ba4cf
commit ab11ed47ac
3 changed files with 234 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
templates/youtube-dl_download.html
View File

@@ -31,70 +31,70 @@
{% block content %} {% block content %}
<div> <div>
{{ macros.setting_input_text('url', 'URL', placeholder='http:// 주소', desc='유튜브, 네이버TV 등 동영상 주소') }} {{ macros.setting_input_text('url', 'URL', placeholder='http:// 주소', desc='유튜브, 네이버TV 등 동영상 주소') }}
{{ macros.setting_input_text('filename', '파일명', value=arg['file_name'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template 참고') }} {{ macros.setting_input_text('filename', '파일명', value=arg['file_name'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template 참고') }}
{{ macros.setting_select('preset', '동영상 포맷 프리셋', arg['preset_list'], col='3') }} {{ macros.setting_select('preset', '동영상 포맷 프리셋', arg['preset_list'], col='3') }}
{{ macros.setting_input_text('format', '동영상 포맷', desc=['포맷 지정은 https://github.com/ytdl-org/youtube-dl/blob/master/README.md#format-selection 참고', '빈칸으로 두면 최고 화질로 다운로드합니다.']) }} {{ macros.setting_input_text('format', '동영상 포맷', desc=['포맷 지정은 https://github.com/ytdl-org/youtube-dl/blob/master/README.md#format-selection 참고', '빈칸으로 두면 최고 화질로 다운로드합니다.']) }}
{{ setting_select2('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }} {{ setting_select2('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }}
{{ macros.setting_button([['download_start', '다운로드']]) }} {{ macros.setting_button([['download_start', '다운로드']]) }}
</div> </div>
<script> <script>
"use strict"; "use strict";
const package_name = '{{ arg["package_name"] }}'; const package_name = '{{ arg["package_name"] }}';
$(function () { $(function () {
// 프리셋 변경 // 프리셋 변경
$('#preset').change(function () { $('#preset').change(function () {
if ($(this).val() === '_custom') { if ($(this).val() === '_custom') {
return; return;
} }
$('#format').val($(this).val()); $('#format').val($(this).val());
}); });
$('#format').change(function () { $('#format').change(function () {
$('#preset').val('_custom'); $('#preset').val('_custom');
}); });
// 후처리 변경 // 후처리 변경
$('#postprocessor').change(function () { $('#postprocessor').change(function () {
if ($(this).find($(`option[value="${$(this).val()}"]`)).parent().attr('label') === '오디오 추출') { if ($(this).find($(`option[value="${$(this).val()}"]`)).parent().attr('label') === '오디오 추출') {
$('#preset').val('bestaudio/best').change(); $('#preset').val('bestaudio/best').change();
} }
}); });
// 다운로드 // 다운로드
$('#download_start').click(function () { $('#download_start').click(function () {
let url = $('#url').val(); let url = $('#url').val();
if (url.startsWith('http') === false) { if (url.startsWith('http') === false) {
$.notify('<strong>URL을 입력하세요.</strong>', { $.notify('<strong>URL을 입력하세요.</strong>', {
type: 'warning' type: 'warning'
});
return false;
}
$.ajax({
url: `/${package_name}/ajax/download`,
type: 'POST',
cache: false,
data: {
url: url,
filename: $('#filename').val(),
format: $('#format').val(),
postprocessor: $('#postprocessor').val()
},
dataType: 'json'
}).done(function () {
$.notify('<strong>분석중..</strong>', {
type: 'info'
});
}).fail(function () {
$.notify('<strong>다운로드 요청 실패</strong>', {
type: 'danger'
});
}); });
return false; return false;
}
$.ajax({
url: `/${package_name}/ajax/download`,
type: 'POST',
cache: false,
data: {
url: url,
filename: $('#filename').val(),
format: $('#format').val(),
postprocessor: $('#postprocessor').val()
},
dataType: 'json'
}).done(function () {
$.notify('<strong>분석중..</strong>', {
type: 'info'
});
}).fail(function () {
$.notify('<strong>다운로드 요청 실패</strong>', {
type: 'danger'
});
}); });
return false;
}); });
}); </script>
</script>
{% endblock %} {% endblock %}

280
templates/youtube-dl_list.html
View File

@@ -1,172 +1,164 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<style> <style>
.row > div { .row > div {
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
} }
.row { .row {
align-items: center; align-items: center;
word-break: break-all; word-break: break-all;
} }
.row > div:nth-child(odd) { .row > div:nth-child(odd) {
text-align: right; text-align: right;
} }
.row > div:nth-child(even) { .row > div:nth-child(even) {
text-align: left; text-align: left;
} }
</style>
.table > tbody > tr.collapse > td { <table id="result_table" class="table table-sm tableRowHover">
background-color: #009fff0d !important; <thead>
} <tr>
<th style="width: 5%">IDX</th>
<th style="width: 8%">Plugin</th>
<th style="width: 10%">시작시간</th>
<th style="width: 10%">타입</th>
<th style="width: 28%">제목</th>
<th style="width: 8%">상태</th>
<th style="width: 15%">진행률</th>
<th style="width: 8%">진행시간</th>
<th style="width: 8%">Action</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
.tableRowHover tbody tr:not(.tableRowHoverOff):hover td { <script>
background-color: #ffff0080 !important; "use strict";
} const package_name = '{{ arg["package_name"] }}';
</style>
<table id="result_table" class="table table-sm tableRowHover"> $(function () {
<thead> let socket = io.connect(`${location.origin}/${package_name}`);
<tr>
<th style="width: 5%">IDX</th>
<th style="width: 8%">Plugin</th>
<th style="width: 10%">시작시간</th>
<th style="width: 10%">타입</th>
<th style="width: 28%">제목</th>
<th style="width: 8%">상태</th>
<th style="width: 15%">진행률</th>
<th style="width: 8%">진행시간</th>
<th style="width: 8%">Action</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<script> socket.on('add', function (data) {
"use strict"; $('#list').append(make_item(data));
const package_name = '{{ arg["package_name"] }}'; });
$(function () { socket.on('status', function (data) {
let socket = io.connect(`${location.origin}/${package_name}`); status_html(data);
});
socket.on('add', function (data) {
$('#list').append(make_item(data));
});
socket.on('status', function (data) {
status_html(data);
});
$.ajax({
url: `/${package_name}/ajax/list`,
type: 'POST',
cache: false,
data: {},
dataType: 'json'
}).done(function (data) {
let str = '';
for (let item of data) {
str += make_item(item);
}
$('#list').html(str);
});
$('#list').on('click', '.youtube-dl_stop', function () {
let index = $(this).data('index');
$.ajax({ $.ajax({
url: `/${package_name}/ajax/stop`, url: `/${package_name}/ajax/list`,
type: 'POST', type: 'POST',
cache: false, cache: false,
data: { data: {},
index: index
},
dataType: 'json' dataType: 'json'
}).done(function () { }).done(function (data) {
location.reload(); let str = '';
for (let item of data) {
str += make_item(item);
}
$('#list').html(str);
});
$('#list').on('click', '.youtube-dl_stop', function () {
let index = $(this).data('index');
$.ajax({
url: `/${package_name}/ajax/stop`,
type: 'POST',
cache: false,
data: {
index: index
},
dataType: 'json'
}).done(function () {
location.reload();
});
return false;
}); });
return false;
}); });
});
function make_item(data) { function make_item(data) {
let str = `<tr id="item_${data.index}" aria-expanded="true" style="cursor: pointer" data-toggle="collapse" data-target="#collapse_${data.index}">`; let str = `<tr id="item_${data.index}" aria-expanded="true" style="cursor: pointer" data-toggle="collapse" data-target="#collapse_${data.index}">`;
str += get_item(data); str += get_item(data);
str += '</tr>'; str += '</tr>';
str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff" style="cursor: pointer">`; str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff" style="cursor: pointer">`;
str += '<td colspan="9">'; str += '<td colspan="9">';
str += `<div id="detail_${data.index}">`; str += `<div id="detail_${data.index}">`;
str += get_detail(data); str += get_detail(data);
str += '</div>'; str += '</div>';
str += '</td>'; str += '</td>';
str += '</tr>'; str += '</tr>';
return str; return str;
} }
function get_item(data) { function get_item(data) {
let str = `<td>${data.index + 1}</td>`; let str = `<td>${data.index + 1}</td>`;
str += `<td>${data.plugin}</td>`; str += `<td>${data.plugin}</td>`;
str += `<td>${data.start_time}</td>`; str += `<td>${data.start_time}</td>`;
str += `<td>${data.extractor}</td>`; str += `<td>${data.extractor}</td>`;
str += `<td>${data.title}</td>`; str += `<td>${data.title}</td>`;
str += `<td>${data.status_ko}</td>`; str += `<td>${data.status_ko}</td>`;
let visi = 'hidden'; let visi = 'hidden';
if (parseInt(data.percent) > 0 && data.status_str !== 'STOP') { if (parseInt(data.percent) > 0 && data.status_str !== 'STOP') {
visi = 'visible'; 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">';
if (data.status_str === 'START' || data.status_str === 'DOWNLOADING' || data.status_str === 'FINISHED') {
str += `<button class="align-middle btn btn-outline-danger btn-sm youtube-dl_stop" data-index="${data.index}">중지</button>`;
}
str += '</td>';
return str;
} }
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">';
if (data.status_str === 'START' || data.status_str === 'DOWNLOADING' || data.status_str === 'FINISHED') {
str += `<button class="align-middle btn btn-outline-danger btn-sm youtube-dl_stop" data-index="${data.index}">중지</button>`;
}
str += '</td>';
return str;
}
function get_detail(data) { function get_detail(data) {
let str = info_html('URL', data.url, data.url); let str = info_html('URL', data.url, data.url);
str += info_html('업로더', data.uploader, data.uploader_url); str += info_html('업로더', data.uploader, data.uploader_url);
str += info_html('임시폴더', data.temp_path); str += info_html('임시폴더', data.temp_path);
str += info_html('저장폴더', data.save_path); str += info_html('저장폴더', data.save_path);
str += info_html('종료시간', data.end_time); str += info_html('종료시간', data.end_time);
if (data.status_str === 'DOWNLOADING') { if (data.status_str === 'DOWNLOADING') {
str += info_html('', '<b>현재 다운로드 중인 파일에 대한 정보</b>'); str += info_html('', '<b>현재 다운로드 중인 파일에 대한 정보</b>');
str += info_html('파일명', data.filename); str += info_html('파일명', data.filename);
str += info_html('진행률(current/total)', `${data.percent}% (${data.downloaded_bytes_str} / ${data.total_bytes_str})`); str += info_html('진행률(current/total)', `${data.percent}% (${data.downloaded_bytes_str} / ${data.total_bytes_str})`);
str += info_html('남은 시간', `${data.eta}초`); str += info_html('남은 시간', `${data.eta}초`);
str += info_html('다운 속도', data.speed_str); str += info_html('다운 속도', data.speed_str);
}
return str;
} }
return str;
}
function info_html(left, right, option) { function info_html(left, right, option) {
let str = '<div class="row">'; let str = '<div class="row">';
let link = (left === 'URL' || left === '업로더'); let link = (left === 'URL' || left === '업로더');
str += '<div class="col-sm-2">'; str += '<div class="col-sm-2">';
str += `<b>${left}</b>`; str += `<b>${left}</b>`;
str += '</div>'; str += '</div>';
str += '<div class="col-sm-10">'; str += '<div class="col-sm-10">';
str += '<div class="input-group col-sm-9">'; str += '<div class="input-group col-sm-9">';
str += '<span class="text-left" style="padding-left: 10px; padding-top: 3px">'; str += '<span class="text-left" style="padding-left: 10px; padding-top: 3px">';
if (link) { if (link) {
str += `<a href="${option}" target="_blank">`; str += `<a href="${option}" target="_blank">`;
}
str += right;
if (link) {
str += '</a>';
}
str += '</span></div></div></div>';
return str;
} }
str += right;
if (link) {
str += '</a>';
}
str += '</span></div></div></div>';
return str;
}
function status_html(data) { function status_html(data) {
$(`#item_${data.index}`).html(get_item(data)); $(`#item_${data.index}`).html(get_item(data));
$(`#detail_${data.index}`).html(get_detail(data)); $(`#detail_${data.index}`).html(get_detail(data));
} }
</script> </script>
{% endblock %} {% endblock %}

82
templates/youtube-dl_setting.html
View File

@@ -1,52 +1,52 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div> <div>
{{ macros.setting_input_text('youtube_dl_version', 'youtube-dl 버전', value=arg['youtube_dl_version']) }} {{ macros.setting_input_text('youtube_dl_version', 'youtube-dl 버전', value=arg['youtube_dl_version']) }}
<form id="setting"> <form id="setting">
{{ macros.setting_input_text_and_buttons('ffmpeg_path', 'FFmpeg 경로', [['ffmpeg_version', '버전확인']], value=arg['ffmpeg_path'], placeholder='ffmpeg', desc='SJVA에 내장된 버전 말고 원하는 버전을 사용할 수 있습니다.') }} {{ macros.setting_input_text_and_buttons('ffmpeg_path', 'FFmpeg 경로', [['ffmpeg_version', '버전확인']], value=arg['ffmpeg_path'], placeholder='ffmpeg', desc='SJVA에 내장된 버전 말고 원하는 버전을 사용할 수 있습니다.') }}
{{ macros.setting_input_text('temp_path', '임시 폴더', value=arg['temp_path'], desc='다운로드 파일이 임시로 저장될 폴더입니다.') }} {{ macros.setting_input_text('temp_path', '임시 폴더', value=arg['temp_path'], desc='다운로드 파일이 임시로 저장될 폴더입니다.') }}
{{ macros.setting_input_text('save_path', '저장 폴더', value=arg['save_path'], desc='정상적으로 완료된 파일이 이동할 폴더입니다.') }} {{ macros.setting_input_text('save_path', '저장 폴더', value=arg['save_path'], desc='정상적으로 완료된 파일이 이동할 폴더입니다.') }}
{{ macros.setting_input_text('default_filename', '기본 파일명', value=arg['default_filename'], placeholder=arg['DEFAULT_FILENAME'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template 참고') }} {{ macros.setting_input_text('default_filename', '기본 파일명', value=arg['default_filename'], placeholder=arg['DEFAULT_FILENAME'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template 참고') }}
{{ macros.setting_input_text('proxy', '프록시', value=arg['proxy'], desc=['HTTP/HTTPS/SOCKS를 지원합니다. 예) socks5://127.0.0.1:1080/', '빈칸으로 두면 프록시를 사용하지 않습니다.']) }} {{ macros.setting_input_text('proxy', '프록시', value=arg['proxy'], desc=['HTTP/HTTPS/SOCKS를 지원합니다. 예) socks5://127.0.0.1:1080/', '빈칸으로 두면 프록시를 사용하지 않습니다.']) }}
{{ macros.setting_checkbox('activate_cors', 'CORS 허용', value=arg['activate_cors'], desc='API로의 크로스 도메인 요청을 허용합니다. 설정 저장 후 재시작이 필요합니다.') }} {{ macros.setting_checkbox('activate_cors', 'CORS 허용', value=arg['activate_cors'], desc='API로의 크로스 도메인 요청을 허용합니다. 설정 저장 후 재시작이 필요합니다.') }}
{{ macros.setting_button([['global_setting_save_btn', '저장']]) }} {{ macros.setting_button([['global_setting_save_btn', '저장']]) }}
</form> </form>
</div> </div>
<script> <script>
"use strict"; "use strict";
const package_name = '{{ arg["package_name"] }}'; const package_name = '{{ arg["package_name"] }}';
$(function () { $(function () {
$('#youtube_dl_version').prop('readonly', true); $('#youtube_dl_version').prop('readonly', true);
// FFmpeg 버전확인 // FFmpeg 버전확인
$('#ffmpeg_version').click(function () { $('#ffmpeg_version').click(function () {
let ffmpeg_path = $('#ffmpeg_path').val(); let ffmpeg_path = $('#ffmpeg_path').val();
if (ffmpeg_path.length === 0) { if (ffmpeg_path.length === 0) {
ffmpeg_path = 'ffmpeg'; ffmpeg_path = 'ffmpeg';
} }
$.ajax({ $.ajax({
url: `/${package_name}/ajax/ffmpeg_version`, url: `/${package_name}/ajax/ffmpeg_version`,
type: 'POST', type: 'POST',
cache: false, cache: false,
data: { data: {
path: ffmpeg_path path: ffmpeg_path
}, },
dataType: 'json' dataType: 'json'
}).done(function (data) { }).done(function (data) {
$('#modal_title').html(`${ffmpeg_path} -version`); $('#modal_title').html(`${ffmpeg_path} -version`);
$('#modal_body').html(data); $('#modal_body').html(data);
$('#large_modal').modal(); $('#large_modal').modal();
}).fail(function () { }).fail(function () {
$.notify(`<strong>버전확인 실패</strong><br>${ffmpeg_path} -version`, { $.notify(`<strong>버전확인 실패</strong><br>${ffmpeg_path} -version`, {
type: 'danger' type: 'danger'
});
}); });
return false;
}); });
return false;
}); });
}); </script>
</script>
{% endblock %} {% endblock %}