@prose-reader/core 1.130.0 → 1.132.0

package/dist/index.umd.cjs

@@ -406,6 +406,25 @@
       return stream;
     };
   };
+  function idle() {
+    return new rxjs.Observable((observer) => {
+      if (window.requestIdleCallback) {
+        const handle = window.requestIdleCallback(() => {
+          observer.next();
+          observer.complete();
+        });
+        return () => cancelIdleCallback(handle);
+      }
+      const timeout = setTimeout(() => {
+        observer.next();
+        observer.complete();
+      }, 1);
+      return () => clearTimeout(timeout);
+    });
+  }
+  function deferIdle(callback) {
+    return rxjs.defer(() => idle().pipe(operators.switchMap(callback)));
+  }
   const fixReflowable = (reader) => {
     reader.hookManager.register(
       `item.onAfterLayout`,
@@ -449,6 +468,8 @@
         pageHorizontalMargin,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         pageVerticalMargin,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        layoutLayerTransition,
         ...rest
       } = settings;
       return rest;
@@ -457,18 +478,25 @@
       return {
         layoutAutoResize: "container",
         pageHorizontalMargin: 24,
-        pageVerticalMargin: 24
+        pageVerticalMargin: 24,
+        layoutLayerTransition: true
       };
     }
   };
   const layoutEnhancer = (next) => (options) => {
-    const { pageHorizontalMargin, pageVerticalMargin, layoutAutoResize } = options;
+    const {
+      pageHorizontalMargin,
+      pageVerticalMargin,
+      layoutAutoResize,
+      layoutLayerTransition
+    } = options;
     const reader = next(options);
     const settingsManager = new SettingsManager$1(
       {
         pageHorizontalMargin,
         pageVerticalMargin,
-        layoutAutoResize
+        layoutAutoResize,
+        layoutLayerTransition
       },
       reader.settings
     );
@@ -532,7 +560,9 @@
     reader.hookManager.register(`item.onDocumentCreated`, ({ layers }) => {
       layers.forEach(({ element }) => {
         element.style.opacity = `0`;
-        element.style.transition = `opacity 300ms`;
+        if (settingsManager.values.layoutLayerTransition) {
+          element.style.transition = `opacity 300ms`;
+        }
       });
     });
     reader.hookManager.register(`item.onBeforeLayout`, ({ item }) => {
@@ -545,11 +575,6 @@
     });
     const revealItemOnReady$ = reader.spineItemsObserver.itemIsReady$.pipe(
       operators.filter(({ isReady }) => isReady),
-      /**
-       * Make sure that even if the document was loaded instantly, the layout is applied first
-       * and therefore the transition played. eg: pdf are loaded before attached to the dom.
-       */
-      operators.delay(1, rxjs.animationFrameScheduler),
       operators.tap(({ item }) => {
         item.renderer.layers.forEach(({ element }) => {
           element.style.opacity = `1`;
@@ -585,7 +610,22 @@
       }),
       operators.takeUntil(reader.$.destroy$)
     ).subscribe();
-    rxjs.merge(revealItemOnReady$, movingSafePan$, layoutOnContainerResize$).pipe(operators.takeUntil(reader.$.destroy$)).subscribe();
+    const updateSpineItemClassName$ = reader.spineItemsObserver.itemIsReady$.pipe(
+      operators.tap(({ item, isReady }) => {
+        const className = `prose-spineItem-ready`;
+        if (isReady) {
+          item.containerElement.classList.add(className);
+        } else {
+          item.containerElement.classList.remove(className);
+        }
+      })
+    );
+    rxjs.merge(
+      updateSpineItemClassName$,
+      revealItemOnReady$,
+      movingSafePan$,
+      layoutOnContainerResize$
+    ).pipe(operators.takeUntil(reader.$.destroy$)).subscribe();
     return {
       ...reader,
       destroy: () => {
@@ -1474,17 +1514,116 @@
     return { paginationInfo$, getPaginationInfo: () => currentValue.value };
   };
   const NAMESPACE$6 = `paginationEnhancer`;
+  const consolidate = (item, reader) => {
+    var _a;
+    let itemPageIndex = (_a = item.meta) == null ? void 0 : _a.itemPageIndex;
+    const { itemIndex } = reader.cfi.parseCfi(item.cfi);
+    const spineItem = reader.spineItemsManager.get(itemIndex);
+    if (!spineItem) return rxjs.of({ ...item, meta: { ...item.meta, itemIndex } });
+    if (spineItem.item.renditionLayout === `pre-paginated`) {
+      itemPageIndex = 0;
+    }
+    return idle().pipe(
+      rxjs.withLatestFrom(spineItem.isReady$),
+      rxjs.map(([, isSpineItemReady]) => {
+        var _a2, _b, _c;
+        let range = void 0;
+        const { node: startNode, offset: startOffset } = reader.cfi.resolveCfi({ cfi: item.cfi }) ?? {};
+        if (spineItem.item.renditionLayout !== `pre-paginated` && startNode) {
+          itemPageIndex = reader.spine.locator.spineItemLocator.getSpineItemPageIndexFromNode(
+            startNode,
+            startOffset ?? 0,
+            spineItem
+          ) ?? itemPageIndex;
+        }
+        if (startNode && item.endCfi) {
+          const { node: endNode, offset: endOffset } = reader.cfi.resolveCfi({ cfi: item.cfi }) ?? {};
+          if (endNode && isSpineItemReady) {
+            range = (_a2 = startNode == null ? void 0 : startNode.ownerDocument) == null ? void 0 : _a2.createRange();
+            range == null ? void 0 : range.setStart(startNode, startOffset ?? 0);
+            range == null ? void 0 : range.setEnd(endNode, endOffset ?? 0);
+          }
+        }
+        let absolutePageIndex = (_b = item.meta) == null ? void 0 : _b.absolutePageIndex;
+        if (itemPageIndex !== void 0) {
+          absolutePageIndex = reader.spine.locator.getAbsolutePageIndexFromPageIndex({
+            pageIndex: itemPageIndex,
+            spineItemOrId: spineItem
+          }) ?? ((_c = item.meta) == null ? void 0 : _c.absolutePageIndex);
+        }
+        return {
+          ...item,
+          meta: {
+            ...item.meta,
+            range,
+            itemIndex,
+            startNode,
+            startOffset,
+            absolutePageIndex,
+            itemPageIndex
+          }
+        };
+      })
+    );
+  };
+  const createLocator = (reader) => (resources) => {
+    return deferIdle(() => {
+      if (!resources.length)
+        return rxjs.of({ isStale: false, data: resources });
+      const StaleSymbol = Symbol("stale");
+      const markStale$ = reader.layout$.pipe(
+        rxjs.startWith(null),
+        rxjs.map(() => StaleSymbol)
+      );
+      const consolidate$ = reader.layout$.pipe(
+        rxjs.debounceTime(10),
+        rxjs.startWith(null),
+        rxjs.switchScan((acc$) => {
+          return rxjs.forkJoin(
+            acc$.map(
+              (resource) => deferIdle(() => consolidate(resource, reader)).pipe(
+                rxjs.map((value) => value)
+              )
+            )
+          );
+        }, resources)
+      );
+      const run$ = rxjs.merge(markStale$, consolidate$).pipe(
+        rxjs.scan(
+          (acc, value) => {
+            if (value === StaleSymbol) {
+              return {
+                ...acc,
+                isStale: true
+              };
+            }
+            return {
+              isStale: false,
+              data: value
+            };
+          },
+          {
+            isStale: true,
+            data: resources
+          }
+        )
+      );
+      return run$;
+    });
+  };
   Report.namespace(NAMESPACE$6);
   const paginationEnhancer = (next) => (options) => {
     const reader = next(options);
     const { paginationInfo$, getPaginationInfo } = trackPaginationInfo(reader);
     paginationInfo$.pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe();
+    const locate = createLocator(reader);
     return {
       ...reader,
       pagination: {
         ...reader.pagination,
         getState: () => getPaginationInfo(),
-        state$: paginationInfo$
+        state$: paginationInfo$,
+        locate
       }
     };
   };
@@ -4382,19 +4521,6 @@
       })
     );
   };
-  const withPaginationInfo = () => (stream) => {
-    return stream.pipe(
-      rxjs.map(({ navigation, pagination, ...rest }) => {
-        return {
-          navigation: {
-            ...navigation,
-            paginationBeginCfi: pagination.beginCfi
-          },
-          ...rest
-        };
-      })
-    );
-  };
   const withCfiPosition = ({ navigationResolver }) => (stream) => {
     return stream.pipe(
       rxjs.map((params) => {
@@ -4490,6 +4616,52 @@
       })
     );
   };
+  const withPaginationInfo = () => (stream) => {
+    return stream.pipe(
+      rxjs.map(({ navigation, pagination, ...rest }) => {
+        return {
+          navigation: {
+            ...navigation,
+            paginationBeginCfi: pagination.beginCfi
+          },
+          ...rest
+        };
+      })
+    );
+  };
+  const consolidateWithPagination = (context, navigation$, spine) => context.bridgeEvent.pagination$.pipe(
+    rxjs.withLatestFrom(navigation$),
+    rxjs.filter(
+      ([pagination, navigation]) => pagination.navigationId === navigation.id
+    ),
+    /**
+     * We only register the pagination cfi IF the spine item is ready.
+     * Otherwise we might save something incomplete and thus restore
+     * the user to an invalid location.
+     */
+    rxjs.switchMap(([pagination, navigation]) => {
+      const spineItem = spine.spineItemsManager.get(navigation.spineItem);
+      return ((spineItem == null ? void 0 : spineItem.isReady$.pipe(rxjs.first())) ?? rxjs.of(false)).pipe(
+        rxjs.filter((isReady) => isReady),
+        rxjs.map(() => ({
+          pagination,
+          navigation
+        }))
+      );
+    }),
+    withPaginationInfo(),
+    rxjs.distinctUntilChanged(
+      (prev, curr) => prev.navigation.paginationBeginCfi === curr.navigation.paginationBeginCfi
+    ),
+    rxjs.map(
+      ({ navigation }) => ({
+        ...navigation,
+        meta: {
+          triggeredBy: "pagination"
+        }
+      })
+    )
+  );
   const NAMESPACE$1 = `navigation/InternalNavigator`;
   const report = Report.namespace(NAMESPACE$1);
   class InternalNavigator extends DestroyableClass {
@@ -4613,7 +4785,12 @@
       const navigationUpateFromLayout$ = layoutHasChanged$.pipe(
         rxjs.switchMap(() => {
           return rxjs.of(null).pipe(
-            rxjs.switchMap(() => isUserLocked$.pipe(rxjs.filter((isLocked) => !isLocked))),
+            rxjs.switchMap(
+              () => isUserLocked$.pipe(
+                rxjs.filter((isLocked) => !isLocked),
+                rxjs.first()
+              )
+            ),
             rxjs.map(
               () => ({
                 ...this.navigationSubject.getValue(),
@@ -4678,29 +4855,10 @@
         rxjs.map(({ navigation }) => navigation),
         rxjs.share()
       );
-      const navigationUpdateOnPaginationUpdate$ = context.bridgeEvent.pagination$.pipe(
-        rxjs.withLatestFrom(this.navigationSubject),
-        rxjs.filter(
-          ([pagination, navigation]) => pagination.navigationId === navigation.id
-        ),
-        rxjs.map(([pagination, navigation]) => ({
-          pagination,
-          navigation: {
-            ...navigation
-          }
-        })),
-        withPaginationInfo(),
-        rxjs.distinctUntilChanged(
-          (prev, curr) => prev.navigation.paginationBeginCfi === curr.navigation.paginationBeginCfi
-        ),
-        rxjs.map(
-          ({ navigation }) => ({
-            ...navigation,
-            meta: {
-              triggeredBy: "pagination"
-            }
-          })
-        )
+      const navigationUpdateOnPaginationUpdate$ = consolidateWithPagination(
+        context,
+        this.navigationSubject,
+        spine
       );
       const navigationUpdate$ = rxjs.merge(
         navigationRestored$,
@@ -5173,9 +5331,7 @@
         })
       );
       const updateCfi$ = updatePagination$.pipe(
-        rxjs.switchMap(() => this.context.bridgeEvent.viewportState$),
-        rxjs.filter((state) => state === "free"),
-        rxjs.switchMap(() => rxjs.timer(500, rxjs.animationFrameScheduler)),
+        waitForSwitch(this.context.bridgeEvent.viewportFree$),
         rxjs.tap(() => {
           const {
             beginSpineItemIndex,
@@ -5205,14 +5361,9 @@
       rxjs.merge(updatePagination$, updateCfi$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
   }
-  const generateCfiFromRange = ({
-    startNode,
-    start,
-    end,
-    endNode
-  }, item) => {
-    const startCFI = generateCfi(startNode, start, item);
-    const endCFI = generateCfi(endNode, end, item);
+  const generateCfiFromRange = (range, item) => {
+    const startCFI = generateCfi(range.startContainer, range.startOffset, item);
+    const endCFI = generateCfi(range.endContainer, range.endOffset, item);
     return { start: startCFI, end: endCFI };
   };
   const defaultGetResource = (item) => new URL(item.href);
@@ -5342,6 +5493,29 @@
     unload() {
       this.triggerSubject.next({ type: `unload` });
     }
+    renderHeadless() {
+      const releaseSubject = new rxjs.Subject();
+      return rxjs.defer(() => this.onRenderHeadless({ release: releaseSubject })).pipe(
+        rxjs.endWith(void 0),
+        rxjs.first(),
+        rxjs.map((doc) => {
+          if (!doc) return void 0;
+          return {
+            doc,
+            release: () => {
+              releaseSubject.next(void 0);
+            }
+          };
+        }),
+        rxjs.finalize(() => {
+          releaseSubject.complete();
+        }),
+        rxjs.catchError((e) => {
+          Report.error(e);
+          return rxjs.of(void 0);
+        })
+      );
+    }
     destroy() {
       super.destroy();
       this.stateSubject.complete();
@@ -5366,6 +5540,9 @@
     onLayout() {
       return rxjs.of(void 0);
     }
+    onRenderHeadless() {
+      return rxjs.EMPTY;
+    }
   }
   class SpineItem extends DestroyableClass {
     constructor(item, parentElement, context, settings, hookManager, index) {
@@ -5497,20 +5674,29 @@
         }),
         operators.share()
       );
-      this.layout$ = layoutProcess$.pipe(
-        operators.filter((event) => event.type === `end`),
-        operators.map((event) => event.data),
-        operators.share()
-      );
       this.isReady$ = layoutProcess$.pipe(
         operators.withLatestFrom(this.renderer.isLoaded$),
         operators.map(([event, loaded]) => !!(event.type === `end` && loaded)),
         operators.startWith(false),
         operators.distinctUntilChanged(),
-        operators.shareReplay({ refCount: true })
+        operators.shareReplay({ refCount: true, bufferSize: 1 })
+      );
+      this.layout$ = layoutProcess$.pipe(
+        operators.filter((event) => event.type === `end`),
+        operators.map((event) => event.data),
+        operators.share()
       );
       this.needsLayout$ = rxjs.merge(this.unloaded$, this.loaded$);
-      rxjs.merge(this.layout$, this.isReady$).pipe(operators.takeUntil(this.destroy$)).subscribe();
+      rxjs.merge(
+        /**
+         * @important
+         * The order is important here. We want to ensure the isReady value
+         * is set before dispatching the layout event. Elements reacting
+         * to layout changes may rely on the isReady value.
+         */
+        this.isReady$,
+        this.layout$
+      ).pipe(operators.takeUntil(this.destroy$)).subscribe();
     }
     get element() {
       return this.containerElement;
@@ -6359,7 +6545,9 @@
         }),
         rxjs.share()
       );
-      this.info$ = this.layout$.pipe(rxjs.shareReplay({ refCount: true }));
+      this.info$ = this.layout$.pipe(
+        rxjs.shareReplay({ refCount: true, bufferSize: 1 })
+      );
       rxjs.merge(this.layout$, this.info$).pipe(rxjs.takeUntil(this.destroy$)).subscribe();
     }
     layout() {
@@ -6971,6 +7159,9 @@
         height
       });
     }
+    onRenderHeadless() {
+      return rxjs.EMPTY;
+    }
   }
   const mediaEnhancer = (next) => (options) => {
     const reader = next({
@@ -7209,6 +7400,7 @@
       top: 0;
       color: rgb(202, 202, 202);
       background-color: white;
+      z-index: 1;
     `;
     return loadingElement;
   };
@@ -7277,11 +7469,15 @@
     );
     const updateEntriesVisibility$ = (entries) => reader.spineItemsObserver.itemIsReady$.pipe(
       operators.tap(({ item, isReady }) => {
-        var _a;
+        var _a, _b;
         (_a = entries[item.item.id]) == null ? void 0 : _a.style.setProperty(
           `visibility`,
           isReady ? `hidden` : `visible`
         );
+        (_b = entries[item.item.id]) == null ? void 0 : _b.style.setProperty(
+          `z-index`,
+          isReady ? `0` : `1`
+        );
       })
     );
     const loadingItems$ = reader.spineItemsManager.items$.pipe(
@@ -7997,8 +8193,6 @@
     if ((frameElement == null ? void 0 : frameElement.contentDocument) && (frameElement == null ? void 0 : frameElement.contentWindow)) {
       let contentWidth = pageWidth;
       let contentHeight = pageHeight;
-      frameElement == null ? void 0 : frameElement.style.setProperty(`visibility`, `visible`);
-      frameElement == null ? void 0 : frameElement.style.setProperty(`opacity`, `1`);
       if (viewportDimensions == null ? void 0 : viewportDimensions.hasViewport) {
         upsertCSS(
           frameElement,
@@ -8094,6 +8288,51 @@
       latestContentHeightWhenLoaded: newLatestContentHeightWhenLoaded
     };
   };
+  const loadMedias = ({
+    settings,
+    item,
+    context
+  }) => (stream) => stream.pipe(
+    rxjs.switchMap((frameElement) => {
+      var _a;
+      const images = ((_a = frameElement.contentDocument) == null ? void 0 : _a.getElementsByTagName("img")) || [];
+      const imageObservables = Array.from(images).map((img) => {
+        var _a2;
+        const originalSrc = img.getAttribute("src");
+        const spineItemUriParentPath = shared.getParentPath(item.href);
+        const foundItem = (_a2 = context.manifest) == null ? void 0 : _a2.items.find(({ href }) => {
+          return `${spineItemUriParentPath}/${originalSrc}`.endsWith(
+            `${href}`
+          );
+        });
+        if (!foundItem) return rxjs.of(null);
+        const resourceHandler = new ResourceHandler(foundItem, settings);
+        return rxjs.from(resourceHandler.getResource()).pipe(
+          rxjs.mergeMap(
+            (resource) => resource instanceof Response ? rxjs.from(resource.blob()) : rxjs.of(void 0)
+          ),
+          rxjs.tap((blob) => {
+            if (blob) {
+              const blobUrl = URL.createObjectURL(blob);
+              img.src = blobUrl;
+            }
+          })
+        );
+      });
+      return rxjs.combineLatest(imageObservables).pipe(rxjs.map(() => frameElement));
+    })
+  );
+  const unloadMedias = (frameElement) => {
+    var _a;
+    const images = Array.from(
+      ((_a = frameElement == null ? void 0 : frameElement.contentDocument) == null ? void 0 : _a.getElementsByTagName("img")) || []
+    );
+    images.forEach((img) => {
+      if (img.src.startsWith("blob:")) {
+        URL.revokeObjectURL(img.src);
+      }
+    });
+  };
   class HtmlRenderer extends DocumentRenderer {
     constructor() {
       super(...arguments);
@@ -8125,10 +8364,16 @@
           this.containerElement.appendChild(frameElement2);
         }),
         waitForFrameLoad,
+        loadMedias({
+          context: this.context,
+          item: this.item,
+          settings: this.settings
+        }),
         waitForFrameReady
       );
     }
     onUnload() {
+      unloadMedias(this.getFrameElement());
       this.layers.forEach((layer) => layer.element.remove());
       this.layers = [];
       return rxjs.EMPTY;
@@ -8172,6 +8417,34 @@
       this.latestContentHeightWhenLoaded = latestContentHeightWhenLoaded;
       return rxjs.of(rest);
     }
+    onRenderHeadless() {
+      return rxjs.from(this.resourcesHandler.fetchResource()).pipe(
+        rxjs.switchMap((resource) => {
+          if (resource instanceof Response) {
+            const contentType = resource.headers.get("content-type") ?? "";
+            const parsableContentTypes = [
+              `application/xhtml+xml`,
+              `application/xml`,
+              `text/html`,
+              `text/xml`
+            ];
+            if (parsableContentTypes.includes(contentType)) {
+              return rxjs.from(resource.text()).pipe(
+                rxjs.map((text) => {
+                  const domParser = new DOMParser();
+                  const doc = domParser.parseFromString(
+                    text,
+                    contentType
+                  );
+                  return doc;
+                })
+              );
+            }
+          }
+          return rxjs.of(void 0);
+        })
+      );
+    }
     getFrameElement() {
       var _a;
       const frame = (_a = this.layers[0]) == null ? void 0 : _a.element;
@@ -8248,7 +8521,7 @@
     }
     return range;
   };
-  const createRangeFromSelection = ({
+  const createOrderedRangeFromSelection = ({
     selection,
     spineItem
   }) => {
@@ -8374,7 +8647,7 @@
         selectionAfterPointerUp$,
         lastSelectionOnPointerdown$,
         getSelection: () => selectionSubject.getValue(),
-        createRangeFromSelection
+        createOrderedRangeFromSelection
       },
       destroy: () => {
         selectionSubject.complete();
@@ -8437,10 +8710,15 @@
   exports2.SettingsManager = SettingsManager;
   exports2.SpineItem = SpineItem;
   exports2.createReader = createReaderWithEnhancers;
+  exports2.deferIdle = deferIdle;
+  exports2.deferNextResult = deferNextResult;
   exports2.getAttributeValueFromString = getAttributeValueFromString;
   exports2.getFrameViewportInfo = getFrameViewportInfo;
+  exports2.idle = idle;
   exports2.injectCSS = injectCSS;
   exports2.isHtmlElement = isHtmlElement;
+  exports2.mapKeysTo = mapKeysTo;
+  exports2.observeResize = observeResize;
   exports2.removeCSS = removeCSS;
   exports2.upsertCSS = upsertCSS;
   exports2.waitForFrameLoad = waitForFrameLoad;