Add copy button

See [#6][0]. [0]: #6 Co-authored-by: Evan Hahn <[email protected]>
EvanHahn · Jun 12, 2022 · 3756c47 · 3756c47
1 parent d8674b7
commit 3756c47
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 7 deletions.
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -1,3 +1,28 @@
+Icons by [Tabler Icons](https://tabler-icons.io/), licensed under the
+MIT License.
+
+Copyright (c) 2020-2022 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+************
+
 This is free and unencumbered software released into the public domain.
 
 Anyone is free to copy, modify, publish, use, compile, sell, or

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0 auto;
   padding-bottom: 1em;
@@ -24,11 +28,51 @@ h2 {
   font-size: 16pt;
 }
 
-pre {
+#outputContainer {
+  display: flex;
+  margin: 1rem;
+  position: relative;
+}
+
+#outputEl {
+  margin: 0;
+  flex-grow: 1;
   background-color: #eee;
-  padding: 1em;
+  padding: 2rem;
   font-family: Inconsolata, Monaco, Consolas, monospace;
   white-space: pre-wrap;
   word-wrap: break-word;
   word-break: break-word;
 }
+
+#copyButtonEl {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0;
+  width: 2rem;
+  height: 2rem;
+  padding: 3px;
+  display: flex;
+}
+
+#copyButtonEl:before {
+  width: 100%;
+  height: 100%;
+  content: "";
+  display: block;
+  background-position: center center;
+  background-size: cover;
+}
+
+#copyButtonEl.waiting:before {
+  background-image: url(vendor/copy.svg);
+}
+
+#copyButtonEl.copied:before {
+  background-image: url(vendor/check.svg);
+}
+
+#copyButtonEl.failed:before {
+  background-image: url(vendor/error.svg);
+}
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>ffmpeg buddy</title>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-    <link rel="stylesheet" href="pure-min.css" />
+    <link rel="stylesheet" href="vendor/pure-min.css" />
     <link rel="stylesheet" href="index.css" />
   </head>
   <body>
@@ -14,7 +14,14 @@ <h2>
       <a href="https://ffmpeg.org/">ffmpeg</a> commands
     </h2>
 
-    <pre id="outputEl"># loading...</pre>
+    <div id="outputContainer">
+      <pre id="outputEl"># loading...</pre>
+      <button
+        id="copyButtonEl"
+        class="waiting"
+        title="Copy to clipboard"
+      ></button>
+    </div>
 
     <form id="formEl" class="pure-form pure-form-aligned">
       <fieldset>

diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,19 @@
-/* global outputEl, formEl, inputFilenameEl, outputFilenameEl, disableVideoEl, disableAudioEl, scaleWidthEl, scaleHeightEl, framerateEl, rotateEl, flipEl, startAtEl, endAtEl */
+/* global outputEl, copyButtonEl, formEl, inputFilenameEl, outputFilenameEl, disableVideoEl, disableAudioEl, scaleWidthEl, scaleHeightEl, framerateEl, rotateEl, flipEl, startAtEl, endAtEl */
 
 import quoteFilename from "./lib/quote-filename.js";
 import getScaleFlag from "./lib/get-scale-flag.js";
+import preloadImage from "./lib/preload-image.js";
+
+let copyButtonState = "waiting";
+let copyButtonTimeout = null;
 
 function render() {
+  if (copyButtonState === "copying") {
+    copyButtonEl.className = "waiting";
+  } else {
+    copyButtonEl.className = copyButtonState;
+  }
+
   const inputFilename = inputFilenameEl.value.trim() || "input.mp4";
   const outputFilename = outputFilenameEl.value.trim() || "output.gif";
 
@@ -55,11 +65,46 @@ function render() {
   }
 }
 
-formEl.addEventListener("input", () => render());
-formEl.addEventListener("change", () => render());
+function onFormChange() {
+  copyButtonState = "waiting";
+  clearTimeout(copyButtonTimeout);
+  render();
+}
+
+formEl.addEventListener("input", onFormChange);
+formEl.addEventListener("change", onFormChange);
 formEl.addEventListener("submit", (event) => {
   event.preventDefault();
   render();
 });
 
+copyButtonEl.addEventListener("click", async (event) => {
+  event.preventDefault();
+
+  if (copyButtonState === "copying") {
+    return;
+  }
+  copyButtonState = "copying";
+
+  clearTimeout(copyButtonTimeout);
+
+  let newState = "copied";
+  try {
+    await navigator.clipboard.writeText(outputEl.textContent);
+  } catch (err) {
+    console.error(err);
+    newState = "failed";
+  }
+
+  copyButtonState = newState;
+  render();
+
+  copyButtonTimeout = setTimeout(() => {
+    copyButtonState = "waiting";
+    render();
+  }, 3000);
+});
+
 render();
+
+preloadImage("vendor/check.svg");
diff --git a/src/lib/preload-image.js b/src/lib/preload-image.js
@@ -0,0 +1,4 @@
+export default function preloadImage(src) {
+  const img = new Image();
+  img.src = src;
+}
diff --git a/src/vendor/check.svg b/src/vendor/check.svg
diff --git a/src/vendor/copy.svg b/src/vendor/copy.svg
diff --git a/src/vendor/error.svg b/src/vendor/error.svg
diff --git a/src/pure-min.css → src/vendor/pure-min.css b/src/pure-min.css → src/vendor/pure-min.css