video-compressor/public/assets/scripts/main.js

68 lines
1.9 KiB
JavaScript

import { Notifier } from "./Notifier.js";
import { ProgressBar } from "./ProgressBar.js";
import { VideoCompressor } from "./VideoCompressor.js";
const notifier = new Notifier();
const progressBar = new ProgressBar();
const videoCompressor = new VideoCompressor(progressBar);
document.getElementById("compress").onclick = async () => {
document.getElementById("uploaded-video").pause();
showSection("loading");
const filesize = document.getElementById("filesize").value;
const filesizeUnit = document.getElementById("filesize-unit").value;
const file = document.getElementById("file-input").files[0];
const videoLength = document.getElementById("uploaded-video").duration;
let targetFilesize;
switch (filesizeUnit) {
case "kb": targetFilesize = filesize * 1000; break;
case "mb": targetFilesize = filesize * 1000000; break;
}
try {
const url = await videoCompressor.compress(file, targetFilesize, videoLength);
if (!url) return;
notifier.notifyFinished();
location.href = url;
} catch (e) {
alert(e.message);
showSection("file-picker");
}
};
document.getElementById("cancel").onclick = () => {
videoCompressor.stop();
showSection("file-picker");
};
function openFileSelector() {
document.getElementById("file-input").click();
}
document.getElementById("file-drop-area").onclick = openFileSelector;
document.getElementById("change-file").onclick = openFileSelector;
document.getElementById("file-input").oninput = () => {
setTimeout(() => {
const file = document.getElementById("file-input").files[0];
document.getElementById("uploaded-video").src = URL.createObjectURL(file);
document.getElementById("uploaded-video").load();
hideElements("#file-drop-area", "#file-input-spacing");
showElements("#uploaded-video", "#change-file");
}, 200);
};
window.onbeforeunload = event => {
if (videoCompressor.inProgress) event.preventDefault();
};