diff --git a/src/components/common/BottomSheetHandle.js b/src/components/common/BottomSheetHandle.js new file mode 100644 index 00000000..177dd535 --- /dev/null +++ b/src/components/common/BottomSheetHandle.js @@ -0,0 +1,23 @@ +import React from "react"; +import { View } from "react-native"; +import { useSelector } from "react-redux"; + +const BottomSheetHandle = () => { + const theme = useSelector((state) => state.themeReducer.theme); + return ( + <> + + + ); +}; + +export default BottomSheetHandle; diff --git a/src/redux/actions/settings.js b/src/redux/actions/settings.js index acaee55c..dd083ad9 100644 --- a/src/redux/actions/settings.js +++ b/src/redux/actions/settings.js @@ -1,4 +1,9 @@ -import { SET_DISPLAY_MODE, SET_ITEMS_PER_ROW } from "./types"; +import { + SET_DISPLAY_MODE, + SET_ITEMS_PER_ROW, + UPDATE_READER_TEXT_SIZE, + UPDATE_READER_THEME, +} from "./types"; export const setDisplayMode = (val) => (dispatch) => { dispatch({ @@ -13,3 +18,17 @@ export const setItemsPerRow = (val) => (dispatch) => { payload: val, }); }; + +export const updateReaderTheme = (val) => (dispatch) => { + dispatch({ + type: UPDATE_READER_THEME, + payload: val, + }); +}; + +export const updateReaderTextSize = (val) => (dispatch) => { + dispatch({ + type: UPDATE_READER_TEXT_SIZE, + payload: val, + }); +}; diff --git a/src/redux/actions/types.js b/src/redux/actions/types.js index d780c999..00a6aa18 100644 --- a/src/redux/actions/types.js +++ b/src/redux/actions/types.js @@ -41,3 +41,7 @@ export const CHAPTER_READ = "CHAPTER_READ"; export const GET_CHAPTER = "GET_CHAPTER"; export const CHAPTER_LOADING = "CHAPTER_LOADING"; + +export const UPDATE_READER_THEME = "UPDATE_READER_THEME"; + +export const UPDATE_READER_TEXT_SIZE = "UPDATE_READER_TEXT_SIZE"; diff --git a/src/redux/reducers/settings.js b/src/redux/reducers/settings.js index 349a7e08..e71856dd 100644 --- a/src/redux/reducers/settings.js +++ b/src/redux/reducers/settings.js @@ -1,8 +1,17 @@ -import { SET_DISPLAY_MODE, SET_ITEMS_PER_ROW } from "../actions/types"; +import { + SET_DISPLAY_MODE, + SET_ITEMS_PER_ROW, + UPDATE_READER_TEXT_SIZE, + UPDATE_READER_THEME, +} from "../actions/types"; const initialState = { displayMode: 0, itemsPerRow: 3, + reader: { + theme: 1, + textSize: 16, + }, }; /** @@ -12,6 +21,14 @@ const initialState = { * 2 -> List */ +/** + * Reader Settings + * theme + * 1 -> Dark + * 2 -> White + * 3 -> Sepia + */ + const settingsReducer = (state = initialState, action) => { const { type, payload } = action; @@ -20,6 +37,10 @@ const settingsReducer = (state = initialState, action) => { return { ...state, displayMode: payload }; case SET_ITEMS_PER_ROW: return { ...state, itemsPerRow: payload }; + case UPDATE_READER_THEME: + return { ...state, reader: { ...state.reader, theme: payload } }; + case UPDATE_READER_TEXT_SIZE: + return { ...state, reader: { ...state.reader, textSize: payload } }; default: return state; } diff --git a/src/screens/Chapter/Chapter.js b/src/screens/Chapter/Chapter.js index 513b7fe1..4f5feadc 100644 --- a/src/screens/Chapter/Chapter.js +++ b/src/screens/Chapter/Chapter.js @@ -6,8 +6,6 @@ import { CollapsibleHeaderScrollView } from "react-native-collapsible-header-vie import BottomSheet from "./components/BottomSheet"; -import { getReaderTheme } from "../../services/asyncStorage"; - import { updateNovelHistory } from "../../redux/actions/history"; import { getChapter, updateChapterRead } from "../../redux/actions/novel"; @@ -22,22 +20,42 @@ const ChapterItem = ({ getChapter, chapter, loading, + reader, }) => { const { extensionId, chapterUrl, novelUrl, chapterName } = route.params; - const [size, setSize] = useState(16); - - const [readerTheme, setReaderTheme] = useState(1); - - let _panel = useRef(null); // Bottomsheet ref - - getReaderTheme().then((value) => setReaderTheme(value)); + let _panel = useRef(null); useEffect(() => { getChapter(extensionId, chapterUrl, novelUrl); updateNovelHistory(chapterUrl, chapterName, novelUrl); }, []); + const readerBackground = (val) => { + const backgroundColor = { + 1: "#000000", + 2: "#FFFFFF", + 3: "#F4ECD8", + }; + + return backgroundColor[val]; + }; + + const readerTextColor = (val) => { + const textColor = val === 1 ? theme.textColorSecondary : "#000000"; + + return textColor; + }; + + const readerLineHeight = (val) => { + const lineHeight = { + 12: 20, + 16: 25, + 20: 28, + }; + return lineHeight[val]; + }; + const isCloseToBottom = ({ layoutMeasurement, contentOffset, @@ -63,13 +81,13 @@ const ChapterItem = ({ > navigation.goBack()} - color={"white"} + color="#FFFFFF" size={26} style={{ marginRight: 0 }} /> {!loading && ( <> @@ -85,7 +103,7 @@ const ChapterItem = ({ chapterName: chapter.chapterName, }); }} - color={"white"} + color="#FFFFFF" /> _panel.current.show({ velocity: -1.5 }) } - color={"white"} + color="#FFFFFF" /> )} @@ -116,15 +134,7 @@ const ChapterItem = ({ headerHeight={100} contentContainerStyle={[ styles.container, - readerTheme === 1 && { - backgroundColor: theme.colorPrimary, - }, - readerTheme === 2 && { - backgroundColor: "white", - }, - readerTheme === 3 && { - backgroundColor: "#F4ECD8", - }, + { backgroundColor: readerBackground(reader.theme) }, ]} onScroll={({ nativeEvent }) => { if (isCloseToBottom(nativeEvent)) { @@ -144,29 +154,17 @@ const ChapterItem = ({ style={[ { paddingVertical: 15, - fontSize: size, + fontSize: reader.textSize, + color: readerTextColor(reader.theme), + lineHeight: readerLineHeight(reader.textSize), }, - readerTheme === 1 - ? { color: theme.textColorSecondary } - : { color: "black" }, - size === 16 - ? { lineHeight: 25 } - : size === 20 - ? { lineHeight: 28 } - : size === 12 && { lineHeight: 20 }, ]} > {chapter.chapterText.trim()} )} - + @@ -177,6 +175,7 @@ const mapStateToProps = (state) => ({ theme: state.themeReducer.theme, chapter: state.novelReducer.chapter, loading: state.novelReducer.chapterLoading, + reader: state.settingsReducer.reader, }); export default connect(mapStateToProps, { diff --git a/src/screens/Chapter/components/BottomSheet.js b/src/screens/Chapter/components/BottomSheet.js index 7718c413..95e8e76b 100644 --- a/src/screens/Chapter/components/BottomSheet.js +++ b/src/screens/Chapter/components/BottomSheet.js @@ -5,19 +5,21 @@ import { ToggleButton } from "react-native-paper"; import Slider from "@react-native-community/slider"; import Bottomsheet from "rn-sliding-up-panel"; -import { useSelector } from "react-redux"; +import { connect } from "react-redux"; -import { saveReaderTheme } from "../../../services/asyncStorage"; +import { + updateReaderTextSize, + updateReaderTheme, +} from "../../../redux/actions/settings"; +import BottomSheetHandle from "../../../components/common/BottomSheetHandle"; const ChapterBottomSheet = ({ bottomSheetRef, - setSize, - size, - readerTheme, - setReaderTheme, + theme, + reader, + updateReaderTextSize, + updateReaderTheme, }) => { - const theme = useSelector((state) => state.themeReducer.theme); - return ( - - - + + setSize(value)} + onValueChange={(value) => updateReaderTextSize(value)} /> { - setReaderTheme(value); - saveReaderTheme(value); - }} - value={readerTheme} + onValueChange={(value) => updateReaderTheme(value)} + value={reader.theme} style={{ marginTop: 10 }} > ({ + theme: state.themeReducer.theme, + reader: state.settingsReducer.reader, +}); + +export default connect(mapStateToProps, { + updateReaderTextSize, + updateReaderTheme, +})(ChapterBottomSheet); const styles = StyleSheet.create({ contentContainer: { flex: 1, - // paddingTop: , - // alignItems: "center", }, + readerSettingsContainer: { flex: 1, alignItems: "center", paddingTop: 30 }, }); diff --git a/src/services/db.js b/src/services/db.js index e44304cd..6c13fd2e 100644 --- a/src/services/db.js +++ b/src/services/db.js @@ -432,10 +432,7 @@ export const chapterRead = async (chapterUrl, novelUrl) => { tx.executeSql( "UPDATE ChapterTable SET `read` = 1 WHERE chapterUrl = ? AND novelUrl = ?", [chapterUrl, novelUrl], - (tx, res) => - console.log( - "Updated reading status of: " + chapterUrl + "/" + novelUrl - ), + (tx, res) => {}, (tx, error) => console.log(error) ); });