react-native-readium 4.0.2 → 5.0.0-rc.1

package/src/components/ReadiumView.tsx

@@ -1,108 +1,78 @@
 import React, {
   useCallback,
   useState,
-  useEffect,
   forwardRef,
   useRef,
-  useMemo,
+  useImperativeHandle,
 } from 'react';
-import { View, Platform, findNodeHandle, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { callback } from 'react-native-nitro-modules';
 
-import type {
-  BaseReadiumViewProps,
-  Dimensions,
-  Preferences,
-} from '../interfaces';
-import { createFragment, getWidthOrHeightValue as dimension } from '../utils';
-import { BaseReadiumView } from './BaseReadiumView';
+import type { Dimensions } from '../interfaces';
+import { NitroReadiumView } from './NitroReadiumView';
+export type { ReadiumViewRef, ReadiumProps } from './ReadiumView.types';
+import type { ReadiumViewRef, ReadiumProps } from './ReadiumView.types';
 
-export type ReadiumProps = Omit<BaseReadiumViewProps, 'preferences'> & {
-  preferences: Preferences;
-};
-
-export const ReadiumView: React.FC<ReadiumProps> = forwardRef(
+export const ReadiumView = forwardRef<ReadiumViewRef, ReadiumProps>(
   (
     {
-      onLocationChange: wrappedOnLocationChange,
-      onTableOfContents: wrappedOnTableOfContents,
+      onLocationChange,
+      onPublicationReady,
+      onDecorationActivated,
+      onSelectionChange,
+      onSelectionAction,
       preferences,
+      decorations,
+      selectionActions,
       ...props
     },
     forwardedRef
   ) => {
-    const defaultRef = useRef<any>(null);
+    const nativeRef = useRef<any>(null);
     const [{ height, width }, setDimensions] = useState<Dimensions>({
       width: 0,
       height: 0,
     });
 
-    // set the view dimensions on layout
     const onLayout = useCallback(
       ({
         nativeEvent: {
-          layout: { width, height },
+          layout: { width: layoutWidth, height: layoutHeight },
         },
       }: any) => {
         setDimensions({
-          width: dimension(width),
-          height: dimension(height),
+          width: layoutWidth,
+          height: layoutHeight,
         });
       },
       []
     );
 
-    // wrap the native onLocationChange and extract the raw event value
-    const onLocationChange = useCallback(
-      (event: any) => {
-        if (wrappedOnLocationChange) {
-          wrappedOnLocationChange(event.nativeEvent);
-        }
-      },
-      [wrappedOnLocationChange]
-    );
+    const noop = () => {};
 
-    const onTableOfContents = useCallback(
-      (event: any) => {
-        if (wrappedOnTableOfContents) {
-          const toc = event.nativeEvent.toc || null;
-          wrappedOnTableOfContents(toc);
-        }
-      },
-      [wrappedOnTableOfContents]
-    );
-
-    // create the view fragment on android
-    useEffect(() => {
-      if (Platform.OS === 'android' && defaultRef.current) {
-        const viewId = findNodeHandle(defaultRef.current);
-        createFragment(viewId);
-      }
-    }, []);
-
-    // assign the forwarded ref
-    useEffect(() => {
-      if (forwardedRef && 'current' in forwardedRef) {
-        forwardedRef.current = defaultRef.current;
-      } else if (forwardedRef) {
-        forwardedRef(defaultRef);
-      }
-    }, [defaultRef.current !== null]);
-
-    const stringifiedPreferences = useMemo(
-      () => JSON.stringify(preferences),
-      [preferences]
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        goForward: () => nativeRef.current?.goForward(),
+        goBackward: () => nativeRef.current?.goBackward(),
+      }),
+      []
     );
 
     return (
       <View style={styles.container} onLayout={onLayout}>
-        <BaseReadiumView
-          height={height}
-          width={width}
+        <NitroReadiumView
+          style={{ width, height }}
           {...props}
-          preferences={stringifiedPreferences}
-          onLocationChange={onLocationChange}
-          onTableOfContents={onTableOfContents}
-          ref={defaultRef}
+          preferences={preferences}
+          decorations={decorations}
+          selectionActions={selectionActions}
+          onLocationChange={callback(onLocationChange ?? noop)}
+          onPublicationReady={callback(onPublicationReady ?? noop)}
+          onDecorationActivated={callback(onDecorationActivated ?? noop)}
+          onSelectionChange={callback(onSelectionChange ?? noop)}
+          onSelectionAction={callback(onSelectionAction ?? noop)}
+          ref={nativeRef}
         />
       </View>
     );

package/src/components/ReadiumView.types.ts

@@ -0,0 +1,30 @@
+import type {
+  Preferences,
+  Locator,
+  File,
+  DecorationGroup,
+  SelectionAction,
+  PublicationReadyEvent,
+  DecorationActivatedEvent,
+  SelectionEvent,
+  SelectionActionEvent,
+} from '../interfaces';
+
+export type ReadiumViewRef = {
+  goForward: () => void;
+  goBackward: () => void;
+};
+
+export type ReadiumProps = {
+  file: File;
+  location?: Locator;
+  preferences: Preferences;
+  decorations?: DecorationGroup[];
+  selectionActions?: SelectionAction[];
+  style?: any;
+  onLocationChange?: (locator: Locator) => void;
+  onPublicationReady?: (event: PublicationReadyEvent) => void;
+  onDecorationActivated?: (event: DecorationActivatedEvent) => void;
+  onSelectionChange?: (event: SelectionEvent) => void;
+  onSelectionAction?: (event: SelectionActionEvent) => void;
+};

package/src/components/ReadiumView.web.tsx

@@ -1,56 +1,118 @@
-import React, { useImperativeHandle } from 'react';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import type { BaseReadiumViewProps, Preferences } from '../interfaces';
 import {
-  useReaderRef,
-  useSettingsObserver,
+  useNavigator,
+  usePreferencesObserver,
   useLocationObserver,
+  useDecorationsObserver,
 } from '../../web/hooks';
+import type { ReadiumProps as BaseReadiumProps, ReadiumViewRef as BaseReadiumViewRef } from './ReadiumView.types';
 
-export type ReadiumProps = Omit<BaseReadiumViewProps, 'preferences'> & {
-  preferences: Preferences;
+export type ReadiumProps = BaseReadiumProps & {
+  height?: number;
+  width?: number;
 };
 
-export const ReadiumView = React.forwardRef<
-  {
-    nextPage: () => void;
-    prevPage: () => void;
-  },
-  ReadiumProps
->(
+export type ReadiumViewRef = BaseReadiumViewRef & {
+  /** @deprecated Use goForward() */
+  nextPage: () => void;
+  /** @deprecated Use goBackward() */
+  prevPage: () => void;
+};
+
+export const ReadiumView = React.forwardRef<ReadiumViewRef, ReadiumProps>(
   (
     {
       file,
       preferences,
       location,
+      decorations,
       onLocationChange,
-      onTableOfContents,
+      onPublicationReady,
+      onDecorationActivated,
       style = {},
       height,
       width,
     },
     ref
   ) => {
-    const readerRef = useReaderRef({
+    const [container, setContainer] = useState<HTMLElement | null>(null);
+    const [currentPosition, setCurrentPosition] = useState<number | null>(null);
+
+    // Convert DecorationGroup[] to DecorationGroups record for web hooks
+    const decorationsRecord = decorations
+      ? Object.fromEntries(decorations.map((g) => [g.name, g.decorations]))
+      : undefined;
+
+    const { navigator, positions } = useNavigator({
       file,
       onLocationChange,
-      onTableOfContents,
+      onPublicationReady,
+      container,
+      onPositionChange: setCurrentPosition,
     });
-    const reader = readerRef.current;
 
-    useImperativeHandle(ref, () => ({
-      nextPage: () => {
-        readerRef.current?.nextPage();
-      },
-      prevPage: () => {
-        readerRef.current?.previousPage();
-      },
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        goForward: () => {
+          navigator?.goForward(true, () => {});
+        },
+        goBackward: () => {
+          navigator?.goBackward(true, () => {});
+        },
+        /** @deprecated Use goForward() */
+        nextPage: () => {
+          navigator?.goForward(true, () => {});
+        },
+        /** @deprecated Use goBackward() */
+        prevPage: () => {
+          navigator?.goBackward(true, () => {});
+        },
+      }),
+      [navigator]
+    );
+
+    usePreferencesObserver(navigator, preferences);
+    useLocationObserver(navigator, location);
+    useDecorationsObserver(navigator, decorationsRecord, onDecorationActivated);
+
+    // Generate position label text
+    const positionLabel =
+      currentPosition && positions.length > 0
+        ? `${currentPosition} / ${positions.length}`
+        : null;
+
+    // Manage position label as a child of the readium-container
+    useEffect(() => {
+      if (!container) return;
 
-    useSettingsObserver(reader, preferences);
-    useLocationObserver(reader, location);
+      const existingLabel = container.querySelector('.position-label');
+
+      if (positionLabel) {
+        if (!existingLabel) {
+          const label = document.createElement('div');
+          label.className = 'position-label';
+          label.setAttribute('aria-live', 'polite');
+          label.textContent = positionLabel;
+          container.appendChild(label);
+        } else {
+          existingLabel.textContent = positionLabel;
+        }
+      } else if (existingLabel) {
+        existingLabel.remove();
+      }
+
+      // Cleanup function
+      return () => {
+        const label = container.querySelector('.position-label');
+        if (label) {
+          label.remove();
+        }
+      };
+    }, [container, positionLabel, currentPosition, positions.length]);
 
     const mainStyle = {
       ...styles.maximize,
@@ -60,15 +122,61 @@ export const ReadiumView = React.forwardRef<
     if (height) mainStyle.height = height;
     if (width) mainStyle.width = width;
 
+    // Determine theme colors based on preferences
+    const getThemeColors = () => {
+      const theme = preferences?.theme;
+      switch (theme) {
+        case 'dark':
+          return { background: '#000000', text: '#ffffff' };
+        case 'sepia':
+          return { background: '#f4ecd8', text: '#5f4b32' };
+        case 'light':
+        default:
+          return { background: '#ffffff', text: '#000000' };
+      }
+    };
+
+    const themeColors = getThemeColors();
+
     return (
-      <View style={styles.container}>
-        {!reader && <div style={loaderStyle}>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={loaderStyle} />
-            <div id="reader-error" className="error" />
-          </main>
-        </div>
+      <View style={styles.container} id="wrapper">
+        <style type="text/css">
+          {`
+          .readium-navigator-iframe {
+            width: 100%;
+            height: calc(100% - 50px);
+            border-width: 0;
+          }
+
+          #readium-container {
+            position: relative;
+            padding-bottom: ${positionLabel ? '50px' : '0px'};
+            box-sizing: border-box;
+            background-color: ${themeColors.background};
+          }
+
+          .position-label {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 14px;
+            color: ${themeColors.text};
+            background: transparent;
+            padding: 5px 10px;
+            z-index: 1000;
+            pointer-events: none;
+            user-select: none;
+          }
+        `}
+        </style>
+        {!navigator && <div style={loaderStyle}>Loading reader...</div>}
+        <main
+          ref={(el) => setContainer(el)}
+          style={styles.readiumContainer}
+          id="readium-container"
+          aria-label="Publication"
+        />
       </View>
     );
   }
@@ -86,11 +194,15 @@ const styles = StyleSheet.create({
   container: {
     width: '100%',
     height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  d2Container: {
+  readiumContainer: {
+    // @ts-ignore
+    contain: 'content',
     width: '100%',
     height: '100%',
-    display: 'flex',
   },
   maximize: {
     width: '100%',

package/src/index.tsx

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

package/src/interfaces/Decoration.ts

@@ -0,0 +1,15 @@
+export type {
+  DecorationStyle,
+  Decoration,
+  DecorationGroup,
+  DecorationActivatedEvent,
+} from '../specs/ReadiumView.nitro';
+
+import type { Decoration } from '../specs/ReadiumView.nitro';
+
+/**
+ * @deprecated Use DecorationGroup[] instead
+ */
+export type DecorationGroups = {
+  [groupName: string]: Decoration[];
+};

package/src/interfaces/File.ts

@@ -1,14 +1,6 @@
-import type { Link } from './Link';
-import type { Locator } from './Locator';
+export type { ReadiumFile } from '../specs/ReadiumView.nitro';
 
-export interface File {
-  /**
-   * A string path to an eBook on disk.
-   */
-  url: string;
-
-  /**
-   * An optional location that the eBook will be opened at.
-   */
-  initialLocation?: Locator | Link;
-}
+/**
+ * @deprecated Use ReadiumFile instead
+ */
+export type { ReadiumFile as File } from '../specs/ReadiumView.nitro';

package/src/interfaces/Link.ts

@@ -1,18 +1,9 @@
+import type { Link as SpecLink } from '../specs/ReadiumView.nitro';
+
 /**
  * An interface representing the Readium Link object.
+ * Extends the Nitro spec Link with an optional properties bag.
  */
-export interface Link {
-  href: string;
-  templated: boolean;
-  type?: string | null;
-  title?: string | null;
-  rels?: Set<string>;
+export interface Link extends SpecLink {
   properties?: any;
-  height?: number | null;
-  width?: number | null;
-  bitrate?: number | null;
-  duration?: number | null;
-  languages?: string[];
-  alternates?: Link[];
-  children?: Link[];
 }

package/src/interfaces/Locator.ts

@@ -1,14 +1,5 @@
-/**
- * An interface representing the Readium Locator object.
- */
-export interface Locator {
-  href: string;
-  type: string;
-  target?: number;
-  title?: string;
-  locations?: {
-    progression: number;
-    position?: number;
-    totalProgression?: number;
-  };
-}
+export type {
+  Locator,
+  LocatorLocations,
+  LocatorText,
+} from '../specs/ReadiumView.nitro';

package/src/interfaces/Preferences.ts

@@ -1,5 +1,19 @@
-export interface Preferences {
-  backgroundColor?: number;
+import type { Preferences as SpecPreferences } from '../specs/ReadiumView.nitro';
+
+/**
+ * Preferences with refined string union types for better IDE autocompletion.
+ */
+export interface Preferences
+  extends Omit<
+    SpecPreferences,
+    | 'columnCount'
+    | 'fontFamily'
+    | 'imageFilter'
+    | 'readingProgression'
+    | 'spread'
+    | 'textAlign'
+    | 'theme'
+  > {
   columnCount?: 'auto' | '1' | '2';
   fontFamily?:
     | 'serif'
@@ -10,26 +24,9 @@ export interface Preferences {
     | '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/PublicationMetadata.ts

@@ -0,0 +1,23 @@
+export type {
+  Contributor,
+  Subject,
+  SeriesInfo,
+  BelongsTo,
+  AccessibilityCertification,
+  Accessibility,
+} from '../specs/ReadiumView.nitro';
+
+import type { PublicationMetadata as SpecPublicationMetadata } from '../specs/ReadiumView.nitro';
+
+/**
+ * Publication metadata following Readium Web Publication Manifest spec.
+ * Extends the Nitro spec metadata with @type and conformsTo fields.
+ * @see https://readium.org/webpub-manifest/
+ */
+export interface PublicationMetadata extends SpecPublicationMetadata {
+  /** Type of publication (e.g., "http://schema.org/Book") */
+  '@type'?: string;
+
+  /** Profile(s) this publication conforms to */
+  conformsTo?: string[];
+}

package/src/interfaces/PublicationReady.ts

@@ -0,0 +1 @@
+export type { PublicationReadyEvent } from '../specs/ReadiumView.nitro';

package/src/interfaces/Selection.ts

@@ -0,0 +1 @@
+export type { SelectionEvent } from '../specs/ReadiumView.nitro';

package/src/interfaces/SelectionAction.ts

@@ -0,0 +1,4 @@
+export type {
+  SelectionAction,
+  SelectionActionEvent,
+} from '../specs/ReadiumView.nitro';

package/src/interfaces/index.ts

@@ -1,6 +1,11 @@
-export * from './BaseReadiumViewProps';
+export * from './Decoration';
 export * from './Dimensions';
 export * from './File';
 export * from './Link';
 export * from './Locator';
 export * from './Preferences';
+export * from './PublicationMetadata';
+export * from './PublicationReady';
+export * from './Selection';
+export * from './SelectionAction';
+export type { Rect, Point } from '../specs/ReadiumView.nitro';