box-content-preview 3.91.0 → 3.93.0

package/dist/lib/index.js

@@ -620,8 +620,8 @@ const VIEWER_EVENT = {
   // When gallery view opens
   load: 'load',
   // Preview is finished loading.
-  mediaEndAutoplay: 'mediaendautoplay',
-  // Media playback has completed, with autoplay enabled.
+  mediaEndPlayNext: 'mediaEndPlayNext',
+  // Media playback has completed, with play-next enabled.
   metric: 'viewermetric',
   // A viewer metric.
   notificationHide: 'notificationhide',
@@ -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.93.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 = {};
@@ -2143,7 +2143,7 @@ function DurationLabels({
 
 /***/ },
 
-/***/ 6929
+/***/ 9229
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -2250,6 +2250,36 @@ function MediaSettingsMenuAutoplay({
 }
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettingsMenuGuides.tsx
 var MediaSettingsMenuGuides = __webpack_require__(4692);
+;// ./src/lib/viewers/controls/media/MediaSettingsMenuPlayNext.tsx
+
+
+function MediaSettingsMenuPlayNext({
+  playNext,
+  onPlayNextChange
+}) {
+  const {
+    setActiveMenu
+  } = external_react_["default"].useContext(Settings/* default */.A.Context);
+  const handleChange = value => {
+    setActiveMenu(SettingsContext/* Menu */.W.MAIN);
+    onPlayNextChange(value);
+  };
+  return /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.Menu, {
+    name: SettingsContext/* Menu */.W.PLAY_NEXT
+  }, /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.MenuBack, {
+    label: "Play next file"
+  }), /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.RadioItem, {
+    isSelected: !playNext,
+    label: "Disabled",
+    onChange: handleChange,
+    value: false
+  }), /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.RadioItem, {
+    isSelected: playNext,
+    label: "Enabled",
+    onChange: handleChange,
+    value: true
+  }));
+}
 ;// ./src/lib/viewers/controls/media/MediaSettingsMenuQuality.tsx
 
 
@@ -2402,6 +2432,7 @@ function MediaSettingsMenuSubtitles({
 
 
 
+
 function MediaSettings({
   audioTrack,
   audioTracks = [],
@@ -2416,7 +2447,9 @@ function MediaSettings({
   onGuideChange = (noop_default()),
   onQualityChange,
   onRateChange,
+  onPlayNextChange,
   onSubtitleChange,
+  playNext = false,
   quality,
   rate,
   subtitle,
@@ -2425,7 +2458,9 @@ function MediaSettings({
 }) {
   const subtitleDisplayLanguage = getDisplayLanguage(subtitle, subtitles);
   const autoValue = autoplay ? "Enabled" : "Disabled";
+  const playNextValue = playNext ? "Enabled" : "Disabled";
   const rateValue = rate === '1.0' || !rate ? "Normal" : rate;
+  const showPlayNext = typeof onPlayNextChange === 'function';
   const labelledAudioTracks = external_react_["default"].useMemo(() => addLabels(audioTracks), [audioTracks]);
   const hydratedSelectedAudioTrack = labelledAudioTracks.find(({
     id
@@ -2444,6 +2479,11 @@ function MediaSettings({
     label: "Autoplay",
     target: SettingsContext/* Menu */.W.AUTOPLAY,
     value: autoValue
+  }), showPlayNext && /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.MenuItem, {
+    "data-testid": "bp-media-settings-play-next",
+    label: "Play next file",
+    target: SettingsContext/* Menu */.W.PLAY_NEXT,
+    value: playNextValue
   }), /*#__PURE__*/external_react_["default"].createElement(Settings/* default */.A.MenuItem, {
     "data-testid": "bp-media-settings-speed",
     label: "Speed",
@@ -2473,6 +2513,9 @@ function MediaSettings({
   })), /*#__PURE__*/external_react_["default"].createElement(MediaSettingsMenuAutoplay, {
     autoplay: autoplay,
     onAutoplayChange: onAutoplayChange
+  }), showPlayNext && onPlayNextChange && /*#__PURE__*/external_react_["default"].createElement(MediaSettingsMenuPlayNext, {
+    onPlayNextChange: onPlayNextChange,
+    playNext: playNext
   }), /*#__PURE__*/external_react_["default"].createElement(MediaSettingsMenuRate, {
     onRateChange: onRateChange,
     rate: rate
@@ -2916,10 +2959,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 +3024,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 +3080,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,11 +3106,19 @@ function VolumeSliderControl(_ref) {
       step = 1,
       title,
       value,
-      onMouseOver
+      onMouseOver,
+      tabIndex = 0
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const [isScrubbing, setIsScrubbing] = external_react_["default"].useState(false);
   const sliderElRef = external_react_["default"].useRef(null);
+  const recordScrub = () => {
+    window.Box?.Preview?.resin?.recordAction({
+      action: 'programmatic',
+      component: 'toolbar',
+      target: 'volumeSlider'
+    });
+  };
   const getPositionRelativeToSlider = external_react_["default"].useCallback(clientY => {
     const {
       current: sliderEl
@@ -3085,10 +3150,12 @@ function VolumeSliderControl(_ref) {
     const key = (0,util/* decodeKeydown */.wU)(event);
     if (key === 'ArrowDown') {
       event.stopPropagation(); // Prevents global key handling
+      recordScrub();
       onUpdate(Math.max(min, Math.min(value - step, max)));
     }
     if (key === 'ArrowUp') {
       event.stopPropagation(); // Prevents global key handling
+      recordScrub();
       onUpdate(Math.max(min, Math.min(value + step, max)));
     }
   };
@@ -3101,6 +3168,7 @@ function VolumeSliderControl(_ref) {
       clientY
     } = event;
     if (button > 1 || ctrlKey || metaKey) return;
+    recordScrub();
     onUpdate(getPositionValue(pageY, clientY));
     setIsScrubbing(true);
     // Prevent clicking on the slider from triggering the mouse down event on the parent slider track
@@ -3123,6 +3191,7 @@ function VolumeSliderControl(_ref) {
   const handleTouchStart = ({
     touches
   }) => {
+    recordScrub();
     onUpdate(getPositionValue(touches[0].pageY, touches[0].clientY));
     setIsScrubbing(true);
   };
@@ -3160,33 +3229,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 +3262,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 +3277,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 +3312,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))));
+  })));
 }
 
 /***/ },
@@ -4137,7 +4233,14 @@ function SettingsRadioItem(props, ref) {
     value
   } = props;
   const displayedValue = label || value.toString();
+  const recordAction = window.Box?.Preview?.resin?.recordAction;
+  const settingsRadioItemAction = {
+    action: 'programmatic',
+    component: 'toolbar',
+    target: 'settingsRadioItem'
+  };
   const handleClick = () => {
+    recordAction?.(settingsRadioItemAction);
     onChange(value);
   };
   const handleKeydown = event => {
@@ -4145,6 +4248,7 @@ function SettingsRadioItem(props, ref) {
     if (key !== 'ArrowLeft' && key !== 'Enter' && key !== 'Space') {
       return;
     }
+    recordAction?.(settingsRadioItemAction);
     onChange(value);
   };
   return /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -4297,6 +4401,7 @@ let Menu = /*#__PURE__*/function (Menu) {
   Menu["AUDIO"] = "audio";
   Menu["AUTOPLAY"] = "autoplay";
   Menu["GUIDES"] = "guides";
+  Menu["PLAY_NEXT"] = "playnext";
   Menu["QUALITY"] = "quality";
   Menu["RATE"] = "rate";
   Menu["SUBTITLES"] = "subtitles";
@@ -4333,7 +4438,7 @@ var util = __webpack_require__(4410);
 // extracted by mini-css-extract-plugin
 
 ;// ./src/lib/viewers/controls/slider/SliderControl.tsx
-const _excluded = ["className", "max", "min", "onMove", "onUpdate", "step", "title", "track", "value"];
+const _excluded = ["className", "data-resin-target", "max", "min", "onMove", "onUpdate", "step", "title", "track", "value"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _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; }
@@ -4345,6 +4450,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 function SliderControl(_ref) {
   let {
       className,
+      'data-resin-target': resinTarget,
       max = 100,
       min = 0,
       onMove = (noop_default()),
@@ -4357,6 +4463,16 @@ function SliderControl(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   const [isScrubbing, setIsScrubbing] = external_react_["default"].useState(false);
   const sliderElRef = external_react_["default"].useRef(null);
+  const recordScrub = () => {
+    if (!resinTarget) {
+      return;
+    }
+    window.Box?.Preview?.resin?.recordAction({
+      action: 'programmatic',
+      component: 'toolbar',
+      target: resinTarget
+    });
+  };
   const getPosition = external_react_["default"].useCallback(pageX => {
     const {
       current: sliderEl
@@ -4383,10 +4499,12 @@ function SliderControl(_ref) {
     const key = (0,util/* decodeKeydown */.wU)(event);
     if (key === 'ArrowLeft') {
       event.stopPropagation(); // Prevents global key handling
+      recordScrub();
       onUpdate(Math.max(min, Math.min(value - step, max)));
     }
     if (key === 'ArrowRight') {
       event.stopPropagation(); // Prevents global key handling
+      recordScrub();
       onUpdate(Math.max(min, Math.min(value + step, max)));
     }
   };
@@ -4397,6 +4515,7 @@ function SliderControl(_ref) {
     pageX
   }) => {
     if (button > 1 || ctrlKey || metaKey) return;
+    recordScrub();
     onUpdate(getPositionValue(pageX));
     setIsScrubbing(true);
   };
@@ -4416,6 +4535,7 @@ function SliderControl(_ref) {
   const handleTouchStart = ({
     touches
   }) => {
+    recordScrub();
     onUpdate(getPositionValue(touches[0].pageX));
     setIsScrubbing(true);
   };
@@ -4453,6 +4573,7 @@ function SliderControl(_ref) {
     className: classnames_default()('bp-SliderControl', className, {
       'bp-is-scrubbing': isScrubbing
     }),
+    "data-resin-target": resinTarget,
     onKeyDown: handleKeydown,
     onMouseDown: handleMouseDown,
     onMouseMove: handleMouseMove,
@@ -4488,7 +4609,7 @@ function getPdfjsWorkerSrc() {
 
 /***/ },
 
-/***/ 2668
+/***/ 673
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -4504,8 +4625,8 @@ var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: ./node_modules/lodash/isFinite.js
 var lodash_isFinite = __webpack_require__(2297);
 var isFinite_default = /*#__PURE__*/__webpack_require__.n(lodash_isFinite);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 5 modules
-var MediaSettings = __webpack_require__(6929);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 6 modules
+var MediaSettings = __webpack_require__(9229);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseToggle.tsx + 1 modules
 var PlayPauseToggle = __webpack_require__(6321);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
@@ -4612,316 +4733,8 @@ function morphPeaks(from, to, elapsedMs) {
   }
   return out;
 }
-;// ./src/lib/viewers/media/waveform/viewport.ts
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-
-/** Visible window: start/end times, pixels-per-second, and the current zoom. */
-function createWaveformViewport({
-  durationSec,
-  gutterPx = 0,
-  heightPx,
-  maxZoom,
-  scrollLeftPx,
-  widthPx,
-  zoomLevel
-}) {
-  const zoom = Number.isFinite(zoomLevel) && zoomLevel > 0 ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW;
-  const viewDurationSec = durationSec > 0 ? durationSec / zoom : 0; // seconds visible at this zoom
-  const pixelsPerSecond = viewDurationSec > 0 && widthPx > 0 ? widthPx / viewDurationSec : 0;
-  const leadingGutterPx = Number.isFinite(gutterPx) && gutterPx > 0 ? gutterPx : 0;
-  const unclampedStartSec = pixelsPerSecond > 0 ? (scrollLeftPx - leadingGutterPx) / pixelsPerSecond : 0;
-  const gutterDurationSec = pixelsPerSecond > 0 ? leadingGutterPx / pixelsPerSecond : 0;
-  const latestWindowStartSec = leadingGutterPx > 0 ? durationSec + gutterDurationSec - viewDurationSec : Math.max(0, durationSec - viewDurationSec);
-  const earliestWindowStartSec = leadingGutterPx > 0 ? -gutterDurationSec : 0;
-  const startSec = pixelsPerSecond > 0 ? Math.min(latestWindowStartSec, Math.max(earliestWindowStartSec, unclampedStartSec)) : 0;
-  return {
-    durationSec,
-    endSec: startSec + viewDurationSec,
-    gutterPx: leadingGutterPx,
-    heightPx,
-    maxZoom,
-    pixelsPerSecond,
-    scrollLeftPx,
-    startSec,
-    widthPx,
-    zoomLevel: zoom
-  };
-}
-
-/** Same viewport with a different scroll, so start/end times update. */
-function getViewportAtScroll(viewport, scrollLeftPx) {
-  return createWaveformViewport(_objectSpread(_objectSpread({}, viewport), {}, {
-    scrollLeftPx
-  }));
-}
-
-/** True when the visible window has not moved — skip a React state update. */
-function viewportEquals(prev, next) {
-  return !!prev && prev.durationSec === next.durationSec && prev.endSec === next.endSec && prev.gutterPx === next.gutterPx && prev.maxZoom === next.maxZoom && prev.scrollLeftPx === next.scrollLeftPx && prev.startSec === next.startSec && prev.widthPx === next.widthPx && prev.zoomLevel === next.zoomLevel;
-}
-
-/** How many CSS pixels from the left of the visible window this time sits. */
-function positionPxFromTime(timeSec, viewport) {
-  return (timeSec - viewport.startSec) * viewport.pixelsPerSecond;
-}
-
-/** Media time under a point this many CSS pixels from the left of the visible window. */
-function timeFromPositionPx(positionPx, viewport) {
-  if (!(viewport.pixelsPerSecond > 0)) {
-    return viewport.startSec;
-  }
-  return viewport.startSec + positionPx / viewport.pixelsPerSecond;
-}
-
-/** True when this time sits inside the visible window. */
-function isTimeInView(timeSec, viewport) {
-  return timeSec >= viewport.startSec && timeSec <= viewport.endSec;
-}
-
-/** UI max zoom: 24×, ~1 peak per CSS pixel, and a minimum visible window. */
-function getWaveformZoomMax({
-  durationSec,
-  peakCount,
-  viewWidthPx
-}) {
-  if (!(peakCount > 0) || !(viewWidthPx > 0)) {
-    return constants/* WAVEFORM_ZOOM_MIN */.LW;
-  }
-  const peakLimitedMax = Math.floor(peakCount / viewWidthPx);
-  const durationLimitedMax = durationSec > 0 ? durationSec / constants/* WAVEFORM_MIN_VIEW_WINDOW_SEC */.Kl : constants/* WAVEFORM_ZOOM_MIN */.LW;
-  return Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, Math.min(constants/* WAVEFORM_ZOOM_MAX */.tK, peakLimitedMax, durationLimitedMax));
-}
-
-/** Keep zoom between 1× and this file's max. */
-function clampWaveformZoom(zoomLevel, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW) {
-  const max = Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
-  if (!Number.isFinite(zoomLevel)) {
-    return constants/* WAVEFORM_ZOOM_MIN */.LW;
-  }
-  return Math.min(max, Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, zoomLevel));
-}
-
-/** WaveSurfer zoom density. 0 = fit the whole file in the view. */
-function getZoomedPixelsPerSecond({
-  durationSec,
-  isTape = false,
-  maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW,
-  viewWidthPx,
-  zoomLevel
-}) {
-  const zoom = clampWaveformZoom(zoomLevel, maxZoom);
-  if (!(durationSec > 0) || !(viewWidthPx > 0)) {
-    return 0;
-  }
-  if (!isTape && zoom <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
-    return 0;
-  }
-  return viewWidthPx / durationSec * zoom;
-}
-
-/** Half-view empty space so t=0 and duration can sit under the center pin. */
-function getTapeGutterPx(widthPx) {
-  return widthPx > 0 ? widthPx / 2 : 0;
-}
-
-/** Tape first paint: 10s on screen, or 1× when the file is shorter than that. */
-function getTapeDefaultZoom(durationSec, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW) {
-  if (!(durationSec > 0)) {
-    return constants/* WAVEFORM_ZOOM_MIN */.LW;
-  }
-  return clampWaveformZoom(durationSec / constants/* WAVEFORM_TAPE_DEFAULT_WINDOW_SEC */.Av, maxZoom);
-}
-
-/** Map zoom (1…max) onto the 0–100 slider. */
-function sliderValueFromZoom(zoomLevel, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW) {
-  const max = Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
-  const zoom = clampWaveformZoom(zoomLevel, max);
-  if (max <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
-    return 0;
-  }
-  return (zoom - constants/* WAVEFORM_ZOOM_MIN */.LW) / (max - constants/* WAVEFORM_ZOOM_MIN */.LW) * constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
-}
-
-/** Inverse of sliderValueFromZoom. */
-function zoomFromSliderValue(value, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.LW) {
-  const max = Math.max(constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
-  if (max <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
-    return constants/* WAVEFORM_ZOOM_MIN */.LW;
-  }
-  const t = Math.min(constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh, Math.max(0, value)) / constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
-  return clampWaveformZoom(constants/* WAVEFORM_ZOOM_MIN */.LW + t * (max - constants/* WAVEFORM_ZOOM_MIN */.LW), max);
-}
-
-/** Max scroll that still shows a full window (no overscroll). Gutters add empty lead/trail. */
-function maxScrollLeft(viewport) {
-  const gutterPx = viewport.gutterPx || 0;
-  return Math.max(0, viewport.durationSec * viewport.pixelsPerSecond + 2 * gutterPx - viewport.widthPx);
-}
-
-/** Scroll offset that still shows a full window (no overscroll). */
-function clampScrollLeft(scrollLeftPx, viewport) {
-  if (!Number.isFinite(scrollLeftPx)) {
-    return 0;
-  }
-  return Math.min(maxScrollLeft(viewport), Math.max(0, scrollLeftPx));
-}
-
-/** Center this time in the view, clamped so the window still fills the canvas. */
-function getCenteredScrollLeft(timeSec, viewport) {
-  return clampScrollLeft(timeSec * viewport.pixelsPerSecond + (viewport.gutterPx || 0) - viewport.widthPx / 2, viewport);
-}
-
-/**
- * Host/media seek while zoomed: jump so the time (and its comment avatar) is on screen.
- * No-op at fit-to-width or when that time is already visible.
- */
-function getSeekCameraAction({
-  cameraMode = 'desktop',
-  timeSec,
-  viewport
-}) {
-  if (!(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
-    return {
-      type: 'none'
-    };
-  }
-  if (cameraMode === 'tape') {
-    const scrollLeftPx = getCenteredScrollLeft(timeSec, viewport);
-    if (Math.abs(scrollLeftPx - viewport.scrollLeftPx) < 1) {
-      return {
-        type: 'none'
-      };
-    }
-    return {
-      type: 'jump',
-      scrollLeftPx
-    };
-  }
-  if (viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
-    return {
-      type: 'none'
-    };
-  }
-  if (isTimeInView(timeSec, viewport)) {
-    return {
-      type: 'none'
-    };
-  }
-  return {
-    type: 'jump',
-    scrollLeftPx: getCenteredScrollLeft(timeSec, viewport)
-  };
-}
-
-/** Always keep this time under the center pin. Reuses followRight so the camera hook can pin. */
-function getTapeCameraAction({
-  timeSec,
-  viewport
-}) {
-  if (!(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
-    return {
-      type: 'none'
-    };
-  }
-  return {
-    isPlayheadPinned: true,
-    scrollLeftPx: getCenteredScrollLeft(timeSec, viewport),
-    type: 'followRight'
-  };
-}
-
-/** Follow inset in CSS px, capped at one third of the view so a narrow player still has room. */
-function getFollowInsetPx(widthPx, insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM) {
-  if (!(widthPx > 0)) {
-    return 0;
-  }
-  return Math.min(Math.max(0, insetPx), widthPx / 3);
-}
-
-/** CSS left for a playhead pinned to the follow inset. */
-function getPinnedPlayheadLeft(widthPx, insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM) {
-  const inset = getFollowInsetPx(widthPx, insetPx);
-  if (!(widthPx > 0)) {
-    return '0%';
-  }
-  return `${(widthPx - inset) / widthPx * 100}%`;
-}
-
-/** CSS left for a playhead locked to the center of the view. */
-function getTapePinnedPlayheadLeft() {
-  return '50%';
-}
-
-/** CSS left % of the playhead from the left of the visible window. */
-function timeLeftPercent(timeSec, durationSec, viewport) {
-  if (viewport.widthPx > 0 && viewport.pixelsPerSecond > 0) {
-    return `${positionPxFromTime(timeSec, viewport) / viewport.widthPx * 100}%`;
-  }
-  const progress = durationSec > 0 ? Math.min(1, Math.max(0, timeSec / durationSec)) : 0;
-  return `${progress * 100}%`;
-}
-
-/**
- * Walk across the view until the playhead nears the right edge, then follow.
- * Off-screen at play start jumps in; off-screen right while playing keeps following.
- */
-function getPlayheadCameraAction({
-  cameraMode = 'desktop',
-  insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM,
-  isPlaying,
-  playJustStarted,
-  timeSec,
-  viewport
-}) {
-  if (cameraMode === 'tape') {
-    return getTapeCameraAction({
-      timeSec,
-      viewport
-    });
-  }
-  if (!isPlaying || viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW || !(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
-    return {
-      type: 'none'
-    };
-  }
-  const inset = getFollowInsetPx(viewport.widthPx, insetPx);
-  const viewX = positionPxFromTime(timeSec, viewport);
-  const playheadCanvasX = timeSec * viewport.pixelsPerSecond;
-  const followX = viewport.widthPx - inset;
-  if (viewX < 0) {
-    if (!playJustStarted) {
-      return {
-        type: 'none'
-      };
-    }
-    return {
-      type: 'jump',
-      scrollLeftPx: clampScrollLeft(playheadCanvasX - inset, viewport)
-    };
-  }
-  if (viewX >= followX) {
-    const unclampedScroll = playheadCanvasX - followX;
-    const scrollLeftPx = clampScrollLeft(unclampedScroll, viewport);
-    if (playJustStarted && viewX > viewport.widthPx) {
-      return {
-        type: 'jump',
-        scrollLeftPx
-      };
-    }
-    return {
-      type: 'followRight',
-      isPlayheadPinned: unclampedScroll <= maxScrollLeft(viewport),
-      scrollLeftPx
-    };
-  }
-  return {
-    type: 'none'
-  };
-}
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/viewport.ts
+var waveform_viewport = __webpack_require__(772);
 ;// ./src/lib/viewers/media/waveform/useTapeWaveform.ts
 
 
@@ -5123,6 +4936,32 @@ function WaveformCommentMarkers({
     }));
   })));
 }
+;// ./src/lib/viewers/media/waveform/WaveformGeneratingIndicator.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/media/waveform/WaveformGeneratingIndicator.tsx
+
+
+function WaveformGeneratingIndicator() {
+  const label = "Generating waveform";
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    "aria-live": "polite",
+    className: "bp-WaveformGeneratingIndicator",
+    "data-testid": "bp-waveform-generating",
+    role: "status"
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    "aria-hidden": "true",
+    className: "bp-WaveformGeneratingIndicator-bars"
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformGeneratingIndicator-bar"
+  }), /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformGeneratingIndicator-bar"
+  }), /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformGeneratingIndicator-bar"
+  })), /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformGeneratingIndicator-label"
+  }, label));
+}
 ;// external "react-dom"
 
 ;// ./node_modules/wavesurfer.js/dist/wavesurfer.esm.js
@@ -5213,15 +5052,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 +5117,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 +5288,8 @@ function tintWaveformTiles({
     });
   });
 }
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/range.ts
+var waveform_range = __webpack_require__(4253);
 ;// ./src/lib/viewers/media/waveform/usePlayheadCamera.ts
 
 
@@ -5487,7 +5383,7 @@ function usePlayheadCamera({
     wavesurfer.setScroll(scrollLeftPx);
     const appliedScrollLeft = getScrollLeft(wavesurfer, scrollLeftPx);
     lastCameraScrollRef.current = appliedScrollLeft;
-    viewportRef.current = getViewportAtScroll(viewportRef.current, appliedScrollLeft);
+    viewportRef.current = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, appliedScrollLeft);
     window.requestAnimationFrame(() => {
       // Keep the flag through delayed `scroll` while the camera is driving.
       if (jumpAnimationRef.current || isFollowPinnedRef.current) {
@@ -5504,7 +5400,7 @@ function usePlayheadCamera({
     if (!playhead || !isPinned || !(viewport.widthPx > 0)) {
       return;
     }
-    playhead.style.left = isTape() ? getTapePinnedPlayheadLeft() : getPinnedPlayheadLeft(viewport.widthPx);
+    playhead.style.left = isTape() ? (0,waveform_viewport/* getTapePinnedPlayheadLeft */.yW)() : (0,waveform_viewport/* getPinnedPlayheadLeft */.gl)(viewport.widthPx);
   }, [isTape]);
   const apply = (0,external_react_.useCallback)((timeSec, playJustStarted = false) => {
     mediaTimeRef.current = timeSec;
@@ -5523,8 +5419,8 @@ function usePlayheadCamera({
     if (jumpAnimationRef.current && !playJustStarted) {
       return;
     }
-    const liveViewport = getViewportAtScroll(viewport, getScrollLeft(wavesurfer, viewport.scrollLeftPx));
-    const action = getPlayheadCameraAction({
+    const liveViewport = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewport, getScrollLeft(wavesurfer, viewport.scrollLeftPx));
+    const action = (0,waveform_viewport/* getPlayheadCameraAction */.aJ)({
       cameraMode: cameraModeRef.current,
       isPlaying: true,
       playJustStarted,
@@ -5562,12 +5458,12 @@ function usePlayheadCamera({
     const start = (0,util/* getCurrentTimeMs */.RU)();
     const tick = now => {
       const t = Math.min(1, (now - start) / constants/* WAVEFORM_PLAYHEAD_JUMP_MS */.Bq);
-      const liveAction = getPlayheadCameraAction({
+      const liveAction = (0,waveform_viewport/* getPlayheadCameraAction */.aJ)({
         cameraMode: cameraModeRef.current,
         isPlaying: true,
         playJustStarted: true,
         timeSec: mediaTimeRef.current,
-        viewport: getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer, from))
+        viewport: (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, getScrollLeft(wavesurfer, from))
       });
       const to = liveAction.type === 'none' ? action.scrollLeftPx : liveAction.scrollLeftPx;
       applyScrollLeft(from + (to - from) * (1 - (1 - t) * (1 - t)), false);
@@ -5590,7 +5486,7 @@ function usePlayheadCamera({
   const isUserPan = (0,external_react_.useCallback)(scrollLeftPx => {
     const isCameraOwnedScroll = programmaticScrollRef.current || jumpAnimationRef.current !== 0;
     const lastCameraScroll = lastCameraScrollRef.current;
-    const maxScroll = maxScrollLeft(viewportRef.current);
+    const maxScroll = (0,waveform_viewport/* maxScrollLeft */.d0)(viewportRef.current);
     const isClampedToMax = lastCameraScroll != null && scrollLeftPx >= maxScroll - 1 && lastCameraScroll >= maxScroll - 1;
     const isFollowCameraScroll = isFollowPinnedRef.current && lastCameraScroll != null && Math.abs(scrollLeftPx - lastCameraScroll) <= 1;
     return !(isCameraOwnedScroll && (jumpAnimationRef.current !== 0 || isFollowCameraScroll || isClampedToMax || !isFollowPinnedRef.current));
@@ -5606,8 +5502,8 @@ function usePlayheadCamera({
     if (!isTape()) {
       isFollowPinnedRef.current = false;
     }
-    const liveViewport = getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer, viewportRef.current.scrollLeftPx));
-    const action = getSeekCameraAction({
+    const liveViewport = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, getScrollLeft(wavesurfer, viewportRef.current.scrollLeftPx));
+    const action = (0,waveform_viewport/* getSeekCameraAction */.wA)({
       cameraMode: cameraModeRef.current,
       timeSec,
       viewport: liveViewport
@@ -5628,7 +5524,7 @@ function usePlayheadCamera({
       applyScrollLeft(from + (to - from) * (1 - (1 - t) * (1 - t)), false);
       const playhead = playheadRef.current;
       if (playhead) {
-        playhead.style.left = isTape() ? getTapePinnedPlayheadLeft() : timeLeftPercent(mediaTimeRef.current, viewportRef.current.durationSec, viewportRef.current);
+        playhead.style.left = isTape() ? (0,waveform_viewport/* getTapePinnedPlayheadLeft */.yW)() : (0,waveform_viewport/* timeLeftPercent */.Mu)(mediaTimeRef.current, viewportRef.current.durationSec, viewportRef.current);
       }
       if (t < 1) {
         jumpAnimationRef.current = window.requestAnimationFrame(tick);
@@ -5646,16 +5542,16 @@ function usePlayheadCamera({
     }
     const scrollLeftPx = getScrollLeft(wavesurfer);
     if (!isUserPan(scrollLeftPx)) {
-      viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+      viewportRef.current = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, scrollLeftPx);
       return;
     }
-    viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+    viewportRef.current = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, scrollLeftPx);
     const playhead = playheadRef.current;
     if (isTape()) {
       if (playhead) {
-        playhead.style.left = getTapePinnedPlayheadLeft();
+        playhead.style.left = (0,waveform_viewport/* getTapePinnedPlayheadLeft */.yW)();
       }
-      const pinTimeSec = Math.min(viewportRef.current.durationSec, Math.max(0, timeFromPositionPx(viewportRef.current.widthPx / 2, viewportRef.current)));
+      const pinTimeSec = Math.min(viewportRef.current.durationSec, Math.max(0, (0,waveform_viewport/* timeFromPositionPx */.lZ)(viewportRef.current.widthPx / 2, viewportRef.current)));
       userIsScrollingRef.current = true;
       window.clearTimeout(scrollSettleTimerRef.current);
       scrollSettleTimerRef.current = window.setTimeout(() => {
@@ -5673,7 +5569,7 @@ function usePlayheadCamera({
     }
     const timeSec = readMediaTime();
     if (playhead) {
-      playhead.style.left = timeLeftPercent(timeSec, viewportRef.current.durationSec, viewportRef.current);
+      playhead.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)(timeSec, viewportRef.current.durationSec, viewportRef.current);
     }
     userIsScrollingRef.current = true;
     holdFollowUntilInsetRef.current = true;
@@ -5709,15 +5605,318 @@ 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((0,waveform_viewport/* timeLeftPercent */.Mu)(timeSec, durationSec, viewport), collapsedOffsetPx);
+}
+function applyRegion(el, startSec, endSec, durationSec, viewport, collapsed) {
+  if (!el) {
+    return;
+  }
+  const start = (0,waveform_viewport/* timeLeftPercent */.Mu)(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 = (0,waveform_viewport/* timeLeftPercent */.Mu)(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)((0,waveform_range/* resolveRange */.Ss)(range, (0,waveform_range/* durationMsFromSec */.uH)(durationSec)));
+  const viewportRef = (0,external_react_.useRef)(viewport);
+  const durationSecRef = (0,external_react_.useRef)(durationSec);
+  const onDragChangeRef = (0,external_react_.useRef)(onDragChange);
+  const 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 = (0,waveform_range/* durationMsFromSec */.uH)(durationSec);
+  const displayed = dragRange ?? (0,waveform_range/* resolveRange */.Ss)(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 = (0,waveform_viewport/* timeLeftPercent */.Mu)(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 = (0,waveform_viewport/* createWaveformViewport */.eq)({
+      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 = (0,waveform_range/* commitRangeChange */.dG)(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 = (0,waveform_range/* durationMsFromSec */.uH)(durationSecRef.current);
+    const playheadSec = getPlayheadSecRef.current?.() ?? currentTimeSec;
+    const pointerMs = (0,waveform_range/* snapTimeMs */.Mh)({
+      pixelsPerSecond: vp.pixelsPerSecond,
+      playheadMs: playheadSec * 1000,
+      timeMs: (0,waveform_range/* pointerTimeMs */.v2)(pointerX, vp)
+    });
+    if (drag.originMs === drag.range.startMs && drag.originMs === drag.range.endMs && pointerMs === drag.originMs) {
+      return;
+    }
+    const next = (0,waveform_range/* dragRangeHandle */.Mo)({
+      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 = (0,waveform_range/* resolveRange */.Ss)(rangeRef.current, (0,waveform_range/* durationMsFromSec */.uH)(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: (0,waveform_range/* isRangeCollapsed */.BT)(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 = (0,waveform_range/* resolveRange */.Ss)(rangeRef.current, (0,waveform_range/* durationMsFromSec */.uH)(durationSecRef.current));
+    const handle = (0,waveform_range/* pickRangeHandle */.HG)({
+      endX: (0,waveform_range/* visualRangeHandlePx */.Eh)({
+        handle: 'end',
+        range: resolved,
+        viewport: vp
+      }),
+      pointerX,
+      startX: (0,waveform_range/* visualRangeHandlePx */.Eh)({
+        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
 
 ;// ./src/lib/viewers/media/waveform/WaveformView.tsx
-function WaveformView_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function WaveformView_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? WaveformView_ownKeys(Object(t), !0).forEach(function (r) { WaveformView_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : WaveformView_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function WaveformView_defineProperty(e, r, t) { return (r = WaveformView_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function WaveformView_toPropertyKey(t) { var i = WaveformView_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function WaveformView_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+
 
 
 
@@ -5838,10 +6037,14 @@ function WaveformView({
   isPlaying = false,
   mediaEl,
   onPlayPause,
+  onRangeChange,
+  onRangeClear,
+  onRangeDragChange,
   onSeek,
   onViewportChange,
   onZoomChange,
   peaks,
+  range = null,
   zoomLevel: zoomLevelProp
 }) {
   // DOM / WaveSurfer
@@ -5850,6 +6053,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
@@ -5861,6 +6065,7 @@ function WaveformView({
   const mediaElRef = (0,external_react_.useRef)(mediaEl); // latest <audio>/<video>; camera + playhead tick read this
   const onPlayPauseRef = (0,external_react_.useRef)(onPlayPause); // latest play/pause; tape tap must not re-bind
   const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
+  const onRangeClearRef = (0,external_react_.useRef)(onRangeClear); // latest click-outside clear; WaveSurfer click must not re-bind
   const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange); // latest viewport callback; camera commits here
   const peaksRef = (0,external_react_.useRef)(peaks); // latest peaks; WaveSurfer create() + morph read this
 
@@ -5877,6 +6082,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
@@ -5892,6 +6098,7 @@ function WaveformView({
   mediaElRef.current = mediaEl;
   onPlayPauseRef.current = onPlayPause;
   onSeekRef.current = onSeek;
+  onRangeClearRef.current = onRangeClear;
   onViewportChangeRef.current = onViewportChange;
   peaksRef.current = peaks;
   const [internalZoom, setInternalZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
@@ -5900,14 +6107,20 @@ 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({
+  const maxZoom = (0,waveform_viewport/* getWaveformZoomMax */.by)({
     durationSec,
     peakCount: peaks.length,
     viewWidthPx: canvasWidthPx
   });
   hasZoomHandlersRef.current = maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW && (typeof onZoomChange === 'function' || typeof zoomLevelProp !== 'number');
-  const zoomLevel = clampWaveformZoom(isControlled ? zoomLevelProp : internalZoom, maxZoom);
+  const zoomLevel = (0,waveform_viewport/* clampWaveformZoom */.ii)(isControlled ? zoomLevelProp : internalZoom, maxZoom);
   const zoomRef = (0,external_react_.useRef)(zoomLevel); // latest zoom for WaveSurfer redraw/zoom handlers
   zoomRef.current = zoomLevel;
   const prevZoomRef = (0,external_react_.useRef)(null); // last applied zoom; tape recenters only when this changes
@@ -5916,10 +6129,26 @@ function WaveformView({
   const isScrollableWindow = isZoomed || isTape;
   const bufferProgress = getBufferedProgress(bufferedRange, durationSec);
   bufferProgressRef.current = bufferProgress;
-  hoverProgressRef.current = hoverProgress;
-  const viewport = (0,external_react_.useMemo)(() => createWaveformViewport({
+  hoverProgressRef.current = isRangeDragging ? null : hoverProgress;
+  const activeRange = isRangeDragging ? previewRange ?? range : range;
+  const activeRangeRef = (0,external_react_.useRef)(activeRange);
+  activeRangeRef.current = activeRange;
+  const durationMs = (0,waveform_range/* durationMsFromSec */.uH)(durationSec);
+  const rangeStartMs = activeRange?.startMs;
+  const rangeEndMs = activeRange?.endMs;
+  const activeRangeProgress = (0,external_react_.useMemo)(() => {
+    if (rangeStartMs == null || !Number.isFinite(rangeStartMs)) {
+      return null;
+    }
+    return (0,waveform_range/* rangeProgress */.D$)((0,waveform_range/* resolveRange */.Ss)({
+      endMs: rangeEndMs ?? null,
+      startMs: rangeStartMs
+    }, durationMs), durationMs);
+  }, [durationMs, rangeEndMs, rangeStartMs]);
+  rangeProgressRef.current = activeRangeProgress;
+  const viewport = (0,external_react_.useMemo)(() => (0,waveform_viewport/* createWaveformViewport */.eq)({
     durationSec,
-    gutterPx: isTape ? getTapeGutterPx(canvasWidthPx) : 0,
+    gutterPx: isTape ? (0,waveform_viewport/* getTapeGutterPx */.iA)(canvasWidthPx) : 0,
     heightPx: height,
     maxZoom,
     scrollLeftPx: scrollLeft,
@@ -5928,6 +6157,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);
@@ -5976,7 +6206,7 @@ function WaveformView({
   }, [isUserPanning]);
   toggleTapePlaybackRef.current = toggleTapePlayback;
   (0,external_react_.useLayoutEffect)(() => {
-    viewportRef.current = createWaveformViewport({
+    viewportRef.current = (0,waveform_viewport/* createWaveformViewport */.eq)({
       durationSec: viewport.durationSec,
       gutterPx: viewport.gutterPx,
       heightPx: viewport.heightPx,
@@ -5987,7 +6217,7 @@ function WaveformView({
     });
   }, [viewport]);
   const setZoomLevel = (0,external_react_.useCallback)(nextZoom => {
-    const zoom = clampWaveformZoom(nextZoom, maxZoom);
+    const zoom = (0,waveform_viewport/* clampWaveformZoom */.ii)(nextZoom, maxZoom);
     if (!isControlled) {
       setInternalZoom(zoom);
     }
@@ -6042,7 +6272,8 @@ function WaveformView({
       return;
     }
     const scrollLeftPx = WaveformView_getScrollLeft(wavesurfer);
-    viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+    viewportRef.current = (0,waveform_viewport/* getViewportAtScroll */.NI)(viewportRef.current, scrollLeftPx);
+    rangeLayerRef.current?.applyViewport(viewportRef.current);
     onViewportChangeRef.current?.(viewportRef.current);
     setScrollLeft(scrollLeftPx);
   }, []);
@@ -6052,12 +6283,14 @@ function WaveformView({
       return;
     }
     if (isTape) {
-      playhead.style.left = getTapePinnedPlayheadLeft();
+      playhead.style.left = (0,waveform_viewport/* getTapePinnedPlayheadLeft */.yW)();
     } else if (!isFollowPinned()) {
-      playhead.style.left = timeLeftPercent(timeSec, durationSecRef.current, viewportRef.current);
+      playhead.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)(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]);
@@ -6070,14 +6303,14 @@ function WaveformView({
       return;
     }
     const viewWidthPx = wavesurfer.getWidth ? wavesurfer.getWidth() : container.clientWidth;
-    const minPxPerSec = getZoomedPixelsPerSecond({
+    const minPxPerSec = (0,waveform_viewport/* getZoomedPixelsPerSecond */.J$)({
       durationSec,
       isTape,
       maxZoom,
       viewWidthPx,
       zoomLevel
     });
-    const gutterPx = isTape ? getTapeGutterPx(viewWidthPx) : 0;
+    const gutterPx = isTape ? (0,waveform_viewport/* getTapeGutterPx */.iA)(viewWidthPx) : 0;
     const origin = isTape ? null : zoomOriginRef.current;
     zoomOriginRef.current = null;
     const didZoomChange = prevZoomRef.current !== zoomLevel;
@@ -6086,7 +6319,7 @@ function WaveformView({
     }
     suppressViewportSyncRef.current = true;
     try {
-      wavesurfer.setOptions(WaveformView_objectSpread({
+      wavesurfer.setOptions(_objectSpread({
         autoScroll: false,
         fillParent: !isTape,
         minPxPerSec
@@ -6096,7 +6329,7 @@ function WaveformView({
       } : {}));
       applyWaveformGutters(wavesurfer, gutterPx);
       if (minPxPerSec > 0) {
-        const windowViewport = createWaveformViewport({
+        const windowViewport = (0,waveform_viewport/* createWaveformViewport */.eq)({
           durationSec,
           gutterPx,
           heightPx: liveHeightRef.current || height,
@@ -6108,9 +6341,10 @@ function WaveformView({
         if (origin) {
           applyScrollLeft(origin.timeSec * minPxPerSec + gutterPx - origin.pointerX, true);
         } else if (didZoomChange && (isTape || !pointerZoomRef.current)) {
-          applyScrollLeft(getCenteredScrollLeft(currentTimeRef.current, windowViewport), true);
+          applyScrollLeft((0,waveform_viewport/* getCenteredScrollLeft */.b6)(currentTimeRef.current, windowViewport), true);
         }
       }
+      lastSetTimeSecRef.current = currentTimeRef.current;
       wavesurfer.setTime(currentTimeRef.current);
     } finally {
       suppressViewportSyncRef.current = false;
@@ -6149,14 +6383,30 @@ 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;
+      }
+      const rangeDraft = activeRangeRef.current;
+      const timeSec = relativeX * durationSecRef.current;
+      if (rangeDraft && !(0,waveform_range/* isRangeCollapsed */.BT)(rangeDraft)) {
+        const pointerX = (0,waveform_viewport/* positionPxFromTime */.TO)(timeSec, viewportRef.current);
+        if (!(0,waveform_range/* isPointerOverRange */.H5)({
+          pointerX,
+          range: rangeDraft,
+          viewport: viewportRef.current
+        })) {
+          onRangeClearRef.current?.();
+        }
+      }
       if (cameraModeRef.current === 'tape') {
         toggleTapePlaybackRef.current?.();
         return;
       }
-      onSeekRef.current?.(relativeX * durationSecRef.current);
+      onSeekRef.current?.(timeSec);
     });
     const unsubscribeScroll = wavesurfer.on('scroll', () => {
       if (suppressViewportSyncRef.current) {
@@ -6169,6 +6419,7 @@ function WaveformView({
         }
         syncViewport();
       });
+      rangeLayerRef.current?.applyViewport(viewportRef.current);
     });
     const unsubscribeZoom = wavesurfer.on('zoom', () => {
       if (suppressViewportSyncRef.current) {
@@ -6183,11 +6434,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 +6458,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)(() => {
@@ -6245,7 +6499,7 @@ function WaveformView({
   }, [syncViewport]);
   (0,external_react_.useEffect)(() => {
     const rawZoom = isControlled ? zoomLevelProp : internalZoom;
-    const clamped = clampWaveformZoom(typeof rawZoom === 'number' ? rawZoom : constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
+    const clamped = (0,waveform_viewport/* clampWaveformZoom */.ii)(typeof rawZoom === 'number' ? rawZoom : constants/* WAVEFORM_ZOOM_MIN */.LW, maxZoom);
     if (clamped === rawZoom) {
       return;
     }
@@ -6359,7 +6613,8 @@ function WaveformView({
     const fills = getWaveformFills({
       bufferProgress,
       hoverProgress: isTape ? null : hoverProgress,
-      isTape
+      isTape,
+      rangeProgress: activeRangeProgress
     });
     if (isScrollableWindow) {
       tintZoomedWaveform(wavesurfer, fills);
@@ -6369,8 +6624,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 +6707,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,20 +6719,48 @@ function WaveformView({
       return;
     }
     const vp = viewportRef.current;
+    const rangeDraft = activeRangeRef.current;
+    setIsRangeHovered(!!rangeDraft && (0,waveform_range/* isPointerOverRange */.H5)({
+      pointerX,
+      range: rangeDraft,
+      viewport: vp
+    }));
+    if (!interactive || isRangeDraggingRef.current || !(durationSec > 0)) {
+      return;
+    }
     if (vp.pixelsPerSecond > 0) {
-      setHoverProgress(Math.min(1, Math.max(0, timeFromPositionPx(pointerX, vp) / durationSec)));
+      setHoverProgress(Math.min(1, Math.max(0, (0,waveform_viewport/* timeFromPositionPx */.lZ)(pointerX, vp) / durationSec)));
       return;
     }
     setHoverProgress(Math.min(1, Math.max(0, pointerX / rect.width)));
   }, [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 : (0,waveform_viewport/* timeLeftPercent */.Mu)(hoverProgress * durationSec, durationSec, viewportRef.current);
+  const showRangeOverlay = Boolean(range) && (isRangeDragging || !isPlaying || !(0,waveform_range/* isRangeCollapsed */.BT)(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 +6802,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: {
@@ -6620,8 +6917,9 @@ function WaveformZoomControl({
   const zoomControlElRef = (0,external_react_.useRef)(null); // root; outside pointerdown unpins the flyout
   const dismissTimerRef = (0,external_react_.useRef)(0); // delay before hover-close of the flyout
   const sliderId = `bp-waveform-zoom-slider${(0,external_react_.useId)()}`;
-  const zoom = clampWaveformZoom(zoomLevel, maxZoom);
-  const zoomValue = Math.round(sliderValueFromZoom(zoom, maxZoom));
+  const zoom = (0,waveform_viewport/* clampWaveformZoom */.ii)(zoomLevel, maxZoom);
+  const zoomValue = Math.round((0,waveform_viewport/* sliderValueFromZoom */.Iw)(zoom, maxZoom));
+  const zoomMultiplier = (0,waveform_viewport/* getWaveformZoomMultiplier */.gd)(zoom);
   const isOpen = isHovered || isFocused || isRevealed || isPinned;
   const isAtMinZoom = zoomValue <= 0;
   const isAtMaxZoom = zoomValue >= constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
@@ -6647,11 +6945,11 @@ function WaveformZoomControl({
     return () => document.removeEventListener('pointerdown', closeIfOutside);
   }, [isPinned]);
   const handleSlider = (0,external_react_.useCallback)(newValue => {
-    onZoomChange(zoomFromSliderValue(newValue, maxZoom));
+    onZoomChange((0,waveform_viewport/* zoomFromSliderValue */.eU)(newValue, maxZoom));
   }, [maxZoom, onZoomChange]);
   const handleStep = (0,external_react_.useCallback)(delta => {
-    onZoomChange(zoomFromSliderValue(zoomValue + delta, maxZoom));
-  }, [maxZoom, onZoomChange, zoomValue]);
+    onZoomChange((0,waveform_viewport/* stepWaveformZoom */.xV)(zoom, maxZoom, delta));
+  }, [maxZoom, onZoomChange, zoom]);
   const handleZoomInPointerDown = (0,external_react_.useCallback)(() => {
     wasFlyoutOpenOnPointerDownRef.current = isHovered || isFocused || isRevealed || isPinned;
   }, [isFocused, isHovered, isPinned, isRevealed]);
@@ -6668,6 +6966,7 @@ function WaveformZoomControl({
     ref: zoomControlElRef,
     "aria-label": "Zoom",
     className: classnames_default()('bp-WaveformZoomControl', {
+      'bp-has-multiplier': zoomMultiplier,
       'bp-is-open': isOpen
     }),
     "data-testid": "bp-waveform-zoom",
@@ -6693,7 +6992,15 @@ function WaveformZoomControl({
       }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
     },
     role: "group"
-  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+  }, zoomMultiplier && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformZoomControl-multiplier",
+    "data-testid": "bp-waveform-zoom-multiplier",
+    title: "Current zoom level"
+  }, zoomMultiplier), /*#__PURE__*/external_react_["default"].createElement("span", {
+    "aria-hidden": "true",
+    className: "bp-WaveformZoomControl-divider",
+    "data-testid": "bp-waveform-zoom-divider"
+  })), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
     "aria-disabled": isOpen && isAtMaxZoom,
     className: "bp-WaveformZoomControl-button",
     "data-resin-target": "waveformZoomIn",
@@ -6754,23 +7061,34 @@ function WaveformZoomControl({
 
 
 
+
 const PLACEHOLDER_PEAKS = placeholderPeaks();
 function MP3ControlsV2({
   autoplay,
   bufferedRange,
   commentMarkers,
+  commentRangeDraft = null,
   currentTime,
   durationTime,
+  hasStartedPlayback = false,
+  isGeneratingWaveform = false,
   isPlaying,
+  keyboardVolumeStep = 0,
+  keyboardZoomStep = 0,
   mediaEl,
   onAutoplayChange,
   onCommentMarkerClick,
+  onCommentRangeChange,
+  onCommentRangeClear,
+  onCommentRangeDragChange,
   onMuteChange,
   onPlayPause,
+  onPlayNextChange,
   onRateChange,
   onTimeChange,
   onVolumeChange,
   peaks,
+  playNext,
   rate,
   volume
 }) {
@@ -6785,14 +7103,15 @@ 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);
-    setViewport(prev => viewportEquals(prev, next) ? prev : next);
+    setViewport(prev => (0,waveform_viewport/* viewportEquals */.KH)(prev, next) ? prev : next);
   }, []);
   const revealZoomControl = (0,external_react_.useCallback)(() => {
     setIsZoomRevealed(true);
@@ -6808,7 +7127,20 @@ function MP3ControlsV2({
     revealZoomControl();
   }, [revealZoomControl]);
   (0,external_react_.useEffect)(() => {
-    setZoomLevel(prev => clampWaveformZoom(prev, maxZoom));
+    const steps = keyboardZoomStep - lastKeyboardZoomStepRef.current;
+    if (!steps) {
+      return;
+    }
+    lastKeyboardZoomStepRef.current = keyboardZoomStep;
+    if (!(maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW)) {
+      return;
+    }
+    userChangedTapeZoomRef.current = true;
+    setZoomLevel(prev => (0,waveform_viewport/* stepWaveformZoom */.xV)(prev, maxZoom, steps * constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD));
+    revealZoomControl();
+  }, [keyboardZoomStep, maxZoom, revealZoomControl]);
+  (0,external_react_.useEffect)(() => {
+    setZoomLevel(prev => (0,waveform_viewport/* clampWaveformZoom */.ii)(prev, maxZoom));
   }, [maxZoom]);
   (0,external_react_.useEffect)(() => {
     if (!isTape) {
@@ -6826,16 +7158,16 @@ function MP3ControlsV2({
       hasAppliedTapeDefaultZoomRef.current = true;
       return;
     }
-    const nextZoom = getTapeDefaultZoom(durationValue, Math.max(maxZoom, viewport.maxZoom));
+    const nextZoom = (0,waveform_viewport/* getTapeDefaultZoom */.lz)(durationValue, Math.max(maxZoom, viewport.maxZoom));
     hasAppliedTapeDefaultZoomRef.current = true;
     setZoomLevel(prev => prev === nextZoom ? prev : nextZoom);
   }, [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,11 +7185,13 @@ 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 showGeneratingWaveformIndicator = isGeneratingWaveform && !hasRealPeaks;
   const waveformZoomLevel = isTape || hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2",
@@ -6875,10 +7209,14 @@ function MP3ControlsV2({
     isPlaying: isPlaying,
     mediaEl: mediaEl,
     onPlayPause: isWaveformInteractive ? onPlayPause : undefined,
+    onRangeChange: isWaveformInteractive ? onCommentRangeChange : undefined,
+    onRangeClear: isWaveformInteractive ? onCommentRangeClear : undefined,
+    onRangeDragChange: onCommentRangeDragChange,
     onSeek: isWaveformInteractive ? onTimeChange : undefined,
     onViewportChange: hasRealPeaks ? handleViewportChange : undefined,
     onZoomChange: hasZoomHandlers ? handleWaveformZoom : undefined,
     peaks: waveformPeaks,
+    range: commentRangeDraft,
     zoomLevel: waveformZoomLevel
   }), /*#__PURE__*/external_react_["default"].createElement(WaveformCommentMarkers, {
     commentMarkers: waveformMarkers,
@@ -6887,9 +7225,9 @@ function MP3ControlsV2({
     onCommentMarkerClick: handleCommentMarkerClick,
     selectedId: selectedMarkerId,
     viewport: viewport
-  })), hasZoomControl && /*#__PURE__*/external_react_["default"].createElement("div", {
+  })), (showGeneratingWaveformIndicator || hasZoomControl) && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-waveformZoom"
-  }, /*#__PURE__*/external_react_["default"].createElement(WaveformZoomControl, {
+  }, showGeneratingWaveformIndicator ? /*#__PURE__*/external_react_["default"].createElement(WaveformGeneratingIndicator, null) : /*#__PURE__*/external_react_["default"].createElement(WaveformZoomControl, {
     isRevealed: isZoomRevealed,
     maxZoom: maxZoom,
     onZoomChange: handleWaveformZoom,
@@ -6926,7 +7264,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
@@ -6934,7 +7273,9 @@ function MP3ControlsV2({
     autoplay: autoplay,
     className: "bp-MP3Controls-settings",
     onAutoplayChange: onAutoplayChange,
+    onPlayNextChange: onPlayNextChange,
     onRateChange: onRateChange,
+    playNext: playNext,
     rate: rate
   }))));
 }
@@ -7013,11 +7354,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 +7369,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 +7380,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 +7435,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
@@ -7642,6 +8007,221 @@ function loadPeaks(request) {
 
 /***/ },
 
+/***/ 4253
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   BT: () => (/* binding */ isRangeCollapsed),
+/* harmony export */   D$: () => (/* binding */ rangeProgress),
+/* harmony export */   Eh: () => (/* binding */ visualRangeHandlePx),
+/* harmony export */   H5: () => (/* binding */ isPointerOverRange),
+/* harmony export */   HG: () => (/* binding */ pickRangeHandle),
+/* harmony export */   Mh: () => (/* binding */ snapTimeMs),
+/* harmony export */   Mo: () => (/* binding */ dragRangeHandle),
+/* harmony export */   Ss: () => (/* binding */ resolveRange),
+/* harmony export */   dG: () => (/* binding */ commitRangeChange),
+/* harmony export */   uH: () => (/* binding */ durationMsFromSec),
+/* harmony export */   v2: () => (/* binding */ pointerTimeMs)
+/* harmony export */ });
+/* unused harmony export clampTimeMs */
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4929);
+/* harmony import */ var _viewport__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(772);
+
+
+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 = (0,_viewport__WEBPACK_IMPORTED_MODULE_1__/* .positionPxFromTime */ .TO)(timeSec, viewport);
+  if (range.startMs !== range.endMs) {
+    return x;
+  }
+  return handle === 'start' ? x - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_COLLAPSED_OFFSET_PX */ .BG : x + _constants__WEBPACK_IMPORTED_MODULE_0__/* .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__WEBPACK_IMPORTED_MODULE_0__/* .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__WEBPACK_IMPORTED_MODULE_0__/* .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__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX) {
+    if (nextHandle === 'end') {
+      endMs = clampTimeMs(startMs + _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX, duration);
+      if (endMs - startMs < _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX) {
+        startMs = clampTimeMs(endMs - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX, duration);
+      }
+    } else {
+      startMs = clampTimeMs(endMs - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX, duration);
+      if (endMs - startMs < _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX) {
+        endMs = clampTimeMs(startMs + _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_RANGE_MIN_DURATION_MS */ .bX, duration);
+      }
+    }
+  }
+  return {
+    handle: nextHandle,
+    range: {
+      endMs,
+      startMs
+    }
+  };
+}
+function pointerTimeMs(pointerX, viewport) {
+  return Math.round((0,_viewport__WEBPACK_IMPORTED_MODULE_1__/* .timeFromPositionPx */ .lZ)(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
+  };
+}
+
+/***/ },
+
 /***/ 1053
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -7829,6 +8409,369 @@ function isRetryableWaveformError(code) {
 
 /***/ },
 
+/***/ 772
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Iw: () => (/* binding */ sliderValueFromZoom),
+/* harmony export */   J$: () => (/* binding */ getZoomedPixelsPerSecond),
+/* harmony export */   KH: () => (/* binding */ viewportEquals),
+/* harmony export */   Mu: () => (/* binding */ timeLeftPercent),
+/* harmony export */   NI: () => (/* binding */ getViewportAtScroll),
+/* harmony export */   TO: () => (/* binding */ positionPxFromTime),
+/* harmony export */   aJ: () => (/* binding */ getPlayheadCameraAction),
+/* harmony export */   b6: () => (/* binding */ getCenteredScrollLeft),
+/* harmony export */   by: () => (/* binding */ getWaveformZoomMax),
+/* harmony export */   d0: () => (/* binding */ maxScrollLeft),
+/* harmony export */   eU: () => (/* binding */ zoomFromSliderValue),
+/* harmony export */   eq: () => (/* binding */ createWaveformViewport),
+/* harmony export */   gd: () => (/* binding */ getWaveformZoomMultiplier),
+/* harmony export */   gl: () => (/* binding */ getPinnedPlayheadLeft),
+/* harmony export */   iA: () => (/* binding */ getTapeGutterPx),
+/* harmony export */   ii: () => (/* binding */ clampWaveformZoom),
+/* harmony export */   lZ: () => (/* binding */ timeFromPositionPx),
+/* harmony export */   lz: () => (/* binding */ getTapeDefaultZoom),
+/* harmony export */   wA: () => (/* binding */ getSeekCameraAction),
+/* harmony export */   xV: () => (/* binding */ stepWaveformZoom),
+/* harmony export */   yW: () => (/* binding */ getTapePinnedPlayheadLeft)
+/* harmony export */ });
+/* unused harmony exports isTimeInView, getTapeCameraAction, getFollowInsetPx */
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4929);
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+/** Visible window: start/end times, pixels-per-second, and the current zoom. */
+function createWaveformViewport({
+  durationSec,
+  gutterPx = 0,
+  heightPx,
+  maxZoom,
+  scrollLeftPx,
+  widthPx,
+  zoomLevel
+}) {
+  const zoom = Number.isFinite(zoomLevel) && zoomLevel > 0 ? zoomLevel : _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  const viewDurationSec = durationSec > 0 ? durationSec / zoom : 0; // seconds visible at this zoom
+  const pixelsPerSecond = viewDurationSec > 0 && widthPx > 0 ? widthPx / viewDurationSec : 0;
+  const leadingGutterPx = Number.isFinite(gutterPx) && gutterPx > 0 ? gutterPx : 0;
+  const unclampedStartSec = pixelsPerSecond > 0 ? (scrollLeftPx - leadingGutterPx) / pixelsPerSecond : 0;
+  const gutterDurationSec = pixelsPerSecond > 0 ? leadingGutterPx / pixelsPerSecond : 0;
+  const latestWindowStartSec = leadingGutterPx > 0 ? durationSec + gutterDurationSec - viewDurationSec : Math.max(0, durationSec - viewDurationSec);
+  const earliestWindowStartSec = leadingGutterPx > 0 ? -gutterDurationSec : 0;
+  const startSec = pixelsPerSecond > 0 ? Math.min(latestWindowStartSec, Math.max(earliestWindowStartSec, unclampedStartSec)) : 0;
+  return {
+    durationSec,
+    endSec: startSec + viewDurationSec,
+    gutterPx: leadingGutterPx,
+    heightPx,
+    maxZoom,
+    pixelsPerSecond,
+    scrollLeftPx,
+    startSec,
+    widthPx,
+    zoomLevel: zoom
+  };
+}
+
+/** Same viewport with a different scroll, so start/end times update. */
+function getViewportAtScroll(viewport, scrollLeftPx) {
+  return createWaveformViewport(_objectSpread(_objectSpread({}, viewport), {}, {
+    scrollLeftPx
+  }));
+}
+
+/** True when the visible window has not moved — skip a React state update. */
+function viewportEquals(prev, next) {
+  return !!prev && prev.durationSec === next.durationSec && prev.endSec === next.endSec && prev.gutterPx === next.gutterPx && prev.maxZoom === next.maxZoom && prev.scrollLeftPx === next.scrollLeftPx && prev.startSec === next.startSec && prev.widthPx === next.widthPx && prev.zoomLevel === next.zoomLevel;
+}
+
+/** How many CSS pixels from the left of the visible window this time sits. */
+function positionPxFromTime(timeSec, viewport) {
+  return (timeSec - viewport.startSec) * viewport.pixelsPerSecond;
+}
+
+/** Media time under a point this many CSS pixels from the left of the visible window. */
+function timeFromPositionPx(positionPx, viewport) {
+  if (!(viewport.pixelsPerSecond > 0)) {
+    return viewport.startSec;
+  }
+  return viewport.startSec + positionPx / viewport.pixelsPerSecond;
+}
+
+/** True when this time sits inside the visible window. */
+function isTimeInView(timeSec, viewport) {
+  return timeSec >= viewport.startSec && timeSec <= viewport.endSec;
+}
+
+/** UI max zoom: 24×, ~1 peak per CSS pixel, and a minimum visible window. */
+function getWaveformZoomMax({
+  durationSec,
+  peakCount,
+  viewWidthPx
+}) {
+  if (!(peakCount > 0) || !(viewWidthPx > 0)) {
+    return _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  }
+  const peakLimitedMax = Math.floor(peakCount / viewWidthPx);
+  const durationLimitedMax = durationSec > 0 ? durationSec / _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_MIN_VIEW_WINDOW_SEC */ .Kl : _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  return Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, Math.min(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MAX */ .tK, peakLimitedMax, durationLimitedMax));
+}
+
+/** Keep zoom between 1× and this file's max. */
+function clampWaveformZoom(zoomLevel, maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+  const max = Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, maxZoom);
+  if (!Number.isFinite(zoomLevel)) {
+    return _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  }
+  return Math.min(max, Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, zoomLevel));
+}
+
+/** Zoom badge: 1.1×–1.9× below 2×, then whole numbers. Omit at 1×. */
+function getWaveformZoomMultiplier(zoomLevel) {
+  if (!Number.isFinite(zoomLevel) || zoomLevel <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return null;
+  }
+  if (zoomLevel < 2) {
+    const tenths = Math.round(zoomLevel * 10) / 10;
+    if (tenths <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+      return null;
+    }
+    if (tenths >= 2) {
+      return '2x';
+    }
+    return `${tenths.toFixed(1)}x`;
+  }
+  return `${Math.floor(zoomLevel)}x`;
+}
+
+/** WaveSurfer zoom density. 0 = fit the whole file in the view. */
+function getZoomedPixelsPerSecond({
+  durationSec,
+  isTape = false,
+  maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW,
+  viewWidthPx,
+  zoomLevel
+}) {
+  const zoom = clampWaveformZoom(zoomLevel, maxZoom);
+  if (!(durationSec > 0) || !(viewWidthPx > 0)) {
+    return 0;
+  }
+  if (!isTape && zoom <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return 0;
+  }
+  return viewWidthPx / durationSec * zoom;
+}
+
+/** Half-view empty space so t=0 and duration can sit under the center pin. */
+function getTapeGutterPx(widthPx) {
+  return widthPx > 0 ? widthPx / 2 : 0;
+}
+
+/** Tape first paint: 10s on screen, or 1× when the file is shorter than that. */
+function getTapeDefaultZoom(durationSec, maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+  if (!(durationSec > 0)) {
+    return _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  }
+  return clampWaveformZoom(durationSec / _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_TAPE_DEFAULT_WINDOW_SEC */ .Av, maxZoom);
+}
+
+/** Map zoom (1…max) onto the 0–100 slider. */
+function sliderValueFromZoom(zoomLevel, maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+  const max = Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, maxZoom);
+  const zoom = clampWaveformZoom(zoomLevel, max);
+  if (max <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return 0;
+  }
+  return (zoom - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) / (max - _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) * _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_SLIDER_MAX */ .nh;
+}
+
+/** Inverse of sliderValueFromZoom. */
+function zoomFromSliderValue(value, maxZoom = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+  const max = Math.max(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW, maxZoom);
+  if (max <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW;
+  }
+  const t = Math.min(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_SLIDER_MAX */ .nh, Math.max(0, value)) / _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_SLIDER_MAX */ .nh;
+  return clampWaveformZoom(_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW + t * (max - _constants__WEBPACK_IMPORTED_MODULE_0__/* .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;
+  return Math.max(0, viewport.durationSec * viewport.pixelsPerSecond + 2 * gutterPx - viewport.widthPx);
+}
+
+/** Scroll offset that still shows a full window (no overscroll). */
+function clampScrollLeft(scrollLeftPx, viewport) {
+  if (!Number.isFinite(scrollLeftPx)) {
+    return 0;
+  }
+  return Math.min(maxScrollLeft(viewport), Math.max(0, scrollLeftPx));
+}
+
+/** Center this time in the view, clamped so the window still fills the canvas. */
+function getCenteredScrollLeft(timeSec, viewport) {
+  return clampScrollLeft(timeSec * viewport.pixelsPerSecond + (viewport.gutterPx || 0) - viewport.widthPx / 2, viewport);
+}
+
+/**
+ * Host/media seek while zoomed: jump so the time (and its comment avatar) is on screen.
+ * No-op at fit-to-width or when that time is already visible.
+ */
+function getSeekCameraAction({
+  cameraMode = 'desktop',
+  timeSec,
+  viewport
+}) {
+  if (!(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
+    return {
+      type: 'none'
+    };
+  }
+  if (cameraMode === 'tape') {
+    const scrollLeftPx = getCenteredScrollLeft(timeSec, viewport);
+    if (Math.abs(scrollLeftPx - viewport.scrollLeftPx) < 1) {
+      return {
+        type: 'none'
+      };
+    }
+    return {
+      type: 'jump',
+      scrollLeftPx
+    };
+  }
+  if (viewport.zoomLevel <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW) {
+    return {
+      type: 'none'
+    };
+  }
+  if (isTimeInView(timeSec, viewport)) {
+    return {
+      type: 'none'
+    };
+  }
+  return {
+    type: 'jump',
+    scrollLeftPx: getCenteredScrollLeft(timeSec, viewport)
+  };
+}
+
+/** Always keep this time under the center pin. Reuses followRight so the camera hook can pin. */
+function getTapeCameraAction({
+  timeSec,
+  viewport
+}) {
+  if (!(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
+    return {
+      type: 'none'
+    };
+  }
+  return {
+    isPlayheadPinned: true,
+    scrollLeftPx: getCenteredScrollLeft(timeSec, viewport),
+    type: 'followRight'
+  };
+}
+
+/** Follow inset in CSS px, capped at one third of the view so a narrow player still has room. */
+function getFollowInsetPx(widthPx, insetPx = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_FOLLOW_INSET_PX */ .NM) {
+  if (!(widthPx > 0)) {
+    return 0;
+  }
+  return Math.min(Math.max(0, insetPx), widthPx / 3);
+}
+
+/** CSS left for a playhead pinned to the follow inset. */
+function getPinnedPlayheadLeft(widthPx, insetPx = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_FOLLOW_INSET_PX */ .NM) {
+  const inset = getFollowInsetPx(widthPx, insetPx);
+  if (!(widthPx > 0)) {
+    return '0%';
+  }
+  return `${(widthPx - inset) / widthPx * 100}%`;
+}
+
+/** CSS left for a playhead locked to the center of the view. */
+function getTapePinnedPlayheadLeft() {
+  return '50%';
+}
+
+/** CSS left % of the playhead from the left of the visible window. */
+function timeLeftPercent(timeSec, durationSec, viewport) {
+  if (viewport.widthPx > 0 && viewport.pixelsPerSecond > 0) {
+    return `${positionPxFromTime(timeSec, viewport) / viewport.widthPx * 100}%`;
+  }
+  const progress = durationSec > 0 ? Math.min(1, Math.max(0, timeSec / durationSec)) : 0;
+  return `${progress * 100}%`;
+}
+
+/**
+ * Walk across the view until the playhead nears the right edge, then follow.
+ * Off-screen at play start jumps in; off-screen right while playing keeps following.
+ */
+function getPlayheadCameraAction({
+  cameraMode = 'desktop',
+  insetPx = _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_FOLLOW_INSET_PX */ .NM,
+  isPlaying,
+  playJustStarted,
+  timeSec,
+  viewport
+}) {
+  if (cameraMode === 'tape') {
+    return getTapeCameraAction({
+      timeSec,
+      viewport
+    });
+  }
+  if (!isPlaying || viewport.zoomLevel <= _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_ZOOM_MIN */ .LW || !(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
+    return {
+      type: 'none'
+    };
+  }
+  const inset = getFollowInsetPx(viewport.widthPx, insetPx);
+  const viewX = positionPxFromTime(timeSec, viewport);
+  const playheadCanvasX = timeSec * viewport.pixelsPerSecond;
+  const followX = viewport.widthPx - inset;
+  if (viewX < 0) {
+    if (!playJustStarted) {
+      return {
+        type: 'none'
+      };
+    }
+    return {
+      type: 'jump',
+      scrollLeftPx: clampScrollLeft(playheadCanvasX - inset, viewport)
+    };
+  }
+  if (viewX >= followX) {
+    const unclampedScroll = playheadCanvasX - followX;
+    const scrollLeftPx = clampScrollLeft(unclampedScroll, viewport);
+    if (playJustStarted && viewX > viewport.widthPx) {
+      return {
+        type: 'jump',
+        scrollLeftPx
+      };
+    }
+    return {
+      type: 'followRight',
+      isPlayheadPinned: unclampedScroll <= maxScrollLeft(viewport),
+      scrollLeftPx
+    };
+  }
+  return {
+    type: 'none'
+  };
+}
+
+/***/ },
+
 /***/ 2485
 (module, exports) {
 
@@ -14598,7 +15541,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 +24435,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.93.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -32718,6 +33661,44 @@ class TextLoader extends viewers_AssetLoader {
   }
 }
 /* harmony default export */ const text_TextLoader = (new TextLoader());
+;// ./src/lib/viewers/controls/media/types.ts
+/**
+ * Draft range the activity sidebar is holding. Preview draws start/end handles
+ * on the waveform until the sidebar sends `comment_range_draft_clear`.
+ * The viewer emits `comment_range_draft_change` on pointer-up so the host
+ * can persist the new timestamps, and `comment_range_draft_dismiss` when
+ * the user clicks the waveform outside an open range. See media/README.md.
+ * `endMs: null` means a single timestamp — both handles sit on `startMs`.
+ */
+
+/** Committed range after a handle drag. Always a real span (`endMs > startMs`). */
+
+/** Sidebar → viewer: show or update the draft handles. */
+const EVENT_COMMENT_RANGE_DRAFT = 'comment_range_draft';
+
+/** Sidebar → viewer: hide the handles (toggle-off, post, version switch, unmount). */
+const EVENT_COMMENT_RANGE_DRAFT_CLEAR = 'comment_range_draft_clear';
+
+/** Viewer → sidebar: the user clicked the waveform outside an open draft range. */
+const EVENT_COMMENT_RANGE_DRAFT_DISMISS = 'comment_range_draft_dismiss';
+
+/** Viewer → sidebar: a handle drag finished. Emitted on pointer-up only. */
+const EVENT_COMMENT_RANGE_DRAFT_CHANGE = 'comment_range_draft_change';
+
+/** True when a host draft can be shown. Collapsed drafts use `endMs: null`. */
+function isValidCommentRangeDraft(value) {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const draft = value;
+  if (!Number.isFinite(draft.startMs)) {
+    return false;
+  }
+  if (draft.endMs != null && (!Number.isFinite(draft.endMs) || Number(draft.endMs) <= Number(draft.startMs))) {
+    return false;
+  }
+  return true;
+}
 // EXTERNAL MODULE: ./node_modules/lodash/isEmpty.js
 var isEmpty = __webpack_require__(2193);
 var isEmpty_default = /*#__PURE__*/__webpack_require__.n(isEmpty);
@@ -34687,6 +35668,7 @@ const CSS_CLASS_MEDIA_CONTAINER = 'bp-media-container';
 const DEFAULT_VOLUME = 1;
 const MEDIA_VOLUME_CACHE_KEY = 'media-volume';
 const MEDIA_AUTOPLAY_CACHE_KEY = 'media-autoplay';
+const MEDIA_PLAY_NEXT_CACHE_KEY = 'media-play-next';
 const MEDIA_SPEED_CACHE_KEY = 'media-speed';
 const MEDIA_VOLUME_INCREMENT = 0.05;
 const EMIT_WAIT_TIME_IN_MILLIS = 100;
@@ -34737,6 +35719,7 @@ class MediaBaseViewer extends viewers_BaseViewer {
     this.containerClickHandler = this.containerClickHandler.bind(this);
     this.errorHandler = this.errorHandler.bind(this);
     this.handleAutoplay = this.handleAutoplay.bind(this);
+    this.handlePlayNext = this.handlePlayNext.bind(this);
     this.handleRate = this.handleRate.bind(this);
     this.handleTimeupdateFromMediaControls = this.handleTimeupdateFromMediaControls.bind(this);
     this.loadeddataHandler = this.loadeddataHandler.bind(this);
@@ -34749,6 +35732,7 @@ class MediaBaseViewer extends viewers_BaseViewer {
     this.resetPlayIcon = this.resetPlayIcon.bind(this);
     this.seekHandler = this.seekHandler.bind(this);
     this.setAutoplay = this.setAutoplay.bind(this);
+    this.setPlayNext = this.setPlayNext.bind(this);
     this.setRate = this.setRate.bind(this);
     this.setTimeCode = this.setTimeCode.bind(this);
     this.setVolume = this.setVolume.bind(this);
@@ -35058,7 +36042,9 @@ class MediaBaseViewer extends viewers_BaseViewer {
    * @return {void}
    */
   handleRate() {
-    const speed = this.cache.get(MEDIA_SPEED_CACHE_KEY) - 0;
+    const cachedSpeed = this.cache.get(MEDIA_SPEED_CACHE_KEY) - 0;
+    // Default to 1x when cache is empty (v2 overlay play can run before loadUIReact).
+    const speed = Number.isFinite(cachedSpeed) ? cachedSpeed : 1;
     if (speed && this.mediaEl.playbackRate !== speed && this.mediaEl.playbackRate > 0) {
       this.emit('ratechange', speed);
     }
@@ -35106,6 +36092,20 @@ class MediaBaseViewer extends viewers_BaseViewer {
       this.renderUI();
     }
   }
+
+  /**
+   * Handler for play next
+   *
+   * @private
+   * @emits playnext
+   * @return {void}
+   */
+  handlePlayNext() {
+    this.emit('playnext', this.isPlayNextEnabled());
+    if (this.controls) {
+      this.renderUI();
+    }
+  }
   /**
    * Autoplay the media
    *
@@ -35132,6 +36132,16 @@ class MediaBaseViewer extends viewers_BaseViewer {
   isAutoplayEnabled() {
     return this.cache.get(MEDIA_AUTOPLAY_CACHE_KEY) === 'Enabled';
   }
+
+  /**
+   * Determines if play next is enabled
+   *
+   * @protected
+   * @return {boolean} Indicates if play next is enabled
+   */
+  isPlayNextEnabled() {
+    return this.cache.get(MEDIA_PLAY_NEXT_CACHE_KEY) === 'Enabled';
+  }
   /**
    * Loads the controls
    *
@@ -35154,6 +36164,9 @@ class MediaBaseViewer extends viewers_BaseViewer {
     if (!this.cache.has(MEDIA_AUTOPLAY_CACHE_KEY)) {
       this.cache.set(MEDIA_AUTOPLAY_CACHE_KEY, 'Disabled');
     }
+    if (!this.cache.has(MEDIA_PLAY_NEXT_CACHE_KEY)) {
+      this.cache.set(MEDIA_PLAY_NEXT_CACHE_KEY, 'Disabled');
+    }
     if (!this.cache.has(MEDIA_SPEED_CACHE_KEY)) {
       this.cache.set(MEDIA_SPEED_CACHE_KEY, '1.0');
     }
@@ -35248,6 +36261,18 @@ class MediaBaseViewer extends viewers_BaseViewer {
     this.handleAutoplay();
   }
 
+  /**
+   * Updates play next
+   *
+   * @protected
+   * @param {boolean} playNext - True if enabled
+   * @return {void}
+   */
+  setPlayNext(playNext) {
+    this.cache.set(MEDIA_PLAY_NEXT_CACHE_KEY, playNext ? 'Enabled' : 'Disabled', true);
+    this.handlePlayNext();
+  }
+
   /**
    * Updates play rate
    *
@@ -35349,17 +36374,17 @@ class MediaBaseViewer extends viewers_BaseViewer {
   }
 
   /**
-   * Emits the previewnextfile event if autoplay is enabled.
+   * Emits mediaEndPlayNext when play next is enabled.
    *
    * @private
-   * @emits previewnextfile
+   * @emits mediaEndPlayNext
    * @return {void}
    */
   mediaendHandler() {
     this.resetPlayIcon();
     this.processMetrics();
-    if (this.isAutoplayEnabled()) {
-      this.emit(lib_events/* VIEWER_EVENT */.Oi.mediaEndAutoplay);
+    if (this.isPlayNextEnabled()) {
+      this.emit(lib_events/* VIEWER_EVENT */.Oi.mediaEndPlayNext);
     }
   }
 
@@ -35935,8 +36960,8 @@ class MediaBaseViewer extends viewers_BaseViewer {
   }
 }
 /* harmony default export */ const media_MediaBaseViewer = (MediaBaseViewer);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 5 modules
-var MediaSettings = __webpack_require__(6929);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 6 modules
+var MediaSettings = __webpack_require__(9229);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseToggle.tsx + 1 modules
 var PlayPauseToggle = __webpack_require__(6321);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/DurationLabels.tsx + 1 modules
@@ -36129,7 +37154,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
@@ -36180,6 +37205,8 @@ class MP3ControlsRoot {
 var waveform_constants = __webpack_require__(4929);
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/createWaveformLoader.ts + 1 modules
 var createWaveformLoader = __webpack_require__(4971);
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/range.ts
+var range = __webpack_require__(4253);
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/validateWaveformPayload.ts
 var validateWaveformPayload = __webpack_require__(1053);
 ;// ./src/lib/viewers/media/MP3.scss
@@ -36201,7 +37228,60 @@ 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 +37294,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 +37311,7 @@ class MP3Viewer extends media_MediaBaseViewer {
      * @return {void}
      */
     MP3Viewer_defineProperty(this, "handlePlayPause", shouldPlay => {
+      this.exitShuttle();
       if (shouldPlay) {
         this.handlePlayRequest();
         return;
@@ -36239,19 +37321,69 @@ 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, "handleCommentRangeDraft", draft => {
+      if (this.isCommentRangeDragging || !isValidCommentRangeDraft(draft)) {
+        return;
+      }
+      this.commentRangeDraft = {
+        endMs: draft.endMs == null ? null : draft.endMs,
+        startMs: draft.startMs
+      };
+      this.syncCommentRangeLoop();
+      this.renderUI();
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeDraftClear", () => {
+      this.commentRangeDraft = null;
+      this.isCommentRangeDragging = false;
+      this.syncCommentRangeLoop();
+      this.renderUI();
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeChange", range => {
+      if (!range || !Number.isFinite(range.startMs) || !Number.isFinite(range.endMs) || range.endMs <= range.startMs) {
+        return;
+      }
+      this.commentRangeDraft = {
+        endMs: range.endMs,
+        startMs: range.startMs
+      };
+      this.emit(EVENT_COMMENT_RANGE_DRAFT_CHANGE, {
+        endMs: range.endMs,
+        startMs: range.startMs
+      });
+      this.syncCommentRangeLoop();
+      this.renderUI();
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeDragChange", isDragging => {
+      this.isCommentRangeDragging = !!isDragging;
+    });
+    MP3Viewer_defineProperty(this, "handleCommentRangeClear", () => {
+      if (!this.commentRangeDraft || this.commentRangeDraft.endMs == null) {
+        return;
       }
+      this.commentRangeDraft = null;
+      this.emit(EVENT_COMMENT_RANGE_DRAFT_DISMISS);
+      this.syncCommentRangeLoop();
       this.renderUI();
     });
     MP3Viewer_defineProperty(this, "handleCommentMarkerClick", marker => {
+      this.exitShuttle();
       this.hostSelectedMarkerId = marker.id;
       this.pendingHostSelectedSeek = marker;
       if (this.mediaEl) {
@@ -36290,6 +37422,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.isAudioPlayerV2 = this.getIsAudioPlayerV2();
     this.waveformPeaks = [];
     this.waveformPeaksSource = null;
+    this.isWaveformConversionPolling = false;
     this.waveformDurationSec = 0;
     if (this.isAudioPlayerV2) {
       this.wrapperEl.classList.add('bp-media--v2');
@@ -36299,12 +37432,22 @@ class MP3Viewer extends media_MediaBaseViewer {
       // Listen on the loading shell. The waveform is on
       // screen before the audio blob is playable; getViewer() is still null.
       this.bindCommentMarkersListener();
+      this.bindCommentRangeDraftListeners();
     }
 
     // Audio element
     this.mediaEl = this.mediaContainerEl.appendChild(document.createElement('audio'));
     this.mediaEl.setAttribute('preload', 'auto');
     this.commentMarkers = [];
+    this.commentRangeDraft = null;
+    this.hostSelectedMarkerId = null;
+    this.isCommentRangeDragging = false;
+    this.shuttleDirection = null;
+    this.shuttleRate = 0;
+    this.reverseShuttleTimer = 0;
+    this.commentRangeLoopTimer = 0;
+    this.keyboardVolumeStep = 0;
+    this.keyboardZoomStep = 0;
   }
   bindCommentMarkersListener() {
     if (!this.isAudioPlayerV2) {
@@ -36313,6 +37456,15 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
     this.addListener('comment_markers', this.handleCommentMarkersUpdated);
   }
+  bindCommentRangeDraftListeners() {
+    if (!this.isAudioPlayerV2) {
+      return;
+    }
+    this.removeListener(EVENT_COMMENT_RANGE_DRAFT, this.handleCommentRangeDraft);
+    this.removeListener(EVENT_COMMENT_RANGE_DRAFT_CLEAR, this.handleCommentRangeDraftClear);
+    this.addListener(EVENT_COMMENT_RANGE_DRAFT, this.handleCommentRangeDraft);
+    this.addListener(EVENT_COMMENT_RANGE_DRAFT_CLEAR, this.handleCommentRangeDraftClear);
+  }
 
   /**
    * Audio player v2 (waveform). Off unless the host enables `audioPlayerV2`
@@ -36324,6 +37476,217 @@ 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;
+        }
+        this.scheduleCommentRangeLoopWrap();
+      }).catch(() => {});
+    }
+    this.scheduleCommentRangeLoopWrap(true);
+  }
+  startReverseShuttle(rate) {
+    this.stopReverseShuttle();
+    this.shuttleDirection = 'reverse';
+    this.shuttleRate = rate;
+    this.userRequestedPlay = true;
+    this.pause(undefined, true);
+    this.handleRate();
+    this.reverseShuttleTimer = window.setInterval(() => {
+      const floor = this.clampTimeToOpenCommentRange(0);
+      if (!this.mediaEl || this.mediaEl.currentTime <= floor) {
+        this.exitShuttle();
+        return;
+      }
+      this.quickSeek(-(this.shuttleRate * AUDIO_V2_SHUTTLE_TICK_MS / 1000));
+      if (this.mediaEl.currentTime <= floor) {
+        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();
+      }
+      this.scheduleCommentRangeLoopWrap();
+      return;
+    }
+    super.handleRate();
+    this.scheduleCommentRangeLoopWrap();
+  }
+  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 +37729,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__, 673));
   }
 
   /**
@@ -36388,7 +37751,15 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @inheritdoc
    */
   destroy() {
+    this.clearCommentRangeLoopTimer();
     this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
+    this.removeListener(EVENT_COMMENT_RANGE_DRAFT, this.handleCommentRangeDraft);
+    this.removeListener(EVENT_COMMENT_RANGE_DRAFT_CLEAR, this.handleCommentRangeDraftClear);
+    this.commentRangeDraft = null;
+    this.isCommentRangeDragging = false;
+    this.stopReverseShuttle();
+    this.shuttleDirection = null;
+    this.shuttleRate = 0;
     this.abortWaveformLoads();
     super.destroy();
   }
@@ -36398,6 +37769,10 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   load() {
     if (this.isAudioPlayerV2) {
+      // A file-version switch is a clear, not a resync of the previous draft.
+      this.commentRangeDraft = null;
+      this.isCommentRangeDragging = false;
+      this.syncCommentRangeLoop();
       this.showAudioLoadingShell();
       this.startConversionWaveformLoad();
     }
@@ -36471,6 +37846,48 @@ class MP3Viewer extends media_MediaBaseViewer {
     return (0,validateWaveformPayload/* isPositiveFinite */.Ze)(compressedBytes) && compressedBytes <= waveform_constants/* CLIENT_DECODE_MAX_COMPRESSED_BYTES */.EB && (0,validateWaveformPayload/* isPositiveFinite */.Ze)(durationSec) && durationSec <= waveform_constants/* CLIENT_DECODE_MAX_DURATION_SEC */.nG;
   }
 
+  /**
+   * @return {Object|null} waveform conversion representation
+   */
+  getWaveformRepresentation() {
+    const {
+      file
+    } = this.options;
+    return file?.representations?.entries ? getRepresentation(file, constants/* WAVEFORM_REP_NAME */.u4) : null;
+  }
+
+  /**
+   * @return {string|null} conversion representation state
+   */
+  getWaveformConversionState() {
+    const conversionStatus = this.getWaveformRepresentation()?.status;
+    return conversionStatus && typeof conversionStatus === 'object' ? conversionStatus.state : null;
+  }
+
+  /**
+   * Conversion JSON is already (or about to be) fetchable.
+   *
+   * @return {boolean}
+   */
+  isConversionWaveformAvailable() {
+    const conversionState = this.getWaveformConversionState();
+    return conversionState === constants/* STATUS_SUCCESS */.$g || conversionState === constants/* STATUS_VIEWABLE */.Re;
+  }
+
+  /**
+   * Generating chip while conversion RepStatus is polling. Hidden when the
+   * rep is already success/viewable, when polling finishes, when conversion
+   * errors, and once any source applies peaks.
+   *
+   * @return {boolean}
+   */
+  isGeneratingWaveform() {
+    if (!this.isAudioPlayerV2 || this.destroyed || this.waveformPeaksSource) {
+      return false;
+    }
+    return !!this.isWaveformConversionPolling;
+  }
+
   /**
    * @param {number} durationSec
    * @return {boolean}
@@ -36507,30 +37924,40 @@ class MP3Viewer extends media_MediaBaseViewer {
     if (!this.isAudioPlayerV2 || this.destroyed) {
       return;
     }
-    const {
-      file
-    } = this.options;
-    const waveform = file?.representations?.entries ? getRepresentation(file, constants/* WAVEFORM_REP_NAME */.u4) : null;
+    const waveform = this.getWaveformRepresentation();
     const template = waveform?.content?.url_template;
-    const conversionStatus = waveform?.status;
-    const statusState = conversionStatus && typeof conversionStatus === 'object' ? conversionStatus.state : null;
-    if (!waveform || !template || !statusState || statusState === constants/* STATUS_ERROR */.uD) {
+    const conversionState = this.getWaveformConversionState();
+    if (!waveform || !template || !conversionState || conversionState === constants/* STATUS_ERROR */.uD) {
       this.startClientWaveformDecode();
+      this.renderUI();
       return;
     }
     this.abortConversionWaveformLoad();
     this.waveformStatus = this.getRepStatus(waveform);
     this.waveformStatus.removeListener('conversionpending', this.resetLoadTimeout);
     const status = this.waveformStatus;
+    const shouldPollConversion = !this.isConversionWaveformAvailable();
     try {
+      if (shouldPollConversion) {
+        this.isWaveformConversionPolling = true;
+        this.renderUI();
+      }
       await status.getPromise();
+      this.isWaveformConversionPolling = false;
       if (this.destroyed || this.waveformStatus !== status || this.waveformPeaksSource) {
         return;
       }
+      if (shouldPollConversion) {
+        this.renderUI();
+      }
       const result = await this.loadConversionWaveformPayload(template);
       this.handleConversionWaveformResult(result, status);
     } catch {
+      this.isWaveformConversionPolling = false;
       this.startClientWaveformDecode();
+      if (shouldPollConversion) {
+        this.renderUI();
+      }
     }
   }
 
@@ -36581,6 +38008,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     }
     this.waveformPeaks = payload.peaks;
     this.waveformPeaksSource = source;
+    this.isWaveformConversionPolling = false;
     this.isWaveformDecodeRetryPending = false;
     if (source === 'conversion') {
       this.waveformDurationSec = payload.durationSec;
@@ -36749,6 +38177,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       });
     }
     this.bindCommentMarkersListener();
+    this.bindCommentRangeDraftListeners();
     this.renderUI();
   }
   /**
@@ -36764,11 +38193,162 @@ class MP3Viewer extends media_MediaBaseViewer {
       return;
     }
     this.pendingHostSelectedSeek = null;
+    this.exitShuttle();
+    this.handleCommentRangeClear();
     this.mediaEl.pause();
     if (this.mediaEl.currentTime !== marker.time) {
       this.mediaEl.currentTime = marker.time;
     }
   }
+
+  /**
+   * Seconds of the open draft span, or null when collapsed / absent.
+   * Collapsed drafts (`endMs: null`) do not confine playback.
+   *
+   * @return {{endSec: number, startSec: number}|null}
+   */
+  getOpenCommentRangeSeconds() {
+    const draft = this.commentRangeDraft;
+    if ((0,range/* isRangeCollapsed */.BT)(draft) || !Number.isFinite(draft.startMs) || !Number.isFinite(draft.endMs)) {
+      return null;
+    }
+    return {
+      endSec: draft.endMs / 1000,
+      startSec: draft.startMs / 1000
+    };
+  }
+
+  /**
+   * Keep a seek inside the open draft. Waveform click-outside and host
+   * comment seeks dismiss first, then seek; clamp does not apply then.
+   *
+   * @param {number} time
+   * @return {number}
+   */
+  clampTimeToOpenCommentRange(time) {
+    const range = this.getOpenCommentRangeSeconds();
+    if (!range || !Number.isFinite(time)) {
+      return time;
+    }
+    return Math.min(Math.max(time, range.startSec), range.endSec);
+  }
+  clearCommentRangeLoopTimer() {
+    if (this.commentRangeLoopTimer) {
+      window.clearTimeout(this.commentRangeLoopTimer);
+      this.commentRangeLoopTimer = 0;
+    }
+  }
+
+  /**
+   * Wrap when the remaining time to end elapses. Recalculate after play, seek,
+   * rate change, or a draft resize.
+   *
+   * @param {boolean} [force] schedule even if the element still reports paused
+   * @return {void}
+   */
+  scheduleCommentRangeLoopWrap(force = false) {
+    this.clearCommentRangeLoopTimer();
+    const range = this.getOpenCommentRangeSeconds();
+    if (!range || !this.mediaEl || !force && this.mediaEl.paused) {
+      return;
+    }
+    const rate = this.mediaEl.playbackRate > 0 ? this.mediaEl.playbackRate : 1;
+    const remainingSec = range.endSec - this.mediaEl.currentTime;
+    this.commentRangeLoopTimer = window.setTimeout(() => {
+      this.commentRangeLoopTimer = 0;
+      const openRange = this.getOpenCommentRangeSeconds();
+      if (!openRange || !this.mediaEl || this.mediaEl.paused) {
+        return;
+      }
+      if (this.mediaEl.currentTime !== openRange.startSec) {
+        this.mediaEl.currentTime = openRange.startSec;
+      }
+      this.scheduleCommentRangeLoopWrap();
+    }, Math.max(0, remainingSec / rate * 1000));
+  }
+
+  /**
+   * Update the playback loop to match the current range after it arrives, resizes,
+   * or clears.
+   *
+   * @return {void}
+   */
+  syncCommentRangeLoop() {
+    this.clearCommentRangeLoopTimer();
+    const range = this.getOpenCommentRangeSeconds();
+    if (!range || !this.mediaEl || this.mediaEl.paused) {
+      return;
+    }
+    this.enforceCommentRangePlayback(range);
+  }
+
+  /**
+   * Keep playback inside the open span. A playhead outside [start, end) jumps
+   * to start, then the wrap timer is armed.
+   *
+   * @param {{endSec: number, startSec: number}} range Open draft in seconds
+   * @return {void}
+   */
+  enforceCommentRangePlayback(range) {
+    const {
+      endSec,
+      startSec
+    } = range;
+    const currPlayhead = this.mediaEl.currentTime;
+    const nextPlayhead = currPlayhead >= startSec && currPlayhead < endSec ? currPlayhead : startSec;
+    if (nextPlayhead !== currPlayhead) {
+      this.mediaEl.currentTime = nextPlayhead;
+    }
+    this.scheduleCommentRangeLoopWrap();
+  }
+
+  /**
+   * Play. An open draft loops that span: keep the playhead when it is already
+   * inside, otherwise jump to start. Does not use play(start, end) because
+   * that pauses at end.
+   *
+   * @inheritdoc
+   */
+  play(...args) {
+    const range = this.getOpenCommentRangeSeconds();
+    if (!range || !this.mediaEl) {
+      // Spread so an argument-less call stays argument-less; super.play() skips
+      // playback when it is handed an explicit undefined start.
+      return super.play(...args);
+    }
+    const requested = Number.isFinite(args[0]) ? args[0] : this.mediaEl.currentTime;
+    const next = requested >= range.startSec && requested < range.endSec ? requested : range.startSec;
+    if (this.mediaEl.currentTime !== next) {
+      this.mediaEl.currentTime = next;
+    }
+    const playPromise = super.play();
+    this.scheduleCommentRangeLoopWrap(true);
+    return playPromise;
+  }
+
+  /**
+   * Seek. Keyboard and in-range waveform seeks stay inside an open draft.
+   *
+   * @inheritdoc
+   */
+  setMediaTime(time) {
+    super.setMediaTime(this.clampTimeToOpenCommentRange(time));
+    this.scheduleCommentRangeLoopWrap();
+  }
+
+  /**
+   * If the range ends at file end, wrap instead of resetting the play icon.
+   *
+   * @inheritdoc
+   */
+  mediaendHandler() {
+    if (this.getOpenCommentRangeSeconds()) {
+      // `ended` fires after the element is paused; play() wraps and restarts.
+      this.play();
+      return;
+    }
+    super.mediaendHandler();
+  }
   /**
    * @inheritdoc
    */
@@ -36806,9 +38386,19 @@ class MP3Viewer extends media_MediaBaseViewer {
       const Mp3ControlsV2 = this.MP3ControlsV2;
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Mp3ControlsV2, MP3Viewer_extends({}, sharedProps, {
         commentMarkers: this.commentMarkers || [],
+        commentRangeDraft: this.commentRangeDraft || null,
+        hasStartedPlayback: !!this.userRequestedPlay,
+        isGeneratingWaveform: this.isGeneratingWaveform(),
+        keyboardVolumeStep: this.keyboardVolumeStep,
+        keyboardZoomStep: this.keyboardZoomStep,
         mediaEl: this.mediaEl,
         onCommentMarkerClick: this.handleCommentMarkerClick,
-        peaks: this.waveformPeaks
+        onCommentRangeChange: this.handleCommentRangeChange,
+        onCommentRangeClear: this.handleCommentRangeClear,
+        onCommentRangeDragChange: this.handleCommentRangeDragChange,
+        onPlayNextChange: this.setPlayNext,
+        peaks: this.waveformPeaks,
+        playNext: this.isPlayNextEnabled()
       })));
       return;
     }
@@ -38404,7 +39994,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
@@ -38889,12 +40479,14 @@ function VideoControlsV2({
   onGuideChange,
   onMuteChange,
   onPlayPause,
+  onPlayNextChange,
   onQualityChange,
   onRateChange,
   onSubtitleChange,
   onSubtitlesToggle,
   onTimeChange,
   onVolumeChange,
+  playNext,
   quality,
   rate,
   subtitle,
@@ -38963,7 +40555,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
@@ -38983,9 +40575,11 @@ function VideoControlsV2({
     onAudioTrackChange: onAudioTrackChange,
     onAutoplayChange: onAutoplayChange,
     onGuideChange: onGuideChange,
+    onPlayNextChange: onPlayNextChange,
     onQualityChange: onQualityChange,
     onRateChange: onRateChange,
     onSubtitleChange: onSubtitleChange,
+    playNext: playNext,
     quality: quality,
     rate: rate,
     subtitle: subtitle,
@@ -39143,7 +40737,10 @@ class MP4Viewer extends media_VideoBaseViewer {
       volume: this.mediaEl.volume
     };
     if (this.isVideoPlayerV2) {
-      this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, sharedProps));
+      this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, MP4Viewer_extends({}, sharedProps, {
+        onPlayNextChange: this.setPlayNext,
+        playNext: this.isPlayNextEnabled()
+      })));
       return;
     }
     this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControls, MP4Viewer_extends({}, sharedProps, {
@@ -40639,7 +42236,10 @@ class DashViewer extends media_VideoBaseViewer {
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, DashViewer_extends({
         commentMarkers: this.commentMarkers,
         onCommentMarkerClick: this.handleCommentMarkerClick
-      }, sharedProps)));
+      }, sharedProps, {
+        onPlayNextChange: this.setPlayNext,
+        playNext: this.isPlayNextEnabled()
+      })));
       return;
     }
     this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControls, DashViewer_extends({}, sharedProps, {
@@ -53307,6 +54907,7 @@ class Preview extends (events_default()) {
       this.viewer.destroy();
     }
     this.viewer = undefined;
+    Preview.resin = null;
   }
 
   /**
@@ -54192,6 +55793,7 @@ class Preview extends (events_default()) {
 
     // Optional resin analytics instance for tracking user interactions
     this.options.resin = options.resin;
+    Preview.resin = options.resin;
 
     // Options that are applicable to certain file ids
     this.options.fileOptions = options.fileOptions || {};
@@ -54567,6 +56169,10 @@ class Preview extends (events_default()) {
         this.emit(data.event, data.data);
         this.emit(lib_events/* VIEWER_EVENT */.Oi.default, data);
         break;
+      case lib_events/* VIEWER_EVENT */.Oi.mediaEndPlayNext:
+        this.emit(data.event, data.data);
+        this.emit(lib_events/* VIEWER_EVENT */.Oi.default, data);
+        break;
       case lib_events/* VIEWER_EVENT */.Oi.error:
         // Do nothing since 'error' event was already caught, and will be emitted
         // as a 'preview_error' event