box-content-preview 3.98.0 → 3.99.0

package/README.md

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

@@ -62,8 +62,8 @@
 .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,.bp-WaveformCommentMarkers--tape{padding:0;overflow:clip visible}.bp-WaveformCommentMarkers--tape{top:auto;bottom:100%;margin-bottom:12px}.bp-WaveformCommentMarkers-track{position:relative;width:100%;height:100%;overflow:visible}.bp-WaveformCommentMarkers--zoomed .bp-WaveformCommentMarkers-track,.bp-WaveformCommentMarkers--tape .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:auto;height:auto;padding:0;background:none;border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;appearance:none;pointer-events:auto;overflow:visible;outline:none;transition:box-shadow 150ms}.bp-WaveformCommentMarkers-marker:focus,.bp-WaveformCommentMarkers-marker:focus-visible{outline:none}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar{overflow:visible;isolation:isolate;cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar img{cursor:pointer}.bp-WaveformCommentMarkers-marker .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{position:relative;bottom:auto;left:auto;transform:none;transform-origin:center center}.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-MarkerAvatarStack{position:relative;bottom:auto;left:auto;transform:none}.bp-WaveformCommentMarkers-marker--group{width:auto}.bp-WaveformView:hover~.bp-WaveformCommentMarkers .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers:hover .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers:has(:focus-visible) .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 .bp-MarkerAvatarStack-item{cursor:pointer;transition:margin 150ms}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:hover,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:focus-visible{z-index:3}@media(prefers-reduced-motion: reduce){.bp-WaveformCommentMarkers-marker,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{transition:none}}
 .bp-WaveformGeneratingIndicator{display:flex;gap:4px;align-items:center;height:48px;padding:8px 16px 8px 12px;pointer-events:none}.bp-WaveformGeneratingIndicator-bars{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px}.bp-WaveformGeneratingIndicator-bar{width:2px;height:10px;background:rgba(255,255,255,.3);border-radius:6px;animation:bp-WaveformGeneratingIndicator-pulse .66s ease-in-out infinite}.bp-WaveformGeneratingIndicator-bar:nth-child(2){margin-left:2px;animation-delay:.1s}.bp-WaveformGeneratingIndicator-bar:last-child{margin-left:2px;animation-delay:.2s}.bp-WaveformGeneratingIndicator-label{color:#fff;font-weight:normal;font-size:14px;line-height:22px;white-space:nowrap}@keyframes bp-WaveformGeneratingIndicator-pulse{0%,80%,100%{background:rgba(255,255,255,.3);transform:scaleY(1.2)}40%{background:#fff;transform:scaleY(1.6)}}@media(prefers-reduced-motion: reduce){.bp-WaveformGeneratingIndicator-bar{animation:none;background:#fff;transform:none}}
 .bp-WaveformShuttle{position:absolute;top:48px;left:50%;z-index:6;display:flex;gap:4px;align-items:center;height:48px;padding:8px 16px;color:#fff;background:rgba(255,255,255,.1);border-radius:24px;box-shadow:0 2px 12px rgba(0,0,0,.08);transform:translateX(-50%);backdrop-filter:blur(60px);pointer-events:none;-webkit-user-select:none;user-select:none}.bp-WaveformShuttle-glyph{display:block;flex:0 0 auto;width:19px;height:11px}.bp-WaveformShuttle.bp-is-reverse .bp-WaveformShuttle-glyph{transform:scaleX(-1)}.bp-WaveformShuttle-rate{font-weight:500;font-size:14px;line-height:22px;white-space:nowrap}
-.bp-WaveformRange{position:absolute;inset:0;z-index:2;pointer-events:none}.bp-WaveformRange-region{position:absolute;top:50%;box-sizing:border-box;height:150px;pointer-events:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);border-radius:10px;box-shadow:0 0 0 1px #222;transform:translateY(-50%);transition:border-width 100ms ease,border-color 100ms ease}.bp-WaveformRange--swiping .bp-WaveformRange-region{visibility:hidden}.bp-WaveformRange--highlight .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle:hover) .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle--dragging) .bp-WaveformRange-region{border-width:2px;border-color:#fff}.bp-WaveformRange-handle{position:absolute;top:50%;z-index:1;width:24px;height:150px;pointer-events:auto;cursor:ew-resize;touch-action:none;transform:translate(-50%, -50%)}.bp-WaveformRange-handle--end{z-index:2}.bp-WaveformRange-handleGrip{position:absolute;top:50%;left:50%;width:8px;height:20px;background:#fff;border:1px solid #222;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translate(-50%, -50%) scale(0.5);transition:opacity 100ms ease-in,transform 100ms ease-in}.bp-WaveformRange-handle:hover .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle:focus-visible .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle--dragging .bp-WaveformRange-handleGrip{opacity:1;transform:translate(-50%, -50%) scale(1);transition:opacity 150ms ease-out,transform 150ms ease-out}.bp-WaveformRange-comment{position:absolute;top:calc(50% - 75px);z-index:5;display:inline-flex;gap:8px;align-items:center;justify-content:center;box-sizing:border-box;height:48px;padding:8px 14px;color:rgba(255,255,255,.8);font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:22px;letter-spacing:.1px;white-space:nowrap;background:rgba(0,0,0,.8);border:0;backdrop-filter:blur(12px);border-radius:46px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12);transform:translate(-50%, calc(-100% - 36px));cursor:pointer;appearance:none;pointer-events:auto}.bp-WaveformRange-commentIcon{display:block;flex:0 0 auto;width:20px;height:20px}.bp-WaveformView--tape .bp-WaveformRange-comment{top:calc(50% - (100% + 10px) / 2)}.bp-WaveformRange-tooltip{position:absolute;top:100%;z-index:3;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformRange-tooltipTime{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}@media(prefers-reduced-motion: reduce){.bp-WaveformRange-region,.bp-WaveformRange-handleGrip{transition:none}}
-.bp-WaveformView{box-sizing:border-box;width:100%;height:206px;min-height:206px;padding:0 60px;overflow:visible;background:none;-webkit-tap-highlight-color:transparent}.bp-WaveformView.bp-WaveformView--zoomed,.bp-WaveformView.bp-WaveformView--tape{padding:0;touch-action:none}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas,.bp-WaveformView.bp-WaveformView--tape .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),.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){overscroll-behavior-x:none}.bp-WaveformView.bp-WaveformView--tape{flex:1 1 auto;height:100%;min-height:0}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas{height:100%}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){scrollbar-width:none}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-playhead,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-region,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-handle{height:calc(100% + 10px)}.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-hover--tape{top:-24px;left:50%;z-index:5;margin-top:0;transform:translate(-50%, -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}.bp-WaveformView--inert .bp-WaveformRange-handle,.bp-WaveformView--inert .bp-WaveformRange-comment{pointer-events:none;cursor:default}.bp-WaveformView:not(:hover) .bp-WaveformRange:not(.bp-WaveformRange--persist){opacity:.4}
+.bp-WaveformRange{position:absolute;inset:0;z-index:2;pointer-events:none}.bp-WaveformRange-region{position:absolute;top:50%;box-sizing:border-box;height:150px;pointer-events:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);border-radius:10px;box-shadow:0 0 0 1px #222;transform:translateY(-50%);transition:border-width 100ms ease,border-color 100ms ease}.bp-WaveformRange--swiping .bp-WaveformRange-region{visibility:hidden}.bp-WaveformRange--highlight .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle:hover) .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle--dragging) .bp-WaveformRange-region{border-width:2px;border-color:#fff}.bp-WaveformRange-handle{position:absolute;top:50%;z-index:1;width:24px;height:150px;pointer-events:auto;cursor:ew-resize;touch-action:none;transform:translate(-50%, -50%)}.bp-WaveformRange-handle--end{z-index:2}.bp-WaveformRange-handleGrip{position:absolute;top:50%;left:50%;width:8px;height:20px;background:#fff;border:1px solid #222;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translate(-50%, -50%) scale(0.5);transition:opacity 100ms ease-in,transform 100ms ease-in}.bp-WaveformRange-handle:hover .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle:focus-visible .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle--dragging .bp-WaveformRange-handleGrip{opacity:1;transform:translate(-50%, -50%) scale(1);transition:opacity 150ms ease-out,transform 150ms ease-out}.bp-WaveformRange-comment{position:absolute;top:calc(50% - 75px);z-index:5;display:inline-flex;gap:8px;align-items:center;justify-content:center;box-sizing:border-box;height:48px;padding:8px 14px;color:rgba(255,255,255,.8);font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:22px;letter-spacing:.1px;white-space:nowrap;background:rgba(0,0,0,.8);border:0;backdrop-filter:blur(12px);border-radius:46px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12);transform:translate(-50%, calc(-100% - 36px));cursor:pointer;appearance:none;pointer-events:auto}.bp-WaveformRange-comment--withClear{gap:4px;padding:8px 8px 8px 12px;cursor:default}.bp-WaveformRange-comment--clearOnly{width:48px;height:48px;padding:0;border-radius:50%}.bp-WaveformRange-commentLabel,.bp-WaveformRange-commentClear{display:inline-flex;align-items:center;justify-content:center;padding:0;color:inherit;font:inherit;letter-spacing:inherit;background:transparent;border:0;cursor:pointer;appearance:none}.bp-WaveformRange-commentLabel{gap:8px;height:32px;padding:0 6px}.bp-WaveformRange-commentDivider{flex:0 0 auto;width:1px;height:16px;background:rgba(255,255,255,.4)}.bp-WaveformRange-commentClear{width:32px;height:32px;border-radius:50%}.bp-WaveformRange-commentIcon{display:block;flex:0 0 auto;width:20px;height:20px;fill:currentcolor}.bp-WaveformView--tape .bp-WaveformRange-comment{top:calc(50% - (100% + 10px) / 2)}.bp-WaveformRange-tooltip{position:absolute;top:100%;z-index:3;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformRange-tooltipTime{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}@media(prefers-reduced-motion: reduce){.bp-WaveformRange-region,.bp-WaveformRange-handleGrip{transition:none}}
+.bp-WaveformView{box-sizing:border-box;width:100%;height:206px;min-height:206px;padding:0 60px;overflow:visible;background:none;-webkit-tap-highlight-color:transparent}.bp-WaveformView.bp-WaveformView--zoomed,.bp-WaveformView.bp-WaveformView--tape{padding:0;touch-action:none}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas,.bp-WaveformView.bp-WaveformView--tape .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),.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){overscroll-behavior-x:none}.bp-WaveformView.bp-WaveformView--tape{flex:1 1 auto;height:100%;min-height:0}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas{height:100%}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){scrollbar-width:none}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-playhead,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-region,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-handle{height:calc(100% + 10px)}.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-hover--tape{top:-24px;left:50%;z-index:5;margin-top:0;transform:translate(-50%, -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}.bp-WaveformView--inert .bp-WaveformRange-handle,.bp-WaveformView--inert .bp-WaveformRange-comment,.bp-WaveformView--inert .bp-WaveformRange-commentLabel,.bp-WaveformView--inert .bp-WaveformRange-commentClear{pointer-events:none;cursor:default}.bp-WaveformView:not(:hover) .bp-WaveformRange:not(.bp-WaveformRange--persist){opacity:.4}
 .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}
 .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-has-multiplier{padding:4px 4px 4px 12px}.bp-WaveformZoomControl.bp-has-multiplier:not(.bp-is-open){width:88px}.bp-WaveformZoomControl.bp-is-open{gap:8px;width:207px}.bp-WaveformZoomControl.bp-is-open.bp-has-multiplier{width:264px}.bp-WaveformZoomControl-multiplier{display:flex;flex:0 0 32px;order:-3;align-items:center;justify-content:center;width:32px;height:32px;color:#fff;font-weight:500;font-size:14px;line-height:22px;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.bp-WaveformZoomControl-divider{display:none;flex:0 0 1px;order:-2;width:1px;height:28px;background:rgba(255,255,255,.3)}.bp-WaveformZoomControl.bp-is-open.bp-has-multiplier .bp-WaveformZoomControl-divider{display:block}.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}}
 .bp-MP3ControlsRoot:has(.bp-MP3ControlsV2){position:absolute;inset:0;width:100%;height:100%;transform:none;pointer-events:none}.bp-MP3ControlsV2{--bp-waveform-bar-min: 140px;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-stage:has(.bp-WaveformView--tape) .bp-MP3ControlsV2-waveform{display:flex;flex-direction:column;height:max(var(--bp-waveform-bar-min, 140px), 25%);min-height:0}.bp-MP3ControlsV2-waveformZoom{position:absolute;top:48px;right:48px;z-index:4;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}

package/dist/lib/index.js

@@ -1029,7 +1029,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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.98.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.99.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 = {};
@@ -2027,6 +2027,29 @@ function IconChevronUpMedium24(props) {
 
 /***/ },
 
+/***/ 8950
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function IconExit24(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
+    focusable: "false",
+    height: 24,
+    viewBox: "0 0 19 19",
+    width: 24
+  }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "m10 8.232 5.227-5.227a.625.625 0 0 1 .884 0l.884.884a.625.625 0 0 1 0 .884L11.767 10l5.228 5.227a.625.625 0 0 1 0 .884l-.884.884a.625.625 0 0 1-.884 0L10 11.767l-5.227 5.228a.625.625 0 0 1-.884 0l-.884-.884a.625.625 0 0 1 0-.884L8.233 10 3.005 4.772a.625.625 0 0 1 0-.883l.884-.884a.625.625 0 0 1 .884 0L10 8.233z"
+  }));
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconExit24);
+
+/***/ },
+
 /***/ 7502
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -5648,6 +5671,8 @@ function IconComment24(props) {
   }));
 }
 /* harmony default export */ const icons_IconComment24 = (IconComment24);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconExit24.tsx
+var IconExit24 = __webpack_require__(8950);
 ;// ./src/lib/viewers/media/waveform/WaveformRangeSelection.scss
 // extracted by mini-css-extract-plugin
 
@@ -5660,6 +5685,10 @@ function IconComment24(props) {
 
 
 
+
+function stopRangeEvent(event) {
+  event.stopPropagation();
+}
 function offsetLeftCss(base, offsetPx) {
   if (!offsetPx) {
     return base;
@@ -5690,6 +5719,7 @@ function applyRegion(el, startSec, endSec, durationSec, viewport, collapsed) {
   el.style.width = `calc(${end} - ${start} + ${constants/* WAVEFORM_RANGE_HANDLE_LINE_PX */.h1}px)`;
 }
 const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(function WaveformRangeSelection({
+  cameraMode = 'desktop',
   currentTimeSec = 0,
   durationSec,
   getPlayheadSec,
@@ -5697,11 +5727,12 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   interactive = true,
   isHighlighted = false,
   keepHighlight = true,
-  onDragCreate,
   onDragChange,
+  onDragCreate,
   onDragPointerX,
   onPreviewChange,
   onRangeChange,
+  onRangeClear,
   range,
   readOnly = false,
   viewport
@@ -5712,6 +5743,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const endHandleRef = (0,external_react_.useRef)(null);
   const tooltipRef = (0,external_react_.useRef)(null);
   const commentRef = (0,external_react_.useRef)(null);
+  const commentButtonRef = commentRef;
+  const commentPillRef = commentRef;
   const dragRef = (0,external_react_.useRef)(null);
   const replayDragRef = (0,external_react_.useRef)(() => undefined);
   const rangeRef = (0,external_react_.useRef)(range);
@@ -5737,7 +5770,9 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const durationMs = (0,waveform_range/* durationMsFromSec */.uH)(durationSec);
   const displayed = dragRange ?? (0,waveform_range/* resolveRange */.Ss)(range, durationMs);
   displayedRef.current = displayed;
-  const showCommentButton = !readOnly && Boolean(onDragCreate) && displayed.startMs !== displayed.endMs && activeHandle == null;
+  const isRangeOpen = displayed.startMs !== displayed.endMs && activeHandle == null;
+  const showCommentButton = !readOnly && Boolean(onDragCreate) && isRangeOpen;
+  const showClearOnly = cameraMode === 'tape' && readOnly && onRangeClear != null && isRangeOpen;
   const syncPositions = (0,external_react_.useCallback)((next, nextViewport, nextDurationSec) => {
     displayedRef.current = next;
     const collapsed = next.startMs === next.endMs;
@@ -5771,7 +5806,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   }), [refreshRangePositions]);
   (0,external_react_.useLayoutEffect)(() => {
     syncPositions(displayedRef.current, viewportRef.current, durationSec);
-  }, [activeHandle, displayed.endMs, displayed.startMs, durationSec, showCommentButton, syncPositions]);
+  }, [activeHandle, displayed.endMs, displayed.startMs, durationSec, showClearOnly, showCommentButton, syncPositions]);
   (0,external_react_.useLayoutEffect)(() => {
     const next = (0,waveform_viewport/* createWaveformViewport */.eq)({
       durationSec: viewport.durationSec,
@@ -5954,22 +5989,67 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const tooltipMs = tooltipHandle === 'start' ? displayed.startMs : displayed.endMs;
   const collapsed = displayed.startMs === displayed.endMs;
   const highlight = isHighlighted || collapsed;
-  const commentButton = showCommentButton && onDragCreate ? /*#__PURE__*/external_react_["default"].createElement("button", {
-    ref: commentRef,
-    className: "bp-WaveformRange-comment",
-    "data-testid": "bp-waveform-range-comment",
-    onClick: event => {
-      event.stopPropagation();
-      onDragCreate();
-    },
-    onPointerDown: event => {
-      event.stopPropagation();
-    },
-    type: "button"
-  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconComment24, {
+  const commentLabel = /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(icons_IconComment24, {
     "aria-hidden": "true",
     className: "bp-WaveformRange-commentIcon"
-  }), "Comment") : null;
+  }), "Comment");
+  const isTapeClearAvailable = cameraMode === 'tape' && onRangeClear != null;
+  let commentButton = null;
+  if (showClearOnly && onRangeClear) {
+    commentButton = /*#__PURE__*/external_react_["default"].createElement("button", {
+      ref: commentButtonRef,
+      "aria-label": "Clear",
+      className: "bp-WaveformRange-comment bp-WaveformRange-comment--clearOnly",
+      "data-testid": "bp-waveform-range-clear",
+      onClick: event => {
+        stopRangeEvent(event);
+        onRangeClear();
+      },
+      onPointerDown: stopRangeEvent,
+      onPointerUp: stopRangeEvent,
+      type: "button"
+    }, /*#__PURE__*/external_react_["default"].createElement(IconExit24/* default */.A, {
+      "aria-hidden": "true",
+      className: "bp-WaveformRange-commentIcon"
+    }));
+  } else if (showCommentButton && onDragCreate) {
+    const commentAction = /*#__PURE__*/external_react_["default"].createElement("button", {
+      ref: isTapeClearAvailable ? undefined : commentButtonRef,
+      className: isTapeClearAvailable ? 'bp-WaveformRange-commentLabel' : 'bp-WaveformRange-comment',
+      "data-testid": "bp-waveform-range-comment",
+      onClick: event => {
+        stopRangeEvent(event);
+        onDragCreate();
+      },
+      onPointerDown: stopRangeEvent,
+      onPointerUp: stopRangeEvent,
+      type: "button"
+    }, commentLabel);
+    commentButton = isTapeClearAvailable ? /*#__PURE__*/external_react_["default"].createElement("div", {
+      ref: commentPillRef,
+      className: "bp-WaveformRange-comment bp-WaveformRange-comment--withClear",
+      "data-testid": "bp-waveform-range-comment-pill",
+      onPointerDown: stopRangeEvent,
+      onPointerUp: stopRangeEvent
+    }, commentAction, /*#__PURE__*/external_react_["default"].createElement("span", {
+      "aria-hidden": "true",
+      className: "bp-WaveformRange-commentDivider"
+    }), /*#__PURE__*/external_react_["default"].createElement("button", {
+      "aria-label": "Clear",
+      className: "bp-WaveformRange-commentClear",
+      "data-testid": "bp-waveform-range-clear",
+      onClick: event => {
+        stopRangeEvent(event);
+        onRangeClear();
+      },
+      onPointerDown: stopRangeEvent,
+      onPointerUp: stopRangeEvent,
+      type: "button"
+    }, /*#__PURE__*/external_react_["default"].createElement(IconExit24/* default */.A, {
+      "aria-hidden": "true",
+      className: "bp-WaveformRange-commentIcon"
+    }))) : commentAction;
+  }
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: rootRef,
     className: classnames_default()('bp-WaveformRange', {
@@ -6293,6 +6373,8 @@ function WaveformView({
   const activeRange = (isRangeDragging ? previewRange ?? createRange : createRange) ?? range;
   const activeRangeRef = (0,external_react_.useRef)(activeRange);
   activeRangeRef.current = activeRange;
+  const viewedRangeRef = (0,external_react_.useRef)(false);
+  viewedRangeRef.current = rangeReadOnly && createRange == null;
   const durationMs = (0,waveform_range/* durationMsFromSec */.uH)(durationSec);
   const rangeStartMs = activeRange?.startMs;
   const rangeEndMs = activeRange?.endMs;
@@ -6555,7 +6637,8 @@ function WaveformView({
       }
       const rangeDraft = activeRangeRef.current;
       const timeSec = relativeX * durationSecRef.current;
-      if (rangeDraft && !(0,waveform_range/* isRangeCollapsed */.BT)(rangeDraft)) {
+      // A tape draft dismisses from the pill. A viewed range, and desktop, still clear on click-outside.
+      if ((cameraModeRef.current !== 'tape' || viewedRangeRef.current) && rangeDraft && !(0,waveform_range/* isRangeCollapsed */.BT)(rangeDraft)) {
         const pointerX = (0,waveform_viewport/* positionPxFromTime */.TO)(timeSec, viewportRef.current);
         if (!(0,waveform_range/* isPointerOverRange */.H5)({
           pointerX,
@@ -7122,6 +7205,7 @@ function WaveformView({
     "data-testid": "bp-waveform-playhead"
   }), showRangeOverlay && overlayRange && /*#__PURE__*/external_react_["default"].createElement(waveform_WaveformRangeSelection, {
     ref: rangeLayerRef,
+    cameraMode: cameraMode,
     currentTimeSec: currentTime,
     durationSec: durationSec,
     getPlayheadSec: getPlayheadSec,
@@ -7136,6 +7220,7 @@ function WaveformView({
     },
     onPreviewChange: setPreviewRange,
     onRangeChange: interactive && !isOverlayReadOnly ? onRangeChange : undefined,
+    onRangeClear: onRangeClear,
     range: overlayRange,
     readOnly: isOverlayReadOnly,
     viewport: viewport
@@ -24883,7 +24968,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.98.0";
+const CLIENT_VERSION = "3.99.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -28395,20 +28480,8 @@ function IconPencilScribbleMedium24(_ref) {
   }));
 }
 /* harmony default export */ const icons_IconPencilScribbleMedium24 = (IconPencilScribbleMedium24);
-;// ./src/lib/viewers/controls/icons/IconExit24.tsx
-function IconExit24_extends() { return IconExit24_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, IconExit24_extends.apply(null, arguments); }
-
-function IconExit24(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", IconExit24_extends({
-    focusable: "false",
-    height: 24,
-    viewBox: "0 0 19 19",
-    width: 24
-  }, props), /*#__PURE__*/external_react_.createElement("path", {
-    d: "m10 8.232 5.227-5.227a.625.625 0 0 1 .884 0l.884.884a.625.625 0 0 1 0 .884L11.767 10l5.228 5.227a.625.625 0 0 1 0 .884l-.884.884a.625.625 0 0 1-.884 0L10 11.767l-5.227 5.228a.625.625 0 0 1-.884 0l-.884-.884a.625.625 0 0 1 0-.884L8.233 10 3.005 4.772a.625.625 0 0 1 0-.883l.884-.884a.625.625 0 0 1 .884 0L10 8.233z"
-  }));
-}
-/* harmony default export */ const icons_IconExit24 = (IconExit24);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconExit24.tsx
+var IconExit24 = __webpack_require__(8950);
 ;// ./src/lib/viewers/controls/icons/IconTextHighlightMedium24.tsx
 function IconTextHighlightMedium24_extends() { return IconTextHighlightMedium24_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, IconTextHighlightMedium24_extends.apply(null, arguments); }
 
@@ -28553,7 +28626,7 @@ function AnnotationsControls({
     mode: AnnotationMode.NONE,
     onClick: handleExitClick,
     title: "Exit Annotations"
-  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconExit24, null)), /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsButton, {
+  }, /*#__PURE__*/external_react_["default"].createElement(IconExit24/* default */.A, null)), /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsButton, {
     ref: annotationBtnRefs[AnnotationMode.DRAWING],
     "data-resin-target": "draw",
     "data-testid": "bp-AnnotationsControls-drawBtn",

package/package.json

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