diff --git a/android/app/src/main/assets/js/textRemover.js b/android/app/src/main/assets/js/textRemover.js new file mode 100644 index 0000000000..30321e8e75 --- /dev/null +++ b/android/app/src/main/assets/js/textRemover.js @@ -0,0 +1,181 @@ +// Text selection functionality +window.textRemover = new (function () { + let selectionUI = null; + let isUIActive = false; + this.hidden = van.state(true); + + function createSelectionUI() { + if (selectionUI) return selectionUI; + + const { div, button } = van.tags; + selectionUI = div( + { + id: 'text-selection-ui', + style: + 'position: fixed; background: var(--theme-surface); border: 1px solid var(--theme-outline); border-radius: 8px; padding: 8px; z-index: 100000; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.25); pointer-events: auto;', + }, + button( + { + style: + 'background: var(--theme-secondary); color: var(--theme-onSecondary); border: none; padding: 6px 12px; margin: 2px; border-radius: 4px; font-size: 12px; cursor: pointer;', + onclick: () => removeSelectedText(), + }, + 'Remove', + ), + button( + { + style: + 'background: var(--theme-primary); color: var(--theme-onPrimary); border: none; padding: 6px 12px; margin: 2px; border-radius: 4px; font-size: 12px; cursor: pointer;', + onclick: () => replaceSelectedText(), + }, + 'Replace', + ), + ); + + document.body.appendChild(selectionUI); + return selectionUI; + } + + function showSelectionUI() { + const ui = createSelectionUI(); + + // Get selection bounds + const selection = window.getSelection(); + if (selection.rangeCount > 0) { + const range = selection.getRangeAt(0); + const rect = range.getBoundingClientRect(); + + // Get UI element heights from CSS variables (with fallbacks) + const statusBarHeight = + parseInt( + getComputedStyle(document.documentElement).getPropertyValue( + '--StatusBar-currentHeight', + ), + ) || 24; + const readerPadding = + parseInt( + getComputedStyle(document.documentElement).getPropertyValue( + '--readerSettings-padding', + ), + ) || 16; + const uiHeight = 50; // Approximate height of our UI + + // Calculate available space + const viewportHeight = window.innerHeight; + const selectionCenterY = rect.top + rect.height / 2; + const topSafeArea = statusBarHeight + readerPadding + uiHeight + 10; + const bottomSafeArea = readerPadding + uiHeight + 10; + + // Position UI based on selection location + let topPosition; + if (selectionCenterY < viewportHeight / 2) { + // Selection is in top half, position UI at bottom + //TODO: make this dynamic + const avoidUI = !reader.hidden.val ? 58 : 0; + const avoidScrollbar = reader.generalSettings.val.verticalSeekbar + ? 0 + : 20; + topPosition = + viewportHeight - bottomSafeArea - avoidUI - avoidScrollbar; + ui.style.top = topPosition + 'px'; + ui.style.bottom = 'auto'; + } else { + // Selection is in bottom half, position UI at top (accounting for status bar) + topPosition = Math.max( + statusBarHeight + readerPadding + 10, + statusBarHeight + 20, + ); + const avoidUI = !reader.hidden.val ? 32 : 0; + ui.style.top = topPosition + avoidUI + 'px'; + ui.style.bottom = 'auto'; + } + + // Center horizontally + ui.style.left = '50%'; + ui.style.transform = 'translateX(-50%)'; + } else { + // Fallback: position at top if no selection rect available + ui.style.top = '20px'; + ui.style.left = '50%'; + ui.style.transform = 'translateX(-50%)'; + ui.style.bottom = 'auto'; + } + + ui.style.display = 'block'; + isUIActive = true; + } + + function hideSelectionUI() { + if (selectionUI) { + selectionUI.style.display = 'none'; + } + isUIActive = false; + } + + function getSelectedText() { + const selection = window.getSelection(); + if (selection.rangeCount > 0) { + return selection.toString().trim(); + } + return ''; + } + + function removeSelectedText() { + const selectedText = getSelectedText(); + if (selectedText) { + reader.post({ + type: 'text-action', + data: { remove: selectedText }, + }); + } + hideSelectionUI(); + window.getSelection().removeAllRanges(); + } + + function replaceSelectedText() { + const selectedText = getSelectedText(); + if (selectedText) { + // For replace, we need user input, so send a different message + reader.post({ + type: 'text-action', + data: { replace: selectedText }, + }); + } + hideSelectionUI(); + window.getSelection().removeAllRanges(); + } + + // Handle text selection + document.addEventListener('selectionchange', function () { + const selectedText = getSelectedText(); + if (selectedText) { + showSelectionUI(); + } else if (!isUIActive) { + hideSelectionUI(); + } + }); + + // Hide UI when clicking/tapping elsewhere + document.addEventListener('touchstart', function (e) { + if (isUIActive && selectionUI && !selectionUI.contains(e.target)) { + const selectedText = getSelectedText(); + if (!selectedText) { + hideSelectionUI(); + } + } + }); + + document.addEventListener('click', function (e) { + if (isUIActive && selectionUI && !selectionUI.contains(e.target)) { + const selectedText = getSelectedText(); + if (!selectedText) { + hideSelectionUI(); + } + } + }); + + // Hide UI on scroll + window.addEventListener('scroll', function () { + hideSelectionUI(); + }); +})(); diff --git a/src/components/Common.tsx b/src/components/Common.tsx index a2b45d2e24..8e02960d9e 100644 --- a/src/components/Common.tsx +++ b/src/components/Common.tsx @@ -4,10 +4,27 @@ import { View, StyleSheet } from 'react-native'; const Row = ({ children, style = {}, + horizontalSpacing, + verticalSpacing, }: { children?: React.ReactNode; style?: any; -}) => {children}; + horizontalSpacing?: number | `${number}%`; + verticalSpacing?: number | `${number}%`; +}) => ( + + {children} + +); export { Row }; diff --git a/src/components/Common/ToggleButton.tsx b/src/components/Common/ToggleButton.tsx index 0726ed47f4..dcb74fdfec 100644 --- a/src/components/Common/ToggleButton.tsx +++ b/src/components/Common/ToggleButton.tsx @@ -28,6 +28,7 @@ interface ToggleButtonProps { theme: ThemeColors; color?: string; onPress: () => void; + disabled?: boolean; } export const ToggleButton: React.FC = ({ @@ -36,6 +37,7 @@ export const ToggleButton: React.FC = ({ theme, color, onPress, + disabled, }) => ( = ({ getToggleButtonPressableStyle(selected, theme), ]} onPress={onPress} + disabled={disabled} > void; + theme: ThemeColors; + style?: ViewStyle; + rotation?: SharedValue; + scale?: SharedValue; +}; + +const AnimatedIconButton: React.FC = ({ + name, + color, + size = 24, + padding = 8, + onPress, + disabled, + theme, + style, + rotation, + scale: _scale, +}) => { + const IconStyle = useAnimatedStyle(() => { + const rotate = rotation + ? withTiming(rotation.value + 'deg', { duration: 250 }) + : '0deg'; + const scale = _scale ? withTiming(_scale.value, { duration: 250 }) : 1; + return { + textAlign: 'center', + transform: [ + { + rotate, + }, + { + scale, + }, + ], + }; + }); + return ( + + + + + + ); +}; +export default React.memo(AnimatedIconButton); + +const styles = StyleSheet.create({ + container: { + borderRadius: 50, + overflow: 'hidden', + }, + pressable: { + padding: 8, + }, +}); diff --git a/src/components/Modal/KeyboardAvoidingModal.tsx b/src/components/Modal/KeyboardAvoidingModal.tsx new file mode 100644 index 0000000000..a8de2e813e --- /dev/null +++ b/src/components/Modal/KeyboardAvoidingModal.tsx @@ -0,0 +1,166 @@ +import React, { useEffect } from 'react'; +import { Modal, ModalProps, overlay, Portal } from 'react-native-paper'; +import { StyleSheet, Text, View } from 'react-native'; +import Button from '@components/Button/Button'; +import { ThemeColors } from '@theme/types'; +import { getString } from '@strings/translations'; +import Animated, { + measure, + useAnimatedRef, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; +import { WINDOW_HEIGHT } from '@gorhom/bottom-sheet'; +import SafeAreaView from '@components/SafeAreaView/SafeAreaView'; +import { getRuntimeKind } from 'react-native-worklets'; +import { useTheme } from '@hooks/persisted'; +import { useKeyboardHeight } from '@hooks/common/useKeyboardHeight'; + +// --- Dynamic style helpers --- +const getModalTitleColor = (theme: ThemeColors) => ({ color: theme.onSurface }); + +export type DefaultModalProps = { + /** + * Title of the modal + */ + title: string; + /** + * Dismisses the modal with onDismiss and calls onSave. + * If onSave returns false, the modal will not be dismissed. + */ + onSave: () => void | boolean; + /** + * The function to dismiss the modal + */ + onDismiss: () => void; + /** + * Dismisses the modal with onDismiss and calls onCancel + */ + onCancel?: () => void; + /** + * The function to reset the values + */ + onReset?: () => void; +} & Omit; + +const KeyboardAvoidingModal: React.FC = ({ + visible, + onDismiss, + onSave, + onCancel, + onReset, + title, + children, + ...props +}) => { + const theme = useTheme(); + const kH = useKeyboardHeight(); + + const animatedRef = useAnimatedRef(); + + const keyboardHeight = useSharedValue(0); + + useEffect(() => { + if (!kH) { + keyboardHeight.value = 0; + } else { + keyboardHeight.value = kH; + } + }, [kH, keyboardHeight]); + + const AvoidKeyboard = useAnimatedStyle(() => { + let m: { height: number; pageY: number } | null = null; + if (getRuntimeKind() !== 1) { + try { + m = measure(animatedRef); + } catch {} + } + + if (!m) { + m = { + height: 0, + pageY: 0, + }; + } + const newWindowHeight = WINDOW_HEIGHT - keyboardHeight.value; + const dif = Math.min(newWindowHeight - (m.height + m.pageY), 0); + + return { + maxHeight: withTiming(newWindowHeight, { + duration: 150, + }), + transform: [ + { + translateY: withTiming(dif, { duration: 150 }), + }, + ], + }; + }); + + const dismiss = (op?: () => void | boolean) => { + if (op?.() === false) return; + onDismiss(); + }; + const save = () => dismiss(onSave); + const cancel = () => dismiss(onCancel); + + return ( + + + + + + {title} + + {children} + + {!onReset ? null : ( + + )} + + + + + + + + + ); +}; + +export default KeyboardAvoidingModal; + +const styles = StyleSheet.create({ + contentContainer: { + paddingHorizontal: 24, + }, + modalContainer: { + maxHeight: WINDOW_HEIGHT, + borderRadius: 28, + padding: 24, + shadowColor: 'transparent', // Modal weird shadow fix + }, + modalTitle: { + fontSize: 24, + marginBottom: 16, + }, + buttonRow: { + flexDirection: 'row', + }, + flex: { + flex: 1, + }, +}); diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx new file mode 100644 index 0000000000..07169006dc --- /dev/null +++ b/src/components/TextInput/index.tsx @@ -0,0 +1,71 @@ +import { useTheme } from '@hooks/persisted'; +import React, { useState } from 'react'; +import { + StyleSheet, + TextInput as RNTextInput, + TextInputProps as RNTextInputProps, +} from 'react-native'; + +interface TextInputProps extends RNTextInputProps { + error?: boolean; + value?: never; +} + +const TextInput = ({ + onBlur, + onFocus, + error, + style, + ...props +}: TextInputProps) => { + const theme = useTheme(); + + const [inputFocused, setInputFocused] = useState(false); + + const _onFocus: RNTextInputProps['onFocus'] = e => { + setInputFocused(true); + onFocus?.(e); + }; + const _onBlur: RNTextInputProps['onBlur'] = e => { + setInputFocused(false); + onBlur?.(e); + }; + + const borderWidth = inputFocused || error ? 2 : 1; + const margin = inputFocused || error ? 0 : 1; + return ( + + ); +}; + +export default TextInput; + +const styles = StyleSheet.create({ + textInput: { + borderRadius: 4, + borderStyle: 'solid', + fontSize: 16, + paddingHorizontal: 16, + paddingVertical: 10, + }, +}); diff --git a/src/components/index.ts b/src/components/index.ts index 565906bfbd..644d41c453 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,6 @@ export { default as IconButtonV2 } from './IconButtonV2/IconButtonV2'; +export { default as AnimatedIconButton } from './IconButtonV2/AnimatedIconButton'; +export { default as TextInput } from './TextInput'; export { default as SearchbarV2 } from './SearchbarV2/SearchbarV2'; export { default as LoadingScreenV2 } from './LoadingScreenV2/LoadingScreenV2'; export { default as ErrorScreenV2 } from './ErrorScreenV2/ErrorScreenV2'; diff --git a/src/hooks/common/useKeyboardHeight.ts b/src/hooks/common/useKeyboardHeight.ts new file mode 100644 index 0000000000..3af2afc9c4 --- /dev/null +++ b/src/hooks/common/useKeyboardHeight.ts @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; +import { Keyboard, KeyboardEvent } from 'react-native'; + +export const useKeyboardHeight = () => { + const [keyboardHeight, setKeyboardHeight] = useState(0); + + useEffect(() => { + function onKeyboardDidShow(e: KeyboardEvent) { + setKeyboardHeight(e.endCoordinates.height); + } + + function onKeyboardDidHide() { + setKeyboardHeight(0); + } + + const showSubscription = Keyboard.addListener( + 'keyboardDidShow', + onKeyboardDidShow, + ); + const hideSubscription = Keyboard.addListener( + 'keyboardDidHide', + onKeyboardDidHide, + ); + return () => { + showSubscription.remove(); + hideSubscription.remove(); + }; + }, []); + + return keyboardHeight; +}; diff --git a/src/hooks/persisted/useNovel/useNovelData.ts b/src/hooks/persisted/useNovel/useNovelData.ts new file mode 100644 index 0000000000..4cb9e69b08 --- /dev/null +++ b/src/hooks/persisted/useNovel/useNovelData.ts @@ -0,0 +1,223 @@ +import { useCallback } from 'react'; +import { ChapterFilterKey, ChapterOrderKey } from '@database/constants'; +import { + getChapterCount, + getCustomPages, + getFirstUnreadChapter as _getFirstUnreadChapter, + getPageChapters as _getPageChapters, + getPageChaptersBatched, + insertChapters, +} from '@database/queries/ChapterQueries'; +import { + getNovelByPath, + insertNovelAndChapters, +} from '@database/queries/NovelQueries'; +import { ChapterInfo, NovelInfo } from '@database/types'; +import { fetchNovel, fetchPage } from '@services/plugin/fetch'; +import { getString } from '@strings/translations'; +import { BatchInfo } from './types'; + +export interface UseNovelDataParams { + novel: NovelInfo | undefined; + novelPath: string; + pluginId: string; + pages: string[]; + pageIndex: number; + settingsSort: ChapterOrderKey; + settingsFilter: ChapterFilterKey[]; + batchInformation: BatchInfo; + setPages: (pages: string[]) => void; + setNovel: (novel: NovelInfo | undefined) => void; + setFirstUnreadChapter: (chapter: ChapterInfo | undefined) => void; + setBatchInformation: React.Dispatch>; + setChapters: (chs: ChapterInfo[]) => void; + extendChapters: (chs: ChapterInfo[]) => void; +} + +export const useNovelData = ({ + novel, + novelPath, + pluginId, + pages, + pageIndex, + settingsSort, + settingsFilter, + batchInformation, + setPages, + setNovel, + setFirstUnreadChapter, + setBatchInformation, + setChapters, + extendChapters, +}: UseNovelDataParams) => { + const calculatePages = useCallback(async (tmpNovel: NovelInfo) => { + let tmpPages: string[]; + if ((tmpNovel.totalPages ?? 0) > 0) { + tmpPages = Array(tmpNovel.totalPages) + .fill(0) + .map((_, idx) => String(idx + 1)); + } else { + tmpPages = (await getCustomPages(tmpNovel.id)) + .map(c => c.page) + .filter((page): page is string => page !== null); + } + + return tmpPages.length > 1 ? tmpPages : ['1']; + }, []); + + const getNovel = useCallback(async () => { + let tmpNovel = getNovelByPath(novelPath, pluginId); + if (!tmpNovel) { + const sourceNovel = await fetchNovel(pluginId, novelPath).catch(() => { + throw new Error(getString('updatesScreen.unableToGetNovel')); + }); + await insertNovelAndChapters(pluginId, sourceNovel); + tmpNovel = getNovelByPath(novelPath, pluginId); + + if (!tmpNovel) { + return; + } + } + + setPages(await calculatePages(tmpNovel)); + + setNovel(tmpNovel); + }, [novelPath, pluginId, calculatePages, setPages, setNovel]); + + const getChapters = useCallback(async () => { + const page = pages[pageIndex] ?? '1'; + + if (novel && page) { + let newChapters: ChapterInfo[] = []; + + const config = [novel.id, settingsSort, settingsFilter, page] as const; + + let chapterCount = await getChapterCount(novel.id, page); + if (chapterCount) { + try { + newChapters = (await getPageChaptersBatched(...config)) || []; + } catch (error) { + console.error('Error fetching chapters:', error); + } + } else if (Number(page)) { + const sourcePage = await fetchPage(pluginId, novelPath, page); + const sourceChapters = sourcePage.chapters.map(ch => { + return { + ...ch, + page, + }; + }); + await insertChapters(novel.id, sourceChapters); + newChapters = await _getPageChapters(...config); + chapterCount = await getChapterCount(novel.id, page); + } + + setBatchInformation({ + batch: 0, + total: Math.floor(chapterCount / 300), + totalChapters: chapterCount, + }); + setChapters(newChapters); + + const unread = await _getFirstUnreadChapter( + novel.id, + settingsFilter, + page, + ); + setFirstUnreadChapter(unread ?? undefined); + } + }, [ + novel, + novelPath, + settingsFilter, + pageIndex, + pages, + pluginId, + settingsSort, + setChapters, + setBatchInformation, + setFirstUnreadChapter, + ]); + + const getNextChapterBatch = useCallback(async () => { + const page = pages[pageIndex]; + const nextBatch = batchInformation.batch + 1; + if (novel && page && nextBatch <= batchInformation.total) { + let newChapters: ChapterInfo[] = []; + + try { + newChapters = + (await getPageChaptersBatched( + novel.id, + settingsSort, + settingsFilter, + page, + nextBatch, + )) || []; + } catch (error) { + console.error('teaser', error); + } + setBatchInformation({ ...batchInformation, batch: nextBatch }); + extendChapters(newChapters); + } + }, [ + batchInformation, + extendChapters, + novel, + pageIndex, + pages, + settingsFilter, + settingsSort, + ]); + + const loadUpToBatch = useCallback( + async (targetBatch: number) => { + const page = pages[pageIndex] ?? '1'; + if (!novel || !page || targetBatch <= batchInformation.batch) { + return; + } + + for ( + let batch = batchInformation.batch + 1; + batch <= targetBatch; + batch++ + ) { + if (batch > batchInformation.total) break; + + let newChapters: ChapterInfo[] = []; + try { + newChapters = + (await getPageChaptersBatched( + novel.id, + settingsSort, + settingsFilter, + page, + batch, + )) || []; + } catch (error) { + console.error('Error loading batch', batch, error); + } + + setBatchInformation(prev => ({ ...prev, batch })); + extendChapters(newChapters); + } + }, + [ + batchInformation, + extendChapters, + novel, + pageIndex, + pages, + settingsFilter, + settingsSort, + ], + ); + + return { + calculatePages, + getNovel, + getChapters, + getNextChapterBatch, + loadUpToBatch, + }; +}; diff --git a/src/hooks/persisted/usePlugins.ts b/src/hooks/persisted/usePlugins.ts index e6a7196b75..e6fa942dd3 100644 --- a/src/hooks/persisted/usePlugins.ts +++ b/src/hooks/persisted/usePlugins.ts @@ -8,6 +8,8 @@ import { installPlugin as _install, uninstallPlugin as _uninstall, updatePlugin as _update, + devNovelPlugin, + devPagedNovelPlugin, } from '@plugins/pluginManager'; import { newer } from '@utils/compareVersion'; import { MMKVStorage, getMMKVObject, setMMKVObject } from '@utils/mmkv/mmkv'; @@ -47,15 +49,43 @@ export default function usePlugins() { getMMKVObject(INSTALLED_PLUGINS) || []; const availablePlugins = getMMKVObject(AVAILABLE_PLUGINS) || []; + + const devPlugins: PluginItem[] = __DEV__ + ? [ + { + id: devNovelPlugin.id, + name: devNovelPlugin.name, + site: devNovelPlugin.site, + lang: devNovelPlugin.lang, + version: devNovelPlugin.version, + url: devNovelPlugin.url, + iconUrl: devNovelPlugin.iconUrl, + hasSettings: !!devNovelPlugin.pluginSettings, + }, + { + id: devPagedNovelPlugin.id, + name: devPagedNovelPlugin.name, + site: devPagedNovelPlugin.site, + lang: devPagedNovelPlugin.lang, + version: devPagedNovelPlugin.version, + url: devPagedNovelPlugin.url, + iconUrl: devPagedNovelPlugin.iconUrl, + hasSettings: !!devPagedNovelPlugin.pluginSettings, + }, + ] + : []; + + const allInstalledPlugins = [...devPlugins, ...installedPlugins]; + setFilteredInstalledPlugins( - installedPlugins.filter(plg => filter.includes(plg.lang)), + allInstalledPlugins.filter(plg => filter.includes(plg.lang)), ); setFilteredAvailablePlugins( orderBy( availablePlugins .filter( avalilablePlugin => - !installedPlugins.some( + !allInstalledPlugins.some( installedPlugin => installedPlugin.id === avalilablePlugin.id, ), ) @@ -137,6 +167,10 @@ export default function usePlugins() { if (pinnedPlugins.includes(plugin.id)) { setPinnedPlugins(pinnedPlugins.filter(id => id !== plugin.id)); } + if (plugin.id === 'dev-novel' || plugin.id === 'dev-paged-novel') { + filterPlugins(languagesFilter); + return Promise.resolve(); + } const installedPlugins = getMMKVObject(INSTALLED_PLUGINS) || []; setMMKVObject( diff --git a/src/hooks/persisted/useSettings.ts b/src/hooks/persisted/useSettings.ts index 6835f906bd..c98eec5d97 100644 --- a/src/hooks/persisted/useSettings.ts +++ b/src/hooks/persisted/useSettings.ts @@ -119,8 +119,22 @@ export interface ChapterReaderSettings { epubUseAppTheme: boolean; epubUseCustomCSS: boolean; epubUseCustomJS: boolean; + /** + * Custom code + */ + replaceText: Record; + removeText: string[]; + codeSnippetsCSS: CodeSnippet[]; + codeSnippetsJS: CodeSnippet[]; } +type CodeSnippet = { + name: string; + code: string; + lang: 'js' | 'css'; + active: boolean; +}; + const initialAppSettings: AppSettings = { /** * General settings @@ -209,6 +223,13 @@ export const initialChapterReaderSettings: ChapterReaderSettings = { epubUseAppTheme: false, epubUseCustomCSS: false, epubUseCustomJS: false, + /** + * Custom code + */ + replaceText: {}, + removeText: [], + codeSnippetsCSS: [], + codeSnippetsJS: [], }; export const useAppSettings = () => { @@ -280,6 +301,7 @@ export const useChapterReaderSettings = () => { // Ensure TTS settings have proper defaults (migration for existing users) const chapterReaderSettings = { + ...initialChapterReaderSettings, ...storedSettings, tts: { ...initialChapterReaderSettings.tts, diff --git a/src/navigators/MoreStack.tsx b/src/navigators/MoreStack.tsx index 2e60fc7466..0a4dde1c66 100644 --- a/src/navigators/MoreStack.tsx +++ b/src/navigators/MoreStack.tsx @@ -18,6 +18,7 @@ import RespositorySettings from '@screens/settings/SettingsRepositoryScreen/Sett // import LibrarySettings from '@screens/settings/SettingsLibraryScreen/SettingsLibraryScreen'; import StatsScreen from '@screens/StatsScreen/StatsScreen'; import { MoreStackParamList, SettingsStackParamList } from './types'; +import SettingsCustomCode from '@screens/settings/SettingsCustomCodeScreen'; const Stack = createNativeStackNavigator< MoreStackParamList & SettingsStackParamList @@ -34,6 +35,7 @@ const SettingsStack = () => ( + {/* */} diff --git a/src/navigators/types/index.ts b/src/navigators/types/index.ts index b0fe4cd52e..40b1a07cd0 100644 --- a/src/navigators/types/index.ts +++ b/src/navigators/types/index.ts @@ -82,6 +82,7 @@ export type SettingsStackParamList = { AdvancedSettings: undefined; LibrarySettings: undefined; RespositorySettings: { url?: string } | undefined; + CustomCode: undefined; }; export type NovelScreenProps = StackScreenProps< @@ -169,6 +170,10 @@ export type BackupSettingsScreenProps = StackScreenProps< SettingsStackParamList, 'BackupSettings' >; +export type CustomCodeSettingsScreenProps = StackScreenProps< + SettingsStackParamList, + 'CustomCode' +>; export type AdvancedSettingsScreenProps = StackScreenProps< SettingsStackParamList, 'AdvancedSettings' diff --git a/src/plugins/dev/DevNovelPlugin.ts b/src/plugins/dev/DevNovelPlugin.ts new file mode 100644 index 0000000000..11b67f99f5 --- /dev/null +++ b/src/plugins/dev/DevNovelPlugin.ts @@ -0,0 +1,284 @@ +import { + Plugin, + NovelItem, + SourceNovel, + ChapterItem, + NovelStatus, +} from '../types'; +import { dbManager } from '@database/db'; +import { novelSchema } from '@database/schema'; +import { and, eq } from 'drizzle-orm'; +import { Storage } from '@plugins/helpers/storage'; + +const generateChapterContent = (chapterNumber: number): string => { + const patterns = [ + `

Chapter ${chapterNumber}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

`, + `

Chapter ${chapterNumber}

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammeled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.

The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure.

To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

`, + `

Chapter ${chapterNumber}

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

Omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

`, + `

Chapter ${chapterNumber}

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

`, + `

Chapter ${chapterNumber}

In a free hour, when our power of choice is untrammeled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.

The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?

But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue.

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammeled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.

`, + ]; + + return patterns[chapterNumber % 5]; +}; + +const mockNovels: NovelItem[] = [ + { + id: undefined, + name: 'The Great Adventure', + path: 'the-great-adventure', + cover: 'https://picsum.photos/seed/novel1/300/450', + }, + { + id: undefined, + name: 'Mystery of the Old Manor', + path: 'mystery-of-the-old-manor', + cover: 'https://picsum.photos/seed/novel2/300/450', + }, + { + id: undefined, + name: "Dragon's Quest", + path: 'dragons-quest', + cover: 'https://picsum.photos/seed/novel3/300/450', + }, + { + id: undefined, + name: 'Love in the City', + path: 'love-in-the-city', + cover: 'https://picsum.photos/seed/novel4/300/450', + }, + { + id: undefined, + name: "The Warrior's Path", + path: 'the-warriors-path', + cover: 'https://picsum.photos/seed/novel5/300/450', + }, + { + id: undefined, + name: 'Science Fiction Tales', + path: 'science-fiction-tales', + cover: 'https://picsum.photos/seed/novel6/300/450', + }, + { + id: undefined, + name: 'Fantasy World', + path: 'fantasy-world', + cover: 'https://picsum.photos/seed/novel7/300/450', + }, + { + id: undefined, + name: 'The Lost Kingdom', + path: 'the-lost-kingdom', + cover: 'https://picsum.photos/seed/novel8/300/450', + }, + { + id: undefined, + name: 'Modern Life', + path: 'modern-life', + cover: 'https://picsum.photos/seed/novel9/300/450', + }, + { + id: undefined, + name: 'Historical Drama', + path: 'historical-drama', + cover: 'https://picsum.photos/seed/novel10/300/450', + }, +]; + +const getNovelByPath = ( + path: string, +): + | { + name: string; + author: string; + summary: string; + status: NovelStatus; + cover: string; + } + | undefined => { + const novels: Record< + string, + { + name: string; + author: string; + summary: string; + status: NovelStatus; + cover: string; + } + > = { + 'the-great-adventure': { + name: 'The Great Adventure', + author: 'Dev Author', + summary: + 'An epic tale of adventure across mysterious lands. Join our hero as they traverse mountains, forests, and deserts in search of the legendary treasure. Along the way, they will face dangerous enemies, make unlikely friends, and discover secrets that will change the world.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/novel1/300/450', + }, + 'mystery-of-the-old-manor': { + name: 'Mystery of the Old Manor', + author: 'Dev Author', + summary: + 'A gripping mystery set in an old Victorian manor. When the wealthy owner dies under suspicious circumstances, it falls to the young detective to unravel the truth behind the locked rooms and family secrets.', + status: NovelStatus.Completed, + cover: 'https://picsum.photos/seed/novel2/300/450', + }, + 'dragons-quest': { + name: "Dragon's Quest", + author: 'Dev Author', + summary: + 'A young dragon rider must bond with her dragon and save the kingdom from an ancient evil. Follow her journey as she trains, fights, and grows stronger alongside her scaled companion.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/novel3/300/450', + }, + 'love-in-the-city': { + name: 'Love in the City', + author: 'Dev Author', + summary: + "Modern romance in a bustling city. Three friends navigate love, career, and friendship in this heartwarming tale of finding one's place in the world.", + status: NovelStatus.OnHiatus, + cover: 'https://picsum.photos/seed/novel4/300/450', + }, + 'the-warriors-path': { + name: "The Warrior's Path", + author: 'Dev Author', + summary: + 'A martial arts epic following a young disciple as he trains under legendary masters and competes in tournaments across ancient China. Strength, honor, and perseverance define his journey.', + status: NovelStatus.Completed, + cover: 'https://picsum.photos/seed/novel5/300/450', + }, + 'science-fiction-tales': { + name: 'Science Fiction Tales', + author: 'Dev Author', + summary: + 'A collection of interconnected stories set in a future where humanity has colonized the stars. Explore alien worlds, advanced technology, and the human condition in this visionary work.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/novel6/300/450', + }, + 'fantasy-world': { + name: 'Fantasy World', + author: 'Dev Author', + summary: + 'Magic, wizards, and epic battles await in this high fantasy adventure. When dark forces threaten the realm, a group of unlikely heroes must band together to save everything they love.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/novel7/300/450', + }, + 'the-lost-kingdom': { + name: 'The Lost Kingdom', + author: 'Dev Author', + summary: + 'Centuries ago, a mighty kingdom vanished without a trace. Now, an explorer has discovered its ruins. What secrets await in the lost kingdom?', + status: NovelStatus.PublishingFinished, + cover: 'https://picsum.photos/seed/novel8/300/450', + }, + 'modern-life': { + name: 'Modern Life', + author: 'Dev Author', + summary: + 'A slice-of-life comedy following the daily adventures of office workers in a tech startup. Hilarity ensues as they deal with bosses, deadlines, and each other.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/novel9/300/450', + }, + 'historical-drama': { + name: 'Historical Drama', + author: 'Dev Author', + summary: + 'Set in ancient times, this drama follows the political intrigue and personal struggles of nobles in a powerful dynasty. Betrayal, loyalty, and ambition clash in this epic tale.', + status: NovelStatus.Completed, + cover: 'https://picsum.photos/seed/novel10/300/450', + }, + }; + return novels[path]; +}; + +const generateChapters = ( + novelPath: string, + chapterCount: number, +): ChapterItem[] => { + const chapters: ChapterItem[] = []; + for (let i = 1; i <= chapterCount; i++) { + chapters.push({ + name: `Chapter ${i}`, + path: `${novelPath}/chapter-${i}`, + chapterNumber: i, + }); + } + return chapters; +}; + +const devNovelPlugin: Plugin = { + id: 'dev-novel', + name: 'Dev Novel', + site: 'Dev', + lang: 'English', + version: '1.0.0', + url: '', + iconUrl: 'https://picsum.photos/seed/devnovel/300/450', + imageRequestInit: { + headers: { 'User-Agent': 'Mozilla/5.0' }, + }, + pluginSettings: { + provideNewContent: { + label: 'Provide new chapters on update', + value: true, + type: 'Switch', + }, + }, + popularNovels: async (_page: number): Promise => { + return mockNovels; + }, + parseNovel: async (novelPath: string): Promise => { + const novel = getNovelByPath(novelPath); + if (!novel) { + throw new Error(`Dev Novel: Novel not found: ${novelPath}`); + } + const s = new Storage('dev-novel'); + const newChapters = s.get('provideNewContent'); + + const res = await dbManager + .select({ + count: novelSchema.totalChapters, + }) + .from(novelSchema) + .where( + and( + eq(novelSchema.pluginId, 'dev-novel'), + eq(novelSchema.path, novelPath), + ), + ) + .get(); + const chapterCount = !res?.count || res.count < 20 ? 20 : res?.count; + const nextChapterCount = newChapters ? chapterCount + 5 : chapterCount; + + const chapters = generateChapters(novelPath, nextChapterCount); + + return { + id: undefined, + name: novel.name, + path: novelPath, + cover: novel.cover, + author: novel.author, + summary: novel.summary, + status: novel.status, + genres: 'Fiction', + chapters: chapters, + totalPages: 0, + }; + }, + + parseChapter: async (chapterPath: string): Promise => { + const match = chapterPath.match(/chapter-(\d+)$/); + const chapterNumber = match ? parseInt(match[1], 10) : 1; + return generateChapterContent(chapterNumber); + }, + searchNovels: async (searchTerm: string): Promise => { + const term = searchTerm.toLowerCase(); + return mockNovels.filter(novel => novel.name.toLowerCase().includes(term)); + }, + resolveUrl: (path: string): string => { + return path; + }, + webStorageUtilized: false, +}; + +export default devNovelPlugin; +export { devNovelPlugin }; diff --git a/src/plugins/dev/DevPagedNovelPlugin.ts b/src/plugins/dev/DevPagedNovelPlugin.ts new file mode 100644 index 0000000000..57916b7605 --- /dev/null +++ b/src/plugins/dev/DevPagedNovelPlugin.ts @@ -0,0 +1,382 @@ +import { + Plugin, + NovelItem, + SourceNovel, + ChapterItem, + NovelStatus, +} from '../types'; +import { dbManager } from '@database/db'; +import { novelSchema } from '@database/schema'; +import { and, eq } from 'drizzle-orm'; +import { Storage } from '@plugins/helpers/storage'; + +const generateChapterContent = (chapterNumber: number): string => { + const patterns = [ + `

Chapter ${chapterNumber}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

`, + `

Chapter ${chapterNumber}

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammeled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.

The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure.

To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

`, + `

Chapter ${chapterNumber}

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

Omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

`, + `

Chapter ${chapterNumber}

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

`, + `

Chapter ${chapterNumber}

In a free hour, when our power of choice is untrammeled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.

The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?

But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue.

These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammeled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.

`, + ]; + + return patterns[chapterNumber % 5]; +}; + +const mockPagedNovels: NovelItem[] = [ + { + id: undefined, + name: 'The Epic Saga', + path: 'the-epic-saga', + cover: 'https://picsum.photos/seed/paged1/300/450', + }, + { + id: undefined, + name: 'Tales of Tomorrow', + path: 'tales-of-tomorrow', + cover: 'https://picsum.photos/seed/paged2/300/450', + }, + { + id: undefined, + name: 'The Infinite Story', + path: 'the-infinite-story', + cover: 'https://picsum.photos/seed/paged3/300/450', + }, + { + id: undefined, + name: 'Chronicles of the Realm', + path: 'chronicles-of-the-realm', + cover: 'https://picsum.photos/seed/paged4/300/450', + }, + { + id: undefined, + name: 'Beyond the Stars', + path: 'beyond-the-stars', + cover: 'https://picsum.photos/seed/paged5/300/450', + }, + { + id: undefined, + name: 'The Forgotten Path', + path: 'the-forgotten-path', + cover: 'https://picsum.photos/seed/paged6/300/450', + }, + { + id: undefined, + name: 'Legends Rise', + path: 'legends-rise', + cover: 'https://picsum.photos/seed/paged7/300/450', + }, + { + id: undefined, + name: 'Shadows of Tomorrow', + path: 'shadows-of-tomorrow', + cover: 'https://picsum.photos/seed/paged8/300/450', + }, + { + id: undefined, + name: 'The Endless Journey', + path: 'the-endless-journey', + cover: 'https://picsum.photos/seed/paged9/300/450', + }, + { + id: undefined, + name: 'Realms of Magic', + path: 'realms-of-magic', + cover: 'https://picsum.photos/seed/paged10/300/450', + }, +]; + +const getPagedNovelByPath = ( + path: string, +): + | { + name: string; + author: string; + summary: string; + status: NovelStatus; + cover: string; + } + | undefined => { + const novels: Record< + string, + { + name: string; + author: string; + summary: string; + status: NovelStatus; + cover: string; + } + > = { + 'the-epic-saga': { + name: 'The Epic Saga', + author: 'Dev Author', + summary: + 'An epic multi-volume saga spanning generations. This paged novel demonstrates how chapters are organized across multiple pages. Each page contains several chapters, allowing for organized content delivery.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/paged1/300/450', + }, + 'tales-of-tomorrow': { + name: 'Tales of Tomorrow', + author: 'Dev Author', + summary: + 'A collection of futuristic stories. With three pages of content, this novel showcases the paged novel format, perfect for long-running series with many chapters.', + status: NovelStatus.Completed, + cover: 'https://picsum.photos/seed/paged2/300/450', + }, + 'the-infinite-story': { + name: 'The Infinite Story', + author: 'Dev Author', + summary: + 'A never-ending tale that continues forever. This paged novel is perfect for testing chapter pagination and page-based loading functionality.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/paged3/300/450', + }, + 'chronicles-of-the-realm': { + name: 'Chronicles of the Realm', + author: 'Dev Author', + summary: + 'An epic fantasy saga with multiple volumes. Each page contains several chapters, demonstrating how large series can be organized efficiently.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/paged4/300/450', + }, + 'beyond-the-stars': { + name: 'Beyond the Stars', + author: 'Dev Author', + summary: + 'A science fiction epic exploring the cosmos. With new pages added on update, this novel demonstrates dynamic pagination for growing series.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/paged5/300/450', + }, + 'the-forgotten-path': { + name: 'The Forgotten Path', + author: 'Dev Author', + summary: + 'A mystery adventure through forgotten lands. This novel showcases the paged format with chapters organized across multiple pages.', + status: NovelStatus.OnHiatus, + cover: 'https://picsum.photos/seed/paged6/300/450', + }, + 'legends-rise': { + name: 'Legends Rise', + author: 'Dev Author', + summary: + 'Heroes emerge from humble beginnings to change the world. A long-running series perfect for testing pagination and updates.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/paged7/300/450', + }, + 'shadows-of-tomorrow': { + name: 'Shadows of Tomorrow', + author: 'Dev Author', + summary: + 'A dystopian tale of a world on the brink. Multiple pages of content demonstrate how chapter pagination handles larger novels.', + status: NovelStatus.Completed, + cover: 'https://picsum.photos/seed/paged8/300/450', + }, + 'the-endless-journey': { + name: 'The Endless Journey', + author: 'Dev Author', + summary: + 'A traveler explores countless worlds in an endless adventure. This paged novel is excellent for testing dynamic page generation.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/paged9/300/450', + }, + 'realms-of-magic': { + name: 'Realms of Magic', + author: 'Dev Author', + summary: + 'Magic users battle for control of magical realms. A long series with pages that grow on update to test pagination fully.', + status: NovelStatus.Ongoing, + cover: 'https://picsum.photos/seed/paged10/300/450', + }, + }; + return novels[path]; +}; + +const DEFAULT_PAGES = 3; +const CHAPTERS_PER_PAGE = 7; + +const generateChaptersForPage = ( + novelPath: string, + page: number, +): ChapterItem[] => { + const chapters: ChapterItem[] = []; + const startChapter = (page - 1) * CHAPTERS_PER_PAGE + 1; + const endChapter = page * CHAPTERS_PER_PAGE; + + for (let i = startChapter; i <= endChapter; i++) { + chapters.push({ + name: `Chapter ${i}`, + path: `${novelPath}/chapter-${i}`, + chapterNumber: i, + page: String(page), + }); + } + return chapters; +}; + +const generateAllChapters = ( + novelPath: string, + totalPages: number, +): ChapterItem[] => { + const chapters: ChapterItem[] = []; + for (let page = 1; page <= totalPages; page++) { + chapters.push(...generateChaptersForPage(novelPath, page)); + } + return chapters; +}; + +const devPagedNovelPlugin: Plugin = { + id: 'dev-paged-novel', + name: 'Dev Paged Novel', + site: 'Dev', + lang: 'English', + version: '1.0.0', + url: '', + iconUrl: 'https://picsum.photos/seed/devpaged/300/450', + imageRequestInit: { + headers: { 'User-Agent': 'Mozilla/5.0' }, + }, + pluginSettings: { + provideNewContent: { + label: 'Provide new chapters on update', + value: true, + type: 'Switch', + }, + provideNewPages: { + label: 'Provide new pages on update', + value: false, + type: 'Switch', + }, + }, + popularNovels: async (_page: number): Promise => { + return mockPagedNovels; + }, + parseNovel: async (novelPath: string): Promise => { + const novel = getPagedNovelByPath(novelPath); + if (!novel) { + throw new Error('Novel not found'); + } + + const s = new Storage('dev-paged-novel'); + const newContent = s.get('provideNewContent'); + const newPages = s.get('provideNewPages'); + + const res = await dbManager + .select({ + count: novelSchema.totalChapters, + }) + .from(novelSchema) + .where( + and( + eq(novelSchema.pluginId, 'dev-paged-novel'), + eq(novelSchema.path, novelPath), + ), + ) + .get(); + + const currentChapters = res?.count || 0; + let totalPages = Math.ceil(currentChapters / CHAPTERS_PER_PAGE); + + if (totalPages < DEFAULT_PAGES) { + totalPages = DEFAULT_PAGES; + } + + if (newPages) { + totalPages += 2; + } else if (newContent) { + const extraChapters = Math.min( + 5, + CHAPTERS_PER_PAGE - (totalPages * CHAPTERS_PER_PAGE - currentChapters), + ); + if (extraChapters > 0) { + totalPages = Math.ceil( + (currentChapters + extraChapters) / CHAPTERS_PER_PAGE, + ); + } + } + + return { + id: undefined, + name: novel.name, + path: novelPath, + cover: novel.cover, + author: novel.author, + summary: novel.summary, + status: novel.status, + genres: 'Fiction', + chapters: generateAllChapters(novelPath, totalPages), + totalPages: totalPages, + }; + }, + parsePage: async ( + novelPath: string, + page: string, + ): Promise<{ chapters: ChapterItem[] }> => { + const novel = getPagedNovelByPath(novelPath); + if (!novel) { + return { chapters: [] }; + } + + const s = new Storage('dev-paged-novel'); + const newContent = s.get('provideNewContent'); + const newPages = s.get('provideNewPages'); + + const res = await dbManager + .select({ + count: novelSchema.totalChapters, + }) + .from(novelSchema) + .where( + and( + eq(novelSchema.pluginId, 'dev-paged-novel'), + eq(novelSchema.path, novelPath), + ), + ) + .get(); + + const currentChapters = res?.count || 0; + let totalPages = Math.ceil(currentChapters / CHAPTERS_PER_PAGE); + + if (totalPages < DEFAULT_PAGES) { + totalPages = DEFAULT_PAGES; + } + + if (newPages) { + totalPages += 2; + } else if (newContent) { + const extraChapters = Math.min( + 5, + CHAPTERS_PER_PAGE - (totalPages * CHAPTERS_PER_PAGE - currentChapters), + ); + if (extraChapters > 0) { + totalPages = Math.ceil( + (currentChapters + extraChapters) / CHAPTERS_PER_PAGE, + ); + } + } + + const pageNum = parseInt(page, 10); + if (pageNum < 1 || pageNum > totalPages) { + return { chapters: [] }; + } + return { + chapters: generateChaptersForPage(novelPath, pageNum), + }; + }, + parseChapter: async (chapterPath: string): Promise => { + const match = chapterPath.match(/chapter-(\d+)$/); + const chapterNumber = match ? parseInt(match[1], 10) : 1; + return generateChapterContent(chapterNumber); + }, + searchNovels: async (searchTerm: string): Promise => { + const term = searchTerm.toLowerCase(); + return mockPagedNovels.filter(novel => + novel.name.toLowerCase().includes(term), + ); + }, + resolveUrl: (path: string): string => { + return path; + }, + webStorageUtilized: false, +}; + +export default devPagedNovelPlugin; +export { devPagedNovelPlugin }; diff --git a/src/plugins/dev/index.ts b/src/plugins/dev/index.ts new file mode 100644 index 0000000000..980ea94763 --- /dev/null +++ b/src/plugins/dev/index.ts @@ -0,0 +1,2 @@ +export { devNovelPlugin, default } from './DevNovelPlugin'; +export { devPagedNovelPlugin } from './DevPagedNovelPlugin'; diff --git a/src/plugins/pluginManager.ts b/src/plugins/pluginManager.ts index 712f979320..c8749f1360 100644 --- a/src/plugins/pluginManager.ts +++ b/src/plugins/pluginManager.ts @@ -24,6 +24,7 @@ import { defaultCover } from './helpers/constants'; import { downloadFile, fetchApi, fetchProto, fetchText } from './helpers/fetch'; import { FilterTypes } from './types/filterTypes'; import { isUrlAbsolute } from './helpers/isAbsoluteUrl'; +import { devNovelPlugin, devPagedNovelPlugin } from './dev'; const packages: Record = { 'htmlparser2': { Parser }, @@ -84,7 +85,12 @@ const initPlugin = (pluginId: string, rawCode: string) => { } }; -const plugins: Record = {}; +const plugins: Record = __DEV__ + ? { + 'dev-novel': devNovelPlugin, + 'dev-paged-novel': devPagedNovelPlugin, + } + : {}; const installPlugin = async ( _plugin: PluginItem, @@ -163,6 +169,10 @@ const getPlugin = (pluginId: string) => { return undefined; } + if (__DEV__ && (pluginId === 'dev-novel' || pluginId === 'dev-paged-novel')) { + return plugins[pluginId]; + } + if (!plugins[pluginId]) { const filePath = `${PLUGIN_STORAGE}/${pluginId}/index.js`; try { @@ -186,4 +196,6 @@ export { updatePlugin, fetchPlugins, LOCAL_PLUGIN_ID, + devNovelPlugin, + devPagedNovelPlugin, }; diff --git a/src/screens/browse/components/InstalledTab.tsx b/src/screens/browse/components/InstalledTab.tsx index 76fd2241ec..1add3013bf 100644 --- a/src/screens/browse/components/InstalledTab.tsx +++ b/src/screens/browse/components/InstalledTab.tsx @@ -54,7 +54,6 @@ export const InstalledTab = memo( const sortedInstalledPlugins = filteredInstalledPlugins.sort( (plgFirst, plgSecond) => plgFirst.name.localeCompare(plgSecond.name), ); - const pinned: PluginItem[] = []; const unpinned: PluginItem[] = []; diff --git a/src/screens/novel/components/NovelBottomSheet.tsx b/src/screens/novel/components/NovelBottomSheet.tsx index f089f1eeb3..cf46e04ee0 100644 --- a/src/screens/novel/components/NovelBottomSheet.tsx +++ b/src/screens/novel/components/NovelBottomSheet.tsx @@ -91,8 +91,8 @@ const ChaptersSettingsSheet = ({ ], ); - const SecondRoute = useCallback( - () => ( + const SecondRoute = useCallback(() => { + return ( - ), - [sort, setChapterSort, theme], - ); + ); + }, [sort, setChapterSort, theme]); const ThirdRoute = useCallback( () => ( diff --git a/src/screens/reader/components/Hooks/useCustomCode.ts b/src/screens/reader/components/Hooks/useCustomCode.ts new file mode 100644 index 0000000000..22fa31dee6 --- /dev/null +++ b/src/screens/reader/components/Hooks/useCustomCode.ts @@ -0,0 +1,40 @@ +import { ChapterReaderSettings } from '@hooks/persisted/useSettings'; +import { useMemo } from 'react'; + +export default function useCustomCode( + readerSettings: Pick< + ChapterReaderSettings, + 'codeSnippetsJS' | 'codeSnippetsCSS' + >, +) { + const customJS = useMemo(() => { + return readerSettings.codeSnippetsJS + .map(snippet => { + if (!snippet.active) return null; + return ` + try { + ${snippet.code} + } catch (error) { + alert(\`Error loading executing ${snippet.name}:\n\` + error); + } + `; + }) + .filter(Boolean) + .join('\n'); + }, [readerSettings.codeSnippetsJS]); + + const customCSS = useMemo(() => { + return readerSettings.codeSnippetsCSS + .map(snippet => { + if (!snippet.active) return null; + return snippet.code; + }) + .filter(Boolean) + .join('\n'); + }, [readerSettings.codeSnippetsCSS]); + + return { + customJS, + customCSS, + }; +} diff --git a/src/screens/reader/components/Hooks/useTTS.ts b/src/screens/reader/components/Hooks/useTTS.ts new file mode 100644 index 0000000000..5e11fd64c2 --- /dev/null +++ b/src/screens/reader/components/Hooks/useTTS.ts @@ -0,0 +1,303 @@ +import React, { useEffect, useRef } from 'react'; +import { AppState, NativeEventEmitter, NativeModules } from 'react-native'; +import WebView from 'react-native-webview'; + +import { MMKVStorage } from '@utils/mmkv/mmkv'; +import { + CHAPTER_GENERAL_SETTINGS, + CHAPTER_READER_SETTINGS, + useChapterReaderSettings, +} from '@hooks/persisted/useSettings'; +import * as Speech from 'expo-speech'; +import { + updateTTSNotification, + dismissTTSNotification, + ttsMediaEmitter, + showTTSNotification, + updateTTSProgress, + updateTTSPlaybackState, +} from '@utils/ttsNotification'; +import { ChapterInfo, NovelInfo } from '@database/types'; +import { WebViewPostEvent } from '../WebViewReader'; + +const { RNDeviceInfo } = NativeModules; +const deviceInfoEmitter = new NativeEventEmitter(RNDeviceInfo); + +export default function useTTS( + webViewRef: React.RefObject, + novel: NovelInfo, + chapter: ChapterInfo, +) { + const { setChapterReaderSettings, ...readerSettings } = + useChapterReaderSettings(); + const isTTSReadingRef = useRef(false); + const autoStartTTSRef = useRef(false); + const ttsQueueRef = useRef([]); + const ttsQueueIndexRef = useRef(0); + const appStateRef = useRef(AppState.currentState); + + useEffect(() => { + const playListener = ttsMediaEmitter.addListener('TTSPlay', () => { + webViewRef.current?.injectJavaScript(` + if (window.tts && !tts.reading) { tts.resume(); } + `); + }); + const pauseListener = ttsMediaEmitter.addListener('TTSPause', () => { + webViewRef.current?.injectJavaScript(` + if (window.tts && tts.reading) { tts.pause(); } + `); + }); + const stopListener = ttsMediaEmitter.addListener('TTSStop', () => { + webViewRef.current?.injectJavaScript(` + if (window.tts) { tts.stop(); } + `); + }); + const rewindListener = ttsMediaEmitter.addListener('TTSRewind', () => { + webViewRef.current?.injectJavaScript(` + if (window.tts && tts.started) { tts.rewind(); } + `); + }); + const prevListener = ttsMediaEmitter.addListener('TTSPrev', () => { + webViewRef.current?.injectJavaScript(` + if (window.tts && window.reader && window.reader.prevChapter) { + window.reader.post({ type: 'prev', autoStartTTS: true }); + } + `); + }); + const nextListener = ttsMediaEmitter.addListener('TTSNext', () => { + webViewRef.current?.injectJavaScript(` + if (window.tts && window.reader && window.reader.nextChapter) { + window.reader.post({ type: 'next', autoStartTTS: true }); + } + `); + }); + const seekToListener = ttsMediaEmitter.addListener( + 'TTSSeekTo', + (event: { position: number }) => { + const position = event.position; + webViewRef.current?.injectJavaScript(` + if (window.tts && tts.started) { tts.seekTo(${position}); } + `); + }, + ); + return () => { + playListener.remove(); + pauseListener.remove(); + stopListener.remove(); + rewindListener.remove(); + prevListener.remove(); + nextListener.remove(); + seekToListener.remove(); + }; + }, [webViewRef]); + + useEffect(() => { + if (isTTSReadingRef.current) { + updateTTSNotification({ + novelName: novel?.name || 'Unknown', + chapterName: chapter.name, + coverUri: novel?.cover || '', + isPlaying: isTTSReadingRef.current, + }); + } + return () => { + dismissTTSNotification(); + }; + }, [novel?.name, novel?.cover, chapter.name]); + + useEffect(() => { + const mmkvListener = MMKVStorage.addOnValueChangedListener(key => { + switch (key) { + case CHAPTER_READER_SETTINGS: + // Stop any currently playing speech + Speech.stop(); + + // Update WebView settings + webViewRef.current?.injectJavaScript( + ` + reader.readerSettings.val = ${MMKVStorage.getString( + CHAPTER_READER_SETTINGS, + )}; + // Auto-restart TTS if currently reading + if (window.tts && tts.reading) { + const currentElement = tts.currentElement; + const wasReading = tts.reading; + tts.stop(); + if (wasReading) { + setTimeout(() => { + tts.start(currentElement); + }, 100); + } + } + `, + ); + break; + case CHAPTER_GENERAL_SETTINGS: + webViewRef.current?.injectJavaScript( + `reader.generalSettings.val = ${MMKVStorage.getString( + CHAPTER_GENERAL_SETTINGS, + )}`, + ); + break; + } + }); + + const subscription = deviceInfoEmitter.addListener( + 'RNDeviceInfo_batteryLevelDidChange', + (level: number) => { + webViewRef.current?.injectJavaScript( + `reader.batteryLevel.val = ${level}`, + ); + }, + ); + return () => { + subscription.remove(); + mmkvListener.remove(); + }; + }, [setChapterReaderSettings, webViewRef]); + + useEffect(() => { + const subscription = AppState.addEventListener('change', nextState => { + appStateRef.current = nextState; + if (nextState === 'active' && isTTSReadingRef.current) { + const index = ttsQueueIndexRef.current; + webViewRef.current?.injectJavaScript(` + if (window.tts && window.tts.allReadableElements) { + const idx = ${index}; + if (idx < tts.allReadableElements.length) { + tts.elementsRead = idx; + tts.currentElement = tts.allReadableElements[idx]; + tts.prevElement = null; + tts.started = true; + tts.reading = true; + tts.scrollToElement(tts.currentElement); + tts.currentElement.classList.add('highlight'); + } + } + `); + } + }); + + return () => subscription.remove(); + }, [webViewRef]); + + const speakText = (text: string) => { + Speech.speak(text, { + onDone() { + const isBackground = + appStateRef.current === 'background' || + appStateRef.current === 'inactive'; + + if ( + isBackground && + ttsQueueRef.current.length > 0 && + ttsQueueIndexRef.current + 1 < ttsQueueRef.current.length + ) { + const nextIndex = ttsQueueIndexRef.current + 1; + const nextText = ttsQueueRef.current[nextIndex]; + if (nextText) { + ttsQueueIndexRef.current = nextIndex; + speakText(nextText); + return; + } + } + + if (isBackground) { + isTTSReadingRef.current = false; + dismissTTSNotification(); + webViewRef.current?.injectJavaScript('tts.stop?.()'); + return; + } + + webViewRef.current?.injectJavaScript('tts.next?.()'); + }, + voice: readerSettings.tts?.voice?.identifier, + pitch: readerSettings.tts?.pitch || 1, + rate: readerSettings.tts?.rate || 1, + }); + }; + + function eventTTSQueue(event: WebViewPostEvent) { + const payload = event.data as + | { queue?: unknown; startIndex?: unknown } + | undefined; + const queue = Array.isArray(payload?.queue) + ? payload?.queue.filter( + (item): item is string => + typeof item === 'string' && item.trim().length > 0, + ) + : []; + ttsQueueRef.current = queue; + if (typeof payload?.startIndex === 'number') { + ttsQueueIndexRef.current = payload.startIndex; + } else { + ttsQueueIndexRef.current = 0; + } + } + + function eventTTSSpeak(event: WebViewPostEvent) { + if (event.data && typeof event.data === 'string') { + if (typeof event.index === 'number') { + ttsQueueIndexRef.current = event.index; + } + if (!isTTSReadingRef.current) { + isTTSReadingRef.current = true; + showTTSNotification({ + novelName: novel?.name || 'Unknown', + chapterName: chapter.name, + coverUri: novel?.cover || '', + isPlaying: true, + }); + } else { + updateTTSNotification({ + novelName: novel?.name || 'Unknown', + chapterName: chapter.name, + coverUri: novel?.cover || '', + isPlaying: true, + }); + } + if ( + typeof event.index === 'number' && + typeof event.total === 'number' && + event.total > 0 + ) { + updateTTSProgress(event.index, event.total); + } + speakText(event.data); + } else { + webViewRef.current?.injectJavaScript('tts.next?.()'); + } + } + function eventTTSPauseSpeak() { + Speech.stop(); + } + function eventTTSStopSpeak() { + Speech.stop(); + if (!autoStartTTSRef.current) { + isTTSReadingRef.current = false; + ttsQueueRef.current = []; + ttsQueueIndexRef.current = 0; + dismissTTSNotification(); + } + } + function eventTTSState(event: WebViewPostEvent) { + if (event.data && typeof event.data === 'object') { + const data = event.data as { isReading?: boolean }; + const isReading = data.isReading === true; + isTTSReadingRef.current = isReading; + updateTTSPlaybackState(isReading); + } + } + + return { + isTTSReadingRef, + autoStartTTSRef, + appStateRef, + speakText, + eventTTSQueue, + eventTTSSpeak, + eventTTSPauseSpeak, + eventTTSStopSpeak, + eventTTSState, + }; +} diff --git a/src/screens/reader/components/Hooks/useTextModifications.ts b/src/screens/reader/components/Hooks/useTextModifications.ts new file mode 100644 index 0000000000..6854aa5887 --- /dev/null +++ b/src/screens/reader/components/Hooks/useTextModifications.ts @@ -0,0 +1,104 @@ +import { useChapterReaderSettings } from '@hooks/persisted/useSettings'; +import React, { useMemo, useState } from 'react'; +import { WebViewPostEvent } from '../WebViewReader'; + +export default function useTextModifications(chapterText: string) { + // Replace modal state + const [replaceModalVisible, setReplaceModalVisible] = useState(false); + const [selectedTextForReplace, setSelectedTextForReplace] = useState(''); + const [replacementText, setReplacementText] = useState(''); + + const { setChapterReaderSettings, ...readerSettings } = + useChapterReaderSettings(); + + const html = useMemo(() => { + let chText = chapterText; + readerSettings.removeText.forEach(text => { + // test if text is regex + const m = text.match(/^\/(.*)\/([gmiyuvsd]*)$/); + if (m) { + const regex = new RegExp(m[1], m[2] ?? ''); + chText = chText.replace(regex, ''); + } else { + chText = chText.split(text).join(''); + } + }); + Object.entries(readerSettings.replaceText).forEach( + ([text, replacement]) => { + const m = text.match(/^\/(.*)\/([gmiyuvsd]*)$/); + if (m) { + const regex = new RegExp(m[1], m[2] ?? ''); + chText = chText.replace(regex, replacement); + } else { + chText = chText.split(text).join(replacement); + } + }, + ); + return chText; + }, [chapterText, readerSettings.removeText, readerSettings.replaceText]); + + const handleTextAction = React.useCallback( + (action: string, text: string) => { + if (!text) return; + + if (action === 'remove') { + // Add to removeText array if not already present + const newRemoveText = [...readerSettings.removeText]; + if (!newRemoveText.includes(text)) { + newRemoveText.push(text); + setChapterReaderSettings({ removeText: newRemoveText }); + } + } else if (action === 'replace') { + // Show modal for user to enter replacement text + setSelectedTextForReplace(text); + setReplacementText(''); + setReplaceModalVisible(true); + } + }, + [readerSettings.removeText, setChapterReaderSettings], + ); + + const handleReplaceSave = React.useCallback(() => { + if (!selectedTextForReplace) return false; + + const newReplaceText = { ...readerSettings.replaceText }; + if (!(selectedTextForReplace in newReplaceText)) { + newReplaceText[selectedTextForReplace] = replacementText; + setChapterReaderSettings({ replaceText: newReplaceText }); + } + setReplaceModalVisible(false); + return true; + }, [ + selectedTextForReplace, + readerSettings.replaceText, + replacementText, + setChapterReaderSettings, + ]); + + const handleReplaceCancel = React.useCallback(() => { + setReplaceModalVisible(false); + setSelectedTextForReplace(''); + setReplacementText(''); + }, []); + + function eventTextAction(event: WebViewPostEvent) { + if (event.data) { + const action = Object.keys(event.data)[0]; + const text = event.data[action]; + handleTextAction(action as string, String(text)); + } + } + + return { + html, + replaceModalVisible, + setReplaceModalVisible, + selectedTextForReplace, + setSelectedTextForReplace, + replacementText, + setReplacementText, + handleReplaceSave, + handleReplaceCancel, + eventTextAction, + }; +} diff --git a/src/screens/reader/components/WebViewReader.tsx b/src/screens/reader/components/WebViewReader.tsx index 99befe1cc7..1dc9ae28f0 100644 --- a/src/screens/reader/components/WebViewReader.tsx +++ b/src/screens/reader/components/WebViewReader.tsx @@ -1,10 +1,5 @@ -import React, { memo, useEffect, useMemo, useRef, useState } from 'react'; -import { - AppState, - NativeEventEmitter, - NativeModules, - StatusBar, -} from 'react-native'; +import React, { memo, useMemo, useRef } from 'react'; +import { StatusBar, StyleSheet } from 'react-native'; import WebView from 'react-native-webview'; import color from 'color'; @@ -12,29 +7,20 @@ import { useTheme } from '@hooks/persisted'; import { getString } from '@strings/translations'; import { getPlugin } from '@plugins/pluginManager'; -import { MMKVStorage, getMMKVObject } from '@utils/mmkv/mmkv'; import { - CHAPTER_GENERAL_SETTINGS, - CHAPTER_READER_SETTINGS, - ChapterGeneralSettings, - ChapterReaderSettings, - initialChapterGeneralSettings, - initialChapterReaderSettings, + useChapterGeneralSettings, + useChapterReaderSettings, } from '@hooks/persisted/useSettings'; import { getBatteryLevelSync } from 'react-native-device-info'; -import * as Speech from 'expo-speech'; import { PLUGIN_STORAGE } from '@utils/Storages'; import { useChapterContext } from '../ChapterContext'; -import { - showTTSNotification, - updateTTSNotification, - updateTTSPlaybackState, - updateTTSProgress, - dismissTTSNotification, - ttsMediaEmitter, -} from '@utils/ttsNotification'; +import KeyboardAvoidingModal from '@components/Modal/KeyboardAvoidingModal'; +import { TextInput } from 'react-native-paper'; +import useTTS from './Hooks/useTTS'; +import useCustomCode from './Hooks/useCustomCode'; +import useTextModifications from './Hooks/useTextModifications'; -type WebViewPostEvent = { +export type WebViewPostEvent = { type: string; data?: { [key: string]: unknown }; autoStartTTS?: boolean; @@ -56,9 +42,6 @@ const onLogMessage = (payload: { nativeEvent: { data: string } }) => { } }; -const { RNDeviceInfo } = NativeModules; -const deviceInfoEmitter = new NativeEventEmitter(RNDeviceInfo); - const assetsUriPrefix = __DEV__ ? 'http://localhost:8081/assets' : 'file:///android_asset'; @@ -67,7 +50,7 @@ const WebViewReader: React.FC = ({ onPress }) => { const { novel, chapter, - chapterText: html, + chapterText, navigateChapter, saveProgress, nextChapter, @@ -76,27 +59,29 @@ const WebViewReader: React.FC = ({ onPress }) => { } = useChapterContext(); const theme = useTheme(); // Use state for settings so they update when MMKV changes - const [readerSettings, setReaderSettings] = useState( - () => - getMMKVObject(CHAPTER_READER_SETTINGS) || - initialChapterReaderSettings, - ); - const chapterGeneralSettings = useMemo( - () => - getMMKVObject(CHAPTER_GENERAL_SETTINGS) || - initialChapterGeneralSettings, - // needed to preserve settings during chapter change - // eslint-disable-next-line react-hooks/exhaustive-deps - [chapter.id], - ); + const readerSettings = useChapterReaderSettings(); + const chapterGeneralSettings = useChapterGeneralSettings(); - // Update readerSettings when chapter changes - useEffect(() => { - setReaderSettings( - getMMKVObject(CHAPTER_READER_SETTINGS) || - initialChapterReaderSettings, - ); - }, [chapter.id]); + const { + autoStartTTSRef, + eventTTSQueue, + eventTTSSpeak, + eventTTSPauseSpeak, + eventTTSStopSpeak, + eventTTSState, + } = useTTS(webViewRef, novel, chapter); + const { + html, + replaceModalVisible, + setReplaceModalVisible, + selectedTextForReplace, + replacementText, + setReplacementText, + handleReplaceSave, + handleReplaceCancel, + eventTextAction, + } = useTextModifications(chapterText); + const { customJS, customCSS } = useCustomCode(readerSettings); // Update battery level when chapter changes to ensure fresh value on navigation const batteryLevel = useMemo(() => getBatteryLevelSync(), []); @@ -104,232 +89,34 @@ const WebViewReader: React.FC = ({ onPress }) => { const pluginCustomJS = `file://${PLUGIN_STORAGE}/${plugin?.id}/custom.js`; const pluginCustomCSS = `file://${PLUGIN_STORAGE}/${plugin?.id}/custom.css`; const nextChapterScreenVisible = useRef(false); - const autoStartTTSRef = useRef(false); - const isTTSReadingRef = useRef(false); - const readerSettingsRef = useRef(readerSettings); - const appStateRef = useRef(AppState.currentState); - const ttsQueueRef = useRef([]); - const ttsQueueIndexRef = useRef(0); - - useEffect(() => { - readerSettingsRef.current = readerSettings; - }, [readerSettings]); - - useEffect(() => { - const playListener = ttsMediaEmitter.addListener('TTSPlay', () => { - webViewRef.current?.injectJavaScript(` - if (window.tts && !tts.reading) { tts.resume(); } - `); - }); - const pauseListener = ttsMediaEmitter.addListener('TTSPause', () => { - webViewRef.current?.injectJavaScript(` - if (window.tts && tts.reading) { tts.pause(); } - `); - }); - const stopListener = ttsMediaEmitter.addListener('TTSStop', () => { - webViewRef.current?.injectJavaScript(` - if (window.tts) { tts.stop(); } - `); - }); - const rewindListener = ttsMediaEmitter.addListener('TTSRewind', () => { - webViewRef.current?.injectJavaScript(` - if (window.tts && tts.started) { tts.rewind(); } - `); - }); - const prevListener = ttsMediaEmitter.addListener('TTSPrev', () => { - webViewRef.current?.injectJavaScript(` - if (window.tts && window.reader && window.reader.prevChapter) { - window.reader.post({ type: 'prev', autoStartTTS: true }); - } - `); - }); - const nextListener = ttsMediaEmitter.addListener('TTSNext', () => { - webViewRef.current?.injectJavaScript(` - if (window.tts && window.reader && window.reader.nextChapter) { - window.reader.post({ type: 'next', autoStartTTS: true }); - } - `); - }); - const seekToListener = ttsMediaEmitter.addListener( - 'TTSSeekTo', - (event: { position: number }) => { - const position = event.position; - webViewRef.current?.injectJavaScript(` - if (window.tts && tts.started) { tts.seekTo(${position}); } - `); - }, - ); - return () => { - playListener.remove(); - pauseListener.remove(); - stopListener.remove(); - rewindListener.remove(); - prevListener.remove(); - nextListener.remove(); - seekToListener.remove(); - }; - }, [webViewRef]); - - useEffect(() => { - if (isTTSReadingRef.current) { - updateTTSNotification({ - novelName: novel?.name || 'Unknown', - chapterName: chapter.name, - coverUri: novel?.cover || '', - isPlaying: isTTSReadingRef.current, - }); - } - }, [novel?.name, novel?.cover, chapter.name]); - - useEffect(() => { - return () => { - dismissTTSNotification(); - }; - }, []); - useEffect(() => { - const mmkvListener = MMKVStorage.addOnValueChangedListener(key => { - switch (key) { - case CHAPTER_READER_SETTINGS: - // Update local state with new settings - const newSettings = - getMMKVObject(CHAPTER_READER_SETTINGS) || - initialChapterReaderSettings; - setReaderSettings(newSettings); - - // Stop any currently playing speech - Speech.stop(); - - // Update WebView settings - webViewRef.current?.injectJavaScript( - ` - reader.readerSettings.val = ${MMKVStorage.getString( - CHAPTER_READER_SETTINGS, - )}; - // Auto-restart TTS if currently reading - if (window.tts && tts.reading) { - const currentElement = tts.currentElement; - const wasReading = tts.reading; - tts.stop(); - if (wasReading) { - setTimeout(() => { - tts.start(currentElement); - }, 100); - } - } - `, - ); - break; - case CHAPTER_GENERAL_SETTINGS: - webViewRef.current?.injectJavaScript( - `reader.generalSettings.val = ${MMKVStorage.getString( - CHAPTER_GENERAL_SETTINGS, - )}`, - ); - break; - } - }); - - const subscription = deviceInfoEmitter.addListener( - 'RNDeviceInfo_batteryLevelDidChange', - (level: number) => { - webViewRef.current?.injectJavaScript( - `reader.batteryLevel.val = ${level}`, - ); - }, - ); - return () => { - subscription.remove(); - mmkvListener.remove(); - }; - }, [webViewRef]); - - useEffect(() => { - const subscription = AppState.addEventListener('change', nextState => { - appStateRef.current = nextState; - if (nextState === 'active' && isTTSReadingRef.current) { - const index = ttsQueueIndexRef.current; - webViewRef.current?.injectJavaScript(` - if (window.tts && window.tts.allReadableElements) { - const idx = ${index}; - if (idx < tts.allReadableElements.length) { - tts.elementsRead = idx; - tts.currentElement = tts.allReadableElements[idx]; - tts.prevElement = null; - tts.started = true; - tts.reading = true; - tts.scrollToElement(tts.currentElement); - tts.currentElement.classList.add('highlight'); - } - } - `); - } - }); - - return () => subscription.remove(); - }, [webViewRef]); - - const speakText = (text: string) => { - Speech.speak(text, { - onDone() { - const isBackground = - appStateRef.current === 'background' || - appStateRef.current === 'inactive'; - - if ( - isBackground && - ttsQueueRef.current.length > 0 && - ttsQueueIndexRef.current + 1 < ttsQueueRef.current.length - ) { - const nextIndex = ttsQueueIndexRef.current + 1; - const nextText = ttsQueueRef.current[nextIndex]; - if (nextText) { - ttsQueueIndexRef.current = nextIndex; - speakText(nextText); - return; - } - } - - if (isBackground) { - isTTSReadingRef.current = false; - dismissTTSNotification(); - webViewRef.current?.injectJavaScript('tts.stop?.()'); - return; - } - - webViewRef.current?.injectJavaScript('tts.next?.()'); - }, - voice: readerSettingsRef.current.tts?.voice?.identifier, - pitch: readerSettingsRef.current.tts?.pitch || 1, - rate: readerSettingsRef.current.tts?.rate || 1, - }); - }; const isRTL = plugin?.lang === 'Arabic' || plugin?.lang === 'Hebrew'; const readerDir = isRTL ? 'rtl' : 'ltr'; return ( - { - // Update battery level when WebView finishes loading - const currentBatteryLevel = getBatteryLevelSync(); - webViewRef.current?.injectJavaScript( - `if (window.reader && window.reader.batteryLevel) { + <> + { + // Update battery level when WebView finishes loading + const currentBatteryLevel = getBatteryLevelSync(); + webViewRef.current?.injectJavaScript( + `if (window.reader && window.reader.batteryLevel) { window.reader.batteryLevel.val = ${currentBatteryLevel}; }`, - ); + ); - if (autoStartTTSRef.current) { - autoStartTTSRef.current = false; - setTimeout(() => { - webViewRef.current?.injectJavaScript(` + if (autoStartTTSRef.current) { + autoStartTTSRef.current = false; + setTimeout(() => { + webViewRef.current?.injectJavaScript(` (function() { if (window.tts && reader.generalSettings.val.TTSEnable) { setTimeout(() => { @@ -342,113 +129,61 @@ const WebViewReader: React.FC = ({ onPress }) => { } })(); `); - }, 300); - } - }} - onMessage={(ev: { nativeEvent: { data: string } }) => { - __DEV__ && onLogMessage(ev); - const event: WebViewPostEvent = JSON.parse(ev.nativeEvent.data); - switch (event.type) { - case 'tts-queue': { - const payload = event.data as - | { queue?: unknown; startIndex?: unknown } - | undefined; - const queue = Array.isArray(payload?.queue) - ? payload?.queue.filter( - (item): item is string => - typeof item === 'string' && item.trim().length > 0, - ) - : []; - ttsQueueRef.current = queue; - if (typeof payload?.startIndex === 'number') { - ttsQueueIndexRef.current = payload.startIndex; - } else { - ttsQueueIndexRef.current = 0; - } - break; + }, 300); } - case 'hide': - onPress(); - break; - case 'next': - nextChapterScreenVisible.current = true; - if (event.autoStartTTS) { - autoStartTTSRef.current = true; - } - navigateChapter('NEXT'); - break; - case 'prev': - if (event.autoStartTTS) { - autoStartTTSRef.current = true; - } - navigateChapter('PREV'); - break; - case 'save': - if (event.data && typeof event.data === 'number') { - saveProgress(event.data); - } - break; - case 'speak': - if (event.data && typeof event.data === 'string') { - if (typeof event.index === 'number') { - ttsQueueIndexRef.current = event.index; + }} + onMessage={(ev: { nativeEvent: { data: string } }) => { + __DEV__ && onLogMessage(ev); + const event: WebViewPostEvent = JSON.parse(ev.nativeEvent.data); + switch (event.type) { + case 'hide': + onPress(); + break; + case 'next': + nextChapterScreenVisible.current = true; + if (event.autoStartTTS) { + autoStartTTSRef.current = true; } - if (!isTTSReadingRef.current) { - isTTSReadingRef.current = true; - showTTSNotification({ - novelName: novel?.name || 'Unknown', - chapterName: chapter.name, - coverUri: novel?.cover || '', - isPlaying: true, - }); - } else { - updateTTSNotification({ - novelName: novel?.name || 'Unknown', - chapterName: chapter.name, - coverUri: novel?.cover || '', - isPlaying: true, - }); + navigateChapter('NEXT'); + break; + case 'prev': + if (event.autoStartTTS) { + autoStartTTSRef.current = true; } - if ( - typeof event.index === 'number' && - typeof event.total === 'number' && - event.total > 0 - ) { - updateTTSProgress(event.index, event.total); + navigateChapter('PREV'); + break; + case 'save': + if (event.data && typeof event.data === 'number') { + saveProgress(event.data); } - speakText(event.data); - } else { - webViewRef.current?.injectJavaScript('tts.next?.()'); - } - break; - case 'pause-speak': - Speech.stop(); - break; - case 'stop-speak': - Speech.stop(); - if (!autoStartTTSRef.current) { - isTTSReadingRef.current = false; - ttsQueueRef.current = []; - ttsQueueIndexRef.current = 0; - dismissTTSNotification(); + break; + case 'tts-queue': { + eventTTSQueue(event); + break; } - break; - case 'tts-state': - if (event.data && typeof event.data === 'object') { - const data = event.data as { isReading?: boolean }; - const isReading = data.isReading === true; - isTTSReadingRef.current = isReading; - updateTTSPlaybackState(isReading); - } - break; - } - }} - source={{ - baseUrl: !chapter.isDownloaded ? plugin?.site : undefined, - headers: plugin?.imageRequestInit?.headers, - method: plugin?.imageRequestInit?.method, - body: plugin?.imageRequestInit?.body, - html: ` + case 'speak': + eventTTSSpeak(event); + break; + case 'pause-speak': + eventTTSPauseSpeak(); + break; + case 'stop-speak': + eventTTSStopSpeak(); + break; + case 'tts-state': + eventTTSState(event); + break; + case 'text-action': + eventTextAction(event); + break; + } + }} + source={{ + baseUrl: !chapter.isDownloaded ? plugin?.site : undefined, + headers: plugin?.imageRequestInit?.headers, + method: plugin?.imageRequestInit?.method, + body: plugin?.imageRequestInit?.body, + html: ` @@ -475,62 +210,68 @@ const WebViewReader: React.FC = ({ onPress }) => { --theme-onSecondary: ${theme.onSecondary}; --theme-surface: ${theme.surface}; --theme-surface-0-9: ${color(theme.surface) - .alpha(0.9) - .toString()}; + .alpha(0.9) + .toString()}; --theme-onSurface: ${theme.onSurface}; --theme-surfaceVariant: ${theme.surfaceVariant}; --theme-onSurfaceVariant: ${theme.onSurfaceVariant}; --theme-outline: ${theme.outline}; --theme-rippleColor: ${theme.rippleColor}; } - + @font-face { font-family: ${readerSettings.fontFamily}; - src: url("file:///android_asset/fonts/${readerSettings.fontFamily - }.ttf"); + src: url("file:///android_asset/fonts/${ + readerSettings.fontFamily + }.ttf"); } - + - + - -
+
${chapter.name}
- ${html} + ${html}
@@ -539,14 +280,58 @@ const WebViewReader: React.FC = ({ onPress }) => { + + function fn(){ + let novelName = "${novel.name}"; + let chapterName = "${chapter.name}"; + let sourceId = "${novel.pluginId}"; + let chapterId =${chapter.id}; + let novelId =${chapter.novelId}; + const qs = (s) => document.querySelector(s); + let html = qs("#LNReader-chapter").innerHTML; + ${customJS} + qs("#LNReader-chapter").innerHTML = html; + } + document.addEventListener("DOMContentLoaded", fn); + `, - }} - /> + }} + /> + setReplaceModalVisible(false)} + onSave={handleReplaceSave} + onCancel={handleReplaceCancel} + title="Replace Text" + > + + + + ); }; +const styles = StyleSheet.create({ + textInput: { + marginBottom: 16, + }, +}); + export default memo(WebViewReader); diff --git a/src/screens/settings/SettingsCustomCodeScreen/Components/CodeInput.tsx b/src/screens/settings/SettingsCustomCodeScreen/Components/CodeInput.tsx new file mode 100644 index 0000000000..d9e9066492 --- /dev/null +++ b/src/screens/settings/SettingsCustomCodeScreen/Components/CodeInput.tsx @@ -0,0 +1,183 @@ +import { TextInput } from '@components'; +import { WINDOW_HEIGHT } from '@gorhom/bottom-sheet'; +import React from 'react'; +import { PixelRatio, StyleSheet } from 'react-native'; +import Animated, { + measure, + useAnimatedRef, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; +import { getRuntimeKind } from 'react-native-worklets'; +import { useTheme } from '@hooks/persisted'; +import { useKeyboardHeight } from '@hooks/common/useKeyboardHeight'; + +const FONT_SIZE = 14; +const LINE_HEIGHT = FONT_SIZE * PixelRatio.getFontScale() * 1.2; + +type CodeInputProps = { + language: 'css' | 'js'; + code: string; + setCode: (code: string) => void; + error?: boolean; +}; + +const START_JS_CODE = `const qs = (s) => document.querySelector(s); +let html = qs("#LNReader-chapter").innerHTML;`; +const START_CSS_CODE = `:root { + --StatusBar-currentHeight: number px; + --readerSettings-theme: color; + --readerSettings-padding: number px; + --readerSettings-textSize: number px; + --readerSettings-textColor: color; + --readerSettings-textAlign: alignment; + --readerSettings-lineHeight: number; + --readerSettings-fontFamily: font; + --theme-primary: color; + --theme-onPrimary: color; + --theme-secondary: color; + --theme-tertiary: color; + --theme-onTertiary: color; + --theme-onSecondary: color; + --theme-surface: color; + --theme-surface-0-9: color; + --theme-onSurface: color; + --theme-surfaceVariant: color; + --theme-onSurfaceVariant: color; + --theme-outline: color; + --theme-rippleColor: color; +}`; +const END_JS_CODE = 'qs("#LNReader-chapter").innerHTML = html;'; + +const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); + +const CodeInput = ({ language, code, setCode, error }: CodeInputProps) => { + const theme = useTheme(); + const textInputRef = useAnimatedRef(); + + const kH = useKeyboardHeight(); + const keyboardHeight = useSharedValue(0); + + React.useEffect(() => { + keyboardHeight.value = withTiming(kH ?? 0, { duration: 150 }); + }, [kH, keyboardHeight]); + + const expanded = useSharedValue(0); + + const maxHeight = useAnimatedStyle(() => { + let m: { height: number; pageY: number } | null = null; + if (getRuntimeKind() !== 1) { + try { + m = measure(textInputRef); + } catch {} + } + + if (!m || !keyboardHeight.value) { + return { maxHeight: WINDOW_HEIGHT / 2 }; + } + return { + maxHeight: Math.min( + Math.max(WINDOW_HEIGHT - keyboardHeight.value - m.pageY, 300), + WINDOW_HEIGHT / 2, + ), + }; + }); + + const maxHeightTop = useAnimatedStyle(() => { + if (expanded.value !== 1) { + return { maxHeight: withTiming(2 * LINE_HEIGHT + 18, { duration: 250 }) }; + } + return { maxHeight: withTiming(WINDOW_HEIGHT / 2, { duration: 250 }) }; + }, [expanded]); + + const maxHeightBottom = useAnimatedStyle(() => { + if (expanded.value !== 2) { + return { maxHeight: withTiming(2 * LINE_HEIGHT + 18, { duration: 250 }) }; + } + return { maxHeight: withTiming(WINDOW_HEIGHT / 2, { duration: 250 }) }; + }); + + const codeColor = React.useMemo( + () => ({ borderColor: theme.outline, color: theme.onSurfaceDisabled }), + [theme], + ); + + return ( + <> + { + expanded.value = expanded.value === 1 ? 0 : 1; + }} + > + {language === 'js' ? START_JS_CODE : START_CSS_CODE} + + + { + expanded.value = 0; + }} + error={error} + /> + + { + expanded.value = expanded.value === 2 ? 0 : 2; + }} + > + {language === 'js' ? END_JS_CODE : ''} + + + ); +}; + +export default CodeInput; + +const styles = StyleSheet.create({ + fakeTextInput: { + borderRadius: 4, + borderWidth: 1, + borderStyle: 'solid', + paddingHorizontal: 16, + paddingVertical: 8, + marginHorizontal: 1, + marginVertical: 2, + fontSize: FONT_SIZE, + lineHeight: LINE_HEIGHT, + }, + topField: { + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, + borderBottomWidth: 0, + flexGrow: 1, + }, + codeField: { + verticalAlign: 'top', + flexGrow: 1, + borderRadius: 0, + borderTopWidth: 0, + borderBottomWidth: 0, + minHeight: LINE_HEIGHT * 8, + }, + bottomField: { + flexGrow: 1, + borderTopLeftRadius: 0, + borderTopRightRadius: 0, + borderTopWidth: 0, + }, +}); diff --git a/src/screens/settings/SettingsCustomCodeScreen/Components/ListItems.tsx b/src/screens/settings/SettingsCustomCodeScreen/Components/ListItems.tsx new file mode 100644 index 0000000000..c779094c6b --- /dev/null +++ b/src/screens/settings/SettingsCustomCodeScreen/Components/ListItems.tsx @@ -0,0 +1,123 @@ +import { useTheme } from '@hooks/persisted'; +import { useMemo } from 'react'; +import { PixelRatio, Pressable, StyleSheet, View } from 'react-native'; +import Icon from '@react-native-vector-icons/material-design-icons'; +import { Text } from 'react-native-paper'; + +const fontScale = PixelRatio.getFontScale(); +const fontSize = 14; +export const LIST_ITEM_LINE_HEIGHT = fontSize * fontScale * 1.2; + +export const ReplaceItem = ({ + item, + removeItem, + editItem, +}: { + item: [string, string]; + removeItem: (identifier: string | number) => void; + editItem: (item: string[]) => void; +}) => { + const theme = useTheme(); + const colorTheme = useMemo(() => { + return { colors: theme }; + }, [theme]); + return ( + editItem(item)} + > + + {item[0]} + + + + + {item[1]} + + { + e.stopPropagation(); + removeItem(item[0]); + }} + /> + + + ); +}; + +export const RemoveItem = ({ + item, + index, + removeItem, + editItem, +}: { + item: string; + index: number; + removeItem: (identifier: string | number) => void; + editItem: (item: string[]) => void; +}) => { + const theme = useTheme(); + const colorTheme = useMemo(() => { + return { colors: theme }; + }, [theme]); + return ( + editItem([item])} + > + + {item} + + removeItem(index)} + /> + + ); +}; + +const styles = StyleSheet.create({ + textfield: { + marginBottom: 16, + }, + row: { + flexDirection: 'row', + gap: 8, + alignItems: 'center', + verticalAlign: 'middle', + }, + itemRow: { + justifyContent: 'space-between', + marginHorizontal: 24, + marginVertical: 8, + height: LIST_ITEM_LINE_HEIGHT, + }, + textItem: { + flexGrow: 1, + flexBasis: '40%', + overflow: 'hidden', + fontSize, + lineHeight: LIST_ITEM_LINE_HEIGHT, + }, + textItemRight: { + textAlign: 'right', + }, + spaceItem: { + flexShrink: 1, + textAlign: 'center', + flexBasis: '10%', + }, +}); diff --git a/src/screens/settings/SettingsCustomCodeScreen/Components/SelfHidingAppbar.tsx b/src/screens/settings/SettingsCustomCodeScreen/Components/SelfHidingAppbar.tsx new file mode 100644 index 0000000000..1b06e20a73 --- /dev/null +++ b/src/screens/settings/SettingsCustomCodeScreen/Components/SelfHidingAppbar.tsx @@ -0,0 +1,43 @@ +import { Appbar } from '@components'; +import { ThemeColors } from '@theme/types'; +import React from 'react'; +import Animated, { + Easing, + SharedValue, + useAnimatedStyle, + withTiming, +} from 'react-native-reanimated'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; + +type SelfHidingAppBarProps = { + title: string; + handleGoBack?: () => void; + theme: ThemeColors; + mode?: 'small' | 'medium' | 'large' | 'center-aligned'; + children?: React.ReactNode; + hiddenState: SharedValue; +}; + +const SelfHidingAppBar = ({ hiddenState, ...props }: SelfHidingAppBarProps) => { + const { top } = useSafeAreaInsets(); + + const hideAppBar = useAnimatedStyle(() => { + // The animation now depends on the shared value's .value + const isHidden = hiddenState.value === 1; + return { + height: withTiming(isHidden ? top : 150, { + duration: 250, + easing: Easing.out(Easing.cubic), + }), + overflow: 'hidden', + }; + }, []); // The dependency array is now EMPTY! + + return ( + + + + ); +}; + +export default SelfHidingAppBar; diff --git a/src/screens/settings/SettingsCustomCodeScreen/Components/SettingsWebView.tsx b/src/screens/settings/SettingsCustomCodeScreen/Components/SettingsWebView.tsx new file mode 100644 index 0000000000..6592305e1e --- /dev/null +++ b/src/screens/settings/SettingsCustomCodeScreen/Components/SettingsWebView.tsx @@ -0,0 +1,363 @@ +import React, { memo, useEffect, useMemo, useRef } from 'react'; +import { NativeEventEmitter, NativeModules, StatusBar } from 'react-native'; +import WebView from 'react-native-webview'; +import color from 'color'; +import { getString } from '@strings/translations'; +import { MMKVStorage } from '@utils/mmkv/mmkv'; +import { + CHAPTER_GENERAL_SETTINGS, + CHAPTER_READER_SETTINGS, + useChapterGeneralSettings, + useChapterReaderSettings, +} from '@hooks/persisted/useSettings'; + +import { getBatteryLevelSync } from 'react-native-device-info'; +import * as Speech from 'expo-speech'; +import { dummyHTML } from './dummies'; +import { useTheme } from '@hooks/persisted'; + +type WebViewPostEvent = { + type: string; + data?: { [key: string]: string | number }; +}; + +const onLogMessage = (payload: { nativeEvent: { data: string } }) => { + const dataPayload = JSON.parse(payload.nativeEvent.data); + if (dataPayload) { + if (dataPayload.type === 'console') { + /* eslint-disable no-console */ + console.info(`[Console] ${JSON.stringify(dataPayload.msg, null, 2)}`); + } + } +}; + +const { RNDeviceInfo } = NativeModules; +const deviceInfoEmitter = new NativeEventEmitter(RNDeviceInfo); + +const assetsUriPrefix = __DEV__ + ? 'http://localhost:8081/assets' + : 'file:///android_asset'; + +const novel = { + 'artist': null, + 'author': 'LNReader-kun', + 'cover': + 'file:///storage/emulated/0/Android/data/com.rajarsheechatterjee.LNReader/files/Novels/lightnovelcave/16/cover.png?1717862123181', + 'genres': 'Action,Hero', + 'id': 16, + 'inLibrary': 1, + 'isLocal': 0, + 'name': 'Preview Man (LN)', + 'path': 'novel/preview-man-16091321', + 'pluginId': 'lightnovelcave', + 'status': 'Ongoing', + 'summary': + 'To preview or not preview. A question that bothered humanity for a long time, until one day… Preview Man appeared.Show More', + 'totalPages': 8, +}; +const chapter = { + 'bookmark': 0, + 'chapterNumber': 1, + 'id': 3722, + 'isDownloaded': 1, + 'name': 'Chapter 1 - The rise of Preview Man', + 'novelId': 16, + 'page': '2', + 'path': 'novel/preview-man/chapter-1', + 'position': 0, + 'progress': 3, + 'readTime': '2100-01-01 00:00:00', + 'releaseTime': 'January 1, 2100', + 'unread': 1, + 'updatedTime': null, +}; + +const SettingsWebView = () => { + const webViewRef = useRef(null); + const theme = useTheme(); + const settings = useChapterReaderSettings(); + const generalSettings = useChapterGeneralSettings(); + const batteryLevel = useMemo(() => getBatteryLevelSync(), []); + + useEffect(() => { + const mmkvListener = MMKVStorage.addOnValueChangedListener(key => { + switch (key) { + case CHAPTER_READER_SETTINGS: + webViewRef.current?.injectJavaScript( + `reader.settings.val = ${MMKVStorage.getString( + CHAPTER_READER_SETTINGS, + )}`, + ); + break; + case CHAPTER_GENERAL_SETTINGS: + webViewRef.current?.injectJavaScript( + `reader.generalSettings.val = ${MMKVStorage.getString( + CHAPTER_GENERAL_SETTINGS, + )}`, + ); + break; + } + }); + + const subscription = deviceInfoEmitter.addListener( + 'RNDeviceInfo_batteryLevelDidChange', + (level: number) => { + webViewRef.current?.injectJavaScript( + `reader.batteryLevel.val = ${level}`, + ); + }, + ); + return () => { + subscription.remove(); + mmkvListener.remove(); + }; + }, [webViewRef]); + + const customJS = useMemo(() => { + return settings.codeSnippetsJS + .map(snippet => { + if (!snippet.active) return null; + return ` + try { + ${snippet.code} + } catch (error) { + alert('Error loading executing ${snippet.name}:\n' + error); + } + `; + }) + .filter(Boolean) + .join('\n'); + }, [settings.codeSnippetsJS]); + + const customCSS = useMemo(() => { + return settings.codeSnippetsCSS + .map(snippet => { + if (!snippet.active) return null; + return snippet.code; + }) + .filter(Boolean) + .join('\n'); + }, [settings.codeSnippetsCSS]); + + const preparedDummyHTML = useMemo(() => { + let resultHtml = dummyHTML; + settings.removeText.forEach(text => { + resultHtml = resultHtml.replace(text, ''); + }); + Object.entries(settings.replaceText).forEach(([text, replacement]) => { + resultHtml = resultHtml.replace(text, replacement); + }); + return resultHtml; + }, [settings.removeText, settings.replaceText]); + + const webViewCSS = useMemo( + () => ` + + + + + + + `, + [ + settings.theme, + customCSS, + settings.fontFamily, + settings.lineHeight, + settings.padding, + settings.textAlign, + settings.textColor, + settings.textSize, + theme.onPrimary, + theme.onSecondary, + theme.onSurface, + theme.onSurfaceVariant, + theme.onTertiary, + theme.outline, + theme.primary, + theme.rippleColor, + theme.secondary, + theme.surface, + theme.surfaceVariant, + theme.tertiary, + ], + ); + + const webViewSource = useMemo( + () => ({ + html: ` + + + + ${webViewCSS} + + + +
${chapter.name}
+
+ ${preparedDummyHTML} +
+
+ + + + + + + + + + `, + }), + [ + webViewCSS, + generalSettings.showScrollPercentage, + generalSettings.showBatteryAndTime, + generalSettings.verticalSeekbar, + generalSettings.bionicReading, + generalSettings.pageReader, + batteryLevel, + preparedDummyHTML, + settings, + customJS, + ], + ); + + return ( + { + __DEV__ && onLogMessage(ev); + const event: WebViewPostEvent = JSON.parse(ev.nativeEvent.data); + switch (event.type) { + case 'hide': + break; + case 'next': + break; + case 'prev': + break; + case 'save': + break; + case 'speak': + if (event.data && typeof event.data === 'string') { + Speech.speak(event.data, { + onDone() { + webViewRef.current?.injectJavaScript('tts.next?.()'); + }, + voice: settings.tts?.voice?.identifier, + pitch: settings.tts?.pitch || 1, + rate: settings.tts?.rate || 1, + }); + } else { + webViewRef.current?.injectJavaScript('tts.next?.()'); + } + break; + case 'stop-speak': + Speech.stop(); + break; + } + }} + source={webViewSource} + /> + ); +}; + +export default memo(SettingsWebView); diff --git a/src/screens/settings/SettingsCustomCodeScreen/Components/dummies.ts b/src/screens/settings/SettingsCustomCodeScreen/Components/dummies.ts new file mode 100644 index 0000000000..0ff72acd18 --- /dev/null +++ b/src/screens/settings/SettingsCustomCodeScreen/Components/dummies.ts @@ -0,0 +1,88 @@ +export const dummyHTML = ` +

Lorem ipsum dolor sit amet consectetuer adipiscing +elit

+

Lorem ipsum dolor sit amet, consectetuer adipiscing +elit. Aenean commodo ligula eget dolor. Aenean massa +strong. Cum sociis natoque penatibus +et magnis dis parturient montes, nascetur ridiculus +mus. Donec quam felis, ultricies nec, pellentesque +eu, pretium quis, sem. Nulla consequat massa quis +enim. Donec pede justo, fringilla vel, aliquet nec, +vulputate eget, arcu. In enim justo, rhoncus ut, +imperdiet a, venenatis vitae, justo. Nullam dictum +felis eu pede link +mollis pretium. Integer tincidunt. Cras dapibus. +Vivamus elementum semper nisi. Aenean vulputate +eleifend tellus. Aenean leo ligula, porttitor eu, +consequat vitae, eleifend ac, enim. Aliquam lorem ante, +dapibus in, viverra quis, feugiat a, tellus. Phasellus +viverra nulla ut metus varius laoreet. Quisque rutrum. +Aenean imperdiet. Etiam ultricies nisi vel augue. +Curabitur ullamcorper ultricies nisi.

+

Lorem ipsum dolor sit amet consectetuer adipiscing +elit

+

Aenean commodo ligula eget dolor aenean massa

+

Lorem ipsum dolor sit amet, consectetuer adipiscing +elit. Aenean commodo ligula eget dolor. Aenean massa. +Cum sociis natoque penatibus et magnis dis parturient +montes, nascetur ridiculus mus. Donec quam felis, +ultricies nec, pellentesque eu, pretium quis, sem.

+ +

Aenean commodo ligula eget dolor aenean massa

+

Lorem ipsum dolor sit amet, consectetuer adipiscing +elit. Aenean commodo ligula eget dolor. Aenean massa. +Cum sociis natoque penatibus et magnis dis parturient +montes, nascetur ridiculus mus. Donec quam felis, +ultricies nec, pellentesque eu, pretium quis, sem.

+
    +
  • Lorem ipsum dolor sit amet consectetuer.
    • +
  • Aenean commodo ligula eget dolor.
    • +
  • Aenean massa cum sociis natoque penatibus.
    • +
+

Lorem ipsum dolor sit amet, consectetuer adipiscing +elit. Aenean commodo ligula eget dolor. Aenean massa. +Cum sociis natoque penatibus et magnis dis parturient +montes, nascetur ridiculus mus. Donec quam felis, +ultricies nec, pellentesque eu, pretium quis, sem.

+ +

Lorem ipsum dolor sit amet, consectetuer adipiscing +elit. Aenean commodo ligula eget dolor. Aenean massa. +Cum sociis natoque penatibus et magnis dis parturient +montes, nascetur ridiculus mus. Donec quam felis, +ultricies nec, pellentesque eu, pretium quis, sem.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4
+

Lorem ipsum dolor sit amet, consectetuer adipiscing +elit. Aenean commodo ligula eget dolor. Aenean massa. +Cum sociis natoque penatibus et magnis dis parturient +montes, nascetur ridiculus mus. Donec quam felis, +ultricies nec, pellentesque eu, pretium quis, sem.

+ +`; + +export const dummyText = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis, diam sed malesuada bibendum, nulla libero scelerisque sapien, nec interdum nisl ipsum ac ipsum. In lacinia eros ut quam commodo, in finibus augue ultricies. Vestibulum ex purus, condimentum eget sem at, molestie semper mi. Mauris ac feugiat quam. Pellentesque sagittis bibendum nibh eu lacinia. Aenean rhoncus, velit sit amet mollis egestas, diam turpis ornare velit, a dictum elit velit in erat. Quisque luctus in sem a vulputate.\n\nPellentesque id tempus orci, non finibus tortor. Suspendisse in neque non eros eleifend hendrerit vitae a lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;'; diff --git a/src/screens/settings/SettingsCustomCodeScreen/Modals/ReplaceItemModal.tsx b/src/screens/settings/SettingsCustomCodeScreen/Modals/ReplaceItemModal.tsx new file mode 100644 index 0000000000..695f1702f3 --- /dev/null +++ b/src/screens/settings/SettingsCustomCodeScreen/Modals/ReplaceItemModal.tsx @@ -0,0 +1,280 @@ +import { AnimatedIconButton, List } from '@components'; +import KeyboardAvoidingModal from '@components/Modal/KeyboardAvoidingModal'; +import { WINDOW_HEIGHT } from '@gorhom/bottom-sheet'; +import { useBoolean } from '@hooks/index'; +import { FlashList } from '@shopify/flash-list'; +import { LinearGradient } from 'expo-linear-gradient'; +import React, { useCallback, useEffect, useMemo, useRef } from 'react'; +import { TextInput as RNTextInput, StyleSheet } from 'react-native'; +import { TextInput } from 'react-native-paper'; +import Animated, { + FadeIn, + FadeOut, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; +import { + LIST_ITEM_LINE_HEIGHT, + RemoveItem, + ReplaceItem, +} from '../Components/ListItems'; +import { useChapterReaderSettings, useTheme } from '@hooks/persisted'; + +const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient); + +type ReplaceItemModalProps = { + showReplace?: boolean; + listExpanded: boolean; + toggleList: () => void; +}; + +const ReplaceItemModal = ({ + showReplace = false, + listExpanded = false, + toggleList, +}: ReplaceItemModalProps) => { + const theme = useTheme(); + const modal = useBoolean(false); + const { + setChapterReaderSettings: setSettings, + replaceText, + removeText, + } = useChapterReaderSettings(); + const replaceArray = useMemo(() => { + return Object.entries(replaceText); + }, [replaceText]); + + const arrayLength = showReplace ? replaceArray.length : removeText.length; + + const textRef = useRef(null); + const replaceTextRef = useRef(null); + + const [text, setText] = React.useState(''); + const [replacementText, setReplacementText] = React.useState(''); + const [editing, setEditing] = React.useState(); + const [error, setError] = React.useState<[string, string] | undefined>(); + + const listSize = useSharedValue( + Math.min(110, arrayLength * 48), + ); + const iconRotation = useSharedValue(0); + + const cancel = () => { + setError(undefined); + textRef.current?.clear(); + setText(''); + setEditing(undefined); + if (showReplace) { + replaceTextRef.current?.clear(); + setReplacementText(''); + } + }; + + const save = () => { + if (!text || (showReplace && !replacementText)) { + const e: [string, string] = ['', '']; + if (!text) { + e[0] = 'Enter a match'; + } + if (!replacementText) { + e[1] = 'Enter a replace'; + } + setError(e); + return false; + } + + if (showReplace) { + if (editing && editing !== text) delete replaceText[editing]; + replaceText[text] = replacementText; + setSettings({ replaceText: replaceText }); + } else { + if (editing) { + const i = removeText.findIndex(v => v === editing); + removeText[i] = text; + } else if (!removeText.includes(text)) { + removeText.push(text); + } else { + setError(['Item already exists', '']); + return false; + } + setSettings({ removeText: removeText }); + } + cancel(); + return true; + }; + + const removeItem = useCallback( + (identifier: string | number) => { + if (showReplace) { + delete replaceText[identifier]; + setSettings({ replaceText: replaceText }); + } else { + removeText.splice(identifier as number, 1); + setSettings({ removeText: removeText }); + } + }, + [removeText, replaceText, setSettings, showReplace], + ); + + const editItem = useCallback( + (item: string[]) => { + setEditing(item[0]); + setText(item[0]); + if (showReplace) { + setReplacementText(item[1]); + } + modal.setTrue(); + }, + [modal, showReplace], + ); + + const colorTheme = useMemo(() => { + return { colors: theme }; + }, [theme]); + + const calcListSize = useCallback( + (toggle: boolean = true) => { + if (toggle) { + toggleList(); + iconRotation.value = listExpanded ? 0 : 180; + } + if (listExpanded) { + listSize.value = Math.min( + WINDOW_HEIGHT * 0.6, + arrayLength * (LIST_ITEM_LINE_HEIGHT + 16), + ); + } else { + listSize.value = Math.min( + 110, + arrayLength * (LIST_ITEM_LINE_HEIGHT + 16), + ); + } + }, + [arrayLength, iconRotation, listExpanded, listSize, toggleList], + ); + useEffect(() => { + calcListSize(false); + }, [replaceArray, removeText, calcListSize]); + useEffect(() => { + iconRotation.value = !listExpanded ? 0 : 180; + }, [iconRotation, listExpanded]); + + const animatedListSize = useAnimatedStyle(() => ({ + height: withTiming(listSize.value, { duration: 250 }), + overflow: 'hidden', + position: 'relative', + })); + + return ( + <> + + + {arrayLength <= 3 || listExpanded ? null : ( + calcListSize()} + /> + )} + {showReplace ? ( + ( + + )} + /> + ) : ( + ( + + )} + /> + )} + + + { + modal.setFalse(); + setError(undefined); + }} + onSave={save} + onCancel={cancel} + title="Edit Replace" + > + + {!showReplace ? null : ( + + )} + + + ); +}; + +export default ReplaceItemModal; + +const styles = StyleSheet.create({ + textfield: { + marginBottom: 16, + }, + bottom: { + marginBottom: 24, + }, + marginHorizontal: { + marginHorizontal: 16, + }, + gradient: { + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0, + zIndex: 1, + }, +}); diff --git a/src/screens/settings/SettingsCustomCodeScreen/Routes/CodeRoute.tsx b/src/screens/settings/SettingsCustomCodeScreen/Routes/CodeRoute.tsx new file mode 100644 index 0000000000..68148f83ee --- /dev/null +++ b/src/screens/settings/SettingsCustomCodeScreen/Routes/CodeRoute.tsx @@ -0,0 +1,202 @@ +import { Button, TextInput } from '@components'; +import { Row } from '@components/Common'; +import { ToggleButton } from '@components/Common/ToggleButton'; +import { WINDOW_HEIGHT } from '@gorhom/bottom-sheet'; +import { getString } from '@strings/translations'; +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { ScrollView } from 'react-native-gesture-handler'; +import { Text } from 'react-native-paper'; +import Animated, { useAnimatedStyle } from 'react-native-reanimated'; +import CodeInput from '../Components/CodeInput'; +import { showToast } from '@utils/showToast'; +import { useChapterReaderSettings, useTheme } from '@hooks/persisted'; +import { useKeyboardHeight } from '@hooks/common/useKeyboardHeight'; + +type CodeRouteProps = { + language?: 'css' | 'js'; + snippetIndex?: number; + jumpTo: (key: string) => void; + editingSnippet?: { + index: number; + isJS: boolean; + } | null; + onSnippetSaved?: () => void; +}; + +const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView); + +const CodeRoute = ({ + language: dLang, + snippetIndex, + jumpTo, + editingSnippet, + onSnippetSaved, +}: CodeRouteProps) => { + const theme = useTheme(); + const { + codeSnippetsJS, + codeSnippetsCSS, + setChapterReaderSettings: setSettings, + } = useChapterReaderSettings(); + const [error, setError] = React.useState({ title: false, code: false }); + + // Use editingSnippet if provided, otherwise fall back to old props + const isEditing = editingSnippet !== null && editingSnippet !== undefined; + const editIndex = isEditing ? editingSnippet.index : snippetIndex; + const editIsJS = isEditing ? editingSnippet.isJS : dLang === 'js'; + + const [language, setLanguage] = React.useState<'js' | 'css'>('js'); + + // Update language when editing state changes + React.useEffect(() => { + if (isEditing) { + setLanguage(editIsJS ? 'js' : 'css'); + } else { + setLanguage('js'); // Default to JS for new snippets + } + }, [isEditing, editIsJS]); + + const snippets = language === 'js' ? codeSnippetsJS : codeSnippetsCSS; + const snippet = + editIndex === undefined || editIndex === -1 ? null : snippets[editIndex]; + + const [title, setTitle] = React.useState(''); + const [code, setCode] = React.useState(''); + + // Update title, code, and reset errors when snippet changes + React.useEffect(() => { + setTitle(snippet?.name ?? ''); + setCode(snippet?.code ?? ''); + setError({ title: false, code: false }); + }, [snippet]); + + const keyboardHeight = useKeyboardHeight(); + + const scrollViewRef = React.useRef(null); + + const maxHeightScrollView = useAnimatedStyle(() => { + return { + maxHeight: WINDOW_HEIGHT - keyboardHeight - 26, + }; + }); + + const colors = React.useMemo( + () => ({ + colors: theme, + }), + [theme], + ); + + const save = React.useCallback(() => { + setError({ title: false, code: false }); + if (!code.trim() || !title.trim()) { + setError({ title: !title.trim(), code: !code.trim() }); + return; + } + + // Editing existing snippet + if (isEditing && editIndex !== undefined && editIndex !== -1) { + snippets[editIndex].name = title; + snippets[editIndex].code = code; + setSettings({ + [language === 'js' ? 'codeSnippetsJS' : 'codeSnippetsCSS']: snippets, + }); + showToast('Snippet updated successfully'); + onSnippetSaved?.(); + return; + } + + // Creating new snippet + snippets.push({ + name: title, + code, + active: true, + lang: language, + }); + setSettings({ + [language === 'js' ? 'codeSnippetsJS' : 'codeSnippetsCSS']: snippets, + }); + showToast('Snippet saved successfully'); + jumpTo('first'); // Go back to settings tab + }, [ + language, + snippets, + title, + code, + setSettings, + jumpTo, + isEditing, + editIndex, + onSnippetSaved, + ]); + + return ( + + + + {'Select CSS or JS'} + + setLanguage('css')} + disabled={isEditing} + /> + setLanguage('js')} + disabled={isEditing} + /> + + + + + + + +