youtube-dl/static/youtube-dl_list.js

"use strict";

const all_stop_btn = document.getElementById('all_stop_btn');
const list_tbody = document.getElementById('list_tbody');

// 소켓
const socket = io.connect(`${location.origin}/${package_name}`);
socket.on('add', (data) => {
    list_tbody.innerHTML += make_item(data);
});
socket.on('status', (data) => {
    status_html(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;
});

// 전체 중지
all_stop_btn.addEventListener('click', (event) => {
    event.preventDefault();
    fetch(`/${package_name}/ajax/all_stop`, {
        method: 'POST',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    }).then(response => response.json()).then(() => {
        location.reload();
    });
});

// 중지
list_tbody.addEventListener('click', (event) => {
    event.preventDefault();
    const target = event.target;
    if (!target.classList.contains('youtubeDl-stop')) {
        return;
    }
    fetch(`/${package_name}/ajax/stop`, {
        method: 'POST',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        body: new URLSearchParams({
            index: target.dataset.index
        })
    }).then(response => response.json()).then(() => {
        location.reload();
    });
});

function make_item(data) {
    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 += '</tr>';
    str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff">`;
    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';
    }
    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 youtubeDl-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);
    }
    return str;
}

function info_html(left, right, option) {
    let str = '<div class="row">';
    const 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 info-padding">';
    if (link) {
        str += `<a href="${option}" target="_blank">`;
    }
    str += right;
    if (link) {
        str += '</a>';
    }
    str += '</span></div></div></div>';
    return str;
}

function status_html(data) {
    document.getElementById(`item_${data.index}`).innerHTML = get_item(data);
    document.getElementById(`detail_${data.index}`).innerHTML = get_detail(data);
}