feat(web): replace the R2D2BC reader with readium's ts-toolkit

package.json

@@ -147,7 +147,10 @@
     "useTabs": false
   },
   "dependencies": {
-    "@d-i-t-a/reader": "^2.1.4",
+    "@readium/css": "^2.0.0-beta.14",
+    "@readium/navigator": "^2.0.0-beta.6",
+    "@readium/navigator-html-injectables": "^2.0.0-beta.3",
+    "@readium/shared": "^1.2.1",
     "use-deep-compare": "^1.1.0"
   },
   "engines": {

src/components/ReadiumView.web.tsx

@@ -1,11 +1,11 @@
-import React, { useImperativeHandle } from 'react';
+import React, { useImperativeHandle, useRef, 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,
 } from '../../web/hooks';
 
@@ -33,24 +33,25 @@ export const ReadiumView = React.forwardRef<
     },
     ref
   ) => {
-    const readerRef = useReaderRef({
+    const [container, setContainer] = useState<HTMLElement | null>(null);
+    const navigator = useNavigator({
       file,
       onLocationChange,
       onTableOfContents,
+      container,
     });
-    const reader = readerRef.current;
 
     useImperativeHandle(ref, () => ({
       nextPage: () => {
-        readerRef.current?.nextPage();
+        navigator?.goForward(true, () => {});
       },
       prevPage: () => {
-        readerRef.current?.previousPage();
+        navigator?.goBackward(true, () => {});
       },
-    }));
+    }), [navigator]);
 
-    useSettingsObserver(reader, preferences);
-    useLocationObserver(reader, location);
+    usePreferencesObserver(navigator, preferences);
+    useLocationObserver(navigator, location);
 
     const mainStyle = {
       ...styles.maximize,
@@ -61,14 +62,23 @@ export const ReadiumView = React.forwardRef<
     if (width) mainStyle.width = width;
 
     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: 100%;
+            border-width: 0;
+          }
+        `}
+        </style>
+        {!navigator && <div style={loaderStyle}>Loading reader...</div>}
+        <main
+          ref={(el) => setContainer(el)}
+          style={styles.readimContainer}
+          id="readium-container"
+          aria-label="Publication"
+        />
       </View>
     );
   }
@@ -86,11 +96,13 @@ const styles = StyleSheet.create({
   container: {
     width: '100%',
     height: '100%',
+    display: 'flex',
   },
-  d2Container: {
+  readimContainer: {
+    // @ts-ignore
+    contain: 'content',
     width: '100%',
     height: '100%',
-    display: 'flex',
   },
   maximize: {
     width: '100%',

src/interfaces/Link.ts

@@ -3,7 +3,7 @@
  */
 export interface Link {
   href: string;
-  templated: boolean;
+  templated?: boolean;
   type?: string | null;
   title?: string | null;
   rels?: Set<string>;
@@ -13,6 +13,7 @@ export interface Link {
   bitrate?: number | null;
   duration?: number | null;
   languages?: string[];
-  alternates?: Link[];
-  children?: Link[];
+  // FIXME: move to readium's model
+  // alternates?: Link[];
+  // children?: Link[];
 }

tsconfig.json

@@ -18,7 +18,7 @@
     "module": "esnext",
     "skipLibCheck": true
   },
-  "include": ["src", "dita.d.ts"],
+  "include": ["src"],
   "exclude": [
     "**/__tests__/*",
     "example"

web/hooks/index.ts

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

web/hooks/useLocationObserver.ts

@@ -1,21 +1,23 @@
 import { useDeepCompareEffect } from 'use-deep-compare';
+import { EpubNavigator } from '@readium/navigator';
 
 import type { Link, Locator } from '../../src/interfaces';
 
 export const useLocationObserver = (
-  reader?: D2Reader | null,
+  navigator?: EpubNavigator | null,
   location?: Link | Locator | null
 ) => {
   useDeepCompareEffect(() => {
-    if (reader && location) {
+    if (navigator && 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);
+      // @ts-ignore
+      navigator.go(location, true, () => { });
     }
   }, [
     location?.href,
     //@ts-ignore
     location?.locations,
-    !!reader,
+    !!navigator,
   ]);
 };

web/hooks/useNavigator.ts

@@ -0,0 +1,149 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { BasicTextSelection, FrameClickEvent } from "@readium/navigator-html-injectables";
+import { EpubNavigator, EpubNavigatorListeners } from "@readium/navigator";
+import { Locator, Manifest, Publication } from "@readium/shared";
+import { Fetcher } from "@readium/shared";
+import { HttpFetcher } from "@readium/shared";
+import { Link } from "@readium/shared";
+
+import type { ReadiumProps } from '../../src/components/ReadiumView';
+
+interface RefProps extends Pick<ReadiumProps, 'file' | 'onLocationChange' | 'onTableOfContents'> {
+  container: HTMLElement | null;
+}
+
+export const useNavigator = ({
+  file,
+  onLocationChange,
+  onTableOfContents,
+  container,
+}: RefProps) => {
+  const [navigator, setNavigator] = useState<EpubNavigator | null>(null);
+  const readingOrder = useRef<Locator[]>([]);
+
+  const onLocationChangeWithTotalProgression = useCallback(
+    (newLocation: Locator) => {
+      if (
+        !onLocationChange ||
+        !readingOrder.current ||
+        !newLocation.locations
+      ) {
+        return;
+      }
+      if (!newLocation.locations.totalProgression) {
+        const newLocationIndex = readingOrder.current.findIndex(
+          (entry) => entry.href === newLocation.href
+        );
+        if (newLocationIndex < 0 || !readingOrder.current[newLocationIndex]) {
+          return;
+        }
+        const readingOrderCount = readingOrder.current.length;
+        const chapterTotalProgression =
+          readingOrder.current[newLocationIndex].locations?.totalProgression ||
+          0;
+
+        const newLocationProgression = newLocation.locations.progression || 0;
+        const intraChapterTotalProgression =
+          newLocationProgression / readingOrderCount;
+        newLocation.locations.totalProgression =
+          chapterTotalProgression + intraChapterTotalProgression;
+      }
+      onLocationChange(newLocation);
+    },
+    [onLocationChange]
+  );
+
+  useEffect(() => {
+    async function run() {
+      if (!container) return;
+      const publicationURL = file.url;
+      const manifestLink = new Link({ href: "manifest.json" });
+      const fetcher: Fetcher = new HttpFetcher(undefined, publicationURL);
+      const fetched = fetcher.get(manifestLink);
+      const selfLink = (await fetched.link()).toURL(publicationURL)!;
+
+      const response = await fetched.readAsJSON();
+      (response as any).links = [{
+        rel: 'self',
+        href: publicationURL + '/manifest.json',
+        type: 'application/webpub+json',
+      }];
+      const manifest = Manifest.deserialize(response as string)!;
+      manifest.setSelfLink(selfLink);
+      const publication = new Publication({ manifest: manifest, fetcher: fetcher });
+
+
+      const listeners: EpubNavigatorListeners = {
+        frameLoaded: function (_wnd: Window): void {
+          console.log(">>>>>>>> frameLoaded");
+        },
+        positionChanged: function (_locator: Locator): void {
+          console.log(">>>>>>>> positionChanged", _locator);
+          window.focus();
+        },
+        tap: function (_e: FrameClickEvent): boolean {
+          console.log(">>>>>>>> tap");
+          return false;
+        },
+        click: function (_e: FrameClickEvent): boolean {
+          console.log(">>>>>>>> click");
+          return false;
+        },
+        zoom: function (_scale: number): void {
+          console.log(">>>>>>>> zoom");
+        },
+        miscPointer: function (_amount: number): void {
+          console.log(">>>>>>>> miscPointer");
+        },
+
+        customEvent: function (_key: string, _data: unknown): void {
+        },
+        handleLocator: function (locator: Locator): boolean {
+          const href = locator.href;
+          if (href.startsWith("http://") ||
+            href.startsWith("https://") ||
+            href.startsWith("mailto:") ||
+            href.startsWith("tel:")) {
+            if (confirm(`Open "${href}" ?`))
+              window.open(href, "_blank");
+          } else {
+            console.warn("Unhandled locator", locator);
+          }
+          return false;
+        },
+        textSelected: function (_selection: BasicTextSelection): void {
+          throw new Error('Function not implemented.');
+        }
+      }
+
+      const readingOrder = (response as any).readingOrder;
+      const positions = readingOrder.map((p: any, idx: number) => {
+        p.locations = {
+          position: idx,
+          progression: (idx + 1 / readingOrder.length)
+        }
+        return p;
+      });
+
+      const nav = new EpubNavigator(
+        container,
+        publication,
+        listeners,
+        positions,
+        positions[0],
+      );
+      await nav.load();
+      if (onTableOfContents && publication.tableOfContents) {
+        console.log(">>>>>>> publication.tableOfContents", publication.tableOfContents);
+        const links = publication.tableOfContents.items;
+        onTableOfContents(links);
+      }
+
+      setNavigator(nav);
+    }
+    run();
+  }, [file.url, container]);
+
+  return navigator;
+};

web/hooks/usePreferencesObserver.ts

@@ -0,0 +1,16 @@
+import { useDeepCompareEffect } from 'use-deep-compare';
+
+import { EpubNavigator, EpubPreferences } from "@readium/navigator";
+
+// import type { Preferences } from '../../src/interfaces';
+
+export const usePreferencesObserver = (
+  navigator?: EpubNavigator | null,
+  preferences?: EpubPreferences | null
+) => {
+  useDeepCompareEffect(() => {
+    if (navigator && preferences) {
+      navigator?.submitPreferences(preferences);
+    }
+  }, [preferences, !!navigator]);
+};