From b6488dcd6d12bc06cacbdbbd95b616af6740690e Mon Sep 17 00:00:00 2001
From: Sam Lavigne <splavigne@gmail.com>
Date: Sun, 27 Aug 2023 17:38:17 -0400
Subject: [PATCH] clean up buttons, remove the everything log, add error log,
 add clear errors button, add progress indicator

---
 src/App.svelte        | 79 +++++++++++++++++++++++++++++++------------
 src/ButtonEdge.svelte | 11 +++---
 src/app.css           |  6 ++--
 3 files changed, 68 insertions(+), 28 deletions(-)

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