Experimental auto scroll (Closes #63)

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) => {

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) && (
                     <View

src/screens/Chapter/components/ChapterFooter.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { IconButton } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import FadeView from "../../../components/Common/CrossFadeView";
 
 const ChapterFooter = ({
@@ -15,7 +16,9 @@ const ChapterFooter = ({
     prevChapter,
     useWebViewForChapter,
     enableSwipeGestures,
+    autoScroll,
     enableWebView,
+    enableAutoScroll,
 }) => {
     const rippleConfig = {
         color: theme.rippleColor,
@@ -23,6 +26,8 @@ const ChapterFooter = ({
         radius: 50,
     };
 
+    const insets = useSafeAreaInsets();
+
     return (
         <FadeView
             style={{
@@ -38,6 +43,7 @@ const ChapterFooter = ({
                 style={{
                     backgroundColor: `${theme.colorPrimary}E6`,
                     flexDirection: "row",
+                    paddingBottom: insets.bottom,
                 }}
             >
                 <Pressable
@@ -65,17 +71,31 @@ const ChapterFooter = ({
                     />
                 </Pressable>
                 {!useWebViewForChapter && (
-                    <Pressable
-                        android_ripple={rippleConfig}
-                        style={styles.buttonStyles}
-                        onPress={() => scrollViewRef.current.scrollTo({})}
-                    >
-                        <IconButton
-                            icon="format-vertical-align-top"
-                            size={26}
-                            color={theme.textColorPrimary}
-                        />
-                    </Pressable>
+                    <>
+                        <Pressable
+                            android_ripple={rippleConfig}
+                            style={styles.buttonStyles}
+                            onPress={enableAutoScroll}
+                        >
+                            <IconButton
+                                icon="chevron-triple-down"
+                                disabled={!autoScroll}
+                                size={26}
+                                color={theme.textColorPrimary}
+                            />
+                        </Pressable>
+                        <Pressable
+                            android_ripple={rippleConfig}
+                            style={styles.buttonStyles}
+                            onPress={() => scrollViewRef.current.scrollTo({})}
+                        >
+                            <IconButton
+                                icon="format-vertical-align-top"
+                                size={26}
+                                color={theme.textColorPrimary}
+                            />
+                        </Pressable>
+                    </>
                 )}
                 {/* <Pressable
                     android_ripple={rippleConfig}
@@ -125,5 +145,6 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center",
         paddingVertical: 8,
+        paddingBottom: 4,
     },
 });

src/screens/Chapter/components/ReaderSheet.js

@@ -41,6 +41,7 @@ const ReaderSheet = ({
     bottomSheetRef,
     showBatteryAndTime,
     selectText,
+    autoScroll,
     useWebViewForChapter,
     showScrollPercentage,
 }) => {
@@ -401,6 +402,30 @@ const ReaderSheet = ({
                             color={theme.colorAccent}
                         />
                     </Pressable>
+                    <Pressable
+                        style={styles.switchStyle}
+                        android_ripple={{ color: theme.rippleColor }}
+                        onPress={() =>
+                            dispatch(setAppSettings("autoScroll", !autoScroll))
+                        }
+                    >
+                        <Text
+                            style={{
+                                color: theme.textColorSecondary,
+                            }}
+                        >
+                            AutoScroll
+                        </Text>
+                        <Switch
+                            value={autoScroll}
+                            onValueChange={() =>
+                                dispatch(
+                                    setAppSettings("autoScroll", !autoScroll)
+                                )
+                            }
+                            color={theme.colorAccent}
+                        />
+                    </Pressable>
                     <Pressable
                         style={styles.switchStyle}
                         android_ripple={{ color: theme.rippleColor }}

src/screens/More/ReaderSettings.js

@@ -23,8 +23,15 @@ import {
 } from "../../components/Common/ToggleButton";
 import { List } from "../../components/List";
 
-import { useReaderSettings, useTheme } from "../../hooks/reduxHooks";
-import { setReaderSettings } from "../../redux/settings/settings.actions";
+import {
+    useReaderSettings,
+    useSettings,
+    useTheme,
+} from "../../hooks/reduxHooks";
+import {
+    setAppSettings,
+    setReaderSettings,
+} from "../../redux/settings/settings.actions";
 import {
     readerBackground,
     readerLineHeight,
@@ -51,6 +58,8 @@ const FirstRoute = React.memo(({ theme, dispatch, reader }) => {
         { 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 }) => {
                             </Button>
                         </View>
                     </View>
+                    <List.SubHeader theme={theme}>
+                        Auto scroll interval (in seconds)
+                    </List.SubHeader>
+                    <View style={{ paddingHorizontal: 16, paddingBottom: 8 }}>
+                        <TextInput
+                            style={{
+                                color: theme.textColorPrimary,
+                                fontSize: 16,
+                            }}
+                            defaultValue={autoScrollInterval.toString()}
+                            onChangeText={(text) =>
+                                dispatch(
+                                    setAppSettings(
+                                        "autoScrollInterval",
+                                        parseInt(text)
+                                    )
+                                )
+                            }
+                        />
+                    </View>
                 </List.Section>
             </ScrollView>
             <ColorPickerModal