npm - box-content-preview - Versions diffs - 3.77.0 → 3.78.0 - Mend

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

@@ -66,7 +66,7 @@
 .bp-SubtitlesToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-SubtitlesToggle:focus:not(:disabled),.bp-SubtitlesToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-SubtitlesToggle:focus:not(:disabled) svg,.bp-SubtitlesToggle:hover:not(:disabled) svg,.bp-SubtitlesToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-SubtitlesToggle.bp-is-active,.bp-SubtitlesToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-SubtitlesToggle.bp-is-active:focus:not(:disabled),.bp-SubtitlesToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-SubtitlesToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SubtitlesToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SubtitlesToggle:focus:not(:focus-visible){box-shadow:none}.bp-SubtitlesToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-SubtitlesToggle svg{width:32px;height:32px;padding:5px}.bp-SubtitlesToggle[aria-pressed=true] .bp-SubtitlesToggle-text{color:#fff;background-color:#0061d5}.bp-SubtitlesToggle-text{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#fff;font-weight:bold;font-size:12px;letter-spacing:.1em;background-color:rgba(0,0,0,.3);border-radius:4px}
 .bp-VideoControls{display:flex;flex-direction:column;width:100%;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);padding:40px 20px 8px}.bp-VideoControls .bp-FullscreenToggle{width:36px;height:40px}.bp-VideoControls-bar{display:flex;padding:0 10px 5px;display:grid;align-items:center}.bp-VideoControls-bar.bp-VideoControls-bar--two-groups{justify-content:flex-end}.bp-VideoControls-bar.bp-VideoControls-bar--two-groups .bp-VideoControls-group--play-pause{position:absolute;left:50%;transform:translateX(-50%)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups{grid-template-columns:repeat(3, 1fr)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups.bp-VideoControls-bar--narrow-video{grid-template-columns:repeat(2, 1fr)}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--annotations{justify-self:flex-start}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--play-pause{justify-self:center}.bp-VideoControls-bar.bp-VideoControls-bar--three-groups .bp-VideoControls-group--media-controls{justify-self:flex-end}.bp-VideoControls-group{display:flex;align-items:center}.bp-VideoControls-settings{position:relative}.bp-VideoControls-settings .bp-SettingsFlyout{right:15px}.bp-VideoControls-settings .bp-SettingsToggle-button{width:36px;height:40px}
 .bp-TimestampControl{position:relative;display:flex;align-items:center}.bp-TimestampControl-button,.bp-TimestampControl-static{display:flex;gap:4px;align-items:center;padding:6px 12px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;-webkit-user-select:none;user-select:none}.bp-TimestampControl-button{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;margin:0;background:transparent;border:0;border-radius:25px;cursor:pointer}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-TimestampControl-button:focus:not(:disabled) svg,.bp-TimestampControl-button:hover:not(:disabled) svg,.bp-TimestampControl-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-TimestampControl-button.bp-is-active,.bp-TimestampControl-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-TimestampControl-button.bp-is-active:focus:not(:disabled),.bp-TimestampControl-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-TimestampControl-button:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus:not(:focus-visible){box-shadow:none}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button.bp-is-open{background:transparent}.bp-TimestampControl-button:hover:not(:disabled){background:rgba(255,255,255,.08)}.bp-TimestampControl-separator,.bp-TimestampControl-duration{color:rgba(255,255,255,.8)}.bp-TimestampControl-chevron{width:16px;height:16px;margin-left:2px;fill:rgba(255,255,255,.8)}.bp-TimestampControl-flyout{position:absolute;bottom:calc(100% + 12px);left:50%;z-index:1;min-width:250px;padding:12px 8px;background:#fff;border-radius:16px;box-shadow:0 4px 12px 0 rgba(0,0,0,.15);transform:translateX(-50%)}.bp-TimestampControl-header{padding:6px 14px;color:#767676;font-weight:bold;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;-webkit-user-select:none;user-select:none}.bp-TimestampControl-listitem{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:6px 14px;color:#000;font-size:16px;font-family:Lato,Arial,sans-serif;line-height:24px;white-space:nowrap;border-radius:8px;outline:none;cursor:pointer}.bp-TimestampControl-listitem:hover,.bp-TimestampControl-listitem:focus{background:#f4f4f4}.bp-TimestampControl-check{flex:none;fill:#000}
-.bp-FilmstripV2{position:absolute;bottom:calc(100% + 12px);padding:12px;padding-bottom:8px;background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.15);visibility:hidden}.bp-FilmstripV2.bp-is-shown{visibility:visible}.bp-FilmstripV2-frame{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.bp-FilmstripV2-time{margin-top:8px;color:#000;font-size:13px;line-height:20px;text-align:center}
+.bp-FilmstripV2{position:absolute;bottom:calc(100% + 12px);padding:12px;padding-bottom:8px;background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.15);visibility:hidden}.bp-FilmstripV2.bp-is-shown{visibility:visible}.bp-FilmstripV2-frame{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.bp-FilmstripV2-frameImage{position:absolute;top:0;left:0;overflow:hidden;background-repeat:no-repeat;transform-origin:top left}.bp-FilmstripV2-frame .bp-crawler{position:relative;z-index:1}.bp-FilmstripV2-time{margin-top:8px;color:#000;font-size:13px;line-height:20px;text-align:center}
 .bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:12px;height:12px;overflow:hidden;border:0;border-radius:50%;outline:2px solid rgba(0,0,0,.5);box-shadow:0 0 0 0 #fff;transform:translate(-50%, 0);transform-origin:bottom center;transition:transform 150ms,box-shadow 150ms,outline 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.bp-MarkerAvatar-initial{display:grid;width:100%;height:100%;font-weight:bold;font-size:7px;line-height:1;text-align:center;text-transform:uppercase;place-items:center}.bp-MarkerAvatar-anonymousIcon{width:100%;height:100%;color:#222}
 .bp-MarkerAvatarStack{position:absolute;bottom:calc(100% + 4px);left:50%;display:flex;align-items:center;transform:translateX(-50%)}.bp-MarkerAvatarStack-item{position:relative;flex-shrink:0;padding:0;background:none;border:0;cursor:pointer;transition:margin 150ms}.bp-MarkerAvatarStack-item:not(:first-child){margin-left:-6px}.bp-MarkerAvatarStack-item .bp-MarkerAvatar{position:relative;bottom:auto;left:auto;display:block;transform:none}.bp-MarkerAvatarStack-item:hover,.bp-MarkerAvatarStack-item:focus-visible{z-index:1}.bp-MarkerAvatarStack-item:hover .bp-MarkerAvatar,.bp-MarkerAvatarStack-item:focus-visible .bp-MarkerAvatar{outline:0 solid transparent;box-shadow:0 0 0 2px #fff}.bp-TimeControlsV2-marker--group:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-TimeControlsV2-marker--group:focus-visible .bp-MarkerAvatarStack-item:not(:first-child),.bp-MarkerCluster:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-MarkerCluster:focus-within .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-MarkerAvatarStack-overflow{cursor:pointer}.bp-MarkerAvatarStack-overflowBadge{background-color:#6f6f6f}
 .bp-MarkerCluster{position:absolute;top:50%;z-index:1;height:8px;transform:translate(-2px, -50%);transition:transform 150ms}.bp-MarkerCluster:hover,.bp-MarkerCluster:focus-within{z-index:2;transform:translate(-2px, -50%) scale(1.5)}.bp-MarkerCluster:hover .bp-MarkerCluster-tick,.bp-MarkerCluster:focus-within .bp-MarkerCluster-tick{transform:none}.bp-MarkerCluster-tick{display:block;width:100%;height:100%;padding:0;background:#6f6f6f;border:1px solid #fff;border-radius:2px;cursor:pointer;transition:transform 150ms}

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.77.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.78.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 = {};
@@ -17085,7 +17085,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const Logger_CLIENT_NAME = "box-content-preview";
-const Logger_CLIENT_VERSION = "3.77.0";
+const Logger_CLIENT_VERSION = "3.78.0";
 /* eslint-enable no-undef */
 class Logger {
@@ -33757,6 +33757,7 @@ const FilmstripV2_FILMSTRIP_FRAMES_PER_ROW = 100;
 const FILMSTRIP_SOURCE_FRAME_HEIGHT = 90;
 const FILMSTRIP_DISPLAY_HEIGHT = 135;
 const FILMSTRIP_DISPLAY_WIDTH = 240;
+const FILMSTRIP_DISPLAY_SCALE = FILMSTRIP_DISPLAY_HEIGHT / FILMSTRIP_SOURCE_FRAME_HEIGHT;
 function FilmstripV2({
   aspectRatio = 0,
   fps,
@@ -33769,14 +33770,13 @@ function FilmstripV2({
 }) {
   const [isLoading, setIsLoading] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(true);
   const [imageWidth, setImageWidth] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
-  const frameNumber = Math.floor(time / interval);
-  const frameRow = Math.floor(frameNumber / FilmstripV2_FILMSTRIP_FRAMES_PER_ROW);
+  const frameNumber = Math.floor(time / interval); // Current frame based on current time
+  const frameRow = Math.floor(frameNumber / FilmstripV2_FILMSTRIP_FRAMES_PER_ROW); // Row number if there is more than one row
   const sourceFrameWidth = imageWidth ? Math.floor(imageWidth / FilmstripV2_FILMSTRIP_FRAMES_PER_ROW) : Math.floor(aspectRatio * FILMSTRIP_SOURCE_FRAME_HEIGHT) || Math.floor(FILMSTRIP_DISPLAY_WIDTH * (FILMSTRIP_SOURCE_FRAME_HEIGHT / FILMSTRIP_DISPLAY_HEIGHT));
-  const scale = FILMSTRIP_DISPLAY_HEIGHT / FILMSTRIP_SOURCE_FRAME_HEIGHT;
-  const displayWidth = Math.floor(sourceFrameWidth * scale) || FILMSTRIP_DISPLAY_WIDTH;
-  const backgroundLeft = -(frameNumber % FilmstripV2_FILMSTRIP_FRAMES_PER_ROW) * displayWidth;
-  const backgroundTop = -(frameRow * FILMSTRIP_DISPLAY_HEIGHT);
-  const backgroundWidth = imageWidth ? imageWidth * scale : undefined;
+  const frameBackgroundLeft = -(frameNumber % FilmstripV2_FILMSTRIP_FRAMES_PER_ROW) * sourceFrameWidth; // Frame position in its row
+  const frameBackgroundTop = -(frameRow * FILMSTRIP_SOURCE_FRAME_HEIGHT); // Row position in its filmstrip
+  const displayWidth = Math.floor(sourceFrameWidth * FILMSTRIP_DISPLAY_SCALE) || FILMSTRIP_DISPLAY_WIDTH;
   const cardWidth = displayWidth + 24;
   const filmstripLeft = Math.min(Math.max(0, position - cardWidth / 2), positionMax - cardWidth);
   __WEBPACK_EXTERNAL_MODULE_react_default__.useEffect(() => {
@@ -33800,14 +33800,21 @@ function FilmstripV2({
     className: "bp-FilmstripV2-frame",
     "data-testid": "bp-FilmstripV2-frame",
     style: {
-      backgroundImage: imageUrl ? `url('${imageUrl}')` : '',
-      backgroundPositionX: backgroundLeft,
-      backgroundPositionY: backgroundTop,
-      backgroundSize: backgroundWidth ? `${backgroundWidth}px auto` : undefined,
       height: FILMSTRIP_DISPLAY_HEIGHT,
       width: displayWidth
     }
-  }, isLoading && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+  }, !!imageUrl && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    className: "bp-FilmstripV2-frameImage",
+    "data-testid": "bp-FilmstripV2-frameImage",
+    style: {
+      backgroundImage: `url('${imageUrl}')`,
+      backgroundPositionX: frameBackgroundLeft,
+      backgroundPositionY: frameBackgroundTop,
+      height: FILMSTRIP_SOURCE_FRAME_HEIGHT,
+      transform: `scale(${FILMSTRIP_DISPLAY_SCALE})`,
+      width: sourceFrameWidth
+    }
+  }), isLoading && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
     className: "bp-crawler",
     "data-testid": "bp-FilmstripV2-crawler"
   }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", null), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", null), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", null))), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
@@ -49577,6 +49584,13 @@ class Preview extends (events_default()) {
         return;
       }
+      // Server file info is authoritative: a video with no dash/mp4 will never play for this
+      // account (HD video is paid). Instant Preview may have mounted a jpg-only viewer from
+      // cache; throw error_account instead of waiting forever on an empty player.
+      if (this.isVideoFileByExtension() && !this.hasPlayableVideoReps(file)) {
+        throw new lib_PreviewError(ERROR_CODE.ACCOUNT, "This preview didn’t load because your account is unable to preview this file type. Please try to open or download the file to view.");
+      }
       // Should load viewer for first time if:
       //   - File isn't cached OR
       //   - Cached file doesn't have a valid structure

package/package.json CHANGED Viewed

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