자바스크립트 리펙토링

main.py

@@ -137,12 +137,12 @@ class LogicMain(LogicModuleBase):
                     preferredcodec=preferredcodec,
                     preferredquality=preferredquality,
                     proxy=ModelSetting.get("proxy"),
-                    ffmpeg_path=ModelSetting.get("ffmpeg_path")
+                    ffmpeg_path=ModelSetting.get("ffmpeg_path"),
-                    if req.form["ffmpeg_path"] != "ffmpeg"
-                    else None,
                 )
                 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")
+                    ffmpeg_path=ModelSetting.get("ffmpeg_path"),
-                    if req.form["ffmpeg_path"] != "ffmpeg"
-                    else None,
                 )
                 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")
+                    ffmpeg_path=ModelSetting.get("ffmpeg_path"),
-                    if req.form["ffmpeg_path"] != "ffmpeg"
-                    else None,
                 )
                 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,5 +1,36 @@
 '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 url = document.getElementById('url');
   const preset = document.getElementById('preset');
   const format = document.getElementById('format');
@@ -33,19 +64,6 @@ download_btn.addEventListener('click', (event) => {
       return;
     }
 
-  fetch(`/${package_name}/ajax/download`, {
+    post_ajax('/download', get_formdata('#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');
-    });
   });
+})();

static/youtube-dl_list.js

@@ -1,88 +1,40 @@
 '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) => {
-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>`;
@@ -105,28 +57,9 @@ function get_item(data) {
     }
     str += '</td>';
     return str;
-}
+  };
 
-function get_detail(data) {
+  const info_html = (left, right, option) => {
-  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">';
@@ -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) => {
-  document.getElementById(`item_${data.index}`).innerHTML = get_item(data);
+    let str = info_html('URL', data.url, data.url);
-  document.getElementById(`detail_${data.index}`).innerHTML = get_detail(data);
+    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);
+  });
+
+  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,5 +1,36 @@
 '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 ffmpeg_path = document.getElementById('ffmpeg_path');
   const ffmpeg_version_btn = document.getElementById('ffmpeg_version_btn');
   const ffmpeg_path_btn = document.getElementById('ffmpeg_path_btn');
@@ -18,24 +49,12 @@ ffmpeg_version_btn.addEventListener('click', (event) => {
       ffmpeg = 'ffmpeg';
     }
 
-  fetch(`/${package_name}/ajax/ffmpeg_version`, {
+    post_ajax('/ffmpeg_version', {
-    method: 'POST',
-    cache: 'no-cache',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-    },
-    body: new URLSearchParams({
       path: ffmpeg,
-    }),
+    }).then(({ data }) => {
-  })
-    .then((response) => response.json())
-    .then((data) => {
       modal_title.innerHTML = `${ffmpeg} -version`;
       modal_body.innerHTML = data;
       $('#large_modal').modal();
-    })
-    .catch(() => {
-      notify('버전확인 실패', 'danger');
     });
   });
 
@@ -72,3 +91,4 @@ save_path_btn.addEventListener('click', (event) => {
       }
     );
   });
+})();

static/youtube-dl_sub.js

@@ -1,5 +1,36 @@
 '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 url = document.getElementById('url');
   const download_btn = document.getElementById('download_btn');
 
@@ -16,19 +47,6 @@ download_btn.addEventListener('click', (event) => {
       return;
     }
 
-  fetch(`/${package_name}/ajax/sub`, {
+    post_ajax('/sub', get_formdata('#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');
-    });
   });
+})();

static/youtube-dl_thumbnail.js

@@ -1,5 +1,36 @@
 '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 url = document.getElementById('url');
   const download_btn = document.getElementById('download_btn');
 
@@ -11,19 +42,6 @@ download_btn.addEventListener('click', (event) => {
       return;
     }
 
-  fetch(`/${package_name}/ajax/thumbnail`, {
+    post_ajax('/thumbnail', get_formdata('#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');
-    });
   });
+})();