react-native-readium 1.1.0 → 1.2.1

package/README.md

@@ -1,5 +1,26 @@
 # react-native-readium
 
+[![NPM version](https://img.shields.io/npm/v/react-native-readium.svg?color=success&label=npm%20package&logo=npm)](https://www.npmjs.com/package/react-native-readium)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+![PRs welcome!](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)
+![This project is released under the MIT license](https://img.shields.io/badge/license-MIT-blue.svg)
+
+----
+
+## Have A Bug/Feature You Care About?
+
+We :heart: open source. We work on the things that are important to us when
+we're able to work on them. Have an issue you care about?
+
+- [Dive Into The Code!](CONTRIBUTING.md)
+- [Sponsor Your Issue](https://issuehunt.io/r/5-stones/react-native-readium).
+
+[![Issue Hunt](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/r/5-stones/react-native-readium)
+
+----
+
+## Overview
+
 A react-native wrapper for https://readium.org/. At a high level this package
 allows you to do things like:
 
@@ -13,7 +34,7 @@ allows you to do things like:
   - More (see the `Settings` documentation in the [API section](#api))
 - Etc. (read on for more details. :book:)
 
-## Overview
+## Table of Contents
 
 - [Installation](#installation)
 - [Usage](#usage)
@@ -24,7 +45,7 @@ allows you to do things like:
 - [License](#license)
 
 | Dark Mode| Light Mode |
-|---|---|
+|----------|------------|
 | ![Dark Mode](https://github.com/5-stones/react-native-readium/blob/main/docs/demo-dark-mode.gif) | ![Light Mode](https://github.com/5-stones/react-native-readium/blob/main/docs/demo-light-mode.gif) |
 
 ## Installation

package/lib/src/components/BaseReadiumView.d.ts

@@ -0,0 +1,2 @@
+import type { BaseReadiumViewProps } from '../interfaces';
+export declare const BaseReadiumView: import("react-native").HostComponent<BaseReadiumViewProps> | (() => never);

package/lib/src/components/BaseReadiumView.js

@@ -0,0 +1,7 @@
+import { requireNativeComponent, UIManager, } from 'react-native';
+import { COMPONENT_NAME, LINKING_ERROR } from '../utils';
+export const BaseReadiumView = UIManager.getViewManagerConfig(COMPONENT_NAME) != null
+    ? requireNativeComponent(COMPONENT_NAME)
+    : () => {
+        throw new Error(LINKING_ERROR);
+    };

package/lib/src/components/BaseReadiumView.web.d.ts

@@ -0,0 +1 @@
+export declare const BaseReadiumView: () => null;

package/lib/src/components/BaseReadiumView.web.js

@@ -0,0 +1 @@
+export const BaseReadiumView = () => null;

package/lib/{typescript → src}/components/ReadiumView.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { BaseReadiumViewProps } from './BaseReadiumView';
+import type { BaseReadiumViewProps } from '../interfaces';
 export declare type ReadiumProps = BaseReadiumViewProps;
 export declare const ReadiumView: React.FC<ReadiumProps>;

package/lib/src/components/ReadiumView.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
+import { Settings } from '../interfaces';
+import { createFragment, getWidthOrHeightValue as dimension } from '../utils';
+import { BaseReadiumView } from './BaseReadiumView';
+export const ReadiumView = ({ onLocationChange: wrappedOnLocationChange, onTableOfContents: wrappedOnTableOfContents, settings: unmappedSettings, ...props }) => {
+    const ref = useRef(null);
+    const [{ height, width }, setDimensions] = useState({
+        width: 0,
+        height: 0,
+    });
+    // set the view dimensions on layout
+    const onLayout = useCallback(({ nativeEvent: { layout: { width, height } } }) => {
+        setDimensions({
+            width: dimension(width),
+            height: dimension(height),
+        });
+    }, []);
+    // wrap the native onLocationChange and extract the raw event value
+    const onLocationChange = useCallback((event) => {
+        if (wrappedOnLocationChange) {
+            wrappedOnLocationChange(event.nativeEvent);
+        }
+    }, [wrappedOnLocationChange]);
+    const onTableOfContents = useCallback((event) => {
+        if (wrappedOnTableOfContents) {
+            const toc = event.nativeEvent.toc || null;
+            wrappedOnTableOfContents(toc);
+        }
+    }, [wrappedOnTableOfContents]);
+    useEffect(() => {
+        if (Platform.OS === 'android') {
+            const viewId = findNodeHandle(ref.current);
+            createFragment(viewId);
+        }
+    }, []);
+    return (<View style={styles.container} onLayout={onLayout}>
+      <BaseReadiumView height={height} width={width} {...props} onLocationChange={onLocationChange} onTableOfContents={onTableOfContents} settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined} ref={ref}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: { width: '100%', height: '100%' },
+});

package/lib/src/components/ReadiumView.web.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ReadiumView: React.ForwardRefExoticComponent<Pick<import("..").BaseReadiumViewProps, "onLocationChange" | "onTableOfContents" | "settings" | "file" | "location" | "style" | "height" | "width"> & React.RefAttributes<{
+    nextPage: () => void;
+    prevPage: () => void;
+}>>;

package/lib/src/components/ReadiumView.web.js

@@ -0,0 +1,67 @@
+import React, { useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useReaderRef, useSettingsObserver, useLocationObserver, } from '../../web/hooks';
+export const ReadiumView = React.forwardRef(({ file, settings, location, onLocationChange, onTableOfContents, style = {}, height, width, }, ref) => {
+    const readerRef = useReaderRef({
+        file,
+        onLocationChange,
+        onTableOfContents,
+    });
+    const reader = readerRef.current;
+    useImperativeHandle(ref, () => ({
+        nextPage: () => {
+            readerRef.current?.nextPage();
+        },
+        prevPage: () => {
+            readerRef.current?.previousPage();
+        },
+    }));
+    useSettingsObserver(reader, settings);
+    useLocationObserver(reader, location);
+    const mainStyle = {
+        ...styles.maximize,
+        ...style,
+    };
+    if (height)
+        mainStyle.height = height;
+    if (width)
+        mainStyle.width = width;
+    return (<View style={styles.container}>
+      {!reader && <div style={styles.loader}>Loading reader...</div>}
+      <div id="D2Reader-Container" style={styles.d2Container}>
+        <main style={mainStyle} tabIndex={-1} id="iframe-wrapper">
+          <div id="reader-loading" className="loading" style={styles.loader}></div>
+          <div id="reader-error" className="error"></div>
+        </main>
+      </div>
+    </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+    },
+    d2Container: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+    },
+    maximize: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+    },
+    button: {
+        width: 50,
+        fontSize: 100,
+        backgroundColor: 'transparent',
+        border: 'none',
+    },
+    loader: {
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+        position: 'relative',
+        top: 'calc(50% - 10px)',
+    },
+});

package/lib/src/enums/Appearance.js

@@ -0,0 +1,13 @@
+// NOTE: readium uses an index so the order is very important here
+export var Appearance;
+(function (Appearance) {
+    /**
+     * A traditional "light" mode
+     */
+    Appearance["DEFAULT"] = "readium-default-on";
+    Appearance["SEPIA"] = "readium-sepia-on";
+    /**
+     * A traditional "dark" mode
+     */
+    Appearance["NIGHT"] = "readium-night-on";
+})(Appearance || (Appearance = {}));

package/lib/src/enums/ColumnCount.js

@@ -0,0 +1,7 @@
+// NOTE: readium uses an index so the order is very important here
+export var ColumnCount;
+(function (ColumnCount) {
+    ColumnCount["AUTO"] = "auto";
+    ColumnCount["ONE"] = "1";
+    ColumnCount["TWO"] = "2";
+})(ColumnCount || (ColumnCount = {}));

package/lib/src/enums/FontFamily.js

@@ -0,0 +1,12 @@
+// NOTE: readium uses an index so the order is very important here
+export var FontFamily;
+(function (FontFamily) {
+    FontFamily["ORIGINAL"] = "Original";
+    FontFamily["HELVETICA_NEUE"] = "Helvetica Neue";
+    FontFamily["IOWAN_OLD_STYLE"] = "Iowan Old Style";
+    FontFamily["ATHELAS"] = "Athelas";
+    FontFamily["SERAVEK"] = "Seravek";
+    FontFamily["OPEN_DYSLEXIC"] = "OpenDyslexic";
+    FontFamily["ACCESSIBLE_DFA"] = "AccessibleDfA";
+    FontFamily["IA_WRITER_DUOSPACE"] = "IA Writer Duospace";
+})(FontFamily || (FontFamily = {}));

package/lib/src/enums/TextAlignment.js

@@ -0,0 +1,6 @@
+// NOTE: readium uses an index so the order is very important here
+export var TextAlignment;
+(function (TextAlignment) {
+    TextAlignment["JUSTIFY"] = "justify";
+    TextAlignment["START"] = "start";
+})(TextAlignment || (TextAlignment = {}));

package/lib/{module → src}/enums/index.js

@@ -2,4 +2,3 @@ export * from './Appearance';
 export * from './ColumnCount';
 export * from './FontFamily';
 export * from './TextAlignment';
-//# sourceMappingURL=index.js.map

package/lib/{module → src}/index.js

@@ -2,4 +2,3 @@ export * from './enums';
 export * from './interfaces';
 export { RANGES } from './utils';
 export * from './components/ReadiumView';
-//# sourceMappingURL=index.js.map

package/lib/{typescript/components/BaseReadiumView.d.ts → src/interfaces/BaseReadiumViewProps.d.ts}

@@ -1,5 +1,8 @@
-import { ViewStyle } from 'react-native';
-import type { Settings, Link, Locator, File } from '../interfaces';
+import type { ViewStyle } from 'react-native';
+import type { Settings } from './Settings';
+import type { Link } from './Link';
+import type { Locator } from './Locator';
+import type { File } from './File';
 export declare type BaseReadiumViewProps = {
     file: File;
     location?: Locator | Link;
@@ -11,4 +14,3 @@ export declare type BaseReadiumViewProps = {
     height?: number;
     width?: number;
 };
-export declare const BaseReadiumView: import("react-native").HostComponent<BaseReadiumViewProps> | (() => never);

package/lib/src/interfaces/BaseReadiumViewProps.js

@@ -0,0 +1 @@
+export {};

package/lib/src/interfaces/Dimensions.js

@@ -0,0 +1 @@
+export {};

package/lib/src/interfaces/File.js

@@ -0,0 +1 @@
+export {};

package/lib/src/interfaces/Link.js

@@ -0,0 +1 @@
+export {};

package/lib/src/interfaces/Locator.js

@@ -0,0 +1 @@
+export {};

package/lib/src/interfaces/Settings.js

@@ -0,0 +1,61 @@
+import { Appearance, FontFamily, TextAlignment, ColumnCount, } from '../enums';
+import { RANGES, indexOfObjectValue, clamp, } from '../utils';
+/**
+ * A reader settings object with sensible defaults.
+ */
+export class Settings {
+    // TODO:
+    // - ligatures
+    // - paraIndent
+    appearance = Appearance.DEFAULT;
+    fontFamily = FontFamily.ORIGINAL;
+    textAlign = TextAlignment.JUSTIFY;
+    colCount = ColumnCount.AUTO;
+    scroll = false;
+    fontOverride = false;
+    verticalScroll = false;
+    bodyHyphens = false;
+    advancedSettings = true;
+    /**
+     * Range: 100.0 - 300.0
+     */
+    fontSize = 100;
+    /**
+     * Range: 0.0 - 0.5
+     */
+    wordSpacing = 0;
+    /**
+     * Range: 0.0 - 0.5
+     */
+    letterSpacing = 0;
+    /**
+     * Range: 0.5 - 4.0
+     */
+    pageMargins = 0;
+    /**
+     * Range: 1.0 - 2.0
+     */
+    lineHeight = 1;
+    /**
+     * Range: 0.0 - 2.0
+     */
+    paragraphMargins = 0;
+    static map(settings) {
+        const defaultValues = new Settings();
+        const mapped = {};
+        Object.keys(defaultValues)
+            .forEach((key) => {
+            // @ts-ignore
+            mapped[key] = settings[key] !== undefined ? settings[key] : defaultValues[key];
+        });
+        mapped.appearance = indexOfObjectValue(Appearance, mapped.appearance);
+        mapped.fontFamily = indexOfObjectValue(FontFamily, mapped.fontFamily);
+        mapped.textAlign = indexOfObjectValue(TextAlignment, mapped.textAlign);
+        mapped.colCount = indexOfObjectValue(ColumnCount, mapped.colCount);
+        Object.keys(RANGES).forEach((key) => {
+            // @ts-ignore
+            mapped[key] = clamp(mapped[key], RANGES[key][0], RANGES[key][1]);
+        });
+        return mapped;
+    }
+}

package/lib/{typescript → src}/interfaces/index.d.ts

@@ -1,3 +1,4 @@
+export * from './BaseReadiumViewProps';
 export * from './Dimensions';
 export * from './File';
 export * from './Link';

package/lib/{module → src}/interfaces/index.js

@@ -1,6 +1,6 @@
+export * from './BaseReadiumViewProps';
 export * from './Dimensions';
 export * from './File';
 export * from './Link';
 export * from './Locator';
 export * from './Settings';
-//# sourceMappingURL=index.js.map

package/lib/{module → src}/utils/COMPONENT_NAME.js

@@ -1,2 +1 @@
 export const COMPONENT_NAME = 'ReadiumView';
-//# sourceMappingURL=COMPONENT_NAME.js.map

package/lib/src/utils/LINKING_ERROR.js

@@ -0,0 +1,5 @@
+import { Platform } from 'react-native';
+export const LINKING_ERROR = `The package 'react-native-readium' doesn't seem to be linked. Make sure: \n\n` +
+    Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+    '- You rebuilt the app after installing the package\n' +
+    '- You are not using Expo managed workflow\n';

package/lib/src/utils/RANGES.js

@@ -0,0 +1,8 @@
+export const RANGES = {
+    fontSize: [100.0, 300.0],
+    wordSpacing: [0.0, 0.5],
+    letterSpacing: [0.0, 0.5],
+    pageMargins: [0.5, 4.0],
+    lineHeight: [1.0, 2.0],
+    paragraphMargins: [0.0, 2.0],
+};

package/lib/src/utils/clamp.js

@@ -0,0 +1,7 @@
+export const clamp = (val, lower, upper) => {
+    if (val < lower)
+        return lower;
+    if (val > upper)
+        return upper;
+    return val;
+};

package/lib/src/utils/createFragment.js

@@ -0,0 +1,10 @@
+import { UIManager } from 'react-native';
+import { COMPONENT_NAME } from './COMPONENT_NAME';
+export const createFragment = (viewId) => {
+    if (viewId !== null) {
+        UIManager.dispatchViewManagerCommand(viewId, 
+        // we are calling the 'create' command
+        // @ts-ignore
+        UIManager.getViewManagerConfig(COMPONENT_NAME).Commands.create.toString(), [viewId]);
+    }
+};

package/lib/src/utils/getWidthOrHeightValue.js

@@ -0,0 +1,4 @@
+import { Platform, PixelRatio } from 'react-native';
+export const getWidthOrHeightValue = (val) => {
+    return Platform.OS === 'android' ? PixelRatio.getPixelSizeForLayoutSize(val) : val;
+};

package/lib/{module → src}/utils/index.js

@@ -5,4 +5,3 @@ export * from './getWidthOrHeightValue';
 export * from './indexOfObjectValue';
 export * from './LINKING_ERROR';
 export * from './RANGES';
-//# sourceMappingURL=index.js.map

package/lib/src/utils/indexOfObjectValue.js

@@ -0,0 +1,3 @@
+export const indexOfObjectValue = (obj, val) => {
+    return Object.values(obj).indexOf(val);
+};

package/lib/web/hooks/useLocationObserver.d.ts

@@ -0,0 +1,2 @@
+import type { Link, Locator } from '../../src/interfaces';
+export declare const useLocationObserver: (reader?: import("@d-i-t-a/reader").default | null | undefined, location?: Link | Locator | null | undefined) => void;

package/lib/web/hooks/useLocationObserver.js

@@ -0,0 +1,13 @@
+import { useDeepCompareEffect } from 'use-deep-compare';
+export const useLocationObserver = (reader, location) => {
+    useDeepCompareEffect(() => {
+        if (reader && location) {
+            // NOTE: technically this is a Link | Locator. However, under the hood the
+            // R2D2BC is converting Links to locators, so just force the type here.
+            reader.goTo(location);
+        }
+    }, [
+        location,
+        !!reader,
+    ]);
+};

package/lib/web/hooks/useReaderRef.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ReadiumProps } from '../../src/components/ReadiumView';
+export declare const useReaderRef: ({ file, onLocationChange, onTableOfContents, }: Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents'>) => import("react").MutableRefObject<import("@d-i-t-a/reader").default | null>;

package/lib/web/hooks/useReaderRef.js

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+export const useReaderRef = ({ file, onLocationChange, onTableOfContents, }) => {
+    const readerRef = useRef(null);
+    useEffect(() => {
+        async function run() {
+            const D2Reader = await import('@d-i-t-a/reader');
+            const ref = await D2Reader.load({
+                url: new URL(file.url),
+                lastReadingPosition: file.initialLocation,
+                userSettings: { verticalScroll: false },
+                api: {
+                    updateCurrentLocation: async (location) => {
+                        if (onLocationChange)
+                            onLocationChange(location);
+                        return location;
+                    },
+                },
+                injectables: injectables,
+            });
+            if (onTableOfContents) {
+                onTableOfContents(ref.tableOfContents);
+            }
+            readerRef.current = ref;
+        }
+        run();
+    }, []);
+    return readerRef;
+};
+// NOTE: right now we're serving these through statically.io, which is just
+// pulling them from Github... Might not be the best way and maybe we should
+// consider bundling them with the library.
+const injectables = [
+    {
+        type: "style",
+        url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css",
+        r2before: true,
+    },
+    {
+        type: "style",
+        url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css",
+        r2default: true,
+    },
+    {
+        type: "style",
+        url: "https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css",
+        r2after: true,
+    },
+];

package/lib/web/hooks/useSettingsObserver.d.ts

@@ -0,0 +1,2 @@
+import type { Settings } from '../../src/interfaces';
+export declare const useSettingsObserver: (reader?: import("@d-i-t-a/reader").default | null | undefined, settings?: Partial<Settings> | null | undefined) => void;

package/lib/web/hooks/useSettingsObserver.js

@@ -0,0 +1,13 @@
+import { useDeepCompareEffect } from 'use-deep-compare';
+export const useSettingsObserver = (reader, settings) => {
+    useDeepCompareEffect(() => {
+        if (reader && settings) {
+            // @ts-ignore - FIXME need to do some deeper investigation if these
+            // are equivalent or not
+            reader?.applyUserSettings(settings);
+        }
+    }, [
+        settings,
+        !!reader,
+    ]);
+};

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "react-native-readium",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "A react-native wrapper for https://readium.org/",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
-  "types": "lib/typescript/index.d.ts",
+  "main": "lib/src/index",
+  "types": "lib/src/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
   "files": [
@@ -12,6 +11,7 @@
     "lib",
     "android",
     "ios",
+    "web",
     "cpp",
     "react-native-readium.podspec",
     "!lib/typescript/example",
@@ -25,7 +25,7 @@
     "test": "jest",
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "prepare": "bob build",
+    "prepare": "rimraf lib && tsc",
     "release": "release-it",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
@@ -59,11 +59,11 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
-    "@react-native-community/eslint-config": "^2.0.0",
+    "@react-native-community/eslint-config": "^3.2.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^26.0.0",
-    "@types/react": "^18.0.26",
-    "@types/react-native": "^0.70.8",
+    "@types/react": "^17.0.52",
+    "@types/react-native": "^0.68",
     "commitlint": "^11.0.0",
     "conventional-changelog-cli": "^2.2.2",
     "eslint": "^7.2.0",
@@ -75,7 +75,6 @@
     "prettier": "^2.0.5",
     "react": "^18.2.0",
     "react-native": "^0.70.6",
-    "react-native-builder-bob": "^0.18.2",
     "release-it": "^14.2.2",
     "typescript": "^4.1.3"
   },
@@ -142,20 +141,6 @@
     "trailingComma": "es5",
     "useTabs": false
   },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      "commonjs",
-      "module",
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
-  },
   "dependencies": {
     "@d-i-t-a/reader": "^2.1.4",
     "use-deep-compare": "^1.1.0"

package/src/components/BaseReadiumView.tsx

@@ -1,24 +1,11 @@
 import {
   requireNativeComponent,
   UIManager,
-  ViewStyle,
 } from 'react-native';
 
-import type { Settings, Link, Locator, File, } from '../interfaces';
+import type { BaseReadiumViewProps } from '../interfaces';
 import { COMPONENT_NAME, LINKING_ERROR } from '../utils';
 
-export type BaseReadiumViewProps = {
-  file: File;
-  location?: Locator | Link;
-  settings?: Partial<Settings>;
-  style?: ViewStyle;
-  onLocationChange?: (locator: Locator) => void;
-  onTableOfContents?: (toc: Link[] | null) => void;
-  ref?: any;
-  height?: number;
-  width?: number;
-};
-
 export const BaseReadiumView =
   UIManager.getViewManagerConfig(COMPONENT_NAME) != null
     ? requireNativeComponent<BaseReadiumViewProps>(COMPONENT_NAME)

package/src/components/BaseReadiumView.web.tsx

@@ -0,0 +1 @@
+export const BaseReadiumView = () => null

package/src/components/ReadiumView.tsx

@@ -1,10 +1,9 @@
 import React, { useCallback, useState, useRef, useEffect } from 'react';
 import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
 
-import type { Dimensions } from '../interfaces';
+import type { BaseReadiumViewProps, Dimensions } from '../interfaces';
 import { Settings } from '../interfaces';
 import { createFragment, getWidthOrHeightValue as dimension } from '../utils';
-import type { BaseReadiumViewProps } from './BaseReadiumView';
 import { BaseReadiumView } from './BaseReadiumView';
 
 export type ReadiumProps = BaseReadiumViewProps;