From c88b2e5d2abf81e31b96eebe862b5a1190744fc9 Mon Sep 17 00:00:00 2001 From: r1di <33724815+r1di@users.noreply.github.com> Date: Thu, 6 Apr 2023 17:12:36 +0200 Subject: [PATCH] feat: extending Volume button feature, by scroll amount (#587) Closes #447 * Main Added volume button scroll amount * Volume button scroll amount --------- Co-authored-by: Ridi --- .../LNReader/MainActivity.java | 8 ++-- .../VolumeButtonListener.java | 35 +++++++++++--- src/redux/settings/settings.reducer.js | 1 + src/screens/reader/ReaderScreen.js | 14 +++--- .../ReaderBottomSheet/ReaderBottomSheet.tsx | 48 ++++++++++++++++++- .../SettingsReaderScreen.tsx | 31 +++++++++++- strings/languages/en/strings.json | 1 + strings/types/index.ts | 1 + 8 files changed, 117 insertions(+), 22 deletions(-) diff --git a/android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainActivity.java b/android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainActivity.java index ac8b6967b..f5f04fb3c 100644 --- a/android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainActivity.java +++ b/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,7 +61,7 @@ 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); } @@ -68,7 +69,7 @@ public boolean dispatchKeyEvent(KeyEvent event) { 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() { }; } -} +} \ No newline at end of file diff --git a/android/app/src/main/java/com/rajarsheechatterjee/VolumeButtonListener/VolumeButtonListener.java b/android/app/src/main/java/com/rajarsheechatterjee/VolumeButtonListener/VolumeButtonListener.java index b09db66cc..d80317d12 100644 --- a/android/app/src/main/java/com/rajarsheechatterjee/VolumeButtonListener/VolumeButtonListener.java +++ b/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,9 +27,10 @@ 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 @@ -37,12 +38,22 @@ public static void sendEvent(boolean up) { } } - 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()); + } +} \ No newline at end of file diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js index 1073052e8..ed79eb183 100644 --- a/src/redux/settings/settings.reducer.js +++ b/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, diff --git a/src/screens/reader/ReaderScreen.js b/src/screens/reader/ReaderScreen.js index 292507eb8..135286764 100644 --- a/src/screens/reader/ReaderScreen.js +++ b/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()); diff --git a/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx b/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx index f9f9ca886..adf139d6b 100644 --- a/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx +++ b/src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx @@ -1,4 +1,10 @@ -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'; @@ -6,6 +12,8 @@ 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 ? ( + + + {getString('readerScreen.bottomSheet.scrollAmount')} + + { + if (text) { + dispatch(setAppSettings('scrollAmount', Number(text))); + } + }} + /> + + ) : null} ); }; - interface ReaderBottomSheetV2Props { bottomSheetRef: Ref | 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, + }, }); diff --git a/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx b/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx index 74f402043..559d93aae 100644 --- a/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx +++ b/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 ? ( + + + {getString('readerScreen.bottomSheet.scrollAmount')} + + { + if (text) { + dispatch(setAppSettings('scrollAmount', Number(text))); + } + }} + /> + + ) : null} +