extending Volume button feature, by scroll amount

android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainActivity.java

@@ -8,6 +8,7 @@
 import android.view.KeyEvent;
 import android.view.View;
 import android.view.Window;
+import android.widget.ScrollView;
 import android.view.WindowManager;
 
 import com.facebook.react.ReactActivity;
@@ -60,15 +61,15 @@ public boolean dispatchKeyEvent(KeyEvent event) {
                 case KeyEvent.KEYCODE_VOLUME_UP:
                     if (action == KeyEvent.ACTION_DOWN) {
                         // volup
-                        VolumeButtonListener.up();
+                        VolumeButtonListener.up(VolumeButtonListener.getScrollAmount());
                         if (!VolumeButtonListener.prevent)
                             return super.dispatchKeyEvent(event);
                     }
                     return true;
                 case KeyEvent.KEYCODE_VOLUME_DOWN:
                     if (action == KeyEvent.ACTION_DOWN) {
                         // voldown
-                        VolumeButtonListener.down();
+                        VolumeButtonListener.down(VolumeButtonListener.getScrollAmount());
                         if (!VolumeButtonListener.prevent)
                             return super.dispatchKeyEvent(event);
                     }
@@ -79,7 +80,6 @@ public boolean dispatchKeyEvent(KeyEvent event) {
         }
         return super.dispatchKeyEvent(event);
     }
-
     /**
      * Returns the name of the main component registered from JavaScript.
      * This is used to schedule rendering of the component.
@@ -99,4 +99,4 @@ protected ReactRootView createRootView() {
         };
     }
 
-}
+}

android/app/src/main/java/com/rajarsheechatterjee/VolumeButtonListener/VolumeButtonListener.java

@@ -1,11 +1,11 @@
 package com.rajarsheechatterjee.VolumeButtonListener;
-
 import androidx.annotation.NonNull;
 
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 
@@ -27,22 +27,33 @@ public static boolean isActive() {
 
     public static boolean prevent = false;
 
-    public static void sendEvent(boolean up) {
+    public static void sendEvent(boolean up, int amount) {
         if (active) {
             WritableMap args = Arguments.createMap();
+            args.putInt("scrollAmount", amount); // add scroll amount to event data
             if (up)
                 appContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("VolumeUp", args);
             else
                 appContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("VolumeDown", args);
         }
     }
 
-    public static void down() {
-        sendEvent(false);
+    public static void down(int amount) {
+        sendEvent(false, amount);
+    }
+
+    public static void up(int amount) {
+        sendEvent(true, amount);
+    }
+
+    private static int scrollAmount = 100;
+
+    public static void setScrollAmount(int amount) {
+        scrollAmount = amount;
     }
 
-    public static void up() {
-        sendEvent(true);
+    public static int getScrollAmount() {
+        return scrollAmount;
     }
 
     @ReactMethod
@@ -90,4 +101,14 @@ public void addListener(String eventName) {
     public void removeListeners(Integer count) {
         // Keep: Required for RN built in Event Emitter Calls.
     }
-}
+
+    @ReactMethod
+    public void setVolumeButtonScrollAmount(int amount) {
+        setScrollAmount(amount);
+    }
+
+    @ReactMethod
+    public void getVolumeButtonScrollAmount(Promise promise) {
+        promise.resolve(getScrollAmount());
+    }
+}

src/redux/settings/settings.reducer.js

@@ -64,6 +64,7 @@ export const initialState = {
   swipeGestures: false,
   showScrollPercentage: true,
   useVolumeButtons: false,
+  scrollAmount: 200,
   showBatteryAndTime: false,
   autoScroll: false,
   autoScrollInterval: 10,

src/screens/reader/ReaderScreen.js

@@ -88,6 +88,7 @@ const ChapterContent = ({ route, navigation }) => {
     useVolumeButtons = false,
     autoScroll = false,
     autoScrollInterval = 10,
+    scrollAmount = 200,
     autoScrollOffset = null,
     verticalSeekbar = true,
     removeExtraParagraphSpacing = false,
@@ -117,16 +118,13 @@ const ChapterContent = ({ route, navigation }) => {
     VolumeButtonListener.preventDefault();
     emmiter.current.addListener('VolumeUp', e => {
       webViewRef.current?.injectJavaScript(`(()=>{
-          window.scrollBy({top:${-Dimensions.get('window')
-            .height},behavior:'smooth',})
-        })()`);
+            window.scrollBy({top:${-scrollAmount},behavior:'smooth',})
+          })()`);
     });
     emmiter.current.addListener('VolumeDown', e => {
       webViewRef.current?.injectJavaScript(`(()=>{
-          window.scrollBy({top:${
-            Dimensions.get('window').height
-          },behavior:'smooth',})
-        })()`);
+            window.scrollBy({top:${scrollAmount},behavior:'smooth',})
+          })()`);
     });
   };
 
@@ -144,7 +142,7 @@ const ChapterContent = ({ route, navigation }) => {
       emmiter.current.removeAllListeners('VolumeUp');
       emmiter.current.removeAllListeners('VolumeDown');
     };
-  }, [useVolumeButtons, chapter]);
+  }, [useVolumeButtons, scrollAmount]);
 
   const onLayout = useCallback(e => {
     setTimeout(() => connectVolumeButton());

src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx

@@ -1,11 +1,19 @@
-import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  TextInput,
+} from 'react-native';
 import React, { Ref, useMemo, useState } from 'react';
 import color from 'color';
 
 import {
   default as BottomSheetType,
   BottomSheetView,
 } from '@gorhom/bottom-sheet';
+
+import { defaultTo } from 'lodash-es';
 import BottomSheet from '@components/BottomSheet/BottomSheet';
 import { useAppDispatch, useSettingsV1 } from '../../../../redux/hooks';
 import { useTheme } from '@hooks/useTheme';
@@ -43,6 +51,7 @@ const GeneralTab: React.FC = () => {
     showBatteryAndTime,
     showScrollPercentage,
     useVolumeButtons = false,
+    scrollAmount = 200,
     swipeGestures = false,
     removeExtraParagraphSpacing = false,
   } = useSettingsV1();
@@ -118,10 +127,26 @@ const GeneralTab: React.FC = () => {
         value={useVolumeButtons}
         theme={theme}
       />
+      {useVolumeButtons ? (
+        <View style={styles.textFieldContainer}>
+          <Text style={[styles.paddingRightM]} numberOfLines={2}>
+            {getString('readerScreen.bottomSheet.scrollAmount')}
+          </Text>
+          <TextInput
+            style={styles.textField}
+            defaultValue={defaultTo(scrollAmount, 200).toString()}
+            keyboardType="numeric"
+            onChangeText={text => {
+              if (text) {
+                dispatch(setAppSettings('scrollAmount', Number(text)));
+              }
+            }}
+          />
+        </View>
+      ) : null}
     </View>
   );
 };
-
 interface ReaderBottomSheetV2Props {
   bottomSheetRef: Ref<BottomSheetType> | null;
 }
@@ -218,4 +243,23 @@ const styles = StyleSheet.create({
   readerTab: {
     paddingVertical: 8,
   },
+  textFieldContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  textField: {
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    width: 100,
+    textAlign: 'right',
+  },
+  paddingRightM: {
+    flex: 1,
+    paddingRight: 16,
+  },
 });

src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx

@@ -7,7 +7,6 @@ import {
   useWindowDimensions,
 } from 'react-native';
 import React, { useState } from 'react';
-
 import { useNavigation } from '@react-navigation/native';
 import { defaultTo } from 'lodash-es';
 import WebView from 'react-native-webview';
@@ -69,6 +68,7 @@ const SettingsReaderScreen = () => {
   const readerSettings = useReaderSettings();
   const {
     useVolumeButtons = false,
+    scrollAmount = 200,
     verticalSeekbar = true,
     swipeGestures = false,
     autoScroll = false,
@@ -195,6 +195,28 @@ const SettingsReaderScreen = () => {
           }
           theme={theme}
         />
+        {useVolumeButtons ? (
+          <View style={styles.scrollAmount}>
+            <Text style={[labelStyle, styles.paddingRightM]} numberOfLines={2}>
+              {getString('readerScreen.bottomSheet.scrollAmount')}
+            </Text>
+            <TextInput
+              style={{
+                paddingHorizontal: 16,
+                paddingBottom: 8,
+                flexDirection: 'row',
+              }}
+              defaultValue={defaultTo(scrollAmount, 100).toString()}
+              keyboardType="numeric"
+              onChangeText={text => {
+                if (text) {
+                  dispatch(setAppSettings('scrollAmount', Number(text)));
+                }
+              }}
+            />
+          </View>
+        ) : null}
+
         <SwitchItem
           label={getString('readerScreen.bottomSheet.swipeGestures')}
           value={swipeGestures}
@@ -510,4 +532,11 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingRight: 16,
   },
+  scrollAmount: {
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
 });

strings/languages/en/strings.json

@@ -98,6 +98,7 @@
       "useChapterDrawerSwipeNavigation": "Swipe right to open drawer",
       "removeExtraSpacing": "Remove extra paragraph spacing",
       "volumeButtonsScroll": "Volume buttons scroll",
+      "scrollAmount": "Scroll amount:",
       "showSwipeMargins": "Show swipe margins"
     },
     "drawer": {

strings/types/index.ts

@@ -82,6 +82,7 @@ export interface StringMap {
   'readerScreen.bottomSheet.useChapterDrawerSwipeNavigation': 'string';
   'readerScreen.bottomSheet.removeExtraSpacing': 'string';
   'readerScreen.bottomSheet.volumeButtonsScroll': 'string';
+  'readerScreen.bottomSheet.scrollAmount': 'string';
   'readerScreen.bottomSheet.showSwipeMargins': 'string';
   'readerScreen.drawer.scrollToCurrentChapter': 'string';
   'readerScreen.drawer.scrollToTop': 'string';