npm - box-content-preview - Versions diffs - 3.72.0 → 3.73.0 - Mend

box-content-preview 3.72.0 → 3.73.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
 [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
-[![version](https://img.shields.io/badge/version-v3.72.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
+[![version](https://img.shields.io/badge/version-v3.73.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
 [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
 # [Box Content Preview](https://developer.box.com/docs/box-content-preview)
@@ -22,11 +22,11 @@ We encourage all users to update their applications to utilize modern browsers f
 ## Current Version
-- Version: v3.72.0
+- Version: v3.73.0
 - Locale: en-US
-https://cdn01.boxcdn.net/platform/preview/3.72.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.72.0/en-US/preview.css
+https://cdn01.boxcdn.net/platform/preview/3.73.0/en-US/preview.js
+https://cdn01.boxcdn.net/platform/preview/3.73.0/en-US/preview.css
 ## Supported Locales
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
     <title>Box Content Preview Demo</title>
     <!-- Latest version of Preview SDK for your locale -->
-    <script src="https://cdn01.boxcdn.net/platform/preview/3.72.0/en-US/preview.js"></script>
+    <script src="https://cdn01.boxcdn.net/platform/preview/3.73.0/en-US/preview.js"></script>
     <link
       rel="stylesheet"
-      href="https://cdn01.boxcdn.net/platform/preview/3.72.0/en-US/preview.css"
+      href="https://cdn01.boxcdn.net/platform/preview/3.73.0/en-US/preview.css"
     />
   </head>
   <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
 1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
-- Check out a specific version with `git checkout v3.72.0`
+- Check out a specific version with `git checkout v3.73.0`
 - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
 2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`

package/dist/lib/index.js CHANGED Viewed

@@ -15388,7 +15388,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.72.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.73.0"; // eslint-disable-line no-undef
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
 const PROMISE_MAP = {};
@@ -17083,7 +17083,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const Logger_CLIENT_NAME = "box-content-preview";
-const Logger_CLIENT_VERSION = "3.72.0";
+const Logger_CLIENT_VERSION = "3.73.0";
 /* eslint-enable no-undef */
 class Logger {
@@ -37237,10 +37237,17 @@ function Thumbnail_toPropertyKey(t) { var i = Thumbnail_toPrimitive(t, "string")
 function Thumbnail_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE = 'bp-thumbnail-image';
 const THUMBNAIL_TOTAL_WIDTH = 150; // 190px sidebar width - 40px margins
 const THUMBNAIL_IMAGE_WIDTH = THUMBNAIL_TOTAL_WIDTH * 2; // Multiplied by a scaling factor so that we render the image at a higher resolution
+function createRejectedTask(message) {
+  return {
+    cancel: (noop_default()),
+    promise: Promise.reject(new Error(message))
+  };
+}
 class Thumbnail {
   /**
    * [constructor]
@@ -37252,13 +37259,17 @@ class Thumbnail {
     Thumbnail_defineProperty(this, "pdfViewer", void 0);
     /** @property {Object} - Cache for the thumbnail image elements */
     Thumbnail_defineProperty(this, "thumbnailImageCache", void 0);
+    /** @property {Set} - Active PDF.js render tasks */
+    Thumbnail_defineProperty(this, "renderTasks", void 0);
     Thumbnail_defineProperty(this, "preloader", void 0);
     this.preloader = preloader;
     this.createImageEl = this.createImageEl.bind(this);
     this.createThumbnailImage = this.createThumbnailImage.bind(this);
     this.getThumbnailDataURL = this.getThumbnailDataURL.bind(this);
+    this.renderPageImage = this.renderPageImage.bind(this);
     this.pdfViewer = pdfViewer;
     this.thumbnailImageCache = new lib_BoundedCache();
+    this.renderTasks = new Set();
   }
   /**
@@ -37267,6 +37278,11 @@ class Thumbnail {
    * @return {void}
    */
   destroy() {
+    if (this.renderTasks) {
+      this.renderTasks.forEach(task => task.cancel());
+      this.renderTasks.clear();
+      this.renderTasks = null;
+    }
     if (this.thumbnailImageCache) {
       this.thumbnailImageCache.destroy();
       this.thumbnailImageCache = null;
@@ -37385,6 +37401,12 @@ class Thumbnail {
       if (!this.thumbnailImageCache) {
         return null;
       }
+      if (!dataUrl) {
+        this.thumbnailImageCache.set(itemIndex, Thumbnail_objectSpread(Thumbnail_objectSpread({}, cacheEntry), {}, {
+          inProgress: false
+        }));
+        return null;
+      }
       const imageEl = this.createImageEl(dataUrl, thumbOptions);
       // Cache this image element for future use
       this.thumbnailImageCache.set(itemIndex, {
@@ -37414,22 +37436,35 @@ class Thumbnail {
   }
   /**
-   * Given a page number, generates the image data URL for the image of the page
-   * @param {number} pageNum  - The page number of the document
-   * @return {string} The data URL of the page image
+   * Renders a page image without caching it.
+   * @param {number} pageNum - The page number of the document (1 indexed)
+   * @param {Object} thumbOptions - Thumbnail render options
+   * @return {Object} A cancellable render task
    */
-  getThumbnailDataURL(pageNum, thumbOptions) {
-    if (this.preloader?.preloadedImages?.[pageNum]) {
-      return Promise.resolve(this.preloader.preloadedImages[pageNum]);
-    }
+  renderPageImage(pageNum, thumbOptions) {
     const pdfDocument = this.pdfViewer?.pdfDocument;
     if (!pdfDocument) {
-      return Promise.reject(new Error('PDF document not ready'));
+      return createRejectedTask('PDF document not ready');
     }
-    const canvas = document.createElement('canvas');
     const thumbnailImageWidth = thumbOptions && thumbOptions.thumbMaxWidth ? thumbOptions.thumbMaxWidth : THUMBNAIL_IMAGE_WIDTH;
-    return pdfDocument.getPage(pageNum).then(page => {
-      if (!this.thumbnailImageCache) {
+    if (!isFinite_default()(thumbnailImageWidth) || thumbnailImageWidth <= 0) {
+      return createRejectedTask('Invalid thumbnail render dimensions');
+    }
+    const canvas = document.createElement('canvas');
+    let isCancelled = false;
+    let pdfRenderTask = null;
+    const task = {
+      cancel: () => {
+        if (isCancelled) {
+          return;
+        }
+        isCancelled = true;
+        pdfRenderTask?.cancel();
+      },
+      promise: null
+    };
+    task.promise = pdfDocument.getPage(pageNum).then(page => {
+      if (isCancelled || !this.thumbnailImageCache) {
         return null;
       }
       const rotation = ((this.pdfViewer.pagesRotation || 0) + page.rotate) % 360;
@@ -37437,48 +37472,249 @@ class Thumbnail {
         scale: 1,
         rotation
       });
-      if (!viewport || !isFinite_default()(viewport.width) || !isFinite_default()(viewport.height)) {
+      if (!viewport || !isFinite_default()(viewport.width) || viewport.width <= 0 || !isFinite_default()(viewport.height) || viewport.height <= 0) {
         return Promise.reject(new Error('Invalid page viewport'));
       }
       const {
         width,
         height
       } = viewport;
-      // Get the current page w:h ratio in case it differs from the first page
-      const curPageRatio = width / height;
-      // Handle the case where the current page's w:h ratio is less than the
-      // `pageRatio` which means that this page is probably more portrait than
-      // landscape
-      if (curPageRatio < this.pageRatio) {
-        // Set the canvas height to that of the thumbnail max height
+      const currentPageRatio = width / height;
+      // More-portrait pages are constrained by the first page's height budget.
+      if (currentPageRatio < this.pageRatio) {
         canvas.height = Math.ceil(thumbnailImageWidth / this.pageRatio);
-        // Find the canvas width based on the current page ratio
-        canvas.width = canvas.height * curPageRatio;
+        canvas.width = canvas.height * currentPageRatio;
       } else {
-        // In case the current page ratio is same as the first page
-        // or in case it's larger (which means that it's wider), keep
-        // the width at the max thumbnail width
         canvas.width = thumbnailImageWidth;
-        // Find the height based on the current page ratio
-        canvas.height = Math.ceil(thumbnailImageWidth / curPageRatio);
+        canvas.height = Math.ceil(thumbnailImageWidth / currentPageRatio);
       }
-      // The amount for which to scale down the current page
       const {
         width: canvasWidth
       } = canvas;
       const scale = canvasWidth / width;
-      return page.render({
+      pdfRenderTask = page.render({
         canvasContext: canvas.getContext('2d'),
         viewport: page.getViewport({
           scale,
           rotation
         })
-      }).promise;
-    }).then(() => canvas.toDataURL());
+      });
+      return pdfRenderTask.promise.then(() => {
+        if (isCancelled || !this.thumbnailImageCache) {
+          return null;
+        }
+        return {
+          dataUrl: canvas.toDataURL(),
+          height: canvas.height,
+          width: canvas.width
+        };
+      });
+    }).catch(error => {
+      if (isCancelled) {
+        return null;
+      }
+      throw error;
+    }).finally(() => {
+      canvas.width = 0;
+      canvas.height = 0;
+      this.renderTasks?.delete(task);
+    });
+    this.renderTasks.add(task);
+    return task;
+  }
+  /**
+   * Given a page number, generates the image data URL for the image of the page
+   * @param {number} pageNum  - The page number of the document
+   * @return {string} The data URL of the page image
+   */
+  getThumbnailDataURL(pageNum, thumbOptions) {
+    if (this.preloader?.preloadedImages?.[pageNum]) {
+      return Promise.resolve(this.preloader.preloadedImages[pageNum]);
+    }
+    return this.renderPageImage(pageNum, thumbOptions).promise.then(result => result?.dataUrl || null);
   }
 }
 /* harmony default export */ const lib_Thumbnail = (Thumbnail);
+;// ./src/lib/viewers/gallery/HighResThumbnailStore.ts
+function HighResThumbnailStore_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function HighResThumbnailStore_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? HighResThumbnailStore_ownKeys(Object(t), !0).forEach(function (r) { HighResThumbnailStore_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : HighResThumbnailStore_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function HighResThumbnailStore_defineProperty(e, r, t) { return (r = HighResThumbnailStore_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function HighResThumbnailStore_toPropertyKey(t) { var i = HighResThumbnailStore_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function HighResThumbnailStore_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class HighResThumbnailStore {
+  constructor({
+    maxBytes,
+    maxConcurrent,
+    maxPages,
+    onChange,
+    render
+  }) {
+    HighResThumbnailStore_defineProperty(this, "activeCount", 0);
+    HighResThumbnailStore_defineProperty(this, "cache", new Map());
+    HighResThumbnailStore_defineProperty(this, "currentBytes", 0);
+    HighResThumbnailStore_defineProperty(this, "failed", new Set());
+    HighResThumbnailStore_defineProperty(this, "inFlight", new Map());
+    HighResThumbnailStore_defineProperty(this, "isDestroyed", false);
+    HighResThumbnailStore_defineProperty(this, "maxBytes", void 0);
+    HighResThumbnailStore_defineProperty(this, "maxConcurrent", void 0);
+    HighResThumbnailStore_defineProperty(this, "maxPages", void 0);
+    HighResThumbnailStore_defineProperty(this, "onChange", void 0);
+    HighResThumbnailStore_defineProperty(this, "queue", []);
+    HighResThumbnailStore_defineProperty(this, "render", void 0);
+    HighResThumbnailStore_defineProperty(this, "retained", new Set());
+    HighResThumbnailStore_defineProperty(this, "targetWidth", 0);
+    this.maxBytes = maxBytes;
+    this.maxConcurrent = maxConcurrent;
+    this.maxPages = maxPages;
+    this.onChange = onChange;
+    this.render = render;
+  }
+  setRetained(pages, width, pageRatio) {
+    if (this.isDestroyed) {
+      return;
+    }
+    const previousWidth = this.targetWidth;
+    this.targetWidth = width;
+    if (previousWidth !== width) {
+      this.failed.clear();
+    }
+    const ratio = Number.isFinite(pageRatio) && pageRatio > 0 ? pageRatio : 1;
+    const estimatedBytes = width * Math.ceil(width / ratio) * 4;
+    const pageLimit = Math.min(this.maxPages, Math.floor(this.maxBytes / estimatedBytes));
+    const retainedPages = Array.from(new Set(pages)).slice(0, pageLimit);
+    const retainedSet = new Set(retainedPages);
+    this.retained = retainedSet;
+    this.failed.forEach(pageNum => {
+      if (!retainedSet.has(pageNum)) {
+        this.failed.delete(pageNum);
+      }
+    });
+    let didEvict = false;
+    this.cache.forEach((entry, pageNum) => {
+      if (!this.retained.has(pageNum) || entry.requestedWidth !== width) {
+        this.cache.delete(pageNum);
+        this.currentBytes -= entry.bytes;
+        didEvict = true;
+      }
+    });
+    this.inFlight.forEach((pending, pageNum) => {
+      if (!this.retained.has(pageNum) || pending.width !== width) {
+        pending.task.cancel();
+        this.inFlight.delete(pageNum);
+      }
+    });
+    this.queue = retainedPages.filter(pageNum => !this.cache.has(pageNum) && !this.inFlight.has(pageNum) && !this.failed.has(pageNum));
+    if (didEvict) {
+      this.emit();
+    }
+    this.pump();
+  }
+  destroy() {
+    if (this.isDestroyed) {
+      return;
+    }
+    this.isDestroyed = true;
+    this.inFlight.forEach(({
+      task
+    }) => task.cancel());
+    this.inFlight.clear();
+    this.cache.clear();
+    this.failed.clear();
+    this.queue = [];
+    this.retained.clear();
+    this.currentBytes = 0;
+    this.onChange = null;
+    this.render = null;
+  }
+  emit() {
+    if (!this.onChange) {
+      return;
+    }
+    const images = {};
+    this.cache.forEach((entry, pageNum) => {
+      images[pageNum] = entry.dataUrl;
+    });
+    this.onChange(images);
+  }
+  pump() {
+    if (this.isDestroyed || !this.render) {
+      return;
+    }
+    while (this.activeCount < this.maxConcurrent && this.queue.length > 0) {
+      const pageNum = this.queue.shift();
+      if (pageNum && this.retained.has(pageNum)) {
+        this.startRender(pageNum);
+      }
+    }
+  }
+  startRender(pageNum) {
+    if (!this.render) {
+      return;
+    }
+    const width = this.targetWidth;
+    let task;
+    try {
+      task = this.render(pageNum, width);
+    } catch {
+      this.failed.add(pageNum);
+      return;
+    }
+    const pending = {
+      task,
+      width
+    };
+    this.activeCount += 1;
+    this.inFlight.set(pageNum, pending);
+    task.promise.then(result => this.handleRenderResult(pageNum, pending, result), () => this.handleRenderFailure(pageNum, pending)).then(() => this.finishRender(), () => this.finishRender());
+  }
+  clearInFlight(pageNum, pending) {
+    if (this.inFlight.get(pageNum) !== pending) {
+      return false;
+    }
+    this.inFlight.delete(pageNum);
+    return true;
+  }
+  finishRender() {
+    this.activeCount -= 1;
+    this.pump();
+  }
+  handleRenderFailure(pageNum, pending) {
+    if (this.clearInFlight(pageNum, pending) && this.isStillWanted(pageNum, pending)) {
+      this.failed.add(pageNum);
+    }
+  }
+  handleRenderResult(pageNum, pending, result) {
+    if (!this.clearInFlight(pageNum, pending) || !result || !this.isStillWanted(pageNum, pending)) {
+      return;
+    }
+    const {
+      height,
+      width
+    } = result;
+    if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
+      this.failed.add(pageNum);
+      return;
+    }
+    const bytes = width * height * 4;
+    const existing = this.cache.get(pageNum);
+    const nextBytes = this.currentBytes - (existing?.bytes || 0) + bytes;
+    if (nextBytes > this.maxBytes) {
+      this.failed.add(pageNum);
+      return;
+    }
+    this.cache.set(pageNum, HighResThumbnailStore_objectSpread(HighResThumbnailStore_objectSpread({}, result), {}, {
+      bytes,
+      requestedWidth: pending.width
+    }));
+    this.currentBytes = nextBytes;
+    this.emit();
+  }
+  isStillWanted(pageNum, pending) {
+    return !this.isDestroyed && this.targetWidth === pending.width && this.retained.has(pageNum);
+  }
+}
 ;// ./src/lib/viewers/gallery/useGalleryPinch.ts
@@ -37613,12 +37849,20 @@ function GalleryGrid_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 const GALLERY_THUMB_MAX_WIDTH = 440;
 const CONCURRENT_LOADS = 4;
 const SCROLL_THROTTLE_MS = 200;
 // Keep in sync with the 100% grid rule in GalleryGrid.scss
 const GALLERY_TILE_GAP = 16;
 const GALLERY_TILE_MIN_WIDTH = 220;
+const GALLERY_THUMB_WIDTH_TIERS = [GALLERY_THUMB_MAX_WIDTH, GALLERY_THUMB_MAX_WIDTH * 2, GALLERY_THUMB_MAX_WIDTH * 3];
+const GALLERY_THUMB_MAX_TIER = GALLERY_THUMB_WIDTH_TIERS[GALLERY_THUMB_WIDTH_TIERS.length - 1];
+const GALLERY_THUMB_MAX_DPR = 2;
+const GALLERY_HIGH_RES_MAX_BYTES = 64 * 1024 * 1024;
+const GALLERY_HIGH_RES_MAX_PAGES = 16;
+const GALLERY_HIGH_RES_CONCURRENCY = 2;
+const GALLERY_DEFAULT_PAGE_RATIO = 0.775;
 const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(function GalleryTile({
   pageNum,
   isFocused,
@@ -37678,6 +37922,7 @@ function GalleryGrid({
   thumbnail
 }) {
   const [loadedImages, setLoadedImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
+  const [highResImages, setHighResImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
   const [focusedPage, setFocusedPage] = __WEBPACK_EXTERNAL_MODULE_react_useState__(currentPage);
   const [pageRatio, setPageRatio] = __WEBPACK_EXTERNAL_MODULE_react_useState__(null);
   // Topmost visible page — the scroll anchor used to restore the viewed area after a reflow.
@@ -37690,37 +37935,56 @@ function GalleryGrid({
   const isProcessingRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
   const isMountedRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(true);
   const inFlightRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(new Set());
+  const highResStoreRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
   const byDistanceFromAnchor = (a, b) => Math.abs(a - anchorPageRef.current) - Math.abs(b - anchorPageRef.current);
+  function getNeededThumbWidth() {
+    if (scaleRef.current === 1) {
+      return GALLERY_THUMB_MAX_WIDTH;
+    }
+    const tile = gridRef.current?.querySelector('[data-page]');
+    const neededWidth = (tile?.offsetWidth || 0) * Math.min(window.devicePixelRatio || 1, GALLERY_THUMB_MAX_DPR);
+    return GALLERY_THUMB_WIDTH_TIERS.find(tier => tier >= neededWidth) || GALLERY_THUMB_MAX_TIER;
+  }
-  // Unloaded tiles within viewport + buffer, on-screen tiles first so the user never
-  // watches a visible hole while off-screen pages load. Pages already being rendered
-  // (in flight) are excluded so re-derives can't waste loader slots on them.
-  function getUnloadedNearViewport() {
+  // Prioritize visible pages before spending work on the surrounding buffer.
+  function getPagesNearViewport(marginRatio, isEligible) {
     const grid = gridRef.current;
     if (!grid) return [];
     const {
       scrollTop,
       clientHeight
     } = grid;
-    const bufferZone = clientHeight * 3;
     const viewportBottom = scrollTop + clientHeight;
-    const visibleUnloaded = [];
-    const bufferedUnloaded = [];
-    const tiles = grid.querySelectorAll('[data-page]');
-    tiles.forEach(tile => {
-      const el = tile;
-      if (!el.dataset.page) return;
-      const pageNum = parseInt(el.dataset.page, 10);
-      if (inFlightRef.current.has(pageNum) || el.querySelector('img')) return;
-      const tileTop = el.offsetTop;
-      const tileBottom = tileTop + el.offsetHeight;
+    const margin = clientHeight * marginRatio;
+    const visible = [];
+    const nearby = [];
+    grid.querySelectorAll('[data-page]').forEach(tile => {
+      if (!tile.dataset.page) return;
+      const pageNum = parseInt(tile.dataset.page, 10);
+      if (isEligible && !isEligible(tile, pageNum)) return;
+      const tileTop = tile.offsetTop;
+      const tileBottom = tileTop + tile.offsetHeight;
       if (tileBottom > scrollTop && tileTop < viewportBottom) {
-        visibleUnloaded.push(pageNum);
-      } else if (tileBottom > scrollTop - bufferZone && tileTop < viewportBottom + bufferZone) {
-        bufferedUnloaded.push(pageNum);
+        visible.push(pageNum);
+      } else if (tileBottom > scrollTop - margin && tileTop < viewportBottom + margin) {
+        nearby.push(pageNum);
       }
     });
-    return [...visibleUnloaded.sort(byDistanceFromAnchor), ...bufferedUnloaded.sort(byDistanceFromAnchor)];
+    return [...visible.sort(byDistanceFromAnchor), ...nearby.sort(byDistanceFromAnchor)];
+  }
+  function syncHighRes() {
+    const store = highResStoreRef.current;
+    if (!store) return;
+    const width = getNeededThumbWidth();
+    const ratio = thumbnail.pageRatio || GALLERY_DEFAULT_PAGE_RATIO;
+    if (width === GALLERY_THUMB_MAX_WIDTH) {
+      store.setRetained([], width, ratio);
+    } else if (!isProcessingRef.current) {
+      store.setRetained(getPagesNearViewport(0.5), width, ratio);
+    }
+  }
+  function getUnloadedNearViewport() {
+    return getPagesNearViewport(3, (tile, pageNum) => !inFlightRef.current.has(pageNum) && !tile.querySelector('img'));
   }
   function processQueue() {
     if (!isMountedRef.current || !thumbnail || queueRef.current.length === 0) {
@@ -37750,6 +38014,7 @@ function GalleryGrid({
         queueRef.current = getUnloadedNearViewport().filter(p => remaining.has(p));
         if (queueRef.current.length === 0) {
           isProcessingRef.current = false;
+          syncHighRes();
           return;
         }
         processQueue();
@@ -37788,6 +38053,7 @@ function GalleryGrid({
       queueRef.current = [...toAdd, ...queueRef.current];
       startProcessing();
     }
+    syncHighRes();
   }, SCROLL_THROTTLE_MS));
   // Unthrottled so the anchor is accurate the instant a reflow (e.g. fullscreen) happens.
@@ -37860,6 +38126,20 @@ function GalleryGrid({
   }, [applyZoomLayout, scale]);
   __WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
     const throttledScroll = handleScrollRef.current;
+    const highResStore = new HighResThumbnailStore({
+      maxBytes: GALLERY_HIGH_RES_MAX_BYTES,
+      maxConcurrent: GALLERY_HIGH_RES_CONCURRENCY,
+      maxPages: GALLERY_HIGH_RES_MAX_PAGES,
+      onChange: images => {
+        if (isMountedRef.current) {
+          setHighResImages(images);
+        }
+      },
+      render: (pageNum, width) => thumbnail.renderPageImage(pageNum, {
+        thumbMaxWidth: width
+      })
+    });
+    highResStoreRef.current = highResStore;
     if (gridRef.current) {
       const tile = gridRef.current.querySelector(`[data-page="${currentPage}"]`);
       if (tile) {
@@ -37892,11 +38172,14 @@ function GalleryGrid({
       // Guarded start: the mount scrollIntoView can fire the scroll handler first, and a
       // second unguarded pump would double the concurrent thumbnail renders.
       startProcessing();
+      syncHighRes();
     });
     return () => {
       isMountedRef.current = false;
       queueRef.current = [];
       isProcessingRef.current = false;
+      highResStore.destroy();
+      highResStoreRef.current = null;
       throttledScroll.cancel();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -37927,12 +38210,12 @@ function GalleryGrid({
     observer.observe(grid);
     return () => observer.disconnect();
   }, [applyZoomLayout]);
-  const focusTile = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
+  const focusTile = __WEBPACK_EXTERNAL_MODULE_react_useCallback__((pageNum, options) => {
     const grid = gridRef.current;
     if (!grid) return;
     const tile = grid.querySelector(`[data-page="${pageNum}"]`);
     if (tile) {
-      tile.focus();
+      tile.focus(options);
     }
   }, []);
   const handleTileFocus = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
@@ -37946,7 +38229,9 @@ function GalleryGrid({
   }, [onPageNavigate]);
   const handleGridFocus = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(event => {
     if (event.target === gridRef.current) {
-      focusTile(focusedPage);
+      focusTile(focusedPage, {
+        preventScroll: true
+      });
     }
   }, [focusedPage, focusTile]);
   const handleGridKeyDown = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(event => {
@@ -37997,7 +38282,7 @@ function GalleryGrid({
   for (let i = 1; i <= pageCount; i += 1) {
     tiles.push(/*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryTile, {
       key: i,
-      imageSrc: loadedImages[i],
+      imageSrc: highResImages[i] || loadedImages[i],
       isFocused: i === focusedPage,
       onClick: handleTileClick,
       onFocus: handleTileFocus,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "box-content-preview",
-    "version": "3.72.0",
+    "version": "3.73.0",
     "description": "Box Content Preview UI Element",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",