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

apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx

@@ -26,7 +26,7 @@ interface ColorPanelProps {
 export const ColorPanel: React.FC<ColorPanelProps> = ({ actionTab, bottomOffset }) => {
   const _ = useTranslation();
   const { envConfig, appService } = useEnv();
-  const { settings, setSettings } = useSettingsStore();
+  const { settings } = useSettingsStore();
   const { getScreenBrightness, setScreenBrightness } = useDeviceControlStore();
   const { themeMode, themeColor, isDarkMode, setThemeMode, setThemeColor } = useThemeStore();
 
@@ -36,7 +36,7 @@ export const ColorPanel: React.FC<ColorPanelProps> = ({ actionTab, bottomOffset
 
   useEffect(() => {
     if (!appService?.isMobileApp) return;
-    if (settings.screenBrightness >= 0) return;
+    if (actionTab !== 'color') return;
 
     getScreenBrightness().then((brightness) => {
       if (brightness >= 0.0 && brightness <= 1.0) {
@@ -44,12 +44,13 @@ export const ColorPanel: React.FC<ColorPanelProps> = ({ actionTab, bottomOffset
         setScreenBrightnessValue(screenBrightness);
       }
     });
-  }, [appService, settings, setSettings, getScreenBrightness]);
+  }, [actionTab, appService, getScreenBrightness]);
 
   const debouncedSetScreenBrightness = useMemo(
     () =>
       debounce(async (value: number) => {
         saveSysSettings(envConfig, 'screenBrightness', value);
+        saveSysSettings(envConfig, 'autoScreenBrightness', false);
         await setScreenBrightness(value / 100);
       }, 100),
     [envConfig, setScreenBrightness],

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>

apps/readest-app/src/services/constants.ts

@@ -62,6 +62,7 @@ export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
   autoCheckUpdates: true,
   screenWakeLock: false,
   screenBrightness: -1, // -1~100, -1 for system default
+  autoScreenBrightness: true,
   openLastBooks: false,
   lastOpenBooks: [],
   autoImportBooksOnOpen: false,

apps/readest-app/src/types/settings.ts

@@ -49,6 +49,7 @@ export interface SystemSettings {
   autoCheckUpdates: boolean;
   screenWakeLock: boolean;
   screenBrightness: number;
+  autoScreenBrightness: boolean;
   alwaysShowStatusBar: boolean;
   alwaysInForeground: boolean;
   openLastBooks: boolean;

apps/readest-app/src/utils/bridge.ts

@@ -172,13 +172,6 @@ export async function getScreenBrightness(): Promise<GetScreenBrightnessResponse
   return result;
 }
 
-export async function getExternalSDCardPath(): Promise<GetExternalSDCardPathResponse> {
-  const result = await invoke<GetExternalSDCardPathResponse>(
-    'plugin:native-bridge|get_external_sdcard_path',
-  );
-  return result;
-}
-
 export async function setScreenBrightness(
   request: SetScreenBrightnessRequest,
 ): Promise<SetScreenBrightnessResponse> {
@@ -190,3 +183,10 @@ export async function setScreenBrightness(
   );
   return result;
 }
+
+export async function getExternalSDCardPath(): Promise<GetExternalSDCardPathResponse> {
+  const result = await invoke<GetExternalSDCardPathResponse>(
+    'plugin:native-bridge|get_external_sdcard_path',
+  );
+  return result;
+}