react-native-simple-epub-reader 0.1.0

package/src/context/types.ts

@@ -0,0 +1,62 @@
+import type WebView from 'react-native-webview';
+import type { ePubCfi, Location, Theme } from '../types';
+
+export type PaginateOptions = {
+  keepScrollOffset?: boolean;
+};
+
+export interface ReaderContextProps {
+  goToLocation: (cfi: ePubCfi) => void;
+  registerBook: (bookRef: WebView) => void;
+  goPrevious: (options?: PaginateOptions) => void;
+  goNext: (options?: PaginateOptions) => void;
+  setAtStart: (atStart: boolean) => void;
+  setAtEnd: (atEnd: boolean) => void;
+  setTotalLocations: (totalLocations: number) => void;
+  setCurrentLocation: (location: Location) => void;
+  setMeta: (meta: {
+    cover: string | ArrayBuffer | null | undefined;
+    author: string;
+    title: string;
+    description: string;
+    language: string;
+    publisher: string;
+    rights: string;
+  }) => void;
+  setProgress: (progress: number) => void;
+  setLocations: (locations: ePubCfi[]) => void;
+
+  getLocations: () => ePubCfi[];
+  getCurrentLocation: () => Location | null;
+  getMeta: () => {
+    cover: string | ArrayBuffer | null | undefined;
+    author: string;
+    title: string;
+    description: string;
+    language: string;
+    publisher: string;
+    rights: string;
+  };
+  theme: Theme;
+  atStart: boolean;
+  atEnd: boolean;
+  totalLocations: number;
+  currentLocation: Location | null;
+  meta: {
+    cover: string | ArrayBuffer | null | undefined;
+    author: string;
+    title: string;
+    description: string;
+    language: string;
+    publisher: string;
+    rights: string;
+  };
+  isLoading?: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+  progress: number;
+  locations: ePubCfi[];
+  injectJavascript: (script: string) => void;
+  changeFontSize: (fontSize: string) => void;
+  changeTheme: (theme: Theme) => void;
+  fontSize: string;
+}

package/src/helpers/downloadEpub.ts

@@ -0,0 +1,21 @@
+import { File, Paths } from 'expo-file-system';
+
+export const downloadEpub = async (
+  url: string,
+  fileName: string
+): Promise<string> => {
+  try {
+    const file = new File(Paths.document, fileName);
+
+    if (file.exists) {
+      return file.uri;
+    }
+
+    const downloadedFile = await File.downloadFileAsync(url, file);
+
+    return downloadedFile.uri;
+  } catch (error) {
+    console.error('Download Error:', error);
+    throw error;
+  }
+};

package/src/helpers/loadScripts.ts

@@ -0,0 +1,22 @@
+import { Paths, File } from 'expo-file-system';
+import jszip from '../scripts/jszip';
+import epub from '../scripts/epub';
+
+export const loadScripts = async () => {
+  const jszipFile = new File(Paths.document, 'jszip.min.js');
+  if (!jszipFile.exists) {
+    jszipFile.create();
+    jszipFile.write(jszip);
+  }
+
+  const epubjsFile = new File(Paths.document, 'epub.min.js');
+  if (!epubjsFile.exists) {
+    epubjsFile.create();
+    epubjsFile.write(epub);
+  }
+
+  const jszipFileUri = jszipFile.uri;
+  const epubjsFileUri = epubjsFile.uri;
+
+  return [`${jszipFileUri},${epubjsFileUri}`, jszipFileUri, epubjsFileUri];
+};

package/src/helpers/saveTemplateToFile.ts

@@ -0,0 +1,20 @@
+import { File, Paths } from 'expo-file-system';
+
+export const saveTemplateToFile = (template: string, fileName: string) => {
+  try {
+    const htmlFile = new File(Paths.document, fileName);
+    if (!htmlFile.exists) {
+      htmlFile.create();
+    }
+    htmlFile.write(template);
+    return htmlFile.uri;
+  } catch (error) {
+    console.error('Error saving template file:', error);
+    throw error;
+  }
+};
+
+export const checkTemplateFileExists = (fileName: string) => {
+  const htmlFile = new File(Paths.document, fileName);
+  return htmlFile.exists;
+};

package/src/helpers/webViewInjectFunctions.ts

@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+
+import WebView from 'react-native-webview';
+
+export function injectJavaScript(
+  ref: RefObject<WebView | null>,
+  script: string
+) {
+  ref.current?.injectJavaScript(`
+    try {
+      ${script}
+    } catch (error) {
+      alert(error?.message);
+    }
+
+    true;
+  `);
+}

package/src/hooks/useInjectWebviewVariables.ts

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+
+import type { SourceType, Theme } from '../types';
+import template from '../constants/template';
+
+export function useInjectWebViewVariables() {
+  const injectWebViewVariables = useCallback(
+    ({
+      jszip,
+      epubjs,
+      type,
+      book,
+      allowScriptedContent,
+      theme,
+    }: {
+      jszip: string;
+      epubjs: string;
+      type: SourceType;
+      book: string;
+      allowScriptedContent?: boolean;
+      theme: Theme;
+    }) => {
+      return template
+        .replace(
+          /<script id="jszip"><\/script>/,
+          `<script src="${jszip}"></script>`
+        )
+        .replace(
+          /<script id="epubjs"><\/script>/,
+          `<script src="${epubjs}"></script>`
+        )
+        .replace(/const type = window.type;/, `const type = '${type}';`)
+        .replace(/const file = window.book;/, `const file = '${book}';`)
+        .replace(
+          /const enableSelection = window.enable_selection;/,
+          `const enableSelection = false;`
+        )
+        .replace(
+          /allowScriptedContent: allowScriptedContent/,
+          `allowScriptedContent: ${allowScriptedContent}`
+        )
+        .replace(/allowPopups: allowPopups/, `allowPopups: false`)
+        .replace(
+          /const theme = window.theme;/,
+          `const theme = ${JSON.stringify(theme)};`
+        );
+    },
+    []
+  );
+  return { injectWebViewVariables };
+}

package/src/hooks/useReaderState.ts

@@ -0,0 +1,118 @@
+import { defaultTheme } from '../constants/theme';
+import {
+  Actions,
+  type BookActions,
+  type InitialState,
+} from '../types/state.types';
+
+export const useReaderState = () => {
+  const initialState: InitialState = {
+    theme: defaultTheme,
+    fontFamily: 'Helvetica',
+    fontSize: '9pt',
+    atStart: false,
+    atEnd: false,
+    key: '',
+    totalLocations: 0,
+    currentLocation: null,
+    meta: {
+      cover: '',
+      author: '',
+      title: '',
+      description: '',
+      language: '',
+      publisher: '',
+      rights: '',
+    },
+    progress: 0,
+    locations: [],
+    isLoading: true,
+    isRendering: true,
+    section: null,
+    flow: 'paginated',
+  };
+
+  function bookReducer(state: InitialState, action: BookActions): InitialState {
+    switch (action.type) {
+      case Actions.CHANGE_FONT_SIZE:
+        return {
+          ...state,
+          fontSize: action.payload,
+        };
+      case Actions.SET_AT_START:
+        return {
+          ...state,
+          atStart: action.payload,
+        };
+      case Actions.SET_AT_END:
+        return {
+          ...state,
+          atEnd: action.payload,
+        };
+      case Actions.SET_KEY:
+        return {
+          ...state,
+          key: action.payload,
+        };
+      case Actions.SET_TOTAL_LOCATIONS:
+        return {
+          ...state,
+          totalLocations: action.payload,
+        };
+      case Actions.SET_CURRENT_LOCATION:
+        return {
+          ...state,
+          currentLocation: action.payload,
+        };
+      case Actions.SET_META:
+        return {
+          ...state,
+          meta: action.payload,
+        };
+      case Actions.SET_PROGRESS:
+        return {
+          ...state,
+          progress: action.payload,
+        };
+      case Actions.SET_LOCATIONS:
+        return {
+          ...state,
+          locations: action.payload,
+        };
+      case Actions.SET_IS_LOADING:
+        return {
+          ...state,
+          isLoading: action.payload,
+        };
+      case Actions.SET_IS_RENDERING:
+        return {
+          ...state,
+          isRendering: action.payload,
+        };
+      case Actions.SET_SECTION:
+        return {
+          ...state,
+          section: action.payload,
+        };
+      case Actions.SET_FLOW:
+        return {
+          ...state,
+          flow: action.payload,
+        };
+      case Actions.CHANGE_THEME:
+        return {
+          ...state,
+          theme: action.payload,
+        };
+      case Actions.CHANGE_FONT_FAMILY:
+        return {
+          ...state,
+          fontFamily: action.payload,
+        };
+      default:
+        return state;
+    }
+  }
+
+  return { initialState, bookReducer };
+};

package/src/index.tsx

@@ -0,0 +1,3 @@
+export { default as Reader } from './components/Reader';
+export { ReaderProvider, ReaderContext } from './context/ReaderContext';
+export * from './types';