자바스크립트 리펙토링

main.py

@@ -137,12 +137,12 @@ class LogicMain(LogicModuleBase):
                     preferredcodec=preferredcodec,
                     preferredquality=preferredquality,
                     proxy=ModelSetting.get("proxy"),
-                    ffmpeg_path=ModelSetting.get("ffmpeg_path")
-                    if req.form["ffmpeg_path"] != "ffmpeg"
-                    else None,
+                    ffmpeg_path=ModelSetting.get("ffmpeg_path"),
                 )
                 youtube_dl.start()
                 LogicMain.socketio_emit("add", youtube_dl)
+                ret["ret"] = "info"
+                ret["msg"] = "분석중..."
 
             elif sub == "thumbnail":
                 youtube_dl = LogicMain.thumbnail(
@@ -153,12 +153,12 @@ class LogicMain(LogicModuleBase):
                     save_path=ModelSetting.get("save_path"),
                     all_thumbnails=req.form["all_thumbnails"],
                     proxy=ModelSetting.get("proxy"),
-                    ffmpeg_path=ModelSetting.get("ffmpeg_path")
-                    if req.form["ffmpeg_path"] != "ffmpeg"
-                    else None,
+                    ffmpeg_path=ModelSetting.get("ffmpeg_path"),
                 )
                 youtube_dl.start()
                 LogicMain.socketio_emit("add", youtube_dl)
+                ret["ret"] = "info"
+                ret["msg"] = "분석중..."
 
             elif sub == "sub":
                 youtube_dl = LogicMain.sub(
@@ -171,12 +171,12 @@ class LogicMain(LogicModuleBase):
                     sub_lang=req.form["sub_lang"],
                     auto_sub=req.form["auto_sub"],
                     proxy=ModelSetting.get("proxy"),
-                    ffmpeg_path=ModelSetting.get("ffmpeg_path")
-                    if req.form["ffmpeg_path"] != "ffmpeg"
-                    else None,
+                    ffmpeg_path=ModelSetting.get("ffmpeg_path"),
                 )
                 youtube_dl.start()
                 LogicMain.socketio_emit("add", youtube_dl)
+                ret["ret"] = "info"
+                ret["msg"] = "분석중..."
 
             elif sub == "list":
                 ret["data"] = []

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');
+(() => {
+  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';
+        }
+      });
+  };
 
-// 프리셋 변경
-preset.addEventListener('change', () => {
+  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', () => {
+  });
+  format.addEventListener('input', () => {
     preset.value = '_custom';
-});
+  });
 
-// 후처리 변경
-postprocessor.addEventListener('change', () => {
+  // 후처리 변경
+  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) => {
+  // 다운로드
+  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');
-    })
-    .catch(() => {
-      notify('다운로드 요청 실패', 'danger');
+    post_ajax('/download', get_formdata('#download'));
   });
-});
+})();

static/youtube-dl_list.js

@@ -1,88 +1,40 @@
 '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;
-  });
-
-// 전체 중지
-all_stop_btn.addEventListener('click', (event) => {
-  event.preventDefault();
-  fetch(`/${package_name}/ajax/all_stop`, {
+    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(() => {
-      location.reload();
-    });
-});
-
-// 중지
-list_tbody.addEventListener('click', (event) => {
-  event.preventDefault();
-  const target = event.target;
-  if (!target.classList.contains('youtubeDl-stop')) {
-    return;
+      .then((ret) => {
+        if (ret.msg) {
+          notify(ret.msg, ret.ret);
         }
-  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,
-    }),
+        return ret;
       })
-    .then((response) => response.json())
-    .then(() => {
-      location.reload();
+      .catch(() => {
+        notify('요청 실패', 'danger');
+      })
+      .finally(() => {
+        if (loading) {
+          loading.style.display = 'none';
+        }
       });
-});
+  };
 
-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;
-}
+  const all_stop_btn = document.getElementById('all_stop_btn');
+  const list_tbody = document.getElementById('list_tbody');
 
-function get_item(data) {
+  const get_item = (data) => {
     let str = `<td>${data.index + 1}</td>`;
     str += `<td>${data.plugin}</td>`;
     str += `<td>${data.start_time}</td>`;
@@ -105,28 +57,9 @@ function get_item(data) {
     }
     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) {
+  const info_html = (left, right, option) => {
     let str = '<div class="row">';
     const link = left === 'URL' || left === '업로더';
     str += '<div class="col-sm-2">';
@@ -144,9 +77,79 @@ function info_html(left, right, option) {
     }
     str += '</span></div></div></div>';
     return str;
-}
+  };
 
-function status_html(data) {
+  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);
-}
+    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('/list');
+    list_tbody.innerHTML = data.map((item) => make_item(item)).join('');
+  };
+
+  // 전체 중지
+  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(reload_list);
+  });
+
+  // 목록 불러오기
+  reload_list();
+})();

static/youtube-dl_setting.js

@@ -1,54 +1,73 @@
 '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) => {
+  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');
+
+  // FFmpeg 버전확인
+  ffmpeg_version_btn.addEventListener('click', (event) => {
     event.preventDefault();
     let ffmpeg = ffmpeg_path.value;
     if (ffmpeg.length === 0) {
       ffmpeg = 'ffmpeg';
     }
 
-  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({
+    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) => {
+  // 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) => {
+  // 임시 폴더 경로 선택
+  temp_path_btn.addEventListener('click', (event) => {
     event.preventDefault();
     m_select_local_file_modal(
       '저장 경로 선택',
@@ -58,10 +77,10 @@ temp_path_btn.addEventListener('click', (event) => {
         temp_path.value = result;
       }
     );
-});
+  });
 
-// 저장 폴더 경로 선택
-save_path_btn.addEventListener('click', (event) => {
+  // 저장 폴더 경로 선택
+  save_path_btn.addEventListener('click', (event) => {
     event.preventDefault();
     m_select_local_file_modal(
       '저장 경로 선택',
@@ -71,4 +90,5 @@ save_path_btn.addEventListener('click', (event) => {
         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');
+(() => {
+  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';
+        }
+      });
+  };
 
-// 모든 자막 다운로드
-$('#all_subs').change(() => {
+  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) => {
+  // 다운로드
+  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');
-    })
-    .catch(() => {
-      notify('다운로드 요청 실패', 'danger');
+    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');
+(() => {
+  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';
+        }
+      });
+  };
 
-// 다운로드
-download_btn.addEventListener('click', (event) => {
+  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');
-    })
-    .catch(() => {
-      notify('다운로드 요청 실패', 'danger');
+    post_ajax('/thumbnail', get_formdata('#download'));
   });
-});
+})();