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

package/src/index.ts

@@ -0,0 +1,6 @@
+export { EpubReaderView } from './EpubReaderView';
+export type { EpubReaderViewProps } from './EpubReaderView';
+export { EpubReader } from './EpubReader';
+export type { EpubReaderProps, EpubReaderHandle } from './EpubReader';
+export { THEMES, FONTS, HIGHLIGHT_COLORS, DEFAULT_SETTINGS, getTheme, getFont, chromeColors } from './themes';
+export * from './types';

package/src/sound.ts

@@ -0,0 +1,66 @@
+// Page-turn sound: real recorded page flips (see README for credit), a different one each turn.
+// expo-audio is optional: without it the reader is simply silent.
+//
+// One player per recording, and every play first waits for the rewind to finish.
+// (Calling play() right after an un-awaited seekTo(0) on a player that already finished plays nothing.)
+let audio: any = null;
+let missing = false;
+let players: any[] = [];
+let last = -1;
+let modeSet = false;
+
+function sources(): any[] {
+  // static requires so the bundler can find the assets
+  return [
+    require('./assets/page-turn-1.wav'),
+    require('./assets/page-turn-2.wav'),
+    require('./assets/page-turn-3.wav'),
+    require('./assets/page-turn-4.wav')
+  ];
+}
+
+function load(): boolean {
+  if (audio) return true;
+  if (missing) return false;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    audio = require('expo-audio');
+    return true;
+  } catch {
+    missing = true;
+    return false;
+  }
+}
+
+function player(i: number): any {
+  if (!players[i]) {
+    players[i] = audio.createAudioPlayer(sources()[i]);
+    players[i].volume = 0.7;
+  }
+  return players[i];
+}
+
+export function playPageTurn(): void {
+  if (!load()) return;
+  try {
+    if (!modeSet) {
+      modeSet = true;
+      // do not stop the user's music, and follow the silent switch
+      Promise.resolve(audio.setAudioModeAsync?.({ playsInSilentMode: false, interruptionMode: 'mixWithOthers' })).catch(() => undefined);
+    }
+    // random recording, never the same one twice in a row
+    let i = Math.floor(Math.random() * 4);
+    if (i === last) i = (i + 1) % 4;
+    last = i;
+    const p = player(i);
+    Promise.resolve(p.seekTo(0))
+      .catch(() => undefined)
+      .then(() => p.play())
+      .catch(() => {
+        // a broken player is replaced on its next use
+        players = [];
+      });
+  } catch {
+    players = [];
+  }
+}

package/src/themes.ts

@@ -0,0 +1,188 @@
+import { Platform } from 'react-native';
+import type { HighlightColor, ReaderFont, ReaderSettings, ReaderTheme, ThemeColors } from './types';
+
+export const THEMES: ReaderTheme[] = [
+  {
+    id: 'original',
+    name: 'Original',
+    light: { bg: '#ffffff', fg: '#1c1c1e', link: '#0a60ff' },
+    dark: { bg: '#000000', fg: '#f2f2f7', link: '#64a8ff' }
+  },
+  {
+    id: 'quiet',
+    name: 'Quiet',
+    light: { bg: '#e8e8ea', fg: '#58585c', link: '#3a6ea5' },
+    dark: { bg: '#121212', fg: '#8e8e93', link: '#6c9bd1' }
+  },
+  {
+    id: 'paper',
+    name: 'Paper',
+    light: { bg: '#f6f0e1', fg: '#3b3226', link: '#8a5a2b' },
+    dark: { bg: '#1d1d1f', fg: '#e9e0cd', link: '#d6a86a' }
+  },
+  {
+    id: 'bold',
+    name: 'Bold',
+    bold: true,
+    light: { bg: '#ffffff', fg: '#000000', link: '#0a60ff' },
+    dark: { bg: '#000000', fg: '#ffffff', link: '#64a8ff' }
+  },
+  {
+    id: 'calm',
+    name: 'Calm',
+    light: { bg: '#ece1c9', fg: '#4a3f2c', link: '#7a5a1f' },
+    dark: { bg: '#3d372d', fg: '#f0e7d3', link: '#e0b66f' }
+  },
+  {
+    id: 'focus',
+    name: 'Focus',
+    light: { bg: '#f3efe2', fg: '#2d2a24', link: '#9a4b1c' },
+    dark: { bg: '#1a1913', fg: '#e8e2d0', link: '#d98f5a' }
+  }
+];
+
+const SERIF = Platform.OS === 'ios' ? 'Georgia' : 'serif';
+
+/** Font stacks. iOS ships most of these, on Android the stacks fall back to the system serif / sans. */
+export const FONTS: ReaderFont[] = [
+  { id: 'original', name: 'Original', css: 'original' },
+  { id: 'system', name: 'System', css: "-apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif" },
+  { id: 'newyork', name: 'New York', css: "ui-serif, 'New York', Georgia, serif" },
+  { id: 'athelas', name: 'Athelas', css: "Athelas, Georgia, serif" },
+  { id: 'charter', name: 'Charter', css: "Charter, 'Bitstream Charter', Georgia, serif" },
+  { id: 'georgia', name: 'Georgia', css: "Georgia, 'Times New Roman', serif" },
+  { id: 'iowan', name: 'Iowan', css: "'Iowan Old Style', Georgia, serif" },
+  { id: 'palatino', name: 'Palatino', css: "Palatino, 'Palatino Linotype', 'Book Antiqua', serif" },
+  { id: 'seravek', name: 'Seravek', css: "Seravek, 'Avenir Next', -apple-system, sans-serif" },
+  { id: 'times', name: 'Times New Roman', css: "'Times New Roman', Times, serif" },
+  { id: 'naskh', name: 'Naskh (عربي / پښتو)', css: "'Noto Naskh Arabic', 'Geeza Pro', 'Droid Arabic Naskh', 'Scheherazade New', serif" }
+];
+
+export const HIGHLIGHT_COLORS: Record<HighlightColor, string> = {
+  yellow: '#ffd60a',
+  green: '#34c759',
+  blue: '#0a84ff',
+  pink: '#ff375f',
+  purple: '#bf5af2'
+};
+
+export const DEFAULT_SETTINGS: ReaderSettings = {
+  themeId: 'original',
+  appearance: 'device',
+  fontId: 'original',
+  fontSize: 19,
+  bold: false,
+  customize: false,
+  lineHeight: 1.5,
+  letterSpacing: 0,
+  wordSpacing: 0,
+  margins: 0,
+  columns: 'auto',
+  justify: false,
+  pageTurn: 'slide',
+  pageSound: true,
+  brightness: 1,
+  direction: 'auto'
+};
+
+export const getTheme = (id: string): ReaderTheme => THEMES.find((t) => t.id === id) || THEMES[0];
+export const getFont = (id: string): ReaderFont => FONTS.find((f) => f.id === id) || FONTS[0];
+export const serifFont = SERIF;
+
+export function isDark(settings: ReaderSettings, systemDark: boolean): boolean {
+  return settings.appearance === 'device' ? systemDark : settings.appearance === 'dark';
+}
+
+export function themeColors(settings: ReaderSettings, systemDark: boolean): ThemeColors {
+  const t = getTheme(settings.themeId);
+  return isDark(settings, systemDark) ? t.dark : t.light;
+}
+
+const BASE_MARGIN = 28;
+
+/** Settings object understood by the WebView engine. */
+export function toEngineSettings(settings: ReaderSettings, systemDark: boolean, insets: { top: number; bottom: number }) {
+  const theme = getTheme(settings.themeId);
+  const c = themeColors(settings, systemDark);
+  const custom = settings.customize;
+  return {
+    bg: c.bg,
+    fg: c.fg,
+    link: c.link,
+    bold: !!theme.bold || settings.bold,
+    fontFamily: getFont(settings.fontId).css,
+    fontSize: settings.fontSize,
+    lineHeight: custom ? settings.lineHeight : 1.5,
+    letterSpacing: custom ? (settings.letterSpacing / 100) * 0.25 : 0,
+    wordSpacing: custom ? (settings.wordSpacing / 100) * 0.5 : 0,
+    marginX: Math.round(BASE_MARGIN * (1 + (custom ? settings.margins : 0) / 100)),
+    columns: settings.columns,
+    justify: settings.justify,
+    mode: settings.pageTurn,
+    direction: settings.direction,
+    insets: { top: insets.top + 40, bottom: insets.bottom + 40 }
+  };
+}
+
+export interface ChromeColors {
+  /** translucent control background (pills, circles), tinted with the page colour */
+  glass: string;
+  glassBorder: string;
+  /** solid sheet colour and a translucent one for sheets that float over the book */
+  sheet: string;
+  sheetGlass: string;
+  /** rows / cards inside a sheet: a neutral wash that works on any theme */
+  card: string;
+  text: string;
+  subtext: string;
+  separator: string;
+  /** highlight for the current chapter / selected items */
+  accent: string;
+  dark: boolean;
+}
+
+function mix(hex: string, other: string, amount: number): string {
+  const p = (h: string) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
+  const a = p(hex);
+  const b = p(other);
+  const m = a.map((v, i) => Math.round(v + (b[i] - v) * amount));
+  return '#' + m.map((v) => v.toString(16).padStart(2, '0')).join('');
+}
+
+function rgba(hex: string, alpha: number): string {
+  const v = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  return `rgba(${v[0]},${v[1]},${v[2]},${alpha})`;
+}
+
+/**
+ * Chrome (buttons, menus, sheets) is frosted glass tinted with the page colour, so a Calm page gets warm glass and a
+ * black page gets dark glass. Text and icons use the neutral text colour of the light / dark variant.
+ */
+export function chromeColors(colors: ThemeColors, dark: boolean): ChromeColors {
+  if (dark) {
+    return {
+      glass: rgba(mix(colors.bg, '#ffffff', 0.22), 0.4),
+      glassBorder: 'rgba(255,255,255,0.16)',
+      sheet: mix(colors.bg, '#ffffff', 0.1),
+      sheetGlass: rgba(mix(colors.bg, '#ffffff', 0.1), 0.84),
+      card: 'rgba(255,255,255,0.1)',
+      text: '#ffffff',
+      subtext: '#a09d96',
+      separator: 'rgba(255,255,255,0.14)',
+      accent: '#ffb340',
+      dark
+    };
+  }
+  return {
+    glass: rgba(mix(colors.bg, '#ffffff', 0.55), 0.5),
+    glassBorder: 'rgba(0,0,0,0.1)',
+    sheet: mix(colors.bg, '#ffffff', 0.5),
+    sheetGlass: rgba(mix(colors.bg, '#ffffff', 0.5), 0.86),
+    card: 'rgba(0,0,0,0.06)',
+    text: '#000000',
+    subtext: '#6c6c70',
+    separator: 'rgba(0,0,0,0.14)',
+    accent: '#ff9500',
+    dark
+  };
+}

package/src/types.ts

@@ -0,0 +1,138 @@
+export type HighlightColor = 'yellow' | 'green' | 'blue' | 'pink' | 'purple';
+export type HighlightStyle = 'highlight' | 'underline';
+
+/** Position in the book. Offsets are text-character offsets inside the spine item, so they survive font/size changes. */
+export interface BookLocation {
+  spine: number;
+  offset: number;
+}
+
+export interface Highlight {
+  id: string;
+  spine: number;
+  start: number;
+  end: number;
+  text: string;
+  color: HighlightColor;
+  style?: HighlightStyle;
+  note?: string;
+  chapter?: string;
+  createdAt: number;
+}
+
+export interface Bookmark {
+  id: string;
+  spine: number;
+  offset: number;
+  chapter: string;
+  excerpt: string;
+  progress: number;
+  createdAt: number;
+}
+
+export interface TocItem {
+  label: string;
+  spine: number;
+  fragment: string;
+  level: number;
+}
+
+export interface BookMetadata {
+  title: string;
+  author: string;
+  language: string;
+  publisher: string;
+}
+
+export interface RelocateEvent {
+  spine: number;
+  /** offset of the first character on the page */
+  offset: number;
+  /** offset just past the last character on the page */
+  end: number;
+  page: number;
+  pageCount: number;
+  spineCount: number;
+  /** number of characters in this spine item */
+  textLength: number;
+  /** 0..1 across the whole book (exact once `indexed` is true) */
+  progress: number;
+  chapter: string;
+  excerpt: string;
+  indexed: boolean;
+}
+
+export interface SelectionEvent {
+  spine: number;
+  start: number;
+  end: number;
+  text: string;
+  rect: { x: number; y: number; width: number; height: number };
+}
+
+export interface SearchResult {
+  spine: number;
+  offset: number;
+  length: number;
+  chapter: string;
+  before: string;
+  match: string;
+  after: string;
+}
+
+export interface ThemeColors {
+  /** page background */
+  bg: string;
+  /** body text */
+  fg: string;
+  link: string;
+}
+
+/** A theme has a light and a dark variant, like the themes in Apple Books. */
+export interface ReaderTheme {
+  id: string;
+  name: string;
+  light: ThemeColors;
+  dark: ThemeColors;
+  bold?: boolean;
+}
+
+export type Appearance = 'light' | 'dark' | 'device';
+export type PageTurn = 'slide' | 'curl' | 'fade' | 'scroll';
+export type ColumnsSetting = 'auto' | 1 | 2;
+
+export interface ReaderFont {
+  id: string;
+  name: string;
+  /** CSS font-family, or 'original' to keep the book's own fonts */
+  css: string;
+}
+
+export interface ReaderSettings {
+  themeId: string;
+  appearance: Appearance;
+  fontId: string;
+  fontSize: number;
+  /** extra bold weight on top of the theme's own */
+  bold: boolean;
+  /** when false the spacing values below are ignored (defaults are used) */
+  customize: boolean;
+  lineHeight: number;
+  /** percent, 0 = default */
+  letterSpacing: number;
+  /** percent, 0 = default */
+  wordSpacing: number;
+  /** percent change of the side margins, 0 = default */
+  margins: number;
+  columns: ColumnsSetting;
+  justify: boolean;
+  pageTurn: PageTurn;
+  /** paper sound when a page is turned (Curl) */
+  pageSound: boolean;
+  /** 0.3 .. 1, dims the page like the Books brightness slider */
+  brightness: number;
+  /** 'auto' follows the book's page-progression-direction / language */
+  direction: 'auto' | 'ltr' | 'rtl';
+}
+
+export type EpubSource = { uri: string } | { base64: string };

package/src/ui/AppearanceSheet.tsx

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { isDark, serifFont, THEMES } from '../themes';
+import type { ChromeColors } from '../themes';
+import type { Appearance, PageTurn, ReaderSettings } from '../types';
+import { Icon } from './Icons';
+import type { IconName } from './Icons';
+import { Sheet } from './Sheet';
+import { Slider } from './Slider';
+
+interface Props {
+  visible: boolean;
+  colors: ChromeColors;
+  settings: ReaderSettings;
+  systemDark: boolean;
+  onChange: (patch: Partial<ReaderSettings>) => void;
+  onCustomize: () => void;
+  onClose: () => void;
+}
+
+const SIZE = { min: 12, max: 40, step: 2 };
+
+const TURNS: { id: PageTurn; label: string; icon: IconName }[] = [
+  { id: 'slide', label: 'Slide', icon: 'pageSlide' },
+  { id: 'curl', label: 'Curl', icon: 'pageCurl' },
+  { id: 'fade', label: 'Fast Fade', icon: 'pageFade' },
+  { id: 'scroll', label: 'Scroll', icon: 'pageScroll' }
+];
+
+const APPEARANCES: { id: Appearance; label: string; icon: IconName; key: string }[] = [
+  { id: 'light', label: 'Light', icon: 'sun', key: 'light' },
+  { id: 'dark', label: 'Dark', icon: 'moon', key: 'dark' },
+  { id: 'device', label: 'Match Device', icon: 'contrast', key: 'device' },
+  { id: 'device', label: 'Match Surroundings', icon: 'sunLow', key: 'surroundings' }
+];
+
+/** Icon of the current appearance choice: the button always shows the state it is in. */
+const appearanceIcon = (a: Appearance): IconName => (a === 'light' ? 'sun' : a === 'dark' ? 'moon' : 'contrast');
+
+/** "Themes & Settings" sheet. */
+export function AppearanceSheet({ visible, colors, settings: s, systemDark, onChange, onCustomize, onClose }: Props) {
+  const [menu, setMenu] = useState<null | 'turn' | 'appearance'>(null);
+  const dark = isDark(s, systemDark);
+  const turn = TURNS.find((t) => t.id === s.pageTurn) || TURNS[0];
+
+  const menuView = menu && (
+    <>
+      <Pressable style={StyleSheet.absoluteFill} onPress={() => setMenu(null)} />
+      <View style={[styles.menu, { backgroundColor: colors.dark ? '#4a4742' : '#ffffff', borderColor: colors.glassBorder }]}>
+        {menu === 'turn'
+          ? TURNS.map((t) => (
+              <Pressable
+                key={t.id}
+                style={styles.menuItem}
+                onPress={() => {
+                  onChange({ pageTurn: t.id });
+                  setMenu(null);
+                }}
+              >
+                <View style={styles.check}>{s.pageTurn === t.id && <Icon name="check" color={colors.text} size={20} />}</View>
+                <Icon name={t.icon} color={colors.text} size={24} />
+                <Text style={[styles.menuText, { color: colors.text }]}>{t.label}</Text>
+              </Pressable>
+            ))
+          : APPEARANCES.map((a) => (
+              <Pressable
+                key={a.key}
+                style={styles.menuItem}
+                onPress={() => {
+                  onChange({ appearance: a.id });
+                  setMenu(null);
+                }}
+              >
+                <View style={styles.check}>{s.appearance === a.id && a.key !== 'surroundings' && <Icon name="check" color={colors.text} size={20} />}</View>
+                <Icon name={a.icon} color={colors.text} size={24} />
+                <Text style={[styles.menuText, { color: colors.text }]}>{a.label}</Text>
+              </Pressable>
+            ))}
+      </View>
+    </>
+  );
+
+  return (
+    <Sheet visible={visible} colors={colors} onClose={onClose} title="Themes & Settings" height="auto" overlay={menuView || undefined}>
+      <View style={styles.body}>
+        <View style={styles.row}>
+          <View style={[styles.pill, { flex: 1, backgroundColor: colors.card }]}>
+            <Pressable
+              style={styles.half}
+              onPress={() => onChange({ fontSize: Math.max(SIZE.min, s.fontSize - SIZE.step) })}
+              accessibilityLabel="Smaller text"
+            >
+              <Text style={{ color: colors.text, fontSize: 15, fontWeight: '500' }}>A</Text>
+            </Pressable>
+            <View style={[styles.divider, { backgroundColor: colors.separator }]} />
+            <Pressable
+              style={styles.half}
+              onPress={() => onChange({ fontSize: Math.min(SIZE.max, s.fontSize + SIZE.step) })}
+              accessibilityLabel="Larger text"
+            >
+              <Text style={{ color: colors.text, fontSize: 26, fontWeight: '500' }}>A</Text>
+            </Pressable>
+          </View>
+          <View style={[styles.pill, { width: 150, backgroundColor: colors.card }]}>
+            <Pressable style={[styles.half, menu === 'turn' && { backgroundColor: colors.separator }]} onPress={() => setMenu(menu === 'turn' ? null : 'turn')} accessibilityLabel={`Page turn style: ${turn.label}`}>
+              <Icon name={turn.icon} color={colors.text} size={26} />
+            </Pressable>
+            <Pressable style={[styles.half, menu === 'appearance' && { backgroundColor: colors.separator }]} onPress={() => setMenu(menu === 'appearance' ? null : 'appearance')} accessibilityLabel="Appearance">
+              <Icon name={appearanceIcon(s.appearance)} color={colors.text} size={26} />
+            </Pressable>
+          </View>
+        </View>
+
+        <View style={styles.brightness}>
+          <Icon name="sunLow" color={colors.subtext} size={20} />
+          <View style={{ flex: 1, marginHorizontal: 10 }}>
+            <Slider value={s.brightness} min={0.3} max={1} step={0.01} onChange={(v) => onChange({ brightness: v })} color={colors.text} track={colors.separator} thumbColor="#ffffff" />
+          </View>
+          <Icon name="sun" color={colors.subtext} size={26} />
+        </View>
+
+        <View style={styles.grid}>
+          {THEMES.map((t) => {
+            const c = dark ? t.dark : t.light;
+            const on = t.id === s.themeId;
+            return (
+              <Pressable
+                key={t.id}
+                onPress={() => onChange({ themeId: t.id })}
+                style={[styles.tile, { backgroundColor: c.bg, borderColor: on ? colors.text : colors.separator, borderWidth: on ? 3 : StyleSheet.hairlineWidth }]}
+                accessibilityRole="radio"
+                accessibilityState={{ selected: on }}
+              >
+                <Text style={{ color: c.fg, fontSize: 30, fontFamily: serifFont, fontWeight: t.bold ? '800' : '400' }}>Aa</Text>
+                <Text style={{ color: c.fg, fontSize: 15, fontFamily: serifFont, fontWeight: t.bold ? '700' : '400' }}>{t.name}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+
+        <Pressable onPress={onCustomize} style={[styles.customize, { backgroundColor: colors.card }]} accessibilityRole="button">
+          <Icon name="sliders" color={colors.text} size={22} />
+          <Text style={{ color: colors.text, fontSize: 18, fontWeight: '600', marginStart: 10 }}>Customize</Text>
+        </Pressable>
+      </View>
+    </Sheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  body: { paddingHorizontal: 16, paddingBottom: 28 },
+  row: { flexDirection: 'row', gap: 10 },
+  pill: { height: 58, borderRadius: 29, flexDirection: 'row', alignItems: 'center', overflow: 'hidden' },
+  half: { flex: 1, height: '100%', alignItems: 'center', justifyContent: 'center' },
+  divider: { width: StyleSheet.hairlineWidth, height: 24 },
+  brightness: { flexDirection: 'row', alignItems: 'center', marginTop: 14, marginBottom: 8, paddingHorizontal: 4 },
+  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginTop: 6 },
+  tile: { width: '31.6%', height: 92, borderRadius: 22, alignItems: 'center', justifyContent: 'center' },
+  customize: { marginTop: 12, height: 58, borderRadius: 29, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
+  menu: {
+    position: 'absolute', top: 80, right: 16, width: 250, borderRadius: 24, paddingVertical: 8, borderWidth: StyleSheet.hairlineWidth,
+    shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 16, shadowOffset: { width: 0, height: 6 }, elevation: 12
+  },
+  menuItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 14 },
+  check: { width: 26, alignItems: 'center' },
+  menuText: { fontSize: 18, marginStart: 14, flexShrink: 1 }
+});