clean up buttons, remove the everything log, add error log, add clear errors button, add progress indicator

This commit is contained in:
Sam Lavigne 2023-08-27 17:38:17 -04:00
parent 7a5d528d94
commit b6488dcd6d
3 changed files with 68 additions and 28 deletions

View File

@ -21,30 +21,29 @@
let logbox; let logbox;
let commandRef; let commandRef;
let vidPlayerRef; let vidPlayerRef;
let renderProgress = 0;
function render() {
transcode();
}
function copyCommand() { function copyCommand() {
commandRef.select(); commandRef.select();
document.execCommand("copy"); document.execCommand("copy");
} }
async function transcode() { async function render() {
renderProgress = 0;
videoValue = null; videoValue = null;
rendering = true; rendering = true;
try { try {
for (let vid of $inputs) { for (let vid of $inputs) {
await ffmpeg.writeFile(vid.name, await fetchFile("/" + vid.name)); await ffmpeg.writeFile(vid.name, await fetchFile("/" + vid.name));
} }
let clist = $previewCommand const command = "-hide_banner -loglevel error" + $previewCommand;
let clist = command
.replaceAll('"', "") .replaceAll('"', "")
.replace("ffmpeg", "") .replace("ffmpeg", "")
.split(" ") .split(" ")
.filter((i) => i.trim() != ""); .filter((i) => i.trim() != "");
clist.splice(clist.length-1, 0, "-pix_fmt") clist.splice(clist.length - 1, 0, "-pix_fmt");
clist.splice(clist.length-1, 0, "yuv420p") clist.splice(clist.length - 1, 0, "yuv420p");
console.log("command", clist); console.log("command", clist);
await ffmpeg.exec(clist, TIMEOUT); await ffmpeg.exec(clist, TIMEOUT);
const data = await ffmpeg.readFile("out.mp4"); const data = await ffmpeg.readFile("out.mp4");
@ -58,10 +57,16 @@
} }
async function loadFFmpeg() { async function loadFFmpeg() {
ffmpeg.on("log", ({ message: msg }) => { ffmpeg.on("log", ({ type, message }) => {
log += msg + "\n"; if (message.trim() === "Aborted()") return;
log += message + "\n";
logbox.scrollTop = logbox.scrollHeight; logbox.scrollTop = logbox.scrollHeight;
}); });
ffmpeg.on("progress", ({ progress }) => {
if (progress > 1) progress = 0;
renderProgress = progress;
});
if (isChrome) { if (isChrome) {
await ffmpeg.load({ await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"), coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
@ -108,29 +113,44 @@
</section> </section>
<!-- {message} --> <!-- {message} -->
<section class="command"> <section class="command">
<div class="section-head">
<h3>Output Command</h3> <h3>Output Command</h3>
<div>
<button on:click={copyCommand}>Copy Command</button>
</div>
</div>
<div class="inner-command"> <div class="inner-command">
<textarea <textarea
rows="1"
readonly readonly
class="actual-command" class="actual-command"
bind:this={commandRef} bind:this={commandRef}
on:click={() => commandRef.select()}>{$previewCommand}</textarea on:click={() => commandRef.select()}>{$previewCommand}</textarea
> >
<div>
<button on:click={copyCommand}>Copy Command</button>
</div>
</div> </div>
</section> </section>
<section class="log"> <section class="log">
<h3>FFmpeg Log</h3> <div class="section-head">
<textarea readonly class="the-log" bind:this={logbox}>{log}</textarea> <h3>Error Log</h3>
<div>
<button
on:click={() => {
log = "";
}}>Clear Errors</button
>
</div>
</div>
<textarea rows="1" readonly class="the-log" bind:this={logbox}>{log}</textarea>
</section> </section>
<section class="preview"> <section class="preview">
<div class="vid-holder"> <div class="vid-holder">
{#if rendering} {#if rendering}
<div class="rendering-video"><span>Rendering...</span></div> <div class="rendering-video">
<span>Rendering...{(renderProgress * 100).toFixed(2)}%</span>
</div>
{/if} {/if}
<video bind:this={vidPlayerRef} controls src={videoValue} /> <video bind:this={vidPlayerRef} controls src={videoValue} />
</div> </div>
@ -175,7 +195,6 @@
"hdr log log log prv prv" "hdr log log log prv prv"
"hdr cmd cmd cmd prv prv" "hdr cmd cmd cmd prv prv"
"flt gra gra gra gra edt"; "flt gra gra gra gra edt";
/* grid-template-rows: 16% 17% 77%; */
grid-template-rows: 15% 15% calc(70% - 40px); grid-template-rows: 15% 15% calc(70% - 40px);
padding: 10px; padding: 10px;
grid-gap: 20px; grid-gap: 20px;
@ -214,6 +233,7 @@
.preview video { .preview video {
width: 100%; width: 100%;
background-color: #000;
/* object-fit: contain; */ /* object-fit: contain; */
flex: 1; flex: 1;
} }
@ -247,6 +267,14 @@
display: flex; display: flex;
} }
.section-head {
display: flex;
justify-content: stretch;
}
.section-head h3 {
flex: 1;
}
.filter-picker { .filter-picker {
/* max-height: 500px; */ /* max-height: 500px; */
/* width: 400px; */ /* width: 400px; */
@ -284,33 +312,42 @@
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
resize: none; resize: none;
height: auto;
} }
.actual-command { .actual-command {
border: none; border: none;
margin-right: 10px;
flex: 1; flex: 1;
font: inherit; font: inherit;
padding: 5px; padding: 5px;
height: 100%; height: 100%;
} }
.the-log { .the-log {
color: red;
border: none; border: none;
resize: none; resize: none;
padding: 5px; padding: 5px;
flex: 1; flex: 1;
} }
.render-progress {
transition: 0.1s all;
width: 0%;
height: 7px;
background-color: var(--b1);
}
.rendering-video { .rendering-video {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0.97;
background-color: var(--b2);
z-index: 2; z-index: 2;
background-color: rgba(255, 255, 255, 0.8);
top: 0; top: 0;
left: 0; left: 0;
display: grid; display: grid;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
align-content: center;
} }
.help { .help {

View File

@ -56,8 +56,11 @@
line-height: 1; line-height: 1;
box-shadow: none; box-shadow: none;
} }
.edgebutton:active {
/* .edgebutton:hover { */ top: -3px;
/* box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08); */ left: 0px;
/* } */ }
.edgebutton:hover {
box-shadow: 0px 0px 1px #000;
}
</style> </style>

View File

@ -5,7 +5,7 @@
/* --b1: #004dff; */ /* --b1: #004dff; */
/* --b2: #f19696b3; */ /* --b2: #f19696b3; */
--b1: #004dff; --b1: #004dff;
--b2: #ffdadab3; --b2: #ffe5e5;
/* --b1: #ff0000; */ /* --b1: #ff0000; */
/* --b2: #b6e3f2b3; */ /* --b2: #b6e3f2b3; */
} }
@ -46,8 +46,8 @@ select {
} }
button:active { button:active {
position: relative; position: relative;
top: 2px; top: 1px;
left: 2px; left: 1px;
box-shadow: none; box-shadow: none;
} }