diff --git a/public/assets/scripts/main.js b/public/assets/scripts/main.js
index d080470..db6d4d6 100644
--- a/public/assets/scripts/main.js
+++ b/public/assets/scripts/main.js
@@ -6,11 +6,12 @@ const notifier = new Notifier();
const progressBar = new ProgressBar();
const videoCompressor = new VideoCompressor(progressBar);
-document.getElementById("compress").onclick = async () => {
+// Reset file input cache after reload
+document.getElementById("file-input").value = "";
+
+async function compress(filesize, filesizeUnit) {
document.getElementById("uploaded-video").pause();
- const filesize = document.getElementById("filesize").value;
- const filesizeUnit = document.getElementById("filesize-unit").value;
const file = document.getElementById("file-input").files[0];
if (!file) {
@@ -70,7 +71,18 @@ document.getElementById("compress").onclick = async () => {
}
showSection("result");
-};
+}
+
+document.getElementById("compress").onclick = async () => {
+ const filesize = document.getElementById("filesize").value;
+ const filesizeUnit = document.getElementById("filesize-unit").value;
+
+ await compress(filesize, filesizeUnit);
+}
+
+for (const preset of document.getElementsByClassName("preset")) {
+ preset.onclick = () => compress(parseInt(preset.dataset.size), preset.dataset.unit);
+}
document.getElementById("cancel").onclick = () => {
videoCompressor.stop();
@@ -85,10 +97,12 @@ function openFileSelector() {
document.getElementById("file-drop-area").onclick = openFileSelector;
document.getElementById("change-file").onclick = openFileSelector;
-document.getElementById("file-drop-area").onkeydown = event => {
- if (['Enter', 'Space'].includes(event.code))
- openFileSelector();
-};
+for (const tabbable of document.querySelectorAll("[tabindex='0']")) {
+ tabbable.onkeydown = event => {
+ if (['Enter', 'Space'].includes(event.code))
+ tabbable.click();
+ }
+}
document.getElementById("file-input").oninput = () => {
setTimeout(() => {
diff --git a/public/assets/styles/file-picker-section.css b/public/assets/styles/file-picker-section.css
index f4a31a7..544e1df 100644
--- a/public/assets/styles/file-picker-section.css
+++ b/public/assets/styles/file-picker-section.css
@@ -54,3 +54,45 @@
#compress {
margin-left: 1rem;
}
+
+#preset-divider {
+ margin-top: 2rem;
+}
+
+.preset {
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 0.5rem;
+ background-color: white;
+ padding: 0.5rem;
+ margin: 1rem 0.25rem auto 0.25rem;
+ border-radius: 0.5rem;
+ border: 1px solid #BDBDBD;
+ width: 100px;
+ height: 100px;
+ cursor: pointer;
+ position: relative;
+ bottom: 0;
+ transition: box-shadow, bottom 200ms;
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+}
+
+.preset:hover {
+ bottom: 3px;
+ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+}
+
+.preset:focus {
+ border-color: black;
+ outline: 1px solid black;
+}
+
+.preset p {
+ margin: 0;
+ color: #757575;
+}
+
+.preset svg {
+ color: #BDBDBD;
+}
diff --git a/public/index.html b/public/index.html
index 651c466..2d50ee8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,6 +37,54 @@
+
+
+
+ Or use a preset
+
+
+
+
+
+
+
Gmail
+
+
25 MB
+