= ({
isVisible ? 'visible' : 'hidden',
)}
style={{
- height: systemUIVisible ? 'max(env(safe-area-inset-top), 24px)' : '',
+ height: systemUIVisible ? `max(env(safe-area-inset-top), ${statusBarHeight}px)` : '',
}}
/>
= ({
)}
style={{
marginTop: systemUIVisible
- ? 'max(env(safe-area-inset-top), 24px)'
+ ? `max(env(safe-area-inset-top), ${statusBarHeight}px)`
: 'env(safe-area-inset-top)',
}}
onMouseLeave={() => !appService?.isMobile && setHoveredBookKey('')}
diff --git a/apps/readest-app/src/app/reader/components/Reader.tsx b/apps/readest-app/src/app/reader/components/Reader.tsx
index 2cb23066..116da7e2 100644
--- a/apps/readest-app/src/app/reader/components/Reader.tsx
+++ b/apps/readest-app/src/app/reader/components/Reader.tsx
@@ -21,8 +21,8 @@ import ReaderContent from './ReaderContent';
const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
const { envConfig, appService } = useEnv();
const { settings, setSettings } = useSettingsStore();
- const { isDarkMode } = useThemeStore();
- const { hoveredBookKey, showSystemUI, dismissSystemUI } = useReaderStore();
+ const { isDarkMode, showSystemUI, dismissSystemUI } = useThemeStore();
+ const { hoveredBookKey } = useReaderStore();
const { isSideBarVisible } = useSidebarStore();
const { setLibrary } = useLibraryStore();
const [libraryLoaded, setLibraryLoaded] = useState(false);
diff --git a/apps/readest-app/src/hooks/useTheme.ts b/apps/readest-app/src/hooks/useTheme.ts
index ad32b118..ccdfacd4 100644
--- a/apps/readest-app/src/hooks/useTheme.ts
+++ b/apps/readest-app/src/hooks/useTheme.ts
@@ -3,7 +3,7 @@ import { useEnv } from '@/context/EnvContext';
import { useThemeStore } from '@/store/themeStore';
import { useSettingsStore } from '@/store/settingsStore';
import { applyCustomTheme, Palette } from '@/styles/themes';
-import { setSystemUIVisibility } from '@/utils/bridge';
+import { getStatusBarHeight, setSystemUIVisibility } from '@/utils/bridge';
type UseThemeProps = {
systemUIVisible?: boolean;
@@ -16,15 +16,22 @@ export const useTheme = ({
}: UseThemeProps = {}) => {
const { appService } = useEnv();
const { settings } = useSettingsStore();
- const { themeColor, isDarkMode, updateAppTheme } = useThemeStore();
+ const { themeColor, isDarkMode, updateAppTheme, setStatusBarHeight } = useThemeStore();
useEffect(() => {
updateAppTheme(appThemeColor);
if (appService?.isMobile) {
setSystemUIVisibility({ visible: systemUIVisible, darkMode: isDarkMode });
}
+ if (appService?.isAndroidApp) {
+ getStatusBarHeight().then((res) => {
+ if (res.height && res.height > 0) {
+ setStatusBarHeight(res.height / window.devicePixelRatio);
+ }
+ });
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isDarkMode]);
+ }, [appService, isDarkMode]);
useEffect(() => {
const customThemes = settings.globalReadSettings?.customThemes ?? [];
diff --git a/apps/readest-app/src/store/readerStore.ts b/apps/readest-app/src/store/readerStore.ts
index 0f74629d..04609290 100644
--- a/apps/readest-app/src/store/readerStore.ts
+++ b/apps/readest-app/src/store/readerStore.ts
@@ -30,13 +30,9 @@ interface ReaderStore {
viewStates: { [key: string]: ViewState };
bookKeys: string[];
hoveredBookKey: string | null;
- systemUIVisible: boolean;
setBookKeys: (keys: string[]) => void;
setHoveredBookKey: (key: string | null) => void;
setBookmarkRibbonVisibility: (key: string, visible: boolean) => void;
- showSystemUI: () => void;
- dismissSystemUI: () => void;
-
setProgress: (
key: string,
location: string,
@@ -67,12 +63,8 @@ export const useReaderStore = create((set, get) => ({
viewStates: {},
bookKeys: [],
hoveredBookKey: null,
- systemUIVisible: false,
setBookKeys: (keys: string[]) => set({ bookKeys: keys }),
setHoveredBookKey: (key: string | null) => set({ hoveredBookKey: key }),
- showSystemUI: () => set({ systemUIVisible: true }),
- dismissSystemUI: () => set({ systemUIVisible: false }),
-
getView: (key: string | null) => (key && get().viewStates[key]?.view) || null,
setView: (key: string, view) =>
set((state) => ({
diff --git a/apps/readest-app/src/store/themeStore.ts b/apps/readest-app/src/store/themeStore.ts
index e1322445..9030b29c 100644
--- a/apps/readest-app/src/store/themeStore.ts
+++ b/apps/readest-app/src/store/themeStore.ts
@@ -10,6 +10,11 @@ interface ThemeState {
systemIsDarkMode: boolean;
themeCode: ThemeCode;
isDarkMode: boolean;
+ systemUIVisible: boolean;
+ statusBarHeight: number;
+ setStatusBarHeight: (height: number) => void;
+ showSystemUI: () => void;
+ dismissSystemUI: () => void;
getIsDarkMode: () => boolean;
setThemeMode: (mode: ThemeMode) => void;
setThemeColor: (color: string) => void;
@@ -62,6 +67,11 @@ export const useThemeStore = create((set, get) => {
systemIsDarkMode,
isDarkMode,
themeCode,
+ systemUIVisible: false,
+ statusBarHeight: 24,
+ showSystemUI: () => set({ systemUIVisible: true }),
+ dismissSystemUI: () => set({ systemUIVisible: false }),
+ setStatusBarHeight: (height: number) => set({ statusBarHeight: height }),
getIsDarkMode: () => get().isDarkMode,
setThemeMode: (mode) => {
if (typeof window !== 'undefined' && localStorage) {
diff --git a/apps/readest-app/src/utils/bridge.ts b/apps/readest-app/src/utils/bridge.ts
index 99055d80..03bd6178 100644
--- a/apps/readest-app/src/utils/bridge.ts
+++ b/apps/readest-app/src/utils/bridge.ts
@@ -33,6 +33,11 @@ export interface SetSystemUIVisibilityResponse {
error?: string;
}
+export interface GetStatusBarHeightResponse {
+ height: number;
+ error?: string;
+}
+
export async function copyURIToPath(request: CopyURIRequest): Promise {
const result = await invoke('plugin:native-bridge|copy_uri_to_path', {
payload: request,
@@ -67,3 +72,10 @@ export async function setSystemUIVisibility(
);
return result;
}
+
+export async function getStatusBarHeight(): Promise {
+ const result = await invoke(
+ 'plugin:native-bridge|get_status_bar_height',
+ );
+ return result;
+}