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
2021-02-05 21:35:49 +09:00
parent 342263d153
commit 86a3287859
3 changed files with 152 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
templates/youtube-dl_download.html
View File

@@ -1,6 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% macro setting_select2(id, title, options, col='9', desc=None, value=None) %} {% macro my_setting_select(id, title, options, col='9', desc=None, value=None) %}
{{ macros.setting_top(title) }} {{ macros.setting_top(title) }}
<div class="input-group col-sm-{{ col }}"> <div class="input-group col-sm-{{ col }}">
<select id="{{ id }}" name="{{ id }}" class="form-control form-control-sm"> <select id="{{ id }}" name="{{ id }}" class="form-control form-control-sm">
@@ -31,68 +31,62 @@
{% block content %} {% block content %}
<div> <form id="download">
{{ 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['filename'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/#output-template 참고') }} {{ macros.setting_input_text('filename', '파일명', value=arg['filename'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/#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/#format-selection 참고', '빈칸으로 두면 최고 화질로 다운로드합니다.']) }} {{ macros.setting_input_text('format', '동영상 포맷', desc=['포맷 지정은 https://github.com/ytdl-org/youtube-dl/#format-selection 참고', '빈칸으로 두면 최고 화질로 다운로드합니다.']) }}
{{ setting_select2('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }} {{ my_setting_select('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }}
{{ macros.setting_button([['download_btn', '다운로드']]) }} {{ macros.setting_button([['download_btn', '다운로드']]) }}
</div> </form>
<script> <script>
"use strict"; "use strict";
const package_name = '{{ arg["package_name"] }}'; const package_name = '{{ arg["package_name"] }}';
$(function () { // 프리셋 변경
// 프리셋 변경 const preset = document.getElementById('preset');
$('#preset').change(function () { const format = document.getElementById('format');
if ($(this).val() === '_custom') { preset.addEventListener('change', () => {
return; if (preset.value !== '_custom') {
} format.value = preset.value;
$('#format').val($(this).val()); }
}); });
$('#format').change(function () { format.addEventListener('input', () => {
$('#preset').val('_custom'); preset.value = '_custom';
}); });
// 후처리 변경 // 후처리 변경
$('#postprocessor').change(function () { const postprocessor = document.getElementById('postprocessor');
if ($(this).find($(`option[value="${$(this).val()}"]`)).parent().attr('label') === '오디오 추출') { postprocessor.addEventListener('change', () => {
$('#preset').val('bestaudio/best').change(); const select = postprocessor.selectedOptions[0];
} if (select.parentElement.label === '오디오 추출') {
}); preset.value = 'bestaudio/best';
format.value = preset.value;
}
});
// 다운로드 // 다운로드
$('#download_btn').click(function () { const download_btn = document.getElementById('download_btn');
let url = $('#url').val(); download_btn.addEventListener('click', (event) => {
if (url.startsWith('http') === false) { event.preventDefault();
$.notify('<strong>URL을 입력하세요.</strong>', { const url = document.getElementById('url').value;
type: 'warning' if (!url.startsWith('http')) {
}); notify('URL을 입력하세요.', 'warning');
return false; return;
} }
$.ajax({
url: `/${package_name}/ajax/download`, fetch(`/${package_name}/ajax/download`, {
type: 'POST', method: 'POST',
cache: false, cache: 'no-cache',
data: { headers: {
url: url, 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
filename: $('#filename').val(), },
format: $('#format').val(), body: get_formdata('#download')
postprocessor: $('#postprocessor').val() }).then(response => response.json()).then(() => {
}, notify('분석중..', 'info');
dataType: 'json' }).catch(() => {
}).done(function () { notify('다운로드 요청 실패', 'danger');
$.notify('<strong>분석중..</strong>', {
type: 'info'
});
}).fail(function () {
$.notify('<strong>다운로드 요청 실패</strong>', {
type: 'danger'
});
});
return false;
}); });
}); });
</script> </script>

130
templates/youtube-dl_list.html
View File

@@ -19,6 +19,15 @@
.row > div:nth-child(even) { .row > div:nth-child(even) {
text-align: left; text-align: left;
} }
.cursor-pointer {
cursor: pointer
}
.info-padding {
padding-left: 10px;
padding-top: 3px;
}
</style> </style>
{{ macros.m_row_start() }} {{ macros.m_row_start() }}
@@ -26,7 +35,7 @@
{{ macros.m_row_end() }} {{ macros.m_row_end() }}
<div class="d-inline-block"></div> <div class="d-inline-block"></div>
<table id="result_table" class="table table-sm tableRowHover"> <table id="list_table" class="table table-sm tableRowHover">
<thead> <thead>
<tr> <tr>
<th style="width: 5%">IDX</th> <th style="width: 5%">IDX</th>
@@ -40,75 +49,80 @@
<th style="width: 8%">Action</th> <th style="width: 8%">Action</th>
</tr> </tr>
</thead> </thead>
<tbody id="list"></tbody> <tbody id="list_tbody"></tbody>
</table> </table>
<script> <script>
"use strict"; "use strict";
const package_name = '{{ arg["package_name"] }}'; const package_name = '{{ arg["package_name"] }}';
$(function () { // 소켓
let socket = io.connect(`${location.origin}/${package_name}`); const socket = io.connect(`${location.origin}/${package_name}`);
const list_tbody = document.getElementById('list_tbody');
socket.on('add', (data) => {
list_tbody.innerHTML += make_item(data);
});
socket.on('status', (data) => {
status_html(data);
});
socket.on('add', function (data) { // 목록 불러오기
$('#list').append(make_item(data)); fetch(`/${package_name}/ajax/list`, {
}); method: 'POST',
cache: 'no-cache',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then(response => response.json()).then((data) => {
let str = '';
for (const item of data) {
str += make_item(item);
}
list_tbody.innerHTML = str;
});
socket.on('status', function (data) { // 전체 중지
status_html(data); const all_stop_btn = document.getElementById('all_stop_btn');
}); all_stop_btn.addEventListener('click', (event) => {
event.preventDefault();
$.ajax({ fetch(`/${package_name}/ajax/all_stop`, {
url: `/${package_name}/ajax/list`, method: 'POST',
type: 'POST', cache: 'no-cache',
cache: false, headers: {
data: {}, 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
dataType: 'json'
}).done(function (data) {
let str = '';
for (let item of data) {
str += make_item(item);
} }
$('#list').html(str); }).then(response => response.json()).then(() => {
location.reload();
}); });
});
// 전체 중지 // 중지
$('#all_stop_btn').click(function () { const list_table = document.getElementById('list_table');
$.ajax({ list_table.addEventListener('click', (event) => {
url: `/${package_name}/ajax/all_stop`, event.preventDefault();
type: 'POST', const target = event.target;
cache: false, if (!target.classList.contains('youtubeDl-stop')) {
data: {}, return;
dataType: 'json' }
}).done(function () { fetch(`/${package_name}/ajax/stop`, {
location.reload(); method: 'POST',
}); cache: 'no-cache',
return false; headers: {
}); 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
// 중지 body: new URLSearchParams({
$('#list').on('click', '.youtube-dl_stop', function () { index: target.dataset.index
let index = $(this).data('index'); })
$.ajax({ }).then(response => response.json()).then(() => {
url: `/${package_name}/ajax/stop`, location.reload();
type: 'POST',
cache: false,
data: {
index: index
},
dataType: 'json'
}).done(function () {
location.reload();
});
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}" class="cursor-pointer" aria-expanded="true" 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">`;
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);
@@ -133,7 +147,7 @@
str += `<td>${data.download_time}</td>`; str += `<td>${data.download_time}</td>`;
str += '<td class="tableRowHoverOff">'; str += '<td class="tableRowHoverOff">';
if (data.status_str === 'START' || data.status_str === 'DOWNLOADING' || data.status_str === 'FINISHED') { 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 += `<button class="align-middle btn btn-outline-danger btn-sm youtubeDl-stop" data-index="${data.index}">중지</button>`;
} }
str += '</td>'; str += '</td>';
return str; return str;
@@ -157,13 +171,13 @@
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 === '업로더'); const 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 info-padding">';
if (link) { if (link) {
str += `<a href="${option}" target="_blank">`; str += `<a href="${option}" target="_blank">`;
} }
@@ -176,8 +190,8 @@
} }
function status_html(data) { function status_html(data) {
$(`#item_${data.index}`).html(get_item(data)); document.getElementById(`item_${data.index}`).innerHTML = get_item(data);
$(`#detail_${data.index}`).html(get_detail(data)); document.getElementById(`detail_${data.index}`).innerHTML = get_detail(data);
} }
</script> </script>

73
templates/youtube-dl_setting.html
View File

@@ -1,49 +1,46 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div> <form id="setting">
<form id="setting"> {{ macros.setting_radio('youtube_dl_package', 'youtube-dl', arg['package_list'], value=arg['youtube_dl_package'], desc='사용할 youtube-dl 패키지를 선택합니다. 설정 저장 후 재시작이 필요합니다.') }}
{{ macros.setting_radio('youtube_dl_package', 'youtube-dl', arg['package_list'], value=arg['youtube_dl_package'], desc='사용할 youtube-dl 패키지를 선택합니다. 설정 저장 후 재시작이 필요합니다.') }} {{ macros.setting_input_text('youtube_dl_version', 'youtube-dl 버전', value=arg['youtube_dl_version'], disabled=True) }}
{{ macros.setting_input_text('youtube_dl_version', 'youtube-dl 버전', value=arg['youtube_dl_version'], disabled=True) }} {{ macros.setting_input_text_and_buttons('ffmpeg_path', 'FFmpeg 경로', [['ffmpeg_version_btn', '버전확인']], 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/#output-template 참고') }}
{{ macros.setting_input_text('default_filename', '기본 파일명', value=arg['default_filename'], placeholder=arg['DEFAULT_FILENAME'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/#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>
<script> <script>
"use strict"; "use strict";
const package_name = '{{ arg["package_name"] }}'; const package_name = '{{ arg["package_name"] }}';
$(function () { // FFmpeg 버전확인
// FFmpeg 버전확인 const ffmpeg_version_btn = document.getElementById('ffmpeg_version_btn');
$('#ffmpeg_version').click(function () { ffmpeg_version_btn.addEventListener('click', (event) => {
let ffmpeg_path = $('#ffmpeg_path').val(); event.preventDefault();
if (ffmpeg_path.length === 0) { let ffmpeg_path = document.getElementById('ffmpeg_path').value;
ffmpeg_path = 'ffmpeg'; if (ffmpeg_path.length === 0) {
} ffmpeg_path = 'ffmpeg';
$.ajax({ }
url: `/${package_name}/ajax/ffmpeg_version`,
type: 'POST', fetch(`/${package_name}/ajax/ffmpeg_version`, {
cache: false, method: 'POST',
data: { cache: 'no-cache',
path: ffmpeg_path headers: {
}, 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
dataType: 'json' },
}).done(function (data) { body: new URLSearchParams({
$('#modal_title').html(`${ffmpeg_path} -version`); path: ffmpeg_path
$('#modal_body').html(data); })
$('#large_modal').modal(); }).then(response => response.json()).then((data) => {
}).fail(function () { document.getElementById('modal_title').innerHTML = `${ffmpeg_path} -version`;
$.notify(`<strong>버전확인 실패</strong><br>${ffmpeg_path} -version`, { document.getElementById('modal_body').innerHTML = data;
type: 'danger' $('#large_modal').modal();
}); }).catch(() => {
}); notify('버전확인 실패', 'danger');
return false;
}); });
}); });
</script> </script>