aksos-react-native-epub-reader 0.0.0-stage → 0.1.0

package/src/ui/LineGuide.tsx

@@ -0,0 +1,87 @@
+import React, { useRef, useState } from 'react';
+import { PanResponder, StyleSheet, View } from 'react-native';
+
+export type DimLevel = 'high' | 'medium' | 'low' | 'none';
+
+/** Opacity of the page-coloured veil over everything except the guide line. */
+export const DIM_ALPHA: Record<DimLevel, number> = { high: 0.86, medium: 0.62, low: 0.36, none: 0 };
+
+function rgba(hex: string, a: number): string {
+  const v = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  return `rgba(${v[0]},${v[1]},${v[2]},${a})`;
+}
+
+interface Props {
+  /** page background colour (#rrggbb) */
+  bg: string;
+  dark: boolean;
+  dim: DimLevel;
+  /** height of one line of text */
+  lineHeight: number;
+  /** vertical range the guide may move in */
+  minY: number;
+  maxY: number;
+}
+
+/**
+ * Line Guide: dims the page except for one line that can be dragged up and down.
+ * The veil ignores touches, so page turns and taps still reach the book.
+ */
+export function LineGuide({ bg, dark, dim, lineHeight, minY, maxY }: Props) {
+  const h = Math.round(lineHeight) + 14;
+  const [y, setY] = useState(minY + 40);
+  const state = useRef({ start: 0, minY, maxY, h });
+  state.current.minY = minY;
+  state.current.maxY = maxY;
+  state.current.h = h;
+  const yRef = useRef(y);
+  yRef.current = y;
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        state.current.start = yRef.current;
+      },
+      onPanResponderMove: (_e, g) => {
+        const s = state.current;
+        setY(Math.max(s.minY, Math.min(s.maxY - s.h, s.start + g.dy)));
+      }
+    })
+  ).current;
+
+  const veil = rgba(bg, DIM_ALPHA[dim]);
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {dim !== 'none' && (
+        <>
+          <View pointerEvents="none" style={[styles.veil, { top: 0, height: y, backgroundColor: veil }]} />
+          <View pointerEvents="none" style={[styles.veil, { top: y + h, bottom: 0, backgroundColor: veil }]} />
+        </>
+      )}
+      <View
+        {...pan.panHandlers}
+        style={[
+          styles.band,
+          {
+            top: y,
+            height: h,
+            borderRadius: h / 2,
+            borderColor: dark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.22)',
+            backgroundColor: dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)'
+          }
+        ]}
+        accessibilityLabel="Line guide"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  veil: { position: 'absolute', left: 0, right: 0 },
+  band: {
+    position: 'absolute', left: 10, right: 10, borderWidth: StyleSheet.hairlineWidth * 2,
+    shadowColor: '#000', shadowOpacity: 0.35, shadowRadius: 8, shadowOffset: { width: 0, height: 3 }, elevation: 6
+  }
+});

package/src/ui/NoteEditor.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import type { ChromeColors } from '../themes';
+
+interface Props {
+  visible: boolean;
+  quote: string;
+  initial: string;
+  colors: ChromeColors;
+  onSave: (note: string) => void;
+  onCancel: () => void;
+}
+
+export function NoteEditor({ visible, quote, initial, colors, onSave, onCancel }: Props) {
+  const [text, setText] = useState(initial);
+  useEffect(() => setText(initial), [initial, visible]);
+  return (
+    <Modal visible={visible} animationType="slide" transparent onRequestClose={onCancel}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.wrap}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onCancel} />
+        <View style={[styles.card, { backgroundColor: colors.sheet }]}>
+          <View style={styles.head}>
+            <Pressable onPress={onCancel} hitSlop={10}>
+              <Text style={{ color: colors.accent, fontSize: 17 }}>Cancel</Text>
+            </Pressable>
+            <Text style={{ color: colors.text, fontSize: 17, fontWeight: '600' }}>Note</Text>
+            <Pressable onPress={() => onSave(text.trim())} hitSlop={10}>
+              <Text style={{ color: colors.accent, fontSize: 17, fontWeight: '600' }}>Save</Text>
+            </Pressable>
+          </View>
+          <Text numberOfLines={3} style={[styles.quote, { color: colors.subtext, borderColor: colors.accent }]}>
+            {quote}
+          </Text>
+          <TextInput
+            autoFocus
+            multiline
+            value={text}
+            onChangeText={setText}
+            placeholder="Add a note"
+            placeholderTextColor={colors.subtext}
+            style={[styles.input, { color: colors.text, backgroundColor: colors.card }]}
+          />
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.35)' },
+  card: { borderTopLeftRadius: 14, borderTopRightRadius: 14, padding: 16 },
+  head: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 12 },
+  quote: { fontSize: 14, borderStartWidth: 3, paddingStart: 10, marginBottom: 12, fontStyle: 'italic' },
+  input: { minHeight: 110, maxHeight: 220, borderRadius: 10, padding: 12, fontSize: 16, textAlignVertical: 'top' }
+});

package/src/ui/Scrubber.tsx

@@ -0,0 +1,78 @@
+import React, { useRef, useState } from 'react';
+import { PanResponder, StyleSheet, View } from 'react-native';
+
+interface Props {
+  value: number; // 0..1
+  onScrub?: (v: number) => void;
+  onComplete: (v: number) => void;
+  color: string;
+  track: string;
+  thumbColor?: string;
+  /** hide the thumb for a flat progress bar */
+  noThumb?: boolean;
+  rtl?: boolean;
+}
+
+/** Minimal horizontal slider (no native dependency). */
+export function Scrubber({ value, onScrub, onComplete, color, track, thumbColor, noThumb, rtl }: Props) {
+  const [width, setWidth] = useState(1);
+  const [drag, setDrag] = useState<number | null>(null);
+  const latest = useRef({ width: 1, onScrub, onComplete, rtl });
+  latest.current = { width, onScrub, onComplete, rtl };
+  const startX = useRef(0);
+
+  const toValue = (x: number) => {
+    const { width: w, rtl: r } = latest.current;
+    const v = Math.max(0, Math.min(1, x / w));
+    return r ? 1 - v : v;
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (e) => {
+        startX.current = e.nativeEvent.locationX;
+        const v = toValue(startX.current);
+        setDrag(v);
+        latest.current.onScrub?.(v);
+      },
+      onPanResponderMove: (_e, g) => {
+        const v = toValue(startX.current + g.dx);
+        setDrag(v);
+        latest.current.onScrub?.(v);
+      },
+      onPanResponderRelease: (_e, g) => {
+        const v = toValue(startX.current + g.dx);
+        setDrag(null);
+        latest.current.onComplete(v);
+      }
+    })
+  ).current;
+
+  const shown = drag ?? value;
+  const frac = rtl ? 1 - shown : shown;
+  return (
+    <View style={styles.hit} onLayout={(e) => setWidth(e.nativeEvent.layout.width)} {...pan.panHandlers}>
+      <View style={[styles.track, { backgroundColor: track }]} pointerEvents="none">
+        <View style={{ height: 4, backgroundColor: color, width: `${frac * 100}%` }} />
+      </View>
+      {!noThumb && (
+        <View
+          pointerEvents="none"
+          style={[styles.thumb, { backgroundColor: thumbColor || color, left: Math.max(0, Math.min(width - 28, frac * (width - 28))) }]}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  hit: { height: 40, justifyContent: 'center' },
+  track: { height: 4, borderRadius: 2, overflow: 'hidden', flexDirection: 'row' },
+  thumb: {
+    position: 'absolute', width: 28, height: 28, borderRadius: 14, top: 6,
+    shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 3, shadowOffset: { width: 0, height: 1 }, elevation: 3
+  }
+});

package/src/ui/SearchSheet.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import type { ChromeColors } from '../themes';
+import type { SearchResult } from '../types';
+import { Icon } from './Icons';
+import { Sheet } from './Sheet';
+
+interface Props {
+  visible: boolean;
+  colors: ChromeColors;
+  results: SearchResult[];
+  searching: boolean;
+  onClose: () => void;
+  onSearch: (query: string) => void;
+  onPick: (r: SearchResult) => void;
+}
+
+export function SearchSheet({ visible, colors, results, searching, onClose, onSearch, onPick }: Props) {
+  const [q, setQ] = useState('');
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => onSearch(q), 350);
+    return () => clearTimeout(timer.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [q]);
+
+  return (
+    <Sheet visible={visible} colors={colors} onClose={onClose} height="85%" title="Search">
+      <View style={[styles.field, { backgroundColor: colors.card }]}>
+        <Icon name="search" color={colors.subtext} size={20} />
+        <TextInput
+          value={q}
+          onChangeText={setQ}
+          placeholder="Search in book"
+          placeholderTextColor={colors.subtext}
+          style={[styles.input, { color: colors.text }]}
+          autoCorrect={false}
+          returnKeyType="search"
+          onSubmitEditing={() => onSearch(q)}
+          clearButtonMode="while-editing"
+        />
+      </View>
+      <FlatList
+        data={results}
+        keyboardShouldPersistTaps="handled"
+        keyExtractor={(_, i) => String(i)}
+        ListHeaderComponent={
+          q.trim().length >= 2 ? (
+            <Text style={[styles.count, { color: colors.subtext }]}>
+              {searching ? 'Searching...' : `${results.length}${results.length >= 500 ? '+' : ''} results`}
+            </Text>
+          ) : null
+        }
+        renderItem={({ item }) => (
+          <Pressable onPress={() => onPick(item)} style={[styles.row, { borderColor: colors.separator }]}>
+            <Text style={[styles.chapter, { color: colors.accent }]} numberOfLines={1}>
+              {item.chapter}
+            </Text>
+            <Text style={{ color: colors.text, fontSize: 15, lineHeight: 21 }} numberOfLines={3}>
+              {item.before}
+              <Text style={{ fontWeight: '700', backgroundColor: 'rgba(255,214,10,0.45)' }}>{item.match}</Text>
+              {item.after}
+            </Text>
+          </Pressable>
+        )}
+      />
+    </Sheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  field: { flexDirection: 'row', alignItems: 'center', marginHorizontal: 16, marginBottom: 8, paddingHorizontal: 10, borderRadius: 10, height: 38 },
+  input: { flex: 1, marginStart: 6, fontSize: 16, paddingVertical: 0 },
+  count: { paddingHorizontal: 20, paddingVertical: 8, fontSize: 13 },
+  row: { paddingVertical: 12, paddingHorizontal: 20, borderBottomWidth: StyleSheet.hairlineWidth },
+  chapter: { fontSize: 12, fontWeight: '600', marginBottom: 3 }
+});

package/src/ui/Sheet.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import type { ChromeColors } from '../themes';
+import { Glass } from './Glass';
+import { Icon } from './Icons';
+
+interface Props {
+  visible: boolean;
+  title?: string;
+  subtitle?: string;
+  colors: ChromeColors;
+  height?: ViewStyle['height'];
+  /** 'x' puts a glass close button on the left (Themes, Search); 'check' puts a solid check on the right (Contents, Customize) */
+  closeIcon?: 'x' | 'check';
+  onClose: () => void;
+  children: React.ReactNode;
+  /** rendered above the content, e.g. popup menus */
+  overlay?: React.ReactNode;
+}
+
+/** Rounded frosted-glass sheet: the book stays faintly visible behind it. */
+export function Sheet({ visible, title, subtitle, colors, height = '70%', closeIcon = 'x', onClose, children, overlay }: Props) {
+  const button =
+    closeIcon === 'check' ? (
+      <Pressable onPress={onClose} hitSlop={10} style={[styles.circle, { backgroundColor: colors.dark ? '#ffffff' : '#000000' }]} accessibilityRole="button" accessibilityLabel="Done">
+        <Icon name="check" color={colors.dark ? '#000000' : '#ffffff'} size={24} strokeWidth={2.2} />
+      </Pressable>
+    ) : (
+      <Pressable onPress={onClose} hitSlop={10} accessibilityRole="button" accessibilityLabel="Close">
+        <Glass dark={colors.dark} background={colors.glass} border={colors.glassBorder} style={styles.circle}>
+          <Icon name="close" color={colors.text} size={22} />
+        </Glass>
+      </Pressable>
+    );
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose} statusBarTranslucent>
+      <Pressable style={styles.backdrop} onPress={onClose} />
+      <Glass dark={colors.dark} background={colors.sheetGlass} border={colors.glassBorder} intensity={70} style={[styles.sheet, { height }]}>
+        <View style={styles.header}>
+          {closeIcon === 'x' && button}
+          <View style={styles.titleBox} pointerEvents="none">
+            {!!title && (
+              <Text style={[styles.title, { color: colors.text }]} numberOfLines={1}>
+                {title}
+              </Text>
+            )}
+            {!!subtitle && <Text style={[styles.subtitle, { color: colors.text }]}>{subtitle}</Text>}
+          </View>
+          <View style={{ flex: 1 }} />
+          {closeIcon === 'check' && button}
+        </View>
+        {children}
+        {overlay}
+      </Glass>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.18)' },
+  sheet: { borderTopLeftRadius: 34, borderTopRightRadius: 34, paddingTop: 12 },
+  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 52, marginBottom: 6 },
+  circle: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' },
+  titleBox: { position: 'absolute', left: 70, right: 70, alignItems: 'center' },
+  title: { fontSize: 17, fontWeight: '600' },
+  subtitle: { fontSize: 17, marginTop: 14 }
+});

package/src/ui/Slider.tsx

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react';
+import { Scrubber } from './Scrubber';
+
+interface Props {
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  onChange: (v: number) => void;
+  color: string;
+  track: string;
+  thumbColor?: string;
+}
+
+const round = (v: number, step: number) => Math.round(v / step) * step;
+
+/** Value slider on top of Scrubber; emits only when the stepped value changes. */
+export function Slider({ value, min, max, step, onChange, color, track, thumbColor }: Props) {
+  const last = useRef(value);
+  const toValue = (f: number) => +(round(min + f * (max - min), step)).toFixed(4);
+  const emit = (f: number) => {
+    const v = toValue(f);
+    if (v !== last.current) {
+      last.current = v;
+      onChange(v);
+    }
+  };
+  last.current = value;
+  return <Scrubber value={(value - min) / (max - min)} color={color} track={track} thumbColor={thumbColor} onScrub={emit} onComplete={emit} />;
+}