119 lines
3.2 KiB
JavaScript
119 lines
3.2 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();
|
|
|
|
const filesize = document.getElementById("filesize").value;
|
|
const filesizeUnit = document.getElementById("filesize-unit").value;
|
|
const file = document.getElementById("file-input").files[0];
|
|
|
|
if (!file) {
|
|
alert("Please select a file");
|
|
return;
|
|
}
|
|
|
|
const videoLength = document.getElementById("uploaded-video").duration;
|
|
|
|
let targetFilesize;
|
|
switch (filesizeUnit) {
|
|
case "kb": targetFilesize = filesize * 1000; break;
|
|
case "mb": targetFilesize = filesize * 1000000; break;
|
|
}
|
|
|
|
showSection("loading");
|
|
|
|
let result;
|
|
try {
|
|
result = await videoCompressor.compress(file, targetFilesize, videoLength);
|
|
} catch (e) {
|
|
alert(e.message);
|
|
|
|
showSection("file-picker");
|
|
|
|
return;
|
|
}
|
|
|
|
if (!result) return;
|
|
|
|
notifier.notifyFinished();
|
|
|
|
const url = URL.createObjectURL(result);
|
|
|
|
document.getElementById("compressed-video").src = url;
|
|
document.getElementById("compressed-video").load();
|
|
|
|
document.getElementById("result-size").innerText = bytesToSizeString(result.size);
|
|
|
|
document.getElementById("download").onclick = () => {
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = result.name;
|
|
a.click();
|
|
};
|
|
|
|
const shareData = {
|
|
text: "Compressed using " + window.origin,
|
|
files: [result],
|
|
};
|
|
|
|
if (navigator.share && (!navigator.canShare || navigator.canShare(shareData))) {
|
|
document.getElementById("share").style.display = "inline-block";
|
|
document.getElementById("share").onclick = () => navigator.share(shareData);
|
|
} else {
|
|
document.getElementById("share").style.display = "none";
|
|
}
|
|
|
|
showSection("result");
|
|
};
|
|
|
|
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-drop-area").onkeydown = event => {
|
|
if (['Enter', 'Space'].includes(event.code))
|
|
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);
|
|
};
|
|
|
|
document.getElementById("back").onclick = () => {
|
|
showSection("file-picker");
|
|
};
|
|
|
|
window.onbeforeunload = event => {
|
|
if (videoCompressor.inProgress) event.preventDefault();
|
|
};
|
|
|
|
function bytesToSizeString(bytes) {
|
|
if (bytes >= 1000000000) return (bytes / 1000000000).toFixed(1) + " GB";
|
|
if (bytes >= 1000000) return (bytes / 1000000).toFixed(1) + " MB";
|
|
if (bytes >= 1000) return (bytes / 1000).toFixed(1) + " KB";
|
|
return bytes + " B";
|
|
}
|