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

Implement sections

Browse Source
This commit is contained in:
Reimar 2025-01-27 21:30:22 +01:00
parent f5bf017f11
commit 964f49e9ef
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
4 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build.sh Normal file → Executable file
View File

@ -6,10 +6,11 @@ fetch () {
wget -q "https://registry.npmjs.org/@ffmpeg/$1/-/$1-$2.tgz"
mkdir -p public/assets/scripts/$1
tar -xzf "$1-$2.tgz" --directory assets/scripts/$1
tar -xzf "$1-$2.tgz" --directory public/assets/scripts/$1
}
mkdir -p public/assets/scripts
fetch ffmpeg 0.12.15
fetch core 0.12.10

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

@ -1,4 +1,6 @@
async function compress() {
showSection("loading");
const filesize = document.getElementById("filesize").value;
const file = document.getElementById("file-input").files[0];
@ -18,6 +20,25 @@ async function compress() {
location.href = URL.createObjectURL(new Blob([video.buffer], { type: "video/mp4" }));
}
function selectFile() {
document.getElementById("file-input").click();
}
function showSection(section) {
for (const section of document.getElementsByTagName("section")) {
section.style.opacity = "0";
}
setTimeout(() => {
for (const section of document.getElementsByTagName("section")) {
section.style.display = "none";
}
document.getElementById(section + "-section").style.display = "block";
document.getElementById(section + "-section").style.opacity = "1";
}, 400);
}
// https://github.com/ffmpegwasm/ffmpeg.wasm/blob/main/packages/util/src/index.ts
function readFromBlob(blob) {
return new Promise((resolve, reject) => {

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

@ -20,11 +20,22 @@ h1 {
margin-bottom: 1rem;
}
h3 {
color: #757575;
font-size: 4rem;
font-weight: 400;
margin: 0;
}
p {
color: #9E9E9E;
font-size: 0.8rem;
}
section {
transition: opacity ease-in 400ms;
}
#file-input {
display: none;
}

31
public/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Video Compressor</title>
<script src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script defer src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script defer src="/assets/scripts/main.js"></script>
<link rel="stylesheet" href="/assets/style/main.css">
</head>
@ -11,20 +11,27 @@
<h1>Video Compressor</h1>
<p>Compress video files to a specific file size, so you can upload them to your favorite social media and messaging apps!</p>
<div id="file-drop-area" tabindex="0">
<span>Drag and drop a file here!</span>
</div>
<input id="file-input" type="file" accept="video/*" tabindex="-1">
<section id="file-picker-section">
<div id="file-drop-area" onclick="selectFile()" onkeydown="['Enter', 'Space'].includes(event.code) && selectFile()" tabindex="0">
<span>Drag and drop a file here!</span>
</div>
<input id="file-input" type="file" accept="video/*" tabindex="-1">
<input id="filesize" type="number" value="10"><!--
<input id="filesize" type="number" value="10" size="3" placeholder="#"><!--
--><select id="filesize-unit">
<option value="K">KB</option>
<option value="M" selected>MB</option>
<option value="G">GB</option>
</select>
--><select id="filesize-unit">
<option value="K">KB</option>
<option value="M" selected>MB</option>
<option value="G">GB</option>
</select>
<button id="compress" onclick="compress()">Go!</button>
<button id="compress" onclick="compress()">Go!</button>
</section>
<section id="loading-section" style="opacity: 0; display: none;">
<h3>Please wait...</h3>
<p>This may take a while</p>
</section>
</body>
</html>