diff --git a/scss/components/errors-center.scss b/scss/components/errors-center.scss
new file mode 100644
index 0000000..908aae6
--- /dev/null
+++ b/scss/components/errors-center.scss
@@ -0,0 +1,10 @@
+.component.errors-center {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ max-width: 500px;
+ padding: 0 20px;
+ box-sizing: border-box;
+ left: calc(50% - 250px);
+ z-index: 100;
+}
\ No newline at end of file
diff --git a/scss/index.scss b/scss/index.scss
index 8595abf..dabfc91 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -1,2 +1,3 @@
@import "main.scss";
-@import "components/media-list.scss";
\ No newline at end of file
+@import "components/media-list.scss";
+@import "components/errors-center.scss";
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index 78c5b6b..18094ca 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,2 +1,2 @@
-a{text-decoration:none}.loading-spinner-container{width:100%;margin:50px auto;text-align:center}.loader{width:48px;height:48px;border:5px solid #777;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.transcodate-form-container{margin-top:20px;display:flex;flex-wrap:wrap;flex-direction:row;gap:10px}.transcodate-form-container>.form-control{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:flex-start;gap:10px;align-items:center}.transcodate-form-container>.form-control>strong{white-space:nowrap;display:inline-block;width:100px}.crf-range{margin-left:5px}#progress{margin-top:20px;margin-bottom:0}.circle-bg{stroke-dasharray:100,100}.circle-progress{transition:stroke-dasharray .3s ease}.list-group-item.task{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px}.list-group-item.task .file{display:flex;flex-direction:row;gap:8px;align-items:center}.sm-spinner{width:18px;height:18px;border-width:3px}.btn .border-spinner{margin-right:2px;position:relative;top:1px}.btn.inprogress{display:inline-flex;gap:6px;align-items:center}.component.media-list .do-rescan-media-lib .spinner-border{display:none}.component.media-list .do-rescan-media-lib.inprogress .spinner-border{display:block}
+a{text-decoration:none}.loading-spinner-container{width:100%;margin:50px auto;text-align:center}.loader{width:48px;height:48px;border:5px solid #777;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.transcodate-form-container{margin-top:20px;display:flex;flex-wrap:wrap;flex-direction:row;gap:10px}.transcodate-form-container>.form-control{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:flex-start;gap:10px;align-items:center}.transcodate-form-container>.form-control>strong{white-space:nowrap;display:inline-block;width:100px}.crf-range{margin-left:5px}#progress{margin-top:20px;margin-bottom:0}.circle-bg{stroke-dasharray:100,100}.circle-progress{transition:stroke-dasharray .3s ease}.list-group-item.task{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px}.list-group-item.task .file{display:flex;flex-direction:row;gap:8px;align-items:center}.sm-spinner{width:18px;height:18px;border-width:3px}.btn .border-spinner{margin-right:2px;position:relative;top:1px}.btn.inprogress{display:inline-flex;gap:6px;align-items:center}.component.media-list .do-rescan-media-lib .spinner-border{display:none}.component.media-list .do-rescan-media-lib.inprogress .spinner-border{display:block}.component.errors-center{position:fixed;bottom:0;width:100%;max-width:500px;padding:0 20px;box-sizing:border-box;left:calc(50% - 250px);z-index:100}
/*# sourceMappingURL=main.css.map */
diff --git a/static/css/main.css.map b/static/css/main.css.map
index 0e36f16..30443d9 100644
--- a/static/css/main.css.map
+++ b/static/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["main.scss","components/media-list.scss"],"names":[],"mappings":"AAAA,EACE,gBAAA,KAKF,2BACC,MAAA,KACA,OAAA,KAAA,KACA,WAAA,OAGD,QACE,MAAA,KACA,OAAA,KACA,OAAA,IAAA,MAAA,KACA,oBAAA,YACA,cAAA,IACA,QAAA,aACA,WAAA,WACA,UAAA,SAAA,GAAA,OAAA,SAGF,oBACE,GACE,UAAA,UAGF,KACE,UAAA,gBAMJ,4BACC,WAAA,KACA,QAAA,KACA,UAAA,KACC,eAAA,IACA,IAAA,KAGF,0CACC,QAAA,KACA,UAAA,OACC,eAAA,IACA,gBAAA,WACA,IAAA,KACA,YAAA,OAGF,iDACC,YAAA,OACA,QAAA,aACC,MAAA,MAGF,WACE,YAAA,IAGF,UACE,WAAA,KACA,cAAA,EAOF,WACE,iBAAA,GAAA,CAAA,IAGF,iBACE,WAAA,iBAAA,IAAA,KAGF,sBACE,QAAA,KACA,eAAA,IACA,gBAAA,cACA,YAAA,OACA,IAAA,KAGF,4BACE,QAAA,KACA,eAAA,IACA,IAAA,IACA,YAAA,OAGF,YACE,MAAA,KACA,OAAA,KACA,aAAA,IAIA,qBACE,aAAA,IACA,SAAA,SACA,IAAA,IAGF,gBACE,QAAA,YACA,IAAA,IACA,YAAA,OC5GF,2DACC,QAAA,KAIA,sEACC,QAAA","file":"main.css","sourcesContent":["a {\n text-decoration: none;\n}\n\n/* LOADING SPINNER */\n\n.loading-spinner-container {\n\twidth: 100%;\n\tmargin: 50px auto;\n\ttext-align: center;\n}\n\n.loader {\n width: 48px;\n height: 48px;\n border: 5px solid #777;\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: rotation 1s linear infinite;\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n} \n\n/* END LOADING SPINNER */\n\n.transcodate-form-container {\n\tmargin-top: 20px;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n flex-direction: row;\n gap: 10px;\n}\n\n.transcodate-form-container > .form-control {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n flex-direction: row;\n justify-content: flex-start;\n gap: 10px;\n align-items: center;\n}\n\n.transcodate-form-container > .form-control > strong {\n\twhite-space: nowrap;\n\tdisplay: inline-block;\n width: 100px;\n}\n\n.crf-range {\n margin-left: 5px;\n}\n\n#progress {\n margin-top: 20px;\n margin-bottom: 0;\n}\n\n.progress-circle {\n/* transform: rotate(-90deg);*/\n}\n\n.circle-bg {\n stroke-dasharray: 100, 100;\n}\n\n.circle-progress {\n transition: stroke-dasharray 0.3s ease;\n}\n\n.list-group-item.task {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n\n.list-group-item.task .file {\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n}\n\n.sm-spinner {\n width: 18px;\n height: 18px;\n border-width: 3px;\n} \n\n.btn {\n .border-spinner {\n margin-right: 2px;\n position: relative;\n top: 1px;\n }\n\n &.inprogress {\n display: inline-flex;\n gap: 6px;\n align-items: center;\n }\n}",".component.media-list {\n\t.do-rescan-media-lib {\n\t\t.spinner-border {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&.inprogress {\n\t\t\t.spinner-border {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\t}\n}"]}
\ No newline at end of file
+{"version":3,"sources":["main.scss","components/media-list.scss","components/errors-center.scss"],"names":[],"mappings":"AAAA,EACE,gBAAA,KAKF,2BACC,MAAA,KACA,OAAA,KAAA,KACA,WAAA,OAGD,QACE,MAAA,KACA,OAAA,KACA,OAAA,IAAA,MAAA,KACA,oBAAA,YACA,cAAA,IACA,QAAA,aACA,WAAA,WACA,UAAA,SAAA,GAAA,OAAA,SAGF,oBACE,GACE,UAAA,UAGF,KACE,UAAA,gBAMJ,4BACC,WAAA,KACA,QAAA,KACA,UAAA,KACC,eAAA,IACA,IAAA,KAGF,0CACC,QAAA,KACA,UAAA,OACC,eAAA,IACA,gBAAA,WACA,IAAA,KACA,YAAA,OAGF,iDACC,YAAA,OACA,QAAA,aACC,MAAA,MAGF,WACE,YAAA,IAGF,UACE,WAAA,KACA,cAAA,EAOF,WACE,iBAAA,GAAA,CAAA,IAGF,iBACE,WAAA,iBAAA,IAAA,KAGF,sBACE,QAAA,KACA,eAAA,IACA,gBAAA,cACA,YAAA,OACA,IAAA,KAGF,4BACE,QAAA,KACA,eAAA,IACA,IAAA,IACA,YAAA,OAGF,YACE,MAAA,KACA,OAAA,KACA,aAAA,IAIA,qBACE,aAAA,IACA,SAAA,SACA,IAAA,IAGF,gBACE,QAAA,YACA,IAAA,IACA,YAAA,OC5GF,2DACC,QAAA,KAIA,sEACC,QAAA,MCRJ,yBACC,SAAA,MACA,OAAA,EACA,MAAA,KACA,UAAA,MACA,QAAA,EAAA,KACA,WAAA,WACA,KAAA,kBACA,QAAA","file":"main.css","sourcesContent":["a {\n text-decoration: none;\n}\n\n/* LOADING SPINNER */\n\n.loading-spinner-container {\n\twidth: 100%;\n\tmargin: 50px auto;\n\ttext-align: center;\n}\n\n.loader {\n width: 48px;\n height: 48px;\n border: 5px solid #777;\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: rotation 1s linear infinite;\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n} \n\n/* END LOADING SPINNER */\n\n.transcodate-form-container {\n\tmargin-top: 20px;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n flex-direction: row;\n gap: 10px;\n}\n\n.transcodate-form-container > .form-control {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n flex-direction: row;\n justify-content: flex-start;\n gap: 10px;\n align-items: center;\n}\n\n.transcodate-form-container > .form-control > strong {\n\twhite-space: nowrap;\n\tdisplay: inline-block;\n width: 100px;\n}\n\n.crf-range {\n margin-left: 5px;\n}\n\n#progress {\n margin-top: 20px;\n margin-bottom: 0;\n}\n\n.progress-circle {\n/* transform: rotate(-90deg);*/\n}\n\n.circle-bg {\n stroke-dasharray: 100, 100;\n}\n\n.circle-progress {\n transition: stroke-dasharray 0.3s ease;\n}\n\n.list-group-item.task {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n\n.list-group-item.task .file {\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n}\n\n.sm-spinner {\n width: 18px;\n height: 18px;\n border-width: 3px;\n} \n\n.btn {\n .border-spinner {\n margin-right: 2px;\n position: relative;\n top: 1px;\n }\n\n &.inprogress {\n display: inline-flex;\n gap: 6px;\n align-items: center;\n }\n}",".component.media-list {\n\t.do-rescan-media-lib {\n\t\t.spinner-border {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&.inprogress {\n\t\t\t.spinner-border {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\t}\n}",".component.errors-center {\n\tposition: fixed;\n\tbottom: 0;\n\twidth: 100%;\n\tmax-width: 500px;\n\tpadding: 0 20px;\n\tbox-sizing: border-box;\n\tleft: calc(50% - 250px);\n\tz-index: 100;\n}"]}
\ No newline at end of file
diff --git a/static/js/components/errors-center.js b/static/js/components/errors-center.js
new file mode 100644
index 0000000..5455859
--- /dev/null
+++ b/static/js/components/errors-center.js
@@ -0,0 +1,50 @@
+function makeErrMsgViewHTML(msg) {
+ return `
+
+ Error: ${ msg }
+
+
+ `;
+}
+
+function initErrMsgView(view, drawTimeout, hideTimeout) {
+ const tempContainer = document.createElement('div');
+ tempContainer.innerHTML = view;
+
+ view = tempContainer.querySelector(".error-item");
+
+ setTimeout(() => view.classList.add("show"), drawTimeout);
+
+ if(typeof hideTimeout != "undefined") {
+ setTimeout(
+ () => {
+ view.classList.remove("show");
+ setTimeout(() => $(view).remove(), 250);
+ },
+ hideTimeout + drawTimeout
+ );
+ }
+
+ view.querySelector(".btn-close").addEventListener("click", e => {
+ view.classList.remove("show");
+ });
+
+ return view;
+}
+
+function createErrMsg(msg) {
+ let view = makeErrMsgViewHTML(msg);
+ view = initErrMsgView(view, 100);
+
+ return view;
+}
+
+function pushErrMsg(msg) {
+ const container = $(".component.errors-center");
+ const msgView = createErrMsg(msg);
+ container.append(msgView);
+}
+
+$(document).ready(function() {
+
+});
\ No newline at end of file
diff --git a/static/js/components/global-transcoding-tasks.js b/static/js/components/global-transcoding-tasks.js
index 7458d48..f8419b1 100644
--- a/static/js/components/global-transcoding-tasks.js
+++ b/static/js/components/global-transcoding-tasks.js
@@ -42,7 +42,7 @@
// delete globalTasks[resp.task_id];
}
} else {
- // TODO: show error
+ pushErrMsg("Failed to complete request to stop transcoding");
}
});
});
@@ -120,7 +120,8 @@
});
socket.on("error", data => {
- // show error
+ const cmd = data.task.command.join(" ");
+ pushErrMsg(`${ data.message }
${ cmd }`);
});
}
diff --git a/static/js/components/media-list.js b/static/js/components/media-list.js
index 778f1f7..6146fb3 100644
--- a/static/js/components/media-list.js
+++ b/static/js/components/media-list.js
@@ -29,6 +29,7 @@
},
error: function(xhr, status, error) {
LSpinnerHide();
+ pushErrMsg("Error loading media list");
console.error("Error loading media list:", error);
}
});
@@ -45,13 +46,10 @@
if(resp.status) {
document.getElementById("do-rescan-media-lib").setStateInprogress();
return;
- // $('#media-table').DataTable().destroy();
- // return loadMediaList();
}
console.error("Error of rescan media library");
- // TODO: make alert bar
- alert("Error of rescan media library");
+ pushErrMsg("Error of rescan media library");
});
});
}
diff --git a/static/js/components/single-transcoding.js b/static/js/components/single-transcoding.js
index 3f77ca4..f4390a1 100644
--- a/static/js/components/single-transcoding.js
+++ b/static/js/components/single-transcoding.js
@@ -114,7 +114,6 @@
}
data["crf"] = "" + Math.abs(data["crf"]);
- console.log(data);
const response = await fetch("/process-media", {
method: "POST",
@@ -127,7 +126,7 @@
} else {
const error = await response.json();
$(".transcodate-form-container .run-transcodate").show();
- alert(`Error: ${error.error}`);
+ pushErrMsg(`Error: ${error.error}`);
}
});
diff --git a/templates/components/errors-center.html b/templates/components/errors-center.html
new file mode 100644
index 0000000..4f60e0c
--- /dev/null
+++ b/templates/components/errors-center.html
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/templates/partials/head.html b/templates/partials/head.html
index 45cc01e..2ea94c5 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -31,3 +31,4 @@
{% include "components/global-transcoding-tasks.html" %}
+{% include "components/errors-center.html" %}