diff --git a/public/assets/scripts/main.js b/public/assets/scripts/main.js
index 96c7055..c589022 100644
--- a/public/assets/scripts/main.js
+++ b/public/assets/scripts/main.js
@@ -1,4 +1,7 @@
+const ffmpeg = new FFmpegWASM.FFmpeg();
+
async function compress() {
+ document.getElementById("uploaded-video").pause();
showSection("loading");
const filesize = document.getElementById("filesize").value;
@@ -7,7 +10,6 @@ async function compress() {
updateProgress(0);
- const ffmpeg = new FFmpegWASM.FFmpeg();
ffmpeg.on("progress", data => {
console.log(data);
updateProgress(data.progress);
@@ -24,6 +26,12 @@ async function compress() {
location.href = URL.createObjectURL(new Blob([video.buffer], { type: "video/mp4" }));
}
+function cancel() {
+ ffmpeg.terminate();
+
+ showSection("file-picker");
+}
+
function updateProgress(progress) {
const percent = (progress * 100).toFixed(1) + "%";
diff --git a/public/assets/scripts/ui.js b/public/assets/scripts/ui.js
index 297b5fd..501c2a3 100644
--- a/public/assets/scripts/ui.js
+++ b/public/assets/scripts/ui.js
@@ -40,4 +40,3 @@ function showElements() {
}
}, TRANSITION_TIME);
}
-
diff --git a/public/assets/style/main.css b/public/assets/style/main.css
index 939d390..54cdee7 100644
--- a/public/assets/style/main.css
+++ b/public/assets/style/main.css
@@ -102,9 +102,10 @@ button.primary:focus {
}
button.simple {
- border: none;
+ border: 1px solid #9E9E9E;
+ border-radius: 0.25rem;
background-color: transparent;
- transition: color 100ms;
+ transition: all 100ms;
cursor: pointer;
color: #9E9E9E;
margin: 1rem auto;
@@ -112,6 +113,12 @@ button.simple {
button.simple:hover {
color: black;
+ border-color: black;
+}
+
+button.simple:focus {
+ border-color: black;
+ outline: none;
}
input, select {
diff --git a/public/index.html b/public/index.html
index 1170675..2d5a8fd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
-
+
Video Compressor
@@ -24,7 +24,7 @@
-