react-native-readium 1.0.0-alpha.1

package/lib/module/utils/index.js

@@ -0,0 +1,17 @@
+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]
+};
+export const indexOfObjectValue = (obj, val) => {
+  return Object.values(obj).indexOf(val);
+};
+export const clamp = (val, lower, upper) => {
+  if (val < lower) return lower;
+  if (val > upper) return upper;
+  return val;
+};
+//# sourceMappingURL=index.js.map

package/lib/module/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["RANGES","fontSize","wordSpacing","letterSpacing","pageMargins","lineHeight","paragraphMargins","indexOfObjectValue","obj","val","Object","values","indexOf","clamp","lower","upper"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;AACpBC,EAAAA,QAAQ,EAAU,CAAC,KAAD,EAAQ,KAAR,CADE;AAEpBC,EAAAA,WAAW,EAAO,CAAC,GAAD,EAAM,GAAN,CAFE;AAGpBC,EAAAA,aAAa,EAAK,CAAC,GAAD,EAAM,GAAN,CAHE;AAIpBC,EAAAA,WAAW,EAAO,CAAC,GAAD,EAAM,GAAN,CAJE;AAKpBC,EAAAA,UAAU,EAAQ,CAAC,GAAD,EAAM,GAAN,CALE;AAMpBC,EAAAA,gBAAgB,EAAE,CAAC,GAAD,EAAM,GAAN;AANE,CAAf;AASP,OAAO,MAAMC,kBAAkB,GAAG,CAACC,GAAD,EAAWC,GAAX,KAAgC;AAChE,SAAOC,MAAM,CAACC,MAAP,CAAcH,GAAd,EAAmBI,OAAnB,CAA2BH,GAA3B,CAAP;AACD,CAFM;AAIP,OAAO,MAAMI,KAAK,GAAG,CAACJ,GAAD,EAAcK,KAAd,EAA6BC,KAA7B,KAAuD;AAC1E,MAAIN,GAAG,GAAGK,KAAV,EAAiB,OAAOA,KAAP;AACjB,MAAIL,GAAG,GAAGM,KAAV,EAAiB,OAAOA,KAAP;AACjB,SAAON,GAAP;AACD,CAJM","sourcesContent":["export const RANGES = {\n  fontSize:         [100.0, 300.0],\n  wordSpacing:      [0.0, 0.5],\n  letterSpacing:    [0.0, 0.5],\n  pageMargins:      [0.5, 4.0],\n  lineHeight:       [1.0, 2.0],\n  paragraphMargins: [0.0, 2.0],\n}\n\nexport const indexOfObjectValue = (obj: any, val: any): number => {\n  return Object.values(obj).indexOf(val);\n}\n\nexport const clamp = (val: number, lower: number, upper: number): number => {\n  if (val < lower) return lower;\n  if (val > upper) return upper;\n  return val;\n}\n"]}

package/lib/typescript/enums/Appearance.d.ts

@@ -0,0 +1,11 @@
+export declare enum Appearance {
+    /**
+     * A traditional "light" mode
+     */
+    DEFAULT = "readium-default-on",
+    SEPIA = "readium-sepia-on",
+    /**
+     * A traditional "dark" mode
+     */
+    NIGHT = "readium-night-on"
+}

package/lib/typescript/enums/ColumnCount.d.ts

@@ -0,0 +1,5 @@
+export declare enum ColumnCount {
+    AUTO = "auto",
+    ONE = "1",
+    TWO = "2"
+}

package/lib/typescript/enums/FontFamily.d.ts

@@ -0,0 +1,10 @@
+export declare enum FontFamily {
+    ORIGINAL = "Original",
+    HELVETICA_NEUE = "Helvetica Neue",
+    IOWAN_OLD_STYLE = "Iowan Old Style",
+    ATHELAS = "Athelas",
+    SERAVEK = "Seravek",
+    OPEN_DYSLEXIC = "OpenDyslexic",
+    ACCESSIBLE_DFA = "AccessibleDfA",
+    IA_WRITER_DUOSPACE = "IA Writer Duospace"
+}

package/lib/typescript/enums/TextAlignment.d.ts

@@ -0,0 +1,4 @@
+export declare enum TextAlignment {
+    JUSTIFY = "justify",
+    START = "start"
+}

package/lib/typescript/enums/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Appearance';
+export * from './ColumnCount';
+export * from './FontFamily';
+export * from './TextAlignment';

package/lib/typescript/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import type { Locator, File } from './interfaces';
+import { Settings } from './interfaces';
+export * from './enums';
+export * from './interfaces';
+declare type ReadiumProps = {
+    file: File;
+    location?: Locator;
+    settings?: Partial<Settings>;
+    style?: ViewStyle;
+    onLocationChange?: (locator: Locator) => void;
+    ref?: any;
+    height?: number;
+    width?: number;
+};
+export declare const ReadiumView: React.FC<ReadiumProps>;

package/lib/typescript/interfaces/Dimensions.d.ts

@@ -0,0 +1,4 @@
+export interface Dimensions {
+    width: number;
+    height: number;
+}

package/lib/typescript/interfaces/File.d.ts

@@ -0,0 +1,11 @@
+import type { Locator } from './Locator';
+export interface File {
+    /**
+     * A string path to an eBook on disk.
+     */
+    url: string;
+    /**
+     * An optional location that the eBook will be opened at.
+     */
+    initialLocation?: Locator;
+}

package/lib/typescript/interfaces/Locator.d.ts

@@ -0,0 +1,14 @@
+/**
+ * An interface representing the Readium Locator object.
+ */
+export interface Locator {
+    href: string;
+    type: string;
+    target: number;
+    title?: string;
+    locations: {
+        position: number;
+        progression: number;
+        totalProgression: number;
+    };
+}

package/lib/typescript/interfaces/Settings.d.ts

@@ -0,0 +1,40 @@
+import { Appearance, FontFamily, TextAlignment, ColumnCount } from '../enums';
+/**
+ * A reader settings object with sensible defaults.
+ */
+export declare class Settings {
+    appearance: Appearance;
+    fontFamily: FontFamily;
+    textAlign: TextAlignment;
+    colCount: ColumnCount;
+    scroll: boolean;
+    fontOverride: boolean;
+    verticalScroll: boolean;
+    bodyHyphens: boolean;
+    advancedSettings: boolean;
+    /**
+     * Range: 100.0 - 300.0
+     */
+    fontSize: number;
+    /**
+     * Range: 0.0 - 0.5
+     */
+    wordSpacing: number;
+    /**
+     * Range: 0.0 - 0.5
+     */
+    letterSpacing: number;
+    /**
+     * Range: 0.5 - 4.0
+     */
+    pageMargins: number;
+    /**
+     * Range: 1.0 - 2.0
+     */
+    lineHeight: number;
+    /**
+     * Range: 0.0 - 2.0
+     */
+    paragraphMargins?: number;
+    static map(settings: Partial<Settings>): any;
+}

package/lib/typescript/interfaces/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Dimensions';
+export * from './File';
+export * from './Locator';
+export * from './Settings';

package/lib/typescript/utils/index.d.ts

@@ -0,0 +1,10 @@
+export declare const RANGES: {
+    fontSize: number[];
+    wordSpacing: number[];
+    letterSpacing: number[];
+    pageMargins: number[];
+    lineHeight: number[];
+    paragraphMargins: number[];
+};
+export declare const indexOfObjectValue: (obj: any, val: any) => number;
+export declare const clamp: (val: number, lower: number, upper: number) => number;

package/package.json

@@ -0,0 +1,160 @@
+{
+  "name": "react-native-readium",
+  "version": "1.0.0-alpha.1",
+  "description": "A react-native wrapper for https://readium.org/",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "react-native-readium.podspec",
+    "!lib/typescript/example",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "pods": "cd example && pod-install --quiet",
+    "bootstrap": "yarn example && yarn && yarn pods",
+    "version": "yarn changelog && git add CHANGELOG.md",
+    "postversion": "npm run publish:git && npm run publish:npm",
+    "publish:git": "git push && git push --tags",
+    "publish:npm": "yarn publish --access public --new-version $npm_package_version",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "readium",
+    "ebook",
+    "epub",
+    "ereader",
+    "e-reader",
+    "read"
+  ],
+  "repository": "http://github.com/5-stones/react-native-readium",
+  "author": "Jacob Spizziri <jspizziri@weare5stones.com> (https://github.com/jspizziri)",
+  "license": "MIT",
+  "bugs": {
+    "url": "http://github.com/5-stones/react-native-readium/issues"
+  },
+  "homepage": "http://github.com/5-stones/react-native-readium#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^11.0.0",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@release-it/conventional-changelog": "^2.0.0",
+    "@types/jest": "^26.0.0",
+    "@types/react": "^16.9.19",
+    "@types/react-native": "0.62.13",
+    "commitlint": "^11.0.0",
+    "conventional-changelog-cli": "^2.2.2",
+    "eslint": "^7.2.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "husky": "^6.0.0",
+    "jest": "^26.0.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "16.13.1",
+    "react-native": "0.63.4",
+    "react-native-builder-bob": "^0.18.2",
+    "release-it": "^14.2.2",
+    "typescript": "^4.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {}
+}

package/react-native-readium.podspec

@@ -0,0 +1,25 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-readium"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "13.0" }
+  s.source       = { :git => "http://github.com/5-stones/react-native-readium.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+
+  # this is an issue as these aren't currently published on cocoapods.org
+  s.dependency "R2Shared"
+  s.dependency "R2Streamer"
+  s.dependency "R2Navigator"
+  s.dependency "ReadiumOPDS"
+end

package/src/enums/Appearance.ts

@@ -0,0 +1,14 @@
+// NOTE: readium uses an index so the order is very important here
+export enum Appearance {
+  /**
+   * A traditional "light" mode
+   */
+  DEFAULT = 'readium-default-on',
+
+  SEPIA = 'readium-sepia-on',
+
+  /**
+   * A traditional "dark" mode
+   */
+  NIGHT = 'readium-night-on',
+}

package/src/enums/ColumnCount.ts

@@ -0,0 +1,6 @@
+// NOTE: readium uses an index so the order is very important here
+export enum ColumnCount {
+  AUTO = 'auto',
+  ONE = '1',
+  TWO = '2',
+}

package/src/enums/FontFamily.ts

@@ -0,0 +1,11 @@
+// NOTE: readium uses an index so the order is very important here
+export enum FontFamily {
+  ORIGINAL = 'Original',
+  HELVETICA_NEUE = 'Helvetica Neue',
+  IOWAN_OLD_STYLE = 'Iowan Old Style',
+  ATHELAS = 'Athelas',
+  SERAVEK = 'Seravek',
+  OPEN_DYSLEXIC = 'OpenDyslexic',
+  ACCESSIBLE_DFA = 'AccessibleDfA',
+  IA_WRITER_DUOSPACE = 'IA Writer Duospace',
+}

package/src/enums/TextAlignment.ts

@@ -0,0 +1,5 @@
+// NOTE: readium uses an index so the order is very important here
+export enum TextAlignment {
+  JUSTIFY = 'justify',
+  START = 'start',
+}

package/src/enums/index.ts

@@ -0,0 +1,4 @@
+export * from './Appearance';
+export * from './ColumnCount';
+export * from './FontFamily';
+export * from './TextAlignment';

package/src/index.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useState } from 'react';
+import {
+  requireNativeComponent,
+  UIManager,
+  Platform,
+  ViewStyle,
+  View,
+  PixelRatio,
+} from 'react-native';
+
+import type { Locator, File, Dimensions } from './interfaces';
+import { Settings } from './interfaces';
+
+export * from './enums';
+export * from './interfaces';
+
+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';
+
+type ReadiumProps = {
+  file: File;
+  location?: Locator;
+  settings?: Partial<Settings>;
+  style?: ViewStyle;
+  onLocationChange?: (locator: Locator) => void;
+  ref?: any;
+  height?: number;
+  width?: number;
+};
+
+const ComponentName = 'ReadiumView';
+
+const BaseReadiumView =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<ReadiumProps>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };
+
+export const ReadiumView: React.FC<ReadiumProps> = ({
+  onLocationChange: wrappedOnLocationChange,
+  settings: unmappedSettings,
+  ...props
+}) => {
+
+  const [{ height, width }, setDimensions] = useState<Dimensions>({
+    width: 0,
+    height: 0,
+  });
+  const onLocationChange = useCallback((event: any) => {
+    if (wrappedOnLocationChange) {
+      wrappedOnLocationChange(event.nativeEvent);
+    }
+  }, [wrappedOnLocationChange]);
+
+  return (
+    <View
+      style={{ width: '100%', height: '100%' }}
+      onLayout={({ nativeEvent: { layout: { width, height } }}) => {
+        setDimensions({
+          width: Platform.OS === 'android' ? PixelRatio.getPixelSizeForLayoutSize(width) : width,
+          height: Platform.OS === 'android' ? PixelRatio.getPixelSizeForLayoutSize(height) : height,
+        })
+      }}
+    >
+      <BaseReadiumView
+        height={height}
+        width={width}
+        {...props}
+        onLocationChange={onLocationChange}
+        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}
+      />
+    </View>
+  );
+};

package/src/interfaces/Dimensions.ts

@@ -0,0 +1,4 @@
+export interface Dimensions {
+  width: number;
+  height: number;
+}

package/src/interfaces/File.ts

@@ -0,0 +1,14 @@
+import type { Locator } from './Locator';
+
+
+export interface File {
+  /**
+   * A string path to an eBook on disk.
+   */
+  url: string;
+
+  /**
+   * An optional location that the eBook will be opened at.
+   */
+  initialLocation?: Locator;
+}

package/src/interfaces/Locator.ts

@@ -0,0 +1,14 @@
+/**
+ * An interface representing the Readium Locator object.
+ */
+export interface Locator {
+  href: string;
+  type: string;
+  target: number;
+  title?: string;
+  locations: {
+    position: number;
+    progression: number;
+    totalProgression: number;
+  };
+}

package/src/interfaces/Settings.ts

@@ -0,0 +1,85 @@
+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 = Appearance.DEFAULT;
+  fontFamily: FontFamily = FontFamily.ORIGINAL;
+  textAlign: TextAlignment = TextAlignment.JUSTIFY;
+  colCount: ColumnCount = ColumnCount.AUTO;
+
+  scroll: boolean = false;
+  fontOverride: boolean = false;
+  verticalScroll: boolean = false;
+  bodyHyphens: boolean = false;
+  advancedSettings: boolean = true;
+
+  /**
+   * Range: 100.0 - 300.0
+   */
+  fontSize: number = 100;
+
+  /**
+   * Range: 0.0 - 0.5
+   */
+  wordSpacing: number = 0;
+
+  /**
+   * Range: 0.0 - 0.5
+   */
+  letterSpacing: number = 0;
+
+  /**
+   * Range: 0.5 - 4.0
+   */
+  pageMargins: number = 0;
+
+  /**
+   * Range: 1.0 - 2.0
+   */
+  lineHeight: number = 1;
+
+  /**
+   * Range: 0.0 - 2.0
+   */
+  paragraphMargins?: number = 0;
+
+  static map(settings: Partial<Settings>): any {
+    const defaultValues = new Settings();
+    const mapped: Record<string, any> = {};
+
+    Object.keys(defaultValues)
+      .forEach((key: string) => {
+        // @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: string) => {
+      // @ts-ignore
+      mapped[key] = clamp(mapped[key], RANGES[key][0], RANGES[key][1]);
+    });
+
+    return mapped;
+  }
+}

package/src/interfaces/index.ts

@@ -0,0 +1,4 @@
+export * from './Dimensions';
+export * from './File';
+export * from './Locator';
+export * from './Settings';

package/src/utils/index.ts

@@ -0,0 +1,18 @@
+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],
+}
+
+export const indexOfObjectValue = (obj: any, val: any): number => {
+  return Object.values(obj).indexOf(val);
+}
+
+export const clamp = (val: number, lower: number, upper: number): number => {
+  if (val < lower) return lower;
+  if (val > upper) return upper;
+  return val;
+}