fix(layout): update safe insets in reader page, closes #3469 (#3497)

apps/readest-app/src/app/reader/hooks/useTTSControl.ts

@@ -378,11 +378,15 @@ export const useTTSControl = ({ bookKey, onRequestHidePanel }: UseTTSControlProp
         }
       }
     }
-    if (!ttsFromRange || !ttsFromIndex) {
-      ttsFromRange = progress.range;
+
+    if (!ttsFromIndex) {
       ttsFromIndex = progress.index;
     }
 
+    if (!ttsFromRange && !bookData.isFixedLayout) {
+      ttsFromRange = progress.range;
+    }
+
     const currentSection = view.renderer.getContents().find((x) => x.index === ttsFromIndex);
     if (ttsFromRange && currentSection) {
       const ttsLocation = view.getCFI(currentSection?.index || 0, ttsFromRange);
@@ -429,7 +433,9 @@ export const useTTSControl = ({ bookKey, onRequestHidePanel }: UseTTSControlProp
       const ssml =
         oneTime && ttsSpeakRange
           ? genSSMLRaw(ttsSpeakRange.toString().trim())
-          : view.tts?.from(ttsFromRange);
+          : ttsFromRange
+            ? view.tts?.from(ttsFromRange)
+            : view.tts?.start();
       if (ssml) {
         const lang = parseSSMLLang(ssml, primaryLang) || 'en';
         setIsPlaying(true);

apps/readest-app/src/hooks/useSafeAreaInsets.ts

@@ -105,4 +105,6 @@ export const useSafeAreaInsets = () => {
       window.removeEventListener('focus', handleFocus);
     };
   }, [onUpdateInsets]);
+
+  return { onUpdateInsets };
 };

apps/readest-app/src/hooks/useTheme.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { useEnv } from '@/context/EnvContext';
 import { useThemeStore } from '@/store/themeStore';
 import { useSettingsStore } from '@/store/settingsStore';
+import { useSafeAreaInsets } from './useSafeAreaInsets';
 import { themes, applyCustomTheme, Palette } from '@/styles/themes';
 import { getStatusBarHeight, setSystemUIVisibility } from '@/utils/bridge';
 import { getOSPlatform } from '@/utils/misc';
@@ -31,6 +32,7 @@ export const useTheme = ({
     systemUIAlwaysHidden,
     setSystemUIAlwaysHidden,
   } = useThemeStore();
+  const { onUpdateInsets } = useSafeAreaInsets();
 
   const useFallbackColors = useRef(false);
 
@@ -42,22 +44,30 @@ export const useTheme = ({
           setStatusBarHeight(res.height / window.devicePixelRatio);
         }
       });
+      handleSystemUIVisibility(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appService?.isAndroidApp]);
 
-  const handleSystemUIVisibility = useCallback(() => {
-    if (!appService?.isMobileApp) return;
+  const handleSystemUIVisibility = useCallback(
+    (updateInsets = false) => {
+      if (!appService?.isMobileApp) return;
 
-    const visible = !!(systemUIVisible && !systemUIAlwaysHidden);
-    if (visible) {
-      showSystemUI();
-    } else {
-      dismissSystemUI();
-    }
-    setSystemUIVisibility({ visible, darkMode: isDarkMode });
+      const visible = !!(systemUIVisible && !systemUIAlwaysHidden);
+      if (visible) {
+        showSystemUI();
+      } else {
+        dismissSystemUI();
+      }
+      setSystemUIVisibility({ visible, darkMode: isDarkMode }).then(() => {
+        if (updateInsets) {
+          onUpdateInsets();
+        }
+      });
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appService, isDarkMode, systemUIVisible]);
+    [appService, isDarkMode, systemUIVisible],
+  );
 
   useEffect(() => {
     if (appService?.isMobileApp) {