diff --git a/public/assets/scripts/FileSelector.js b/public/assets/scripts/FileSelector.js
index b26bbb5..f41f9e2 100644
--- a/public/assets/scripts/FileSelector.js
+++ b/public/assets/scripts/FileSelector.js
@@ -2,6 +2,7 @@ export class FileSelector {
dropZones = [];
selectedFile = null;
onFileSelected = null;
+ onFileRemoved = null;
constructor(mimeType) {
this.mimeType = mimeType;
@@ -24,6 +25,12 @@ export class FileSelector {
if (this.onFileSelected) this.onFileSelected(file);
}
+ removeFile() {
+ this.selectedFile = null;
+
+ if (this.onFileRemoved) this.onFileRemoved();
+ }
+
addInput(elem) {
elem.oninput = () => {
setTimeout(() => this.selectFile(elem.files[0]), 200);
diff --git a/public/assets/scripts/UiManager.js b/public/assets/scripts/UiManager.js
index 7a19c88..c93dcc1 100644
--- a/public/assets/scripts/UiManager.js
+++ b/public/assets/scripts/UiManager.js
@@ -21,26 +21,26 @@ export class UiManager {
elem.style.opacity = "0";
elem.dataset.oldDisplay = getComputedStyle(elem).display;
- setTimeout(() => {
- elem.style.display = "none";
- }, this.TRANSITION_TIME);
+ setTimeout(() => elem.style.display = "none", this.TRANSITION_TIME);
}
}
showElements() {
- setTimeout(() => {
- for (const input of arguments) {
- const elem = input instanceof Element ? input : document.querySelector(input);
+ return new Promise(resolve => {
+ setTimeout(() => {
+ for (const input of arguments) {
+ const elem = input instanceof Element ? input : document.querySelector(input);
- elem.style.opacity = "0";
+ elem.style.opacity = "0";
- elem.style.display = elem.dataset.oldDisplay || "block";
- elem.dataset.oldDisplay = null;
+ elem.style.display = elem.dataset.oldDisplay || "block";
+ elem.dataset.oldDisplay = null;
- setTimeout(() => {
- elem.style.opacity = "1";
- }, 10);
- }
- }, this.TRANSITION_TIME);
+ setTimeout(() => elem.style.opacity = "1", 10);
+ }
+
+ resolve();
+ }, this.TRANSITION_TIME);
+ });
}
}
diff --git a/public/assets/scripts/main.js b/public/assets/scripts/main.js
index 3d6f375..bf5244c 100644
--- a/public/assets/scripts/main.js
+++ b/public/assets/scripts/main.js
@@ -18,9 +18,18 @@ fileSelector.onFileSelected = file => {
document.getElementById("uploaded-video").load();
ui.hideElements("#file-drop-area", "#file-input-spacing");
- ui.showElements("#uploaded-video", "#change-file");
+ ui.showElements("#uploaded-video", "#remove-file");
};
+fileSelector.onFileRemoved = async () => {
+ ui.hideElements("#uploaded-video", "#remove-file");
+ await ui.showElements("#file-drop-area", "#file-input-spacing");
+
+ document.getElementById("uploaded-video").src = "";
+}
+
+document.getElementById("remove-file").onclick = () => fileSelector.removeFile();
+
async function compress(filesize, filesizeUnit) {
document.getElementById("uploaded-video").pause();
@@ -97,9 +106,6 @@ document.getElementById("cancel").onclick = () => {
ui.showSection("file-picker");
};
-
-document.getElementById("change-file").onclick = () => document.getElementById("file-input").click();
-
document.getElementById("back").onclick = () => ui.showSection("file-picker");
window.onbeforeunload = event => {
diff --git a/public/assets/styles/file-picker-section.css b/public/assets/styles/file-picker-section.css
index f3a53aa..7f67669 100644
--- a/public/assets/styles/file-picker-section.css
+++ b/public/assets/styles/file-picker-section.css
@@ -1,4 +1,4 @@
-#file-input, #change-file {
+#file-input, #remove-file {
display: none;
opacity: 0;
}
diff --git a/public/index.html b/public/index.html
index 2e65823..5194aec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -30,7 +30,7 @@
-
+