box-content-preview 3.97.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.97.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.97.0
+- Version: v3.99.0
 - Locale: en-US
 
-https://cdn01.boxcdn.net/platform/preview/3.97.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.97.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.97.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.97.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.97.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,11 +62,11 @@
 .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--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:6;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}
+.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}
 .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}
 .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)}
 .bp-MP3Controls{display:flex;flex-direction:column;width:360px;background-color:#000}.bp-MP3Controls-bar{display:flex;justify-content:space-between;padding:0 10px 5px}.bp-MP3Controls-group{display:flex;align-items:center}.bp-MP3Controls-settings{position:relative}.bp-MP3Controls-settings .bp-SettingsFlyout{right:15px}.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.97.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
 
@@ -5659,6 +5684,11 @@ function IconComment24(props) {
 
 
 
+
+
+function stopRangeEvent(event) {
+  event.stopPropagation();
+}
 function offsetLeftCss(base, offsetPx) {
   if (!offsetPx) {
     return base;
@@ -5689,16 +5719,20 @@ 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,
+  isSwiping = false,
   interactive = true,
   isHighlighted = false,
   keepHighlight = true,
-  onDragCreate,
   onDragChange,
+  onDragCreate,
+  onDragPointerX,
   onPreviewChange,
   onRangeChange,
+  onRangeClear,
   range,
   readOnly = false,
   viewport
@@ -5709,12 +5743,16 @@ 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);
   const displayedRef = (0,external_react_.useRef)((0,waveform_range/* resolveRange */.Ss)(range, (0,waveform_range/* durationMsFromSec */.uH)(durationSec)));
   const viewportRef = (0,external_react_.useRef)(viewport);
   const durationSecRef = (0,external_react_.useRef)(durationSec);
   const onDragChangeRef = (0,external_react_.useRef)(onDragChange);
+  const onDragPointerXRef = (0,external_react_.useRef)(onDragPointerX);
   const onPreviewChangeRef = (0,external_react_.useRef)(onPreviewChange);
   const onRangeChangeRef = (0,external_react_.useRef)(onRangeChange);
   const getPlayheadSecRef = (0,external_react_.useRef)(getPlayheadSec);
@@ -5724,6 +5762,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   rangeRef.current = range;
   durationSecRef.current = durationSec;
   onDragChangeRef.current = onDragChange;
+  onDragPointerXRef.current = onDragPointerX;
   onPreviewChangeRef.current = onPreviewChange;
   onRangeChangeRef.current = onRangeChange;
   getPlayheadSecRef.current = getPlayheadSec;
@@ -5731,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;
@@ -5749,18 +5790,27 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       comment.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)((next.startMs + next.endMs) / 2000, nextDurationSec, nextViewport);
     }
   }, []);
+  const refreshRangePositions = (0,external_react_.useCallback)(() => {
+    const drag = dragRef.current;
+    if (!drag) {
+      syncPositions(displayedRef.current, viewportRef.current, durationSecRef.current);
+      return;
+    }
+    replayDragRef.current(drag.lastClientX);
+  }, [syncPositions]);
   (0,external_react_.useImperativeHandle)(ref, () => ({
     applyViewport: nextViewport => {
       viewportRef.current = nextViewport;
-      syncPositions(displayedRef.current, nextViewport, durationSecRef.current);
+      refreshRangePositions();
     }
-  }), [syncPositions]);
+  }), [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,
+      gutterPx: viewport.gutterPx,
       heightPx: viewport.heightPx,
       maxZoom: viewport.maxZoom,
       scrollLeftPx: viewportRef.current.scrollLeftPx,
@@ -5768,8 +5818,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       zoomLevel: viewport.zoomLevel
     });
     viewportRef.current = next;
-    syncPositions(displayedRef.current, next, durationSecRef.current);
-  }, [syncPositions, viewport.durationSec, viewport.heightPx, viewport.maxZoom, viewport.widthPx, viewport.zoomLevel]);
+    refreshRangePositions();
+  }, [refreshRangePositions, viewport.durationSec, viewport.gutterPx, viewport.heightPx, viewport.maxZoom, viewport.widthPx, viewport.zoomLevel]);
   const endDrag = (0,external_react_.useCallback)(event => {
     const drag = dragRef.current;
     if (!drag || event.pointerId && drag.pointerId !== event.pointerId) {
@@ -5784,6 +5834,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     setActiveHandle(null);
     setDragRange(null);
     onDragChangeRef.current?.(false);
+    event.stopPropagation();
     const didChange = drag.range.startMs !== drag.originRange.startMs || drag.range.endMs !== drag.originRange.endMs;
     if (!didChange) {
       return;
@@ -5802,6 +5853,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     if (!root) {
       return;
     }
+    drag.lastClientX = event.clientX;
+    onDragPointerXRef.current?.(event.clientX);
     const rect = root.getBoundingClientRect();
     const pointerX = event.clientX - rect.left;
     const vp = viewportRef.current;
@@ -5813,6 +5866,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       timeMs: (0,waveform_range/* pointerTimeMs */.v2)(pointerX, vp)
     });
     if (drag.originMs === drag.range.startMs && drag.originMs === drag.range.endMs && pointerMs === drag.originMs) {
+      syncPositions(drag.range, vp, durationSecRef.current);
       return;
     }
     const next = (0,waveform_range/* dragRangeHandle */.Mo)({
@@ -5834,6 +5888,16 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       startMs: next.range.startMs
     });
   }, [currentTimeSec, syncPositions]);
+  replayDragRef.current = clientX => {
+    const drag = dragRef.current;
+    if (!drag || !Number.isFinite(clientX)) {
+      return;
+    }
+    moveDrag({
+      clientX,
+      pointerId: drag.pointerId
+    });
+  };
   const startDrag = (0,external_react_.useCallback)((handle, event) => {
     if (readOnly || !interactive || event.button > 1 || event.ctrlKey || event.metaKey) {
       return;
@@ -5843,6 +5907,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     const resolved = (0,waveform_range/* resolveRange */.Ss)(rangeRef.current, (0,waveform_range/* durationMsFromSec */.uH)(durationSecRef.current));
     dragRef.current = {
       handle,
+      lastClientX: event.clientX,
       originMs: handle === 'start' ? resolved.startMs : resolved.endMs,
       originRange: {
         endMs: resolved.endMs,
@@ -5851,6 +5916,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       pointerId: event.pointerId,
       range: resolved
     };
+    onDragPointerXRef.current?.(event.clientX);
     event.currentTarget.setPointerCapture(event.pointerId);
     setActiveHandle(handle);
     setDragRange(resolved);
@@ -5923,25 +5989,74 @@ 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: `bp-WaveformRange${keepHighlight ? ' bp-WaveformRange--persist' : ''}${highlight ? ' bp-WaveformRange--highlight' : ''}`,
+    className: classnames_default()('bp-WaveformRange', {
+      'bp-WaveformRange--highlight': highlight,
+      'bp-WaveformRange--persist': keepHighlight,
+      'bp-WaveformRange--swiping': collapsed && isSwiping
+    }),
     "data-collapsed": collapsed ? 'true' : 'false',
     "data-highlighted": highlight ? 'true' : 'false',
     "data-readonly": readOnly ? 'true' : 'false',
@@ -5952,7 +6067,9 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     "data-testid": "bp-waveform-range-region"
   }), !readOnly && /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: startHandleRef,
-    className: `bp-WaveformRange-handle bp-WaveformRange-handle--start${activeHandle === 'start' ? ' bp-WaveformRange-handle--dragging' : ''}`,
+    className: classnames_default()('bp-WaveformRange-handle', 'bp-WaveformRange-handle--start', {
+      'bp-WaveformRange-handle--dragging': activeHandle === 'start'
+    }),
     "data-testid": "bp-waveform-range-handle-start",
     onMouseMove: event => event.stopPropagation(),
     onPointerDown: onHandlePointerDown
@@ -5960,7 +6077,9 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     className: "bp-WaveformRange-handleGrip"
   })), !readOnly && /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: endHandleRef,
-    className: `bp-WaveformRange-handle bp-WaveformRange-handle--end${activeHandle === 'end' ? ' bp-WaveformRange-handle--dragging' : ''}`,
+    className: classnames_default()('bp-WaveformRange-handle', 'bp-WaveformRange-handle--end', {
+      'bp-WaveformRange-handle--dragging': activeHandle === 'end'
+    }),
     "data-testid": "bp-waveform-range-handle-end",
     onMouseMove: event => event.stopPropagation(),
     onPointerDown: onHandlePointerDown
@@ -6228,8 +6347,9 @@ function WaveformView({
   const isRangeDraggingRef = (0,external_react_.useRef)(false);
   const rangeRef = (0,external_react_.useRef)(range); // latest committed draft; drag-create must not start on top of an open span
   const createDragRef = (0,external_react_.useRef)(null);
+  const rangeDragPointerXRef = (0,external_react_.useRef)(null); // clientX while a handle or create-drag is down
   const removeCreateDragListenersRef = (0,external_react_.useRef)(null);
-  const skipNextSeekRef = (0,external_react_.useRef)(false);
+  const skipNextSeekRef = (0,external_react_.useRef)(false); // ignore the click fired when a handle is released
   const lastSetTimeSecRef = (0,external_react_.useRef)(null);
   const [isRangeHovered, setIsRangeHovered] = (0,external_react_.useState)(false);
   const isControlled = typeof zoomLevelProp === 'number';
@@ -6253,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;
@@ -6303,11 +6425,19 @@ function WaveformView({
     viewportRef,
     wavesurferRef
   });
+  const suppressTapToPlayPause = (0,external_react_.useCallback)(() => {
+    suppressNextTapPlayPauseRef.current = true;
+    window.clearTimeout(suppressNextTapPlayPauseTimerRef.current);
+    suppressNextTapPlayPauseTimerRef.current = window.setTimeout(() => {
+      suppressNextTapPlayPauseRef.current = false;
+      suppressNextTapPlayPauseTimerRef.current = 0;
+    }, constants/* WAVEFORM_TAPE_CLICK_SUPPRESS_MS */.fI);
+  }, []);
   const toggleTapePlayback = (0,external_react_.useCallback)(() => {
     if (!interactiveRef.current) {
       return;
     }
-    if (isUserPanning() || pointerZoomRef.current) {
+    if (isUserPanning() || pointerZoomRef.current || isRangeDraggingRef.current) {
       return;
     }
     if (suppressNextTapPlayPauseRef.current) {
@@ -6317,13 +6447,8 @@ function WaveformView({
       return;
     }
     onPlayPauseRef.current?.(!isPlayingRef.current);
-    suppressNextTapPlayPauseRef.current = true;
-    window.clearTimeout(suppressNextTapPlayPauseTimerRef.current);
-    suppressNextTapPlayPauseTimerRef.current = window.setTimeout(() => {
-      suppressNextTapPlayPauseRef.current = false;
-      suppressNextTapPlayPauseTimerRef.current = 0;
-    }, constants/* WAVEFORM_TAPE_CLICK_SUPPRESS_MS */.fI);
-  }, [isUserPanning]);
+    suppressTapToPlayPause();
+  }, [isUserPanning, suppressTapToPlayPause]);
   toggleTapePlaybackRef.current = toggleTapePlayback;
   (0,external_react_.useLayoutEffect)(() => {
     viewportRef.current = (0,waveform_viewport/* createWaveformViewport */.eq)({
@@ -6512,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,
@@ -6529,12 +6655,13 @@ function WaveformView({
       onSeekRef.current?.(timeSec);
     });
     const unsubscribeScroll = wavesurfer.on('scroll', () => {
-      if (suppressViewportSyncRef.current) {
+      if (suppressViewportSyncRef.current || isRangeDraggingRef.current) {
+        // A handle drag scrolls from its own frame loop. A pan settle would pull it back.
         return;
       }
       // User pan: map scroll to the time under the playhead, then tape seeks it.
       handleCameraScroll(timeSec => {
-        if (cameraModeRef.current === 'tape' && !pointerZoomRef.current) {
+        if (cameraModeRef.current === 'tape' && !pointerZoomRef.current && !createDragRef.current) {
           handleTapeSwipe(timeSec);
         }
         syncViewport();
@@ -6654,14 +6781,18 @@ function WaveformView({
     const tick = () => {
       if (!media.paused) {
         updatePlayheadPosition(media.currentTime);
-        applyPlayheadCamera(media.currentTime, false);
+        if (!isRangeDraggingRef.current) {
+          applyPlayheadCamera(media.currentTime, false);
+        }
       }
       playheadAnimationRef.current = window.requestAnimationFrame(tick);
     };
     const startLoop = () => {
       window.cancelAnimationFrame(playheadAnimationRef.current);
       releaseUserPanHold();
-      applyPlayheadCamera(media.currentTime, true);
+      if (!isRangeDraggingRef.current) {
+        applyPlayheadCamera(media.currentTime, true);
+      }
       playheadAnimationRef.current = window.requestAnimationFrame(tick);
     };
     const stopLoop = () => {
@@ -6676,7 +6807,7 @@ function WaveformView({
     };
     const handleSeeked = () => {
       onPlayheadSeek(media.currentTime);
-      if (!isUserPanning()) {
+      if (!isUserPanning() && !isRangeDraggingRef.current) {
         seekTo(media.currentTime);
       }
       updatePlayheadPosition(media.currentTime);
@@ -6861,9 +6992,12 @@ function WaveformView({
   const handleRangeDragChange = (0,external_react_.useCallback)(isDragging => {
     isRangeDraggingRef.current = isDragging;
     setIsRangeDragging(isDragging);
+    suppressTapToPlayPause();
+    cancelJump();
     if (isDragging) {
       setHoverProgress(null);
     } else {
+      rangeDragPointerXRef.current = null;
       skipNextSeekRef.current = true;
       window.setTimeout(() => {
         skipNextSeekRef.current = false;
@@ -6871,7 +7005,60 @@ function WaveformView({
       setPreviewRange(null);
     }
     onRangeDragChange?.(isDragging);
-  }, [onRangeDragChange]);
+  }, [cancelJump, onRangeDragChange, suppressTapToPlayPause]);
+  (0,external_react_.useEffect)(() => {
+    if (!isTape || !isRangeDragging) {
+      return undefined;
+    }
+    let frameId = 0;
+    let previousFrameMs = 0;
+    let hasPreviousFrame = false;
+    let pendingScrollPx = 0;
+    const getPointerInTrack = () => {
+      const track = trackRef.current;
+      const pointerClientX = rangeDragPointerXRef.current;
+      if (!track || pointerClientX == null || !Number.isFinite(pointerClientX)) {
+        return null;
+      }
+      const rect = track.getBoundingClientRect();
+      return {
+        width: rect.width,
+        x: pointerClientX - rect.left
+      };
+    };
+    const scrollWhileHandleAtEdge = frameMs => {
+      const rawElapsedSec = hasPreviousFrame ? Math.max(0, (frameMs - previousFrameMs) / 1000) : 0;
+      const elapsedSec = Math.min(rawElapsedSec, constants/* WAVEFORM_RANGE_EDGE_SCROLL_MAX_FRAME_SEC */.bf);
+      hasPreviousFrame = true;
+      previousFrameMs = frameMs;
+      const pointer = getPointerInTrack();
+      const viewport = viewportRef.current;
+      const scrollDeltaPx = pointer ? (0,waveform_viewport/* getRangeEdgeScrollDeltaPx */.CD)({
+        elapsedSec,
+        pixelsPerSecond: viewport.pixelsPerSecond,
+        pointerX: pointer.x,
+        widthPx: pointer.width
+      }) : null;
+      if (scrollDeltaPx == null) {
+        pendingScrollPx = 0;
+      } else {
+        pendingScrollPx += scrollDeltaPx;
+        const nextScroll = Math.min((0,waveform_viewport/* maxScrollLeft */.d0)(viewport), Math.max(0, viewport.scrollLeftPx + pendingScrollPx));
+        const scrolledPx = nextScroll - viewport.scrollLeftPx;
+        pendingScrollPx = scrolledPx === 0 ? 0 : pendingScrollPx - scrolledPx;
+        if (scrolledPx !== 0) {
+          applyScrollLeft(nextScroll, true);
+          const nextViewport = viewportRef.current;
+          onSeekRef.current?.((0,waveform_viewport/* timeFromPositionPx */.lZ)(nextViewport.widthPx / 2, nextViewport));
+        }
+      }
+      frameId = window.requestAnimationFrame(scrollWhileHandleAtEdge);
+    };
+    frameId = window.requestAnimationFrame(scrollWhileHandleAtEdge);
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [applyScrollLeft, isRangeDragging, isTape]);
   const getPlayheadSec = (0,external_react_.useCallback)(() => {
     return mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
   }, []);
@@ -7018,16 +7205,22 @@ 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,
     interactive: interactive && !isOverlayReadOnly,
     isHighlighted: isRangeDragging || isRangeHovered,
+    isSwiping: isTape && scrubPreviewTimeSec != null,
     keepHighlight: true,
     onDragChange: handleRangeDragChange,
     onDragCreate: interactive && !isRangeDragging && !isOverlayReadOnly ? onRangeDragCreate : undefined,
+    onDragPointerX: clientX => {
+      rangeDragPointerXRef.current = clientX;
+    },
     onPreviewChange: setPreviewRange,
     onRangeChange: interactive && !isOverlayReadOnly ? onRangeChange : undefined,
+    onRangeClear: onRangeClear,
     range: overlayRange,
     readOnly: isOverlayReadOnly,
     viewport: viewport
@@ -7595,11 +7788,14 @@ function isFpsAvailable(player) {
 /* harmony export */   LW: () => (/* binding */ WAVEFORM_ZOOM_MIN),
 /* harmony export */   Le: () => (/* binding */ TAPE_POINTER_MEDIA_QUERY),
 /* harmony export */   Lu: () => (/* binding */ WAVEFORM_BAR_GAP),
+/* harmony export */   MR: () => (/* binding */ WAVEFORM_RANGE_EDGE_ZONE_PX),
 /* harmony export */   NM: () => (/* binding */ WAVEFORM_FOLLOW_INSET_PX),
 /* harmony export */   QD: () => (/* binding */ WAVEFORM_ZOOM_BUTTON_STEP),
+/* harmony export */   VS: () => (/* binding */ WAVEFORM_RANGE_EDGE_SCROLL_AUDIO_SEC_PER_SEC),
 /* harmony export */   XS: () => (/* binding */ WAVEFORM_BAR_MIN_HEIGHT),
 /* harmony export */   Zs: () => (/* binding */ WAVEFORM_FOLLOW_SCROLL_SETTLE_MS),
 /* harmony export */   bX: () => (/* binding */ WAVEFORM_RANGE_MIN_DURATION_MS),
+/* harmony export */   bf: () => (/* binding */ WAVEFORM_RANGE_EDGE_SCROLL_MAX_FRAME_SEC),
 /* harmony export */   f3: () => (/* binding */ CLIENT_DECODE_PEAK_COUNT),
 /* harmony export */   fI: () => (/* binding */ WAVEFORM_TAPE_CLICK_SUPPRESS_MS),
 /* harmony export */   h1: () => (/* binding */ WAVEFORM_RANGE_HANDLE_LINE_PX),
@@ -7682,6 +7878,12 @@ const WAVEFORM_RANGE_SNAP_PX = 8;
 const WAVEFORM_RANGE_MIN_DURATION_MS = 250;
 /** Pointer travel before a waveform press becomes a new draft range. Shorter presses stay click-to-seek. */
 const WAVEFORM_RANGE_CREATE_DRAG_PX = 4;
+/** Drag a handle inside this many CSS pixels of either view edge and the tape scrolls. */
+const WAVEFORM_RANGE_EDGE_ZONE_PX = 100;
+/** Audio seconds moved per wall-clock second when the pointer is on the view edge. */
+const WAVEFORM_RANGE_EDGE_SCROLL_AUDIO_SEC_PER_SEC = 4;
+/** Longest gap one edge-scroll frame may apply. A stalled timestamp must not jump the playhead. */
+const WAVEFORM_RANGE_EDGE_SCROLL_MAX_FRAME_SEC = 0.05;
 const WAVEFORM_RANGE_GRIP_IN_MS = 150;
 const WAVEFORM_RANGE_GRIP_OUT_MS = 100;
 
@@ -8719,6 +8921,7 @@ function isRetryableWaveformError(code) {
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CD: () => (/* binding */ getRangeEdgeScrollDeltaPx),
 /* harmony export */   Iw: () => (/* binding */ sliderValueFromZoom),
 /* harmony export */   J$: () => (/* binding */ getZoomedPixelsPerSecond),
 /* harmony export */   KH: () => (/* binding */ viewportEquals),
@@ -9009,6 +9212,30 @@ function getTapePinnedPlayheadLeft() {
   return '50%';
 }
 
+/**
+ * Pixels to scroll this frame while a range handle is held in the edge zone.
+ * Negative moves toward the start of the file. Null means the pointer is outside the zone.
+ */
+function getRangeEdgeScrollDeltaPx({
+  audioSecPerSec = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_EDGE_SCROLL_AUDIO_SEC_PER_SEC */ .VS,
+  elapsedSec,
+  edgeZonePx = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_EDGE_ZONE_PX */ .MR,
+  pixelsPerSecond,
+  pointerX,
+  widthPx
+}) {
+  if (!(widthPx > 0) || !(elapsedSec > 0) || !(edgeZonePx > 0) || !(pixelsPerSecond > 0)) {
+    return null;
+  }
+  const distanceFromEdgePx = Math.min(pointerX, widthPx - pointerX);
+  if (distanceFromEdgePx >= edgeZonePx) {
+    return null;
+  }
+  const intensity = 1 - distanceFromEdgePx / edgeZonePx;
+  const direction = pointerX < widthPx / 2 ? -1 : 1;
+  return direction * pixelsPerSecond * audioSecPerSec * elapsedSec * intensity;
+}
+
 /** CSS left % of the playhead from the left of the visible window. */
 function timeLeftPercent(timeSec, durationSec, viewport) {
   if (viewport.widthPx > 0 && viewport.pixelsPerSecond > 0) {
@@ -24741,7 +24968,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.97.0";
+const CLIENT_VERSION = "3.99.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -28253,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); }
 
@@ -28411,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.97.0",
+    "version": "3.99.0",
     "description": "Box Content Preview UI Element",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",