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

@@ -63,7 +63,7 @@
 .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-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-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;-webkit-touch-callout:none}.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.99.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.101.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 = {};
@@ -6347,8 +6347,10 @@ 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 tapeRangeHoldRef = (0,external_react_.useRef)(false); // a tape long-press is waiting to draw; touch must not scroll
   const rangeDragPointerXRef = (0,external_react_.useRef)(null); // clientX while a handle or create-drag is down
   const removeCreateDragListenersRef = (0,external_react_.useRef)(null);
+  const removeTapeContextMenuRef = (0,external_react_.useRef)(null);
   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);
@@ -6460,6 +6462,20 @@ function WaveformView({
       widthPx: viewport.widthPx,
       zoomLevel: viewport.zoomLevel
     });
+    const drag = createDragRef.current;
+    const clientX = rangeDragPointerXRef.current;
+    const track = trackRef.current;
+    if (!drag?.active || clientX == null || !track) {
+      return;
+    }
+    const playheadSec = mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
+    const drawn = drawnRangeFromMove(drag, clientX, track, viewportRef.current, playheadSec, durationSecRef.current);
+    if (drawn.startMs === drag.range?.startMs && drawn.endMs === drag.range?.endMs) {
+      return;
+    }
+    drag.range = drawn;
+    setCreateRange(drawn);
+    setPreviewRange(drawn);
   }, [viewport]);
   const setZoomLevel = (0,external_react_.useCallback)(nextZoom => {
     const zoom = (0,waveform_viewport/* clampWaveformZoom */.ii)(nextZoom, maxZoom);
@@ -6923,6 +6939,10 @@ function WaveformView({
       markPointerZoom();
     };
     const onTouchMove = event => {
+      // A tape hold or range drag owns the touch. A desktop press can still scroll.
+      if (cameraModeRef.current === 'tape' && (tapeRangeHoldRef.current || createDragRef.current)) {
+        event.preventDefault();
+      }
       const pinch = pinchStartRef.current;
       if (!interactiveRef.current || !hasZoomHandlersRef.current || !pinch || event.touches.length !== 2 || !(pinch.distance > 0)) {
         return;
@@ -7065,6 +7085,7 @@ function WaveformView({
   (0,external_react_.useEffect)(() => {
     return () => {
       removeCreateDragListenersRef.current?.();
+      removeTapeContextMenuRef.current?.();
       if (createDragRef.current?.active) {
         createDragRef.current = null;
         onRangeDragChangeRef.current?.(false);
@@ -7077,26 +7098,20 @@ function WaveformView({
     }
     setCreateRange(current => current == null ? current : null);
   }, [range]);
-  const onTrackPointerDown = (0,external_react_.useCallback)(event => {
-    if (cameraModeRef.current === 'tape' || !interactiveRef.current || event.button > 0 || event.ctrlKey || event.metaKey || isRangeDraggingRef.current || createDragRef.current) {
-      return;
-    }
-    const {
-      target
-    } = event;
-    if (target instanceof Element && target.closest('[data-testid="bp-waveform-range-handle-start"], [data-testid="bp-waveform-range-handle-end"], [data-testid="bp-waveform-range-comment"]')) {
-      return;
-    }
-    const drag = rangeCreateDragFromEvent(event, {
-      durationSec: durationSecRef.current,
-      range: rangeRef.current,
-      track: trackRef.current,
-      viewport: viewportRef.current
-    });
-    if (!drag) {
-      return;
-    }
+  const startRangeCreateDrag = (0,external_react_.useCallback)((drag, capture) => {
     createDragRef.current = drag;
+    rangeDragPointerXRef.current = drag.originX;
+    const track = trackRef.current;
+    if (capture && track && typeof track.setPointerCapture === 'function') {
+      try {
+        track.setPointerCapture(drag.pointerId);
+      } catch (error) {
+        const lostPointer = error instanceof DOMException && (error.name === 'NotFoundError' || error.name === 'InvalidStateError');
+        if (!lostPointer) {
+          console.warn('Pointer capture failed', error); // eslint-disable-line no-console
+        }
+      }
+    }
     const onMove = moveEvent => {
       if (createDragRef.current !== drag || moveEvent.pointerId !== drag.pointerId) {
         return;
@@ -7104,16 +7119,24 @@ function WaveformView({
       if (!Number.isFinite(moveEvent.clientX)) {
         return;
       }
+      // Capture runs before WaveSurfer's document drag, which stops the event after a few pixels.
+      if (capture) {
+        moveEvent.preventDefault();
+        moveEvent.stopPropagation();
+      }
+      rangeDragPointerXRef.current = moveEvent.clientX;
       if (!drag.active && Math.abs(moveEvent.clientX - drag.originX) < constants/* WAVEFORM_RANGE_CREATE_DRAG_PX */.B4) {
         return;
       }
-      const track = trackRef.current;
-      if (!track) {
+      const moveTrack = trackRef.current;
+      if (!moveTrack) {
         return;
       }
-      moveEvent.preventDefault();
+      if (!capture) {
+        moveEvent.preventDefault();
+      }
       const playheadSec = mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
-      drag.range = drawnRangeFromMove(drag, moveEvent.clientX, track, viewportRef.current, playheadSec, durationSecRef.current);
+      drag.range = drawnRangeFromMove(drag, moveEvent.clientX, moveTrack, viewportRef.current, playheadSec, durationSecRef.current);
       if (!drag.active) {
         drag.active = true;
         handleRangeDragChange(true);
@@ -7123,9 +7146,13 @@ function WaveformView({
     };
     let onUp = () => undefined;
     const removeListeners = () => {
-      window.removeEventListener('pointermove', onMove);
-      window.removeEventListener('pointerup', onUp);
-      window.removeEventListener('pointercancel', onUp);
+      window.removeEventListener('pointermove', onMove, capture);
+      window.removeEventListener('pointerup', onUp, capture);
+      window.removeEventListener('pointercancel', onUp, capture);
+      const captured = trackRef.current;
+      if (capture && captured && typeof captured.hasPointerCapture === 'function' && captured.hasPointerCapture(drag.pointerId)) {
+        captured.releasePointerCapture(drag.pointerId);
+      }
       if (removeCreateDragListenersRef.current === removeListeners) {
         removeCreateDragListenersRef.current = null;
       }
@@ -7139,6 +7166,8 @@ function WaveformView({
       createDragRef.current = null;
       removeListeners();
       if (!wasActive || !drawn) {
+        // This pointerup still reaches the tape track. Swallow it so a still hold does not play.
+        suppressTapToPlayPause();
         return;
       }
       const committed = (0,waveform_range/* commitRangeChange */.dG)(drawn);
@@ -7149,10 +7178,107 @@ function WaveformView({
       handleRangeDragChange(false);
     };
     removeCreateDragListenersRef.current = removeListeners;
-    window.addEventListener('pointermove', onMove);
-    window.addEventListener('pointerup', onUp);
-    window.addEventListener('pointercancel', onUp);
-  }, [handleRangeDragChange]);
+    window.addEventListener('pointermove', onMove, capture);
+    window.addEventListener('pointerup', onUp, capture);
+    window.addEventListener('pointercancel', onUp, capture);
+  }, [handleRangeDragChange, suppressTapToPlayPause]);
+  const onTrackPointerDown = (0,external_react_.useCallback)(event => {
+    if (!interactiveRef.current || event.button > 0 || event.ctrlKey || event.metaKey || isRangeDraggingRef.current || createDragRef.current) {
+      return;
+    }
+    const {
+      target
+    } = event;
+    if (target instanceof Element && target.closest('.bp-WaveformRange-handle, .bp-WaveformRange-comment')) {
+      return;
+    }
+    const drag = rangeCreateDragFromEvent(event, {
+      durationSec: durationSecRef.current,
+      range: rangeRef.current,
+      track: trackRef.current,
+      viewport: viewportRef.current
+    });
+    if (!drag) {
+      return;
+    }
+    if (cameraModeRef.current !== 'tape') {
+      startRangeCreateDrag(drag, false);
+      return;
+    }
+    const suppressContextMenu = menuEvent => {
+      menuEvent.preventDefault();
+    };
+    let endPointer = () => undefined;
+    const removeContextMenu = () => {
+      window.removeEventListener('contextmenu', suppressContextMenu, true);
+      window.removeEventListener('pointerup', endPointer, true);
+      window.removeEventListener('pointercancel', endPointer, true);
+      if (removeTapeContextMenuRef.current === removeContextMenu) {
+        removeTapeContextMenuRef.current = null;
+      }
+    };
+    endPointer = endEvent => {
+      if (endEvent.pointerId !== drag.pointerId) {
+        return;
+      }
+      removeContextMenu();
+    };
+    removeTapeContextMenuRef.current = removeContextMenu;
+    window.addEventListener('contextmenu', suppressContextMenu, true);
+    window.addEventListener('pointerup', endPointer, true);
+    window.addEventListener('pointercancel', endPointer, true);
+    const originY = event.clientY;
+    let holdPending = true;
+    let longPressTimer = 0;
+    let onHoldMove = () => undefined;
+    let onHoldEnd = () => undefined;
+    const cancelHold = () => {
+      if (!holdPending) {
+        return;
+      }
+      holdPending = false;
+      tapeRangeHoldRef.current = false;
+      window.clearTimeout(longPressTimer);
+      window.removeEventListener('pointermove', onHoldMove, true);
+      window.removeEventListener('pointerup', onHoldEnd, true);
+      window.removeEventListener('pointercancel', onHoldEnd, true);
+      if (removeCreateDragListenersRef.current === cancelHold) {
+        removeCreateDragListenersRef.current = null;
+      }
+    };
+    onHoldMove = moveEvent => {
+      if (!holdPending || moveEvent.pointerId !== drag.pointerId) {
+        return;
+      }
+      const moved = Math.hypot(moveEvent.clientX - drag.originX, moveEvent.clientY - originY);
+      if (moved >= constants/* WAVEFORM_TAPE_RANGE_LONG_PRESS_CANCEL_PX */.Oe) {
+        cancelHold();
+        return;
+      }
+      // A smaller drift must not scroll the tape. The move that cancels the hold stays a swipe.
+      moveEvent.preventDefault();
+      moveEvent.stopPropagation();
+    };
+    onHoldEnd = upEvent => {
+      if (upEvent.pointerId !== drag.pointerId) {
+        return;
+      }
+      cancelHold();
+    };
+    tapeRangeHoldRef.current = true;
+    longPressTimer = window.setTimeout(() => {
+      if (!holdPending) {
+        return;
+      }
+      cancelHold();
+      suppressTapToPlayPause();
+      startRangeCreateDrag(drag, true);
+    }, constants/* WAVEFORM_TAPE_RANGE_LONG_PRESS_MS */.RQ);
+    removeCreateDragListenersRef.current = cancelHold;
+    window.addEventListener('pointermove', onHoldMove, true);
+    window.addEventListener('pointerup', onHoldEnd, true);
+    window.addEventListener('pointercancel', onHoldEnd, true);
+  }, [suppressTapToPlayPause, startRangeCreateDrag]);
   const bindOverlayPortalHost = (0,external_react_.useCallback)(node => {
     const host = node?.parentElement ?? null;
     setOverlayPortalHost(prev => prev === host ? prev : host);
@@ -7790,7 +7916,9 @@ function isFpsAvailable(player) {
 /* 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 */   Oe: () => (/* binding */ WAVEFORM_TAPE_RANGE_LONG_PRESS_CANCEL_PX),
 /* harmony export */   QD: () => (/* binding */ WAVEFORM_ZOOM_BUTTON_STEP),
+/* harmony export */   RQ: () => (/* binding */ WAVEFORM_TAPE_RANGE_LONG_PRESS_MS),
 /* 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),
@@ -7878,6 +8006,10 @@ 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;
+/** Hold on the tape waveform before a press can draw a new range. A move sooner stays a swipe. */
+const WAVEFORM_TAPE_RANGE_LONG_PRESS_MS = 500;
+/** Pointer travel during that hold that cancels it. */
+const WAVEFORM_TAPE_RANGE_LONG_PRESS_CANCEL_PX = 10;
 /** 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. */
@@ -24968,7 +25100,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.99.0";
+const CLIENT_VERSION = "3.101.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -25842,7 +25974,7 @@ class RepStatus extends (events_default()) {
 // If changes are made to this file to support more extensions that are "highlightable", then make sure to
 // check if we need to upgrade the highlightjs custom build to add language grammar for that new extension language.
 // See build/upgrade_highlightjs.sh
-const NON_CODE_EXTENSIONS = ['csv', 'log', 'md', 'tsv', 'txt'];
+const NON_CODE_EXTENSIONS = ['csv', 'log', 'md', 'tsv', 'txt', 'vtt'];
 const HTML_EXTENSIONS = ['htm', 'html', 'xhtml', 'xml', 'xsd', 'xsl']; // These types do not have an appropriate extracted text representation for preview
 
 const CODE_EXTENSIONS = ['as', 'as3', 'asm', 'bat', 'c', 'cc', 'cmake', 'cpp', 'cs', 'css', 'cxx', 'diff', 'erb', 'groovy', 'h', 'haml', 'hh', 'java', 'js', 'json', 'less', 'm', 'make', 'ml', 'mm', 'php', 'pl', 'plist', 'properties', 'py', 'rb', 'rst', 'sass', 'scala', 'script', 'scm', 'sml', 'sql', 'sh', 'vi', 'vim', 'webdoc', 'yaml'];

package/package.json

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