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

Change 'change video' button to 'remove video'

Browse Source
This commit is contained in:
Reimar 2026-01-09 08:58:18 +01:00
parent 5e937f5de6
commit 2cc5437f21
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
5 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/assets/scripts/FileSelector.js
View File

@ -2,6 +2,7 @@ export class FileSelector {
dropZones = []; dropZones = [];
selectedFile = null; selectedFile = null;
onFileSelected = null; onFileSelected = null;
onFileRemoved = null;
constructor(mimeType) { constructor(mimeType) {
this.mimeType = mimeType; this.mimeType = mimeType;
@ -24,6 +25,12 @@ export class FileSelector {
if (this.onFileSelected) this.onFileSelected(file); if (this.onFileSelected) this.onFileSelected(file);
} }
removeFile() {
this.selectedFile = null;
if (this.onFileRemoved) this.onFileRemoved();
}
addInput(elem) { addInput(elem) {
elem.oninput = () => { elem.oninput = () => {
setTimeout(() => this.selectFile(elem.files[0]), 200); setTimeout(() => this.selectFile(elem.files[0]), 200);

28
public/assets/scripts/UiManager.js
View File

@ -21,26 +21,26 @@ export class UiManager {
elem.style.opacity = "0"; elem.style.opacity = "0";
elem.dataset.oldDisplay = getComputedStyle(elem).display; elem.dataset.oldDisplay = getComputedStyle(elem).display;
setTimeout(() => { setTimeout(() => elem.style.display = "none", this.TRANSITION_TIME);
elem.style.display = "none";
}, this.TRANSITION_TIME);
} }
} }
showElements() { showElements() {
setTimeout(() => { return new Promise(resolve => {
for (const input of arguments) { setTimeout(() => {
const elem = input instanceof Element ? input : document.querySelector(input); for (const input of arguments) {
const elem = input instanceof Element ? input : document.querySelector(input);
elem.style.opacity = "0"; elem.style.opacity = "0";
elem.style.display = elem.dataset.oldDisplay || "block"; elem.style.display = elem.dataset.oldDisplay || "block";
elem.dataset.oldDisplay = null; elem.dataset.oldDisplay = null;
setTimeout(() => { setTimeout(() => elem.style.opacity = "1", 10);
elem.style.opacity = "1"; }
}, 10);
} resolve();
}, this.TRANSITION_TIME); }, this.TRANSITION_TIME);
});
} }
} }

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

@ -18,9 +18,18 @@ fileSelector.onFileSelected = file => {
document.getElementById("uploaded-video").load(); document.getElementById("uploaded-video").load();
ui.hideElements("#file-drop-area", "#file-input-spacing"); ui.hideElements("#file-drop-area", "#file-input-spacing");
ui.showElements("#uploaded-video", "#change-file"); ui.showElements("#uploaded-video", "#remove-file");
}; };
fileSelector.onFileRemoved = async () => {
ui.hideElements("#uploaded-video", "#remove-file");
await ui.showElements("#file-drop-area", "#file-input-spacing");
document.getElementById("uploaded-video").src = "";
}
document.getElementById("remove-file").onclick = () => fileSelector.removeFile();
async function compress(filesize, filesizeUnit) { async function compress(filesize, filesizeUnit) {
document.getElementById("uploaded-video").pause(); document.getElementById("uploaded-video").pause();
@ -97,9 +106,6 @@ document.getElementById("cancel").onclick = () => {
ui.showSection("file-picker"); ui.showSection("file-picker");
}; };
document.getElementById("change-file").onclick = () => document.getElementById("file-input").click();
document.getElementById("back").onclick = () => ui.showSection("file-picker"); document.getElementById("back").onclick = () => ui.showSection("file-picker");
window.onbeforeunload = event => { window.onbeforeunload = event => {

2
public/assets/styles/file-picker-section.css
View File

@ -1,4 +1,4 @@
#file-input, #change-file { #file-input, #remove-file {
display: none; display: none;
opacity: 0; opacity: 0;
} }

2
public/index.html
View File

@ -30,7 +30,7 @@
</div> </div>
<video id="uploaded-video" controls autoplay></video> <video id="uploaded-video" controls autoplay></video>
<button id="change-file" class="simple">Change video</button> <button id="remove-file" class="simple">Remove video</button>
<input id="filesize" type="number" value="10" size="3" placeholder="#" style="margin-top: 1rem"><!-- <input id="filesize" type="number" value="10" size="3" placeholder="#" style="margin-top: 1rem"><!--