diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx index b2989be8c..91c6d6a51 100644 --- a/src/client/lazy-app/Compress/Options/index.tsx +++ b/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> = return supportedEncoderMap; })(); +const supportsClipboardAPI = + !__PRERENDER__ && navigator.clipboard && navigator.clipboard.readText; + export default class Options extends Component { state: State = { supportedEncoderMap: undefined, @@ -110,6 +115,14 @@ export default class Options extends Component { 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 {

Edit + {/* TODO: Check if the buttons should go into the code selection section */} + {supportsClipboardAPI && ( +
+ + +
+ )}
); } diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css index fa083cb38..1dcdfc16d 100644 --- a/src/client/lazy-app/Compress/Options/style.css +++ b/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; +} diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx index 1735b1c40..65f25b726 100644 --- a/src/client/lazy-app/Compress/index.tsx +++ b/src/client/lazy-app/Compress/index.tsx @@ -402,6 +402,43 @@ export default class Compress extends Component { 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 { onEncoderOptionsChange={this.onEncoderOptionsChange} onProcessorOptionsChange={this.onProcessorOptionsChange} onCopyToOtherSideClick={this.onCopyToOtherClick} + onCopyToClipboard={this.onCopyToClipboard} + onPasteFromClipboard={this.onPasteFromClipboard} /> )); diff --git a/src/client/lazy-app/icons/index.tsx b/src/client/lazy-app/icons/index.tsx index 1858a3814..cef651efe 100644 --- a/src/client/lazy-app/icons/index.tsx +++ b/src/client/lazy-app/icons/index.tsx @@ -97,3 +97,20 @@ export const SwapIcon = () => ( ); + +export const CopyIcon = () => ( + + + +); + +export const PasteIcon = () => ( + + + + +);