자바스크립트 리펙토링

static/youtube-dl_download.js

@@ -1,51 +1,69 @@
 'use strict';
 
-const url = document.getElementById('url');
-const preset = document.getElementById('preset');
-const format = document.getElementById('format');
-const postprocessor = document.getElementById('postprocessor');
-const download_btn = document.getElementById('download_btn');
-
-// 프리셋 변경
-preset.addEventListener('change', () => {
-  if (preset.value !== '_custom') {
-    format.value = preset.value;
-  }
-});
-format.addEventListener('input', () => {
-  preset.value = '_custom';
-});
-
-// 후처리 변경
-postprocessor.addEventListener('change', () => {
-  const select = postprocessor.selectedOptions[0];
-  if (select.parentElement.label === '오디오 추출') {
-    preset.value = 'bestaudio/best';
-    format.value = preset.value;
-  }
-});
-
-// 다운로드
-download_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  if (!url.value.startsWith('http')) {
-    notify('URL을 입력하세요.', 'warning');
-    return;
-  }
-
-  fetch(`/${package_name}/ajax/download`, {
-    method: 'POST',
-    cache: 'no-cache',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-    },
-    body: get_formdata('#download'),
-  })
-    .then((response) => response.json())
-    .then(() => {
-      notify('분석중..', 'info');
+(() => {
+  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),
     })
-    .catch(() => {
-      notify('다운로드 요청 실패', 'danger');
-    });
-});
+      .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 url = document.getElementById('url');
+  const preset = document.getElementById('preset');
+  const format = document.getElementById('format');
+  const postprocessor = document.getElementById('postprocessor');
+  const download_btn = document.getElementById('download_btn');
+
+  // 프리셋 변경
+  preset.addEventListener('change', () => {
+    if (preset.value !== '_custom') {
+      format.value = preset.value;
+    }
+  });
+  format.addEventListener('input', () => {
+    preset.value = '_custom';
+  });
+
+  // 후처리 변경
+  postprocessor.addEventListener('change', () => {
+    const select = postprocessor.selectedOptions[0];
+    if (select.parentElement.label === '오디오 추출') {
+      preset.value = 'bestaudio/best';
+      format.value = preset.value;
+    }
+  });
+
+  // 다운로드
+  download_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    if (!url.value.startsWith('http')) {
+      notify('URL을 입력하세요.', 'warning');
+      return;
+    }
+
+    post_ajax('/download', get_formdata('#download'));
+  });
+})();

static/youtube-dl_list.js

@@ -1,152 +1,155 @@
 '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);
+(() => {
+  const post_ajax = (url, data) => {
+    const loading = document.getElementById('loading');
+    if (loading) {
+      loading.style.display = 'block';
     }
-    list_tbody.innerHTML = str;
+    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>${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;
+  };
+
+  const 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;
+  };
+
+  const 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;
+  };
+
+  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">`;
+    str += '<td colspan="9">';
+    str += `<div id="detail_${data.index}">`;
+    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);
   });
 
-// 전체 중지
-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();
-    });
-});
+  const reload_list = async () => {
+    const { data } = await post_ajax('/list');
+    list_tbody.innerHTML = data.map((item) => make_item(item)).join('');
+  };
 
-// 중지
-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({
+  // 전체 중지
+  all_stop_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    post_ajax('/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('/stop', {
       index: target.dataset.index,
-    }),
-  })
-    .then((response) => response.json())
-    .then(() => {
-      location.reload();
-    });
-});
+    }).then(reload_list);
+  });
 
-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);
-}
+  // 목록 불러오기
+  reload_list();
+})();

static/youtube-dl_setting.js

@@ -1,74 +1,94 @@
 'use strict';
 
-const ffmpeg_path = document.getElementById('ffmpeg_path');
-const ffmpeg_version_btn = document.getElementById('ffmpeg_version_btn');
-const ffmpeg_path_btn = document.getElementById('ffmpeg_path_btn');
-const temp_path = document.getElementById('temp_path');
-const temp_path_btn = document.getElementById('temp_path_btn');
-const save_path = document.getElementById('save_path');
-const save_path_btn = document.getElementById('save_path_btn');
-const modal_title = document.getElementById('modal_title');
-const modal_body = document.getElementById('modal_body');
+(() => {
+  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';
+        }
+      });
+  };
 
-// FFmpeg 버전확인
-ffmpeg_version_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  let ffmpeg = ffmpeg_path.value;
-  if (ffmpeg.length === 0) {
-    ffmpeg = 'ffmpeg';
-  }
+  const ffmpeg_path = document.getElementById('ffmpeg_path');
+  const ffmpeg_version_btn = document.getElementById('ffmpeg_version_btn');
+  const ffmpeg_path_btn = document.getElementById('ffmpeg_path_btn');
+  const temp_path = document.getElementById('temp_path');
+  const temp_path_btn = document.getElementById('temp_path_btn');
+  const save_path = document.getElementById('save_path');
+  const save_path_btn = document.getElementById('save_path_btn');
+  const modal_title = document.getElementById('modal_title');
+  const modal_body = document.getElementById('modal_body');
 
-  fetch(`/${package_name}/ajax/ffmpeg_version`, {
-    method: 'POST',
-    cache: 'no-cache',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-    },
-    body: new URLSearchParams({
+  // FFmpeg 버전확인
+  ffmpeg_version_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    let ffmpeg = ffmpeg_path.value;
+    if (ffmpeg.length === 0) {
+      ffmpeg = 'ffmpeg';
+    }
+
+    post_ajax('/ffmpeg_version', {
       path: ffmpeg,
-    }),
-  })
-    .then((response) => response.json())
-    .then((data) => {
+    }).then(({ data }) => {
       modal_title.innerHTML = `${ffmpeg} -version`;
       modal_body.innerHTML = data;
       $('#large_modal').modal();
-    })
-    .catch(() => {
-      notify('버전확인 실패', 'danger');
     });
-});
-
-// FFmpeg 파일 선택
-ffmpeg_path_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  m_select_local_file_modal('실행 파일 선택', '/', false, (result) => {
-    ffmpeg_path.value = result;
   });
-});
 
-// 임시 폴더 경로 선택
-temp_path_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  m_select_local_file_modal(
-    '저장 경로 선택',
-    temp_path.value,
-    true,
-    (result) => {
-      temp_path.value = result;
-    }
-  );
-});
+  // FFmpeg 파일 선택
+  ffmpeg_path_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    m_select_local_file_modal('실행 파일 선택', '/', false, (result) => {
+      ffmpeg_path.value = result;
+    });
+  });
 
-// 저장 폴더 경로 선택
-save_path_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  m_select_local_file_modal(
-    '저장 경로 선택',
-    save_path.value,
-    true,
-    (result) => {
-      save_path.value = result;
-    }
-  );
-});
+  // 임시 폴더 경로 선택
+  temp_path_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    m_select_local_file_modal(
+      '저장 경로 선택',
+      temp_path.value,
+      true,
+      (result) => {
+        temp_path.value = result;
+      }
+    );
+  });
+
+  // 저장 폴더 경로 선택
+  save_path_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    m_select_local_file_modal(
+      '저장 경로 선택',
+      save_path.value,
+      true,
+      (result) => {
+        save_path.value = result;
+      }
+    );
+  });
+})();

static/youtube-dl_sub.js

@@ -1,34 +1,52 @@
 'use strict';
 
-const url = document.getElementById('url');
-const download_btn = document.getElementById('download_btn');
-
-// 모든 자막 다운로드
-$('#all_subs').change(() => {
-  use_collapse('all_subs', true);
-});
-
-// 다운로드
-download_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  if (!url.value.startsWith('http')) {
-    notify('URL을 입력하세요.', 'warning');
-    return;
-  }
-
-  fetch(`/${package_name}/ajax/sub`, {
-    method: 'POST',
-    cache: 'no-cache',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-    },
-    body: get_formdata('#download'),
-  })
-    .then((response) => response.json())
-    .then(() => {
-      notify('분석중..', 'info');
+(() => {
+  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),
     })
-    .catch(() => {
-      notify('다운로드 요청 실패', 'danger');
-    });
-});
+      .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 url = document.getElementById('url');
+  const download_btn = document.getElementById('download_btn');
+
+  // 모든 자막 다운로드
+  $('#all_subs').change(() => {
+    use_collapse('all_subs', true);
+  });
+
+  // 다운로드
+  download_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    if (!url.value.startsWith('http')) {
+      notify('URL을 입력하세요.', 'warning');
+      return;
+    }
+
+    post_ajax('/sub', get_formdata('#download'));
+  });
+})();

static/youtube-dl_thumbnail.js

@@ -1,29 +1,47 @@
 'use strict';
 
-const url = document.getElementById('url');
-const download_btn = document.getElementById('download_btn');
-
-// 다운로드
-download_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  if (!url.value.startsWith('http')) {
-    notify('URL을 입력하세요.', 'warning');
-    return;
-  }
-
-  fetch(`/${package_name}/ajax/thumbnail`, {
-    method: 'POST',
-    cache: 'no-cache',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-    },
-    body: get_formdata('#download'),
-  })
-    .then((response) => response.json())
-    .then(() => {
-      notify('분석중..', 'info');
+(() => {
+  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),
     })
-    .catch(() => {
-      notify('다운로드 요청 실패', 'danger');
-    });
-});
+      .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 url = document.getElementById('url');
+  const download_btn = document.getElementById('download_btn');
+
+  // 다운로드
+  download_btn.addEventListener('click', (event) => {
+    event.preventDefault();
+    if (!url.value.startsWith('http')) {
+      notify('URL을 입력하세요.', 'warning');
+      return;
+    }
+
+    post_ajax('/thumbnail', get_formdata('#download'));
+  });
+})();