diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js index 05e45339..0edc9349 100644 --- a/src/redux/settings/settings.reducer.js +++ b/src/redux/settings/settings.reducer.js @@ -75,6 +75,8 @@ const initialState = { showLabelsInNav: false, useWebViewForChapter: false, showBatteryAndTime: false, + autoScroll: false, + autoScrollInterval: 10, }; const settingsReducer = (state = initialState, action) => { diff --git a/src/screens/Chapter/Chapter.js b/src/screens/Chapter/Chapter.js index d366e269..91d1b796 100644 --- a/src/screens/Chapter/Chapter.js +++ b/src/screens/Chapter/Chapter.js @@ -6,6 +6,7 @@ import { StatusBar, ScrollView, TouchableWithoutFeedback, + Dimensions, } from "react-native"; import { useDispatch } from "react-redux"; @@ -83,6 +84,8 @@ const Chapter = ({ route, navigation }) => { textSelectable = false, useWebViewForChapter = false, showBatteryAndTime = false, + autoScroll = false, + autoScrollInterval = 10, } = useSettings(); const batteryLevel = useBatteryLevel(); @@ -170,6 +173,26 @@ const Chapter = ({ route, navigation }) => { }, 60000); }, []); + const [currentOffset, setCurrentOffset] = useState(position?.position || 0); + + useEffect( + () => + setTimeout(() => { + if (scrollPercentage !== 100 && autoScroll) { + console.log("Called"); + scrollViewRef.current.scrollTo({ + x: 0, + y: currentOffset + Dimensions.get("window").height, + animated: true, + }); + setCurrentOffset( + (prevState) => + prevState + Dimensions.get("window").height + ); + } + }, autoScrollInterval * 1000)[(autoScroll, currentOffset)] + ); + const isCloseToBottom = useCallback( ({ layoutMeasurement, contentOffset, contentSize }) => { const paddingToBottom = 40; @@ -299,6 +322,10 @@ const Chapter = ({ route, navigation }) => { ); }; + const enableAutoScroll = () => { + dispatch(setAppSettings("autoScroll", !autoScroll)); + }; + const enableWebView = () => dispatch(setAppSettings("useWebViewForChapter", !useWebViewForChapter)); @@ -490,6 +517,7 @@ const Chapter = ({ route, navigation }) => { navigation={navigation} bottomSheetRef={readerSheetRef} selectText={textSelectable} + autoScroll={autoScroll} useWebViewForChapter={useWebViewForChapter} showScrollPercentage={showScrollPercentage} showBatteryAndTime={showBatteryAndTime} @@ -515,11 +543,13 @@ const Chapter = ({ route, navigation }) => { nextChapter={nextChapter} prevChapter={prevChapter} hide={hidden} + autoScroll={autoScroll} useWebViewForChapter={useWebViewForChapter} navigateToNextChapter={navigateToNextChapter} navigateToPrevChapter={navigateToPrevChapter} readerSheetRef={readerSheetRef} scrollViewRef={scrollViewRef} + enableAutoScroll={enableAutoScroll} /> {(showScrollPercentage || showBatteryAndTime) && ( { const rippleConfig = { color: theme.rippleColor, @@ -23,6 +26,8 @@ const ChapterFooter = ({ radius: 50, }; + const insets = useSafeAreaInsets(); + return ( {!useWebViewForChapter && ( - scrollViewRef.current.scrollTo({})} - > - - + <> + + + + scrollViewRef.current.scrollTo({})} + > + + + )} {/* { @@ -401,6 +402,30 @@ const ReaderSheet = ({ color={theme.colorAccent} /> + + dispatch(setAppSettings("autoScroll", !autoScroll)) + } + > + + AutoScroll + + + dispatch( + setAppSettings("autoScroll", !autoScroll) + ) + } + color={theme.colorAccent} + /> + { { value: "right", icon: "format-align-right" }, ]; + const { autoScrollInterval = 10 } = useSettings(); + /** * Reader Background Color Modal */ @@ -230,6 +239,26 @@ const FirstRoute = React.memo(({ theme, dispatch, reader }) => { + + Auto scroll interval (in seconds) + + + + dispatch( + setAppSettings( + "autoScrollInterval", + parseInt(text) + ) + ) + } + /> +