Add finished notification

public/assets/scripts/Notifier.js

@@ -0,0 +1,44 @@
+class Notifier {
+	constructor() {
+		this.checkbox = document.getElementById("notify-checkbox");
+
+		this.checkbox.checked = Notification.permission === "granted";
+
+		this.checkbox.addEventListener("change", () => this.onToggle());
+
+		navigator.permissions.query({ name: "notifications" })
+			.then(status => status.onchange = () => this.permissionChanged());
+	}
+
+	onToggle() {
+		if (!this.checkbox.checked) return;
+
+		if (Notification.permission === "denied") {
+			this.checkbox.checked = false;
+
+			alert("You have denied notification permissions for this website. Please change the permission in your browser settings before proceeding.");
+
+			return;
+		}
+
+		if (Notification.permission === "default") {
+			Notification.requestPermission();
+		}
+	}
+
+	permissionChanged() {
+		if (Notification.permission === "denied") {
+			alert("Permission was denied");
+		}
+
+		this.checkbox.checked = Notification.permission === "granted";
+	}
+
+	notifyFinished() {
+		if (!this.checkbox.checked) return;
+
+		const notification = new Notification("Video Compressor", { body: "Finished compressing video" });
+
+		notification.onclick = () => window.focus();
+	}
+}

public/assets/scripts/main.js

@@ -1,5 +1,7 @@
 const ffmpeg = new FFmpegWASM.FFmpeg();
 
+const notifier = new Notifier();
+
 async function compress() {
 	document.getElementById("uploaded-video").pause();
 	showSection("loading");
@@ -15,14 +17,13 @@ async function compress() {
 		case "M": targetFilesize = filesize * 8000; break;
 	}
 
-	updateProgress(0);
-
 	ffmpeg.on("log", event => {
 		console.log("[ffmpeg]", event.type, event.message);
 	});
 
-	let pass;
+	let pass = 1;
 
+	updateProgress(0, pass);
 	ffmpeg.on("progress", event => {
 		updateProgress(event.progress, pass);
 	});
@@ -40,8 +41,6 @@ async function compress() {
 
 	const options = ["-i", file.name, "-preset", "ultrafast", "-c:v", "libx264", "-b:v", bitrate + "k"];
 
-	pass = 1;
-
 	await ffmpeg.exec([...options, "-pass", "1", "-vsync", "cfr", "-f", "null", "/dev/null"]);
 
 	pass = 2;
@@ -50,6 +49,8 @@ async function compress() {
 
 	const video = await ffmpeg.readFile("compressed.mp4");
 
+	notifier.notifyFinished();
+
 	location.href = URL.createObjectURL(new Blob([video.buffer], { type: "video/mp4" }));
 }
 

public/assets/style/main.css

@@ -136,6 +136,14 @@ input:focus, select:focus {
 	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
 }
 
+input[type=checkbox] {
+	accent-color: #4CAF50;
+}
+
+label {
+	color: #757575;
+}
+
 #filesize {
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;

public/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8">
 		<title>Video Compressor</title>
 		<script defer src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script>
+		<script defer src="/assets/scripts/Notifier.js"></script>
 		<script defer src="/assets/scripts/ui.js"></script>
 		<script defer src="/assets/scripts/main.js"></script>
 		<link rel="stylesheet" href="/assets/style/main.css">
@@ -45,6 +46,8 @@
 
 			<p id="progress-percentage">0%</p>
 
+			<p><label><input id="notify-checkbox" type="checkbox"> Notify on finish</label></p>
+
 			<button id="cancel" onclick="cancel()" class="simple">Cancel</button>
 		</section>
 	</body>