Improve quality setting handling in Compression settings

Refactored the Compression.js component to better handle toggling between auto and manual quality settings, preserving the user's manual quality value when switching modes. Updated the minimum allowed quality value in settings.php from 1 to 50 for better image quality control.

Author: ineagu

assets/src/dashboard/parts/connected/settings/Compression.js

@@ -24,6 +24,8 @@ import {
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
+import { useEffect, useRef } from '@wordpress/element';
+
 /**
  * Internal dependencies.
  */
@@ -39,6 +41,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
@@ -60,13 +87,36 @@ 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 };
 		data[ option ] = value ? 'enabled' : 'disabled';
 		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 );
 
@@ -79,34 +129,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 );
 	};
 
@@ -296,18 +323,18 @@ const Compression = ({
 					<BaseControl
 						help={ ! isAutoQualityEnabled && optimoleDashboardApp.strings.options_strings.quality_desc }
 					>
-						<ToggleControl
-							label={ optimoleDashboardApp.strings.options_strings.quality_title }
-							help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.ml_quality_desc } } /> }
-							checked={ isAutoQualityEnabled }
-							disabled={ isLoading }
-							className={ classnames(
-								{
-									'is-disabled': isLoading
-								}
-							) }
-							onChange={ value => updateOption( 'autoquality', value ) }
-						/>
+					<ToggleControl
+						label={ optimoleDashboardApp.strings.options_strings.quality_title }
+						help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.ml_quality_desc } } /> }
+						checked={ isAutoQualityEnabled }
+						disabled={ isLoading }
+						className={ classnames(
+							{
+								'is-disabled': isLoading
+							}
+						) }
+						onChange={ handleAutoQualityToggle }
+					/>
 					</BaseControl>
 
 					{ ! isAutoQualityEnabled && (

inc/settings.php

@@ -278,7 +278,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 );