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

@@ -0,0 +1,46 @@
+export class UiManager {
+	TRANSITION_TIME = 300;
+
+	showSection(section) {
+		for (const section of document.getElementsByTagName("section")) {
+			this.hideElements(section);
+		}
+
+		this.showElements(`#${section}-section`);
+
+		return new Promise(resolve => setTimeout(resolve, this.TRANSITION_TIME * 2));
+	}
+
+	hideElements() {
+		for (const input of arguments) {
+			const elem = input instanceof Element ? input : document.querySelector(input);
+
+			if (getComputedStyle(elem).display === "none")
+				continue;
+
+			elem.style.opacity = "0";
+			elem.dataset.oldDisplay = getComputedStyle(elem).display;
+
+			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);
+
+					elem.style.opacity = "0";
+
+					elem.style.display = elem.dataset.oldDisplay || "block";
+					elem.dataset.oldDisplay = null;
+
+					setTimeout(() => elem.style.opacity = "1", 10);
+				}
+
+				resolve();
+			}, this.TRANSITION_TIME);
+		});
+	}
+}

public/assets/scripts/main.js

@@ -1,8 +1,10 @@
+import { UiManager } from "./UiManager.js";
 import { Notifier } from "./Notifier.js";
 import { ProgressBar } from "./ProgressBar.js";
 import { VideoCompressor } from "./VideoCompressor.js";
 import { FileSelector } from "./FileSelector.js";
 
+const ui = new UiManager();
 const notifier = new Notifier();
 const progressBar = new ProgressBar();
 const videoCompressor = new VideoCompressor(progressBar);
@@ -15,22 +17,29 @@ fileSelector.onFileSelected = file => {
 	document.getElementById("uploaded-video").src = URL.createObjectURL(file);
 	document.getElementById("uploaded-video").load();
 
-	hideElements("#file-drop-area", "#file-input-spacing");
-	showElements("#uploaded-video", "#change-file");
+	ui.hideElements("#file-drop-area", "#file-input-spacing");
+	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();
 
-	const sectionChangePromise = showSection("loading");
-
 	if (!fileSelector.selectedFile) {
-		await sectionChangePromise; // Avoid changing sections at the same time
 		alert("Please select a file");
-
 		return;
 	}
 
+	const sectionChangePromise = ui.showSection("loading");
+
 	const videoLength = document.getElementById("uploaded-video").duration;
 
 	let targetFilesize;
@@ -46,7 +55,7 @@ async function compress(filesize, filesizeUnit) {
 		await sectionChangePromise; // Avoid changing sections at the same time
 		alert(e.message);
 
-		showSection("file-picker");
+		ui.showSection("file-picker");
 
 		return;
 	}
@@ -81,7 +90,7 @@ async function compress(filesize, filesizeUnit) {
 		document.getElementById("share").style.display = "none";
 	}
 
-	showSection("result");
+	ui.showSection("result");
 }
 
 document.getElementById("compress").onclick = async () => {
@@ -94,13 +103,10 @@ document.getElementById("compress").onclick = async () => {
 document.getElementById("cancel").onclick = () => {
 	videoCompressor.stop();
 
-	showSection("file-picker");
+	ui.showSection("file-picker");
 };
 
-
-document.getElementById("change-file").onclick = () => document.getElementById("file-input").click();
-
-document.getElementById("back").onclick = () => showSection("file-picker");
+document.getElementById("back").onclick = () => ui.showSection("file-picker");
 
 window.onbeforeunload = event => {
 	if (videoCompressor.inProgress) event.preventDefault();

public/assets/scripts/ui.js

@@ -1,44 +0,0 @@
-const TRANSITION_TIME = 300;
-
-function showSection(section) {
-	for (const section of document.getElementsByTagName("section")) {
-		hideElements(section);
-	}
-
-	showElements(`#${section}-section`);
-
-	return new Promise(resolve => setTimeout(resolve, TRANSITION_TIME * 2));
-}
-
-function hideElements() {
-	for (const input of arguments) {
-		const elem = input instanceof Element ? input : document.querySelector(input);
-
-		if (getComputedStyle(elem).display === "none")
-			continue;
-
-		elem.style.opacity = "0";
-		elem.dataset.oldDisplay = getComputedStyle(elem).display;
-
-		setTimeout(() => {
-			elem.style.display = "none";
-		}, TRANSITION_TIME);
-	}
-}
-
-function showElements() {
-	setTimeout(() => {
-		for (const input of arguments) {
-			const elem = input instanceof Element ? input : document.querySelector(input);
-
-			elem.style.opacity = "0";
-
-			elem.style.display = elem.dataset.oldDisplay || "block";
-			elem.dataset.oldDisplay = null;
-
-			setTimeout(() => {
-				elem.style.opacity = "1";
-			}, 10);
-		}
-	}, TRANSITION_TIME);
-}

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

@@ -6,8 +6,8 @@
 		<meta name="description" content="Easily compress video files to a specific file size for uploading to various communication platforms that restrict upload size">
 		<title>Compact.Video - Compress videos online</title>
 		<script defer src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script>
-		<script defer src="/assets/scripts/ui.js"></script>
 		<script defer type="module" src="/assets/scripts/main.js"></script>
+		<link rel="canonical" href="https://compact.video/">
 		<link rel="shortcut icon" href="/assets/images/icon.png">
 		<link rel="apple-touch-icon" href="/assets/images/icon.png">
 		<link rel="stylesheet" href="/assets/styles/main.css">
@@ -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"><!--