From 1b98014d6cb0e3eb824d58ccbd35f39864e6ec88 Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Sun, 18 Jan 2026 05:32:38 -0800 Subject: fix(mobile): Reader settings preview on mobile matches reader view formatting (#2365) * fix: Reader settings preview on mobile matches reader view formatting * address comments --- apps/mobile/components/reader/ReaderPreview.tsx | 117 ++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 apps/mobile/components/reader/ReaderPreview.tsx (limited to 'apps/mobile/components') diff --git a/apps/mobile/components/reader/ReaderPreview.tsx b/apps/mobile/components/reader/ReaderPreview.tsx new file mode 100644 index 00000000..c091bdbc --- /dev/null +++ b/apps/mobile/components/reader/ReaderPreview.tsx @@ -0,0 +1,117 @@ +import { forwardRef, useEffect, useImperativeHandle, useRef } from "react"; +import { View } from "react-native"; +import WebView from "react-native-webview"; +import { WEBVIEW_FONT_FAMILIES } from "@/lib/readerSettings"; +import { useColorScheme } from "@/lib/useColorScheme"; + +import { ZReaderFontFamily } from "@karakeep/shared/types/users"; + +const PREVIEW_TEXT = + "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!"; + +export interface ReaderPreviewRef { + updateStyles: ( + fontFamily: ZReaderFontFamily, + fontSize: number, + lineHeight: number, + ) => void; +} + +interface ReaderPreviewProps { + initialFontFamily: ZReaderFontFamily; + initialFontSize: number; + initialLineHeight: number; +} + +export const ReaderPreview = forwardRef( + ({ initialFontFamily, initialFontSize, initialLineHeight }, ref) => { + const webViewRef = useRef(null); + const { isDarkColorScheme: isDark } = useColorScheme(); + + const fontFamily = WEBVIEW_FONT_FAMILIES[initialFontFamily]; + const textColor = isDark ? "#e5e7eb" : "#374151"; + const bgColor = isDark ? "#000000" : "#ffffff"; + + useImperativeHandle(ref, () => ({ + updateStyles: ( + newFontFamily: ZReaderFontFamily, + newFontSize: number, + newLineHeight: number, + ) => { + const cssFontFamily = WEBVIEW_FONT_FAMILIES[newFontFamily]; + webViewRef.current?.injectJavaScript(` + window.updateStyles("${cssFontFamily}", ${newFontSize}, ${newLineHeight}); + true; + `); + }, + })); + + // Update colors when theme changes + useEffect(() => { + webViewRef.current?.injectJavaScript(` + document.body.style.color = "${textColor}"; + document.body.style.background = "${bgColor}"; + true; + `); + }, [isDark, textColor, bgColor]); + + const html = ` + + + + + + + + + ${PREVIEW_TEXT} + + + `; + + return ( + + + + ); + }, +); + +ReaderPreview.displayName = "ReaderPreview"; -- cgit v1.2.3-70-g09d2