From ab11ed47acf179ab1c8071ccc25184ad495ceb20 Mon Sep 17 00:00:00 2001
From: joyfuI <jong970105@gmail.com>
Date: Mon, 5 Oct 2020 18:02:43 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8B=A4=ED=81=AC=20=ED=85=8C=EB=A7=88?=
 =?UTF-8?q?=EC=9A=A9=20=EC=9E=84=EC=8B=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/youtube-dl_download.html | 114 ++++++------
 templates/youtube-dl_list.html     | 280 ++++++++++++++---------------
 templates/youtube-dl_setting.html  |  82 ++++-----
 3 files changed, 234 insertions(+), 242 deletions(-)

diff --git a/templates/youtube-dl_download.html b/templates/youtube-dl_download.html
index e1b94a7..a4bedf2 100644
--- a/templates/youtube-dl_download.html
+++ b/templates/youtube-dl_download.html
@@ -31,70 +31,70 @@
 
 {% block content %}
 
-<div>
-    {{ 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_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 참고', '빈칸으로 두면 최고 화질로 다운로드합니다.']) }}
-    {{ setting_select2('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }}
-    {{ macros.setting_button([['download_start', '다운로드']]) }}
-</div>
+    <div>
+        {{ 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_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 참고', '빈칸으로 두면 최고 화질로 다운로드합니다.']) }}
+        {{ setting_select2('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }}
+        {{ macros.setting_button([['download_start', '다운로드']]) }}
+    </div>
 
-<script>
-    "use strict";
-    const package_name = '{{ arg["package_name"] }}';
+    <script>
+        "use strict";
+        const package_name = '{{ arg["package_name"] }}';
 
-    $(function () {
-        // 프리셋 변경
-        $('#preset').change(function () {
-            if ($(this).val() === '_custom') {
-                return;
-            }
-            $('#format').val($(this).val());
-        });
-        $('#format').change(function () {
-            $('#preset').val('_custom');
-        });
+        $(function () {
+            // 프리셋 변경
+            $('#preset').change(function () {
+                if ($(this).val() === '_custom') {
+                    return;
+                }
+                $('#format').val($(this).val());
+            });
+            $('#format').change(function () {
+                $('#preset').val('_custom');
+            });
 
-        // 후처리 변경
-        $('#postprocessor').change(function () {
-            if ($(this).find($(`option[value="${$(this).val()}"]`)).parent().attr('label') === '오디오 추출') {
-                $('#preset').val('bestaudio/best').change();
-            }
-        });
+            // 후처리 변경
+            $('#postprocessor').change(function () {
+                if ($(this).find($(`option[value="${$(this).val()}"]`)).parent().attr('label') === '오디오 추출') {
+                    $('#preset').val('bestaudio/best').change();
+                }
+            });
 
-        // 다운로드
-        $('#download_start').click(function () {
-            let url = $('#url').val();
-            if (url.startsWith('http') === false) {
-                $.notify('<strong>URL을 입력하세요.</strong>', {
-                    type: 'warning'
+            // 다운로드
+            $('#download_start').click(function () {
+                let url = $('#url').val();
+                if (url.startsWith('http') === false) {
+                    $.notify('<strong>URL을 입력하세요.</strong>', {
+                        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;
-            }
-            $.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 %}
diff --git a/templates/youtube-dl_list.html b/templates/youtube-dl_list.html
index 2c7d97b..d146c56 100644
--- a/templates/youtube-dl_list.html
+++ b/templates/youtube-dl_list.html
@@ -1,172 +1,164 @@
 {% extends "base.html" %}
 {% block content %}
 
-<style>
-    .row > div {
-        padding-top: 3px;
-        padding-bottom: 3px;
-    }
+    <style>
+        .row > div {
+            padding-top: 3px;
+            padding-bottom: 3px;
+        }
 
-    .row {
-        align-items: center;
-        word-break: break-all;
-    }
+        .row {
+            align-items: center;
+            word-break: break-all;
+        }
 
-    .row > div:nth-child(odd) {
-        text-align: right;
-    }
+        .row > div:nth-child(odd) {
+            text-align: right;
+        }
 
-    .row > div:nth-child(even) {
-        text-align: left;
-    }
+        .row > div:nth-child(even) {
+            text-align: left;
+        }
+    </style>
 
-    .table > tbody > tr.collapse > td {
-        background-color: #009fff0d !important;
-    }
+    <table id="result_table" class="table table-sm tableRowHover">
+        <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 {
-        background-color: #ffff0080 !important;
-    }
-</style>
+    <script>
+        "use strict";
+        const package_name = '{{ arg["package_name"] }}';
 
-<table id="result_table" class="table table-sm tableRowHover">
-    <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>
+        $(function () {
+            let socket = io.connect(`${location.origin}/${package_name}`);
 
-<script>
-    "use strict";
-    const package_name = '{{ arg["package_name"] }}';
+            socket.on('add', function (data) {
+                $('#list').append(make_item(data));
+            });
 
-    $(function () {
-        let socket = io.connect(`${location.origin}/${package_name}`);
+            socket.on('status', function (data) {
+                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({
-                url: `/${package_name}/ajax/stop`,
+                url: `/${package_name}/ajax/list`,
                 type: 'POST',
                 cache: false,
-                data: {
-                    index: index
-                },
+                data: {},
                 dataType: 'json'
-            }).done(function () {
-                location.reload();
+            }).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({
+                    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) {
-        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 += '</tr>';
-        str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff" style="cursor: pointer">`;
-        str += '<td colspan="9">';
-        str += `<div id="detail_${data.index}">`;
-        str += get_detail(data);
-        str += '</div>';
-        str += '</td>';
-        str += '</tr>';
-        return str;
-    }
+        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}">`;
+            str += get_item(data);
+            str += '</tr>';
+            str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff" style="cursor: pointer">`;
+            str += '<td colspan="9">';
+            str += `<div id="detail_${data.index}">`;
+            str += get_detail(data);
+            str += '</div>';
+            str += '</td>';
+            str += '</tr>';
+            return str;
+        }
 
-    function 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 visi = 'hidden';
-        if (parseInt(data.percent) > 0 && data.status_str !== 'STOP') {
-            visi = 'visible';
+        function 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 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">';
+            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) {
-        let 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 += info_html('파일명', data.filename);
-            str += info_html('진행률(current/total)', `${data.percent}% (${data.downloaded_bytes_str} / ${data.total_bytes_str})`);
-            str += info_html('남은 시간', `${data.eta}초`);
-            str += info_html('다운 속도', data.speed_str);
+        function get_detail(data) {
+            let 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 += info_html('파일명', data.filename);
+                str += info_html('진행률(current/total)', `${data.percent}% (${data.downloaded_bytes_str} / ${data.total_bytes_str})`);
+                str += info_html('남은 시간', `${data.eta}초`);
+                str += info_html('다운 속도', data.speed_str);
+            }
+            return str;
         }
-        return str;
-    }
 
-    function info_html(left, right, option) {
-        let str = '<div class="row">';
-        let link = (left === 'URL' || left === '업로더');
-        str += '<div class="col-sm-2">';
-        str += `<b>${left}</b>`;
-        str += '</div>';
-        str += '<div class="col-sm-10">';
-        str += '<div class="input-group col-sm-9">';
-        str += '<span class="text-left" style="padding-left: 10px; padding-top: 3px">';
-        if (link) {
-            str += `<a href="${option}" target="_blank">`;
+        function info_html(left, right, option) {
+            let str = '<div class="row">';
+            let link = (left === 'URL' || left === '업로더');
+            str += '<div class="col-sm-2">';
+            str += `<b>${left}</b>`;
+            str += '</div>';
+            str += '<div class="col-sm-10">';
+            str += '<div class="input-group col-sm-9">';
+            str += '<span class="text-left" style="padding-left: 10px; padding-top: 3px">';
+            if (link) {
+                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) {
-        $(`#item_${data.index}`).html(get_item(data));
-        $(`#detail_${data.index}`).html(get_detail(data));
-    }
-</script>
+        function status_html(data) {
+            $(`#item_${data.index}`).html(get_item(data));
+            $(`#detail_${data.index}`).html(get_detail(data));
+        }
+    </script>
 
 {% endblock %}
diff --git a/templates/youtube-dl_setting.html b/templates/youtube-dl_setting.html
index 2fd8008..5948333 100644
--- a/templates/youtube-dl_setting.html
+++ b/templates/youtube-dl_setting.html
@@ -1,52 +1,52 @@
 {% extends "base.html" %}
 {% block content %}
 
-<div>
-    {{ macros.setting_input_text('youtube_dl_version', 'youtube-dl 버전', value=arg['youtube_dl_version']) }}
-    <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('temp_path', '임시 폴더', value=arg['temp_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('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_button([['global_setting_save_btn', '저장']]) }}
-    </form>
-</div>
+    <div>
+        {{ macros.setting_input_text('youtube_dl_version', 'youtube-dl 버전', value=arg['youtube_dl_version']) }}
+        <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('temp_path', '임시 폴더', value=arg['temp_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('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_button([['global_setting_save_btn', '저장']]) }}
+        </form>
+    </div>
 
-<script>
-    "use strict";
-    const package_name = '{{ arg["package_name"] }}';
+    <script>
+        "use strict";
+        const package_name = '{{ arg["package_name"] }}';
 
-    $(function () {
-        $('#youtube_dl_version').prop('readonly', true);
+        $(function () {
+            $('#youtube_dl_version').prop('readonly', true);
 
-        // FFmpeg 버전확인
-        $('#ffmpeg_version').click(function () {
-            let ffmpeg_path = $('#ffmpeg_path').val();
-            if (ffmpeg_path.length === 0) {
-                ffmpeg_path = 'ffmpeg';
-            }
-            $.ajax({
-                url: `/${package_name}/ajax/ffmpeg_version`,
-                type: 'POST',
-                cache: false,
-                data: {
-                    path: ffmpeg_path
-                },
-                dataType: 'json'
-            }).done(function (data) {
-                $('#modal_title').html(`${ffmpeg_path} -version`);
-                $('#modal_body').html(data);
-                $('#large_modal').modal();
-            }).fail(function () {
-                $.notify(`<strong>버전확인 실패</strong><br>${ffmpeg_path} -version`, {
-                    type: 'danger'
+            // FFmpeg 버전확인
+            $('#ffmpeg_version').click(function () {
+                let ffmpeg_path = $('#ffmpeg_path').val();
+                if (ffmpeg_path.length === 0) {
+                    ffmpeg_path = 'ffmpeg';
+                }
+                $.ajax({
+                    url: `/${package_name}/ajax/ffmpeg_version`,
+                    type: 'POST',
+                    cache: false,
+                    data: {
+                        path: ffmpeg_path
+                    },
+                    dataType: 'json'
+                }).done(function (data) {
+                    $('#modal_title').html(`${ffmpeg_path} -version`);
+                    $('#modal_body').html(data);
+                    $('#large_modal').modal();
+                }).fail(function () {
+                    $.notify(`<strong>버전확인 실패</strong><br>${ffmpeg_path} -version`, {
+                        type: 'danger'
+                    });
                 });
+                return false;
             });
-            return false;
         });
-    });
-</script>
+    </script>
 
 {% endblock %}