youtube-dl/static/youtube-dl_list.js

'use strict';

(() => {
  const post_ajax = (url, data) => {
    const loading = document.getElementById('loading');
    if (loading) {
      loading.style.display = 'block';
    }
    return fetch(`/${package_name}/ajax${url}`, {
      method: 'POST',
      cache: 'no-cache',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      },
      body: new URLSearchParams(data),
    })
      .then((response) => response.json())
      .then((ret) => {
        if (ret.msg) {
          notify(ret.msg, ret.ret);
        }
        return ret;
      })
      .catch(() => {
        notify('요청 실패', 'danger');
      })
      .finally(() => {
        if (loading) {
          loading.style.display = 'none';
        }
      });
  };

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

  const get_item = (data) => {
    let str = `<td class="text-center font-weight-bold text-muted">${data.index + 1}</td>`;
    str += `<td class="text-center"><span class="badge badge-light border" style="font-size:11px;">${data.plugin}</span></td>`;
    str += `<td class="text-muted" style="font-size:12px;">${data.start_time}</td>`;
    str += `<td class="text-center"><span class="badge badge-info" style="font-size:11px; opacity:0.8;">${data.extractor}</span></td>`;
    str += `<td class="font-weight-bold">${data.title}</td>`;
    
    // Status color mapping
    let status_class = 'badge-secondary';
    if (data.status_str === 'COMPLETED') status_class = 'badge-success';
    else if (data.status_str === 'DOWNLOADING') status_class = 'badge-primary';
    else if (data.status_str === 'ERROR') status_class = 'badge-danger';
    
    str += `<td class="text-center"><span class="badge ${status_class}" style="padding: 5px 10px;">${data.status_ko}</span></td>`;
    
    let visi = 'hidden';
    if (parseInt(data.percent) > 0 && data.status_str !== 'STOP') {
      visi = 'visible';
    }
    str += `<td>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" 
                     style="visibility: ${visi}; width: ${data.percent}%" 
                     aria-valuenow="${data.percent}" aria-valuemin="0" aria-valuemax="100">
                </div>
              </div>
              <div class="text-right text-muted" style="font-size: 10px; margin-top: 2px; visibility: ${visi}; font-weight: 600;">${data.percent}%</div>
            </td>`;
    str += `<td class="text-center text-muted">${data.download_time}</td>`;
    str += '<td class="tableRowHoverOff text-center">';
    if (
      data.status_str === 'START' ||
      data.status_str === 'DOWNLOADING' ||
      data.status_str === 'FINISHED'
    ) {
      str += `<button class="btn btn-outline-danger btn-sm youtubeDl-stop" data-index="${data.index}"><i class="fa fa-stop-circle mr-1"></i>중지</button>`;
    }
    str += '</td>';
    return str;
  };

  const info_html = (left, right, option) => {
    if (!right) return '';
    let str = '<div class="row align-items-center py-2 border-bottom mx-0">';
    const link = left === 'URL' || left === '업로더';
    str += '<div class="col-sm-3 text-muted font-weight-bold" style="font-size: 13px;">';
    str += `${left}`;
    str += '</div>';
    str += '<div class="col-sm-9">';
    str += '<div class="info-value">';
    if (link) {
      str += `<a href="${option}" target="_blank" class="text-primary font-weight-bold">`;
    }
    str += right;
    if (link) {
      str += '</a>';
    }
    str += '</div></div></div>';
    return str;
  };

  const get_detail = (data) => {
    let str = '<div class="details-container p-3 rounded shadow-inner" style="background: #1e293b; border: 1px solid #334155;">';
    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 += '<div class="mt-3 p-2 rounded border" style="background: #0f172a; border-color: #334155 !important;">';
      str += '<div class="font-weight-bold text-info mb-2" style="font-size: 12px;"><i class="fa fa-info-circle mr-1"></i>실시간 다운로드 정보</div>';
      str += info_html('파일명', data.filename);
      str += info_html(
        '현재 진행량',
        `<span class="text-light font-weight-bold">${data.percent}%</span> <small class="text-muted">(${data.downloaded_bytes_str} / ${data.total_bytes_str})</small>`
      );
      str += info_html('남은 시간', `<span class="text-info">${data.eta}초</span>`);
      str += info_html('다운 속도', `<span class="text-success font-weight-bold">${data.speed_str}</span>`);
      str += '</div>';
    }
    str += '</div>';
    return str;
  };

  const 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" style="background-color: #0f172a;">`;
    str += '<td colspan="9" class="p-0 border-0">';
    str += `<div id="detail_${data.index}" class="p-4" style="background: #111827;">`;
    str += get_detail(data);
    str += '</div>';
    str += '</td>';
    str += '</tr>';
    return str;
  };

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

  // 소켓
  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);
  });

  const reload_list = async () => {
    const { data } = await post_ajax('/basic/list');
    list_tbody.innerHTML = data.map((item) => make_item(item)).join('');
  };

  // 전체 중지
  all_stop_btn.addEventListener('click', (event) => {
    event.preventDefault();
    post_ajax('/basic/all_stop').then(reload_list);
  });

  // 중지
  list_tbody.addEventListener('click', (event) => {
    event.preventDefault();
    const target = event.target;
    if (!target.classList.contains('youtubeDl-stop')) {
      return;
    }
    post_ajax('/basic/stop', {
      index: target.dataset.index,
    }).then(reload_list);
  });

  // 목록 불러오기
  reload_list();
})();