Extract UI functions into a class

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() {
+		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);
+			}
+		}, 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,8 +17,8 @@ fileSelector.onFileSelected = file => {
 	document.getElementById("uploaded-video").src = URL.createObjectURL(file);
 	document.getElementById("uploaded-video").load();
 
-	hideElements("#file-drop-area", "#file-input-spacing");
+	ui.hideElements("#file-drop-area", "#file-input-spacing");
-	showElements("#uploaded-video", "#change-file");
+	ui.showElements("#uploaded-video", "#change-file");
 };
 
 async function compress(filesize, filesizeUnit) {
@@ -27,7 +29,7 @@ async function compress(filesize, filesizeUnit) {
 		return;
 	}
 
-	const sectionChangePromise = showSection("loading");
+	const sectionChangePromise = ui.showSection("loading");
 
 	const videoLength = document.getElementById("uploaded-video").duration;
 
@@ -44,7 +46,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;
 	}
@@ -79,7 +81,7 @@ async function compress(filesize, filesizeUnit) {
 		document.getElementById("share").style.display = "none";
 	}
 
-	showSection("result");
+	ui.showSection("result");
 }
 
 document.getElementById("compress").onclick = async () => {
@@ -92,13 +94,13 @@ 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/index.html

@@ -6,7 +6,6 @@
 		<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">