Reimar/video-compressor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add cancel button

Browse Source
This commit is contained in:
Reimar 2026-01-05 08:24:21 +01:00
parent b2fff4357b
commit 5bb14ef3f7
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
4 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/scripts/main.js
View File

@ -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) + "%";

1
public/assets/scripts/ui.js
View File

@ -40,4 +40,3 @@ function showElements() {
}
}, TRANSITION_TIME);
}

11
public/assets/style/main.css
View File

@ -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 {

6
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Compressor</title>
@ -24,7 +24,7 @@
<video id="uploaded-video" controls autoplay></video>
<button id="change-file" onclick="openFileSelector()" class="simple">Change video</button>
<input id="filesize" type="number" value="10" size="3" placeholder="#"><!--
<input id="filesize" type="number" value="10" size="3" placeholder="#" style="margin-top: 1rem"><!--
--><select id="filesize-unit">
<option value="K">KB</option>
@ -44,6 +44,8 @@
</div>
<p id="progress-percentage">0%</p>
<button id="cancel" onclick="cancel()" class="simple">Cancel</button>
</section>
</body>
</html>