1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
import { ReactNode, useCallback } from "react";
import { Platform } from "react-native";
import {
ReaderSettingsProvider as BaseReaderSettingsProvider,
useReaderSettingsContext,
} from "@karakeep/shared-react/hooks/reader-settings";
import { ReaderSettingsPartial } from "@karakeep/shared/types/readers";
import { ZReaderFontFamily } from "@karakeep/shared/types/users";
import { useSettings } from "./settings";
// Mobile-specific font families for native Text components
// On Android, use generic font family names: "serif", "sans-serif", "monospace"
// On iOS, use specific font names like "Georgia" and "Courier"
// Note: undefined means use the system default font
export const MOBILE_FONT_FAMILIES: Record<
ZReaderFontFamily,
string | undefined
> = Platform.select({
android: {
serif: "serif",
sans: undefined,
mono: "monospace",
},
default: {
serif: "Georgia",
sans: undefined,
mono: "Courier",
},
})!;
// Font families for WebView HTML content (CSS font stacks)
export const WEBVIEW_FONT_FAMILIES: Record<ZReaderFontFamily, string> = {
serif: "Georgia, 'Times New Roman', serif",
sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
mono: "ui-monospace, Menlo, Monaco, 'Courier New', monospace",
} as const;
/**
* Mobile-specific provider for reader settings.
* Wraps the shared provider with mobile storage callbacks.
*/
export function ReaderSettingsProvider({ children }: { children: ReactNode }) {
// Read from zustand store directly to keep callback stable (empty deps).
const getLocalOverrides = useCallback((): ReaderSettingsPartial => {
const currentSettings = useSettings.getState().settings.settings;
return {
fontSize: currentSettings.readerFontSize,
lineHeight: currentSettings.readerLineHeight,
fontFamily: currentSettings.readerFontFamily,
};
}, []);
const saveLocalOverrides = useCallback((overrides: ReaderSettingsPartial) => {
const currentSettings = useSettings.getState().settings.settings;
// Remove reader settings keys first, then add back only defined ones
const {
readerFontSize: _fs,
readerLineHeight: _lh,
readerFontFamily: _ff,
...rest
} = currentSettings;
const newSettings = { ...rest };
if (overrides.fontSize !== undefined) {
(newSettings as typeof currentSettings).readerFontSize =
overrides.fontSize;
}
if (overrides.lineHeight !== undefined) {
(newSettings as typeof currentSettings).readerLineHeight =
overrides.lineHeight;
}
if (overrides.fontFamily !== undefined) {
(newSettings as typeof currentSettings).readerFontFamily =
overrides.fontFamily;
}
useSettings.getState().setSettings(newSettings);
}, []);
return (
<BaseReaderSettingsProvider
getLocalOverrides={getLocalOverrides}
saveLocalOverrides={saveLocalOverrides}
>
{children}
</BaseReaderSettingsProvider>
);
}
// Re-export the context hook as useReaderSettings for mobile consumers
export { useReaderSettingsContext as useReaderSettings };
|
