react-native-readium 1.0.0-alpha.7 → 1.0.0

package/README.md

@@ -1,6 +1,19 @@
 # react-native-readium
 
-A react-native wrapper for https://readium.org/
+A react-native wrapper for https://readium.org/. At a high level this package
+allows you to do things like:
+
+- Render an ebook view.
+- Register for location changes (as the user pages through the book).
+- Register for the Table of Contents (so that you can display things like chapters in your app)
+- Control settings of the Reader. Things like:
+  - Dark Mode, Light Mode, Sepia Mode
+  - Font Size
+  - Page Margins
+  - More (see the `Settings` documentation in the [API section](#api))
+- Etc. (read on for more details. :book:)
+
+## Overview
 
 - [Installation](#installation)
 - [Usage](#usage)
@@ -40,6 +53,11 @@ yarn add react-native-readium
 Due to the current state of the `Readium` swift libraries you need to manually
 update your `Podfile` ([see more on that here](https://github.com/readium/swift-toolkit/issues/38)).
 
+Additionally, note that the GitHub URL's below are pointing to the `develop`
+branch. [This is currently necessary as a fix for CocoaPods was merged but has
+not yet been released](https://github.com/readium/swift-toolkit/pull/76#issuecomment-1213170966).
+It will land in the next release (after v2.3.0).
+
 ```rb
 # ./ios/Podfile
 ...
@@ -51,9 +69,9 @@ target 'ExampleApp' do
   config = use_native_modules!
   ...
   pod 'GCDWebServer', podspec: 'https://raw.githubusercontent.com/readium/GCDWebServer/a8edee9790ef0995b2cf620ba1a9b5cf146b7221/GCDWebServer.podspec', modular_headers: true
-  pod 'R2Shared', podspec: 'https://raw.githubusercontent.com/readium/swift-toolkit/2.2.0/Support/CocoaPods/ReadiumShared.podspec'
-  pod 'R2Streamer', podspec: 'https://raw.githubusercontent.com/readium/swift-toolkit/2.2.0/Support/CocoaPods/ReadiumStreamer.podspec'
-  pod 'R2Navigator', podspec: 'https://raw.githubusercontent.com/readium/swift-toolkit/2.2.0/Support/CocoaPods/ReadiumNavigator.podspec'
+  pod 'R2Shared', podspec: 'https://raw.githubusercontent.com/readium/swift-toolkit/develop/Support/CocoaPods/ReadiumShared.podspec'
+  pod 'R2Streamer', podspec: 'https://raw.githubusercontent.com/readium/swift-toolkit/develop/Support/CocoaPods/ReadiumStreamer.podspec'
+  pod 'R2Navigator', podspec: 'https://raw.githubusercontent.com/readium/swift-toolkit/develop/Support/CocoaPods/ReadiumNavigator.podspec'
   pod 'Minizip', modular_headers: true
   ...
 end
@@ -65,6 +83,23 @@ Finally, install the pods:
 
 #### Android
 
+You might need to [add `jcenter` if you're getting a build failure on android](https://github.com/readium/kotlin-toolkit/issues/31):
+
+```groovy
+// android/build.gradle
+...
+
+allprojects {
+    repositories {
+        ...
+        // required by react-native-readium https://github.com/readium/kotlin-toolkit/issues/31
+        jcenter()
+    }
+    ...
+}
+...
+```
+
 If you're not using `compileSdkVersion` >= 31 you'll need to update that:
 
 ```groovy
@@ -128,6 +163,7 @@ DRM is not supported at this time. However, there is a clear path to [support it
 | `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. |
 
 ## Contributing
 

package/android/src/main/java/com/reactnativereadium/ReadiumView.kt

@@ -10,6 +10,7 @@ import com.reactnativereadium.reader.BaseReaderFragment
 import com.reactnativereadium.reader.EpubReaderFragment
 import com.reactnativereadium.reader.ReaderViewModel
 import com.reactnativereadium.utils.Dimensions
+import com.reactnativereadium.utils.File
 import org.readium.r2.shared.extensions.toMap
 import org.readium.r2.shared.publication.Locator
 
@@ -17,7 +18,9 @@ class ReadiumView(
   val reactContext: ThemedReactContext
 ) : FrameLayout(reactContext) {
   var dimensions: Dimensions = Dimensions(0,0)
+  var file: File? = null
   var fragment: BaseReaderFragment? = null
+  var isViewInitialized: Boolean = false
 
   fun updateLocation(locator: Locator) : Boolean {
     if (fragment == null) {
@@ -42,9 +45,9 @@ class ReadiumView(
       .replace(this.id, frag, this.id.toString())
       .commit()
 
+    val module = reactContext.getJSModule(RCTEventEmitter::class.java)
     // subscribe to reader events
     frag.channel.receive(frag) { event ->
-      val module = reactContext.getJSModule(RCTEventEmitter::class.java)
       when (event) {
         is ReaderViewModel.Event.LocatorUpdate -> {
           val json = event.locator.toJSON()
@@ -55,6 +58,15 @@ class ReadiumView(
             payload
           )
         }
+        is ReaderViewModel.Event.TableOfContentsLoaded -> {
+          val map = event.toc.map { it.toJSON().toMap() }
+          val payload = Arguments.makeNativeMap(mapOf("toc" to map))
+          module.receiveEvent(
+            this.id.toInt(),
+            ReadiumViewManager.ON_TABLE_OF_CONTENTS,
+            payload
+          )
+        }
       }
     }
   }

package/android/src/main/java/com/reactnativereadium/ReadiumViewManager.kt

@@ -7,6 +7,7 @@ import com.facebook.react.uimanager.annotations.ReactPropGroup
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.reactnativereadium.reader.ReaderService
+import com.reactnativereadium.utils.File
 import kotlinx.coroutines.runBlocking
 import org.json.JSONObject
 import org.readium.r2.shared.publication.Locator
@@ -24,13 +25,44 @@ class ReadiumViewManager(
   }
 
   override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
-    return MapBuilder.builder<String, Any>().put(
-      ON_LOCATION_CHANGE,
-      MapBuilder.of(
-        "phasedRegistrationNames",
-        MapBuilder.of("bubbled", ON_LOCATION_CHANGE)
+    return MapBuilder.builder<String, Any>()
+      .put(
+        ON_LOCATION_CHANGE,
+        MapBuilder.of(
+          "phasedRegistrationNames",
+          MapBuilder.of("bubbled", ON_LOCATION_CHANGE)
+        )
       )
-    ).build()
+      .put(
+        ON_TABLE_OF_CONTENTS,
+        MapBuilder.of(
+          "phasedRegistrationNames",
+          MapBuilder.of("bubbled", ON_TABLE_OF_CONTENTS)
+        )
+      )
+      .build()
+  }
+
+  override fun getCommandsMap(): MutableMap<String, Int> {
+    return MapBuilder.of("create", COMMAND_CREATE)
+  }
+
+  override fun receiveCommand(view: ReadiumView, commandId: String?, args: ReadableArray?) {
+    super.receiveCommand(view, commandId, args)
+    val reactNativeViewId = args!!.getInt(0)
+    val commandIdInt = commandId!!.toInt()
+
+    when (commandIdInt) {
+      COMMAND_CREATE -> {
+        view.isViewInitialized = true
+
+        if (view.file != null) {
+          buildForViewIfReady(view)
+        }
+      }
+      else -> {
+      }
+    }
   }
 
   @ReactProp(name = "file")
@@ -44,11 +76,8 @@ class ReadiumViewManager(
       initialLocation = Locator.fromJSON(JSONObject(locatorMap.toHashMap()))
     }
 
-    runBlocking {
-      svc.openPublication(path, initialLocation) { fragment ->
-        view.addFragment(fragment)
-      }
-    }
+    view.file = File(path, initialLocation)
+    this.buildForViewIfReady(view)
   }
 
   @ReactProp(name = "location")
@@ -75,7 +104,20 @@ class ReadiumViewManager(
     }
   }
 
+  private fun buildForViewIfReady(view: ReadiumView) {
+    var file = view.file
+    if (file != null && view.isViewInitialized) {
+      runBlocking {
+        svc.openPublication(file.path, file.initialLocation) { fragment ->
+          view.addFragment(fragment)
+        }
+      }
+    }
+  }
+
   companion object {
     var ON_LOCATION_CHANGE = "onLocationChange"
+    var ON_TABLE_OF_CONTENTS = "onTableOfContents"
+    var COMMAND_CREATE = 1
   }
 }

package/android/src/main/java/com/reactnativereadium/epub/UserSettings.kt

@@ -2,6 +2,7 @@ package com.reactnativereadium.epub
 
 import android.content.Context
 import android.content.SharedPreferences
+import android.graphics.Color
 import androidx.appcompat.app.AppCompatActivity
 import org.json.JSONArray
 import org.readium.r2.navigator.R2BasicWebView
@@ -79,6 +80,21 @@ class UserSettings(
           is Switchable -> updateSwitchableFromKeyValue(property, key, value)
         }
 
+        // update the resourcePager background to match the newly selected theme
+        if (isPropertyModified && property is Enumerable && property.ref == APPEARANCE_REF) {
+          when (property.index) {
+            0 -> {
+              resourcePager.setBackgroundColor(Color.parseColor("#ffffff"))
+            }
+            1 -> {
+              resourcePager.setBackgroundColor(Color.parseColor("#faf4e8"))
+            }
+            2 -> {
+              resourcePager.setBackgroundColor(Color.parseColor("#000000"))
+            }
+          }
+        }
+
         // apply the changes to the view
         if (isPropertyModified) {
           updateViewCSS(key)

package/android/src/main/java/com/reactnativereadium/reader/BaseReaderFragment.kt

@@ -10,6 +10,7 @@ import org.readium.r2.navigator.*
 import org.readium.r2.shared.publication.Locator
 import com.reactnativereadium.utils.EventChannel
 import kotlinx.coroutines.channels.Channel
+import org.readium.r2.shared.publication.Link
 
 /*
  * Base reader fragment class
@@ -24,37 +25,38 @@ abstract class BaseReaderFragment : Fragment() {
   )
 
   protected abstract val model: ReaderViewModel
-    protected abstract val navigator: Navigator
-
-    override fun onCreate(savedInstanceState: Bundle?) {
-        setHasOptionsMenu(true)
-        super.onCreate(savedInstanceState)
-    }
-
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        super.onViewCreated(view, savedInstanceState)
-
-        val viewScope = viewLifecycleOwner.lifecycleScope
-
-        navigator.currentLocator
-            .onEach { channel.send(ReaderViewModel.Event.LocatorUpdate(it))  }
-            .launchIn(viewScope)
+  protected abstract val navigator: Navigator
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    setHasOptionsMenu(true)
+    super.onCreate(savedInstanceState)
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+
+    val viewScope = viewLifecycleOwner.lifecycleScope
+
+    channel.send(ReaderViewModel.Event.TableOfContentsLoaded(model.publication.tableOfContents))
+    navigator.currentLocator
+      .onEach { channel.send(ReaderViewModel.Event.LocatorUpdate(it)) }
+      .launchIn(viewScope)
+  }
+
+  override fun onHiddenChanged(hidden: Boolean) {
+    super.onHiddenChanged(hidden)
+    setMenuVisibility(!hidden)
+    requireActivity().invalidateOptionsMenu()
+  }
+
+  fun go(locator: Locator, animated: Boolean): Boolean {
+    // don't attempt to navigate if we're already there
+    val currentLocator = navigator.currentLocator.value
+    if (locator.hashCode() == currentLocator.hashCode()) {
+      return true
     }
 
-    override fun onHiddenChanged(hidden: Boolean) {
-        super.onHiddenChanged(hidden)
-        setMenuVisibility(!hidden)
-        requireActivity().invalidateOptionsMenu()
-    }
-
-    fun go(locator: Locator, animated: Boolean): Boolean {
-      // don't attempt to navigate if we're already there
-      val currentLocator = navigator.currentLocator.value
-      if (locator.hashCode() == currentLocator.hashCode()) {
-        return true
-      }
-
-      return navigator.go(locator, animated)
-    }
+    return navigator.go(locator, animated)
+  }
 
 }

package/android/src/main/java/com/reactnativereadium/reader/ReaderViewModel.kt

@@ -20,6 +20,7 @@ import org.readium.r2.shared.publication.services.search.SearchIterator
 import org.readium.r2.shared.publication.services.search.SearchTry
 import org.readium.r2.shared.Search
 import org.readium.r2.shared.UserException
+import org.readium.r2.shared.publication.Link
 import org.readium.r2.shared.util.Try
 
 @OptIn(Search::class, ExperimentalDecorator::class)
@@ -111,6 +112,7 @@ class ReaderViewModel(
         object StartNewSearch : Event()
         class Failure(val error: UserException) : Event()
         class LocatorUpdate(val locator: Locator) : Event()
+        class TableOfContentsLoaded(val toc: List<Link>) : Event()
     }
 
     sealed class FeedbackEvent {

package/android/src/main/java/com/reactnativereadium/utils/File.kt

@@ -0,0 +1,8 @@
+package com.reactnativereadium.utils
+
+import org.readium.r2.shared.publication.Locator
+
+class File(
+  var path: String,
+  var initialLocation: Locator?
+) {}

package/ios/ReadiumView.swift

@@ -37,6 +37,7 @@ class ReadiumView : UIView, Loggable {
     }
   }
   @objc var onLocationChange: RCTDirectEventBlock?
+  @objc var onTableOfContents: RCTDirectEventBlock?
 
   func loadBook(url: String) {
     guard let rootViewController = UIApplication.shared.delegate?.window??.rootViewController else { return }
@@ -99,6 +100,13 @@ class ReadiumView : UIView, Loggable {
 
         if let e = property as? Enumerable {
           e.index = value as! Int
+
+          // synchronize background color
+          if property.reference == ReadiumCSSReference.appearance.rawValue {
+            if let vc = readerViewController as? EPUBViewController {
+              vc.setUIColor(for: property)
+            }
+          }
         } else if let i = property as? Incrementable {
           i.value = value as! Float
         } else if let s = property as? Switchable {
@@ -128,9 +136,7 @@ class ReadiumView : UIView, Loggable {
   private func addViewControllerAsSubview(_ vc: ReaderViewController) {
     vc.publisher.sink(
       receiveValue: { locator in
-        if (self.onLocationChange != nil) {
-          self.onLocationChange!(locator.json)
-        }
+        self.onLocationChange?(locator.json)
       }
     )
     .store(in: &self.subscriptions)
@@ -155,5 +161,11 @@ class ReadiumView : UIView, Loggable {
     rootView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
     rootView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
     rootView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
+
+    self.onTableOfContents?([
+      "toc": vc.publication.tableOfContents.map({ link in
+        return link.json
+      })
+    ])
   }
 }

package/ios/ReadiumViewManager.m

@@ -6,5 +6,6 @@ RCT_EXPORT_VIEW_PROPERTY(file, NSDictionary *)
 RCT_EXPORT_VIEW_PROPERTY(location, NSDictionary *)
 RCT_EXPORT_VIEW_PROPERTY(settings, NSDictionary *)
 RCT_EXPORT_VIEW_PROPERTY(onLocationChange, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onTableOfContents, RCTDirectEventBlock)
 
 @end

package/lib/commonjs/components/BaseReadiumView.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseReadiumView = void 0;
+
+var _reactNative = require("react-native");
+
+var _utils = require("../utils");
+
+const BaseReadiumView = _reactNative.UIManager.getViewManagerConfig(_utils.COMPONENT_NAME) != null ? (0, _reactNative.requireNativeComponent)(_utils.COMPONENT_NAME) : () => {
+  throw new Error(_utils.LINKING_ERROR);
+};
+exports.BaseReadiumView = BaseReadiumView;
+//# sourceMappingURL=BaseReadiumView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["BaseReadiumView.tsx"],"names":["BaseReadiumView","UIManager","getViewManagerConfig","COMPONENT_NAME","Error","LINKING_ERROR"],"mappings":";;;;;;;AAAA;;AAOA;;AAcO,MAAMA,eAAe,GAC1BC,uBAAUC,oBAAV,CAA+BC,qBAA/B,KAAkD,IAAlD,GACI,yCAA6CA,qBAA7C,CADJ,GAEI,MAAM;AACJ,QAAM,IAAIC,KAAJ,CAAUC,oBAAV,CAAN;AACD,CALA","sourcesContent":["import {\n  requireNativeComponent,\n  UIManager,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Settings, Link, Locator, File, } from '../interfaces';\nimport { COMPONENT_NAME, LINKING_ERROR } from '../utils';\n\nexport type BaseReadiumViewProps = {\n  file: File;\n  location?: Locator;\n  settings?: Partial<Settings>;\n  style?: ViewStyle;\n  onLocationChange?: (locator: Locator) => void;\n  onTableOfContents?: (toc: Link[] | null) => void;\n  ref?: any;\n  height?: number;\n  width?: number;\n};\n\nexport const BaseReadiumView =\n  UIManager.getViewManagerConfig(COMPONENT_NAME) != null\n    ? requireNativeComponent<BaseReadiumViewProps>(COMPONENT_NAME)\n    : () => {\n        throw new Error(LINKING_ERROR);\n      };\n"]}

package/lib/commonjs/components/ReadiumView.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReadiumView = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _interfaces = require("../interfaces");
+
+var _utils = require("../utils");
+
+var _BaseReadiumView = require("./BaseReadiumView");
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const ReadiumView = _ref => {
+  let {
+    onLocationChange: wrappedOnLocationChange,
+    onTableOfContents: wrappedOnTableOfContents,
+    settings: unmappedSettings,
+    ...props
+  } = _ref;
+  const ref = (0, _react.useRef)(null);
+  const [{
+    height,
+    width
+  }, setDimensions] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  }); // set the view dimensions on layout
+
+  const onLayout = (0, _react.useCallback)(_ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref2;
+    setDimensions({
+      width: (0, _utils.getWidthOrHeightValue)(width),
+      height: (0, _utils.getWidthOrHeightValue)(height)
+    });
+  }, []); // wrap the native onLocationChange and extract the raw event value
+
+  const onLocationChange = (0, _react.useCallback)(event => {
+    if (wrappedOnLocationChange) {
+      wrappedOnLocationChange(event.nativeEvent);
+    }
+  }, [wrappedOnLocationChange]);
+  const onTableOfContents = (0, _react.useCallback)(event => {
+    if (wrappedOnTableOfContents) {
+      const toc = event.nativeEvent.toc || null;
+      wrappedOnTableOfContents(toc);
+    }
+  }, [wrappedOnTableOfContents]);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS === 'android') {
+      const viewId = (0, _reactNative.findNodeHandle)(ref.current);
+      (0, _utils.createFragment)(viewId);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container,
+    onLayout: onLayout
+  }, /*#__PURE__*/_react.default.createElement(_BaseReadiumView.BaseReadiumView, _extends({
+    height: height,
+    width: width
+  }, props, {
+    onLocationChange: onLocationChange,
+    onTableOfContents: onTableOfContents,
+    settings: unmappedSettings ? _interfaces.Settings.map(unmappedSettings) : undefined,
+    ref: ref
+  })));
+};
+
+exports.ReadiumView = ReadiumView;
+
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%'
+  }
+});
+//# sourceMappingURL=ReadiumView.js.map

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

@@ -0,0 +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"]}

package/lib/commonjs/index.js

@@ -4,13 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  ReadiumView: true
+  RANGES: true
 };
-exports.ReadiumView = void 0;
+Object.defineProperty(exports, "RANGES", {
+  enumerable: true,
+  get: function () {
+    return _utils.RANGES;
+  }
+});
 
-var _react = _interopRequireWildcard(require("react"));
+var _enums = require("./enums");
 
-var _reactNative = require("react-native");
+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");
 
@@ -26,80 +41,19 @@ Object.keys(_interfaces).forEach(function (key) {
   });
 });
 
-var _enums = require("./enums");
+var _utils = require("./utils");
 
-Object.keys(_enums).forEach(function (key) {
+var _ReadiumView = require("./components/ReadiumView");
+
+Object.keys(_ReadiumView).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;
+  if (key in exports && exports[key] === _ReadiumView[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _enums[key];
+      return _ReadiumView[key];
     }
   });
 });
-
-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; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const LINKING_ERROR = `The package 'react-native-readium' doesn't seem to be linked. Make sure: \n\n` + _reactNative.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';
-const ComponentName = 'ReadiumView';
-const BaseReadiumView = _reactNative.UIManager.getViewManagerConfig(ComponentName) != null ? (0, _reactNative.requireNativeComponent)(ComponentName) : () => {
-  throw new Error(LINKING_ERROR);
-};
-
-const ReadiumView = _ref => {
-  let {
-    onLocationChange: wrappedOnLocationChange,
-    settings: unmappedSettings,
-    ...props
-  } = _ref;
-  const [{
-    height,
-    width
-  }, setDimensions] = (0, _react.useState)({
-    width: 0,
-    height: 0
-  });
-  const onLocationChange = (0, _react.useCallback)(event => {
-    if (wrappedOnLocationChange) {
-      wrappedOnLocationChange(event.nativeEvent);
-    }
-  }, [wrappedOnLocationChange]);
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      width: '100%',
-      height: '100%'
-    },
-    onLayout: _ref2 => {
-      let {
-        nativeEvent: {
-          layout: {
-            width,
-            height
-          }
-        }
-      } = _ref2;
-      setDimensions({
-        width: _reactNative.Platform.OS === 'android' ? _reactNative.PixelRatio.getPixelSizeForLayoutSize(width) : width,
-        height: _reactNative.Platform.OS === 'android' ? _reactNative.PixelRatio.getPixelSizeForLayoutSize(height) : height
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(BaseReadiumView, _extends({
-    height: height,
-    width: width
-  }, props, {
-    onLocationChange: onLocationChange,
-    settings: unmappedSettings ? _interfaces.Settings.map(unmappedSettings) : undefined
-  })));
-};
-
-exports.ReadiumView = ReadiumView;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["LINKING_ERROR","Platform","select","ios","default","ComponentName","BaseReadiumView","UIManager","getViewManagerConfig","Error","ReadiumView","onLocationChange","wrappedOnLocationChange","settings","unmappedSettings","props","height","width","setDimensions","event","nativeEvent","layout","OS","PixelRatio","getPixelSizeForLayoutSize","Settings","map","undefined"],"mappings":";;;;;;;;;;AAAA;;AACA;;AAUA;;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AADA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;AAGA,MAAMA,aAAa,GAChB,+EAAD,GACAC,sBAASC,MAAT,CAAgB;AAAEC,EAAAA,GAAG,EAAE,gCAAP;AAAyCC,EAAAA,OAAO,EAAE;AAAlD,CAAhB,CADA,GAEA,sDAFA,GAGA,6CAJF;AAiBA,MAAMC,aAAa,GAAG,aAAtB;AAEA,MAAMC,eAAe,GACnBC,uBAAUC,oBAAV,CAA+BH,aAA/B,KAAiD,IAAjD,GACI,yCAAqCA,aAArC,CADJ,GAEI,MAAM;AACJ,QAAM,IAAII,KAAJ,CAAUT,aAAV,CAAN;AACD,CALP;;AAOO,MAAMU,WAAmC,GAAG,QAI7C;AAAA,MAJ8C;AAClDC,IAAAA,gBAAgB,EAAEC,uBADgC;AAElDC,IAAAA,QAAQ,EAAEC,gBAFwC;AAGlD,OAAGC;AAH+C,GAI9C;AAEJ,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;AAIA,QAAML,gBAAgB,GAAG,wBAAaQ,KAAD,IAAgB;AACnD,QAAIP,uBAAJ,EAA6B;AAC3BA,MAAAA,uBAAuB,CAACO,KAAK,CAACC,WAAP,CAAvB;AACD;AACF,GAJwB,EAItB,CAACR,uBAAD,CAJsB,CAAzB;AAMA,sBACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAE;AAAEK,MAAAA,KAAK,EAAE,MAAT;AAAiBD,MAAAA,MAAM,EAAE;AAAzB,KADT;AAEE,IAAA,QAAQ,EAAE,SAAmD;AAAA,UAAlD;AAAEI,QAAAA,WAAW,EAAE;AAAEC,UAAAA,MAAM,EAAE;AAAEJ,YAAAA,KAAF;AAASD,YAAAA;AAAT;AAAV;AAAf,OAAkD;AAC3DE,MAAAA,aAAa,CAAC;AACZD,QAAAA,KAAK,EAAEhB,sBAASqB,EAAT,KAAgB,SAAhB,GAA4BC,wBAAWC,yBAAX,CAAqCP,KAArC,CAA5B,GAA0EA,KADrE;AAEZD,QAAAA,MAAM,EAAEf,sBAASqB,EAAT,KAAgB,SAAhB,GAA4BC,wBAAWC,yBAAX,CAAqCR,MAArC,CAA5B,GAA2EA;AAFvE,OAAD,CAAb;AAID;AAPH,kBASE,6BAAC,eAAD;AACE,IAAA,MAAM,EAAEA,MADV;AAEE,IAAA,KAAK,EAAEC;AAFT,KAGMF,KAHN;AAIE,IAAA,gBAAgB,EAAEJ,gBAJpB;AAKE,IAAA,QAAQ,EAAEG,gBAAgB,GAAGW,qBAASC,GAAT,CAAaZ,gBAAb,CAAH,GAAoCa;AALhE,KATF,CADF;AAmBD,CAnCM","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport {\n  requireNativeComponent,\n  UIManager,\n  Platform,\n  ViewStyle,\n  View,\n  PixelRatio,\n} from 'react-native';\n\nimport type { Locator, File, Dimensions } from './interfaces';\nimport { Settings } from './interfaces';\n\nexport * from './enums';\nexport * from './interfaces';\n\nconst LINKING_ERROR =\n  `The package 'react-native-readium' doesn't seem to be linked. Make sure: \\n\\n` +\n  Platform.select({ ios: \"- You have run 'pod install'\\n\", default: '' }) +\n  '- You rebuilt the app after installing the package\\n' +\n  '- You are not using Expo managed workflow\\n';\n\ntype ReadiumProps = {\n  file: File;\n  location?: Locator;\n  settings?: Partial<Settings>;\n  style?: ViewStyle;\n  onLocationChange?: (locator: Locator) => void;\n  ref?: any;\n  height?: number;\n  width?: number;\n};\n\nconst ComponentName = 'ReadiumView';\n\nconst BaseReadiumView =\n  UIManager.getViewManagerConfig(ComponentName) != null\n    ? requireNativeComponent<ReadiumProps>(ComponentName)\n    : () => {\n        throw new Error(LINKING_ERROR);\n      };\n\nexport const ReadiumView: React.FC<ReadiumProps> = ({\n  onLocationChange: wrappedOnLocationChange,\n  settings: unmappedSettings,\n  ...props\n}) => {\n\n  const [{ height, width }, setDimensions] = useState<Dimensions>({\n    width: 0,\n    height: 0,\n  });\n  const onLocationChange = useCallback((event: any) => {\n    if (wrappedOnLocationChange) {\n      wrappedOnLocationChange(event.nativeEvent);\n    }\n  }, [wrappedOnLocationChange]);\n\n  return (\n    <View\n      style={{ width: '100%', height: '100%' }}\n      onLayout={({ nativeEvent: { layout: { width, height } }}) => {\n        setDimensions({\n          width: Platform.OS === 'android' ? PixelRatio.getPixelSizeForLayoutSize(width) : width,\n          height: Platform.OS === 'android' ? PixelRatio.getPixelSizeForLayoutSize(height) : height,\n        })\n      }}\n    >\n      <BaseReadiumView\n        height={height}\n        width={width}\n        {...props}\n        onLocationChange={onLocationChange}\n        settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined}\n      />\n    </View>\n  );\n};\n"]}
+{"version":3,"sources":["index.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;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './enums';\nexport * from './interfaces';\nexport { RANGES } from './utils';\nexport * from './components/ReadiumView';\n"]}