+
= ({
return (progressInfo.current + 1) / progressInfo.total;
}, [progressValid, progressInfo]);
- const handleProgressChange = useCallback(
- (value: number) => {
- view?.goToFraction(value / 100.0);
- },
+ const handleProgressChange = useMemo(
+ () =>
+ debounce((value: number) => {
+ view?.goToFraction(value / 100.0);
+ }, 100),
[view],
);
diff --git a/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx
index 36ed2ae3..1bb2c1d1 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx
@@ -1,9 +1,10 @@
import React from 'react';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { FooterBarChildProps } from './types';
import { NavigationPanel } from './NavigationPanel';
import { FontLayoutPanel } from './FontLayoutPanel';
+import { ColorPanel } from './ColorPanel';
import { NavigationBar } from './NavigationBar';
-import { FooterBarChildProps } from './types';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
const MobileFooterBar: React.FC = ({
bookKey,
@@ -22,8 +23,9 @@ const MobileFooterBar: React.FC = ({
return (
<>
+
= ({
/>
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
index 9c0e95bb..d211280c 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
@@ -1,9 +1,9 @@
import clsx from 'clsx';
import React from 'react';
import { IoIosList as TOCIcon } from 'react-icons/io';
-import { PiNotePencil as NoteIcon } from 'react-icons/pi';
import { RxSlider as SliderIcon } from 'react-icons/rx';
import { RiFontFamily as FontIcon } from 'react-icons/ri';
+import { PiSun as ColorIcon } from 'react-icons/pi';
import { MdOutlineHeadphones as TTSIcon } from 'react-icons/md';
import { useReaderStore } from '@/store/readerStore';
import { useTranslation } from '@/hooks/useTranslation';
@@ -39,7 +39,11 @@ export const NavigationBar: React.FC = ({
icon={}
onClick={() => onSetActionTab('toc')}
/>
- } onClick={() => onSetActionTab('note')} />
+ }
+ onClick={() => onSetActionTab('color')}
+ />
}
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
index edf2a30c..89396190 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import clsx from 'clsx';
+import React, { useCallback, useEffect } from 'react';
import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
@@ -30,6 +30,25 @@ export const NavigationPanel: React.FC = ({
sliderHeight,
}) => {
const _ = useTranslation();
+
+ const [progressValue, setProgressValue] = React.useState(
+ progressValid ? progressFraction * 100 : 0,
+ );
+
+ useEffect(() => {
+ if (progressValid) {
+ setProgressValue(progressFraction * 100);
+ }
+ }, [progressValid, progressFraction]);
+
+ const handleProgressChange = useCallback(
+ (value: number) => {
+ setProgressValue(value);
+ navigationHandlers.onProgressChange(value);
+ },
+ [navigationHandlers],
+ );
+
const classes = clsx(
'footerbar-progress-mobile bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all sm:hidden',
actionTab === 'progress'
@@ -43,9 +62,9 @@ export const NavigationPanel: React.FC = ({
diff --git a/apps/readest-app/src/components/Providers.tsx b/apps/readest-app/src/components/Providers.tsx
index 48fcffa9..a5cc14ad 100644
--- a/apps/readest-app/src/components/Providers.tsx
+++ b/apps/readest-app/src/components/Providers.tsx
@@ -9,6 +9,7 @@ import { CSPostHogProvider } from '@/context/PHContext';
import { SyncProvider } from '@/context/SyncContext';
import { initSystemThemeListener, loadDataTheme } from '@/store/themeStore';
import { useSettingsStore } from '@/store/settingsStore';
+import { useDeviceControlStore } from '@/store/deviceStore';
import { useDefaultIconSize } from '@/hooks/useResponsiveSize';
import { useSafeAreaInsets } from '@/hooks/useSafeAreaInsets';
import { getLocale } from '@/utils/misc';
@@ -16,6 +17,7 @@ import { getLocale } from '@/utils/misc';
const Providers = ({ children }: { children: React.ReactNode }) => {
const { appService } = useEnv();
const { applyUILanguage } = useSettingsStore();
+ const { setScreenBrightness } = useDeviceControlStore();
const iconSize = useDefaultIconSize();
useSafeAreaInsets(); // Initialize safe area insets
@@ -38,9 +40,13 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
initSystemThemeListener(appService);
appService.loadSettings().then((settings) => {
applyUILanguage(settings.globalViewSettings?.uiLanguage);
+ const brightness = settings.screenBrightness;
+ if (appService.hasScreenBrightness && brightness >= 0) {
+ setScreenBrightness(brightness / 100);
+ }
});
}
- }, [appService, applyUILanguage]);
+ }, [appService, applyUILanguage, setScreenBrightness]);
// Make sure appService is available in all children components
if (!appService) return;
diff --git a/apps/readest-app/src/components/Slider.tsx b/apps/readest-app/src/components/Slider.tsx
index 1d6f53de..cee4406f 100644
--- a/apps/readest-app/src/components/Slider.tsx
+++ b/apps/readest-app/src/components/Slider.tsx
@@ -9,6 +9,8 @@ interface SliderProps {
heightPx?: number;
minLabel?: string;
maxLabel?: string;
+ minIcon?: React.ReactNode;
+ maxIcon?: React.ReactNode;
bubbleElement?: React.ReactNode;
bubbleLabel?: string;
className?: string;
@@ -27,6 +29,8 @@ const Slider: React.FC
= ({
heightPx = 40,
minLabel = '',
maxLabel = '',
+ minIcon,
+ maxIcon,
bubbleElement,
bubbleLabel = '',
className = '',
@@ -63,6 +67,7 @@ const Slider: React.FC = ({
}, [initialValue]);
const percentage = ((value - min) / (max - min)) * 100;
+ const visualPercentage = (percentage / 100) * 95;
return (
= ({
className='bg-base-300 absolute h-full rounded-full'
style={{
width:
- percentage > 0
- ? `max(calc(${percentage}% + ${heightPx / 2}px), ${heightPx}px)`
+ visualPercentage > 0
+ ? `max(calc(${visualPercentage}% + ${heightPx / 2}px), ${heightPx}px)`
: '0px',
[isRtl ? 'right' : 'left']: 0,
}}
>
{/* Min/Max labels */}
- {minLabel}
- {maxLabel}
+ {minIcon ? minIcon : {minLabel}}
+ {maxIcon ? maxIcon : {maxLabel}}
{/* Thumb bubble */}
= {
alwaysInForeground: false,
autoCheckUpdates: true,
screenWakeLock: false,
+ screenBrightness: -1, // -1~100, -1 for system default
openLastBooks: false,
lastOpenBooks: [],
autoImportBooksOnOpen: false,
diff --git a/apps/readest-app/src/services/nativeAppService.ts b/apps/readest-app/src/services/nativeAppService.ts
index eb6cb1dc..bb7dab5e 100644
--- a/apps/readest-app/src/services/nativeAppService.ts
+++ b/apps/readest-app/src/services/nativeAppService.ts
@@ -348,6 +348,7 @@ export class NativeAppService extends BaseAppService {
// orientation lock is not supported on iPad
override hasOrientationLock =
(OS_TYPE === 'ios' && getOSPlatform() === 'ios') || OS_TYPE === 'android';
+ override hasScreenBrightness = OS_TYPE === 'ios' || OS_TYPE === 'android';
// CustomizeRootDir has a blocker on macOS App Store builds due to Security Scoped Resource restrictions.
// See: https://github.com/tauri-apps/tauri/issues/3716
override canCustomizeRootDir = process.env['NEXT_PUBLIC_DIST_CHANNEL'] !== 'appstore';
diff --git a/apps/readest-app/src/store/deviceStore.ts b/apps/readest-app/src/store/deviceStore.ts
index 4ba11270..218b6ca7 100644
--- a/apps/readest-app/src/store/deviceStore.ts
+++ b/apps/readest-app/src/store/deviceStore.ts
@@ -1,5 +1,5 @@
import { create } from 'zustand';
-import { interceptKeys } from '@/utils/bridge';
+import { interceptKeys, getScreenBrightness, setScreenBrightness } from '@/utils/bridge';
import { eventDispatcher } from '@/utils/event';
declare global {
@@ -23,6 +23,8 @@ type DeviceControlState = {
backKeyIntercepted: boolean;
volumeKeysInterceptionCount: number;
backKeyInterceptionCount: number;
+ getScreenBrightness: () => Promise; // 0.0 to 1.0
+ setScreenBrightness: (brightness: number) => Promise; // brightness: 0.0 to 1.0
acquireVolumeKeyInterception: () => void;
releaseVolumeKeyInterception: () => void;
acquireBackKeyInterception: () => void;
@@ -74,4 +76,13 @@ export const useDeviceControlStore = create((set, get) => ({
set({ backKeyInterceptionCount: backKeyInterceptionCount - 1 });
}
},
+
+ getScreenBrightness: async () => {
+ const res = await getScreenBrightness();
+ return res.brightness;
+ },
+
+ setScreenBrightness: async (brightness: number) => {
+ await setScreenBrightness({ brightness });
+ },
}));
diff --git a/apps/readest-app/src/types/settings.ts b/apps/readest-app/src/types/settings.ts
index 71b4832a..d7771a20 100644
--- a/apps/readest-app/src/types/settings.ts
+++ b/apps/readest-app/src/types/settings.ts
@@ -46,6 +46,7 @@ export interface SystemSettings {
openBookInNewWindow: boolean;
autoCheckUpdates: boolean;
screenWakeLock: boolean;
+ screenBrightness: number;
alwaysShowStatusBar: boolean;
alwaysInForeground: boolean;
openLastBooks: boolean;
diff --git a/apps/readest-app/src/types/system.ts b/apps/readest-app/src/types/system.ts
index 8e4ead99..a71de455 100644
--- a/apps/readest-app/src/types/system.ts
+++ b/apps/readest-app/src/types/system.ts
@@ -51,6 +51,7 @@ export interface AppService {
hasHaptics: boolean;
hasUpdater: boolean;
hasOrientationLock: boolean;
+ hasScreenBrightness: boolean;
isMobile: boolean;
isAppDataSandbox: boolean;
isMobileApp: boolean;
diff --git a/apps/readest-app/src/utils/bridge.ts b/apps/readest-app/src/utils/bridge.ts
index 9606ecf9..40413ae9 100644
--- a/apps/readest-app/src/utils/bridge.ts
+++ b/apps/readest-app/src/utils/bridge.ts
@@ -65,6 +65,20 @@ export interface GetSafeAreaInsetsResponse {
error?: string;
}
+interface GetScreenBrightnessResponse {
+ brightness: number; // 0.0 to 1.0
+ error?: string;
+}
+
+interface SetScreenBrightnessRequest {
+ brightness: number; // 0.0 to 1.0
+}
+
+interface SetScreenBrightnessResponse {
+ success: boolean;
+ error?: string;
+}
+
export async function copyURIToPath(request: CopyURIRequest): Promise {
const result = await invoke('plugin:native-bridge|copy_uri_to_path', {
payload: request,
@@ -145,3 +159,22 @@ export async function getSafeAreaInsets(): Promise {
);
return result;
}
+
+export async function getScreenBrightness(): Promise {
+ const result = await invoke(
+ 'plugin:native-bridge|get_screen_brightness',
+ );
+ return result;
+}
+
+export async function setScreenBrightness(
+ request: SetScreenBrightnessRequest,
+): Promise {
+ const result = await invoke(
+ 'plugin:native-bridge|set_screen_brightness',
+ {
+ payload: request,
+ },
+ );
+ return result;
+}