diff --git a/public/assets/scripts/Notifier.js b/public/assets/scripts/Notifier.js new file mode 100644 index 0000000..8d54d00 --- /dev/null +++ b/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(); + } +} diff --git a/public/assets/scripts/main.js b/public/assets/scripts/main.js index c3f0e00..c72e33b 100644 --- a/public/assets/scripts/main.js +++ b/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" })); } diff --git a/public/assets/style/main.css b/public/assets/style/main.css index 3576868..9422edb 100644 --- a/public/assets/style/main.css +++ b/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; diff --git a/public/index.html b/public/index.html index b3a7ec8..79d8943 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,7 @@
0%
+ +