@prose-reader/core 1.65.0 → 1.67.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { takeUntil, Subject, combineLatest, map as map$1, switchMap, merge, EMPTY, fromEvent, withLatestFrom, NEVER, Observable, of, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, startWith as startWith$1, BehaviorSubject, filter as filter$1, debounceTime, combineLatestWith, tap as tap$1, shareReplay as shareReplay$1, from, interval, iif, identity, take as take$1, forkJoin } from "rxjs";
-import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, filter, take, distinctUntilChanged, takeUntil as takeUntil$1, skip, withLatestFrom as withLatestFrom$1, share, exhaustMap, mergeMap, catchError, debounce, debounceTime as debounceTime$1, delay } from "rxjs/operators";
+import { takeUntil, Subject, combineLatest, map as map$1, switchMap, merge, EMPTY, fromEvent, withLatestFrom, NEVER, Observable, of, scheduled, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, startWith as startWith$1, BehaviorSubject, filter as filter$1, debounceTime as debounceTime$1, combineLatestWith, tap as tap$1, shareReplay as shareReplay$1, from, interval, iif, identity, take as take$1, forkJoin } from "rxjs";
+import { startWith, map, shareReplay, tap, pairwise, switchMap as switchMap$1, filter, take, distinctUntilChanged, takeUntil as takeUntil$1, debounceTime, skip, withLatestFrom as withLatestFrom$1, share, exhaustMap, mergeMap, catchError, debounce, delay } from "rxjs/operators";
 import { parseContentType, detectMimeTypeFromName } from "@prose-reader/shared";
 const chromeEnhancer = (next) => (options) => {
   const reader = next(options);
@@ -467,20 +467,25 @@ const layoutEnhancer = (next) => (options) => {
     }
   );
   fixReflowable(reader);
-  let observer;
-  if (options.layoutAutoResize === `container`) {
-    reader.context.state$.pipe(
-      map((state) => state.containerElement),
-      filter(isDefined),
-      distinctUntilChanged(),
-      takeUntil$1(reader.$.destroy$)
-    ).subscribe((container) => {
-      observer = new ResizeObserver(() => {
-        reader == null ? void 0 : reader.layout();
-      });
-      observer.observe(container);
+  const observeContainerResize = (container) => new Observable((observer) => {
+    const resizeObserver = new ResizeObserver(() => {
+      observer.next();
     });
-  }
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+  const layoutOnContainerResize$ = settingsManager.settings$.pipe(
+    filter(({ layoutAutoResize: layoutAutoResize2 }) => layoutAutoResize2 === "container"),
+    switchMap$1(() => reader.context.containerElement$),
+    filter(isDefined),
+    switchMap$1((container) => observeContainerResize(container)),
+    debounceTime(100),
+    tap(() => {
+      reader == null ? void 0 : reader.layout();
+    })
+  );
   const movingSafePan$ = createMovingSafePan$(reader);
   movingSafePan$.subscribe();
   settingsManager.settings$.pipe(
@@ -492,12 +497,12 @@ const layoutEnhancer = (next) => (options) => {
     }),
     takeUntil$1(reader.$.destroy$)
   ).subscribe();
+  merge(layoutOnContainerResize$).pipe(takeUntil$1(reader.$.destroy$)).subscribe();
   return {
     ...reader,
     destroy: () => {
       settingsManager.destroy();
       reader.destroy();
-      observer == null ? void 0 : observer.disconnect();
     },
     settings: settingsManager
   };
@@ -883,7 +888,7 @@ const getNumberOfPagesForAllSpineItems = (reader) => reader.spineItemManager.get
 }, 0);
 const trackTotalPages = (reader) => {
   const totalPages$ = reader.spine.$.layout$.pipe(
-    debounceTime(10, animationFrameScheduler),
+    debounceTime$1(10, animationFrameScheduler),
     withLatestFrom(reader.pagination.paginationInfo$),
     map$1(() => {
       const numberOfPagesPerItems = getNumberOfPagesForAllSpineItems(reader);
@@ -2463,6 +2468,174 @@ const buildDocumentStyle = ({
     }
   `;
 };
+const buildStyleForViewportFrame = () => {
+  return `
+      ${getStyleForViewportDocument()}
+      html {
+        width: 100%;
+        height: 100%;
+      }
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        touch-action: none;
+      }
+    `;
+};
+const buildStyleForReflowableImageOnly = ({
+  isScrollable,
+  enableTouch
+}) => {
+  return `
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        ${enableTouch ? `
+          touch-action: none
+        ` : ``}
+      }
+      ${isScrollable ? `
+        img {
+          height: auto !important;
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+          ${// we make sure img spread on entire screen
+  ``}
+          width: 100%;
+          ${/**
+  * line break issue
+  * @see https://stackoverflow.com/questions/37869020/image-not-taking-up-the-full-height-of-container
+  */
+  ``}
+          display: block;
+        }
+      ` : ``}
+    `;
+};
+const buildStyleWithMultiColumn = ({
+  width,
+  columnHeight,
+  columnWidth
+}) => {
+  return `
+      parsererror {
+        display: none !important;
+      }
+      ${/*
+    might be html * but it does mess up things like figure if so.
+    check accessible_epub_3
+  */
+  ``}
+      html, body {
+        margin: 0;
+        padding: 0 !important;
+        -max-width: ${columnWidth}px !important;
+      }
+      ${/*
+    body {
+      height: ${columnHeight}px !important;
+      width: ${columnWidth}px !important;
+      -margin-left: ${horizontalMargin}px !important;
+      -margin-right: ${horizontalMargin}px !important;
+      -margin: ${verticalMargin}px ${horizontalMargin}px !important;
+      -padding-top: ${horizontalMargin}px !important;
+      -padding-bottom: ${horizontalMargin}px !important;
+    }
+  */
+  ``}
+      body {
+        padding: 0 !important;
+        width: ${width}px !important;
+        height: ${columnHeight}px !important;
+        overflow-y: hidden;
+        column-gap: 0px !important;
+        column-width: ${columnWidth}px !important;
+        column-fill: auto !important;
+        word-wrap: break-word;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+      }
+      body:focus-visible {
+        ${/*
+    we make sure that there are no outline when we focus something inside the iframe
+  */
+  ``}
+        outline: none;
+      }
+      ${/*
+  * @see https://hammerjs.github.io/touch-action/
+  */
+  ``}
+      html, body {
+        touch-action: none;
+      }
+      ${/*
+    this messes up hard, be careful with this
+  */
+  ``}
+      * {
+        -max-width: ${columnWidth}px !important;
+      }
+      ${/*
+    this is necessary to have a proper calculation when determining size
+    of iframe content. If an img is using something like width:100% it would expand to
+    the size of the original image and potentially gives back a wrong size (much larger)
+    @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+  */
+  ``}
+      img, video, audio, object, svg {
+        max-width: 100%;
+        max-width: ${columnWidth}px !important;
+        max-height: ${columnHeight}px !important;
+        -pointer-events: none;
+        -webkit-column-break-inside: avoid;
+        page-break-inside: avoid;
+        break-inside: avoid;
+      }
+      figure {
+        d-max-width: ${columnWidth}px !important;
+      }
+      img {
+        object-fit: contain;
+        break-inside: avoid;
+        box-sizing: border-box;
+        d-max-width: ${columnWidth}px !important;
+      }
+      ${/*
+    img, video, audio, object, svg {
+      max-height: ${columnHeight}px !important;
+      box-sizing: border-box;
+      object-fit: contain;
+      -webkit-column-break-inside: avoid;
+      page-break-inside: avoid;
+      break-inside: avoid;
+    }
+  */
+  ``}
+      table {
+        max-width: ${columnWidth}px !important;
+        table-layout: fixed;
+      }
+      td {
+        max-width: ${columnWidth}px;
+      }
+    `;
+};
 const createReflowableSpineItem = ({
   item,
   context,
@@ -2592,174 +2765,6 @@ const createReflowableSpineItem = ({
     layout
   };
 };
-const buildStyleForViewportFrame = () => {
-  return `
-    ${getStyleForViewportDocument()}
-    html {
-      width: 100%;
-      height: 100%;
-    }
-    body {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
-    ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-    html, body {
-      touch-action: none;
-    }
-  `;
-};
-const buildStyleForReflowableImageOnly = ({
-  isScrollable,
-  enableTouch
-}) => {
-  return `
-    ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-    html, body {
-      width: 100%;
-      margin: 0;
-      padding: 0;
-      ${enableTouch ? `
-        touch-action: none
-      ` : ``}
-    }
-    ${isScrollable ? `
-      img {
-        height: auto !important;
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        ${// we make sure img spread on entire screen
-  ``}
-        width: 100%;
-        ${/**
-  * line break issue
-  * @see https://stackoverflow.com/questions/37869020/image-not-taking-up-the-full-height-of-container
-  */
-  ``}
-        display: block;
-      }
-    ` : ``}
-  `;
-};
-const buildStyleWithMultiColumn = ({
-  width,
-  columnHeight,
-  columnWidth
-}) => {
-  return `
-    parsererror {
-      display: none !important;
-    }
-    ${/*
-    might be html * but it does mess up things like figure if so.
-    check accessible_epub_3
-  */
-  ``}
-    html, body {
-      margin: 0;
-      padding: 0 !important;
-      -max-width: ${columnWidth}px !important;
-    }
-    ${/*
-    body {
-      height: ${columnHeight}px !important;
-      width: ${columnWidth}px !important;
-      -margin-left: ${horizontalMargin}px !important;
-      -margin-right: ${horizontalMargin}px !important;
-      -margin: ${verticalMargin}px ${horizontalMargin}px !important;
-      -padding-top: ${horizontalMargin}px !important;
-      -padding-bottom: ${horizontalMargin}px !important;
-    }
-  */
-  ``}
-    body {
-      padding: 0 !important;
-      width: ${width}px !important;
-      height: ${columnHeight}px !important;
-      overflow-y: hidden;
-      column-gap: 0px !important;
-      column-width: ${columnWidth}px !important;
-      column-fill: auto !important;
-      word-wrap: break-word;
-      box-sizing: border-box;
-    }
-    body {
-      margin: 0;
-    }
-    body:focus-visible {
-      ${/*
-    we make sure that there are no outline when we focus something inside the iframe
-  */
-  ``}
-      outline: none;
-    }
-    ${/*
-  * @see https://hammerjs.github.io/touch-action/
-  */
-  ``}
-    html, body {
-      touch-action: none;
-    }
-    ${/*
-    this messes up hard, be careful with this
-  */
-  ``}
-    * {
-      -max-width: ${columnWidth}px !important;
-    }
-    ${/*
-    this is necessary to have a proper calculation when determining size
-    of iframe content. If an img is using something like width:100% it would expand to
-    the size of the original image and potentially gives back a wrong size (much larger)
-    @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
-  */
-  ``}
-    img, video, audio, object, svg {
-      max-width: 100%;
-      max-width: ${columnWidth}px !important;
-      max-height: ${columnHeight}px !important;
-      -pointer-events: none;
-      -webkit-column-break-inside: avoid;
-      page-break-inside: avoid;
-      break-inside: avoid;
-    }
-    figure {
-      d-max-width: ${columnWidth}px !important;
-    }
-    img {
-      object-fit: contain;
-      break-inside: avoid;
-      box-sizing: border-box;
-      d-max-width: ${columnWidth}px !important;
-    }
-    ${/*
-    img, video, audio, object, svg {
-      max-height: ${columnHeight}px !important;
-      box-sizing: border-box;
-      object-fit: contain;
-      -webkit-column-break-inside: avoid;
-      page-break-inside: avoid;
-      break-inside: avoid;
-    }
-  */
-  ``}
-    table {
-      max-width: ${columnWidth}px !important;
-      table-layout: fixed;
-    }
-    td {
-      max-width: ${columnWidth}px;
-    }
-  `;
-};
 const createSpineItem = ({
   item,
   context,
@@ -5033,7 +5038,7 @@ const createScrollViewportNavigator = ({
     });
   };
   const navigationOnScroll$ = userScroll$.pipe(
-    debounceTime$1(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, animationFrameScheduler),
+    debounceTime(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, animationFrameScheduler),
     withLatestFrom$1(currentNavigationSubject$),
     switchMap$1(() => {
       var _a, _b;
@@ -5052,7 +5057,7 @@ const createScrollViewportNavigator = ({
     share()
   );
   const userScrollEnd$ = userScroll$.pipe(
-    debounceTime$1(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, animationFrameScheduler),
+    debounceTime(SCROLL_FINISHED_DEBOUNCE_TIMEOUT, animationFrameScheduler),
     share(),
     takeUntil$1(context.destroy$)
   );