react-native-readium 3.0.2 → 4.0.0

package/ios/ReadiumView.swift

@@ -28,9 +28,9 @@ class ReadiumView : UIView, Loggable {
       self.updateLocation()
     }
   }
-  @objc var settings: NSDictionary? = nil {
+  @objc var preferences: NSString? = nil {
     didSet {
-      self.updateUserSettings(settings)
+      self.updatePreferences(preferences)
     }
   }
   @objc var onLocationChange: RCTDirectEventBlock?
@@ -77,40 +77,29 @@ class ReadiumView : UIView, Loggable {
     )
   }
 
-  func updateUserSettings(_ settings: NSDictionary?) {
+  func updatePreferences(_ preferences: NSString?) {
 
     if (readerViewController == nil) {
       // defer setting update as view isn't initialized yet
       return;
     }
 
-    if let navigator = readerViewController!.navigator as? EPUBNavigatorViewController {
-      let userProperties = navigator.userSettings.userProperties
-
-      for property in userProperties.properties {
-        let value = settings?[property.reference]
-
-        if (value == nil) {
-          continue
-        }
-
-        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 {
-          s.on = value as! Bool
-        }
-      }
+    guard let navigator = readerViewController!.navigator as? EPUBNavigatorViewController else {
+      return;
+    }
 
-      navigator.updateUserSettingStyle()
+    guard let preferencesJson = preferences as? String else {
+      print("TODO: handle error. Bad string conversion for preferences")
+      return;
+    }
+
+    do {
+      let preferences = try JSONDecoder().decode(EPUBPreferences.self, from: Data(preferencesJson.utf8))
+      navigator.submitPreferences(preferences)
+    } catch {
+      print(error)
+      print("TODO: handle error. Skipping preferences due to thrown exception")
+      return;
     }
   }
 
@@ -139,12 +128,21 @@ class ReadiumView : UIView, Loggable {
 
     readerViewController = vc
 
-    // if the controller was just instantiated then apply any existing settings
-    if (settings != nil) {
-      self.updateUserSettings(settings)
+    // if the controller was just instantiated then apply any existing preferences
+    if (preferences != nil) {
+      self.updatePreferences(preferences)
+    }
+
+    guard
+      readerViewController != nil,
+      superview?.frame != nil,
+      self.viewController != nil,
+      self.readerViewController != nil
+    else {
+      return
     }
 
-    readerViewController!.view.frame = self.superview!.frame
+    readerViewController!.view.frame = superview!.frame
     self.viewController!.addChild(readerViewController!)
     let rootView = self.readerViewController!.view!
     self.addSubview(rootView)

package/ios/ReadiumViewManager.m

@@ -4,7 +4,7 @@
 
 RCT_EXPORT_VIEW_PROPERTY(file, NSDictionary *)
 RCT_EXPORT_VIEW_PROPERTY(location, NSDictionary *)
-RCT_EXPORT_VIEW_PROPERTY(settings, NSDictionary *)
+RCT_EXPORT_VIEW_PROPERTY(preferences, NSString *)
 RCT_EXPORT_VIEW_PROPERTY(onLocationChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onTableOfContents, RCTDirectEventBlock)
 

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

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

package/lib/src/components/ReadiumView.js

@@ -1,9 +1,8 @@
-import React, { useCallback, useState, useEffect, forwardRef, useRef, } from 'react';
+import React, { useCallback, useState, useEffect, forwardRef, useRef, useMemo, } from 'react';
 import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
-import { Settings } from '../interfaces';
 import { createFragment, getWidthOrHeightValue as dimension } from '../utils';
 import { BaseReadiumView } from './BaseReadiumView';
-export const ReadiumView = forwardRef(({ onLocationChange: wrappedOnLocationChange, onTableOfContents: wrappedOnTableOfContents, settings: unmappedSettings, ...props }, forwardedRef) => {
+export const ReadiumView = forwardRef(({ onLocationChange: wrappedOnLocationChange, onTableOfContents: wrappedOnTableOfContents, preferences, ...props }, forwardedRef) => {
     const defaultRef = useRef(null);
     const [{ height, width }, setDimensions] = useState({
         width: 0,
@@ -44,8 +43,9 @@ export const ReadiumView = forwardRef(({ onLocationChange: wrappedOnLocationChan
             forwardedRef(defaultRef);
         }
     }, [defaultRef.current !== null]);
+    const stringifiedPreferences = useMemo(() => JSON.stringify(preferences), [preferences]);
     return (<View style={styles.container} onLayout={onLayout}>
-        <BaseReadiumView height={height} width={width} {...props} onLocationChange={onLocationChange} onTableOfContents={onTableOfContents} settings={unmappedSettings ? Settings.map(unmappedSettings) : undefined} ref={defaultRef}/>
+        <BaseReadiumView height={height} width={width} {...props} preferences={stringifiedPreferences} onLocationChange={onLocationChange} onTableOfContents={onTableOfContents} ref={defaultRef}/>
       </View>);
 });
 const styles = StyleSheet.create({

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

@@ -1,5 +1,9 @@
 import React from 'react';
-export declare const ReadiumView: React.ForwardRefExoticComponent<Omit<import("..").BaseReadiumViewProps, "ref"> & React.RefAttributes<{
+import type { BaseReadiumViewProps, Preferences } from '../interfaces';
+export type ReadiumProps = Omit<BaseReadiumViewProps, 'preferences'> & {
+    preferences: Preferences;
+};
+export declare const ReadiumView: React.ForwardRefExoticComponent<Omit<ReadiumProps, "ref"> & React.RefAttributes<{
     nextPage: () => void;
     prevPage: () => void;
 }>>;

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

@@ -1,7 +1,7 @@
 import React, { useImperativeHandle } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useReaderRef, useSettingsObserver, useLocationObserver, } from '../../web/hooks';
-export const ReadiumView = React.forwardRef(({ file, settings, location, onLocationChange, onTableOfContents, style = {}, height, width, }, ref) => {
+export const ReadiumView = React.forwardRef(({ file, preferences, location, onLocationChange, onTableOfContents, style = {}, height, width, }, ref) => {
     const readerRef = useReaderRef({
         file,
         onLocationChange,
@@ -16,7 +16,7 @@ export const ReadiumView = React.forwardRef(({ file, settings, location, onLocat
             readerRef.current?.previousPage();
         },
     }));
-    useSettingsObserver(reader, settings);
+    useSettingsObserver(reader, preferences);
     useLocationObserver(reader, location);
     const mainStyle = {
         ...styles.maximize,

package/lib/src/interfaces/BaseReadiumViewProps.d.ts

@@ -1,12 +1,11 @@
 import type { ViewStyle } from 'react-native';
-import type { Settings } from './Settings';
 import type { Link } from './Link';
 import type { Locator } from './Locator';
 import type { File } from './File';
 export type BaseReadiumViewProps = {
     file: File;
     location?: Locator | Link;
-    settings?: Partial<Settings>;
+    preferences?: string;
     style?: ViewStyle;
     onLocationChange?: (locator: Locator) => void;
     onTableOfContents?: (toc: Link[] | null) => void;

package/lib/src/interfaces/Preferences.d.ts

@@ -0,0 +1,27 @@
+export interface Preferences {
+    backgroundColor?: number;
+    columnCount?: 'auto' | '1' | '2';
+    fontFamily?: 'serif' | 'sans-serif' | 'cursive' | 'fantasy' | 'monospace' | 'AccessibleDfA' | 'IA Writer Duospace' | 'OpenDyslexic';
+    fontSize?: number;
+    fontWeight?: number;
+    hyphens?: boolean;
+    imageFilter?: 'darken' | 'invert';
+    language?: string;
+    letterSpacing?: number;
+    ligatures?: boolean;
+    lineHeight?: number;
+    pageMargins?: number;
+    paragraphIndent?: number;
+    paragraphSpacing?: number;
+    publisherStyles?: boolean;
+    readingProgression?: 'ltr' | 'rtl';
+    scroll?: boolean;
+    spread?: 'auto' | 'never' | 'always';
+    textAlign?: 'center' | 'justify' | 'start' | 'end' | 'left' | 'right';
+    textColor?: number;
+    textNormalization?: boolean;
+    theme?: 'light' | 'dark' | 'sepia';
+    typeScale?: number;
+    verticalText?: boolean;
+    wordSpacing?: number;
+}

package/lib/src/interfaces/Preferences.js

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

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

@@ -3,4 +3,4 @@ export * from './Dimensions';
 export * from './File';
 export * from './Link';
 export * from './Locator';
-export * from './Settings';
+export * from './Preferences';

package/lib/src/interfaces/index.js

@@ -3,4 +3,4 @@ export * from './Dimensions';
 export * from './File';
 export * from './Link';
 export * from './Locator';
-export * from './Settings';
+export * from './Preferences';

package/lib/src/utils/RANGES.js

@@ -1,5 +1,5 @@
 export const RANGES = {
-    fontSize: [100.0, 300.0],
+    fontSize: [1.0, 3.0],
     wordSpacing: [0.0, 0.5],
     letterSpacing: [0.0, 0.5],
     pageMargins: [0.5, 4.0],

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

@@ -1,2 +1,2 @@
-import type { Settings } from '../../src/interfaces';
-export declare const useSettingsObserver: (reader?: D2Reader | null, settings?: Partial<Settings> | null) => void;
+import type { Preferences } from '../../src/interfaces';
+export declare const useSettingsObserver: (reader?: D2Reader | null, preferences?: Partial<Preferences> | null) => void;

package/lib/web/hooks/useSettingsObserver.js

@@ -1,10 +1,44 @@
 import { useDeepCompareEffect } from 'use-deep-compare';
-export const useSettingsObserver = (reader, settings) => {
+export const useSettingsObserver = (reader, preferences) => {
     useDeepCompareEffect(() => {
-        if (reader && settings) {
-            // @ts-ignore - FIXME need to do some deeper investigation if these
-            // are equivalent or not
+        if (reader && preferences) {
+            const settings = preferencesToUserSettings(preferences);
             reader?.applyUserSettings(settings);
         }
-    }, [settings, !!reader]);
+    }, [preferences, !!reader]);
+};
+const preferencesToUserSettings = (preferences) => ({
+    appearance: preferences.theme
+        ? themeToUserSettingsAppearance(preferences.theme)
+        : undefined,
+    fontSize: preferences.fontSize ? preferences.fontSize * 100 : undefined,
+    // fontOverride: boolean;
+    // fontFamily: number;
+    verticalScroll: preferences.scroll,
+    columnCount: columnCountToUserSettingsColumnCount(preferences.columnCount),
+    // direction: number;
+    wordSpacing: preferences.wordSpacing,
+    letterSpacing: preferences.letterSpacing,
+    pageMargins: preferences.pageMargins,
+    lineHeight: preferences.lineHeight,
+    // userProperties?: UserProperties;
+    // view: BookView;
+});
+const themeToUserSettingsAppearance = (theme) => {
+    if (theme === 'dark') {
+        return 'night';
+    }
+    if (theme === 'sepia') {
+        return 'sepia';
+    }
+    return 'day';
+};
+const columnCountToUserSettingsColumnCount = (columnCount) => {
+    if (columnCount === '1') {
+        return 1;
+    }
+    if (columnCount === '2') {
+        return 2;
+    }
+    return undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-readium",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "description": "A react-native wrapper for https://readium.org/",
   "main": "lib/src/index",
   "types": "lib/src/index.d.ts",

package/react-native-readium.podspec

@@ -22,4 +22,6 @@ Pod::Spec.new do |s|
   s.dependency "R2Shared"
   s.dependency "R2Streamer"
   s.dependency "R2Navigator"
+  s.dependency "GCDWebServer"
+  s.dependency "ReadiumAdapterGCDWebServer"
 end

package/src/components/ReadiumView.tsx

@@ -4,22 +4,28 @@ import React, {
   useEffect,
   forwardRef,
   useRef,
+  useMemo,
 } from 'react';
 import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
 
-import type { BaseReadiumViewProps, Dimensions } from '../interfaces';
-import { Settings } from '../interfaces';
+import type {
+  BaseReadiumViewProps,
+  Dimensions,
+  Preferences,
+} from '../interfaces';
 import { createFragment, getWidthOrHeightValue as dimension } from '../utils';
 import { BaseReadiumView } from './BaseReadiumView';
 
-export type ReadiumProps = BaseReadiumViewProps;
+export type ReadiumProps = Omit<BaseReadiumViewProps, 'preferences'> & {
+  preferences: Preferences;
+};
 
 export const ReadiumView: React.FC<ReadiumProps> = forwardRef(
   (
     {
       onLocationChange: wrappedOnLocationChange,
       onTableOfContents: wrappedOnTableOfContents,
-      settings: unmappedSettings,
+      preferences,
       ...props
     },
     forwardedRef
@@ -82,17 +88,20 @@ export const ReadiumView: React.FC<ReadiumProps> = forwardRef(
       }
     }, [defaultRef.current !== null]);
 
+    const stringifiedPreferences = useMemo(
+      () => JSON.stringify(preferences),
+      [preferences]
+    );
+
     return (
       <View style={styles.container} onLayout={onLayout}>
         <BaseReadiumView
           height={height}
           width={width}
           {...props}
+          preferences={stringifiedPreferences}
           onLocationChange={onLocationChange}
           onTableOfContents={onTableOfContents}
-          settings={
-            unmappedSettings ? Settings.map(unmappedSettings) : undefined
-          }
           ref={defaultRef}
         />
       </View>

package/src/components/ReadiumView.web.tsx

@@ -2,13 +2,17 @@ import React, { useImperativeHandle } from 'react';
 import type { CSSProperties } from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import type { ReadiumProps } from '../components/ReadiumView';
+import type { BaseReadiumViewProps, Preferences } from '../interfaces';
 import {
   useReaderRef,
   useSettingsObserver,
   useLocationObserver,
 } from '../../web/hooks';
 
+export type ReadiumProps = Omit<BaseReadiumViewProps, 'preferences'> & {
+  preferences: Preferences;
+};
+
 export const ReadiumView = React.forwardRef<
   {
     nextPage: () => void;
@@ -19,7 +23,7 @@ export const ReadiumView = React.forwardRef<
   (
     {
       file,
-      settings,
+      preferences,
       location,
       onLocationChange,
       onTableOfContents,
@@ -45,7 +49,7 @@ export const ReadiumView = React.forwardRef<
       },
     }));
 
-    useSettingsObserver(reader, settings);
+    useSettingsObserver(reader, preferences);
     useLocationObserver(reader, location);
 
     const mainStyle = {

package/src/interfaces/BaseReadiumViewProps.ts

@@ -1,6 +1,4 @@
 import type { ViewStyle } from 'react-native';
-
-import type { Settings } from './Settings';
 import type { Link } from './Link';
 import type { Locator } from './Locator';
 import type { File } from './File';
@@ -8,7 +6,7 @@ import type { File } from './File';
 export type BaseReadiumViewProps = {
   file: File;
   location?: Locator | Link;
-  settings?: Partial<Settings>;
+  preferences?: string; // JSON between native and JS, which we deserialise later
   style?: ViewStyle;
   onLocationChange?: (locator: Locator) => void;
   onTableOfContents?: (toc: Link[] | null) => void;

package/src/interfaces/Preferences.ts

@@ -0,0 +1,35 @@
+export interface Preferences {
+  backgroundColor?: number;
+  columnCount?: 'auto' | '1' | '2';
+  fontFamily?:
+    | 'serif'
+    | 'sans-serif'
+    | 'cursive'
+    | 'fantasy'
+    | 'monospace'
+    | 'AccessibleDfA'
+    | 'IA Writer Duospace'
+    | 'OpenDyslexic';
+  fontSize?: number;
+  fontWeight?: number;
+  hyphens?: boolean;
+  imageFilter?: 'darken' | 'invert';
+  language?: string;
+  letterSpacing?: number;
+  ligatures?: boolean;
+  lineHeight?: number;
+  pageMargins?: number;
+  paragraphIndent?: number;
+  paragraphSpacing?: number;
+  publisherStyles?: boolean;
+  readingProgression?: 'ltr' | 'rtl';
+  scroll?: boolean;
+  spread?: 'auto' | 'never' | 'always';
+  textAlign?: 'center' | 'justify' | 'start' | 'end' | 'left' | 'right';
+  textColor?: number;
+  textNormalization?: boolean;
+  theme?: 'light' | 'dark' | 'sepia';
+  typeScale?: number;
+  verticalText?: boolean;
+  wordSpacing?: number;
+}

package/src/interfaces/index.ts

@@ -3,4 +3,4 @@ export * from './Dimensions';
 export * from './File';
 export * from './Link';
 export * from './Locator';
-export * from './Settings';
+export * from './Preferences';

package/src/utils/RANGES.ts

@@ -1,5 +1,5 @@
 export const RANGES = {
-  fontSize: [100.0, 300.0],
+  fontSize: [1.0, 3.0],
   wordSpacing: [0.0, 0.5],
   letterSpacing: [0.0, 0.5],
   pageMargins: [0.5, 4.0],

package/web/hooks/useSettingsObserver.ts

@@ -1,16 +1,61 @@
 import { useDeepCompareEffect } from 'use-deep-compare';
 
-import type { Settings } from '../../src/interfaces';
+import type { Preferences } from '../../src/interfaces';
 
 export const useSettingsObserver = (
   reader?: D2Reader | null,
-  settings?: Partial<Settings> | null
+  preferences?: Partial<Preferences> | 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<D2UserSettings>);
+    if (reader && preferences) {
+      const settings = preferencesToUserSettings(preferences);
+      reader?.applyUserSettings(settings);
     }
-  }, [settings, !!reader]);
+  }, [preferences, !!reader]);
+};
+
+const preferencesToUserSettings = (
+  preferences: Preferences
+): Partial<D2UserSettings> => ({
+  appearance: preferences.theme
+    ? themeToUserSettingsAppearance(preferences.theme)
+    : undefined,
+  fontSize: preferences.fontSize ? preferences.fontSize * 100 : undefined,
+  // fontOverride: boolean;
+  // fontFamily: number;
+  verticalScroll: preferences.scroll,
+  columnCount: columnCountToUserSettingsColumnCount(preferences.columnCount),
+  // direction: number;
+  wordSpacing: preferences.wordSpacing,
+  letterSpacing: preferences.letterSpacing,
+  pageMargins: preferences.pageMargins,
+  lineHeight: preferences.lineHeight,
+  // userProperties?: UserProperties;
+  // view: BookView;
+});
+
+const themeToUserSettingsAppearance = (theme: Preferences['theme']) => {
+  if (theme === 'dark') {
+    return 'night';
+  }
+
+  if (theme === 'sepia') {
+    return 'sepia';
+  }
+
+  return 'day';
+};
+
+const columnCountToUserSettingsColumnCount = (
+  columnCount: Preferences['columnCount']
+) => {
+  if (columnCount === '1') {
+    return 1;
+  }
+
+  if (columnCount === '2') {
+    return 2;
+  }
+
+  return undefined;
 };