Skip to content

Commit

Permalink
Update title when converting (#5)
Browse files Browse the repository at this point in the history
- The title bar will now feature the file name and the conversion progress
    * It's possible to show the file path instead of only the file name (only in Electron)
- By default, ffmpeg won't quit after finishing the conversion. It's still possible to enable it in Settings
  • Loading branch information
dinoosauro authored Feb 25, 2024
1 parent 91aab96 commit 762d404
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 6 deletions.
11 changes: 10 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -679,6 +679,15 @@ <h3 data-translate="savingOpt">Saving options:</h3>
</label>
<l data-translate="fileSafe">Permit unsafe name for files</l>
</div><br> <br>
<div id="filePathInBarContainer" style="display: none;">
<div class="switchContainer hcenter">
<label class="switch">
<input type="checkbox" autocomplete="off" id="showPathInBar">
<span class="slider"></span>
</label>
<l data-translate="showFilePathDesc">Show full file path in the title bar</l>
</div><br> <br>
</div>

</div><br>
<div class="rowDisplay" style="display: block;">
Expand Down Expand Up @@ -760,7 +769,7 @@ <h3 data-translate="ram">RAM management</h3>
<i data-translate="ramDesc">Manage when ffmpeg-web should exit the current process</i><br><br>
<div class="switchContainer hcenter">
<label class="switch">
<input type="checkbox" autocomplete="off" id="quitFfmpegGeneral" checked>
<input type="checkbox" autocomplete="off" id="quitFfmpegGeneral">
<span class="slider"></span>
</label>
<l data-translate="quitOperation">Quit after each operation</l>
Expand Down
25 changes: 21 additions & 4 deletions script.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
document.getElementById("hwAcceleration").style.display = "block";
document.querySelector("[data-fetch=arrowleft]").style.display = "none";
document.getElementById("fsPart").style.display = "block";
document.getElementById("filePathInBarContainer").style.display = "block";
scrollItem(); // Go to the process tab, since showing the PWA banner is useless.
for (let item of document.querySelectorAll("a")) item.addEventListener("click", (e) => {
e.preventDefault();
Expand Down Expand Up @@ -167,15 +168,22 @@
}
// The first function that uses ffmpeg: extract an album art from an audio file and convert it to the selected image format.
async function extractAlbumArt() {
for (let item of document.getElementById("fileInput").files) {
for (let i = 0; i < document.getElementById("fileInput").files.length; i++) {
let item = document.getElementById("fileInput").files[i];
item._path = ((item.path ?? "") === "") ? item.name : getFilePath(item.path); // Create a ._path property that, if available, it'll have the formatted path of the file.
try {
document.title = `ffmpeg-web | [${i}/${document.getElementById("fileInput").files.length}] Converting ${localStorage.getItem("ffmpegWeb-ShowFullPathInTitle") === "a" ? item.path ?? item.name : item.name}`;
} catch (ex) {
console.warn(ex);
}
ffmpeg.FS("writeFile", item._path, await fetchFile(item));
let prepareScript = ["-i", item._path];
if (document.querySelector(".imgSelect").getAttribute("data-imgval") !== "no") prepareScript.push("-vcodec", document.querySelector(".imgSelect").getAttribute("data-imgval")); // data-imgval = encoder; data-extension = file extension;
let outName = `${item._path.substring(0, item._path.lastIndexOf("."))}.${document.querySelector(".imgSelect").getAttribute("data-extension")}`;
await ffmpeg.run(...prepareScript, outName);
downloadItem(await intelliFetch(outName), outName);
}
document.title = "ffmpeg-web";
createAlert(englishTranslations.js.allAlbum, "albumArtExported");
}

Expand Down Expand Up @@ -260,7 +268,7 @@
ipcRenderer.send("WriteArrayFile", conversionFile);
}) : ffmpeg.FS("writeFile", "array.txt", new TextEncoder().encode(conversionFile)); // Create a binary file from the list, so that it can be handled by ffmpeg.
deleteFiles.push("array.txt"); // Delete the array when finished.
if (document.getElementById("mergeName").value === "") document.getElementById("mergeName").value = `merged-${file[0]._path}`; // Create a fallback name if the user hasn't written anything in the "Output file name" textbox
if (document.getElementById("mergeName").value === "") document.getElementById("mergeName").value = `${file[0]._path.substring(0, file[0]._path.lastIndexOf("."))}-merged${file[0]._path.substring(file[0]._path.lastIndexOf("."))}`; // Create a fallback name if the user hasn't written anything in the "Output file name" textbox
if (document.getElementById("mergeName").value.endsWith(".m4a")) await ffmpeg.run("-f", "concat", "-safe", "0", "-i", "array.txt", "-c", "copy", "-map_metadata", "0", "-vn", `${document.getElementById("mergeName").value}.tempa.${document.getElementById("mergeName").value.substring(document.getElementById("mergeName").value.lastIndexOf(".") + 1)}`); else await ffmpeg.run("-f", "concat", "-safe", "0", "-i", "array.txt", "-c", "copy", "-map_metadata", "0", `${document.getElementById("mergeName").value}.tempa.${document.getElementById("mergeName").value.substring(document.getElementById("mergeName").value.lastIndexOf(".") + 1)}`); // If the file ends with ".m4a", the video (99% it's an album art) must be discarded, since ffmpeg won't be able to handled that correctly.
let data = await ffmpeg.FS("readFile", `${document.getElementById("mergeName").value}.tempa.${document.getElementById("mergeName").value.substring(document.getElementById("mergeName").value.lastIndexOf(".") + 1)}`); // get the result
deleteFiles.push(`${document.getElementById("mergeName").value}.tempa.${document.getElementById("mergeName").value.substring(document.getElementById("mergeName").value.lastIndexOf(".") + 1)}`);
Expand Down Expand Up @@ -340,6 +348,11 @@
return timeArray;
}
async function ffmpegStart(skipImport) { // The function that manages most of the ffmpeg conversions
try {
document.title = `ffmpeg-web | [${isMultiCheck[1] === 0 ? "1" : isMultiCheck[1]}/${document.getElementById("fileInput").files.length}] Converting "${localStorage.getItem("ffmpegWeb-ShowFullPathInTitle") === "a" ? document.getElementById("fileInput").files[isMultiCheck[1] !== 0 ? isMultiCheck[1] - 1 : 0].path ?? document.getElementById("fileInput").files[isMultiCheck[1] !== 0 ? isMultiCheck[1] - 1 : 0].name : document.getElementById("fileInput").files[isMultiCheck[1] !== 0 ? isMultiCheck[1] - 1 : 0].name}"`;
} catch (ex) {
console.warn(ex);
}
let finalScript = [...JSON.parse(localStorage.getItem("ffmpegWeb-Argshwaccel") ?? "[]")]; // Add the items for hardware acceleration initialization, if available
if (!skipImport) {
if (conversionOptions.output.custom) readFfmpegScript(); else if (document.querySelector(".sectionSelect").getAttribute("section") === "metadata") await ffmpegReadyMetadata(); else buildFfmpegScript();
Expand Down Expand Up @@ -381,6 +394,7 @@
}
}
downloadItem(isElectron ? intelliFetch(data) : data);
document.title = "ffmpeg-web";
document.getElementById("console").innerHTML = consoleText; // Add output text to the console
document.getElementById("console").parentElement.scrollTo({ top: document.getElementById("console").parentElement.scrollHeight, behavior: 'smooth' }); // Scroll to the end of the console text
let textCutSplit = document.getElementById("timestampArea").value.split("\n");
Expand Down Expand Up @@ -1359,9 +1373,9 @@
}
}
for (let item of document.querySelectorAll("[data-text]")) item.type = "text"; // Since Webpack delets the "type=text" attribute, it'll be added again from JavaScript
document.getElementById("quitFfmpegGeneral").addEventListener("change", () => { document.getElementById("quitFfmpegGeneral").checked ? localStorage.removeItem("ffmpegWeb-GeneralQuit") : localStorage.setItem("ffmpegWeb-GeneralQuit", "a") });
document.getElementById("quitFfmpegGeneral").addEventListener("change", () => { !document.getElementById("quitFfmpegGeneral").checked ? localStorage.removeItem("ffmpegWeb-GeneralQuit") : localStorage.setItem("ffmpegWeb-GeneralQuit", "a") });
document.getElementById("quitFfmpegTimestamp").addEventListener("change", () => { document.getElementById("quitFfmpegTimestamp").checked ? localStorage.setItem("ffmpegWeb-TimestampQuit", "a") : localStorage.setItem("ffmpegWeb-TimestampQuit", "a") });
if (localStorage.getItem("ffmpegWeb-GeneralQuit") === "a") document.getElementById("quitFfmpegGeneral").checked = false;
if (localStorage.getItem("ffmpegWeb-GeneralQuit") === "a") document.getElementById("quitFfmpegGeneral").checked = true;
if (localStorage.getItem("ffmpegWeb-TimestampQuit") === "a") document.getElementById("quitFfmpegTimestamp").checked = true;
document.getElementById("quitProcess").addEventListener("click", () => resetFfmpeg());
function customCommandManager({ type }) { // Create a div where the user can add custom arguments
Expand Down Expand Up @@ -1436,4 +1450,7 @@
document.addEventListener("keyup", (e) => {
if (e.key === "Shift") isShiftPressed = false;
})
document.getElementById("showPathInBar").addEventListener("change", () => {
document.getElementById("showPathInBar").checked ? localStorage.setItem("ffmpegWeb-ShowFullPathInTitle", "a") : localStorage.removeItem("ffmpegWeb-ShowFullPathInTitle");
})
})();
3 changes: 2 additions & 1 deletion translations/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,8 @@
"custom": "Valore personalizzato",
"changeArg": "Cambia arguments",
"fileSafe": "Permetti nome dei file non sicuri",
"addArgument": "Aggiungi argument"
"addArgument": "Aggiungi argument",
"showFilePathDesc": "Mostra il percorso completo nella barra del titolo"
},
"js": {
"oom": "Il processo ffmpeg ha avuto un errore Out of memory. Aggiornare la pagina e ricominciare la conversione. Se si sta usando l'opzione \"Timestamp multipli\" per tagliare il contenuto, inserire solamente gli elementi che non sono stati tagliati.",
Expand Down

0 comments on commit 762d404

Please sign in to comment.