diff --git a/assets/src/dashboard/parts/connected/settings/Compression.js b/assets/src/dashboard/parts/connected/settings/Compression.js index b71026ca..bc965a9e 100644 --- a/assets/src/dashboard/parts/connected/settings/Compression.js +++ b/assets/src/dashboard/parts/connected/settings/Compression.js @@ -23,6 +23,8 @@ import { import { useSelect } from '@wordpress/data'; +import { useRef } from '@wordpress/element'; + /** * Internal dependencies. */ @@ -38,6 +40,31 @@ const Compression = ({ isSampleLoading, setIsSampleLoading }) => { + const getQuality = value => { + if ( 'number' === typeof value ) { + return value; + } + + if ( 'auto' === value ) { + return 80; + } + + if ( 'high_c' === value ) { + return 90; + } + + if ( 'medium_c' === value ) { + return 75; + } + + if ( 'low_c' === value ) { + return 55; + } + + return 80; + }; + + const manualQualityRef = useRef( getQuality( settings.quality ) ); const { sampleImages, isLoading @@ -61,6 +88,14 @@ const Compression = ({ const isBestFormatEnabled = 'disabled' !== settings[ 'best_format' ]; const compressionMode = settings[ 'compression_mode' ]; const isRetinaEnabled = 'disabled' !== settings[ 'retina_images' ]; + + useEffect( () => { + if ( isAutoQualityEnabled ) { + return; + } + + manualQualityRef.current = getQuality( settings.quality ); + }, [ isAutoQualityEnabled, settings.quality ]); const updateOption = ( option, value ) => { setCanSave( true ); const data = { ...settings }; @@ -68,6 +103,21 @@ const Compression = ({ setSettings( data ); }; + const handleAutoQualityToggle = value => { + setCanSave( true ); + const data = { ...settings }; + data.autoquality = value ? 'enabled' : 'disabled'; + if ( value ) { + manualQualityRef.current = getQuality( settings.quality ); + data.quality = 'mauto'; + } else { + const manualQuality = manualQualityRef.current ?? getQuality( settings.quality ); + manualQualityRef.current = manualQuality; + data.quality = manualQuality; + } + setSettings( data ); + }; + const loadSample = () => { setIsSampleLoading( true ); @@ -80,34 +130,11 @@ const Compression = ({ ); }; - const getQuality = value => { - if ( 'number' === typeof value ) { - return value; - } - - if ( 'auto' === value ) { - return 90; - } - - if ( 'high_c' === value ) { - return 90; - } - - if ( 'medium_c' === value ) { - return 75; - } - - if ( 'low_c' === value ) { - return 55; - } - - return 90; - }; - const updateQuality = value => { setCanSave( true ); const data = { ...settings }; data.quality = value; + manualQualityRef.current = value; setSettings( data ); }; @@ -316,7 +343,7 @@ const Compression = ({ 'is-disabled': isLoading } ) } - onChange={ value => updateOption( 'autoquality', value ) } + onChange={ handleAutoQualityToggle } /> diff --git a/inc/settings.php b/inc/settings.php index de6ab74e..72aa461d 100644 --- a/inc/settings.php +++ b/inc/settings.php @@ -280,7 +280,7 @@ public function parse_settings( $new_settings ) { $sanitized_value = $this->to_bound_integer( $value, 100, 5000 ); break; case 'quality': - $sanitized_value = $this->to_bound_integer( $value, 1, 100 ); + $sanitized_value = $this->to_bound_integer( $value, 50, 100 ); break; case 'wm_id': $sanitized_value = intval( $value );