Copy settings as JSON string to another instance of the app #1299

src/client/lazy-app/Compress/Options/index.tsx

@@ -17,7 +17,7 @@ import Toggle from './Toggle';
 import Select from './Select';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
-import { SwapIcon } from 'client/lazy-app/icons';
+import { CopyIcon, PasteIcon, SwapIcon } from 'client/lazy-app/icons';
 
 interface Props {
   index: 0 | 1;
@@ -29,6 +29,8 @@ interface Props {
   onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void;
   onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void;
   onCopyToOtherSideClick(index: 0 | 1): void;
+  onCopyToClipboard(index: 0 | 1): void;
+  onPasteFromClipboard(index: 0 | 1): void;
 }
 
 interface State {
@@ -57,6 +59,9 @@ const supportedEncoderMapP: Promise<PartialButNotUndefined<typeof encoderMap>> =
     return supportedEncoderMap;
   })();
 
+const supportsClipboardAPI =
+  !__PRERENDER__ && navigator.clipboard && navigator.clipboard.readText;
+
 export default class Options extends Component<Props, State> {
   state: State = {
     supportedEncoderMap: undefined,
@@ -110,6 +115,14 @@ export default class Options extends Component<Props, State> {
     this.props.onCopyToOtherSideClick(this.props.index);
   };
 
+  private onCopyToClipboardClick = () => {
+    this.props.onCopyToClipboard(this.props.index);
+  };
+
+  private onPasteFromClipboardClick = () => {
+    this.props.onPasteFromClipboard(this.props.index);
+  };
+
   render(
     { source, encoderState, processorState }: Props,
     { supportedEncoderMap }: State,
@@ -132,6 +145,23 @@ export default class Options extends Component<Props, State> {
               <h3 class={style.optionsTitle}>
                 <div class={style.titleAndButtons}>
                   Edit
+                  {/* TODO: Check if the buttons should go into the code selection section */}
+                  {supportsClipboardAPI && (
+                    <div>
+                      <button
+                        class={style.copyToClipboardButton}
+                        onClick={this.onCopyToClipboardClick}
+                      >
+                        <CopyIcon />
+                      </button>
+                      <button
+                        class={style.pasteFromClipboardButton}
+                        onClick={this.onPasteFromClipboardClick}
+                      >
+                        <PasteIcon />
+                      </button>
+                    </div>
+                  )}
                   <button
                     class={style.copyOverButton}
                     title="Copy settings to other side"
@@ -214,6 +244,18 @@ export default class Options extends Component<Props, State> {
             />
           )}
         </Expander>
+        <Expander>
+          {EncoderOptionComponent && (
+            <EncoderOptionComponent
+              options={
+                // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures
+                // the correct type, but typescript isn't smart enough.
+                encoderState!.options as any
+              }
+              onChange={this.onEncoderOptionsChange}
+            />
+          )}
+        </Expander>
       </div>
     );
   }

src/client/lazy-app/Compress/Options/style.css

@@ -119,3 +119,17 @@
     fill: var(--header-text-color);
   }
 }
+
+.paste-from-clipboard-button {
+  padding: 2px;
+  composes: title-button;
+  fill-rule: evenodd;
+  clip-rule: evenodd;
+  stroke-linejoin: round;
+  stroke-miterlimit: 2;
+}
+
+.copy-to-clipboard--button {
+  padding: 2px;
+  composes: title-button;
+}

src/client/lazy-app/Compress/index.tsx

@@ -402,6 +402,43 @@ export default class Compress extends Component<Props, State> {
     this.queueUpdateImage();
   }
 
+  private onPasteFromClipboard = async (index: 0 | 1) => {
+    const JSONifiedSettings = await navigator.clipboard.readText();
+    const newSettings = JSON.parse(JSONifiedSettings);
+
+    this.setState({
+      sides: cleanSet(this.state.sides, `${index}.latestSettings`, newSettings),
+    });
+
+    this.props.showSnack('Settings updated from clipboard', {
+      timeout: 5000,
+    });
+  };
+
+  private onCopyToClipboard = async (index: 0 | 1) => {
+    const settings = this.state.sides[index];
+
+    try {
+      const JSONifiedSettings = JSON.stringify(settings.encodedSettings);
+
+      await navigator.clipboard.writeText(JSONifiedSettings);
+
+      this.props.showSnack('Settings copied to clipboard', {
+        timeout: 5000,
+      });
+    } catch (e) {
+      if (e instanceof SyntaxError) {
+        this.props.showSnack('Invalid settings in clipboard', {
+          timeout: 2000,
+        });
+      } else {
+        this.props.showSnack('An errror occurred ( check permissions )', {
+          timeout: 5000,
+        });
+      }
+    }
+  };
+
   private onCopyToOtherClick = async (index: 0 | 1) => {
     const otherIndex = index ? 0 : 1;
     const oldSettings = this.state.sides[otherIndex];
@@ -829,6 +866,8 @@ export default class Compress extends Component<Props, State> {
         onEncoderOptionsChange={this.onEncoderOptionsChange}
         onProcessorOptionsChange={this.onProcessorOptionsChange}
         onCopyToOtherSideClick={this.onCopyToOtherClick}
+        onCopyToClipboard={this.onCopyToClipboard}
+        onPasteFromClipboard={this.onPasteFromClipboard}
       />
     ));
 

src/client/lazy-app/icons/index.tsx

@@ -97,3 +97,20 @@ export const SwapIcon = () => (
     <path d="M5.5 3.6v6.8L2.1 7l3.4-3.4M7 0L0 7l7 7V0zm4 0v14l7-7-7-7z" />
   </svg>
 );
+
+export const CopyIcon = () => (
+  <svg viewBox="0 0 467 512.22">
+    <path d="M131.07 372.11c.37 1 .57 2.08.57 3.2 0 1.13-.2 2.21-.57 3.21v75.91c0 10.74 4.41 20.53 11.5 27.62s16.87 11.49 27.62 11.49h239.02c10.75 0 20.53-4.4 27.62-11.49s11.49-16.88 11.49-27.62V152.42c0-10.55-4.21-20.15-11.02-27.18l-.47-.43c-7.09-7.09-16.87-11.5-27.62-11.5H170.19c-10.75 0-20.53 4.41-27.62 11.5s-11.5 16.87-11.5 27.61v219.69zm-18.67 12.54H57.23c-15.82 0-30.1-6.58-40.45-17.11C6.41 356.97 0 342.4 0 326.52V57.79c0-15.86 6.5-30.3 16.97-40.78l.04-.04C27.51 6.49 41.94 0 57.79 0h243.63c15.87 0 30.3 6.51 40.77 16.98l.03.03c10.48 10.48 16.99 24.93 16.99 40.78v36.85h50c15.9 0 30.36 6.5 40.82 16.96l.54.58c10.15 10.44 16.43 24.66 16.43 40.24v302.01c0 15.9-6.5 30.36-16.96 40.82-10.47 10.47-24.93 16.97-40.83 16.97H170.19c-15.9 0-30.35-6.5-40.82-16.97-10.47-10.46-16.97-24.92-16.97-40.82v-69.78zM340.54 94.64V57.79c0-10.74-4.41-20.53-11.5-27.63-7.09-7.08-16.86-11.48-27.62-11.48H57.79c-10.78 0-20.56 4.38-27.62 11.45l-.04.04c-7.06 7.06-11.45 16.84-11.45 27.62v268.73c0 10.86 4.34 20.79 11.38 27.97 6.95 7.07 16.54 11.49 27.17 11.49h55.17V152.42c0-15.9 6.5-30.35 16.97-40.82 10.47-10.47 24.92-16.96 40.82-16.96h170.35z" />
+  </svg>
+);
+
+export const PasteIcon = () => (
+  <svg
+    fill="#000000"
+    viewBox="0 0 32 32"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  >
+    <path d="M10,1c-1.326,-0 -2.598,0.527 -3.536,1.464c-0.937,0.938 -1.464,2.21 -1.464,3.536c0,5.322 -0,14.678 0,20c-0,1.326 0.527,2.598 1.464,3.536c0.938,0.937 2.21,1.464 3.536,1.464c3.486,0 8.514,0 12,0c1.326,0 2.598,-0.527 3.536,-1.464c0.937,-0.938 1.464,-2.21 1.464,-3.536l-0,-20c0,-1.326 -0.527,-2.598 -1.464,-3.536c-0.938,-0.937 -2.21,-1.464 -3.536,-1.464l-0,3c0,1.326 -0.527,2.598 -1.464,3.536c-0.938,0.937 -2.21,1.464 -3.536,1.464l-2,-0c-1.326,0 -2.598,-0.527 -3.536,-1.464c-0.937,-0.938 -1.464,-2.21 -1.464,-3.536l0,-3Zm1,25l10,0c0.552,0 1,-0.448 1,-1c0,-0.552 -0.448,-1 -1,-1l-10,0c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1Zm0,-6l10,0c0.552,0 1,-0.448 1,-1c0,-0.552 -0.448,-1 -1,-1l-10,0c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1Zm0,-6l10,0c0.552,0 1,-0.448 1,-1c0,-0.552 -0.448,-1 -1,-1l-10,0c-0.552,0 -1,0.448 -1,1c0,0.552 0.448,1 1,1Zm9,-13l-0,3c0,0.796 -0.316,1.559 -0.879,2.121c-0.562,0.563 -1.325,0.879 -2.121,0.879l-2,0c-0.796,0 -1.559,-0.316 -2.121,-0.879c-0.563,-0.562 -0.879,-1.325 -0.879,-2.121l-0,-3l8,-0Z" />
+    <g id="Icon" />
+  </svg>
+);