sundog
/
ffmpeg-explorer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new layout

This commit is contained in:
Sam Lavigne 2023-08-20 15:02:07 -04:00
parent 0aefd9334d
commit dd6425a214
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/App.svelte
View File

@ -166,21 +166,13 @@
</section> </section>
<!-- {message} --> <!-- {message} -->
<section class="command"> <section class="command">
<h3>Output Command</h3>
<div class="inner-command">
<textarea readonly class="actual-command" bind:this={commandRef}>{command}</textarea> <textarea readonly class="actual-command" bind:this={commandRef}>{command}</textarea>
<div> <div>
<button on:click={copyCommand}>Copy</button> <button on:click={copyCommand}>Copy Command</button>
<button on:click={render} disabled={!ffmpegLoaded || rendering}>
{#if ffmpegLoaded}
{#if rendering}
Rendering...
{:else}
Render
{/if}
{:else}
Loading ffmpeg
{/if}
</button>
</div> </div>
</div>
</section> </section>
<section class="inputs"> <section class="inputs">
@ -203,6 +195,19 @@
<div class="rendering-video"><span>Rendering...</span></div> <div class="rendering-video"><span>Rendering...</span></div>
{/if} {/if}
<video controls src={videoValue} /> <video controls src={videoValue} />
<div style="text-align: right;margin-top:5px;">
<button on:click={render} disabled={!ffmpegLoaded || rendering}>
{#if ffmpegLoaded}
{#if rendering}
Rendering...
{:else}
Render Preview
{/if}
{:else}
Loading ffmpeg
{/if}
</button>
</div>
</section> </section>
<section class="output"> <section class="output">
@ -237,8 +242,7 @@
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-areas: grid-template-areas:
"hdr hdr hdr" "hdr cmd cmd"
"cmd cmd cmd"
"inp log prv" "inp log prv"
"out log prv" "out log prv"
"flt flt flt"; "flt flt flt";
@ -330,7 +334,7 @@
margin: 0; margin: 0;
} }
.command { .inner-command {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0px; margin: 10px 0px;