box-content-preview 3.91.0 → 3.92.0

package/dist/lib/index.js

@@ -1018,7 +1018,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.91.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.92.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 = {};
@@ -2916,10 +2916,10 @@ function TimestampControl({
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ VolumeControls)
+  Ay: () => (/* binding */ VolumeControls)
 });
 
-// UNUSED EXPORTS: getIcon
+// UNUSED EXPORTS: VOLUME_FLYOUT_DISMISS_MS, getIcon
 
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(1649);
@@ -2981,12 +2981,26 @@ function IconVolumeMuted24(props) {
 var MediaToggle = __webpack_require__(8997);
 ;// ./src/lib/viewers/controls/hooks/useAttention.ts
 
+/** True when focus/hover is moving to a descendant, not leaving the host. */
+function isRelatedTargetInside(event) {
+  return event.currentTarget.contains(event.relatedTarget);
+}
 function useAttention() {
   const [isFocused, setFocused] = external_react_.useState(false);
   const [isHovered, setHovered] = external_react_.useState(false);
-  const handleBlur = () => setFocused(false);
+  const handleBlur = event => {
+    if (isRelatedTargetInside(event)) {
+      return;
+    }
+    setFocused(false);
+  };
   const handleFocus = () => setFocused(true);
-  const handleMouseOut = () => setHovered(false);
+  const handleMouseOut = event => {
+    if (isRelatedTargetInside(event)) {
+      return;
+    }
+    setHovered(false);
+  };
   const handleMouseOver = () => setHovered(true);
   return [isFocused || isHovered, {
     onBlur: handleBlur,
@@ -3023,7 +3037,7 @@ var util = __webpack_require__(4410);
 // extracted by mini-css-extract-plugin
 
 ;// ./src/lib/viewers/controls/slider/VolumeSliderControl.tsx
-const _excluded = ["className", "max", "min", "onMove", "onUpdate", "step", "title", "value", "onMouseOver"];
+const _excluded = ["className", "max", "min", "onMove", "onUpdate", "step", "title", "value", "onMouseOver", "tabIndex"];
 function VolumeSliderControl_extends() { return VolumeSliderControl_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; }, VolumeSliderControl_extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -3049,7 +3063,8 @@ function VolumeSliderControl(_ref) {
       step = 1,
       title,
       value,
-      onMouseOver
+      onMouseOver,
+      tabIndex = 0
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const [isScrubbing, setIsScrubbing] = external_react_["default"].useState(false);
@@ -3160,33 +3175,29 @@ function VolumeSliderControl(_ref) {
     className: "bp-VolumeVerticalSliderControl-track-container"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: sliderElRef,
-    className: "bp-VolumeVerticalSliderControl-track-background",
-    onMouseDown: handleMouseDown,
-    role: "button",
-    tabIndex: 0
-  }, /*#__PURE__*/external_react_["default"].createElement("div", {
     "aria-label": title,
     "aria-valuemax": max,
     "aria-valuemin": min,
     "aria-valuenow": value,
-    className: "bp-VolumeVerticalSliderControl-track",
+    className: "bp-VolumeVerticalSliderControl-track-background",
     "data-resin-target": "volumeSlider",
     "data-testid": "bp-volume-slider-control-track",
-    onFocus: onMouseOver,
+    onFocus: (noop_default()),
     onKeyDown: handleKeydown,
     onMouseDown: handleMouseDown,
     onMouseMove: handleMouseMove,
     onMouseOver: onMouseOver,
     onTouchStart: handleTouchStart,
     role: "slider",
+    tabIndex: tabIndex
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-VolumeVerticalSliderControl-track",
     style: {
       height: `${heightValueBasedOnVolume / max * 100}%`
-    },
-    tabIndex: 0
+    }
   }))));
 }
 ;// ./src/lib/viewers/controls/media/VolumeControls.tsx
-function VolumeControls_extends() { return VolumeControls_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; }, VolumeControls_extends.apply(null, arguments); }
 
 
 
@@ -3197,6 +3208,9 @@ function VolumeControls_extends() { return VolumeControls_extends = Object.assig
 
 
 
+
+/** Keyboard volume keeps the flyout open longer than the 200ms max-width transition. */
+const VOLUME_FLYOUT_DISMISS_MS = 1000;
 function getIcon(volume) {
   let Icon = icons_IconVolumeMuted24;
   if (volume >= 0.66) {
@@ -3209,16 +3223,32 @@ function getIcon(volume) {
   return Icon;
 }
 function VolumeControls({
+  keyboardVolumeStep = 0,
   onMuteChange,
   onVolumeChange,
   volume = 1
 }) {
   const [isActive, handlers] = useAttention();
+  const [isRevealed, setIsRevealed] = (0,external_react_.useState)(false);
+  const revealTimerRef = (0,external_react_.useRef)(0);
   const isMuted = !volume;
   const Icon = isMuted ? icons_IconVolumeMuted24 : getIcon(volume);
   const title = isMuted ? "Unmute" : "Mute";
   const value = Math.round(volume * 100);
-  const handleVolume = external_react_["default"].useCallback(newValue => {
+  const isOpen = isActive || isRevealed;
+  (0,external_react_.useEffect)(() => {
+    if (!keyboardVolumeStep) {
+      return;
+    }
+    setIsRevealed(true);
+    window.clearTimeout(revealTimerRef.current);
+    revealTimerRef.current = window.setTimeout(() => {
+      setIsRevealed(false);
+      revealTimerRef.current = 0;
+    }, VOLUME_FLYOUT_DISMISS_MS);
+  }, [keyboardVolumeStep]);
+  (0,external_react_.useEffect)(() => () => window.clearTimeout(revealTimerRef.current), []);
+  const handleVolume = (0,external_react_.useCallback)(newValue => {
     const newValueToUse = newValue <= 5 ? 0 : newValue;
     // make sure the value is always between 0 and 1 since the value passed in could be
     // greater than 100 if the user drags the mouse above the top of the sider when adjusting the volume
@@ -3228,27 +3258,39 @@ function VolumeControls({
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VolumeControls",
     "data-testid": "bp-volume-controls",
-    onBlur: handlers.onBlur,
+    onBlur: event => {
+      handlers.onBlur(event);
+      if (event.currentTarget.contains(event.relatedTarget)) {
+        return;
+      }
+      window.clearTimeout(revealTimerRef.current);
+      revealTimerRef.current = 0;
+      setIsRevealed(false);
+    },
     onFocus: handlers.onFocus,
     onMouseOut: handlers.onMouseOut,
     onMouseOver: handlers.onMouseOver
-  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, VolumeControls_extends({
+  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
     className: "bp-VolumeControls-toggle",
     "data-resin-target": "volumeToggle",
     onClick: () => onMuteChange(!isMuted),
     title: title
-  }, handlers), /*#__PURE__*/external_react_["default"].createElement(Icon, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
+  }, /*#__PURE__*/external_react_["default"].createElement(Icon, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
+    "aria-hidden": !isOpen,
     className: classnames_default()('bp-VolumeControls-flyout', {
-      'bp-is-open': isActive
+      'bp-is-open': isOpen
     })
-  }, /*#__PURE__*/external_react_["default"].createElement(VolumeSliderControl, VolumeControls_extends({
+  }, /*#__PURE__*/external_react_["default"].createElement(VolumeSliderControl, {
+    "aria-hidden": !isOpen,
     className: "bp-VolumeControls-slider",
     max: 100,
+    onMouseOver: handlers.onMouseOver,
     onUpdate: handleVolume,
     step: 1,
+    tabIndex: isOpen ? 0 : -1,
     title: "Volume Slider",
     value: value
-  }, handlers))));
+  })));
 }
 
 /***/ },
@@ -4488,7 +4530,7 @@ function getPdfjsWorkerSrc() {
 
 /***/ },
 
-/***/ 2668
+/***/ 7450
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -4756,6 +4798,11 @@ function zoomFromSliderValue(value, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.L
   return clampWaveformZoom(constants/* WAVEFORM_ZOOM_MIN */.LW + t * (max - constants/* WAVEFORM_ZOOM_MIN */.LW), max);
 }
 
+/** One zoom-in/out button step on the 0–100 slider, mapped back to zoom. */
+function stepWaveformZoom(zoomLevel, maxZoom, sliderDelta) {
+  return zoomFromSliderValue(Math.round(sliderValueFromZoom(zoomLevel, maxZoom)) + sliderDelta, maxZoom);
+}
+
 /** Max scroll that still shows a full window (no overscroll). Gutters add empty lead/trail. */
 function maxScrollLeft(viewport) {
   const gutterPx = viewport.gutterPx || 0;
@@ -5213,15 +5260,62 @@ function getBufferedProgress(bufferedRange, durationSec) {
 function getPlayedWaveformColor(isTape = false) {
   return isTape ? WAVEFORM_COLOR_HOVER_PLAYED : WAVEFORM_COLOR_PLAYED;
 }
+function rangeFills({
+  buffer,
+  hover,
+  rangeEnd,
+  rangeStart
+}) {
+  const start = clampTo0And1(rangeStart);
+  const end = clampTo0And1(rangeEnd);
+  const hoverInside = hover != null && hover > start && hover < end;
+  const outsideAfter = [{
+    color: WAVEFORM_COLOR_UNPLAYED,
+    end: Math.max(end, buffer),
+    start: end
+  }, {
+    color: WAVEFORM_COLOR_BUFFER,
+    end: 1,
+    start: Math.max(end, buffer)
+  }];
+  const ranges = hoverInside ? [{
+    color: WAVEFORM_COLOR_UNPLAYED,
+    end: start,
+    start: 0
+  }, {
+    color: WAVEFORM_COLOR_HOVER_PLAYED,
+    end: hover,
+    start
+  }, {
+    color: WAVEFORM_COLOR_HOVER_AREA,
+    end,
+    start: hover
+  }, ...outsideAfter] : [{
+    color: WAVEFORM_COLOR_UNPLAYED,
+    end: start,
+    start: 0
+  }, {
+    color: WAVEFORM_COLOR_PLAYED,
+    end,
+    start
+  }, ...outsideAfter];
+  const fill = gradientStopsFromColorRanges(ranges);
+  return {
+    progressColor: fill,
+    waveColor: fill
+  };
+}
 
 /**
  * progressColor paints left of the playhead (clipped by wavesurfer).
  * waveColor paints right of the playhead, including buffered vs not-yet-buffered.
+ * An open comment range replaces the played/unplayed split with in-range / out-of-range.
  */
 function getWaveformFills({
   bufferProgress,
   hoverProgress,
-  isTape = false
+  isTape = false,
+  rangeProgress
 }) {
   const buffer = clampTo0And1(bufferProgress);
   const playedColor = getPlayedWaveformColor(isTape);
@@ -5231,6 +5325,14 @@ function getWaveformFills({
       waveColor: WAVEFORM_COLOR_UNPLAYED
     };
   }
+  if (rangeProgress && rangeProgress.end > rangeProgress.start) {
+    return rangeFills({
+      buffer,
+      hover: hoverProgress == null ? null : clampTo0And1(hoverProgress),
+      rangeEnd: rangeProgress.end,
+      rangeStart: rangeProgress.start
+    });
+  }
   if (hoverProgress == null) {
     return {
       progressColor: playedColor,
@@ -5394,6 +5496,200 @@ function tintWaveformTiles({
     });
   });
 }
+;// ./src/lib/viewers/media/waveform/range.ts
+
+
+function clampToRange(value, min, max) {
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+  return Math.min(max, Math.max(min, value));
+}
+
+/** Integer ms in `[0, durationMs]`. */
+function clampTimeMs(timeMs, durationMs) {
+  const duration = Math.max(0, durationMs);
+  return Math.round(clampToRange(timeMs, 0, duration));
+}
+function durationMsFromSec(durationSec) {
+  if (!Number.isFinite(durationSec) || durationSec <= 0) {
+    return 0;
+  }
+  return Math.round(durationSec * 1000);
+}
+function isRangeCollapsed(range) {
+  return !range || range.endMs == null || range.endMs <= range.startMs;
+}
+
+/** Clamp both edges onto the file. Collapsed drafts stay a point. */
+function resolveRange(range, durationMs) {
+  const startMs = clampTimeMs(range.startMs, durationMs);
+  if (range.endMs == null) {
+    return {
+      endMs: startMs,
+      startMs
+    };
+  }
+  const endMs = clampTimeMs(range.endMs, durationMs);
+  if (endMs <= startMs) {
+    return {
+      endMs: startMs,
+      startMs
+    };
+  }
+  return {
+    endMs,
+    startMs
+  };
+}
+
+/**
+ * Which handle should receive this pointer. Overlapping hit areas (collapsed or
+ * a span narrower than the 24px target) split at the midpoint so each edge stays reachable.
+ */
+function pickRangeHandle({
+  endX,
+  pointerX,
+  startX
+}) {
+  const mid = (startX + endX) / 2;
+  if (!Number.isFinite(mid)) {
+    return 'end';
+  }
+  return pointerX < mid ? 'start' : 'end';
+}
+
+/** Screen x of a handle. Collapsed drafts sit 1px left/right of the playhead, not on it. */
+function visualRangeHandlePx({
+  handle,
+  range,
+  viewport
+}) {
+  const timeSec = (handle === 'start' ? range.startMs : range.endMs) / 1000;
+  const x = positionPxFromTime(timeSec, viewport);
+  if (range.startMs !== range.endMs) {
+    return x;
+  }
+  return handle === 'start' ? x - constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG : x + constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG;
+}
+
+/** True when the pointer is over the range rectangle or its handle hit targets. */
+function isPointerOverRange({
+  pointerX,
+  range,
+  viewport
+}) {
+  const resolved = resolveRange(range, durationMsFromSec(viewport.durationSec));
+  const startX = visualRangeHandlePx({
+    handle: 'start',
+    range: resolved,
+    viewport
+  });
+  const endX = visualRangeHandlePx({
+    handle: 'end',
+    range: resolved,
+    viewport
+  });
+  const pad = constants/* WAVEFORM_RANGE_HIT_AREA_PX */.r0 / 2;
+  return pointerX >= Math.min(startX, endX) - pad && pointerX <= Math.max(startX, endX) + pad;
+}
+
+/** Snap to the playhead when the pointer is within `WAVEFORM_RANGE_SNAP_PX`. */
+function snapTimeMs({
+  pixelsPerSecond,
+  playheadMs,
+  timeMs
+}) {
+  if (!(pixelsPerSecond > 0) || !Number.isFinite(playheadMs)) {
+    return timeMs;
+  }
+  const deltaPx = Math.abs(timeMs - playheadMs) / 1000 * pixelsPerSecond;
+  if (deltaPx <= constants/* WAVEFORM_RANGE_SNAP_PX */.IQ) {
+    return Math.round(playheadMs);
+  }
+  return timeMs;
+}
+
+/**
+ * Move one edge. Crossing the other edge swaps roles so a collapsed pair can
+ * expand in either direction. Enforces `[0, duration]` and the minimum span
+ * once the drag has actually opened a range. An already-open range stays a
+ * span — snapping one edge onto the other clamps to the minimum duration.
+ */
+function dragRangeHandle({
+  durationMs,
+  handle,
+  pointerMs,
+  range
+}) {
+  const duration = Math.max(0, durationMs);
+  const pointer = clampTimeMs(pointerMs, duration);
+  let {
+    startMs,
+    endMs
+  } = range;
+  let nextHandle = handle;
+  if (handle === 'start') {
+    if (pointer > endMs) {
+      startMs = endMs;
+      endMs = pointer;
+      nextHandle = 'end';
+    } else {
+      startMs = pointer;
+    }
+  } else if (pointer < startMs) {
+    endMs = startMs;
+    startMs = pointer;
+    nextHandle = 'start';
+  } else {
+    endMs = pointer;
+  }
+  const wasOpen = range.startMs !== range.endMs;
+  const opened = wasOpen || startMs !== endMs;
+  if (opened && endMs - startMs < constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX) {
+    if (nextHandle === 'end') {
+      endMs = clampTimeMs(startMs + constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX, duration);
+      if (endMs - startMs < constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX) {
+        startMs = clampTimeMs(endMs - constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX, duration);
+      }
+    } else {
+      startMs = clampTimeMs(endMs - constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX, duration);
+      if (endMs - startMs < constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX) {
+        endMs = clampTimeMs(startMs + constants/* WAVEFORM_RANGE_MIN_DURATION_MS */.bX, duration);
+      }
+    }
+  }
+  return {
+    handle: nextHandle,
+    range: {
+      endMs,
+      startMs
+    }
+  };
+}
+function pointerTimeMs(pointerX, viewport) {
+  return Math.round(timeFromPositionPx(pointerX, viewport) * 1000);
+}
+
+/** Sidebar payload after mouseup. Null when the draft is still a single timestamp. */
+function commitRangeChange(range) {
+  if (range.endMs <= range.startMs) {
+    return null;
+  }
+  return {
+    endMs: range.endMs,
+    startMs: range.startMs
+  };
+}
+function rangeProgress(range, durationMs) {
+  if (!(durationMs > 0) || range.endMs <= range.startMs) {
+    return null;
+  }
+  return {
+    end: range.endMs / durationMs,
+    start: range.startMs / durationMs
+  };
+}
 ;// ./src/lib/viewers/media/waveform/usePlayheadCamera.ts
 
 
@@ -5709,6 +6005,307 @@ function usePlayheadCamera({
     seekTo
   };
 }
+;// ./src/lib/viewers/media/waveform/WaveformRangeSelection.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/media/waveform/WaveformRangeSelection.tsx
+
+
+
+
+
+
+function offsetLeftCss(base, offsetPx) {
+  if (!offsetPx) {
+    return base;
+  }
+  const op = offsetPx < 0 ? '-' : '+';
+  return `calc(${base} ${op} ${Math.abs(offsetPx)}px)`;
+}
+function applyHandleLeft(el, timeSec, durationSec, viewport, collapsedOffsetPx = 0) {
+  if (!el) {
+    return;
+  }
+  el.style.left = offsetLeftCss(timeLeftPercent(timeSec, durationSec, viewport), collapsedOffsetPx);
+}
+function applyRegion(el, startSec, endSec, durationSec, viewport, collapsed) {
+  if (!el) {
+    return;
+  }
+  const start = timeLeftPercent(startSec, durationSec, viewport);
+  const halfLine = constants/* WAVEFORM_RANGE_HANDLE_LINE_PX */.h1 / 2;
+  if (collapsed) {
+    const extentPx = constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG + halfLine;
+    el.style.left = offsetLeftCss(start, -extentPx);
+    el.style.width = `${extentPx * 2}px`;
+    return;
+  }
+  const end = timeLeftPercent(endSec, durationSec, viewport);
+  el.style.left = offsetLeftCss(start, -halfLine);
+  el.style.width = `calc(${end} - ${start} + ${constants/* WAVEFORM_RANGE_HANDLE_LINE_PX */.h1}px)`;
+}
+const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(function WaveformRangeSelection({
+  currentTimeSec = 0,
+  durationSec,
+  getPlayheadSec,
+  interactive = true,
+  isHighlighted = false,
+  keepHighlight = true,
+  onDragChange,
+  onPreviewChange,
+  onRangeChange,
+  range,
+  viewport
+}, ref) {
+  const rootRef = (0,external_react_.useRef)(null);
+  const regionRef = (0,external_react_.useRef)(null);
+  const startHandleRef = (0,external_react_.useRef)(null);
+  const endHandleRef = (0,external_react_.useRef)(null);
+  const tooltipRef = (0,external_react_.useRef)(null);
+  const dragRef = (0,external_react_.useRef)(null);
+  const rangeRef = (0,external_react_.useRef)(range);
+  const displayedRef = (0,external_react_.useRef)(resolveRange(range, durationMsFromSec(durationSec)));
+  const viewportRef = (0,external_react_.useRef)(viewport);
+  const durationSecRef = (0,external_react_.useRef)(durationSec);
+  const onDragChangeRef = (0,external_react_.useRef)(onDragChange);
+  const onPreviewChangeRef = (0,external_react_.useRef)(onPreviewChange);
+  const onRangeChangeRef = (0,external_react_.useRef)(onRangeChange);
+  const getPlayheadSecRef = (0,external_react_.useRef)(getPlayheadSec);
+  const [dragRange, setDragRange] = (0,external_react_.useState)(null);
+  const [activeHandle, setActiveHandle] = (0,external_react_.useState)(null);
+  const activeHandleRef = (0,external_react_.useRef)(null);
+  rangeRef.current = range;
+  durationSecRef.current = durationSec;
+  onDragChangeRef.current = onDragChange;
+  onPreviewChangeRef.current = onPreviewChange;
+  onRangeChangeRef.current = onRangeChange;
+  getPlayheadSecRef.current = getPlayheadSec;
+  activeHandleRef.current = activeHandle;
+  const durationMs = durationMsFromSec(durationSec);
+  const displayed = dragRange ?? resolveRange(range, durationMs);
+  displayedRef.current = displayed;
+  const syncPositions = (0,external_react_.useCallback)((next, nextViewport, nextDurationSec) => {
+    displayedRef.current = next;
+    const collapsed = next.startMs === next.endMs;
+    applyRegion(regionRef.current, next.startMs / 1000, next.endMs / 1000, nextDurationSec, nextViewport, collapsed);
+    applyHandleLeft(startHandleRef.current, next.startMs / 1000, nextDurationSec, nextViewport, collapsed ? -constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG : 0);
+    applyHandleLeft(endHandleRef.current, next.endMs / 1000, nextDurationSec, nextViewport, collapsed ? constants/* WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */.BG : 0);
+    const tooltip = tooltipRef.current;
+    if (tooltip) {
+      const tooltipHandle = activeHandleRef.current ?? 'end';
+      const tooltipMs = tooltipHandle === 'start' ? next.startMs : next.endMs;
+      tooltip.style.left = timeLeftPercent(tooltipMs / 1000, nextDurationSec, nextViewport);
+    }
+  }, []);
+  (0,external_react_.useImperativeHandle)(ref, () => ({
+    applyViewport: nextViewport => {
+      viewportRef.current = nextViewport;
+      syncPositions(displayedRef.current, nextViewport, durationSecRef.current);
+    }
+  }), [syncPositions]);
+  (0,external_react_.useLayoutEffect)(() => {
+    syncPositions(displayedRef.current, viewportRef.current, durationSec);
+  }, [activeHandle, displayed.endMs, displayed.startMs, durationSec, syncPositions]);
+  (0,external_react_.useLayoutEffect)(() => {
+    const next = createWaveformViewport({
+      durationSec: viewport.durationSec,
+      heightPx: viewport.heightPx,
+      maxZoom: viewport.maxZoom,
+      scrollLeftPx: viewportRef.current.scrollLeftPx,
+      widthPx: viewport.widthPx,
+      zoomLevel: viewport.zoomLevel
+    });
+    viewportRef.current = next;
+    syncPositions(displayedRef.current, next, durationSecRef.current);
+  }, [syncPositions, viewport.durationSec, 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) {
+      return;
+    }
+    [startHandleRef.current, endHandleRef.current].forEach(handleEl => {
+      if (handleEl && handleEl.hasPointerCapture(event.pointerId)) {
+        handleEl.releasePointerCapture(event.pointerId);
+      }
+    });
+    dragRef.current = null;
+    setActiveHandle(null);
+    setDragRange(null);
+    onDragChangeRef.current?.(false);
+    const didChange = drag.range.startMs !== drag.originRange.startMs || drag.range.endMs !== drag.originRange.endMs;
+    if (!didChange) {
+      return;
+    }
+    const committed = commitRangeChange(drag.range);
+    if (committed) {
+      onRangeChangeRef.current?.(committed);
+    }
+  }, []);
+  const moveDrag = (0,external_react_.useCallback)(event => {
+    const drag = dragRef.current;
+    if (!drag || event.pointerId && drag.pointerId !== event.pointerId) {
+      return;
+    }
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const pointerX = event.clientX - rect.left;
+    const vp = viewportRef.current;
+    const duration = durationMsFromSec(durationSecRef.current);
+    const playheadSec = getPlayheadSecRef.current?.() ?? currentTimeSec;
+    const pointerMs = snapTimeMs({
+      pixelsPerSecond: vp.pixelsPerSecond,
+      playheadMs: playheadSec * 1000,
+      timeMs: pointerTimeMs(pointerX, vp)
+    });
+    if (drag.originMs === drag.range.startMs && drag.originMs === drag.range.endMs && pointerMs === drag.originMs) {
+      return;
+    }
+    const next = dragRangeHandle({
+      durationMs: duration,
+      handle: drag.handle,
+      pointerMs,
+      range: {
+        endMs: drag.range.endMs,
+        startMs: drag.range.startMs
+      }
+    });
+    drag.handle = next.handle;
+    drag.range = next.range;
+    setActiveHandle(next.handle);
+    setDragRange(next.range);
+    syncPositions(next.range, vp, durationSecRef.current);
+    onPreviewChangeRef.current?.({
+      endMs: next.range.endMs,
+      startMs: next.range.startMs
+    });
+  }, [currentTimeSec, syncPositions]);
+  const startDrag = (0,external_react_.useCallback)((handle, event) => {
+    if (!interactive || event.button > 1 || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const resolved = resolveRange(rangeRef.current, durationMsFromSec(durationSecRef.current));
+    dragRef.current = {
+      handle,
+      originMs: handle === 'start' ? resolved.startMs : resolved.endMs,
+      originRange: {
+        endMs: resolved.endMs,
+        startMs: resolved.startMs
+      },
+      pointerId: event.pointerId,
+      range: resolved
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setActiveHandle(handle);
+    setDragRange(resolved);
+    onDragChangeRef.current?.(true);
+    onPreviewChangeRef.current?.({
+      endMs: isRangeCollapsed(rangeRef.current) ? null : resolved.endMs,
+      startMs: resolved.startMs
+    });
+  }, [interactive]);
+  const onHandlePointerDown = (0,external_react_.useCallback)(event => {
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const pointerX = event.clientX - rect.left;
+    const vp = viewportRef.current;
+    const resolved = resolveRange(rangeRef.current, durationMsFromSec(durationSecRef.current));
+    const handle = pickRangeHandle({
+      endX: visualRangeHandlePx({
+        handle: 'end',
+        range: resolved,
+        viewport: vp
+      }),
+      pointerX,
+      startX: visualRangeHandlePx({
+        handle: 'start',
+        range: resolved,
+        viewport: vp
+      })
+    });
+    startDrag(handle, event);
+  }, [startDrag]);
+  (0,external_react_.useEffect)(() => {
+    const onMove = event => {
+      if (!dragRef.current) {
+        return;
+      }
+      event.preventDefault();
+      moveDrag(event);
+    };
+    const onUp = event => {
+      if (!dragRef.current) {
+        return;
+      }
+      endDrag(event);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+    return () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+    };
+  }, [endDrag, moveDrag]);
+  (0,external_react_.useEffect)(() => {
+    return () => {
+      if (!dragRef.current) {
+        return;
+      }
+      dragRef.current = null;
+      onDragChangeRef.current?.(false);
+    };
+  }, []);
+  if (!(durationSec > 0) || !(durationMs >= 0)) {
+    return null;
+  }
+  const tooltipHandle = activeHandle ?? 'end';
+  const tooltipMs = tooltipHandle === 'start' ? displayed.startMs : displayed.endMs;
+  const collapsed = displayed.startMs === displayed.endMs;
+  const highlight = isHighlighted || collapsed;
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: rootRef,
+    className: `bp-WaveformRange${keepHighlight ? ' bp-WaveformRange--persist' : ''}${highlight ? ' bp-WaveformRange--highlight' : ''}`,
+    "data-collapsed": collapsed ? 'true' : 'false',
+    "data-highlighted": highlight ? 'true' : 'false',
+    "data-testid": "bp-waveform-range"
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: regionRef,
+    className: "bp-WaveformRange-region",
+    "data-testid": "bp-waveform-range-region"
+  }), /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: startHandleRef,
+    className: `bp-WaveformRange-handle bp-WaveformRange-handle--start${activeHandle === 'start' ? ' bp-WaveformRange-handle--dragging' : ''}`,
+    "data-testid": "bp-waveform-range-handle-start",
+    onMouseMove: event => event.stopPropagation(),
+    onPointerDown: onHandlePointerDown
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformRange-handleGrip"
+  })), /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: endHandleRef,
+    className: `bp-WaveformRange-handle bp-WaveformRange-handle--end${activeHandle === 'end' ? ' bp-WaveformRange-handle--dragging' : ''}`,
+    "data-testid": "bp-waveform-range-handle-end",
+    onMouseMove: event => event.stopPropagation(),
+    onPointerDown: onHandlePointerDown
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformRange-handleGrip"
+  })), activeHandle && /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: tooltipRef,
+    className: "bp-WaveformRange-tooltip",
+    "data-testid": "bp-waveform-range-tooltip"
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformRange-tooltipTime"
+  }, formatTime(tooltipMs / 1000))));
+});
+/* harmony default export */ const waveform_WaveformRangeSelection = (/*#__PURE__*/external_react_["default"].memo(WaveformRangeSelection));
 ;// ./src/lib/viewers/media/waveform/WaveformView.scss
 // extracted by mini-css-extract-plugin
 
@@ -5730,6 +6327,8 @@ function WaveformView_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 
 
 
+
+
 /** Pointer X in the view and the media time under it; zoom keeps this point fixed. */
 
 /** CSS width × devicePixelRatio, for canvas gradient fills. */
@@ -5838,10 +6437,13 @@ function WaveformView({
   isPlaying = false,
   mediaEl,
   onPlayPause,
+  onRangeChange,
+  onRangeDragChange,
   onSeek,
   onViewportChange,
   onZoomChange,
   peaks,
+  range = null,
   zoomLevel: zoomLevelProp
 }) {
   // DOM / WaveSurfer
@@ -5850,6 +6452,7 @@ function WaveformView({
   const playheadRef = (0,external_react_.useRef)(null); // playhead element the camera positions
   const trackRef = (0,external_react_.useRef)(null); // hover / tap target around the canvas
   const wavesurferRef = (0,external_react_.useRef)(null); // WaveSurfer instance
+  const rangeLayerRef = (0,external_react_.useRef)(null);
 
   // Latest props for WaveSurfer + media listeners that must not re-subscribe each render.
   const cameraModeRef = (0,external_react_.useRef)(cameraMode); // latest tape/desktop; WaveSurfer create() deps stay empty
@@ -5877,6 +6480,7 @@ function WaveformView({
   const pointerZoomClearTimerRef = (0,external_react_.useRef)(0); // clears pointerZoomRef after WAVEFORM_ZOOM_DISMISS_MS
   const pointerZoomRef = (0,external_react_.useRef)(false); // pinch/wheel in progress; skip play/pause and tape recenter
   const queuedTapeSeekTimeSecRef = (0,external_react_.useRef)(null); // seek time waiting for the next animation frame
+  const rangeProgressRef = (0,external_react_.useRef)(null); // latest range progress; zoomed tile tint reads this
   const suppressNextTapPlayPauseRef = (0,external_react_.useRef)(false); // swallow play/pause after a swipe or pinch
   const suppressNextTapPlayPauseTimerRef = (0,external_react_.useRef)(0); // clears suppressNextTapPlayPauseRef
   const suppressViewportSyncRef = (0,external_react_.useRef)(false); // ignore WaveSurfer zoom/scroll while we setOptions
@@ -5900,6 +6504,12 @@ function WaveformView({
   const [overlayPortalHost, setOverlayPortalHost] = (0,external_react_.useState)(null);
   const [canvasWidthPx, setCanvasWidthPx] = (0,external_react_.useState)(0);
   const [scrollLeft, setScrollLeft] = (0,external_react_.useState)(0);
+  const [previewRange, setPreviewRange] = (0,external_react_.useState)(null);
+  const [isRangeDragging, setIsRangeDragging] = (0,external_react_.useState)(false);
+  const isRangeDraggingRef = (0,external_react_.useRef)(false);
+  const skipNextSeekRef = (0,external_react_.useRef)(false);
+  const lastSetTimeSecRef = (0,external_react_.useRef)(null);
+  const [isRangeHovered, setIsRangeHovered] = (0,external_react_.useState)(false);
   const isControlled = typeof zoomLevelProp === 'number';
   const maxZoom = getWaveformZoomMax({
     durationSec,
@@ -5916,7 +6526,23 @@ function WaveformView({
   const isScrollableWindow = isZoomed || isTape;
   const bufferProgress = getBufferedProgress(bufferedRange, durationSec);
   bufferProgressRef.current = bufferProgress;
-  hoverProgressRef.current = hoverProgress;
+  hoverProgressRef.current = isRangeDragging ? null : hoverProgress;
+  const activeRange = isRangeDragging ? previewRange ?? range : range;
+  const activeRangeRef = (0,external_react_.useRef)(activeRange);
+  activeRangeRef.current = activeRange;
+  const durationMs = durationMsFromSec(durationSec);
+  const rangeStartMs = activeRange?.startMs;
+  const rangeEndMs = activeRange?.endMs;
+  const activeRangeProgress = (0,external_react_.useMemo)(() => {
+    if (rangeStartMs == null || !Number.isFinite(rangeStartMs)) {
+      return null;
+    }
+    return rangeProgress(resolveRange({
+      endMs: rangeEndMs ?? null,
+      startMs: rangeStartMs
+    }, durationMs), durationMs);
+  }, [durationMs, rangeEndMs, rangeStartMs]);
+  rangeProgressRef.current = activeRangeProgress;
   const viewport = (0,external_react_.useMemo)(() => createWaveformViewport({
     durationSec,
     gutterPx: isTape ? getTapeGutterPx(canvasWidthPx) : 0,
@@ -5928,6 +6554,7 @@ function WaveformView({
   }), [canvasWidthPx, durationSec, height, isTape, maxZoom, scrollLeft, zoomLevel]);
   const viewportRef = (0,external_react_.useRef)(viewport); // live scroll window; prefer this over render-state while the camera is moving
   const onViewportCommit = (0,external_react_.useCallback)((scrollLeftPx, nextViewport, commitReactState = true) => {
+    rangeLayerRef.current?.applyViewport(nextViewport);
     onViewportChangeRef.current?.(nextViewport);
     if (commitReactState) {
       setScrollLeft(scrollLeftPx);
@@ -6043,6 +6670,7 @@ function WaveformView({
     }
     const scrollLeftPx = WaveformView_getScrollLeft(wavesurfer);
     viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+    rangeLayerRef.current?.applyViewport(viewportRef.current);
     onViewportChangeRef.current?.(viewportRef.current);
     setScrollLeft(scrollLeftPx);
   }, []);
@@ -6056,8 +6684,10 @@ function WaveformView({
     } else if (!isFollowPinned()) {
       playhead.style.left = timeLeftPercent(timeSec, durationSecRef.current, viewportRef.current);
     }
+    rangeLayerRef.current?.applyViewport(viewportRef.current);
     const wavesurfer = wavesurferRef.current;
-    if (wavesurfer && wavesurfer.setTime) {
+    if (wavesurfer && wavesurfer.setTime && lastSetTimeSecRef.current !== timeSec) {
+      lastSetTimeSecRef.current = timeSec;
       wavesurfer.setTime(timeSec);
     }
   }, [isFollowPinned, isTape]);
@@ -6111,6 +6741,7 @@ function WaveformView({
           applyScrollLeft(getCenteredScrollLeft(currentTimeRef.current, windowViewport), true);
         }
       }
+      lastSetTimeSecRef.current = currentTimeRef.current;
       wavesurfer.setTime(currentTimeRef.current);
     } finally {
       suppressViewportSyncRef.current = false;
@@ -6149,7 +6780,11 @@ function WaveformView({
       waveColor: WAVEFORM_COLOR_UNPLAYED
     });
     const unsubscribeClick = wavesurfer.on('click', relativeX => {
-      if (!interactiveRef.current) {
+      if (skipNextSeekRef.current) {
+        skipNextSeekRef.current = false;
+        return;
+      }
+      if (!interactiveRef.current || isRangeDraggingRef.current) {
         return;
       }
       if (cameraModeRef.current === 'tape') {
@@ -6169,6 +6804,7 @@ function WaveformView({
         }
         syncViewport();
       });
+      rangeLayerRef.current?.applyViewport(viewportRef.current);
     });
     const unsubscribeZoom = wavesurfer.on('zoom', () => {
       if (suppressViewportSyncRef.current) {
@@ -6183,11 +6819,13 @@ function WaveformView({
       tintZoomedWaveform(wavesurfer, getWaveformFills({
         bufferProgress: bufferProgressRef.current,
         hoverProgress: cameraModeRef.current === 'tape' ? null : hoverProgressRef.current,
-        isTape: cameraModeRef.current === 'tape'
+        isTape: cameraModeRef.current === 'tape',
+        rangeProgress: rangeProgressRef.current
       }), true);
     });
     wavesurferRef.current = wavesurfer;
     displayedPeaksRef.current = peaksRef.current;
+    lastSetTimeSecRef.current = null;
     disableScrollOverscroll(container);
     syncViewport();
     applyZoomWindowRef.current?.();
@@ -6205,6 +6843,7 @@ function WaveformView({
       wavesurfer.destroy();
       wavesurferRef.current = null;
       displayedPeaksRef.current = null;
+      lastSetTimeSecRef.current = null;
     };
   }, [cancelJump, handleCameraScroll, handleTapeSwipe, height, isUserPanning, releaseUserPanHold, syncViewport]);
   (0,external_react_.useLayoutEffect)(() => {
@@ -6359,7 +6998,8 @@ function WaveformView({
     const fills = getWaveformFills({
       bufferProgress,
       hoverProgress: isTape ? null : hoverProgress,
-      isTape
+      isTape,
+      rangeProgress: activeRangeProgress
     });
     if (isScrollableWindow) {
       tintZoomedWaveform(wavesurfer, fills);
@@ -6369,8 +7009,9 @@ function WaveformView({
       progressColor: toCanvasFill(fills.progressColor, devicePixelWidth(canvasWidthPx)),
       waveColor: toCanvasFill(fills.waveColor, devicePixelWidth(canvasWidthPx))
     });
+    lastSetTimeSecRef.current = currentTimeRef.current;
     wavesurfer.setTime(currentTimeRef.current);
-  }, [bufferProgress, canvasWidthPx, hoverProgress, isScrollableWindow, isTape]);
+  }, [activeRangeProgress, bufferProgress, canvasWidthPx, hoverProgress, isRangeDragging, isScrollableWindow, isTape, isZoomed]);
   (0,external_react_.useEffect)(() => {
     const track = trackRef.current;
     if (!track) {
@@ -6451,11 +7092,11 @@ function WaveformView({
     };
   }, [durationSec, markPointerZoom, setZoomLevel]);
   const onHoverMove = (0,external_react_.useCallback)(event => {
-    if (!interactive || isTape || isTouchHoverInput(event)) {
+    if (isTape || isTouchHoverInput(event)) {
       return;
     }
     const rect = event.currentTarget.getBoundingClientRect();
-    if (!(rect.width > 0) || !(durationSec > 0)) {
+    if (!(rect.width > 0)) {
       return;
     }
     const pointerX = event.clientX - rect.left;
@@ -6463,6 +7104,15 @@ function WaveformView({
       return;
     }
     const vp = viewportRef.current;
+    const draft = activeRangeRef.current;
+    setIsRangeHovered(!!draft && isPointerOverRange({
+      pointerX,
+      range: draft,
+      viewport: vp
+    }));
+    if (!interactive || isRangeDraggingRef.current || !(durationSec > 0)) {
+      return;
+    }
     if (vp.pixelsPerSecond > 0) {
       setHoverProgress(Math.min(1, Math.max(0, timeFromPositionPx(pointerX, vp) / durationSec)));
       return;
@@ -6471,12 +7121,31 @@ function WaveformView({
   }, [durationSec, interactive, isTape]);
   const onHoverLeave = (0,external_react_.useCallback)(() => {
     setHoverProgress(null);
+    setIsRangeHovered(false);
+  }, []);
+  const handleRangeDragChange = (0,external_react_.useCallback)(isDragging => {
+    isRangeDraggingRef.current = isDragging;
+    setIsRangeDragging(isDragging);
+    if (isDragging) {
+      setHoverProgress(null);
+    } else {
+      skipNextSeekRef.current = true;
+      window.setTimeout(() => {
+        skipNextSeekRef.current = false;
+      }, 0);
+      setPreviewRange(null);
+    }
+    onRangeDragChange?.(isDragging);
+  }, [onRangeDragChange]);
+  const getPlayheadSec = (0,external_react_.useCallback)(() => {
+    return mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
   }, []);
   const bindOverlayPortalHost = (0,external_react_.useCallback)(node => {
     const host = node?.parentElement ?? null;
     setOverlayPortalHost(prev => prev === host ? prev : host);
   }, []);
-  const hoverLeft = hoverProgress == null ? null : timeLeftPercent(hoverProgress * durationSec, durationSec, viewportRef.current);
+  const hoverLeft = isRangeDragging || hoverProgress == null ? null : timeLeftPercent(hoverProgress * durationSec, durationSec, viewportRef.current);
+  const showRangeOverlay = Boolean(range) && (isRangeDragging || !isPlaying || !isRangeCollapsed(range));
   const scrubTimeChip = isTape && scrubPreviewTimeSec != null ? /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover bp-WaveformView-hover--tape",
     "data-testid": "bp-waveform-hover"
@@ -6518,7 +7187,20 @@ function WaveformView({
     "aria-hidden": "true",
     className: "bp-WaveformView-playhead",
     "data-testid": "bp-waveform-playhead"
-  }), hoverLeft != null && hoverProgress != null && /*#__PURE__*/external_react_["default"].createElement("div", {
+  }), showRangeOverlay && range && /*#__PURE__*/external_react_["default"].createElement(waveform_WaveformRangeSelection, {
+    ref: rangeLayerRef,
+    currentTimeSec: currentTime,
+    durationSec: durationSec,
+    getPlayheadSec: getPlayheadSec,
+    interactive: interactive,
+    isHighlighted: isRangeDragging || isRangeHovered,
+    keepHighlight: true,
+    onDragChange: handleRangeDragChange,
+    onPreviewChange: setPreviewRange,
+    onRangeChange: interactive ? onRangeChange : undefined,
+    range: range,
+    viewport: viewport
+  }), hoverLeft != null && hoverProgress != null && !isRangeDragging && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover",
     "data-testid": "bp-waveform-hover",
     style: {
@@ -6650,8 +7332,8 @@ function WaveformZoomControl({
     onZoomChange(zoomFromSliderValue(newValue, maxZoom));
   }, [maxZoom, onZoomChange]);
   const handleStep = (0,external_react_.useCallback)(delta => {
-    onZoomChange(zoomFromSliderValue(zoomValue + delta, maxZoom));
-  }, [maxZoom, onZoomChange, zoomValue]);
+    onZoomChange(stepWaveformZoom(zoom, maxZoom, delta));
+  }, [maxZoom, onZoomChange, zoom]);
   const handleZoomInPointerDown = (0,external_react_.useCallback)(() => {
     wasFlyoutOpenOnPointerDownRef.current = isHovered || isFocused || isRevealed || isPinned;
   }, [isFocused, isHovered, isPinned, isRevealed]);
@@ -6761,7 +7443,10 @@ function MP3ControlsV2({
   commentMarkers,
   currentTime,
   durationTime,
+  hasStartedPlayback = false,
   isPlaying,
+  keyboardVolumeStep = 0,
+  keyboardZoomStep = 0,
   mediaEl,
   onAutoplayChange,
   onCommentMarkerClick,
@@ -6785,10 +7470,11 @@ function MP3ControlsV2({
   const hasRealPeaks = !!(peaks && peaks.length);
   const waveformPeaks = hasRealPeaks ? peaks : PLACEHOLDER_PEAKS;
   const waveformDurationSec = hasWaveformDuration ? durationValue : PLACEHOLDER_DURATION_SEC;
-  const [playRequested, setPlayRequested] = (0,external_react_.useState)(false);
+  const [playRequested, setPlayRequested] = (0,external_react_.useState)(hasStartedPlayback);
   const [viewport, setViewport] = (0,external_react_.useState)(null);
   const isTape = useTapeWaveform();
   const hasAppliedTapeDefaultZoomRef = (0,external_react_.useRef)(false); // ~10s window applied; reset to 1× when leaving tape
+  const lastKeyboardZoomStepRef = (0,external_react_.useRef)(0); // last +/− step applied; skip re-step when maxZoom retriggers the effect
   const userChangedTapeZoomRef = (0,external_react_.useRef)(false); // pinch/wheel zoom; skip re-applying the 10s default
   const handleViewportChange = (0,external_react_.useCallback)(next => {
     setMaxZoom(prev => prev === next.maxZoom ? prev : next.maxZoom);
@@ -6807,6 +7493,19 @@ function MP3ControlsV2({
     setZoomLevel(nextZoom);
     revealZoomControl();
   }, [revealZoomControl]);
+  (0,external_react_.useEffect)(() => {
+    const steps = keyboardZoomStep - lastKeyboardZoomStepRef.current;
+    if (!steps) {
+      return;
+    }
+    lastKeyboardZoomStepRef.current = keyboardZoomStep;
+    if (!(maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW)) {
+      return;
+    }
+    userChangedTapeZoomRef.current = true;
+    setZoomLevel(prev => stepWaveformZoom(prev, maxZoom, steps * constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD));
+    revealZoomControl();
+  }, [keyboardZoomStep, maxZoom, revealZoomControl]);
   (0,external_react_.useEffect)(() => {
     setZoomLevel(prev => clampWaveformZoom(prev, maxZoom));
   }, [maxZoom]);
@@ -6832,10 +7531,10 @@ function MP3ControlsV2({
   }, [durationValue, hasRealPeaks, hasWaveformDuration, isTape, maxZoom, viewport]);
   (0,external_react_.useEffect)(() => () => window.clearTimeout(zoomRevealTimerRef.current), []);
   (0,external_react_.useEffect)(() => {
-    if (isPlaying) {
+    if (isPlaying || hasStartedPlayback) {
       setPlayRequested(true);
     }
-  }, [isPlaying]);
+  }, [hasStartedPlayback, isPlaying]);
   const handlePlayOverlayClick = (0,external_react_.useCallback)(() => {
     setPlayRequested(true);
     onPlayPause(true);
@@ -6853,9 +7552,10 @@ function MP3ControlsV2({
     }
     onTimeChange(marker.time);
   }, [onCommentMarkerClick, onPlayPause, onTimeChange]);
-  const isWaveformInteractive = playRequested && hasMediaMetadata;
-  const isWaitingToPlay = playRequested && !hasMediaMetadata;
-  const showPlayOverlay = !playRequested && !isPlaying;
+  const hasStarted = playRequested || hasStartedPlayback;
+  const isWaveformInteractive = hasStarted && hasMediaMetadata;
+  const isWaitingToPlay = hasStarted && !hasMediaMetadata;
+  const showPlayOverlay = !hasStarted && !isPlaying;
   const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
   const hasZoomControl = hasZoomHandlers && hasMediaMetadata && maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW;
   const waveformZoomLevel = isTape || hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW;
@@ -6926,7 +7626,8 @@ function MP3ControlsV2({
     durationTime: durationValue
   })), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-group"
-  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.A, {
+  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
+    keyboardVolumeStep: keyboardVolumeStep,
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
     volume: volume
@@ -7013,11 +7714,13 @@ function isFpsAvailable(player) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Av: () => (/* binding */ WAVEFORM_TAPE_DEFAULT_WINDOW_SEC),
+/* harmony export */   BG: () => (/* binding */ WAVEFORM_RANGE_COLLAPSED_OFFSET_PX),
 /* harmony export */   Bq: () => (/* binding */ WAVEFORM_PLAYHEAD_JUMP_MS),
 /* harmony export */   DY: () => (/* binding */ WAVEFORM_BAR_RADIUS),
 /* harmony export */   EB: () => (/* binding */ CLIENT_DECODE_MAX_COMPRESSED_BYTES),
 /* harmony export */   FY: () => (/* binding */ MAX_PEAK_COUNT),
 /* harmony export */   GQ: () => (/* binding */ DURATION_MISMATCH_TOLERANCE_SEC),
+/* harmony export */   IQ: () => (/* binding */ WAVEFORM_RANGE_SNAP_PX),
 /* harmony export */   Kl: () => (/* binding */ WAVEFORM_MIN_VIEW_WINDOW_SEC),
 /* harmony export */   LW: () => (/* binding */ WAVEFORM_ZOOM_MIN),
 /* harmony export */   Le: () => (/* binding */ TAPE_POINTER_MEDIA_QUERY),
@@ -7026,8 +7729,10 @@ function isFpsAvailable(player) {
 /* harmony export */   QD: () => (/* binding */ WAVEFORM_ZOOM_BUTTON_STEP),
 /* 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 */   f3: () => (/* binding */ CLIENT_DECODE_PEAK_COUNT),
 /* harmony export */   fI: () => (/* binding */ WAVEFORM_TAPE_CLICK_SUPPRESS_MS),
+/* harmony export */   h1: () => (/* binding */ WAVEFORM_RANGE_HANDLE_LINE_PX),
 /* harmony export */   i8: () => (/* binding */ PEAK_UNIT_MAX),
 /* harmony export */   m6: () => (/* binding */ WAVEFORM_ZOOM_DISMISS_MS),
 /* harmony export */   mJ: () => (/* binding */ PEAK_UNIT_MIN),
@@ -7035,10 +7740,12 @@ function isFpsAvailable(player) {
 /* harmony export */   nh: () => (/* binding */ WAVEFORM_ZOOM_SLIDER_MAX),
 /* harmony export */   oN: () => (/* binding */ WAVEFORM_HEIGHT),
 /* harmony export */   qY: () => (/* binding */ MAX_PAYLOAD_BYTES),
+/* harmony export */   r0: () => (/* binding */ WAVEFORM_RANGE_HIT_AREA_PX),
 /* harmony export */   sh: () => (/* binding */ WAVEFORM_PAYLOAD_VERSION),
 /* harmony export */   tK: () => (/* binding */ WAVEFORM_ZOOM_MAX),
 /* harmony export */   zo: () => (/* binding */ WAVEFORM_BAR_WIDTH)
 /* harmony export */ });
+/* unused harmony exports WAVEFORM_RANGE_PLAYHEAD_GAP_PX, WAVEFORM_RANGE_GRIP_IN_MS, WAVEFORM_RANGE_GRIP_OUT_MS */
 /** Current waveform payload schema version. Bump only with a migration path. */
 const WAVEFORM_PAYLOAD_VERSION = 1;
 
@@ -7088,6 +7795,24 @@ const WAVEFORM_BAR_RADIUS = WAVEFORM_BAR_WIDTH / 2;
 const WAVEFORM_BAR_MIN_HEIGHT = WAVEFORM_BAR_WIDTH;
 const WAVEFORM_HEIGHT = 140;
 
+/** Hit target centered on each range handle line. */
+const WAVEFORM_RANGE_HIT_AREA_PX = 24;
+/** Visible handle line and playhead width. */
+const WAVEFORM_RANGE_HANDLE_LINE_PX = 2;
+/** Screen gap between the playhead and each collapsed handle line. */
+const WAVEFORM_RANGE_PLAYHEAD_GAP_PX = 1;
+/**
+ * Offset of each collapsed handle from the timestamp/playhead center so the
+ * 2px lines sit 1px left and right of the 2px playhead.
+ */
+const WAVEFORM_RANGE_COLLAPSED_OFFSET_PX = WAVEFORM_RANGE_HANDLE_LINE_PX / 2 + WAVEFORM_RANGE_PLAYHEAD_GAP_PX + WAVEFORM_RANGE_HANDLE_LINE_PX / 2;
+/** Snap a dragging handle to the playhead when this close. */
+const WAVEFORM_RANGE_SNAP_PX = 8;
+/** Shortest committed range. Collapsed drafts (`endMs: null`) are exempt. */
+const WAVEFORM_RANGE_MIN_DURATION_MS = 250;
+const WAVEFORM_RANGE_GRIP_IN_MS = 150;
+const WAVEFORM_RANGE_GRIP_OUT_MS = 100;
+
 /***/ },
 
 /***/ 4971
@@ -14598,7 +15323,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_react__["default"]), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useId"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useId), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useMemo"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useMemo), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_react__["default"]), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useId"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useId), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useMemo"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useMemo), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -23492,7 +24217,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.91.0";
+const CLIENT_VERSION = "3.92.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -36129,7 +36854,7 @@ function MP3Controls({
     isPlaying: isPlaying,
     movePlayback: movePlayback,
     onPlayPause: onPlayPause
-  }), /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.A, {
+  }), /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
     volume: volume
@@ -36202,6 +36927,57 @@ function MP3Viewer_toPrimitive(t, r) { if ("object" != typeof t || !t) return t;
 
 
 const CSS_CLASS_MP3 = 'bp-media-mp3';
+const AUDIO_V2_SHUTTLE_RATES = [2, 4, 8, 16];
+const AUDIO_V2_SHUTTLE_TICK_MS = 50;
+const AUDIO_V2_SKIP_SEC = 1;
+const AUDIO_V2_SHIFT_SKIP_SEC = 5;
+
+/**
+ * Next J/L shuttle rate. Opposite direction starts at 2×.
+ *
+ * @param {number} currentRate
+ * @param {boolean} sameDirection
+ * @return {number} 2, 4, 8, or 16
+ */
+function nextShuttleRate(currentRate, sameDirection) {
+  if (!sameDirection) {
+    return AUDIO_V2_SHUTTLE_RATES[0];
+  }
+  const index = AUDIO_V2_SHUTTLE_RATES.indexOf(currentRate);
+  if (index < 0) {
+    return AUDIO_V2_SHUTTLE_RATES[0];
+  }
+  return AUDIO_V2_SHUTTLE_RATES[Math.min(index + 1, AUDIO_V2_SHUTTLE_RATES.length - 1)];
+}
+
+/**
+ * Next/previous comment marker for ↑/↓. Walks by id so same-time stacks each get a stop.
+ *
+ * @param {Array<Object>} markers
+ * @param {Object} options
+ * @param {number} options.direction -1 previous, 1 next
+ * @param {string|null} options.selectedId
+ * @param {number} options.time current playhead
+ * @return {Object|null} marker to select
+ */
+function nextCommentMarker(markers, {
+  direction,
+  selectedId,
+  time
+}) {
+  const sorted = (markers || []).filter(marker => Number.isFinite(marker.time)).sort((left, right) => left.time - right.time || String(left.id).localeCompare(String(right.id)));
+  if (!sorted.length) {
+    return null;
+  }
+  const selectedIndex = sorted.findIndex(marker => marker.id === selectedId);
+  if (selectedIndex >= 0) {
+    return sorted[Math.max(0, Math.min(sorted.length - 1, selectedIndex + direction))];
+  }
+  if (direction > 0) {
+    return sorted.find(marker => marker.time >= time) || sorted[sorted.length - 1];
+  }
+  return [...sorted].reverse().find(marker => marker.time <= time) || sorted[0];
+}
 function createLoadFailedError(message) {
   const error = new Error(message);
   error.name = 'LOAD_FAILED';
@@ -36214,6 +36990,7 @@ class MP3Viewer extends media_MediaBaseViewer {
      * @inheritdoc
      */
     MP3Viewer_defineProperty(this, "handlePlayRequest", () => {
+      this.exitShuttle();
       this.userRequestedPlay = true;
       this.togglePlay();
       if (this.shouldRaceClientWaveformDecode() && this.isWaveformDecodeRetryPending && !this.hasUsedWaveformDecodePlayRetry) {
@@ -36230,6 +37007,7 @@ class MP3Viewer extends media_MediaBaseViewer {
      * @return {void}
      */
     MP3Viewer_defineProperty(this, "handlePlayPause", shouldPlay => {
+      this.exitShuttle();
       if (shouldPlay) {
         this.handlePlayRequest();
         return;
@@ -36239,19 +37017,25 @@ class MP3Viewer extends media_MediaBaseViewer {
     MP3Viewer_defineProperty(this, "handleCommentMarkersUpdated", (markers = []) => {
       this.commentMarkers = markers;
       const selected = markers.find(marker => marker.isSelected);
-      const selectedId = selected ? selected.id : null;
-      if (selectedId !== this.hostSelectedMarkerId) {
-        this.hostSelectedMarkerId = selectedId;
-        if (selected && Number.isFinite(selected.time)) {
-          this.pendingHostSelectedSeek = selected;
-          this.applyPendingHostSelectedSeek();
-        } else {
-          this.pendingHostSelectedSeek = null;
+
+      // Host echoes often omit isSelected. Keep hostSelectedMarkerId so ↑/↓ can
+      // still walk other comments at the same time. Clear only when that id is gone.
+      if (selected) {
+        if (selected.id !== this.hostSelectedMarkerId) {
+          this.hostSelectedMarkerId = selected.id;
+          if (Number.isFinite(selected.time)) {
+            this.pendingHostSelectedSeek = selected;
+            this.applyPendingHostSelectedSeek();
+          }
         }
+      } else if (this.hostSelectedMarkerId && !markers.some(marker => marker.id === this.hostSelectedMarkerId)) {
+        this.hostSelectedMarkerId = null;
+        this.pendingHostSelectedSeek = null;
       }
       this.renderUI();
     });
     MP3Viewer_defineProperty(this, "handleCommentMarkerClick", marker => {
+      this.exitShuttle();
       this.hostSelectedMarkerId = marker.id;
       this.pendingHostSelectedSeek = marker;
       if (this.mediaEl) {
@@ -36305,6 +37089,12 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.mediaEl = this.mediaContainerEl.appendChild(document.createElement('audio'));
     this.mediaEl.setAttribute('preload', 'auto');
     this.commentMarkers = [];
+    this.hostSelectedMarkerId = null;
+    this.shuttleDirection = null;
+    this.shuttleRate = 0;
+    this.reverseShuttleTimer = 0;
+    this.keyboardVolumeStep = 0;
+    this.keyboardZoomStep = 0;
   }
   bindCommentMarkersListener() {
     if (!this.isAudioPlayerV2) {
@@ -36324,6 +37114,212 @@ class MP3Viewer extends media_MediaBaseViewer {
     return this.featureEnabled(constants/* AUDIO_PLAYER_V2 */.Ku) && this.useReactControls();
   }
 
+  /**
+   * V2 audio keymap. Flag off and video keep MediaBaseViewer.handleKeydownReact.
+   * Alt is not in Preview's key decoder — read it from the native event.
+   *
+   * @param {string} key
+   * @param {KeyboardEvent} [event]
+   * @return {boolean} consumed
+   */
+  onKeydown(key, event) {
+    if (this.isAudioPlayerV2 && this.handleKeydownAudioV2(key, event)) {
+      return true;
+    }
+    return super.onKeydown(key, event);
+  }
+  handleKeydownAudioV2(key, event) {
+    const decoded = (key || '').toLowerCase();
+    const altKey = !!(event && event.altKey);
+    switch (decoded) {
+      case 'space':
+        this.toggleV2Play();
+        return true;
+      case 'k':
+        this.exitShuttle();
+        this.pause(undefined, true);
+        return true;
+      case 'j':
+        this.shuttle('reverse');
+        return true;
+      case 'l':
+        this.shuttle('forward');
+        return true;
+      case 'arrowleft':
+        this.quickSeek(-AUDIO_V2_SKIP_SEC);
+        return true;
+      case 'arrowright':
+        this.quickSeek(AUDIO_V2_SKIP_SEC);
+        return true;
+      case ',':
+        this.frameStep('back');
+        return true;
+      case '.':
+        this.frameStep('forward');
+        return true;
+      case 'arrowup':
+        if (altKey || !(this.commentMarkers || []).some(marker => Number.isFinite(marker.time))) {
+          this.stepKeyboardVolume(1);
+          return true;
+        }
+        this.jumpToCommentMarker(-1);
+        return true;
+      case 'arrowdown':
+        if (altKey || !(this.commentMarkers || []).some(marker => Number.isFinite(marker.time))) {
+          this.stepKeyboardVolume(-1);
+          return true;
+        }
+        this.jumpToCommentMarker(1);
+        return true;
+      case 'end':
+        if (!this.mediaEl || !Number.isFinite(this.mediaEl.duration)) {
+          return false;
+        }
+        this.exitShuttle();
+        this.setMediaTime(this.mediaEl.duration);
+        return true;
+      case '0':
+      case 'home':
+        this.exitShuttle();
+        return false;
+      case 'shift+arrowleft':
+        this.quickSeek(-AUDIO_V2_SHIFT_SKIP_SEC);
+        return true;
+      case 'shift+arrowright':
+        this.quickSeek(AUDIO_V2_SHIFT_SKIP_SEC);
+        return true;
+      case 'i':
+      case 'o':
+      case '/':
+      case 'shift+l':
+        // Range UI is not on this branch yet. Consume so I/O/loop cannot
+        // fall through to shuttle or Preview navigation.
+        return true;
+      case 'shift++':
+      case '+':
+      case '=':
+        this.stepKeyboardZoom(1);
+        return true;
+      case '-':
+      case 'shift+_':
+        this.stepKeyboardZoom(-1);
+        return true;
+      default:
+        return false;
+    }
+  }
+  toggleV2Play() {
+    const reverseShuttle = this.shuttleDirection === 'reverse';
+    const wasPlaying = !!(this.mediaEl && !this.mediaEl.paused);
+    this.exitShuttle();
+    if (reverseShuttle || wasPlaying) {
+      this.pause(undefined, true);
+      return;
+    }
+    this.handlePlayRequest();
+  }
+  shuttle(direction) {
+    const sameDirection = this.shuttleDirection === direction;
+    const rate = nextShuttleRate(this.shuttleRate, sameDirection);
+    if (direction === 'forward') {
+      this.startForwardShuttle(rate);
+      return;
+    }
+    this.startReverseShuttle(rate);
+  }
+  startForwardShuttle(rate) {
+    this.stopReverseShuttle();
+    this.shuttleDirection = 'forward';
+    this.shuttleRate = rate;
+    this.userRequestedPlay = true;
+    const playPromise = this.play();
+    if (this.mediaEl) {
+      this.mediaEl.playbackRate = this.shuttleRate;
+    }
+    if (playPromise && typeof playPromise.then === 'function') {
+      playPromise.then(() => {
+        if (this.mediaEl && this.shuttleDirection === 'forward') {
+          this.mediaEl.playbackRate = this.shuttleRate;
+        }
+      }).catch(() => {});
+    }
+  }
+  startReverseShuttle(rate) {
+    this.stopReverseShuttle();
+    this.shuttleDirection = 'reverse';
+    this.shuttleRate = rate;
+    this.userRequestedPlay = true;
+    this.pause(undefined, true);
+    this.handleRate();
+    this.reverseShuttleTimer = window.setInterval(() => {
+      if (!this.mediaEl || this.mediaEl.currentTime <= 0) {
+        this.exitShuttle();
+        return;
+      }
+      this.quickSeek(-(this.shuttleRate * AUDIO_V2_SHUTTLE_TICK_MS / 1000));
+      if (this.mediaEl.currentTime <= 0) {
+        this.exitShuttle();
+      }
+    }, AUDIO_V2_SHUTTLE_TICK_MS);
+  }
+  stopReverseShuttle() {
+    if (this.reverseShuttleTimer) {
+      window.clearInterval(this.reverseShuttleTimer);
+      this.reverseShuttleTimer = 0;
+    }
+  }
+  exitShuttle() {
+    const wasShuttling = !!this.shuttleDirection;
+    this.stopReverseShuttle();
+    this.shuttleDirection = null;
+    this.shuttleRate = 0;
+    if (wasShuttling) {
+      this.handleRate();
+    }
+  }
+
+  /**
+   * Keep the settings rate unless forward shuttle owns playbackRate.
+   *
+   * @inheritdoc
+   */
+  handleRate() {
+    if (this.shuttleDirection === 'forward' && this.shuttleRate > 0 && this.mediaEl) {
+      this.mediaEl.playbackRate = this.shuttleRate;
+      if (this.controls) {
+        this.renderUI();
+      }
+      return;
+    }
+    super.handleRate();
+  }
+  jumpToCommentMarker(direction) {
+    if (!this.mediaEl) {
+      return;
+    }
+    const target = nextCommentMarker(this.commentMarkers, {
+      direction,
+      selectedId: this.hostSelectedMarkerId,
+      time: this.mediaEl.currentTime
+    });
+    if (!target || target.id === this.hostSelectedMarkerId) {
+      return;
+    }
+    this.handleCommentMarkerClick(target);
+  }
+  stepKeyboardVolume(direction) {
+    this.keyboardVolumeStep += 1;
+    if (direction > 0) {
+      this.increaseVolume();
+      return;
+    }
+    this.decreaseVolume();
+  }
+  stepKeyboardZoom(direction) {
+    this.keyboardZoomStep += direction;
+    this.renderUI();
+  }
+
   /**
    * Load v2 controls (and wavesurfer) only when the audio player v2 gate is on.
    *
@@ -36366,7 +37362,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {Promise<{ default: Function }>} MP3ControlsV2 module
    */
   importV2Controls() {
-    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 2668));
+    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 7450));
   }
 
   /**
@@ -36389,6 +37385,9 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   destroy() {
     this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
+    this.stopReverseShuttle();
+    this.shuttleDirection = null;
+    this.shuttleRate = 0;
     this.abortWaveformLoads();
     super.destroy();
   }
@@ -36764,6 +37763,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       return;
     }
     this.pendingHostSelectedSeek = null;
+    this.exitShuttle();
     this.mediaEl.pause();
     if (this.mediaEl.currentTime !== marker.time) {
       this.mediaEl.currentTime = marker.time;
@@ -36806,6 +37806,9 @@ class MP3Viewer extends media_MediaBaseViewer {
       const Mp3ControlsV2 = this.MP3ControlsV2;
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Mp3ControlsV2, MP3Viewer_extends({}, sharedProps, {
         commentMarkers: this.commentMarkers || [],
+        hasStartedPlayback: !!this.userRequestedPlay,
+        keyboardVolumeStep: this.keyboardVolumeStep,
+        keyboardZoomStep: this.keyboardZoomStep,
         mediaEl: this.mediaEl,
         onCommentMarkerClick: this.handleCommentMarkerClick,
         peaks: this.waveformPeaks
@@ -38404,7 +39407,7 @@ function VideoControls({
     onPlayPause: onPlayPause
   })), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VideoControls-group bp-VideoControls-group--media-controls"
-  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.A, {
+  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
     volume: volume
@@ -38963,7 +39966,7 @@ function VideoControlsV2({
     mediaEl: mediaEl
   })), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VideoControlsV2-group bp-VideoControlsV2-group--right"
-  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.A, {
+  }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
     volume: volume