Add finished notification

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>