mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-14 09:39:15 +00:00
Extra Wp2 Options (#853)
* wip * wip * Add extra options * Even more options! * Update src/features/encoders/wp2/client/index.tsx Co-authored-by: Surma <surma@surma.dev> Co-authored-by: Surma <surma@surma.dev>
This commit is contained in:
Jake Archibald
GitHub
@@ -1,9 +1,14 @@
|
||||
import { EncodeOptions } from '../shared/meta';
|
||||
import { EncodeOptions, UVMode, Csp } from '../shared/meta';
|
||||
import { defaultOptions } from '../shared/meta';
|
||||
import type WorkerBridge from 'client/lazy-app/worker-bridge';
|
||||
import { h, Component } from 'preact';
|
||||
import { inputFieldValueAsNumber, preventDefault } from 'client/lazy-app/util';
|
||||
import { preventDefault, shallowEqual } from 'client/lazy-app/util';
|
||||
import * as style from 'client/lazy-app/Compress/Options/style.css';
|
||||
import Range from 'client/lazy-app/Compress/Options/Range';
|
||||
import Select from 'client/lazy-app/Compress/Options/Select';
|
||||
import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';
|
||||
import Expander from 'client/lazy-app/Compress/Options/Expander';
|
||||
import linkState from 'linkstate';
|
||||
|
||||
export const encode = (
|
||||
signal: AbortSignal,
|
||||
@@ -18,93 +23,286 @@ interface Props {
|
||||
}
|
||||
|
||||
interface State {
|
||||
options: EncodeOptions;
|
||||
effort: number;
|
||||
quality: number;
|
||||
alphaQuality: number;
|
||||
passes: number;
|
||||
sns: number;
|
||||
uvMode: number;
|
||||
lossless: boolean;
|
||||
slightLoss: number;
|
||||
colorSpace: number;
|
||||
errorDiffusion: number;
|
||||
useRandomMatrix: boolean;
|
||||
showAdvanced: boolean;
|
||||
separateAlpha: boolean;
|
||||
}
|
||||
|
||||
export class Options extends Component<Props, State> {
|
||||
state: State = {
|
||||
showAdvanced: false,
|
||||
};
|
||||
static getDerivedStateFromProps(
|
||||
props: Props,
|
||||
state: State,
|
||||
): Partial<State> | null {
|
||||
if (state.options && shallowEqual(state.options, props.options)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
private onChange = (event: Event) => {
|
||||
const form = (event.currentTarget as HTMLInputElement).closest(
|
||||
'form',
|
||||
) as HTMLFormElement;
|
||||
const { options } = this.props;
|
||||
const newOptions: EncodeOptions = {
|
||||
quality: inputFieldValueAsNumber(form.quality, options.quality),
|
||||
alpha_quality: inputFieldValueAsNumber(
|
||||
form.alpha_quality,
|
||||
options.alpha_quality,
|
||||
),
|
||||
speed: inputFieldValueAsNumber(form.speed, options.speed),
|
||||
pass: inputFieldValueAsNumber(form.pass, options.pass),
|
||||
sns: inputFieldValueAsNumber(form.sns, options.sns),
|
||||
const { options } = props;
|
||||
|
||||
const modifyState: Partial<State> = {
|
||||
options,
|
||||
effort: options.speed,
|
||||
alphaQuality: options.alpha_quality,
|
||||
passes: options.pass,
|
||||
sns: options.sns,
|
||||
uvMode: options.uv_mode,
|
||||
colorSpace: options.csp_type,
|
||||
errorDiffusion: options.error_diffusion,
|
||||
useRandomMatrix: options.use_random_matrix,
|
||||
separateAlpha: options.quality !== options.alpha_quality,
|
||||
};
|
||||
this.props.onChange(newOptions);
|
||||
|
||||
// If quality is > 95, it's lossless with slight loss
|
||||
if (options.quality > 95) {
|
||||
modifyState.lossless = true;
|
||||
modifyState.slightLoss = 100 - options.quality;
|
||||
} else {
|
||||
modifyState.quality = options.quality;
|
||||
modifyState.lossless = false;
|
||||
}
|
||||
|
||||
return modifyState;
|
||||
}
|
||||
|
||||
// Other state is set in getDerivedStateFromProps
|
||||
state: State = {
|
||||
lossless: false,
|
||||
slightLoss: 0,
|
||||
quality: defaultOptions.quality,
|
||||
showAdvanced: false,
|
||||
} as State;
|
||||
|
||||
private _inputChangeCallbacks = new Map<string, (event: Event) => void>();
|
||||
|
||||
private _inputChange = (prop: keyof State, type: 'number' | 'boolean') => {
|
||||
// Cache the callback for performance
|
||||
if (!this._inputChangeCallbacks.has(prop)) {
|
||||
this._inputChangeCallbacks.set(prop, (event: Event) => {
|
||||
const formEl = event.target as HTMLInputElement | HTMLSelectElement;
|
||||
const newVal =
|
||||
type === 'boolean'
|
||||
? 'checked' in formEl
|
||||
? formEl.checked
|
||||
: !!formEl.value
|
||||
: Number(formEl.value);
|
||||
|
||||
const newState: Partial<State> = {
|
||||
[prop]: newVal,
|
||||
};
|
||||
|
||||
const optionState = {
|
||||
...this.state,
|
||||
...newState,
|
||||
};
|
||||
|
||||
const newOptions: EncodeOptions = {
|
||||
speed: optionState.effort,
|
||||
quality: optionState.lossless
|
||||
? 100 - optionState.slightLoss
|
||||
: optionState.quality,
|
||||
alpha_quality: optionState.separateAlpha
|
||||
? optionState.alphaQuality
|
||||
: optionState.quality,
|
||||
pass: optionState.passes,
|
||||
sns: optionState.sns,
|
||||
uv_mode: optionState.uvMode,
|
||||
csp_type: optionState.colorSpace,
|
||||
error_diffusion: optionState.errorDiffusion,
|
||||
use_random_matrix: optionState.useRandomMatrix,
|
||||
};
|
||||
|
||||
// Updating options, so we don't recalculate in getDerivedStateFromProps.
|
||||
newState.options = newOptions;
|
||||
|
||||
this.setState(newState);
|
||||
|
||||
this.props.onChange(newOptions);
|
||||
});
|
||||
}
|
||||
|
||||
return this._inputChangeCallbacks.get(prop)!;
|
||||
};
|
||||
|
||||
render({ options }: Props) {
|
||||
render(
|
||||
{}: Props,
|
||||
{
|
||||
effort,
|
||||
alphaQuality,
|
||||
passes,
|
||||
quality,
|
||||
sns,
|
||||
uvMode,
|
||||
lossless,
|
||||
slightLoss,
|
||||
colorSpace,
|
||||
errorDiffusion,
|
||||
useRandomMatrix,
|
||||
separateAlpha,
|
||||
showAdvanced,
|
||||
}: State,
|
||||
) {
|
||||
return (
|
||||
<form class={style.optionsSection} onSubmit={preventDefault}>
|
||||
<label class={style.optionInputFirst}>
|
||||
<Checkbox
|
||||
checked={lossless}
|
||||
onChange={this._inputChange('lossless', 'boolean')}
|
||||
/>
|
||||
Lossless
|
||||
</label>
|
||||
<Expander>
|
||||
{lossless && (
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
min="0"
|
||||
max="5"
|
||||
step="0.1"
|
||||
value={slightLoss}
|
||||
onInput={this._inputChange('slightLoss', 'number')}
|
||||
>
|
||||
Slight loss:
|
||||
</Range>
|
||||
</div>
|
||||
)}
|
||||
</Expander>
|
||||
<Expander>
|
||||
{!lossless && (
|
||||
<div>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
min="0"
|
||||
max="95"
|
||||
step="0.1"
|
||||
value={quality}
|
||||
onInput={this._inputChange('quality', 'number')}
|
||||
>
|
||||
Quality:
|
||||
</Range>
|
||||
</div>
|
||||
<label class={style.optionInputFirst}>
|
||||
<Checkbox
|
||||
checked={separateAlpha}
|
||||
onChange={this._inputChange('separateAlpha', 'boolean')}
|
||||
/>
|
||||
Separate alpha quality
|
||||
</label>
|
||||
<Expander>
|
||||
{separateAlpha && (
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
value={alphaQuality}
|
||||
onInput={this._inputChange('alphaQuality', 'number')}
|
||||
>
|
||||
Alpha Quality:
|
||||
</Range>
|
||||
</div>
|
||||
)}
|
||||
</Expander>
|
||||
<label class={style.optionInputFirst}>
|
||||
<Checkbox
|
||||
checked={showAdvanced}
|
||||
onChange={linkState(this, 'showAdvanced')}
|
||||
/>
|
||||
Show advanced settings
|
||||
</label>
|
||||
<Expander>
|
||||
{showAdvanced && (
|
||||
<div>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
value={passes}
|
||||
onInput={this._inputChange('passes', 'number')}
|
||||
>
|
||||
Passes:
|
||||
</Range>
|
||||
</div>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
value={sns}
|
||||
onInput={this._inputChange('sns', 'number')}
|
||||
>
|
||||
Spatial noise shaping:
|
||||
</Range>
|
||||
</div>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
value={errorDiffusion}
|
||||
onInput={this._inputChange('errorDiffusion', 'number')}
|
||||
>
|
||||
Error diffusion:
|
||||
</Range>
|
||||
</div>
|
||||
<label class={style.optionTextFirst}>
|
||||
Subsample chroma:
|
||||
<Select
|
||||
value={uvMode}
|
||||
onInput={this._inputChange('uvMode', 'number')}
|
||||
>
|
||||
<option value={UVMode.UVModeAuto}>Auto</option>
|
||||
<option value={UVMode.UVModeAdapt}>Vary</option>
|
||||
<option value={UVMode.UVMode420}>Half</option>
|
||||
<option value={UVMode.UVMode444}>Off</option>
|
||||
</Select>
|
||||
</label>
|
||||
<label class={style.optionTextFirst}>
|
||||
Color space:
|
||||
<Select
|
||||
value={colorSpace}
|
||||
onInput={this._inputChange('colorSpace', 'number')}
|
||||
>
|
||||
<option value={Csp.kYCoCg}>YCoCg</option>
|
||||
<option value={Csp.kYCbCr}>YCbCr</option>
|
||||
<option value={Csp.kYIQ}>YIQ</option>
|
||||
</Select>
|
||||
</label>
|
||||
<label class={style.optionInputFirst}>
|
||||
<Checkbox
|
||||
checked={useRandomMatrix}
|
||||
onChange={this._inputChange(
|
||||
'useRandomMatrix',
|
||||
'boolean',
|
||||
)}
|
||||
/>
|
||||
Random matrix
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</Expander>
|
||||
</div>
|
||||
)}
|
||||
</Expander>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
name="quality"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
value={options.quality}
|
||||
onInput={this.onChange}
|
||||
>
|
||||
Quality:
|
||||
</Range>
|
||||
</div>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
name="alpha_quality"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
value={options.alpha_quality}
|
||||
onInput={this.onChange}
|
||||
>
|
||||
Alpha Quality:
|
||||
</Range>
|
||||
</div>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
name="speed"
|
||||
min="0"
|
||||
max="9"
|
||||
step="1"
|
||||
value={options.speed}
|
||||
onInput={this.onChange}
|
||||
value={effort}
|
||||
onInput={this._inputChange('effort', 'number')}
|
||||
>
|
||||
Speed:
|
||||
</Range>
|
||||
</div>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
name="pass"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
value={options.pass}
|
||||
onInput={this.onChange}
|
||||
>
|
||||
Pass:
|
||||
</Range>
|
||||
</div>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
name="sns"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
value={options.sns}
|
||||
onInput={this.onChange}
|
||||
>
|
||||
Spatial noise shaping:
|
||||
Effort:
|
||||
</Range>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user