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() { async function compress() {
document.getElementById("uploaded-video").pause();
showSection("loading"); showSection("loading");
const filesize = document.getElementById("filesize").value; const filesize = document.getElementById("filesize").value;
@ -7,7 +10,6 @@ async function compress() {
updateProgress(0); updateProgress(0);
const ffmpeg = new FFmpegWASM.FFmpeg();
ffmpeg.on("progress", data => { ffmpeg.on("progress", data => {
console.log(data); console.log(data);
updateProgress(data.progress); updateProgress(data.progress);
@ -24,6 +26,12 @@ async function compress() {
location.href = URL.createObjectURL(new Blob([video.buffer], { type: "video/mp4" })); location.href = URL.createObjectURL(new Blob([video.buffer], { type: "video/mp4" }));
} }
function cancel() {
ffmpeg.terminate();
showSection("file-picker");
}
function updateProgress(progress) { function updateProgress(progress) {
const percent = (progress * 100).toFixed(1) + "%"; const percent = (progress * 100).toFixed(1) + "%";

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

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

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

@ -102,9 +102,10 @@ button.primary:focus {
} }
button.simple { button.simple {
border: none; border: 1px solid #9E9E9E;
border-radius: 0.25rem;
background-color: transparent; background-color: transparent;
transition: color 100ms; transition: all 100ms;
cursor: pointer; cursor: pointer;
color: #9E9E9E; color: #9E9E9E;
margin: 1rem auto; margin: 1rem auto;
@ -112,6 +113,12 @@ button.simple {
button.simple:hover { button.simple:hover {
color: black; color: black;
border-color: black;
}
button.simple:focus {
border-color: black;
outline: none;
} }
input, select { input, select {

6
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Video Compressor</title> <title>Video Compressor</title>
@ -24,7 +24,7 @@
<video id="uploaded-video" controls autoplay></video> <video id="uploaded-video" controls autoplay></video>
<button id="change-file" onclick="openFileSelector()" class="simple">Change video</button> <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"> --><select id="filesize-unit">
<option value="K">KB</option> <option value="K">KB</option>
@ -44,6 +44,8 @@
</div> </div>
<p id="progress-percentage">0%</p> <p id="progress-percentage">0%</p>
<button id="cancel" onclick="cancel()" class="simple">Cancel</button>
</section> </section>
</body> </body>
</html> </html>