feat(settings): add an option to set auto screen brightness (#2297)

apps/readest-app/src/components/Providers.tsx

@@ -46,7 +46,8 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
         const globalViewSettings = settings.globalViewSettings;
         applyUILanguage(globalViewSettings.uiLanguage);
         const brightness = settings.screenBrightness;
-        if (appService.hasScreenBrightness && brightness >= 0) {
+        const autoBrightness = settings.autoScreenBrightness;
+        if (appService.hasScreenBrightness && !autoBrightness && brightness >= 0) {
           setScreenBrightness(brightness / 100);
         }
         applyBackgroundTexture(envConfig, globalViewSettings);

apps/readest-app/src/components/settings/ControlPanel.tsx

@@ -10,7 +10,7 @@ import { useEinkMode } from '@/hooks/useEinkMode';
 import { getStyles } from '@/utils/style';
 import { saveAndReload } from '@/utils/reload';
 import { getMaxInlineSize } from '@/utils/config';
-import { saveViewSettings } from '@/helpers/settings';
+import { saveSysSettings, saveViewSettings } from '@/helpers/settings';
 import { SettingsPanelPanelProp } from './SettingsDialog';
 import NumberInput from './NumberInput';
 
@@ -34,6 +34,7 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
   const [isDisableDoubleClick, setIsDisableDoubleClick] = useState(viewSettings.disableDoubleClick);
   const [animated, setAnimated] = useState(viewSettings.animated);
   const [isEink, setIsEink] = useState(viewSettings.isEink);
+  const [autoScreenBrightness, setAutoScreenBrightness] = useState(settings.autoScreenBrightness);
   const [allowScript, setAllowScript] = useState(viewSettings.allowScript);
 
   const resetToDefaults = useResetViewSettings();
@@ -128,6 +129,12 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEink]);
 
+  useEffect(() => {
+    if (autoScreenBrightness === settings.autoScreenBrightness) return;
+    saveSysSettings(envConfig, 'autoScreenBrightness', autoScreenBrightness);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoScreenBrightness]);
+
   useEffect(() => {
     if (viewSettings.allowScript === allowScript) return;
     saveViewSettings(envConfig, bookKey, 'allowScript', allowScript, true, false);
@@ -236,18 +243,29 @@ const ControlPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRes
         </div>
       </div>
 
-      {appService?.isAndroidApp && (
+      {appService?.isMobileApp && (
         <div className='w-full'>
           <h2 className='mb-2 font-medium'>{_('Device')}</h2>
           <div className='card border-base-200 bg-base-100 border shadow'>
             <div className='divide-base-200 divide-y'>
+              {appService?.isAndroidApp && (
+                <div className='config-item'>
+                  <span className=''>{_('E-Ink Mode')}</span>
+                  <input
+                    type='checkbox'
+                    className='toggle'
+                    checked={isEink}
+                    onChange={() => setIsEink(!isEink)}
+                  />
+                </div>
+              )}
               <div className='config-item'>
-                <span className=''>{_('E-Ink Mode')}</span>
+                <span className=''>{_('Auto Screen Brightness')}</span>
                 <input
                   type='checkbox'
                   className='toggle'
-                  checked={isEink}
-                  onChange={() => setIsEink(!isEink)}
+                  checked={autoScreenBrightness}
+                  onChange={() => setAutoScreenBrightness(!autoScreenBrightness)}
                 />
               </div>
             </div>