Change 'change video' button to 'remove video'

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);

public/assets/scripts/UiManager.js

@@ -21,13 +21,12 @@ 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() {
+		return new Promise(resolve => {
 			setTimeout(() => {
 				for (const input of arguments) {
 					const elem = input instanceof Element ? input : document.querySelector(input);
@@ -37,10 +36,11 @@ export class UiManager {
 					elem.style.display = elem.dataset.oldDisplay || "block";
 					elem.dataset.oldDisplay = null;
 
-				setTimeout(() => {
-					elem.style.opacity = "1";
-				}, 10);
+					setTimeout(() => elem.style.opacity = "1", 10);
 				}
+
+				resolve();
 			}, this.TRANSITION_TIME);
+		});
 	}
 }

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 => {

public/assets/styles/file-picker-section.css

@@ -1,4 +1,4 @@
-#file-input, #change-file {
+#file-input, #remove-file {
 	display: none;
 	opacity: 0;
 }

public/index.html

@@ -30,7 +30,7 @@
 			</div>
 
 			<video id="uploaded-video" controls autoplay></video>
-			<button id="change-file" class="simple">Change video</button>
+			<button id="remove-file" class="simple">Remove video</button>
 
 			<input id="filesize" type="number" value="10" size="3" placeholder="#" style="margin-top: 1rem"><!--