public/assets/scripts/FileSelector.js

@@ -2,7 +2,6 @@ export class FileSelector {
 	dropZones = [];
 	selectedFile = null;
 	onFileSelected = null;
-	onFileRemoved = null;
 
 	constructor(mimeType) {
 		this.mimeType = mimeType;
@@ -25,12 +24,6 @@ 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

@@ -1,46 +0,0 @@
-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,10 +1,8 @@
-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);
@@ -17,29 +15,22 @@ fileSelector.onFileSelected = file => {
 	document.getElementById("uploaded-video").src = URL.createObjectURL(file);
 	document.getElementById("uploaded-video").load();
 
-	ui.hideElements("#file-drop-area", "#file-input-spacing");
-	ui.showElements("#uploaded-video", "#remove-file");
+	hideElements("#file-drop-area", "#file-input-spacing");
+	showElements("#uploaded-video", "#change-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;
@@ -55,7 +46,7 @@ async function compress(filesize, filesizeUnit) {
 		await sectionChangePromise; // Avoid changing sections at the same time
 		alert(e.message);
 
-		ui.showSection("file-picker");
+		showSection("file-picker");
 
 		return;
 	}
@@ -90,7 +81,7 @@ async function compress(filesize, filesizeUnit) {
 		document.getElementById("share").style.display = "none";
 	}
 
-	ui.showSection("result");
+	showSection("result");
 }
 
 document.getElementById("compress").onclick = async () => {
@@ -103,10 +94,13 @@ document.getElementById("compress").onclick = async () => {
 document.getElementById("cancel").onclick = () => {
 	videoCompressor.stop();
 
-	ui.showSection("file-picker");
+	showSection("file-picker");
 };
 
-document.getElementById("back").onclick = () => ui.showSection("file-picker");
+
+document.getElementById("change-file").onclick = () => document.getElementById("file-input").click();
+
+document.getElementById("back").onclick = () => showSection("file-picker");
 
 window.onbeforeunload = event => {
 	if (videoCompressor.inProgress) event.preventDefault();

public/assets/scripts/ui.js

@@ -0,0 +1,44 @@
+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, #remove-file {
+#file-input, #change-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="remove-file" class="simple">Remove video</button>
+			<button id="change-file" class="simple">Change video</button>
 
 			<input id="filesize" type="number" value="10" size="3" placeholder="#" style="margin-top: 1rem"><!--