feat: Refactor download queue UI with real-time updates, add queue management buttons, and streamline socket event handling.

This commit is contained in:
2026-01-01 00:32:59 +09:00
parent 681fc0790c
commit 9e25f1f02e
13 changed files with 1431 additions and 845 deletions

View File

@@ -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 */