npm - box-content-preview - Versions diffs - 3.68.0 → 3.70.0 - Mend

box-content-preview 3.68.0 → 3.70.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.68.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
+[![version](https://img.shields.io/badge/version-v3.70.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.68.0
+- Version: v3.70.0
 - Locale: en-US
-https://cdn01.boxcdn.net/platform/preview/3.68.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.68.0/en-US/preview.css
+https://cdn01.boxcdn.net/platform/preview/3.70.0/en-US/preview.js
+https://cdn01.boxcdn.net/platform/preview/3.70.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.68.0/en-US/preview.js"></script>
+    <script src="https://cdn01.boxcdn.net/platform/preview/3.70.0/en-US/preview.js"></script>
     <link
       rel="stylesheet"
-      href="https://cdn01.boxcdn.net/platform/preview/3.68.0/en-US/preview.css"
+      href="https://cdn01.boxcdn.net/platform/preview/3.70.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.68.0`
+- Check out a specific version with `git checkout v3.70.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

@@ -17387,6 +17387,15 @@ const USER_DOCUMENT_THUMBNAIL_EVENTS = {
   NAVIGATE: 'user_document_thumbnails_navigate',
   OPEN: 'user_document_thumbnails_open'
 };
+// Events fired when using gallery view
+const USER_DOCUMENT_GALLERY_EVENTS = {
+  DISMISS: 'user_document_gallery_dismiss',
+  // The gallery closes without the user settling on a page
+  NAVIGATE: 'user_document_gallery_navigate',
+  // The user picks a page, or closes on one they browsed to
+  OPEN: 'user_document_gallery_open' // The user opens the gallery
+};
 const MISSING_EXTERNAL_REFS = 'missing_x_refs';
 const MEDIA_METRIC = {
   bufferFill: 'bufferFill',
@@ -17416,7 +17425,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.68.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.70.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 = {};
@@ -19141,7 +19150,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const Logger_CLIENT_NAME = "box-content-preview";
-const Logger_CLIENT_VERSION = "3.68.0";
+const Logger_CLIENT_VERSION = "3.70.0";
 /* eslint-enable no-undef */
 class Logger {
@@ -24627,13 +24636,13 @@ const ImageLoader_VIEWERS = [{
   NAME: 'Image',
   CONSTRUCTOR: image_ImageViewer,
   REP: 'jpg',
-  EXT: ['jpeg', 'jpg', 'cr2', 'crw', 'dng', 'nef', 'raf', 'raw'],
+  EXT: ['jpeg', 'jpg', 'cr2', 'cr3', 'crw', 'dng', 'nef', 'raf', 'raw'],
   ASSET: '1.jpg'
 }, {
   NAME: 'Image',
   CONSTRUCTOR: image_ImageViewer,
   REP: 'png',
-  EXT: ['ai', 'bmp', 'dcm', 'eps', 'gif', 'heic', 'png', 'ps', 'psd', 'tga', 'tif', 'tiff', 'webp'],
+  EXT: ['ai', 'avif', 'bmp', 'dcm', 'eps', 'gif', 'heic', 'png', 'ps', 'psd', 'tga', 'tif', 'tiff', 'webp'],
   ASSET: '1.png'
 }];
 class ImageLoader extends viewers_AssetLoader {
@@ -39525,6 +39534,9 @@ class Thumbnail {
       return Promise.resolve(null);
     }
     return pdfDocument.getPage(1).then(page => {
+      if (!this.thumbnailImageCache) {
+        return null;
+      }
       const rotation = ((this.pdfViewer.pagesRotation || 0) + page.rotate) % 360;
       const viewport = page.getViewport({
         scale: 1,
@@ -39586,6 +39598,9 @@ class Thumbnail {
    * @return {Promise} - promise reolves with the image HTMLElement or null if generation is in progress
    */
   createThumbnailImage(itemIndex, thumbOptions) {
+    if (!this.thumbnailImageCache) {
+      return Promise.resolve(null);
+    }
     const cacheEntry = this.getImageFromCache(itemIndex);
     // If this thumbnail has already been cached, use it
     if (cacheEntry && cacheEntry.image) {
@@ -39602,8 +39617,10 @@ class Thumbnail {
       inProgress: true
     }));
     return this.getThumbnailDataURL(itemIndex + 1, thumbOptions).then(dataUrl => {
-      return this.createImageEl(dataUrl, thumbOptions);
-    }).then(imageEl => {
+      if (!this.thumbnailImageCache) {
+        return null;
+      }
+      const imageEl = this.createImageEl(dataUrl, thumbOptions);
       // Cache this image element for future use
       this.thumbnailImageCache.set(itemIndex, {
         inProgress: false,
@@ -39611,6 +39628,9 @@ class Thumbnail {
       });
       return imageEl;
     }).catch(() => {
+      if (!this.thumbnailImageCache) {
+        return null;
+      }
       this.thumbnailImageCache.set(itemIndex, Thumbnail_objectSpread(Thumbnail_objectSpread({}, this.getImageFromCache(itemIndex)), {}, {
         inProgress: false
       }));
@@ -39625,7 +39645,7 @@ class Thumbnail {
    * @return {Promise} - promise reolves with the image HTMLElement or null if generation is in progress
    */
   getImageFromCache(itemIndex) {
-    return this.thumbnailImageCache.get(itemIndex);
+    return this.thumbnailImageCache?.get(itemIndex) || null;
   }
   /**
@@ -39644,6 +39664,9 @@ class Thumbnail {
     const canvas = document.createElement('canvas');
     const thumbnailImageWidth = thumbOptions && thumbOptions.thumbMaxWidth ? thumbOptions.thumbMaxWidth : THUMBNAIL_IMAGE_WIDTH;
     return pdfDocument.getPage(pageNum).then(page => {
+      if (!this.thumbnailImageCache) {
+        return null;
+      }
       const rotation = ((this.pdfViewer.pagesRotation || 0) + page.rotate) % 360;
       const viewport = page.getViewport({
         scale: 1,
@@ -39728,6 +39751,7 @@ const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(
       "aria-selected": isFocused,
       className: `bp-gallery-tile${isFocused ? ' bp-gallery-tile--selected' : ''}`,
       "data-page": pageNum,
+      "data-resin-target": "galleryTile",
       onClick: () => onClick(pageNum),
       onFocus: () => onFocus(pageNum),
       role: "option",
@@ -40078,6 +40102,7 @@ class GalleryController {
     GalleryController_defineProperty(this, "focusToggle", void 0);
     GalleryController_defineProperty(this, "onBeforeOpen", void 0);
     GalleryController_defineProperty(this, "onAfterClose", void 0);
+    GalleryController_defineProperty(this, "onClose", void 0);
     GalleryController_defineProperty(this, "galleryRoot", null);
     GalleryController_defineProperty(this, "galleryEl", null);
     GalleryController_defineProperty(this, "galleryThumbnail", null);
@@ -40086,6 +40111,7 @@ class GalleryController {
     GalleryController_defineProperty(this, "gallerySidebarTimeoutId", null);
     GalleryController_defineProperty(this, "sidebarWasOpen", false);
     GalleryController_defineProperty(this, "isGalleryOpen", false);
+    GalleryController_defineProperty(this, "pickedPage", null);
     GalleryController_defineProperty(this, "toggle", () => {
       this.isGalleryOpen = !this.isGalleryOpen;
       if (this.isGalleryOpen) {
@@ -40136,6 +40162,11 @@ class GalleryController {
             }, THUMBNAILS_SIDEBAR_TRANSITION_TIME);
           }
         }
+        const {
+          pickedPage
+        } = this;
+        this.pickedPage = null;
+        this.onClose(pickedPage ?? navigateToPage);
       }
       this.requestUiUpdate();
       if (!this.isGalleryOpen) {
@@ -40145,6 +40176,7 @@ class GalleryController {
     });
     GalleryController_defineProperty(this, "handleGalleryNavigate", pageNum => {
       this.galleryFocusedPage = pageNum;
+      this.pickedPage = pageNum;
       this.toggle();
     });
     GalleryController_defineProperty(this, "handleFocusChange", pageNum => {
@@ -40175,6 +40207,7 @@ class GalleryController {
     this.focusToggle = opts.focusToggle;
     this.onBeforeOpen = opts.onBeforeOpen;
     this.onAfterClose = opts.onAfterClose;
+    this.onClose = opts.onClose;
   }
   get isOpen() {
     return this.isGalleryOpen;
@@ -40215,6 +40248,12 @@ class GalleryController {
     }
   }
   destroy() {
+    // Teardown with the gallery still open (file switch, preview closed) resolves the open
+    // instead of leaving it looking abandoned. Depends on the viewer destroying this controller
+    // before BaseViewer.destroy drops the metric listeners.
+    if (this.isGalleryOpen) {
+      this.onClose(null);
+    }
     if (this.galleryMountTimeoutId !== null) {
       clearTimeout(this.galleryMountTimeoutId);
       this.galleryMountTimeoutId = null;
@@ -40261,6 +40300,7 @@ class GalleryController {
     }
     const thumbnail = this.galleryThumbnail;
     this.galleryEl = document.createElement('div');
+    this.galleryEl.setAttribute('data-resin-component', 'gallery');
     this.containerEl.insertBefore(this.galleryEl, this.containerEl.querySelector('.bp-ControlsRoot'));
     this.galleryRoot = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.galleryEl);
     this.galleryFocusedPage = pdfViewer.currentPageNumber;
@@ -41302,11 +41342,16 @@ class ThumbnailsSidebar {
       this.virtualScroller.destroy();
       this.virtualScroller = null;
     }
+    if (this.thumbnail) {
+      this.thumbnail.destroy();
+      this.thumbnail = null;
+    }
     this.pdfViewer = null;
     this.currentThumbnails = [];
     this.currentPage = null;
     this.preloader = null;
     this.anchorEl.removeEventListener('click', this.thumbnailClickHandler);
+    this.anchorEl.removeEventListener('keydown', this.onKeydown);
   }
   /**
@@ -41377,6 +41422,9 @@ class ThumbnailsSidebar {
    * @return {void}
    */
   renderNextThumbnailImage() {
+    if (!this.thumbnail || !this.virtualScroller) {
+      return;
+    }
     const scrollerNotInited = this.virtualScroller && this.virtualScroller instanceof lib_VirtualScroller && typeof this.virtualScroller.totalItems === 'undefined';
     if (scrollerNotInited) {
       this.thumbnail.init().then(this.initVirtualScrollerIfReady);
@@ -41450,6 +41498,9 @@ class ThumbnailsSidebar {
    * @return {void}
    */
   requestThumbnailImage(itemIndex, thumbnailEl) {
+    if (!this.thumbnail) {
+      return;
+    }
     const requestId = requestAnimationFrame(() => {
       this.animationFrameRequestIds = this.animationFrameRequestIds.filter(id => id !== requestId);
       this.thumbnail.createThumbnailImage(itemIndex).then(imageEl => {
@@ -41556,7 +41607,7 @@ class ThumbnailsSidebar {
   }
   refresh() {
     if (!this.virtualScroller) {
-      return;
+      return Promise.resolve();
     }
     this.virtualScroller.destroy();
     this.virtualScroller = new lib_VirtualScroller(this.anchorEl);
@@ -41567,7 +41618,10 @@ class ThumbnailsSidebar {
     // Skip preloader path since preloader dimensions are unrotated
     const savedPreloader = this.thumbnail.preloader;
     this.thumbnail.preloader = null;
-    this.thumbnail.init().then(thumbnailHeight => {
+    return this.thumbnail.init().then(thumbnailHeight => {
+      if (!this.thumbnail || !this.virtualScroller) {
+        return;
+      }
       this.thumbnail.preloader = savedPreloader;
       if (thumbnailHeight) {
         const count = this.pdfViewer?.pagesCount || this.preloader?.numPages;
@@ -41816,7 +41870,8 @@ class DocBaseViewer extends viewers_BaseViewer {
         }
       },
       onBeforeOpen: () => this.handleGalleryEnter(),
-      onAfterClose: () => this.handleGalleryExit()
+      onAfterClose: () => this.handleGalleryExit(),
+      onClose: landedPage => this.handleGalleryClose(landedPage)
     });
   }
@@ -41847,6 +41902,13 @@ class DocBaseViewer extends viewers_BaseViewer {
     if (this.galleryController) {
       this.galleryController.destroy();
     }
+    if (this.thumbnailsSidebar) {
+      this.thumbnailsSidebar.destroy();
+    }
+    if (this.advancedInsightsThumbs) {
+      this.advancedInsightsThumbs.destroy();
+      this.advancedInsightsThumbs = null;
+    }
     // Clean up PDF network requests
     if (this.pdfLoadingTask) {
@@ -41857,16 +41919,19 @@ class DocBaseViewer extends viewers_BaseViewer {
       }
     }
-    // Clean up viewer
+    // Clean up and detach the PDF.js document so retained viewer instances
+    // do not keep page views and document resources alive.
     if (this.pdfViewer) {
       this.pdfViewer.cleanup();
+      this.pdfViewer.setDocument(null);
     }
+    if (this.pdfLinkService) {
+      this.pdfLinkService.setDocument(null);
+    }
+    this.doc = null;
     if (this.printPopup) {
       this.printPopup.destroy();
     }
-    if (this.thumbnailsSidebar) {
-      this.thumbnailsSidebar.destroy();
-    }
     if (this.thumbnailsSidebarEl) {
       // Since we are cleaning up make sure the thumbnails open class is
       // removed so that the content div shifts back left
@@ -42614,6 +42679,10 @@ class DocBaseViewer extends viewers_BaseViewer {
       this.pageTracker.addListener('page_tracker_report', this.handleAdvancedInsightsReport);
     }
     return this.pdfLoadingTask.promise.then(doc => {
+      if (this.isDestroyed()) {
+        return null;
+      }
       // Only check operations for .numbers and .xlsx files
       if (file.extension === 'numbers' || file.extension === 'xlsx') {
         return countPdfOperations(doc, MAX_OPERATION_PAGES).then(opCount => {
@@ -42625,6 +42694,9 @@ class DocBaseViewer extends viewers_BaseViewer {
       }
       return doc;
     }).then(doc => {
+      if (this.isDestroyed()) {
+        return;
+      }
       this.pdfLinkService.setDocument(doc, pdfUrl);
       this.pdfViewer.setDocument(doc);
       if (this.shouldThumbnailsBeToggled()) {
@@ -42635,6 +42707,9 @@ class DocBaseViewer extends viewers_BaseViewer {
       // store a reference to the doc for docfirstpages
       this.doc = doc;
     }).catch(err => {
+      if (this.isDestroyed()) {
+        return;
+      }
       console.error(err); // eslint-disable-line
       // pdf.js gives us the status code in their error message
@@ -43527,9 +43602,35 @@ class DocBaseViewer extends viewers_BaseViewer {
     if (this.annotator) {
       this.annotator.toggleAnnotationMode(AnnotationMode.NONE);
     }
+    this.emitMetric({
+      name: USER_DOCUMENT_GALLERY_EVENTS.OPEN,
+      data: this.pdfViewer?.pagesCount ?? 0
+    });
     this.emit(VIEWER_EVENT.galleryOpen);
   }
+  /**
+   * Called as the gallery closes, with the page the user landed on or null if they left without
+   * settling on one. Reported as two distinct metrics so the pick-through rate is measurable.
+   *
+   * @protected
+   * @param {number|null} landedPage - Page the gallery left the document on, or null if unchanged
+   * @return {void}
+   */
+  handleGalleryClose(landedPage) {
+    if (landedPage !== null) {
+      this.emitMetric({
+        name: USER_DOCUMENT_GALLERY_EVENTS.NAVIGATE,
+        data: landedPage
+      });
+    } else {
+      this.emitMetric({
+        name: USER_DOCUMENT_GALLERY_EVENTS.DISMISS,
+        data: this.pdfViewer?.pagesCount ?? 0
+      });
+    }
+  }
   /**
    * Called after the gallery closes. Restores REGION mode so the region-comment cursor is active.
    *
@@ -43789,9 +43890,12 @@ class DocBaseViewer extends viewers_BaseViewer {
    * Get a thumbnail image element
    *
    * @param {number} pageNumber - the page number
-   * @return {Promise} - promise resolves with the image HTMLElement or null if generation is in progress
+   * @return {Promise} - promise resolves with the image HTMLElement or null if unavailable or in progress
    */
   getThumbnail(pageNumber) {
+    if (this.isDestroyed()) {
+      return Promise.resolve(null);
+    }
     if (!this.advancedInsightsThumbs) {
       this.advancedInsightsThumbs = new lib_Thumbnail(this.pdfViewer);
     }

package/package.json CHANGED Viewed

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