feat: Refactor download queue UI with real-time updates, add queue management buttons, and streamline socket event handling.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div id="linkkf_setting_wrapper" class="container-fluid mt-4 mx-auto content-cloak" style="max-width: 100%;">
|
||||
<div id="linkkf_setting_wrapper" class="container-fluid mt-4 mx-auto content-cloak" style="max-width: 100%; padding-left: 5px; padding-right: 5px;">
|
||||
|
||||
<div class="glass-card p-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
@@ -24,8 +24,9 @@
|
||||
{{ macros.m_tab_content_start('normal', true) }}
|
||||
{{ macros.setting_input_text_and_buttons('linkkf_url', 'linkkf URL', [['go_btn', 'GO']], value=arg['linkkf_url']) }}
|
||||
{{ macros.setting_input_text('linkkf_download_path', '저장 폴더', value=arg['linkkf_download_path'], desc='정상적으로 다운 완료 된 파일이 이동할 폴더 입니다. ') }}
|
||||
{{ macros.setting_input_int('linkkf_max_ffmpeg_process_count', '동시 다운로드 수', value=arg['linkkf_max_ffmpeg_process_count'], desc='동시에 다운로드 할 에피소드 갯수입니다.') }}
|
||||
{{ macros.setting_select('linkkf_download_method', '다운로드 방법', [['ffmpeg', 'ffmpeg'], ['ytdlp', 'yt-dlp']], col='3', value=arg['linkkf_download_method'], desc='ffmpeg: HLS 다운로더 사용, yt-dlp: yt-dlp 사용') }}
|
||||
{{ macros.setting_input_int('linkkf_max_ffmpeg_process_count', '동시 다운로드 에피소드 수', value=arg['linkkf_max_ffmpeg_process_count'], desc='동시에 다운로드할 에피소드 개수입니다.') }}
|
||||
{{ macros.setting_select('linkkf_download_method', '다운로드 방법', [['ffmpeg', 'ffmpeg (기본)'], ['ytdlp', 'yt-dlp (단일쓰레드)'], ['aria2c', 'yt-dlp (멀티쓰레드/aria2c)']], col='3', value=arg['linkkf_download_method'], desc='aria2c 선택 시 병렬 다운로드로 속도가 향상됩니다.') }}
|
||||
{{ macros.setting_input_int('linkkf_download_threads', '멀티쓰레드 갯수', value=arg['linkkf_download_threads'], desc='yt-dlp/aria2c 사용 시 적용될 병렬 다운로드 쓰레드 수입니다. (기본 16)') }}
|
||||
{{ macros.setting_checkbox('linkkf_order_desc', '요청 화면 최신순 정렬', value=arg['linkkf_order_desc'], desc='On : 최신화부터, Off : 1화부터') }}
|
||||
{{ macros.setting_checkbox('linkkf_auto_make_folder', '제목 폴더 생성', value=arg['linkkf_auto_make_folder'], desc='제목으로 폴더를 생성하고 폴더 안에 다운로드합니다.') }}
|
||||
<div id="linkkf_auto_make_folder_div" class="collapse pl-4 border-left ml-3" style="border-color: rgba(255,255,255,0.1) !important;">
|
||||
@@ -108,28 +109,35 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-item {
|
||||
margin: 0 2px;
|
||||
/* Navigation (Tabs) Optimization */
|
||||
.nav-pills {
|
||||
background: rgba(6, 78, 59, 0.4) !important;
|
||||
padding: 6px !important;
|
||||
border-radius: 12px !important;
|
||||
border: 1px solid rgba(16, 185, 129, 0.1) !important;
|
||||
margin-bottom: 20px !important;
|
||||
display: inline-flex !important;
|
||||
gap: 4px !important;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link {
|
||||
border-radius: 50rem !important;
|
||||
padding: 8px 20px !important;
|
||||
color: #94a3b8 !important; /* Muted text */
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
.nav-pills .nav-link {
|
||||
color: #d1fae5 !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 8px 18px !important;
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
.nav-pills .nav-link:hover {
|
||||
background: rgba(16, 185, 129, 0.1) !important;
|
||||
color: #fff !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
ul.nav.nav-pills .nav-link.active {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
.nav-pills .nav-link.active {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
|
||||
border: 1px solid rgba(255,255,255,0.1) !important;
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
@@ -142,8 +150,8 @@
|
||||
|
||||
.form-control:focus, .custom-select:focus, textarea:focus {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
border-color: #3b82f6 !important;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
|
||||
border-color: #10b981 !important;
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Labels & Text */
|
||||
@@ -168,15 +176,15 @@
|
||||
}
|
||||
|
||||
.btn-primary, #globalSettingSaveBtn {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
|
||||
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover, #globalSettingSaveBtn:hover {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
|
||||
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
|
||||
/* GO Button specific (Input Group) */
|
||||
@@ -218,8 +226,8 @@
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
background-color: #10b981;
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
/* Collapse Borders */
|
||||
|
||||
Reference in New Issue
Block a user