box-content-preview 3.87.0 → 3.88.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
  1. package/README.md +7 -7
  2. package/dist/lib/index.css +1 -1
  3. package/dist/lib/index.js +91 -43
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
  [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
3
3
  [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
4
4
  [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
5
- [![version](https://img.shields.io/badge/version-v3.87.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
5
+ [![version](https://img.shields.io/badge/version-v3.88.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
6
6
  [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
7
7
 
8
8
  # [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
22
22
 
23
23
  ## Current Version
24
24
 
25
- - Version: v3.87.0
25
+ - Version: v3.88.0
26
26
  - Locale: en-US
27
27
 
28
- https://cdn01.boxcdn.net/platform/preview/3.87.0/en-US/preview.js
29
- https://cdn01.boxcdn.net/platform/preview/3.87.0/en-US/preview.css
28
+ https://cdn01.boxcdn.net/platform/preview/3.88.0/en-US/preview.js
29
+ https://cdn01.boxcdn.net/platform/preview/3.88.0/en-US/preview.css
30
30
 
31
31
  ## Supported Locales
32
32
 
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
52
52
  <title>Box Content Preview Demo</title>
53
53
 
54
54
  <!-- Latest version of Preview SDK for your locale -->
55
- <script src="https://cdn01.boxcdn.net/platform/preview/3.87.0/en-US/preview.js"></script>
55
+ <script src="https://cdn01.boxcdn.net/platform/preview/3.88.0/en-US/preview.js"></script>
56
56
  <link
57
57
  rel="stylesheet"
58
- href="https://cdn01.boxcdn.net/platform/preview/3.87.0/en-US/preview.css"
58
+ href="https://cdn01.boxcdn.net/platform/preview/3.88.0/en-US/preview.css"
59
59
  />
60
60
  </head>
61
61
  <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
76
76
 
77
77
  1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
78
78
 
79
- - Check out a specific version with `git checkout v3.87.0`
79
+ - Check out a specific version with `git checkout v3.88.0`
80
80
  - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
81
81
 
82
82
  2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`
package/dist/lib/index.css CHANGED
@@ -62,7 +62,7 @@
62
62
  .bp-WaveformCommentMarkers{position:absolute;top:-2px;right:0;left:0;z-index:4;box-sizing:border-box;height:24px;padding:0 60px;overflow:visible;pointer-events:auto}.bp-WaveformCommentMarkers--zoomed{padding:0;overflow:clip visible}.bp-WaveformCommentMarkers-track{position:relative;width:100%;height:100%;overflow:visible}.bp-WaveformCommentMarkers--zoomed .bp-WaveformCommentMarkers-track{overflow:clip visible}.bp-WaveformCommentMarkers-marker{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:none;border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;appearance:none;pointer-events:auto;transition:transform 150ms,box-shadow 150ms}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar{position:relative;bottom:auto;left:auto;overflow:hidden;isolation:isolate;outline:none;box-shadow:none;transform:none;transform-origin:center center;cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar img,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar img{cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar::after{position:absolute;z-index:1;inset:0;background:#000;border-radius:50%;opacity:.4;pointer-events:none;content:"";transition:opacity 150ms}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge),.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge){background-color:#000}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar-initial{font-size:11px}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack{position:relative;bottom:auto;left:auto;transform:none}.bp-WaveformCommentMarkers-marker--group{width:auto}.bp-WaveformCommentMarkers-marker--group:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-WaveformCommentMarkers-marker--group:focus-within .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-WaveformCommentMarkers:hover .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group).bp-WaveformCommentMarkers-marker--selected .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item--selected .bp-MarkerAvatar::after{opacity:0}.bp-WaveformCommentMarkers-marker--selected{z-index:3}.bp-WaveformCommentMarkers-marker:hover,.bp-WaveformCommentMarkers-marker:focus-within{z-index:4}.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group):hover,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group):focus-visible{transform:translate(-50%, -50%) scale(1.2)}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item{border-radius:50%;transform-origin:center center;cursor:pointer;transition:margin 150ms,transform 150ms,box-shadow 150ms}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:hover,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:focus-visible{z-index:2;transform:scale(1.2)}.bp-WaveformCommentMarkers-marker--selected:not(.bp-WaveformCommentMarkers-marker--group){box-shadow:0 0 0 2px #fff}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item--selected{z-index:2;box-shadow:0 0 0 2px #fff}@media(prefers-reduced-motion: reduce){.bp-WaveformCommentMarkers-marker,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{transition:none}.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group):hover,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group):focus-visible{transform:translate(-50%, -50%)}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:hover,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:focus-visible{transform:none}}
63
63
  .bp-WaveformView{box-sizing:border-box;width:100%;height:206px;min-height:206px;padding:0 60px;overflow:visible;background:none}.bp-WaveformView.bp-WaveformView--zoomed{padding:0;touch-action:none}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas{overflow:hidden;mask-image:linear-gradient(to right, transparent, #000 92px, #000 calc(100% - 92px), transparent)}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas>*::part(scroll){overscroll-behavior-x:none}.bp-WaveformView-track{position:relative;display:flex;align-items:center;width:100%;height:100%;cursor:pointer}.bp-WaveformView-canvas{z-index:0;width:100%;height:140px}.bp-WaveformView-playhead{position:absolute;top:50%;left:0;z-index:1;width:2px;height:150px;pointer-events:none;background:linear-gradient(#2487ff, #006bed);border-radius:1px;box-shadow:0 0 0 1px #222,0 0 10px 0 rgba(36,135,255,.3);transform:translate(-50%, -50%)}.bp-WaveformView-hover{position:absolute;top:100%;z-index:2;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformView-hoverTime{padding:4px 10px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:rgba(34,34,34,.92);border:1px solid rgba(255,255,255,.18);border-radius:8px}.bp-WaveformView--inert{pointer-events:none}.bp-WaveformView--inert .bp-WaveformView-track{cursor:default}
64
64
  .bp-SliderControl{outline:0;position:relative;cursor:pointer}.bp-SliderControl:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SliderControl: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-SliderControl:focus:not(:focus-visible){box-shadow:none}.bp-SliderControl-thumb{position:absolute;top:calc(50% - 6px);width:12px;height:12px;margin-left:-6px;background:#0061d5;border:0;border-radius:12px;cursor:pointer}.bp-SliderControl-track{position:absolute;inset:0;height:3px;margin:auto 3px;background:transparent linear-gradient(#fff, #fff) no-repeat center border-box}
65
- .bp-WaveformZoomControl{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:flex-end;width:48px;height:48px;padding:4px;overflow:hidden;background:rgba(255,255,255,.1);border-radius:32px;box-shadow:0 2px 12px rgba(0,0,0,.08);backdrop-filter:blur(60px);transition:width 150ms ease-out,gap 150ms ease-out}.bp-WaveformZoomControl.bp-is-open{gap:8px;width:178px}.bp-WaveformZoomControl-flyout{flex:0 0 auto;width:0;height:8px;overflow:hidden;transition:width 150ms ease-out}.bp-WaveformZoomControl-flyout.bp-is-open{width:103px}.bp-WaveformZoomControl-slider{width:103px;height:8px}.bp-WaveformZoomControl-slider .bp-SliderControl-track{height:8px;margin:0;background:rgba(255,255,255,.3);background-image:none;border-radius:20px}.bp-WaveformZoomControl-slider .bp-SliderControl-track::after{position:absolute;top:0;left:0;width:calc(8px + 95px * var(--bp-zoom-t, 0));height:8px;background:rgba(255,255,255,.9);border-radius:20px;content:""}.bp-WaveformZoomControl-slider .bp-SliderControl-thumb{display:none}.bp-WaveformZoomControl-toggle{position:relative;z-index:1;display:flex;flex:0 0 40px;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:rgba(255,255,255,.8);background:transparent;border:0;border-radius:50%;cursor:pointer}.bp-WaveformZoomControl-toggle svg{width:24px;height:24px;padding:0}@media(prefers-reduced-motion: reduce){.bp-WaveformZoomControl,.bp-WaveformZoomControl-flyout{transition:none}}
65
+ .bp-WaveformZoomControl{display:flex;flex-direction:row;gap:0;align-items:center;justify-content:flex-end;width:48px;height:48px;padding:4px;overflow:hidden;background:rgba(255,255,255,.1);border-radius:32px;box-shadow:0 2px 12px rgba(0,0,0,.08);backdrop-filter:blur(60px);transition:width 150ms ease-out,gap 150ms ease-out}.bp-WaveformZoomControl.bp-is-open{gap:8px;width:207px}.bp-WaveformZoomControl-flyout{display:flex;flex:0 0 auto;order:-1;gap:8px;align-items:center;width:0;height:40px;overflow:hidden;transition:width 150ms ease-out}.bp-WaveformZoomControl-flyout.bp-is-open{width:151px}.bp-WaveformZoomControl-slider{width:103px;height:8px}.bp-WaveformZoomControl-slider .bp-SliderControl-track{height:8px;margin:0;background:rgba(255,255,255,.3);background-image:none;border-radius:20px}.bp-WaveformZoomControl-slider .bp-SliderControl-track::after{position:absolute;top:0;left:0;width:calc(8px + 95px * var(--bp-zoom-t, 0));height:8px;background:rgba(255,255,255,.9);border-radius:20px;content:""}.bp-WaveformZoomControl-slider .bp-SliderControl-thumb{display:none}.bp-WaveformZoomControl-button{position:relative;z-index:1;display:flex;flex:0 0 40px;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:#fff;background:transparent;border:0;border-radius:50%;cursor:pointer}.bp-WaveformZoomControl-button[aria-disabled=true]{cursor:default;opacity:.3}.bp-WaveformZoomControl-button svg{width:20px;height:20px;padding:0}@media(prefers-reduced-motion: reduce){.bp-WaveformZoomControl,.bp-WaveformZoomControl-flyout{transition:none}}
66
66
  .bp-MP3ControlsRoot:has(.bp-MP3ControlsV2){position:absolute;inset:0;width:100%;height:100%;transform:none;pointer-events:none}.bp-MP3ControlsV2{position:relative;width:100%;max-width:none;height:100%;background:transparent;pointer-events:none}.bp-MP3ControlsV2-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0;pointer-events:none}.bp-MP3ControlsV2-stage .bp-WaveformView,.bp-MP3ControlsV2-stage .bp-MP3ControlsV2-waveform,.bp-MP3ControlsV2-stage .bp-WaveformCommentMarkers{pointer-events:auto}.bp-MP3ControlsV2-waveform{position:relative;width:100%;overflow:visible}.bp-MP3ControlsV2-waveformZoom{position:absolute;top:48px;right:48px;z-index:3;pointer-events:none}.bp-MP3ControlsV2-waveformZoom .bp-WaveformZoomControl{pointer-events:auto}.bp-MP3ControlsV2-playOverlay{position:absolute;top:50%;left:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;background:rgba(0,0,0,.5);border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;pointer-events:auto}.bp-MP3ControlsV2-playOverlay svg{width:48px;height:48px;fill:#fff}.bp-MP3ControlsV2-stage .bp-media-buffering-spinner{z-index:2;pointer-events:none}.bp-MP3ControlsV2-bar{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:30px 58px 25px;background:linear-gradient(to top, black, rgba(0, 0, 0, 0));pointer-events:auto}.bp-MP3ControlsV2-group{display:flex;gap:12px;align-items:center}.bp-MP3ControlsV2-divider{width:1px;height:24px;background-color:rgba(255,255,255,.1);border-radius:1px}.bp-MP3ControlsV2 .bp-MP3Controls-settings{position:relative}.bp-MP3ControlsV2 .bp-MP3Controls-settings .bp-SettingsFlyout{right:15px}.bp-MP3ControlsV2 .bp-MP3Controls-settings .bp-SettingsToggle-button{width:36px;height:40px}
67
67
  .bp-Filmstrip{position:absolute;bottom:100%;overflow:hidden;background:transparent;box-shadow:0 0 1px #464a4f;visibility:hidden}.bp-Filmstrip.bp-is-shown{visibility:visible}.bp-Filmstrip-frame{display:flex;align-items:center;justify-content:center}.bp-Filmstrip-time{height:20px;color:#fff;font-size:13px;line-height:20px;text-align:center;background-color:#222}
68
68
  .bp-TimeControls{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControls-slider{height:18px}.bp-TimeControls-slider .bp-SliderControl-thumb{transform:scale(0);transition:transform 100ms ease;will-change:transform}.bp-TimeControls-slider .bp-SliderControl-track{backface-visibility:hidden;transition:transform 100ms ease;will-change:transform}.bp-TimeControls-slider.bp-is-scrubbing .bp-SliderControl-thumb,.bp-TimeControls-slider:focus .bp-SliderControl-thumb,.bp-TimeControls-slider:hover .bp-SliderControl-thumb{transform:scale(1)}.bp-TimeControls-slider.bp-is-scrubbing .bp-SliderControl-track,.bp-TimeControls-slider:focus .bp-SliderControl-track,.bp-TimeControls-slider:hover .bp-SliderControl-track{transform:scaleY(2)}
package/dist/lib/index.js CHANGED
@@ -1010,7 +1010,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
1010
1010
  const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
1011
1011
  const CLIENT_NAME_KEY = 'box_client_name';
1012
1012
  const CLIENT_VERSION_KEY = 'box_client_version';
1013
- const CLIENT_VERSION = "3.87.0"; // eslint-disable-line no-undef
1013
+ const CLIENT_VERSION = "3.88.0"; // eslint-disable-line no-undef
1014
1014
  const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
1015
1015
  const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
1016
1016
  const PROMISE_MAP = {};
@@ -4385,7 +4385,7 @@ function getPdfjsWorkerSrc() {
4385
4385
 
4386
4386
  /***/ },
4387
4387
 
4388
- /***/ 9286
4388
+ /***/ 6180
4389
4389
  (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4390
4390
 
4391
4391
 
@@ -6105,24 +6105,66 @@ function WaveformView({
6105
6105
  // EXTERNAL MODULE: ./node_modules/classnames/index.js
6106
6106
  var classnames = __webpack_require__(2485);
6107
6107
  var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
6108
- ;// ./src/lib/viewers/controls/icons/IconZoom24.tsx
6108
+ ;// ./src/lib/viewers/controls/icons/IconZoomIn24.tsx
6109
6109
 
6110
- function IconZoom24() {
6110
+ function IconZoomIn24() {
6111
6111
  return /*#__PURE__*/external_react_.createElement("svg", {
6112
6112
  focusable: false,
6113
6113
  height: 24,
6114
6114
  viewBox: "0 0 24 24",
6115
6115
  width: 24
6116
- }, /*#__PURE__*/external_react_.createElement("path", {
6117
- d: "M2 12h20M6 8l-4 4 4 4M18 8l4 4-4 4",
6116
+ }, /*#__PURE__*/external_react_.createElement("circle", {
6117
+ cx: "10",
6118
+ cy: "10",
6119
+ fill: "none",
6120
+ r: "6.25",
6121
+ stroke: "currentColor",
6122
+ strokeWidth: "1.75"
6123
+ }), /*#__PURE__*/external_react_.createElement("path", {
6124
+ d: "M14.5 14.5 20 20",
6118
6125
  fill: "none",
6119
6126
  stroke: "currentColor",
6120
6127
  strokeLinecap: "round",
6121
- strokeLinejoin: "round",
6122
- strokeWidth: "2"
6128
+ strokeWidth: "1.75"
6129
+ }), /*#__PURE__*/external_react_.createElement("path", {
6130
+ d: "M10 7.25v5.5M7.25 10h5.5",
6131
+ fill: "none",
6132
+ stroke: "currentColor",
6133
+ strokeLinecap: "round",
6134
+ strokeWidth: "1.75"
6123
6135
  }));
6124
6136
  }
6125
- /* harmony default export */ const icons_IconZoom24 = (IconZoom24);
6137
+ /* harmony default export */ const icons_IconZoomIn24 = (IconZoomIn24);
6138
+ ;// ./src/lib/viewers/controls/icons/IconZoomOut24.tsx
6139
+
6140
+ function IconZoomOut24() {
6141
+ return /*#__PURE__*/external_react_.createElement("svg", {
6142
+ focusable: false,
6143
+ height: 24,
6144
+ viewBox: "0 0 24 24",
6145
+ width: 24
6146
+ }, /*#__PURE__*/external_react_.createElement("circle", {
6147
+ cx: "10",
6148
+ cy: "10",
6149
+ fill: "none",
6150
+ r: "6.25",
6151
+ stroke: "currentColor",
6152
+ strokeWidth: "1.75"
6153
+ }), /*#__PURE__*/external_react_.createElement("path", {
6154
+ d: "M14.5 14.5 20 20",
6155
+ fill: "none",
6156
+ stroke: "currentColor",
6157
+ strokeLinecap: "round",
6158
+ strokeWidth: "1.75"
6159
+ }), /*#__PURE__*/external_react_.createElement("path", {
6160
+ d: "M7.25 10h5.5",
6161
+ fill: "none",
6162
+ stroke: "currentColor",
6163
+ strokeLinecap: "round",
6164
+ strokeWidth: "1.75"
6165
+ }));
6166
+ }
6167
+ /* harmony default export */ const icons_IconZoomOut24 = (IconZoomOut24);
6126
6168
  // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
6127
6169
  var MediaToggle = __webpack_require__(8997);
6128
6170
  // EXTERNAL MODULE: ./src/lib/viewers/controls/slider/SliderControl.tsx + 1 modules
@@ -6139,6 +6181,7 @@ var SliderControl = __webpack_require__(4937);
6139
6181
 
6140
6182
 
6141
6183
 
6184
+
6142
6185
  function WaveformZoomControl({
6143
6186
  isRevealed = false,
6144
6187
  maxZoom,
@@ -6148,39 +6191,25 @@ function WaveformZoomControl({
6148
6191
  const [isHovered, setHovered] = (0,external_react_.useState)(false);
6149
6192
  const [isFocused, setFocused] = (0,external_react_.useState)(false);
6150
6193
  const dismissTimerRef = (0,external_react_.useRef)(0);
6151
- const flyoutRef = (0,external_react_.useRef)(null);
6152
- const shouldFocusSliderRef = (0,external_react_.useRef)(false);
6153
6194
  const sliderId = `bp-waveform-zoom-slider${(0,external_react_.useId)()}`;
6154
6195
  const zoom = clampWaveformZoom(zoomLevel, maxZoom);
6155
6196
  const zoomValue = Math.round(sliderValueFromZoom(zoom, maxZoom));
6156
6197
  const isOpen = isHovered || isFocused || isRevealed;
6198
+ const isAtMinZoom = zoomValue <= 0;
6199
+ const isAtMaxZoom = zoomValue >= constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
6157
6200
  const clearDismiss = (0,external_react_.useCallback)(() => {
6158
6201
  window.clearTimeout(dismissTimerRef.current);
6159
6202
  dismissTimerRef.current = 0;
6160
6203
  }, []);
6161
6204
  (0,external_react_.useEffect)(() => () => window.clearTimeout(dismissTimerRef.current), []);
6162
- (0,external_react_.useLayoutEffect)(() => {
6163
- if (!isOpen || !shouldFocusSliderRef.current) {
6164
- return;
6165
- }
6166
- shouldFocusSliderRef.current = false;
6167
- flyoutRef.current?.querySelector('[role="slider"]')?.focus();
6168
- }, [isOpen]);
6169
6205
  const handleSlider = (0,external_react_.useCallback)(newValue => {
6170
6206
  onZoomChange(zoomFromSliderValue(newValue, maxZoom));
6171
6207
  }, [maxZoom, onZoomChange]);
6172
- const handleToggleClick = (0,external_react_.useCallback)(() => {
6173
- clearDismiss();
6174
- if (isOpen) {
6175
- shouldFocusSliderRef.current = false;
6176
- setFocused(false);
6177
- setHovered(false);
6178
- return;
6179
- }
6180
- shouldFocusSliderRef.current = true;
6181
- setFocused(true);
6182
- }, [clearDismiss, isOpen]);
6208
+ const handleStep = (0,external_react_.useCallback)(delta => {
6209
+ onZoomChange(zoomFromSliderValue(zoomValue + delta, maxZoom));
6210
+ }, [maxZoom, onZoomChange, zoomValue]);
6183
6211
  return /*#__PURE__*/external_react_["default"].createElement("div", {
6212
+ "aria-label": "Zoom",
6184
6213
  className: classnames_default()('bp-WaveformZoomControl', {
6185
6214
  'bp-is-open': isOpen
6186
6215
  }),
@@ -6204,14 +6233,37 @@ function WaveformZoomControl({
6204
6233
  dismissTimerRef.current = window.setTimeout(() => {
6205
6234
  setHovered(false);
6206
6235
  }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
6207
- }
6208
- }, /*#__PURE__*/external_react_["default"].createElement("div", {
6209
- ref: flyoutRef,
6236
+ },
6237
+ role: "group"
6238
+ }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
6239
+ "aria-disabled": isAtMaxZoom,
6240
+ className: "bp-WaveformZoomControl-button",
6241
+ "data-resin-target": "waveformZoomIn",
6242
+ "data-testid": "bp-waveform-zoom-in",
6243
+ onClick: () => {
6244
+ if (!isAtMaxZoom) {
6245
+ handleStep(constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
6246
+ }
6247
+ },
6248
+ title: "Zoom in"
6249
+ }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoomIn24, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
6210
6250
  "aria-hidden": !isOpen,
6211
6251
  className: classnames_default()('bp-WaveformZoomControl-flyout', {
6212
6252
  'bp-is-open': isOpen
6213
6253
  })
6214
- }, /*#__PURE__*/external_react_["default"].createElement(SliderControl/* default */.A, {
6254
+ }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
6255
+ "aria-disabled": isAtMinZoom,
6256
+ className: "bp-WaveformZoomControl-button",
6257
+ "data-resin-target": "waveformZoomOut",
6258
+ "data-testid": "bp-waveform-zoom-out",
6259
+ onClick: () => {
6260
+ if (!isAtMinZoom) {
6261
+ handleStep(-constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
6262
+ }
6263
+ },
6264
+ tabIndex: isOpen ? 0 : -1,
6265
+ title: "Zoom out"
6266
+ }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoomOut24, null)), /*#__PURE__*/external_react_["default"].createElement(SliderControl/* default */.A, {
6215
6267
  "aria-hidden": !isOpen,
6216
6268
  className: "bp-WaveformZoomControl-slider",
6217
6269
  "data-resin-target": "waveformZoomSlider",
@@ -6226,14 +6278,7 @@ function WaveformZoomControl({
6226
6278
  tabIndex: isOpen ? 0 : -1,
6227
6279
  title: "Zoom Slider",
6228
6280
  value: zoomValue
6229
- })), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
6230
- "aria-controls": sliderId,
6231
- "aria-expanded": isOpen,
6232
- className: "bp-WaveformZoomControl-toggle",
6233
- "data-resin-target": "waveformZoom",
6234
- onClick: handleToggleClick,
6235
- title: "Zoom"
6236
- }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoom24, null)));
6281
+ })));
6237
6282
  }
6238
6283
  ;// ./src/lib/viewers/media/MP3ControlsV2.scss
6239
6284
  // extracted by mini-css-extract-plugin
@@ -6489,6 +6534,7 @@ function isFpsAvailable(player) {
6489
6534
  /* harmony export */ LW: () => (/* binding */ WAVEFORM_ZOOM_MIN),
6490
6535
  /* harmony export */ Lu: () => (/* binding */ WAVEFORM_BAR_GAP),
6491
6536
  /* harmony export */ NM: () => (/* binding */ WAVEFORM_FOLLOW_INSET_PX),
6537
+ /* harmony export */ QD: () => (/* binding */ WAVEFORM_ZOOM_BUTTON_STEP),
6492
6538
  /* harmony export */ XS: () => (/* binding */ WAVEFORM_BAR_MIN_HEIGHT),
6493
6539
  /* harmony export */ Zs: () => (/* binding */ WAVEFORM_FOLLOW_SCROLL_SETTLE_MS),
6494
6540
  /* harmony export */ f3: () => (/* binding */ CLIENT_DECODE_PEAK_COUNT),
@@ -6532,6 +6578,8 @@ const WAVEFORM_ZOOM_MAX = 24;
6532
6578
  /** Visible window never shorter than this. */
6533
6579
  const WAVEFORM_MIN_VIEW_WINDOW_SEC = 4;
6534
6580
  const WAVEFORM_ZOOM_SLIDER_MAX = 100;
6581
+ /** One click on zoom in/out moves this many units on the 0–100 slider. */
6582
+ const WAVEFORM_ZOOM_BUTTON_STEP = 10;
6535
6583
  const WAVEFORM_ZOOM_DISMISS_MS = 250;
6536
6584
  const WAVEFORM_FOLLOW_INSET_PX = 200;
6537
6585
  const WAVEFORM_PLAYHEAD_JUMP_MS = 400;
@@ -22920,7 +22968,7 @@ class Browser {
22920
22968
  ;// ./src/lib/Logger.js
22921
22969
  /* eslint-disable no-undef */
22922
22970
  const CLIENT_NAME = "box-content-preview";
22923
- const CLIENT_VERSION = "3.87.0";
22971
+ const CLIENT_VERSION = "3.88.0";
22924
22972
  /* eslint-enable no-undef */
22925
22973
 
22926
22974
  class Logger {
@@ -35771,7 +35819,7 @@ class MP3Viewer extends media_MediaBaseViewer {
35771
35819
  * @return {Promise<{ default: Function }>} MP3ControlsV2 module
35772
35820
  */
35773
35821
  importV2Controls() {
35774
- return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 9286));
35822
+ return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 6180));
35775
35823
  }
35776
35824
 
35777
35825
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-content-preview",
3
- "version": "3.87.0",
3
+ "version": "3.88.0",
4
4
  "description": "Box Content Preview UI Element",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",