react-native-readium 1.0.4 → 1.2.0

package/README.md

@@ -154,15 +154,25 @@ DRM is not supported at this time. However, there is a clear path to [support it
 | Name | Type | Optional | Description |
 |------|------|----------|-------------|
 | `file`     | [`File`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/File.ts)               | :x:                | A file object containing the path to the eBook file on disk. |
-| `location` | [`Locator`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/Locator.ts) | [`Link`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/Link.ts)           | :white_check_mark: | A locator prop that allows you to externally control the location of the reader (e.g. Chapters or Bookmarks)|
+| `location` | [`Locator`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/Locator.ts) \| [`Link`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/Link.ts)           | :white_check_mark: | A locator prop that allows you to externally control the location of the reader (e.g. Chapters or Bookmarks). <br/><br/>:warning: If you want to set the `location` of an ebook on initial load, you should use the `File.initialLocation` property (look at the `file` prop). See more [here](https://github.com/5-stones/react-native-readium/issues/16#issuecomment-1344128937) |
 | `settings` | [`Partial<Settings>`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/Settings.ts)  | :white_check_mark: | An object that allows you to control various aspects of the reader's UI (epub only) |
 | `style`    | `ViewStyle`          | :white_check_mark: | A traditional style object. |
 | `onLocationChange` | `(locator: Locator) => void` | :white_check_mark: | A callback that fires whenever the location is changed (e.g. the user transitions to a new page)|
 | `onTableOfContents` | `(toc: Link[] \| null) => void` | :white_check_mark: | A callback that fires once the file is parsed and emits the table of contents embedded in the file. Returns `null` or an empty `[]` if no TOC exists. See the [`Link`](https://github.com/5-stones/react-native-readium/blob/main/src/interfaces/Link.ts) interface for more info. |
 
+#### :warning: Web vs Native File URLs
+
+Please note that on `web` the `File.url` should be a web accessible URL path to
+the `manifest.json` of the unpacked epub. In native contexts it needs to be a
+local filepath to the epub file itself on disk. If you're not sure how to
+serve epub books [take a look at this example](https://github.com/d-i-t-a/R2D2BC/blob/production/examples/server.ts)
+which is based on the `dita-streamer-js` project (which is built on all the
+readium [r2-*-js](https://github.com/readium?q=js) libraries)
+
 ## Contributing
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
+repository and the development workflow.
 
 ## Release
 

package/lib/commonjs/components/ReadiumView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReadiumView.tsx"],"names":["ReadiumView","onLocationChange","wrappedOnLocationChange","onTableOfContents","wrappedOnTableOfContents","settings","unmappedSettings","props","ref","height","width","setDimensions","onLayout","nativeEvent","layout","event","toc","Platform","OS","viewId","current","styles","container","Settings","map","undefined","StyleSheet","create"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;AAEA;;;;;;;;AAIO,MAAMA,WAAmC,GAAG,QAK7C;AAAA,MAL8C;AAClDC,IAAAA,gBAAgB,EAAEC,uBADgC;AAElDC,IAAAA,iBAAiB,EAAEC,wBAF+B;AAGlDC,IAAAA,QAAQ,EAAEC,gBAHwC;AAIlD,OAAGC;AAJ+C,GAK9C;AACJ,QAAMC,GAAG,GAAG,mBAAO,IAAP,CAAZ;AACA,QAAM,CAAC;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAD,EAAoBC,aAApB,IAAqC,qBAAqB;AAC9DD,IAAAA,KAAK,EAAE,CADuD;AAE9DD,IAAAA,MAAM,EAAE;AAFsD,GAArB,CAA3C,CAFI,CAMJ;;AACA,QAAMG,QAAQ,GAAG,wBAAY,SAAmD;AAAA,QAAlD;AAAEC,MAAAA,WAAW,EAAE;AAAEC,QAAAA,MAAM,EAAE;AAAEJ,UAAAA,KAAF;AAASD,UAAAA;AAAT;AAAV;AAAf,KAAkD;AAC9EE,IAAAA,aAAa,CAAC;AACZD,MAAAA,KAAK,EAAE,kCAAUA,KAAV,CADK;AAEZD,MAAAA,MAAM,EAAE,kCAAUA,MAAV;AAFI,KAAD,CAAb;AAID,GALgB,EAKd,EALc,CAAjB,CAPI,CAaJ;;AACA,QAAMR,gBAAgB,GAAG,wBAAac,KAAD,IAAgB;AACnD,QAAIb,uBAAJ,EAA6B;AAC3BA,MAAAA,uBAAuB,CAACa,KAAK,CAACF,WAAP,CAAvB;AACD;AACF,GAJwB,EAItB,CAACX,uBAAD,CAJsB,CAAzB;AAMA,QAAMC,iBAAiB,GAAG,wBAAaY,KAAD,IAAgB;AACpD,QAAIX,wBAAJ,EAA8B;AAC5B,YAAMY,GAAG,GAAGD,KAAK,CAACF,WAAN,CAAkBG,GAAlB,IAAyB,IAArC;AACAZ,MAAAA,wBAAwB,CAACY,GAAD,CAAxB;AACD;AACF,GALyB,EAKvB,CAACZ,wBAAD,CALuB,CAA1B;AAOA,wBAAU,MAAM;AACd,QAAIa,sBAASC,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAMC,MAAM,GAAG,iCAAeX,GAAG,CAACY,OAAnB,CAAf;AACA,iCAAeD,MAAf;AACD;AACF,GALD,EAKG,EALH;AAOA,sBACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAEE,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAEV;AAFZ,kBAIE,6BAAC,gCAAD;AACE,IAAA,MAAM,EAAEH,MADV;AAEE,IAAA,KAAK,EAAEC;AAFT,KAGMH,KAHN;AAIE,IAAA,gBAAgB,EAAEN,gBAJpB;AAKE,IAAA,iBAAiB,EAAEE,iBALrB;AAME,IAAA,QAAQ,EAAEG,gBAAgB,GAAGiB,qBAASC,GAAT,CAAalB,gBAAb,CAAH,GAAoCmB,SANhE;AAOE,IAAA,GAAG,EAAEjB;AAPP,KAJF,CADF;AAgBD,CAvDM;;;;AAyDP,MAAMa,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,SAAS,EAAE;AAAEZ,IAAAA,KAAK,EAAE,MAAT;AAAiBD,IAAAA,MAAM,EAAE;AAAzB;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport { View, Platform, findNodeHandle, StyleSheet } from 'react-native';\n\nimport type { Dimensions } from '../interfaces';\nimport { Settings } from '../interfaces';\nimport { createFragment, getWidthOrHeightValue as dimension } from '../utils';\nimport type { BaseReadiumViewProps } from './BaseReadiumView';\nimport { BaseReadiumView } from './BaseReadiumView';\n\ntype ReadiumProps = BaseReadiumViewProps;\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  onTableOfContents: wrappedOnTableOfContents,\n  settings: unmappedSettings,\n  ...props\n}) => {\n  const ref = useRef(null);\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  // set the view dimensions on layout\n  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}) => {\n    setDimensions({\n      width: dimension(width),\n      height: dimension(height),\n    });\n  }, []);\n  // wrap the native onLocationChange and extract the raw event value\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  const onTableOfContents = useCallback((event: any) => {\n    if (wrappedOnTableOfContents) {\n      const toc = event.nativeEvent.toc || null;\n      wrappedOnTableOfContents(toc);\n    }\n  }, [wrappedOnTableOfContents]);\n\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      const viewId = findNodeHandle(ref.current);\n      createFragment(viewId);\n    }\n  }, [])\n\n  return (\n    <View\n      style={styles.container}\n      onLayout={onLayout}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        onTableOfContents={onTableOfContents}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n        ref={ref}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { width: '100%', height: '100%' },\n});\n"]}
+{"version":3,"sources":["ReadiumView.tsx"],"names":["ReadiumView","onLocationChange","wrappedOnLocationChange","onTableOfContents","wrappedOnTableOfContents","settings","unmappedSettings","props","ref","height","width","setDimensions","onLayout","nativeEvent","layout","event","toc","Platform","OS","viewId","current","styles","container","Settings","map","undefined","StyleSheet","create"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;AAEA;;;;;;;;AAIO,MAAMA,WAAmC,GAAG,QAK7C;AAAA,MAL8C;AAClDC,IAAAA,gBAAgB,EAAEC,uBADgC;AAElDC,IAAAA,iBAAiB,EAAEC,wBAF+B;AAGlDC,IAAAA,QAAQ,EAAEC,gBAHwC;AAIlD,OAAGC;AAJ+C,GAK9C;AACJ,QAAMC,GAAG,GAAG,mBAAO,IAAP,CAAZ;AACA,QAAM,CAAC;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAD,EAAoBC,aAApB,IAAqC,qBAAqB;AAC9DD,IAAAA,KAAK,EAAE,CADuD;AAE9DD,IAAAA,MAAM,EAAE;AAFsD,GAArB,CAA3C,CAFI,CAMJ;;AACA,QAAMG,QAAQ,GAAG,wBAAY,SAAwD;AAAA,QAAvD;AAAEC,MAAAA,WAAW,EAAE;AAAEC,QAAAA,MAAM,EAAE;AAAEJ,UAAAA,KAAF;AAASD,UAAAA;AAAT;AAAV;AAAf,KAAuD;AACnFE,IAAAA,aAAa,CAAC;AACZD,MAAAA,KAAK,EAAE,kCAAUA,KAAV,CADK;AAEZD,MAAAA,MAAM,EAAE,kCAAUA,MAAV;AAFI,KAAD,CAAb;AAID,GALgB,EAKd,EALc,CAAjB,CAPI,CAaJ;;AACA,QAAMR,gBAAgB,GAAG,wBAAac,KAAD,IAAgB;AACnD,QAAIb,uBAAJ,EAA6B;AAC3BA,MAAAA,uBAAuB,CAACa,KAAK,CAACF,WAAP,CAAvB;AACD;AACF,GAJwB,EAItB,CAACX,uBAAD,CAJsB,CAAzB;AAMA,QAAMC,iBAAiB,GAAG,wBAAaY,KAAD,IAAgB;AACpD,QAAIX,wBAAJ,EAA8B;AAC5B,YAAMY,GAAG,GAAGD,KAAK,CAACF,WAAN,CAAkBG,GAAlB,IAAyB,IAArC;AACAZ,MAAAA,wBAAwB,CAACY,GAAD,CAAxB;AACD;AACF,GALyB,EAKvB,CAACZ,wBAAD,CALuB,CAA1B;AAOA,wBAAU,MAAM;AACd,QAAIa,sBAASC,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAMC,MAAM,GAAG,iCAAeX,GAAG,CAACY,OAAnB,CAAf;AACA,iCAAeD,MAAf;AACD;AACF,GALD,EAKG,EALH;AAOA,sBACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAEE,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAEV;AAFZ,kBAIE,6BAAC,gCAAD;AACE,IAAA,MAAM,EAAEH,MADV;AAEE,IAAA,KAAK,EAAEC;AAFT,KAGMH,KAHN;AAIE,IAAA,gBAAgB,EAAEN,gBAJpB;AAKE,IAAA,iBAAiB,EAAEE,iBALrB;AAME,IAAA,QAAQ,EAAEG,gBAAgB,GAAGiB,qBAASC,GAAT,CAAalB,gBAAb,CAAH,GAAoCmB,SANhE;AAOE,IAAA,GAAG,EAAEjB;AAPP,KAJF,CADF;AAgBD,CAvDM;;;;AAyDP,MAAMa,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,SAAS,EAAE;AAAEZ,IAAAA,KAAK,EAAE,MAAT;AAAiBD,IAAAA,MAAM,EAAE;AAAzB;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport { View, Platform, findNodeHandle, StyleSheet } from 'react-native';\n\nimport type { Dimensions } from '../interfaces';\nimport { Settings } from '../interfaces';\nimport { createFragment, getWidthOrHeightValue as dimension } from '../utils';\nimport type { BaseReadiumViewProps } from './BaseReadiumView';\nimport { BaseReadiumView } from './BaseReadiumView';\n\nexport type ReadiumProps = BaseReadiumViewProps;\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  onTableOfContents: wrappedOnTableOfContents,\n  settings: unmappedSettings,\n  ...props\n}) => {\n  const ref = useRef(null);\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  // set the view dimensions on layout\n  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}: any) => {\n    setDimensions({\n      width: dimension(width),\n      height: dimension(height),\n    });\n  }, []);\n  // wrap the native onLocationChange and extract the raw event value\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  const onTableOfContents = useCallback((event: any) => {\n    if (wrappedOnTableOfContents) {\n      const toc = event.nativeEvent.toc || null;\n      wrappedOnTableOfContents(toc);\n    }\n  }, [wrappedOnTableOfContents]);\n\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      const viewId = findNodeHandle(ref.current);\n      createFragment(viewId);\n    }\n  }, [])\n\n  return (\n    <View\n      style={styles.container}\n      onLayout={onLayout}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        onTableOfContents={onTableOfContents}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n        ref={ref}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { width: '100%', height: '100%' },\n});\n"]}

package/lib/commonjs/index.web.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  RANGES: true,
+  ReadiumView: true
+};
+Object.defineProperty(exports, "RANGES", {
+  enumerable: true,
+  get: function () {
+    return _utils.RANGES;
+  }
+});
+Object.defineProperty(exports, "ReadiumView", {
+  enumerable: true,
+  get: function () {
+    return _ReadiumView.ReadiumView;
+  }
+});
+
+var _enums = require("./enums");
+
+Object.keys(_enums).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _enums[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _enums[key];
+    }
+  });
+});
+
+var _interfaces = require("./interfaces");
+
+Object.keys(_interfaces).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interfaces[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interfaces[key];
+    }
+  });
+});
+
+var _utils = require("./utils");
+
+var _ReadiumView = require("./web/ReadiumView");
+//# sourceMappingURL=index.web.js.map

package/lib/commonjs/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.web.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAEA","sourcesContent":["export * from './enums';\nexport * from './interfaces';\nexport { RANGES } from './utils';\n\nexport { ReadiumView } from './web/ReadiumView';\n"]}

package/lib/commonjs/web/ReadiumView.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReadiumView = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _hooks = require("./hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ReadiumView = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    file,
+    settings,
+    location,
+    onLocationChange,
+    onTableOfContents,
+    style = {},
+    height,
+    width
+  } = _ref;
+  const readerRef = (0, _hooks.useReaderRef)({
+    file,
+    onLocationChange,
+    onTableOfContents
+  });
+  const reader = readerRef.current;
+  (0, _react.useImperativeHandle)(ref, () => ({
+    nextPage: () => {
+      var _readerRef$current;
+
+      (_readerRef$current = readerRef.current) === null || _readerRef$current === void 0 ? void 0 : _readerRef$current.nextPage();
+    },
+    prevPage: () => {
+      var _readerRef$current2;
+
+      (_readerRef$current2 = readerRef.current) === null || _readerRef$current2 === void 0 ? void 0 : _readerRef$current2.previousPage();
+    }
+  }));
+  (0, _hooks.useSettingsObserver)(reader, settings);
+  (0, _hooks.useLocationObserver)(reader, location);
+  const mainStyle = { ...styles.maximize,
+    ...style
+  };
+  if (height) mainStyle.height = height;
+  if (width) mainStyle.width = width;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, !reader && /*#__PURE__*/_react.default.createElement("div", {
+    style: styles.loader
+  }, "Loading reader..."), /*#__PURE__*/_react.default.createElement("div", {
+    id: "D2Reader-Container",
+    style: styles.d2Container
+  }, /*#__PURE__*/_react.default.createElement("main", {
+    style: mainStyle,
+    tabIndex: -1,
+    id: "iframe-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "reader-loading",
+    className: "loading",
+    style: styles.loader
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "reader-error",
+    className: "error"
+  }))));
+});
+
+exports.ReadiumView = ReadiumView;
+
+const styles = _reactNative.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)'
+  }
+});
+//# sourceMappingURL=ReadiumView.js.map

package/lib/commonjs/web/ReadiumView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ReadiumView.tsx"],"names":["ReadiumView","React","forwardRef","ref","file","settings","location","onLocationChange","onTableOfContents","style","height","width","readerRef","reader","current","nextPage","prevPage","previousPage","mainStyle","styles","maximize","container","loader","d2Container","StyleSheet","create","display","button","fontSize","backgroundColor","border","textAlign","position","top"],"mappings":";;;;;;;AAAA;;AAEA;;AAGA;;;;;;AAMO,MAAMA,WAAW,gBAAGC,eAAMC,UAAN,CAGV,OASdC,GATc,KASN;AAAA,MATO;AAChBC,IAAAA,IADgB;AAEhBC,IAAAA,QAFgB;AAGhBC,IAAAA,QAHgB;AAIhBC,IAAAA,gBAJgB;AAKhBC,IAAAA,iBALgB;AAMhBC,IAAAA,KAAK,GAAG,EANQ;AAOhBC,IAAAA,MAPgB;AAQhBC,IAAAA;AARgB,GASP;AACT,QAAMC,SAAS,GAAG,yBAAa;AAC7BR,IAAAA,IAD6B;AAE7BG,IAAAA,gBAF6B;AAG7BC,IAAAA;AAH6B,GAAb,CAAlB;AAKA,QAAMK,MAAM,GAAGD,SAAS,CAACE,OAAzB;AAEA,kCAAoBX,GAApB,EAAyB,OAAO;AAC9BY,IAAAA,QAAQ,EAAE,MAAM;AAAA;;AACd,4BAAAH,SAAS,CAACE,OAAV,0EAAmBC,QAAnB;AACD,KAH6B;AAI9BC,IAAAA,QAAQ,EAAE,MAAM;AAAA;;AACd,6BAAAJ,SAAS,CAACE,OAAV,4EAAmBG,YAAnB;AACD;AAN6B,GAAP,CAAzB;AASA,kCAAoBJ,MAApB,EAA4BR,QAA5B;AACA,kCAAoBQ,MAApB,EAA4BP,QAA5B;AAEA,QAAMY,SAAS,GAAG,EAChB,GAAGC,MAAM,CAACC,QADM;AAEhB,OAAIX;AAFY,GAAlB;AAKA,MAAIC,MAAJ,EAAYQ,SAAS,CAACR,MAAV,GAAmBA,MAAnB;AACZ,MAAIC,KAAJ,EAAWO,SAAS,CAACP,KAAV,GAAkBA,KAAlB;AAEX,sBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEQ,MAAM,CAACE;AAApB,KACG,CAACR,MAAD,iBAAW;AAAK,IAAA,KAAK,EAAEM,MAAM,CAACG;AAAnB,yBADd,eAEE;AAAK,IAAA,EAAE,EAAC,oBAAR;AAA6B,IAAA,KAAK,EAAEH,MAAM,CAACI;AAA3C,kBACE;AACE,IAAA,KAAK,EAAEL,SADT;AAEE,IAAA,QAAQ,EAAE,CAAC,CAFb;AAGE,IAAA,EAAE,EAAC;AAHL,kBAKE;AAAK,IAAA,EAAE,EAAC,gBAAR;AAAyB,IAAA,SAAS,EAAC,SAAnC;AAA6C,IAAA,KAAK,EAAEC,MAAM,CAACG;AAA3D,IALF,eAME;AAAK,IAAA,EAAE,EAAC,cAAR;AAAuB,IAAA,SAAS,EAAC;AAAjC,IANF,CADF,CAFF,CADF;AAeD,CAvD0B,CAApB;;;;AAyDP,MAAMH,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AACTV,IAAAA,KAAK,EAAE,MADE;AAETD,IAAAA,MAAM,EAAE;AAFC,GADoB;AAK/Ba,EAAAA,WAAW,EAAE;AACXZ,IAAAA,KAAK,EAAE,MADI;AAEXD,IAAAA,MAAM,EAAE,MAFG;AAGXgB,IAAAA,OAAO,EAAE;AAHE,GALkB;AAU/BN,EAAAA,QAAQ,EAAE;AACRT,IAAAA,KAAK,EAAE,MADC;AAERD,IAAAA,MAAM,EAAE,MAFA;AAGRgB,IAAAA,OAAO,EAAE;AAHD,GAVqB;AAe/BC,EAAAA,MAAM,EAAE;AACNhB,IAAAA,KAAK,EAAE,EADD;AAENiB,IAAAA,QAAQ,EAAE,GAFJ;AAGNC,IAAAA,eAAe,EAAE,aAHX;AAINC,IAAAA,MAAM,EAAE;AAJF,GAfuB;AAqB/BR,EAAAA,MAAM,EAAE;AACNX,IAAAA,KAAK,EAAE,MADD;AAEND,IAAAA,MAAM,EAAE,MAFF;AAGNqB,IAAAA,SAAS,EAAE,QAHL;AAINC,IAAAA,QAAQ,EAAE,UAJJ;AAKNC,IAAAA,GAAG,EAAE;AALC;AArBuB,CAAlB,CAAf","sourcesContent":["import React, { useImperativeHandle } from 'react';\nimport type { CSSProperties } from 'react';\nimport { View, StyleSheet } from 'react-native';\n\nimport type { ReadiumProps } from '../components/ReadiumView';\nimport {\n  useReaderRef,\n  useSettingsObserver,\n  useLocationObserver,\n} from './hooks';\n\nexport const ReadiumView = React.forwardRef<{\n  nextPage: () => void;\n  prevPage: () => void;\n}, ReadiumProps>(({\n  file,\n  settings,\n  location,\n  onLocationChange,\n  onTableOfContents,\n  style = {},\n  height,\n  width,\n}, ref) => {\n  const readerRef = useReaderRef({\n    file,\n    onLocationChange,\n    onTableOfContents,\n  });\n  const reader = readerRef.current;\n\n  useImperativeHandle(ref, () => ({\n    nextPage: () => {\n      readerRef.current?.nextPage();\n    },\n    prevPage: () => {\n      readerRef.current?.previousPage();\n    },\n  }));\n\n  useSettingsObserver(reader, settings);\n  useLocationObserver(reader, location);\n\n  const mainStyle = {\n    ...styles.maximize,\n    ...(style as CSSProperties),\n  };\n\n  if (height) mainStyle.height = height;\n  if (width) mainStyle.width = width;\n\n  return (\n    <View style={styles.container}>\n      {!reader && <div style={styles.loader}>Loading reader...</div>}\n      <div id=\"D2Reader-Container\" style={styles.d2Container}>\n        <main\n          style={mainStyle}\n          tabIndex={-1}\n          id=\"iframe-wrapper\"\n        >\n          <div id=\"reader-loading\" className=\"loading\" style={styles.loader}></div>\n          <div id=\"reader-error\" className=\"error\"></div>\n        </main>\n      </div>\n    </View>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n    height: '100%',\n  },\n  d2Container: {\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n  },\n  maximize: {\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n  },\n  button: {\n    width: 50,\n    fontSize: 100,\n    backgroundColor: 'transparent',\n    border: 'none',\n  },\n  loader: {\n    width: '100%',\n    height: '100%',\n    textAlign: 'center',\n    position: 'relative',\n    top: 'calc(50% - 10px)',\n  },\n});\n"]}

package/lib/commonjs/web/hooks/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _useReaderRef = require("./useReaderRef");
+
+Object.keys(_useReaderRef).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useReaderRef[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useReaderRef[key];
+    }
+  });
+});
+
+var _useSettingsObserver = require("./useSettingsObserver");
+
+Object.keys(_useSettingsObserver).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSettingsObserver[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSettingsObserver[key];
+    }
+  });
+});
+
+var _useLocationObserver = require("./useLocationObserver");
+
+Object.keys(_useLocationObserver).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useLocationObserver[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useLocationObserver[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/lib/commonjs/web/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './useReaderRef';\nexport * from './useSettingsObserver';\nexport * from './useLocationObserver';\n"]}

package/lib/commonjs/web/hooks/useLocationObserver.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLocationObserver = void 0;
+
+var _useDeepCompare = require("use-deep-compare");
+
+const useLocationObserver = (reader, location) => {
+  (0, _useDeepCompare.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]);
+};
+
+exports.useLocationObserver = useLocationObserver;
+//# sourceMappingURL=useLocationObserver.js.map

package/lib/commonjs/web/hooks/useLocationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useLocationObserver.ts"],"names":["useLocationObserver","reader","location","goTo"],"mappings":";;;;;;;AAAA;;AAMO,MAAMA,mBAAmB,GAAG,CACjCC,MADiC,EAEjCC,QAFiC,KAG9B;AACH,4CAAqB,MAAM;AACzB,QAAID,MAAM,IAAIC,QAAd,EAAwB;AACtB;AACA;AACAD,MAAAA,MAAM,CAACE,IAAP,CAAYD,QAAZ;AACD;AACF,GAND,EAMG,CACDA,QADC,EAED,CAAC,CAACD,MAFD,CANH;AAUD,CAdM","sourcesContent":["import { useDeepCompareEffect } from 'use-deep-compare';\nimport type D2Reader from '@d-i-t-a/reader';\nimport type { Locator as R2Locator } from '@d-i-t-a/reader';\n\nimport type { Link, Locator } from '../../interfaces';\n\nexport const useLocationObserver = (\n  reader?: D2Reader | null,\n  location?: Link | Locator | null,\n) => {\n  useDeepCompareEffect(() => {\n    if (reader && location) {\n      // NOTE: technically this is a Link | Locator. However, under the hood the\n      // R2D2BC is converting Links to locators, so just force the type here.\n      reader.goTo(location as R2Locator);\n    }\n  }, [\n    location,\n    !!reader,\n  ]);\n};\n"]}

package/lib/commonjs/web/hooks/useReaderRef.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReaderRef = void 0;
+
+var _react = require("react");
+
+var _reader = _interopRequireDefault(require("@d-i-t-a/reader"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useReaderRef = _ref => {
+  let {
+    file,
+    onLocationChange,
+    onTableOfContents
+  } = _ref;
+  const readerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    _reader.default.load({
+      url: new URL(file.url),
+      lastReadingPosition: file.initialLocation,
+      userSettings: {
+        verticalScroll: false
+      },
+      api: {
+        updateCurrentLocation: async location => {
+          if (onLocationChange) onLocationChange(location);
+          return location;
+        }
+      },
+      injectables: injectables
+    }).then(r => {
+      if (onTableOfContents) {
+        onTableOfContents(r.tableOfContents);
+      }
+
+      readerRef.current = r;
+    });
+  }, []);
+  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.
+
+
+exports.useReaderRef = useReaderRef;
+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
+}];
+//# sourceMappingURL=useReaderRef.js.map

package/lib/commonjs/web/hooks/useReaderRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReaderRef.ts"],"names":["useReaderRef","file","onLocationChange","onTableOfContents","readerRef","D2Reader","load","url","URL","lastReadingPosition","initialLocation","userSettings","verticalScroll","api","updateCurrentLocation","location","injectables","then","r","tableOfContents","current","type","r2before","r2default","r2after"],"mappings":";;;;;;;AAAA;;AACA;;;;AAKO,MAAMA,YAAY,GAAG,QAIkD;AAAA,MAJjD;AAC3BC,IAAAA,IAD2B;AAE3BC,IAAAA,gBAF2B;AAG3BC,IAAAA;AAH2B,GAIiD;AAC5E,QAAMC,SAAS,GAAG,mBAAwB,IAAxB,CAAlB;AAEA,wBAAU,MAAM;AACdC,oBAASC,IAAT,CAAc;AACZC,MAAAA,GAAG,EAAE,IAAIC,GAAJ,CAAQP,IAAI,CAACM,GAAb,CADO;AAEZE,MAAAA,mBAAmB,EAAER,IAAI,CAACS,eAFd;AAGZC,MAAAA,YAAY,EAAE;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAHF;AAIZC,MAAAA,GAAG,EAAE;AACHC,QAAAA,qBAAqB,EAAE,MAAOC,QAAP,IAA6B;AAClD,cAAIb,gBAAJ,EAAsBA,gBAAgB,CAACa,QAAD,CAAhB;AACtB,iBAAOA,QAAP;AACD;AAJE,OAJO;AAUZC,MAAAA,WAAW,EAAEA;AAVD,KAAd,EAWGC,IAXH,CAWSC,CAAD,IAAO;AACb,UAAIf,iBAAJ,EAAuB;AACrBA,QAAAA,iBAAiB,CAACe,CAAC,CAACC,eAAH,CAAjB;AACD;;AACDf,MAAAA,SAAS,CAACgB,OAAV,GAAoBF,CAApB;AACD,KAhBD;AAiBD,GAlBD,EAkBG,EAlBH;AAoBA,SAAOd,SAAP;AACD,CA5BM,C,CA8BP;AACA;AACA;;;;AACA,MAAMY,WAAkB,GAAG,CACzB;AACEK,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,iGAFP;AAGEe,EAAAA,QAAQ,EAAE;AAHZ,CADyB,EAMzB;AACED,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,kGAFP;AAGEgB,EAAAA,SAAS,EAAE;AAHb,CANyB,EAWzB;AACEF,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,gGAFP;AAGEiB,EAAAA,OAAO,EAAE;AAHX,CAXyB,CAA3B","sourcesContent":["import { useEffect, useRef } from 'react';\nimport D2Reader from '@d-i-t-a/reader';\n\nimport type { ReadiumProps } from '../../components/ReadiumView';\nimport type { Locator } from '../../interfaces';\n\nexport const useReaderRef = ({\n  file,\n  onLocationChange,\n  onTableOfContents,\n}: Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents' >) => {\n  const readerRef = useRef<D2Reader | null>(null);\n\n  useEffect(() => {\n    D2Reader.load({\n      url: new URL(file.url),\n      lastReadingPosition: file.initialLocation,\n      userSettings: { verticalScroll: false },\n      api: {\n        updateCurrentLocation: async (location: Locator) => {\n          if (onLocationChange) onLocationChange(location);\n          return location;\n        },\n      },\n      injectables: injectables,\n    }).then((r) => {\n      if (onTableOfContents) {\n        onTableOfContents(r.tableOfContents);\n      }\n      readerRef.current = r;\n    });\n  }, []);\n\n  return readerRef\n};\n\n// NOTE: right now we're serving these through statically.io, which is just\n// pulling them from Github... Might not be the best way and maybe we should\n// consider bundling them with the library.\nconst injectables: any[] = [\n  {\n    type: \"style\",\n    url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css\",\n    r2before: true,\n  },\n  {\n    type: \"style\",\n    url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css\",\n    r2default: true,\n  },\n  {\n    type: \"style\",\n    url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css\",\n    r2after: true,\n  },\n];\n\n"]}

package/lib/commonjs/web/hooks/useSettingsObserver.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSettingsObserver = void 0;
+
+var _useDeepCompare = require("use-deep-compare");
+
+const useSettingsObserver = (reader, settings) => {
+  (0, _useDeepCompare.useDeepCompareEffect)(() => {
+    if (reader && settings) {
+      // @ts-ignore - FIXME need to do some deeper investigation if these
+      // are equivalent or not
+      reader === null || reader === void 0 ? void 0 : reader.applyUserSettings(settings);
+    }
+  }, [settings, !!reader]);
+};
+
+exports.useSettingsObserver = useSettingsObserver;
+//# sourceMappingURL=useSettingsObserver.js.map

package/lib/commonjs/web/hooks/useSettingsObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSettingsObserver.ts"],"names":["useSettingsObserver","reader","settings","applyUserSettings"],"mappings":";;;;;;;AAAA;;AAMO,MAAMA,mBAAmB,GAAG,CACjCC,MADiC,EAEjCC,QAFiC,KAG9B;AACH,4CAAqB,MAAM;AACzB,QAAID,MAAM,IAAIC,QAAd,EAAwB;AACtB;AACA;AACAD,MAAAA,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEE,iBAAR,CAA0BD,QAA1B;AACD;AACF,GAND,EAMG,CACDA,QADC,EAED,CAAC,CAACD,MAFD,CANH;AAUD,CAdM","sourcesContent":["import { useDeepCompareEffect } from 'use-deep-compare';\nimport type D2Reader from '@d-i-t-a/reader';\nimport type { UserSettings } from '@d-i-t-a/reader/dist/types/model/user-settings/UserSettings';\n\nimport type { Settings } from '../../interfaces';\n\nexport const useSettingsObserver = (\n  reader?: D2Reader | null,\n  settings?: Partial<Settings> | null,\n) => {\n  useDeepCompareEffect(() => {\n    if (reader && settings) {\n      // @ts-ignore - FIXME need to do some deeper investigation if these\n      // are equivalent or not\n      reader?.applyUserSettings(settings as Partial<UserSettings>);\n    }\n  }, [\n    settings,\n    !!reader,\n  ]);\n};\n"]}

package/lib/module/components/ReadiumView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ReadiumView.tsx"],"names":["React","useCallback","useState","useRef","useEffect","View","Platform","findNodeHandle","StyleSheet","Settings","createFragment","getWidthOrHeightValue","dimension","BaseReadiumView","ReadiumView","onLocationChange","wrappedOnLocationChange","onTableOfContents","wrappedOnTableOfContents","settings","unmappedSettings","props","ref","height","width","setDimensions","onLayout","nativeEvent","layout","event","toc","OS","viewId","current","styles","container","map","undefined","create"],"mappings":"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","sourcesContent":["import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport { View, Platform, findNodeHandle, StyleSheet } from 'react-native';\n\nimport type { Dimensions } from '../interfaces';\nimport { Settings } from '../interfaces';\nimport { createFragment, getWidthOrHeightValue as dimension } from '../utils';\nimport type { BaseReadiumViewProps } from './BaseReadiumView';\nimport { BaseReadiumView } from './BaseReadiumView';\n\ntype ReadiumProps = BaseReadiumViewProps;\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  onTableOfContents: wrappedOnTableOfContents,\n  settings: unmappedSettings,\n  ...props\n}) => {\n  const ref = useRef(null);\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  // set the view dimensions on layout\n  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}) => {\n    setDimensions({\n      width: dimension(width),\n      height: dimension(height),\n    });\n  }, []);\n  // wrap the native onLocationChange and extract the raw event value\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  const onTableOfContents = useCallback((event: any) => {\n    if (wrappedOnTableOfContents) {\n      const toc = event.nativeEvent.toc || null;\n      wrappedOnTableOfContents(toc);\n    }\n  }, [wrappedOnTableOfContents]);\n\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      const viewId = findNodeHandle(ref.current);\n      createFragment(viewId);\n    }\n  }, [])\n\n  return (\n    <View\n      style={styles.container}\n      onLayout={onLayout}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        onTableOfContents={onTableOfContents}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n        ref={ref}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { width: '100%', height: '100%' },\n});\n"]}
+{"version":3,"sources":["ReadiumView.tsx"],"names":["React","useCallback","useState","useRef","useEffect","View","Platform","findNodeHandle","StyleSheet","Settings","createFragment","getWidthOrHeightValue","dimension","BaseReadiumView","ReadiumView","onLocationChange","wrappedOnLocationChange","onTableOfContents","wrappedOnTableOfContents","settings","unmappedSettings","props","ref","height","width","setDimensions","onLayout","nativeEvent","layout","event","toc","OS","viewId","current","styles","container","map","undefined","create"],"mappings":"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","sourcesContent":["import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport { View, Platform, findNodeHandle, StyleSheet } from 'react-native';\n\nimport type { Dimensions } from '../interfaces';\nimport { Settings } from '../interfaces';\nimport { createFragment, getWidthOrHeightValue as dimension } from '../utils';\nimport type { BaseReadiumViewProps } from './BaseReadiumView';\nimport { BaseReadiumView } from './BaseReadiumView';\n\nexport type ReadiumProps = BaseReadiumViewProps;\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  onTableOfContents: wrappedOnTableOfContents,\n  settings: unmappedSettings,\n  ...props\n}) => {\n  const ref = useRef(null);\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  // set the view dimensions on layout\n  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}: any) => {\n    setDimensions({\n      width: dimension(width),\n      height: dimension(height),\n    });\n  }, []);\n  // wrap the native onLocationChange and extract the raw event value\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  const onTableOfContents = useCallback((event: any) => {\n    if (wrappedOnTableOfContents) {\n      const toc = event.nativeEvent.toc || null;\n      wrappedOnTableOfContents(toc);\n    }\n  }, [wrappedOnTableOfContents]);\n\n  useEffect(() => {\n    if (Platform.OS === 'android') {\n      const viewId = findNodeHandle(ref.current);\n      createFragment(viewId);\n    }\n  }, [])\n\n  return (\n    <View\n      style={styles.container}\n      onLayout={onLayout}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        onTableOfContents={onTableOfContents}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n        ref={ref}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { width: '100%', height: '100%' },\n});\n"]}

package/lib/module/index.web.js

@@ -0,0 +1,5 @@
+export * from './enums';
+export * from './interfaces';
+export { RANGES } from './utils';
+export { ReadiumView } from './web/ReadiumView';
+//# sourceMappingURL=index.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.web.tsx"],"names":["RANGES","ReadiumView"],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,cAAd;AACA,SAASA,MAAT,QAAuB,SAAvB;AAEA,SAASC,WAAT,QAA4B,mBAA5B","sourcesContent":["export * from './enums';\nexport * from './interfaces';\nexport { RANGES } from './utils';\n\nexport { ReadiumView } from './web/ReadiumView';\n"]}

package/lib/module/web/ReadiumView.js

@@ -0,0 +1,89 @@
+import React, { useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useReaderRef, useSettingsObserver, useLocationObserver } from './hooks';
+export const ReadiumView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    file,
+    settings,
+    location,
+    onLocationChange,
+    onTableOfContents,
+    style = {},
+    height,
+    width
+  } = _ref;
+  const readerRef = useReaderRef({
+    file,
+    onLocationChange,
+    onTableOfContents
+  });
+  const reader = readerRef.current;
+  useImperativeHandle(ref, () => ({
+    nextPage: () => {
+      var _readerRef$current;
+
+      (_readerRef$current = readerRef.current) === null || _readerRef$current === void 0 ? void 0 : _readerRef$current.nextPage();
+    },
+    prevPage: () => {
+      var _readerRef$current2;
+
+      (_readerRef$current2 = readerRef.current) === null || _readerRef$current2 === void 0 ? void 0 : _readerRef$current2.previousPage();
+    }
+  }));
+  useSettingsObserver(reader, settings);
+  useLocationObserver(reader, location);
+  const mainStyle = { ...styles.maximize,
+    ...style
+  };
+  if (height) mainStyle.height = height;
+  if (width) mainStyle.width = width;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, !reader && /*#__PURE__*/React.createElement("div", {
+    style: styles.loader
+  }, "Loading reader..."), /*#__PURE__*/React.createElement("div", {
+    id: "D2Reader-Container",
+    style: styles.d2Container
+  }, /*#__PURE__*/React.createElement("main", {
+    style: mainStyle,
+    tabIndex: -1,
+    id: "iframe-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "reader-loading",
+    className: "loading",
+    style: styles.loader
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "reader-error",
+    className: "error"
+  }))));
+});
+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)'
+  }
+});
+//# sourceMappingURL=ReadiumView.js.map

package/lib/module/web/ReadiumView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ReadiumView.tsx"],"names":["React","useImperativeHandle","View","StyleSheet","useReaderRef","useSettingsObserver","useLocationObserver","ReadiumView","forwardRef","ref","file","settings","location","onLocationChange","onTableOfContents","style","height","width","readerRef","reader","current","nextPage","prevPage","previousPage","mainStyle","styles","maximize","container","loader","d2Container","create","display","button","fontSize","backgroundColor","border","textAlign","position","top"],"mappings":"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","sourcesContent":["import React, { useImperativeHandle } from 'react';\nimport type { CSSProperties } from 'react';\nimport { View, StyleSheet } from 'react-native';\n\nimport type { ReadiumProps } from '../components/ReadiumView';\nimport {\n  useReaderRef,\n  useSettingsObserver,\n  useLocationObserver,\n} from './hooks';\n\nexport const ReadiumView = React.forwardRef<{\n  nextPage: () => void;\n  prevPage: () => void;\n}, ReadiumProps>(({\n  file,\n  settings,\n  location,\n  onLocationChange,\n  onTableOfContents,\n  style = {},\n  height,\n  width,\n}, ref) => {\n  const readerRef = useReaderRef({\n    file,\n    onLocationChange,\n    onTableOfContents,\n  });\n  const reader = readerRef.current;\n\n  useImperativeHandle(ref, () => ({\n    nextPage: () => {\n      readerRef.current?.nextPage();\n    },\n    prevPage: () => {\n      readerRef.current?.previousPage();\n    },\n  }));\n\n  useSettingsObserver(reader, settings);\n  useLocationObserver(reader, location);\n\n  const mainStyle = {\n    ...styles.maximize,\n    ...(style as CSSProperties),\n  };\n\n  if (height) mainStyle.height = height;\n  if (width) mainStyle.width = width;\n\n  return (\n    <View style={styles.container}>\n      {!reader && <div style={styles.loader}>Loading reader...</div>}\n      <div id=\"D2Reader-Container\" style={styles.d2Container}>\n        <main\n          style={mainStyle}\n          tabIndex={-1}\n          id=\"iframe-wrapper\"\n        >\n          <div id=\"reader-loading\" className=\"loading\" style={styles.loader}></div>\n          <div id=\"reader-error\" className=\"error\"></div>\n        </main>\n      </div>\n    </View>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n    height: '100%',\n  },\n  d2Container: {\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n  },\n  maximize: {\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n  },\n  button: {\n    width: 50,\n    fontSize: 100,\n    backgroundColor: 'transparent',\n    border: 'none',\n  },\n  loader: {\n    width: '100%',\n    height: '100%',\n    textAlign: 'center',\n    position: 'relative',\n    top: 'calc(50% - 10px)',\n  },\n});\n"]}

package/lib/module/web/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useReaderRef';
+export * from './useSettingsObserver';
+export * from './useLocationObserver';
+//# sourceMappingURL=index.js.map

package/lib/module/web/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd","sourcesContent":["export * from './useReaderRef';\nexport * from './useSettingsObserver';\nexport * from './useLocationObserver';\n"]}

package/lib/module/web/hooks/useLocationObserver.js

@@ -0,0 +1,11 @@
+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]);
+};
+//# sourceMappingURL=useLocationObserver.js.map

package/lib/module/web/hooks/useLocationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useLocationObserver.ts"],"names":["useDeepCompareEffect","useLocationObserver","reader","location","goTo"],"mappings":"AAAA,SAASA,oBAAT,QAAqC,kBAArC;AAMA,OAAO,MAAMC,mBAAmB,GAAG,CACjCC,MADiC,EAEjCC,QAFiC,KAG9B;AACHH,EAAAA,oBAAoB,CAAC,MAAM;AACzB,QAAIE,MAAM,IAAIC,QAAd,EAAwB;AACtB;AACA;AACAD,MAAAA,MAAM,CAACE,IAAP,CAAYD,QAAZ;AACD;AACF,GANmB,EAMjB,CACDA,QADC,EAED,CAAC,CAACD,MAFD,CANiB,CAApB;AAUD,CAdM","sourcesContent":["import { useDeepCompareEffect } from 'use-deep-compare';\nimport type D2Reader from '@d-i-t-a/reader';\nimport type { Locator as R2Locator } from '@d-i-t-a/reader';\n\nimport type { Link, Locator } from '../../interfaces';\n\nexport const useLocationObserver = (\n  reader?: D2Reader | null,\n  location?: Link | Locator | null,\n) => {\n  useDeepCompareEffect(() => {\n    if (reader && location) {\n      // NOTE: technically this is a Link | Locator. However, under the hood the\n      // R2D2BC is converting Links to locators, so just force the type here.\n      reader.goTo(location as R2Locator);\n    }\n  }, [\n    location,\n    !!reader,\n  ]);\n};\n"]}

package/lib/module/web/hooks/useReaderRef.js

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import D2Reader from '@d-i-t-a/reader';
+export const useReaderRef = _ref => {
+  let {
+    file,
+    onLocationChange,
+    onTableOfContents
+  } = _ref;
+  const readerRef = useRef(null);
+  useEffect(() => {
+    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
+    }).then(r => {
+      if (onTableOfContents) {
+        onTableOfContents(r.tableOfContents);
+      }
+
+      readerRef.current = r;
+    });
+  }, []);
+  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
+}];
+//# sourceMappingURL=useReaderRef.js.map

package/lib/module/web/hooks/useReaderRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReaderRef.ts"],"names":["useEffect","useRef","D2Reader","useReaderRef","file","onLocationChange","onTableOfContents","readerRef","load","url","URL","lastReadingPosition","initialLocation","userSettings","verticalScroll","api","updateCurrentLocation","location","injectables","then","r","tableOfContents","current","type","r2before","r2default","r2after"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,OAAlC;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAKA,OAAO,MAAMC,YAAY,GAAG,QAIkD;AAAA,MAJjD;AAC3BC,IAAAA,IAD2B;AAE3BC,IAAAA,gBAF2B;AAG3BC,IAAAA;AAH2B,GAIiD;AAC5E,QAAMC,SAAS,GAAGN,MAAM,CAAkB,IAAlB,CAAxB;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACdE,IAAAA,QAAQ,CAACM,IAAT,CAAc;AACZC,MAAAA,GAAG,EAAE,IAAIC,GAAJ,CAAQN,IAAI,CAACK,GAAb,CADO;AAEZE,MAAAA,mBAAmB,EAAEP,IAAI,CAACQ,eAFd;AAGZC,MAAAA,YAAY,EAAE;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAHF;AAIZC,MAAAA,GAAG,EAAE;AACHC,QAAAA,qBAAqB,EAAE,MAAOC,QAAP,IAA6B;AAClD,cAAIZ,gBAAJ,EAAsBA,gBAAgB,CAACY,QAAD,CAAhB;AACtB,iBAAOA,QAAP;AACD;AAJE,OAJO;AAUZC,MAAAA,WAAW,EAAEA;AAVD,KAAd,EAWGC,IAXH,CAWSC,CAAD,IAAO;AACb,UAAId,iBAAJ,EAAuB;AACrBA,QAAAA,iBAAiB,CAACc,CAAC,CAACC,eAAH,CAAjB;AACD;;AACDd,MAAAA,SAAS,CAACe,OAAV,GAAoBF,CAApB;AACD,KAhBD;AAiBD,GAlBQ,EAkBN,EAlBM,CAAT;AAoBA,SAAOb,SAAP;AACD,CA5BM,C,CA8BP;AACA;AACA;;AACA,MAAMW,WAAkB,GAAG,CACzB;AACEK,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,iGAFP;AAGEe,EAAAA,QAAQ,EAAE;AAHZ,CADyB,EAMzB;AACED,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,kGAFP;AAGEgB,EAAAA,SAAS,EAAE;AAHb,CANyB,EAWzB;AACEF,EAAAA,IAAI,EAAE,OADR;AAEEd,EAAAA,GAAG,EAAE,gGAFP;AAGEiB,EAAAA,OAAO,EAAE;AAHX,CAXyB,CAA3B","sourcesContent":["import { useEffect, useRef } from 'react';\nimport D2Reader from '@d-i-t-a/reader';\n\nimport type { ReadiumProps } from '../../components/ReadiumView';\nimport type { Locator } from '../../interfaces';\n\nexport const useReaderRef = ({\n  file,\n  onLocationChange,\n  onTableOfContents,\n}: Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents' >) => {\n  const readerRef = useRef<D2Reader | null>(null);\n\n  useEffect(() => {\n    D2Reader.load({\n      url: new URL(file.url),\n      lastReadingPosition: file.initialLocation,\n      userSettings: { verticalScroll: false },\n      api: {\n        updateCurrentLocation: async (location: Locator) => {\n          if (onLocationChange) onLocationChange(location);\n          return location;\n        },\n      },\n      injectables: injectables,\n    }).then((r) => {\n      if (onTableOfContents) {\n        onTableOfContents(r.tableOfContents);\n      }\n      readerRef.current = r;\n    });\n  }, []);\n\n  return readerRef\n};\n\n// NOTE: right now we're serving these through statically.io, which is just\n// pulling them from Github... Might not be the best way and maybe we should\n// consider bundling them with the library.\nconst injectables: any[] = [\n  {\n    type: \"style\",\n    url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-before.css\",\n    r2before: true,\n  },\n  {\n    type: \"style\",\n    url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-default.css\",\n    r2default: true,\n  },\n  {\n    type: \"style\",\n    url: \"https://cdn.statically.io/gh/d-i-t-a/R2D2BC/production/viewer/readium-css/ReadiumCSS-after.css\",\n    r2after: true,\n  },\n];\n\n"]}

package/lib/module/web/hooks/useSettingsObserver.js

@@ -0,0 +1,11 @@
+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 === null || reader === void 0 ? void 0 : reader.applyUserSettings(settings);
+    }
+  }, [settings, !!reader]);
+};
+//# sourceMappingURL=useSettingsObserver.js.map

package/lib/module/web/hooks/useSettingsObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSettingsObserver.ts"],"names":["useDeepCompareEffect","useSettingsObserver","reader","settings","applyUserSettings"],"mappings":"AAAA,SAASA,oBAAT,QAAqC,kBAArC;AAMA,OAAO,MAAMC,mBAAmB,GAAG,CACjCC,MADiC,EAEjCC,QAFiC,KAG9B;AACHH,EAAAA,oBAAoB,CAAC,MAAM;AACzB,QAAIE,MAAM,IAAIC,QAAd,EAAwB;AACtB;AACA;AACAD,MAAAA,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEE,iBAAR,CAA0BD,QAA1B;AACD;AACF,GANmB,EAMjB,CACDA,QADC,EAED,CAAC,CAACD,MAFD,CANiB,CAApB;AAUD,CAdM","sourcesContent":["import { useDeepCompareEffect } from 'use-deep-compare';\nimport type D2Reader from '@d-i-t-a/reader';\nimport type { UserSettings } from '@d-i-t-a/reader/dist/types/model/user-settings/UserSettings';\n\nimport type { Settings } from '../../interfaces';\n\nexport const useSettingsObserver = (\n  reader?: D2Reader | null,\n  settings?: Partial<Settings> | null,\n) => {\n  useDeepCompareEffect(() => {\n    if (reader && settings) {\n      // @ts-ignore - FIXME need to do some deeper investigation if these\n      // are equivalent or not\n      reader?.applyUserSettings(settings as Partial<UserSettings>);\n    }\n  }, [\n    settings,\n    !!reader,\n  ]);\n};\n"]}

package/lib/typescript/components/ReadiumView.d.ts

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

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

@@ -0,0 +1,4 @@
+export * from './enums';
+export * from './interfaces';
+export { RANGES } from './utils';
+export { ReadiumView } from './web/ReadiumView';

package/lib/typescript/web/ReadiumView.d.ts

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

package/lib/typescript/web/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useReaderRef';
+export * from './useSettingsObserver';
+export * from './useLocationObserver';

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-readium",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "description": "A react-native wrapper for https://readium.org/",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -62,8 +62,8 @@
     "@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",
+    "@types/react": "^18.0.26",
+    "@types/react-native": "^0.70.8",
     "commitlint": "^11.0.0",
     "conventional-changelog-cli": "^2.2.2",
     "eslint": "^7.2.0",
@@ -73,8 +73,8 @@
     "jest": "^26.0.1",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
-    "react": "16.13.1",
-    "react-native": "0.63.4",
+    "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"
@@ -156,5 +156,8 @@
       ]
     ]
   },
-  "dependencies": {}
+  "dependencies": {
+    "@d-i-t-a/reader": "^2.1.4",
+    "use-deep-compare": "^1.1.0"
+  }
 }

package/src/components/ReadiumView.tsx

@@ -7,7 +7,7 @@ import { createFragment, getWidthOrHeightValue as dimension } from '../utils';
 import type { BaseReadiumViewProps } from './BaseReadiumView';
 import { BaseReadiumView } from './BaseReadiumView';
 
-type ReadiumProps = BaseReadiumViewProps;
+export type ReadiumProps = BaseReadiumViewProps;
 
 export const ReadiumView: React.FC<ReadiumProps> = ({
   onLocationChange: wrappedOnLocationChange,
@@ -21,7 +21,7 @@ export const ReadiumView: React.FC<ReadiumProps> = ({
     height: 0,
   });
   // set the view dimensions on layout
-  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}) => {
+  const onLayout = useCallback(({ nativeEvent: { layout: { width, height } }}: any) => {
     setDimensions({
       width: dimension(width),
       height: dimension(height),

package/src/index.web.tsx

@@ -0,0 +1,5 @@
+export * from './enums';
+export * from './interfaces';
+export { RANGES } from './utils';
+
+export { ReadiumView } from './web/ReadiumView';

package/src/web/ReadiumView.tsx

@@ -0,0 +1,97 @@
+import React, { useImperativeHandle } from 'react';
+import type { CSSProperties } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import type { ReadiumProps } from '../components/ReadiumView';
+import {
+  useReaderRef,
+  useSettingsObserver,
+  useLocationObserver,
+} from './hooks';
+
+export const ReadiumView = React.forwardRef<{
+  nextPage: () => void;
+  prevPage: () => void;
+}, ReadiumProps>(({
+  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 as CSSProperties),
+  };
+
+  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/src/web/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useReaderRef';
+export * from './useSettingsObserver';
+export * from './useLocationObserver';

package/src/web/hooks/useLocationObserver.ts

@@ -0,0 +1,21 @@
+import { useDeepCompareEffect } from 'use-deep-compare';
+import type D2Reader from '@d-i-t-a/reader';
+import type { Locator as R2Locator } from '@d-i-t-a/reader';
+
+import type { Link, Locator } from '../../interfaces';
+
+export const useLocationObserver = (
+  reader?: D2Reader | null,
+  location?: Link | Locator | null,
+) => {
+  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 as R2Locator);
+    }
+  }, [
+    location,
+    !!reader,
+  ]);
+};

package/src/web/hooks/useReaderRef.ts

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import D2Reader from '@d-i-t-a/reader';
+
+import type { ReadiumProps } from '../../components/ReadiumView';
+import type { Locator } from '../../interfaces';
+
+export const useReaderRef = ({
+  file,
+  onLocationChange,
+  onTableOfContents,
+}: Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents' >) => {
+  const readerRef = useRef<D2Reader | null>(null);
+
+  useEffect(() => {
+    D2Reader.load({
+      url: new URL(file.url),
+      lastReadingPosition: file.initialLocation,
+      userSettings: { verticalScroll: false },
+      api: {
+        updateCurrentLocation: async (location: Locator) => {
+          if (onLocationChange) onLocationChange(location);
+          return location;
+        },
+      },
+      injectables: injectables,
+    }).then((r) => {
+      if (onTableOfContents) {
+        onTableOfContents(r.tableOfContents);
+      }
+      readerRef.current = r;
+    });
+  }, []);
+
+  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: any[] = [
+  {
+    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/src/web/hooks/useSettingsObserver.ts

@@ -0,0 +1,21 @@
+import { useDeepCompareEffect } from 'use-deep-compare';
+import type D2Reader from '@d-i-t-a/reader';
+import type { UserSettings } from '@d-i-t-a/reader/dist/types/model/user-settings/UserSettings';
+
+import type { Settings } from '../../interfaces';
+
+export const useSettingsObserver = (
+  reader?: D2Reader | null,
+  settings?: Partial<Settings> | null,
+) => {
+  useDeepCompareEffect(() => {
+    if (reader && settings) {
+      // @ts-ignore - FIXME need to do some deeper investigation if these
+      // are equivalent or not
+      reader?.applyUserSettings(settings as Partial<UserSettings>);
+    }
+  }, [
+    settings,
+    !!reader,
+  ]);
+};