feat: Enhance yt-dlp downloader with auto-installation, adaptive HLS download strategies, CDN-specific headers, and improved ffmpeg progress tracking.

2025-12-28 23:22:36 +09:00
parent 028562ea18
commit bb4f2797c1
7 changed files with 524 additions and 78 deletions
--- a/templates/anime_downloader_anilife_queue.html
+++ b/templates/anime_downloader_anilife_queue.html
@@ -27,34 +27,68 @@
        const package_name = "{{arg['package_name'] }}";
        const sub = "{{arg['sub'] }}";

-        function on_start() {
+        function on_start(silent = false) {
            $.ajax({
                url: '/' + package_name + '/ajax/' + sub + '/entity_list',
                type: "POST",
                cache: false,
                data: {},
                dataType: "json",
+                global: !silent,
                success: function (data) {
-                    make_download_list(data)
+                    // entity_list 응답을 처리
+                    current_data = data;
+                    
+                    // 목록 개수가 변했거나 데이터가 없을 때만 전체 갱신 (반짝임 방지)
+                    const list_body = $("#list");
+                    if (data.length == 0) {
+                        list_body.html("<tr><td colspan='11'><h4>작업이 없습니다.</h4><td><tr>");
+                    } else if (list_body.children().length !== data.length * 2) { // make_item이 행 2개를 생성하므로
+                        str = ''
+                        for (i in data) {
+                            str += make_item(data[i]);
+                        }
+                        list_body.html(str);
+                    } else {
+                        // 개수가 같으면 각 항목의 상태만 보강 업데이트
+                        for (i in data) {
+                            status_html(data[i]);
+                        }
+                    }
                }
            });
        }

        $(document).ready(function () {
-            const socket = io.connect(window.location.href);
+            const socket_url = window.location.protocol + "//" + document.domain + ":" + location.port + "/anime_downloader/anilife/queue";
+            console.log("Connecting to socket:", socket_url);
+            const socket = io.connect(socket_url);

-            {#socket = io.connect(window.location.protocol + "//" + document.domain + ":" + location.port + "/" + package_name + '/' + sub);#}
+            socket.on('connect', function() {
+                console.log('Socket connected to anilife queue!');
+            });
+            
+            // 모든 이벤트 모니터링 (디버깅용)
+            socket.onAny((event, ...args) => {
+                console.log(`[Socket event: ${event}]`, args);
+            });

            socket.on('start', function (data) {
                on_start();
            });
+            
            socket.on('list_refresh', function (data) {
                on_start()
            });

+            // 3초마다 자동 새로고침 폴백 (인디케이터 없이 조용히)
+            setInterval(function() {
+                on_start(true);
+            }, 3000);
+
            socket.on('status', function (data) {
-                console.log(data);
-                on_status(data)
+                console.log("Status update received:", data);
+                status_html(data);
            });

            socket.on('on_start', function (data) {
@@ -79,10 +113,6 @@
                button_html(data);
            });

-            socket.on('status', function (data) {
-                status_html(data);
-            });
-
            socket.on('last', function (data) {
                status_html(data);
                button_html(data);
@@ -194,6 +224,7 @@

        function status_html(data) {
            var progress = document.getElementById("progress_" + data.idx);
+            if (!progress) return;
            progress.style.width = data.percent + '%';
            progress.innerHTML = data.percent + '%';
            progress.style.visibility = 'visible';
--- a/templates/anime_downloader_linkkf_request.html
+++ b/templates/anime_downloader_linkkf_request.html
@@ -154,39 +154,25 @@

            // str += m_hr_black();
            str += "</div>"
+            
+            // 에피소드 카드 그리드 레이아웃
+            str += '<div class="episode-list-container">';
            for (i in data.episode) {
-                str += m_row_start();
-                // tmp = '<img src="' + data.episode[i].image + '" class="img-fluid">'
-                // str += m_col(3, tmp)
-                tmp = "<strong>" + data.episode[i].title + "</strong><span>. </span>";
-                {#tmp += "<br>";#}
-                tmp += data.episode[i].filename + "<br><p></p>";
-
-                tmp += '<div class="form-inline">';
-                tmp +=
-                    '<input id="checkbox_' +
-                    i +
-                    '" name="checkbox_' +
-                    i +
-                    '" type="checkbox" checked data-toggle="toggle" data-on="선 택" data-off="-" data-onstyle="success" data-offstyle="danger" data-size="small">&nbsp;&nbsp;&nbsp;&nbsp;';
-                // tmp += m_button('add_queue_btn', '다운로드 추가', [{'key': 'code', 'value': data.episode[i].code}])
-                tmp += m_button("add_queue_btn", "다운로드 추가", [
-                    {key: "idx", value: i},
-                ]);
-                tmp += j_button('insert_download_btn', '다운로드 추가', {
-                    code: data.episode[i]._id,
-                });
-                tmp += j_button(
-                    'force_insert_download_btn',
-                    '다운로드 추가 (DB무시)',
-                    {code: data.episode[i]._id}
-                );
-                // tmp += '<button id="play_video" name="play_video" class="btn btn-sm btn-outline-primary" data-idx="'+i+'">바로보기</button>';
-                tmp += "</div>";
-                str += m_col(12, tmp);
-                str += m_row_end();
-                if (i != data.length - 1) str += m_hr(0);
+                str += '<div class="episode-card">';
+                str += '<div class="episode-thumb">';
+                str += '<span class="episode-num">' + (parseInt(i) + 1) + '화</span>';
+                str += '</div>';
+                str += '<div class="episode-info">';
+                str += '<div class="episode-title">' + data.episode[i].title + '</div>';
+                str += '<div class="episode-filename">' + data.episode[i].filename + '</div>';
+                str += '<div class="episode-actions">';
+                str += '<input id="checkbox_' + i + '" name="checkbox_' + i + '" type="checkbox" checked data-toggle="toggle" data-on="선택" data-off="-" data-onstyle="success" data-offstyle="secondary" data-size="small">';
+                str += m_button("add_queue_btn", "다운로드", [{key: "idx", value: i}]);
+                str += '</div>';
+                str += '</div>';
+                str += '</div>';
            }
+            str += '</div>';
            document.getElementById("episode_list").innerHTML = str;
            $('input[id^="checkbox_"]').bootstrapToggle();
        }
@@ -451,6 +437,105 @@
            border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
        }

+        /* 에피소드 목록 컨테이너 */
+        .episode-list-container {
+            margin-top: 20px;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+            gap: 10px;
+        }
+        
+        /* 에피소드 카드 */
+        .episode-card {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 14px;
+            background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%);
+            border-radius: 8px;
+            border: 1px solid rgba(148, 163, 184, 0.12);
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+        
+        .episode-card:hover {
+            background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
+            border-color: rgba(96, 165, 250, 0.5);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(96, 165, 250, 0.2);
+        }
+        
+        /* 에피소드 썸네일 */
+        .episode-thumb {
+            position: relative;
+            width: 40px;
+            min-width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            overflow: hidden;
+            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        
+        /* 에피소드 번호 배지 */
+        .episode-num {
+            color: white;
+            font-size: 11px;
+            font-weight: 700;
+        }
+        
+        /* 에피소드 정보 */
+        .episode-info {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            min-width: 0;
+        }
+        
+        .episode-title {
+            color: #e2e8f0;
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 1.3;
+        }
+        
+        .episode-filename {
+            color: #64748b;
+            font-size: 11px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        /* 에피소드 액션 버튼 */
+        .episode-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 4px;
+        }
+        
+        .episode-actions .btn {
+            font-size: 11px;
+            padding: 3px 10px;
+            border-radius: 4px;
+        }
+        
+        .episode-actions .toggle {
+            transform: scale(0.85);
+        }
+        
+        /* 반응형 */
+        @media (max-width: 768px) {
+            .episode-list-container {
+                grid-template-columns: 1fr;
+            }
+        }
+
        #airing_list {
            display: none;
        }
--- a/templates/anime_downloader_ohli24_request.html
+++ b/templates/anime_downloader_ohli24_request.html
@@ -145,32 +145,31 @@
            str += "</div>"
            {#str += m_hr_black();#}

+            // 에피소드 카드 그리드 레이아웃
+            str += '<div class="episode-list-container">';
            for (let i in data.episode) {
-                str += m_row_start();
-                tmp = '';
-                if (data.episode[i].thumbnail)
-                    tmp = '<img src="' + data.episode[i].thumbnail + '" class="img-fluid">'
-                str += m_col(3, tmp)
-                tmp = '<strong>' + data.episode[i].title + '</strong>';
-                tmp += '<br>';
-                tmp += data.episode[i].date + '<br>';
-
-                tmp += '<div class="form-inline">'
-                tmp += '<input id="checkbox_' + i + '" name="checkbox_' + i + '" type="checkbox" checked data-toggle="toggle" data-on="선 택" data-off="-" data-onstyle="success" data-offstyle="danger" data-size="small">&nbsp;&nbsp;&nbsp;&nbsp;'
-                tmp += m_button('add_queue_btn', '다운로드 추가', [{'key': 'idx', 'value': i}])
-                tmp += j_button('insert_download_btn', '다운로드 추가', {
-                    code: data.episode[i]._id,
-                });
-                tmp += j_button(
-                    'force_insert_download_btn',
-                    '다운로드 추가 (DB무시)',
-                    {code: data.episode[i]._id}
-                );
-                tmp += '</div>'
-                str += m_col(9, tmp)
-                str += m_row_end();
-                {#if (i != data.length - 1) str += m_hr(0);#}
+                let epThumbSrc = data.episode[i].thumbnail || '';
+                
+                str += '<div class="episode-card">';
+                str += '<div class="episode-thumb">';
+                if (epThumbSrc) {
+                    str += '<img src="' + epThumbSrc + '" loading="lazy" onerror="this.style.display=\'none\'">';
+                }
+                str += '<span class="episode-num">' + (parseInt(i) + 1) + '화</span>';
+                str += '</div>';
+                str += '<div class="episode-info">';
+                str += '<div class="episode-title">' + data.episode[i].title + '</div>';
+                if (data.episode[i].date) {
+                    str += '<div class="episode-date">' + data.episode[i].date + '</div>';
+                }
+                str += '<div class="episode-actions">';
+                str += '<input id="checkbox_' + i + '" name="checkbox_' + i + '" type="checkbox" checked data-toggle="toggle" data-on="선택" data-off="-" data-onstyle="success" data-offstyle="secondary" data-size="small">';
+                str += m_button('add_queue_btn', '다운로드', [{'key': 'idx', 'value': i}]);
+                str += '</div>';
+                str += '</div>';
+                str += '</div>';
            }
+            str += '</div>';
            document.getElementById("episode_list").innerHTML = str;
            $('input[id^="checkbox_"]').bootstrapToggle()
        }
@@ -466,6 +465,114 @@
            border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
        }

+        /* 에피소드 목록 컨테이너 */
+        .episode-list-container {
+            margin-top: 20px;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 10px;
+        }
+        
+        /* 에피소드 카드 */
+        .episode-card {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 12px;
+            background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%);
+            border-radius: 8px;
+            border: 1px solid rgba(148, 163, 184, 0.12);
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+        
+        .episode-card:hover {
+            background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
+            border-color: rgba(96, 165, 250, 0.5);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(96, 165, 250, 0.2);
+        }
+        
+        /* 에피소드 썸네일 */
+        .episode-thumb {
+            position: relative;
+            width: 56px;
+            min-width: 56px;
+            height: 42px;
+            border-radius: 5px;
+            overflow: hidden;
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(30, 41, 59, 0.5) 100%);
+            flex-shrink: 0;
+        }
+        
+        .episode-thumb img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        
+        /* 에피소드 번호 배지 */
+        .episode-num {
+            position: absolute;
+            bottom: 2px;
+            left: 2px;
+            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            color: white;
+            font-size: 9px;
+            font-weight: 700;
+            padding: 1px 5px;
+            border-radius: 3px;
+        }
+        
+        /* 에피소드 정보 */
+        .episode-info {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            min-width: 0;
+        }
+        
+        .episode-title {
+            color: #e2e8f0;
+            font-weight: 500;
+            font-size: 13px;
+            line-height: 1.3;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .episode-date {
+            color: #64748b;
+            font-size: 11px;
+        }
+        
+        /* 에피소드 액션 버튼 */
+        .episode-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 4px;
+        }
+        
+        .episode-actions .btn {
+            font-size: 11px;
+            padding: 3px 10px;
+            border-radius: 4px;
+        }
+        
+        .episode-actions .toggle {
+            transform: scale(0.85);
+        }
+        
+        /* 반응형 */
+        @media (max-width: 768px) {
+            .episode-list-container {
+                grid-template-columns: 1fr;
+            }
+        }
+
        #airing_list {
            display: none;
        }