diff --git a/apps/readest-app/src/app/reader/hooks/useTTSControl.ts b/apps/readest-app/src/app/reader/hooks/useTTSControl.ts index 4ae59269..e845e64b 100644 --- a/apps/readest-app/src/app/reader/hooks/useTTSControl.ts +++ b/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); diff --git a/apps/readest-app/src/hooks/useSafeAreaInsets.ts b/apps/readest-app/src/hooks/useSafeAreaInsets.ts index d81488db..7286747d 100644 --- a/apps/readest-app/src/hooks/useSafeAreaInsets.ts +++ b/apps/readest-app/src/hooks/useSafeAreaInsets.ts @@ -105,4 +105,6 @@ export const useSafeAreaInsets = () => { window.removeEventListener('focus', handleFocus); }; }, [onUpdateInsets]); + + return { onUpdateInsets }; }; diff --git a/apps/readest-app/src/hooks/useTheme.ts b/apps/readest-app/src/hooks/useTheme.ts index b0545fe8..05509d7e 100644 --- a/apps/readest-app/src/hooks/useTheme.ts +++ b/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) {