diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx index ede3b056..58e3f84d 100644 --- a/src/client/lazy-app/Compress/Options/index.tsx +++ b/src/client/lazy-app/Compress/Options/index.tsx @@ -19,13 +19,14 @@ import { Options as QuantOptionsComponent } from 'features/processors/quantize/c import { Options as ResizeOptionsComponent } from 'features/processors/resize/client'; interface Props { + index: 0 | 1; mobileView: boolean; source?: SourceImage; encoderState?: EncoderState; processorState: ProcessorState; - onEncoderTypeChange(newType: OutputType): void; - onEncoderOptionsChange(newOptions: EncoderOptions): void; - onProcessorOptionsChange(newOptions: ProcessorState): void; + onEncoderTypeChange(index: 0 | 1, newType: OutputType): void; + onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void; + onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void; } interface State { @@ -73,7 +74,7 @@ export default class Options extends Component { // The select element only has values matching encoder types, // so 'as' is safe here. const type = el.value as OutputType; - this.props.onEncoderTypeChange(type); + this.props.onEncoderTypeChange(this.props.index, type); }; private onProcessorEnabledChange = (event: Event) => { @@ -81,24 +82,31 @@ export default class Options extends Component { const processor = el.name.split('.')[0] as keyof ProcessorState; this.props.onProcessorOptionsChange( + this.props.index, cleanSet(this.props.processorState, `${processor}.enabled`, el.checked), ); }; private onQuantizerOptionsChange = (opts: ProcessorOptions['quantize']) => { this.props.onProcessorOptionsChange( + this.props.index, cleanMerge(this.props.processorState, 'quantize', opts), ); }; private onResizeOptionsChange = (opts: ProcessorOptions['resize']) => { this.props.onProcessorOptionsChange( + this.props.index, cleanMerge(this.props.processorState, 'resize', opts), ); }; + private onEncoderOptionsChange = (newOptions: EncoderOptions) => { + this.props.onEncoderOptionsChange(this.props.index, newOptions); + }; + render( - { source, encoderState, processorState, onEncoderOptionsChange }: Props, + { source, encoderState, processorState }: Props, { supportedEncoderMap }: State, ) { const encoder = encoderState && encoderMap[encoderState.type]; @@ -180,7 +188,7 @@ export default class Options extends Component { // the correct type, but typescript isn't smart enough. encoderState!.options as any } - onChange={onEncoderOptionsChange} + onChange={this.onEncoderOptionsChange} /> )} diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx index 936c28ad..78f97cb4 100644 --- a/src/client/lazy-app/Compress/index.tsx +++ b/src/client/lazy-app/Compress/index.tsx @@ -319,7 +319,7 @@ export default class Compress extends Component { this.setState({ mobileView: this.widthQuery.matches }); }; - private onEncoderTypeChange(index: 0 | 1, newType: OutputType): void { + private onEncoderTypeChange = (index: 0 | 1, newType: OutputType): void => { this.setState({ sides: cleanSet( this.state.sides, @@ -332,12 +332,12 @@ export default class Compress extends Component { }, ), }); - } + }; - private onProcessorOptionsChange( + private onProcessorOptionsChange = ( index: 0 | 1, options: ProcessorState, - ): void { + ): void => { this.setState({ sides: cleanSet( this.state.sides, @@ -345,9 +345,12 @@ export default class Compress extends Component { options, ), }); - } + }; - private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void { + private onEncoderOptionsChange = ( + index: 0 | 1, + options: EncoderOptions, + ): void => { this.setState({ sides: cleanSet( this.state.sides, @@ -355,7 +358,7 @@ export default class Compress extends Component { options, ), }); - } + }; componentWillReceiveProps(nextProps: Props): void { if (nextProps.file !== this.props.file) { @@ -794,22 +797,14 @@ export default class Compress extends Component { const options = sides.map((side, index) => ( ));