box-content-preview 3.88.0 → 3.90.0

package/dist/lib/index.js

@@ -327,6 +327,7 @@ class PreviewError extends Error {
 /* harmony export */   Jm: () => (/* binding */ SELECTOR_BOX_PREVIEW_LOGO_CUSTOM),
 /* harmony export */   Kb: () => (/* binding */ CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER),
 /* harmony export */   Kh: () => (/* binding */ SELECTOR_NAVIGATION_RIGHT),
+/* harmony export */   Ku: () => (/* binding */ AUDIO_PLAYER_V2),
 /* harmony export */   Lq: () => (/* binding */ PREVIEW_SCRIPT_NAME),
 /* harmony export */   Lz: () => (/* binding */ CLASS_BOX_PREVIEW_THUMBNAILS_CLOSE),
 /* harmony export */   M$: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_DOCUMENT),
@@ -379,6 +380,7 @@ class PreviewError extends Error {
 /* harmony export */   jF: () => (/* binding */ CLASS_IS_VISIBLE),
 /* harmony export */   jP: () => (/* binding */ CLASS_PREVIEW_LOADED),
 /* harmony export */   jf: () => (/* binding */ CLASS_FULLSCREEN_UNSUPPORTED),
+/* harmony export */   jr: () => (/* binding */ X_REP_HINT_WAVEFORM),
 /* harmony export */   lM: () => (/* binding */ CLASS_BOX_PREVIEW_MOBILE),
 /* harmony export */   lR: () => (/* binding */ SELECTOR_BOX_PREVIEW_HEADER_CONTAINER),
 /* harmony export */   lX: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_OVERLAY),
@@ -396,6 +398,8 @@ class PreviewError extends Error {
 /* harmony export */   rR: () => (/* binding */ CLASS_BOX_PREVIEW_THEME_DARK),
 /* harmony export */   rZ: () => (/* binding */ CLASS_BOX_PREVIEW_OVERLAY),
 /* harmony export */   rr: () => (/* binding */ CLASS_IS_BUFFERING),
+/* harmony export */   u4: () => (/* binding */ WAVEFORM_REP_NAME),
+/* harmony export */   uD: () => (/* binding */ STATUS_ERROR),
 /* harmony export */   uN: () => (/* binding */ MEDIA_PLAYBACK_SKIP_DURATION),
 /* harmony export */   vV: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_PRESENTATION),
 /* harmony export */   v_: () => (/* binding */ SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD),
@@ -415,7 +419,7 @@ class PreviewError extends Error {
 /* harmony export */   zb: () => (/* binding */ CLASS_DOC_FIRST_IMAGE),
 /* harmony export */   ze: () => (/* binding */ STATUS_PENDING)
 /* harmony export */ });
-/* unused harmony exports CLASS_ACTIVE, CLASS_BOX_PREVIEW, CLASS_BOX_PREVIEW_CONTAINER, CLASS_BOX_PREVIEW_HEADER_CONTAINER, CLASS_BOX_PREVIEW_ICON, CLASS_BOX_PREVIEW_LOGO_CUSTOM, CLASS_BOX_PREVIEW_LOGO_DEFAULT, CLASS_PREFETCHED_IMAGE, SELECTOR_BOX_PREVIEW_HEADER, SELECTOR_BOX_PREVIEW_NOTIFICATION, STATUS_ERROR */
+/* unused harmony exports CLASS_ACTIVE, CLASS_BOX_PREVIEW, CLASS_BOX_PREVIEW_CONTAINER, CLASS_BOX_PREVIEW_HEADER_CONTAINER, CLASS_BOX_PREVIEW_ICON, CLASS_BOX_PREVIEW_LOGO_CUSTOM, CLASS_BOX_PREVIEW_LOGO_DEFAULT, CLASS_PREFETCHED_IMAGE, SELECTOR_BOX_PREVIEW_HEADER, SELECTOR_BOX_PREVIEW_NOTIFICATION */
 const CLASS_ACTIVE = 'bp-is-active';
 const CLASS_ANNOTATIONS_CREATE_DRAWING = 'bp-annotations-create--drawing';
 const CLASS_ANNOTATIONS_CREATE_HIGHLIGHT = 'bp-annotations-create--highlight';
@@ -502,6 +506,7 @@ const APP_HOST = 'https://app.box.com';
 const ORIGINAL_REP_NAME = 'ORIGINAL';
 const PRELOAD_REP_NAME = 'jpg';
 const PRELOAD_PAGED_REP_NAME = 'webp';
+const WAVEFORM_REP_NAME = 'waveform';
 const VIDEO_VIEWER_NAMES = ['Dash', 'MP4'];
 const STATUS_ERROR = 'error';
 const STATUS_NONE = 'none';
@@ -516,7 +521,9 @@ const X_REP_HINT_IMAGE = '[jpg?dimensions=2048x2048,png?dimensions=2048x2048]';
 const X_REP_HINT_VIDEO_DASH = '[dash,mp4][filmstrip]';
 const X_REP_HINT_VIDEO_DASH_EXTRACTED_TEXT = '[extracted_text]';
 const X_REP_HINT_VIDEO_MP4 = '[mp4]';
+const X_REP_HINT_WAVEFORM = '[waveform]';
 const AI_TRANSCRIPTION_FOR_VIDEO_SUBTITLES = 'aiTranscriptionForVideoSubtitles';
+const AUDIO_PLAYER_V2 = 'audioPlayerV2.enabled';
 const PDFJS_CSS_UNITS = 96.0 / 72.0; // Should match CSS_UNITS in pdf_viewer.js
 const PDFJS_MAX_AUTO_SCALE = 1.25; // Should match MAX_AUTO_SCALE in pdf_viewer.js
 const PDFJS_WIDTH_PADDING_PX = 40; // Should match SCROLLBAR_PADDING in pdf_viewer.js
@@ -1010,7 +1017,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.88.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.90.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 = {};
@@ -2135,204 +2142,6 @@ function DurationLabels({
 
 /***/ },
 
-/***/ 3524
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ MarkerAvatar)
-});
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1649);
-;// ./src/lib/viewers/controls/media/MarkerAvatar.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/media/MarkerAvatar.tsx
-
-
-const AVATAR_PALETTE = [{
-  bg: '#7fb0ea',
-  fg: '#222'
-}, {
-  bg: '#003c84',
-  fg: '#fff'
-}, {
-  bg: '#ffeb7f',
-  fg: '#222'
-}, {
-  bg: '#92e0c0',
-  fg: '#222'
-}, {
-  bg: '#fad98d',
-  fg: '#222'
-}, {
-  bg: '#91c2fd',
-  fg: '#222'
-}, {
-  bg: '#f69bab',
-  fg: '#222'
-}, {
-  bg: '#cf9ff6',
-  fg: '#222'
-}, {
-  bg: '#f8c08c',
-  fg: '#222'
-}, {
-  bg: '#a392e0',
-  fg: '#222'
-}];
-function AnonymousAvatarIcon() {
-  return /*#__PURE__*/external_react_["default"].createElement("svg", {
-    "aria-hidden": "true",
-    className: "bp-MarkerAvatar-anonymousIcon",
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, /*#__PURE__*/external_react_["default"].createElement("path", {
-    d: "M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1.5c-2.5 0-5 1.25-5 3.75V14h10v-.75c0-2.5-2.5-3.75-5-3.75Z",
-    fill: "currentColor"
-  }));
-}
-function MarkerAvatar({
-  avatarUrl,
-  colorIndex = 0,
-  initial,
-  size
-}) {
-  const safeIndex = Number.isFinite(colorIndex) ? Math.abs(colorIndex) % AVATAR_PALETTE.length : 0;
-  const {
-    bg: bgColor,
-    fg: textColor
-  } = AVATAR_PALETTE[safeIndex];
-  const [imgFailed, setImgFailed] = external_react_["default"].useState(false);
-  const [loadedUrl, setLoadedUrl] = external_react_["default"].useState(null);
-  const imgRef = external_react_["default"].useRef(null);
-  // Keep initial + palette until onLoad (and for cached complete). Shared with video ticks.
-  const showImage = Boolean(avatarUrl) && !imgFailed && loadedUrl === avatarUrl;
-  external_react_["default"].useEffect(() => {
-    setImgFailed(false);
-  }, [avatarUrl]);
-  external_react_["default"].useLayoutEffect(() => {
-    const img = imgRef.current;
-    if (avatarUrl && img?.complete && img.naturalWidth > 0) {
-      setLoadedUrl(avatarUrl);
-    }
-  }, [avatarUrl]);
-  let fallback = /*#__PURE__*/external_react_["default"].createElement(AnonymousAvatarIcon, null);
-  if (initial) {
-    fallback = /*#__PURE__*/external_react_["default"].createElement("span", {
-      className: "bp-MarkerAvatar-initial",
-      style: {
-        color: textColor
-      }
-    }, initial);
-  }
-  const style = {};
-  if (!showImage) {
-    style.backgroundColor = bgColor;
-  }
-  if (size) {
-    style.width = size;
-    style.height = size;
-  }
-  return /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-MarkerAvatar",
-    style: Object.keys(style).length > 0 ? style : undefined
-  }, avatarUrl && !imgFailed && /*#__PURE__*/external_react_["default"].createElement("img", {
-    ref: imgRef,
-    alt: "",
-    onError: () => {
-      setImgFailed(true);
-    },
-    onLoad: () => {
-      if (avatarUrl) {
-        setLoadedUrl(avatarUrl);
-      }
-    },
-    src: avatarUrl
-  }), !showImage && fallback);
-}
-
-/***/ },
-
-/***/ 9232
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ MarkerAvatarStack)
-});
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(1649);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatar.tsx + 1 modules
-var MarkerAvatar = __webpack_require__(3524);
-;// ./src/lib/viewers/controls/media/MarkerAvatarStack.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx
-
-
-
-const MAX_VISIBLE_AVATARS = 4;
-function MarkerAvatarStack({
-  markers,
-  onMarkerClick,
-  overlapPx,
-  selectedId,
-  size
-}) {
-  const hasOverflow = markers.length > MAX_VISIBLE_AVATARS;
-  const visibleMarkers = hasOverflow ? markers.slice(0, MAX_VISIBLE_AVATARS - 1) : markers;
-  const overflowMarkers = hasOverflow ? markers.slice(MAX_VISIBLE_AVATARS - 1) : [];
-  const isOverflowSelected = overflowMarkers.some(marker => marker.id === selectedId);
-  const style = overlapPx != null ? {
-    '--bp-marker-stack-overlap': `-${overlapPx}px`
-  } : undefined;
-  return /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-MarkerAvatarStack",
-    style: style
-  }, visibleMarkers.map(marker => /*#__PURE__*/external_react_["default"].createElement("button", {
-    key: marker.id,
-    "aria-label": "Comment marker",
-    "aria-pressed": marker.id === selectedId,
-    className: `bp-MarkerAvatarStack-item${marker.id === selectedId ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
-    "data-resin-target": "commentMarkerStackAvatar",
-    onClick: e => {
-      e.stopPropagation();
-      onMarkerClick?.(marker);
-    },
-    type: "button"
-  }, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
-    avatarUrl: marker.avatarUrl,
-    colorIndex: marker.colorIndex,
-    initial: marker.initial,
-    size: size
-  }))), hasOverflow && /*#__PURE__*/external_react_["default"].createElement("button", {
-    "aria-label": "Comment marker",
-    "aria-pressed": isOverflowSelected,
-    className: `bp-MarkerAvatarStack-item bp-MarkerAvatarStack-overflow${isOverflowSelected ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
-    "data-resin-target": "commentMarkerStackAvatarOverflow",
-    onClick: e => {
-      e.stopPropagation();
-      onMarkerClick?.(markers[MAX_VISIBLE_AVATARS - 1]);
-    },
-    type: "button"
-  }, /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge",
-    style: size ? {
-      width: size,
-      height: size
-    } : undefined
-  }, /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-MarkerAvatar-initial"
-  }, "+", markers.length - (MAX_VISIBLE_AVATARS - 1)))));
-}
-
-/***/ },
-
 /***/ 6929
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -3443,7 +3252,209 @@ function VolumeControls({
 
 /***/ },
 
-/***/ 2400
+/***/ 2040
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ MarkerAvatar)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1649);
+;// ./src/lib/viewers/controls/media/markers/MarkerAvatar.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx
+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); }
+
+
+const AVATAR_PALETTE = [{
+  bg: '#7fb0ea',
+  fg: '#222'
+}, {
+  bg: '#003c84',
+  fg: '#fff'
+}, {
+  bg: '#ffeb7f',
+  fg: '#222'
+}, {
+  bg: '#92e0c0',
+  fg: '#222'
+}, {
+  bg: '#fad98d',
+  fg: '#222'
+}, {
+  bg: '#91c2fd',
+  fg: '#222'
+}, {
+  bg: '#f69bab',
+  fg: '#222'
+}, {
+  bg: '#cf9ff6',
+  fg: '#222'
+}, {
+  bg: '#f8c08c',
+  fg: '#222'
+}, {
+  bg: '#a392e0',
+  fg: '#222'
+}];
+function AnonymousAvatarIcon() {
+  return /*#__PURE__*/external_react_["default"].createElement("svg", {
+    "aria-hidden": "true",
+    className: "bp-MarkerAvatar-anonymousIcon",
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, /*#__PURE__*/external_react_["default"].createElement("path", {
+    d: "M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1.5c-2.5 0-5 1.25-5 3.75V14h10v-.75c0-2.5-2.5-3.75-5-3.75Z",
+    fill: "currentColor"
+  }));
+}
+function MarkerAvatar({
+  avatarUrl,
+  colorIndex = 0,
+  initial,
+  size
+}) {
+  const safeIndex = Number.isFinite(colorIndex) ? Math.abs(colorIndex) % AVATAR_PALETTE.length : 0;
+  const {
+    bg: bgColor,
+    fg: textColor
+  } = AVATAR_PALETTE[safeIndex];
+  const [imgFailed, setImgFailed] = external_react_["default"].useState(false);
+  const [loadedUrl, setLoadedUrl] = external_react_["default"].useState(null);
+  const imgRef = external_react_["default"].useRef(null);
+  // Keep initial + palette until onLoad (and for cached complete). Shared with video ticks.
+  const showImage = Boolean(avatarUrl) && !imgFailed && loadedUrl === avatarUrl;
+  external_react_["default"].useEffect(() => {
+    setImgFailed(false);
+  }, [avatarUrl]);
+  external_react_["default"].useLayoutEffect(() => {
+    const img = imgRef.current;
+    if (avatarUrl && img?.complete && img.naturalWidth > 0) {
+      setLoadedUrl(avatarUrl);
+    }
+  }, [avatarUrl]);
+  let fallback = /*#__PURE__*/external_react_["default"].createElement(AnonymousAvatarIcon, null);
+  if (initial) {
+    fallback = /*#__PURE__*/external_react_["default"].createElement("span", {
+      className: "bp-MarkerAvatar-initial",
+      style: {
+        color: textColor
+      }
+    }, initial);
+  }
+  const style = {};
+  if (!showImage) {
+    style.backgroundColor = bgColor;
+  }
+  if (size) {
+    _extends(style, {
+      '--bp-marker-avatar-size': `${size}px`
+    });
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-MarkerAvatar",
+    style: Object.keys(style).length > 0 ? style : undefined
+  }, avatarUrl && !imgFailed && /*#__PURE__*/external_react_["default"].createElement("img", {
+    ref: imgRef,
+    alt: "",
+    onError: () => {
+      setImgFailed(true);
+    },
+    onLoad: () => {
+      if (avatarUrl) {
+        setLoadedUrl(avatarUrl);
+      }
+    },
+    src: avatarUrl
+  }), !showImage && fallback);
+}
+
+/***/ },
+
+/***/ 308
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ MarkerAvatarStack)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1649);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx + 1 modules
+var MarkerAvatar = __webpack_require__(2040);
+;// ./src/lib/viewers/controls/media/markers/MarkerAvatarStack.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/media/markers/MarkerAvatarStack.tsx
+
+
+
+const MAX_VISIBLE_AVATARS = 4;
+function MarkerAvatarStack({
+  markers,
+  onMarkerClick,
+  overlapPx,
+  selectedId,
+  size
+}) {
+  const hasOverflow = markers.length > MAX_VISIBLE_AVATARS;
+  const visibleMarkers = hasOverflow ? markers.slice(0, MAX_VISIBLE_AVATARS - 1) : markers;
+  const overflowMarkers = hasOverflow ? markers.slice(MAX_VISIBLE_AVATARS - 1) : [];
+  const isOverflowSelected = overflowMarkers.some(marker => marker.id === selectedId);
+  const style = overlapPx != null ? {
+    '--bp-marker-stack-overlap': `-${overlapPx}px`
+  } : undefined;
+  return /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-MarkerAvatarStack",
+    style: style
+  }, visibleMarkers.map(marker => /*#__PURE__*/external_react_["default"].createElement("button", {
+    key: marker.id,
+    "aria-label": "Comment marker",
+    "aria-pressed": marker.id === selectedId,
+    className: `bp-MarkerAvatarStack-item${marker.id === selectedId ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
+    "data-bp-marker-selected": marker.id === selectedId ? '' : undefined,
+    "data-resin-target": "commentMarkerStackAvatar",
+    onClick: e => {
+      e.stopPropagation();
+      onMarkerClick?.(marker);
+    },
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
+    avatarUrl: marker.avatarUrl,
+    colorIndex: marker.colorIndex,
+    initial: marker.initial,
+    size: size
+  }))), hasOverflow && /*#__PURE__*/external_react_["default"].createElement("button", {
+    "aria-label": "Comment marker",
+    "aria-pressed": isOverflowSelected,
+    className: `bp-MarkerAvatarStack-item bp-MarkerAvatarStack-overflow${isOverflowSelected ? ' bp-MarkerAvatarStack-item--selected' : ''}`,
+    "data-bp-marker-selected": isOverflowSelected ? '' : undefined,
+    "data-resin-target": "commentMarkerStackAvatarOverflow",
+    onClick: e => {
+      e.stopPropagation();
+      const overflowTarget = overflowMarkers.find(marker => marker.id === selectedId) ?? overflowMarkers[0];
+      onMarkerClick?.(overflowTarget);
+    },
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge",
+    style: size ? {
+      '--bp-marker-avatar-size': `${size}px`
+    } : undefined
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-MarkerAvatar-initial"
+  }, "+", markers.length - (MAX_VISIBLE_AVATARS - 1)))));
+}
+
+/***/ },
+
+/***/ 5510
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
@@ -3496,6 +3507,97 @@ function buildClusters(markers, durationValue, trackWidth, thresholdPx = CLUSTER
 
 /***/ },
 
+/***/ 2378
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (/* binding */ useDismissableMarkerSelection)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
+
+function eventTargetElement(target) {
+  if (target instanceof Element) {
+    return target;
+  }
+  if (target instanceof Text) {
+    return target.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Optimistic comment-badge selection that clears on pointerdown outside the
+ * selected avatar or its cluster. Host `hostSelectedId` can restore a different
+ * id; acking the dismissed id must not bring the ring back.
+ */
+function useDismissableMarkerSelection(hostSelectedId = null) {
+  const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const dismissedIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const [optimisticSelectedId, setOptimisticSelectedId] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const [isSelectionDismissed, setIsSelectionDismissed] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  const selectedId = optimisticSelectedId ?? (isSelectionDismissed ? null : hostSelectedId);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    setOptimisticSelectedId(null);
+    if (dismissedIdRef.current && hostSelectedId === dismissedIdRef.current) {
+      return;
+    }
+    dismissedIdRef.current = null;
+    setIsSelectionDismissed(false);
+  }, [hostSelectedId]);
+  const selectMarker = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(id => {
+    dismissedIdRef.current = null;
+    setIsSelectionDismissed(false);
+    setOptimisticSelectedId(id);
+  }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (!selectedId) {
+      return undefined;
+    }
+    const isEventInsideSelectedBadge = target => {
+      const container = containerRef.current;
+      if (!container) {
+        return true;
+      }
+      const selected = container.querySelector('[data-bp-marker-selected]');
+      if (!selected) {
+        return true;
+      }
+      const el = eventTargetElement(target);
+      if (!el) {
+        return true;
+      }
+      if (selected.contains(el)) {
+        return true;
+      }
+      const group = el.closest('[data-bp-marker-group]');
+      return Boolean(group && group.contains(selected));
+    };
+    const onDocumentPointerDown = event => {
+      if (isEventInsideSelectedBadge(event.target)) {
+        return;
+      }
+      dismissedIdRef.current = selectedId;
+      setOptimisticSelectedId(null);
+      setIsSelectionDismissed(true);
+      const active = document.activeElement;
+      if (active instanceof HTMLElement && containerRef.current?.contains(active)) {
+        active.blur();
+      }
+    };
+    document.addEventListener('pointerdown', onDocumentPointerDown, true);
+    return () => {
+      document.removeEventListener('pointerdown', onDocumentPointerDown, true);
+    };
+  }, [selectedId]);
+  return {
+    containerRef,
+    selectMarker,
+    selectedId
+  };
+}
+
+/***/ },
+
 /***/ 5346
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -4748,12 +4850,14 @@ function getPlayheadCameraAction({
     type: 'none'
   };
 }
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/buildClusters.ts
-var buildClusters = __webpack_require__(2400);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatar.tsx + 1 modules
-var MarkerAvatar = __webpack_require__(3524);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx + 1 modules
-var MarkerAvatarStack = __webpack_require__(9232);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/useDismissableMarkerSelection.ts
+var useDismissableMarkerSelection = __webpack_require__(2378);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/buildClusters.ts
+var buildClusters = __webpack_require__(5510);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatarStack.tsx + 1 modules
+var MarkerAvatarStack = __webpack_require__(308);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx + 1 modules
+var MarkerAvatar = __webpack_require__(2040);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
 var utils = __webpack_require__(5346);
 ;// ./src/lib/viewers/media/waveform/WaveformCommentMarkers.scss
@@ -4765,8 +4869,6 @@ var utils = __webpack_require__(5346);
 
 
 
-
-
 const WAVEFORM_MARKER_SIZE_PX = 20;
 function hasMappedWindow(viewport) {
   return !!viewport && Number.isFinite(viewport.startSec) && viewport.endSec > viewport.startSec;
@@ -4809,25 +4911,16 @@ function WaveformCommentMarkers({
   selectedId: hostSelectedId = null,
   viewport = null
 }) {
-  const overlayRef = (0,external_react_.useRef)(null);
   const trackRef = (0,external_react_.useRef)(null);
-  const dismissedIdRef = (0,external_react_.useRef)(null);
+  const {
+    containerRef,
+    selectMarker,
+    selectedId
+  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId);
   const [trackWidth, setTrackWidth] = (0,external_react_.useState)(0);
-  const [optimisticSelectedId, setOptimisticSelectedId] = (0,external_react_.useState)(null);
-  const [isSelectionDismissed, setIsSelectionDismissed] = (0,external_react_.useState)(false);
-  const selectedId = optimisticSelectedId ?? (isSelectionDismissed ? null : hostSelectedId);
   const canShowTrack = durationSec > 0 && commentMarkers.length > 0;
   const zoomLevel = viewport?.zoomLevel ?? constants/* WAVEFORM_ZOOM_MIN */.LW;
   const isZoomed = hasMappedWindow(viewport) && viewport.zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW;
-  (0,external_react_.useEffect)(() => {
-    setOptimisticSelectedId(null);
-    // Host ack of the dismissed id must not bring the ring back.
-    if (dismissedIdRef.current && hostSelectedId === dismissedIdRef.current) {
-      return;
-    }
-    dismissedIdRef.current = null;
-    setIsSelectionDismissed(false);
-  }, [hostSelectedId]);
   (0,external_react_.useLayoutEffect)(() => {
     if (!canShowTrack) {
       setTrackWidth(0);
@@ -4855,44 +4948,14 @@ function WaveformCommentMarkers({
   }, [commentMarkers, durationSec, trackWidth, zoomLevel]);
   const handleMarkerClick = (0,external_react_.useCallback)((marker, event) => {
     event?.stopPropagation();
-    dismissedIdRef.current = null;
-    setIsSelectionDismissed(false);
-    setOptimisticSelectedId(marker.id);
+    selectMarker(marker.id);
     onCommentMarkerClick?.(marker);
-  }, [onCommentMarkerClick]);
-  (0,external_react_.useEffect)(() => {
-    if (!selectedId) {
-      return undefined;
-    }
-    const isEventInsideSelectedBadge = target => {
-      if (!(target instanceof Element) || !overlayRef.current) {
-        return false;
-      }
-      const selected = overlayRef.current.querySelector('.bp-WaveformCommentMarkers-marker--selected, .bp-MarkerAvatarStack-item--selected');
-      return Boolean(selected && selected.contains(target));
-    };
-    const onDocumentPointerDown = event => {
-      if (isEventInsideSelectedBadge(event.target)) {
-        return;
-      }
-      dismissedIdRef.current = selectedId;
-      setOptimisticSelectedId(null);
-      setIsSelectionDismissed(true);
-      const active = document.activeElement;
-      if (active instanceof HTMLElement && overlayRef.current?.contains(active)) {
-        active.blur();
-      }
-    };
-    document.addEventListener('pointerdown', onDocumentPointerDown, true);
-    return () => {
-      document.removeEventListener('pointerdown', onDocumentPointerDown, true);
-    };
-  }, [selectedId]);
+  }, [onCommentMarkerClick, selectMarker]);
   if (!(durationSec > 0) || commentMarkers.length === 0) {
     return null;
   }
   return /*#__PURE__*/external_react_["default"].createElement("div", {
-    ref: overlayRef,
+    ref: containerRef,
     className: `bp-WaveformCommentMarkers${isZoomed ? ' bp-WaveformCommentMarkers--zoomed' : ''}`,
     "data-testid": "bp-waveform-comment-markers"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -4908,6 +4971,7 @@ function WaveformCommentMarkers({
       return /*#__PURE__*/external_react_["default"].createElement("div", {
         key: cluster.id,
         className: className,
+        "data-bp-marker-group": "",
         "data-testid": "bp-waveform-comment-marker",
         style: {
           left
@@ -4916,8 +4980,7 @@ function WaveformCommentMarkers({
         markers: cluster.markers,
         onMarkerClick: handleMarkerClick,
         overlapPx: WAVEFORM_MARKER_SIZE_PX / 2,
-        selectedId: selectedId,
-        size: WAVEFORM_MARKER_SIZE_PX
+        selectedId: selectedId
       }));
     }
     return /*#__PURE__*/external_react_["default"].createElement("button", {
@@ -4925,6 +4988,7 @@ function WaveformCommentMarkers({
       "aria-label": "Comment marker",
       "aria-pressed": isSelected,
       className: className,
+      "data-bp-marker-selected": isSelected ? '' : undefined,
       "data-resin-target": "commentMarker",
       "data-testid": "bp-waveform-comment-marker",
       onClick: event => handleMarkerClick(marker, event),
@@ -4935,8 +4999,7 @@ function WaveformCommentMarkers({
     }, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
       avatarUrl: marker.avatarUrl,
       colorIndex: marker.colorIndex,
-      initial: marker.initial,
-      size: WAVEFORM_MARKER_SIZE_PX
+      initial: marker.initial
     }));
   })));
 }
@@ -6319,14 +6382,16 @@ function MP3ControlsV2({
   volume
 }) {
   const durationValue = typeof durationTime === 'number' && isFinite_default()(durationTime) ? durationTime : 0;
+  const mediaDuration = mediaEl ? mediaEl.duration : NaN;
+  const hasMediaMetadata = typeof mediaDuration === 'number' && Number.isFinite(mediaDuration) && mediaDuration > 0;
+  const hasWaveformDuration = durationValue > 0;
   const [zoomLevel, setZoomLevel] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
   const [maxZoom, setMaxZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
   const [isZoomRevealed, setIsZoomRevealed] = (0,external_react_.useState)(false);
   const zoomRevealTimerRef = (0,external_react_.useRef)(0);
   const hasRealPeaks = !!(peaks && peaks.length);
   const waveformPeaks = hasRealPeaks ? peaks : PLACEHOLDER_PEAKS;
-  const hasMetadata = durationValue > 0;
-  const waveformDurationSec = hasMetadata ? durationValue : PLACEHOLDER_DURATION_SEC;
+  const waveformDurationSec = hasWaveformDuration ? durationValue : PLACEHOLDER_DURATION_SEC;
   const [playRequested, setPlayRequested] = (0,external_react_.useState)(false);
   const [viewport, setViewport] = (0,external_react_.useState)(null);
   const handleViewportChange = (0,external_react_.useCallback)(next => {
@@ -6371,11 +6436,11 @@ function MP3ControlsV2({
     }
     onTimeChange(marker.time);
   }, [onCommentMarkerClick, onPlayPause, onTimeChange]);
-  const isWaveformInteractive = playRequested && hasMetadata;
-  const isWaitingToPlay = playRequested && !hasMetadata;
+  const isWaveformInteractive = playRequested && hasMediaMetadata;
+  const isWaitingToPlay = playRequested && !hasMediaMetadata;
   const showPlayOverlay = !playRequested && !isPlaying;
   const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
-  const hasZoomControl = hasZoomHandlers && hasMetadata && maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW;
+  const hasZoomControl = hasZoomHandlers && hasMediaMetadata && maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2",
     "data-testid": "media-controls-wrapper-v2"
@@ -6396,7 +6461,7 @@ function MP3ControlsV2({
     zoomLevel: hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW
   }), /*#__PURE__*/external_react_["default"].createElement(WaveformCommentMarkers, {
     commentMarkers: waveformMarkers,
-    durationSec: hasMetadata ? durationValue : 0,
+    durationSec: hasWaveformDuration ? durationValue : 0,
     onCommentMarkerClick: handleCommentMarkerClick,
     selectedId: selectedMarkerId,
     viewport: viewport
@@ -6423,7 +6488,7 @@ function MP3ControlsV2({
   }), isWaitingToPlay && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-media-buffering-spinner",
     "data-testid": "bp-MP3ControlsV2-loading"
-  })), hasMetadata && /*#__PURE__*/external_react_["default"].createElement("div", {
+  })), hasMediaMetadata && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-bar",
     "data-testid": "bp-MP3ControlsV2-bar"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -6594,25 +6659,19 @@ const WAVEFORM_HEIGHT = 140;
 
 /***/ },
 
-/***/ 546
+/***/ 4971
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  decodeToPeaks: () => (/* binding */ decodeToPeaks),
-  extractPeaks: () => (/* binding */ extractPeaks),
-  getDecodeDecision: () => (/* binding */ getDecodeDecision),
-  loadPeaks: () => (/* binding */ loadPeaks),
-  runClientDecode: () => (/* binding */ runClientDecode)
+  oz: () => (/* binding */ WaveformLoadError),
+  iY: () => (/* binding */ createCappedWaveformState),
+  nR: () => (/* binding */ createWaveformLoader),
+  Vq: () => (/* binding */ errorFromUnknown),
+  zf: () => (/* binding */ isAbortError)
 });
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
 
-// EXTERNAL MODULE: ./src/lib/util.js + 1 modules
-var util = __webpack_require__(4410);
-// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/constants.ts
-var constants = __webpack_require__(4929);
 ;// ./src/lib/viewers/media/waveform/types.ts
 /**
  * Box V1 is the in-viewer form: unsigned mono peaks in [0, 1] (peak envelope, mono_max).
@@ -6648,9 +6707,9 @@ function isWaveformErrorCode(value) {
  * Wavesurfer's two paints: left of the playhead (`progressColor`) and right of it (`waveColor`).
  * A string is a solid fill; a stop list is a left-to-right step gradient.
  */
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/validateWaveformPayload.ts
+var validateWaveformPayload = __webpack_require__(1053);
 ;// ./src/lib/viewers/media/waveform/createWaveformLoader.ts
-/* unused harmony import specifier */ var isRetryableWaveformError;
-/* unused harmony import specifier */ var validateWaveformPayload;
 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); }
@@ -6697,7 +6756,7 @@ function failedLoadState(error) {
   return {
     status: 'failed',
     error,
-    retryable: isRetryableWaveformError(error.code)
+    retryable: (0,validateWaveformPayload/* isRetryableWaveformError */.Oe)(error.code)
   };
 }
 function readyLoadState(payload) {
@@ -6779,7 +6838,7 @@ function createWaveformLoader(fetchPayload, options = {}) {
       if (staleAfterFetch) {
         return staleAfterFetch;
       }
-      const validation = validateWaveformPayload(raw, options);
+      const validation = (0,validateWaveformPayload/* validateWaveformPayload */.a9)(raw, options);
       const staleAfterValidate = cancelledIfStale(request);
       if (staleAfterValidate) {
         return staleAfterValidate;
@@ -6821,185 +6880,29 @@ function createCappedWaveformState(message) {
     }
   };
 }
-;// ./src/lib/viewers/media/waveform/validateWaveformPayload.ts
 
-const DEFAULT_PEAK_SCALE = 'unit';
-const DEFAULT_CHANNEL_POLICY = 'mono_max';
-const DEFAULT_ENVELOPE = 'peak';
-function fail(code, message, retryable = false) {
-  return {
-    ok: false,
-    error: {
-      code,
-      message
-    },
-    retryable
-  };
-}
-function isPlainObject(value) {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-function payloadByteLength(raw) {
-  try {
-    const serialized = JSON.stringify(raw);
-    if (typeof Buffer !== 'undefined') {
-      return Buffer.byteLength(serialized, 'utf8');
-    }
-    if (typeof TextEncoder !== 'undefined') {
-      return new TextEncoder().encode(serialized).length;
-    }
-    return serialized.length;
-  } catch {
-    return Number.MAX_SAFE_INTEGER;
-  }
-}
-function readOptionalPolicy(raw, key, allowed) {
-  if (!(key in raw) || raw[key] === undefined) {
-    return undefined;
-  }
-  return raw[key] === allowed ? allowed : null;
-}
-function asWaveformPayloadV1(raw) {
-  const {
-    version,
-    durationSec,
-    peaks
-  } = raw;
-  if (version !== constants/* WAVEFORM_PAYLOAD_VERSION */.sh || typeof durationSec !== 'number' || !Array.isArray(peaks)) {
-    return null;
-  }
-  const peakScale = readOptionalPolicy(raw, 'peakScale', DEFAULT_PEAK_SCALE);
-  const channelPolicy = readOptionalPolicy(raw, 'channelPolicy', DEFAULT_CHANNEL_POLICY);
-  const envelope = readOptionalPolicy(raw, 'envelope', DEFAULT_ENVELOPE);
-  if (peakScale === null || channelPolicy === null || envelope === null) {
-    return null;
-  }
-  if ('channels' in raw && raw.channels !== undefined && raw.channels !== 1) {
-    return null;
-  }
-  return {
-    version: constants/* WAVEFORM_PAYLOAD_VERSION */.sh,
-    durationSec,
-    peaks: peaks,
-    peakScale: peakScale ?? DEFAULT_PEAK_SCALE,
-    channelPolicy: channelPolicy ?? DEFAULT_CHANNEL_POLICY,
-    envelope: envelope ?? DEFAULT_ENVELOPE,
-    channels: 1
-  };
-}
-function readPayloadObject(raw, maxPayloadBytes, isPayloadByteCheckSkipped = false) {
-  if (raw === null || raw === undefined) {
-    return fail('INVALID_PAYLOAD', 'Payload is null or undefined');
-  }
-  if (!isPayloadByteCheckSkipped) {
-    const byteLength = payloadByteLength(raw);
-    if (byteLength > maxPayloadBytes) {
-      return fail('PAYLOAD_TOO_LARGE', `Payload size ${byteLength} exceeds limit ${maxPayloadBytes}`);
-    }
-  }
-  if (!isPlainObject(raw)) {
-    return fail('INVALID_PAYLOAD', 'Payload must be an object');
-  }
-  return {
-    ok: true,
-    value: raw
-  };
-}
-function checkVersion(raw) {
-  if (raw.version === constants/* WAVEFORM_PAYLOAD_VERSION */.sh) {
-    return null;
-  }
-  const {
-    version
-  } = raw;
-  if (typeof version === 'number' && version > constants/* WAVEFORM_PAYLOAD_VERSION */.sh) {
-    return fail('UNSUPPORTED_VERSION', `Unsupported waveform version ${version}; max supported is ${constants/* WAVEFORM_PAYLOAD_VERSION */.sh}`);
-  }
-  return fail('INVALID_PAYLOAD', 'Missing or invalid version field');
-}
-function checkDuration(payload, expectedDurationSec) {
-  if (!Number.isFinite(payload.durationSec) || payload.durationSec <= 0) {
-    return fail('INVALID_DURATION', 'durationSec must be a positive finite number');
-  }
-  if (expectedDurationSec !== undefined && Number.isFinite(expectedDurationSec) && Math.abs(payload.durationSec - expectedDurationSec) > constants/* DURATION_MISMATCH_TOLERANCE_SEC */.GQ) {
-    return fail('DURATION_MISMATCH', `Payload duration ${payload.durationSec}s differs from media duration ${expectedDurationSec}s`, true);
-  }
-  return null;
-}
-function normalizePeaks(peaks, maxPeakCount) {
-  if (peaks.length === 0) {
-    return fail('EMPTY_PEAKS', 'peaks array must not be empty');
-  }
-  if (peaks.length > maxPeakCount) {
-    return fail('PEAK_COUNT_EXCEEDED', `peaks length ${peaks.length} exceeds max ${maxPeakCount}`);
-  }
-  const normalized = new Float32Array(peaks.length);
-  for (let i = 0; i < peaks.length; i += 1) {
-    const value = peaks[i];
-    if (!Number.isFinite(value)) {
-      return fail('NON_FINITE_PEAK', `Peak at index ${i} is not finite`);
-    }
-    if (value < constants/* PEAK_UNIT_MIN */.mJ || value > constants/* PEAK_UNIT_MAX */.i8) {
-      return fail('PEAK_OUT_OF_RANGE', `Peak at index ${i} is outside [${constants/* PEAK_UNIT_MIN */.mJ}, ${constants/* PEAK_UNIT_MAX */.i8}]`);
-    }
-    normalized[i] = value;
-  }
-  return {
-    ok: true,
-    peaks: normalized
-  };
-}
+/***/ },
 
-/**
- * Validates a version-1 waveform payload and returns normalized peaks for rendering.
- * Wire JSON requires version, durationSec, and peaks. sampleCount and source are ignored.
- */
-function validateWaveformPayload_validateWaveformPayload(raw, options = {}) {
-  const maxPeakCount = options.maxPeakCount ?? constants/* MAX_PEAK_COUNT */.FY;
-  const maxPayloadBytes = options.maxPayloadBytes ?? constants/* MAX_PAYLOAD_BYTES */.qY;
-  const objectResult = readPayloadObject(raw, maxPayloadBytes, options.isPayloadByteCheckSkipped === true);
-  if (!objectResult.ok) {
-    return objectResult;
-  }
-  const versionFailure = checkVersion(objectResult.value);
-  if (versionFailure) {
-    return versionFailure;
-  }
-  const payload = asWaveformPayloadV1(objectResult.value);
-  if (!payload) {
-    return fail('INVALID_PAYLOAD', 'Payload failed structural validation');
-  }
-  const durationFailure = checkDuration(payload, options.expectedDurationSec);
-  if (durationFailure) {
-    return durationFailure;
-  }
-  const peaksResult = normalizePeaks(payload.peaks, maxPeakCount);
-  if (!peaksResult.ok) {
-    return peaksResult;
-  }
-  return {
-    ok: true,
-    payload: {
-      version: constants/* WAVEFORM_PAYLOAD_VERSION */.sh,
-      durationSec: payload.durationSec,
-      peaks: peaksResult.peaks,
-      peakScale: payload.peakScale ?? DEFAULT_PEAK_SCALE,
-      channelPolicy: payload.channelPolicy ?? DEFAULT_CHANNEL_POLICY,
-      envelope: payload.envelope ?? DEFAULT_ENVELOPE
-    }
-  };
-}
+/***/ 8296
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-/** Maps validation / load failures to retry policy for loaders. */
-function validateWaveformPayload_isRetryableWaveformError(code) {
-  return code === 'DURATION_MISMATCH' || code === 'DECODE_FAILED' || code === 'LOAD_FAILED';
-}
-;// ./src/lib/viewers/media/waveform/decode.ts
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   decodeToPeaks: () => (/* binding */ decodeToPeaks),
+/* harmony export */   extractPeaks: () => (/* binding */ extractPeaks),
+/* harmony export */   getDecodeDecision: () => (/* binding */ getDecodeDecision),
+/* harmony export */   loadPeaks: () => (/* binding */ loadPeaks),
+/* harmony export */   runClientDecode: () => (/* binding */ runClientDecode)
+/* harmony export */ });
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4410);
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4929);
+/* harmony import */ var _createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4971);
+/* harmony import */ var _validateWaveformPayload__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1053);
 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) { decode_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 decode_defineProperty(e, r, t) { return (r = decode_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function decode_toPropertyKey(t) { var i = decode_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function decode_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 _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); }
 
 
 
@@ -7011,9 +6914,6 @@ const EMPTY_TIMINGS = {
 function createAbortError() {
   return new DOMException('Aborted', 'AbortError');
 }
-function isPositiveFinite(value) {
-  return typeof value === 'number' && Number.isFinite(value) && value > 0;
-}
 function getAudioContextConstructor() {
   if (typeof window === 'undefined') {
     return undefined;
@@ -7046,7 +6946,7 @@ function createSkippedDecodeResult(reason) {
       reason
     };
   }
-  return _objectSpread(_objectSpread({}, createCappedWaveformState(getDecodeSkipMessage(reason))), {}, {
+  return _objectSpread(_objectSpread({}, (0,_createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__/* .createCappedWaveformState */ .iY)(getDecodeSkipMessage(reason))), {}, {
     isDecodeSkipped: true,
     timings: EMPTY_TIMINGS,
     reason
@@ -7070,11 +6970,11 @@ function decodeWithContext(context, buffer, signal) {
       }
       isSettled = true;
       signal?.removeEventListener('abort', onAbort);
-      if (isAbortError(error)) {
+      if ((0,_createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__/* .isAbortError */ .zf)(error)) {
         reject(error instanceof DOMException ? error : createAbortError());
         return;
       }
-      reject(error instanceof WaveformLoadError ? error : new WaveformLoadError('DECODE_FAILED', 'decodeAudioData failed'));
+      reject(error instanceof _createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__/* .WaveformLoadError */ .oz ? error : new _createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__/* .WaveformLoadError */ .oz('DECODE_FAILED', 'decodeAudioData failed'));
     };
     onAbort = () => onFailure(createAbortError());
     if (signal?.aborted) {
@@ -7100,13 +7000,13 @@ function decodeWithContext(context, buffer, signal) {
  * skips decode so playback is never blocked by expanding the full audio buffer.
  */
 function getDecodeDecision(media, caps = {}) {
-  const maxCompressedBytes = caps.maxCompressedBytes ?? constants/* CLIENT_DECODE_MAX_COMPRESSED_BYTES */.EB;
-  const maxDurationSec = caps.maxDurationSec ?? constants/* CLIENT_DECODE_MAX_DURATION_SEC */.nG;
+  const maxCompressedBytes = caps.maxCompressedBytes ?? _constants__WEBPACK_IMPORTED_MODULE_1__/* .CLIENT_DECODE_MAX_COMPRESSED_BYTES */ .EB;
+  const maxDurationSec = caps.maxDurationSec ?? _constants__WEBPACK_IMPORTED_MODULE_1__/* .CLIENT_DECODE_MAX_DURATION_SEC */ .nG;
   const {
     compressedBytes,
     durationSec
   } = media;
-  if (!isPositiveFinite(compressedBytes) || !isPositiveFinite(durationSec)) {
+  if (!(0,_validateWaveformPayload__WEBPACK_IMPORTED_MODULE_3__/* .isPositiveFinite */ .Ze)(compressedBytes) || !(0,_validateWaveformPayload__WEBPACK_IMPORTED_MODULE_3__/* .isPositiveFinite */ .Ze)(durationSec)) {
     return {
       isAllowed: false,
       reason: 'missing_metadata'
@@ -7133,7 +7033,7 @@ function getDecodeDecision(media, caps = {}) {
  * Collapse audio channels to one unsigned peak per time bucket (max abs, then clamp to unit).
  * Accepts an AudioBuffer so callers can extract before closing the AudioContext.
  */
-function extractPeaks(audio, peakCount = constants/* CLIENT_DECODE_PEAK_COUNT */.f3) {
+function extractPeaks(audio, peakCount = _constants__WEBPACK_IMPORTED_MODULE_1__/* .CLIENT_DECODE_PEAK_COUNT */ .f3) {
   const channels = Array.isArray(audio) ? audio : Array.from({
     length: audio.numberOfChannels
   }, (_, channelIndex) => audio.getChannelData(channelIndex));
@@ -7158,7 +7058,7 @@ function extractPeaks(audio, peakCount = constants/* CLIENT_DECODE_PEAK_COUNT */
         }
       }
     }
-    peaks[i] = Math.min(constants/* PEAK_UNIT_MAX */.i8, Math.max(constants/* PEAK_UNIT_MIN */.mJ, maxAbs));
+    peaks[i] = Math.min(_constants__WEBPACK_IMPORTED_MODULE_1__/* .PEAK_UNIT_MAX */ .i8, Math.max(_constants__WEBPACK_IMPORTED_MODULE_1__/* .PEAK_UNIT_MIN */ .mJ, maxAbs));
   }
   return peaks;
 }
@@ -7167,13 +7067,13 @@ function extractPeaks(audio, peakCount = constants/* CLIENT_DECODE_PEAK_COUNT */
  * Decode compressed audio and extract unit peaks while the AudioBuffer is live.
  * Does not attach a media element or fetch a URL. Does not copy channel data.
  */
-async function decodeToPeaks(arrayBuffer, signal, peakCount = constants/* CLIENT_DECODE_PEAK_COUNT */.f3) {
+async function decodeToPeaks(arrayBuffer, signal, peakCount = _constants__WEBPACK_IMPORTED_MODULE_1__/* .CLIENT_DECODE_PEAK_COUNT */ .f3) {
   if (signal?.aborted) {
     throw createAbortError();
   }
   const AudioContextConstructor = getAudioContextConstructor();
   if (!AudioContextConstructor) {
-    throw new WaveformLoadError('DECODE_FAILED', 'AudioContext is not available');
+    throw new _createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__/* .WaveformLoadError */ .oz('DECODE_FAILED', 'AudioContext is not available');
   }
   const context = new AudioContextConstructor();
   try {
@@ -7181,15 +7081,15 @@ async function decodeToPeaks(arrayBuffer, signal, peakCount = constants/* CLIENT
     if (signal?.aborted) {
       throw createAbortError();
     }
-    const extractStarted = (0,util/* getCurrentTimeMs */.RU)();
+    const extractStarted = (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .getCurrentTimeMs */ .RU)();
     const peaks = extractPeaks(audioBuffer, peakCount);
     return {
       durationSec: audioBuffer.duration,
       peaks,
-      extractMs: (0,util/* getCurrentTimeMs */.RU)() - extractStarted
+      extractMs: (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .getCurrentTimeMs */ .RU)() - extractStarted
     };
   } catch (error) {
-    if (signal?.aborted || isAbortError(error)) {
+    if (signal?.aborted || (0,_createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__/* .isAbortError */ .zf)(error)) {
       throw createAbortError();
     }
     throw error;
@@ -7222,31 +7122,31 @@ async function runClientDecode(options) {
     };
   }
   const signal = options.signal ?? new AbortController().signal;
-  const decodeStarted = (0,util/* getCurrentTimeMs */.RU)();
+  const decodeStarted = (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .getCurrentTimeMs */ .RU)();
   let decodeOutput;
   try {
     decodeOutput = await options.decode(signal);
   } catch (error) {
-    if (signal.aborted || isAbortError(error)) {
+    if (signal.aborted || (0,_createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__/* .isAbortError */ .zf)(error)) {
       return {
         status: 'cancelled',
         isDecodeSkipped: false,
         timings: EMPTY_TIMINGS
       };
     }
-    const waveformError = errorFromUnknown(error, 'DECODE_FAILED');
+    const waveformError = (0,_createWaveformLoader__WEBPACK_IMPORTED_MODULE_2__/* .errorFromUnknown */ .Vq)(error, 'DECODE_FAILED');
     return {
       status: 'failed',
       error: waveformError,
-      retryable: validateWaveformPayload_isRetryableWaveformError(waveformError.code),
+      retryable: (0,_validateWaveformPayload__WEBPACK_IMPORTED_MODULE_3__/* .isRetryableWaveformError */ .Oe)(waveformError.code),
       isDecodeSkipped: false,
       timings: {
-        attemptMs: (0,util/* getCurrentTimeMs */.RU)() - decodeStarted,
+        attemptMs: (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .getCurrentTimeMs */ .RU)() - decodeStarted,
         extractMs: null
       }
     };
   }
-  const attemptMs = (0,util/* getCurrentTimeMs */.RU)() - decodeStarted;
+  const attemptMs = (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .getCurrentTimeMs */ .RU)() - decodeStarted;
   if (signal.aborted) {
     return {
       status: 'cancelled',
@@ -7257,8 +7157,8 @@ async function runClientDecode(options) {
       }
     };
   }
-  const validation = validateWaveformPayload_validateWaveformPayload({
-    version: constants/* WAVEFORM_PAYLOAD_VERSION */.sh,
+  const validation = (0,_validateWaveformPayload__WEBPACK_IMPORTED_MODULE_3__/* .validateWaveformPayload */ .a9)({
+    version: _constants__WEBPACK_IMPORTED_MODULE_1__/* .WAVEFORM_PAYLOAD_VERSION */ .sh,
     durationSec: options.durationSec ?? decodeOutput.durationSec,
     peaks: decodeOutput.peaks
   }, {
@@ -7268,7 +7168,7 @@ async function runClientDecode(options) {
     return {
       status: 'failed',
       error: validation.error,
-      retryable: validateWaveformPayload_isRetryableWaveformError(validation.error.code),
+      retryable: (0,_validateWaveformPayload__WEBPACK_IMPORTED_MODULE_3__/* .isRetryableWaveformError */ .Oe)(validation.error.code),
       isDecodeSkipped: false,
       timings: {
         attemptMs,
@@ -7305,6 +7205,193 @@ function loadPeaks(request) {
 
 /***/ },
 
+/***/ 1053
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Oe: () => (/* binding */ isRetryableWaveformError),
+/* harmony export */   Ze: () => (/* binding */ isPositiveFinite),
+/* harmony export */   a9: () => (/* binding */ validateWaveformPayload)
+/* harmony export */ });
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4929);
+
+const DEFAULT_PEAK_SCALE = 'unit';
+const DEFAULT_CHANNEL_POLICY = 'mono_max';
+const DEFAULT_ENVELOPE = 'peak';
+function fail(code, message, retryable = false) {
+  return {
+    ok: false,
+    error: {
+      code,
+      message
+    },
+    retryable
+  };
+}
+function isPositiveFinite(value) {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0;
+}
+function isPlainObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function payloadByteLength(raw) {
+  try {
+    const serialized = JSON.stringify(raw);
+    if (typeof Buffer !== 'undefined') {
+      return Buffer.byteLength(serialized, 'utf8');
+    }
+    if (typeof TextEncoder !== 'undefined') {
+      return new TextEncoder().encode(serialized).length;
+    }
+    return serialized.length;
+  } catch {
+    return Number.MAX_SAFE_INTEGER;
+  }
+}
+function readOptionalPolicy(raw, key, allowed) {
+  if (!(key in raw) || raw[key] === undefined) {
+    return undefined;
+  }
+  return raw[key] === allowed ? allowed : null;
+}
+function asWaveformPayloadV1(raw) {
+  const {
+    version,
+    durationSec,
+    peaks
+  } = raw;
+  if (version !== _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_PAYLOAD_VERSION */ .sh || typeof durationSec !== 'number' || !Array.isArray(peaks)) {
+    return null;
+  }
+  const peakScale = readOptionalPolicy(raw, 'peakScale', DEFAULT_PEAK_SCALE);
+  const channelPolicy = readOptionalPolicy(raw, 'channelPolicy', DEFAULT_CHANNEL_POLICY);
+  const envelope = readOptionalPolicy(raw, 'envelope', DEFAULT_ENVELOPE);
+  if (peakScale === null || channelPolicy === null || envelope === null) {
+    return null;
+  }
+  if ('channels' in raw && raw.channels !== undefined && raw.channels !== 1) {
+    return null;
+  }
+  return {
+    version: _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_PAYLOAD_VERSION */ .sh,
+    durationSec,
+    peaks: peaks,
+    peakScale: peakScale ?? DEFAULT_PEAK_SCALE,
+    channelPolicy: channelPolicy ?? DEFAULT_CHANNEL_POLICY,
+    envelope: envelope ?? DEFAULT_ENVELOPE,
+    channels: 1
+  };
+}
+function readPayloadObject(raw, maxPayloadBytes, isPayloadByteCheckSkipped = false) {
+  if (raw === null || raw === undefined) {
+    return fail('INVALID_PAYLOAD', 'Payload is null or undefined');
+  }
+  if (!isPayloadByteCheckSkipped) {
+    const byteLength = payloadByteLength(raw);
+    if (byteLength > maxPayloadBytes) {
+      return fail('PAYLOAD_TOO_LARGE', `Payload size ${byteLength} exceeds limit ${maxPayloadBytes}`);
+    }
+  }
+  if (!isPlainObject(raw)) {
+    return fail('INVALID_PAYLOAD', 'Payload must be an object');
+  }
+  return {
+    ok: true,
+    value: raw
+  };
+}
+function checkVersion(raw) {
+  if (raw.version === _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_PAYLOAD_VERSION */ .sh) {
+    return null;
+  }
+  const {
+    version
+  } = raw;
+  if (typeof version === 'number' && version > _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_PAYLOAD_VERSION */ .sh) {
+    return fail('UNSUPPORTED_VERSION', `Unsupported waveform version ${version}; max supported is ${_constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_PAYLOAD_VERSION */ .sh}`);
+  }
+  return fail('INVALID_PAYLOAD', 'Missing or invalid version field');
+}
+function checkDuration(payload, expectedDurationSec) {
+  if (!isPositiveFinite(payload.durationSec)) {
+    return fail('INVALID_DURATION', 'durationSec must be a positive finite number');
+  }
+  if (expectedDurationSec !== undefined && Number.isFinite(expectedDurationSec) && Math.abs(payload.durationSec - expectedDurationSec) > _constants__WEBPACK_IMPORTED_MODULE_0__/* .DURATION_MISMATCH_TOLERANCE_SEC */ .GQ) {
+    return fail('DURATION_MISMATCH', `Payload duration ${payload.durationSec}s differs from media duration ${expectedDurationSec}s`, true);
+  }
+  return null;
+}
+function normalizePeaks(peaks, maxPeakCount) {
+  if (peaks.length === 0) {
+    return fail('EMPTY_PEAKS', 'peaks array must not be empty');
+  }
+  if (peaks.length > maxPeakCount) {
+    return fail('PEAK_COUNT_EXCEEDED', `peaks length ${peaks.length} exceeds max ${maxPeakCount}`);
+  }
+  const normalized = new Float32Array(peaks.length);
+  for (let i = 0; i < peaks.length; i += 1) {
+    const value = peaks[i];
+    if (!Number.isFinite(value)) {
+      return fail('NON_FINITE_PEAK', `Peak at index ${i} is not finite`);
+    }
+    if (value < _constants__WEBPACK_IMPORTED_MODULE_0__/* .PEAK_UNIT_MIN */ .mJ || value > _constants__WEBPACK_IMPORTED_MODULE_0__/* .PEAK_UNIT_MAX */ .i8) {
+      return fail('PEAK_OUT_OF_RANGE', `Peak at index ${i} is outside [${_constants__WEBPACK_IMPORTED_MODULE_0__/* .PEAK_UNIT_MIN */ .mJ}, ${_constants__WEBPACK_IMPORTED_MODULE_0__/* .PEAK_UNIT_MAX */ .i8}]`);
+    }
+    normalized[i] = value;
+  }
+  return {
+    ok: true,
+    peaks: normalized
+  };
+}
+
+/**
+ * Validates a version-1 waveform payload and returns normalized peaks for rendering.
+ * Wire JSON requires version, durationSec, and peaks. sampleCount and source are ignored.
+ */
+function validateWaveformPayload(raw, options = {}) {
+  const maxPeakCount = options.maxPeakCount ?? _constants__WEBPACK_IMPORTED_MODULE_0__/* .MAX_PEAK_COUNT */ .FY;
+  const maxPayloadBytes = options.maxPayloadBytes ?? _constants__WEBPACK_IMPORTED_MODULE_0__/* .MAX_PAYLOAD_BYTES */ .qY;
+  const objectResult = readPayloadObject(raw, maxPayloadBytes, options.isPayloadByteCheckSkipped === true);
+  if (!objectResult.ok) {
+    return objectResult;
+  }
+  const versionFailure = checkVersion(objectResult.value);
+  if (versionFailure) {
+    return versionFailure;
+  }
+  const payload = asWaveformPayloadV1(objectResult.value);
+  if (!payload) {
+    return fail('INVALID_PAYLOAD', 'Payload failed structural validation');
+  }
+  const durationFailure = checkDuration(payload, options.expectedDurationSec);
+  if (durationFailure) {
+    return durationFailure;
+  }
+  const peaksResult = normalizePeaks(payload.peaks, maxPeakCount);
+  if (!peaksResult.ok) {
+    return peaksResult;
+  }
+  return {
+    ok: true,
+    payload: {
+      version: _constants__WEBPACK_IMPORTED_MODULE_0__/* .WAVEFORM_PAYLOAD_VERSION */ .sh,
+      durationSec: payload.durationSec,
+      peaks: peaksResult.peaks,
+      peakScale: payload.peakScale ?? DEFAULT_PEAK_SCALE,
+      channelPolicy: payload.channelPolicy ?? DEFAULT_CHANNEL_POLICY,
+      envelope: payload.envelope ?? DEFAULT_ENVELOPE
+    }
+  };
+}
+
+/** Maps validation / load failures to retry policy for loaders. */
+function isRetryableWaveformError(code) {
+  return code === 'DURATION_MISMATCH' || code === 'DECODE_FAILED' || code === 'LOAD_FAILED';
+}
+
+/***/ },
+
 /***/ 2485
 (module, exports) {
 
@@ -22968,7 +23055,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.88.0";
+const CLIENT_VERSION = "3.90.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -35653,6 +35740,12 @@ class MP3ControlsRoot {
     this.root.render(controls);
   }
 }
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/constants.ts
+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/validateWaveformPayload.ts
+var validateWaveformPayload = __webpack_require__(1053);
 ;// ./src/lib/viewers/media/MP3.scss
 // extracted by mini-css-extract-plugin
 
@@ -35667,6 +35760,11 @@ function MP3Viewer_toPrimitive(t, r) { if ("object" != typeof t || !t) return t;
 
 
 
+
+
+
+
+
 const CSS_CLASS_MP3 = 'bp-media-mp3';
 function createLoadFailedError(message) {
   const error = new Error(message);
@@ -35682,7 +35780,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     MP3Viewer_defineProperty(this, "handlePlayRequest", () => {
       this.userRequestedPlay = true;
       this.togglePlay();
-      if (this.isWaveformDecodeRetryPending && !this.hasUsedWaveformDecodePlayRetry) {
+      if (this.shouldRaceClientWaveformDecode() && this.isWaveformDecodeRetryPending && !this.hasUsedWaveformDecodePlayRetry) {
         this.hasUsedWaveformDecodePlayRetry = true;
         this.isWaveformDecodeRetryPending = false;
         this.startClientWaveformDecode();
@@ -35719,11 +35817,11 @@ class MP3Viewer extends media_MediaBaseViewer {
     });
     MP3Viewer_defineProperty(this, "handleCommentMarkerClick", marker => {
       this.hostSelectedMarkerId = marker.id;
-      this.pendingHostSelectedSeek = null;
+      this.pendingHostSelectedSeek = marker;
       if (this.mediaEl) {
         this.mediaEl.pause();
-        this.mediaEl.currentTime = marker.time;
       }
+      this.applyPendingHostSelectedSeek();
       // Overlay paints the ring from click optimism until the host re-emits selected.
       this.emit('comment_marker_select', {
         id: marker.id,
@@ -35755,11 +35853,16 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.wrapperEl.classList.add(CSS_CLASS_MP3);
     this.isAudioPlayerV2 = this.getIsAudioPlayerV2();
     this.waveformPeaks = [];
+    this.waveformPeaksSource = null;
+    this.waveformDurationSec = 0;
     if (this.isAudioPlayerV2) {
       this.wrapperEl.classList.add('bp-media--v2');
       this.mediaContainerEl.classList.add('bp-media-container--v2');
       this.ensureV2Controls();
       this.importWaveformDecode();
+      // Listen on the loading shell. The waveform is on
+      // screen before the audio blob is playable; getViewer() is still null.
+      this.bindCommentMarkersListener();
     }
 
     // Audio element
@@ -35767,6 +35870,13 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.mediaEl.setAttribute('preload', 'auto');
     this.commentMarkers = [];
   }
+  bindCommentMarkersListener() {
+    if (!this.isAudioPlayerV2) {
+      return;
+    }
+    this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
+    this.addListener('comment_markers', this.handleCommentMarkersUpdated);
+  }
 
   /**
    * Audio player v2 (waveform). Off unless the host enables `audioPlayerV2`
@@ -35775,7 +35885,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {boolean} whether v2 treatment is on
    */
   getIsAudioPlayerV2() {
-    return this.featureEnabled('audioPlayerV2.enabled') && this.useReactControls();
+    return this.featureEnabled(constants/* AUDIO_PLAYER_V2 */.Ku) && this.useReactControls();
   }
 
   /**
@@ -35807,6 +35917,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   fallbackToV1Controls() {
     this.isAudioPlayerV2 = false;
+    this.abortWaveformLoads();
     if (this.wrapperEl) {
       this.wrapperEl.classList.remove('bp-media--v2');
     }
@@ -35827,7 +35938,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   async importWaveformDecode() {
     if (!this.waveformDecodeImport) {
-      this.waveformDecodeImport = Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 546));
+      this.waveformDecodeImport = Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 8296));
     }
     try {
       return await this.waveformDecodeImport;
@@ -35842,7 +35953,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   destroy() {
     this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
-    this.abortClientWaveformDecode();
+    this.abortWaveformLoads();
     super.destroy();
   }
 
@@ -35852,6 +35963,7 @@ class MP3Viewer extends media_MediaBaseViewer {
   load() {
     if (this.isAudioPlayerV2) {
       this.showAudioLoadingShell();
+      this.startConversionWaveformLoad();
     }
     return super.load();
   }
@@ -35889,6 +36001,9 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @inheritdoc
    */
   loadeddataHandler() {
+    if (this.isAudioPlayerV2) {
+      this.dropConversionPeaksOnDurationMismatch();
+    }
     super.loadeddataHandler();
     if (!this.isAudioPlayerV2) {
       return;
@@ -35899,7 +36014,173 @@ class MP3Viewer extends media_MediaBaseViewer {
     if (this.userRequestedPlay) {
       this.play();
     }
-    this.startClientWaveformDecode();
+    if (this.shouldRaceClientWaveformDecode()) {
+      this.startClientWaveformDecode();
+    }
+  }
+
+  /**
+   * Client decode races conversion until some source applies peaks. Size and
+   * duration caps still apply. First source to apply peaks wins; later
+   * results are ignored.
+   *
+   * @return {boolean}
+   */
+  shouldRaceClientWaveformDecode() {
+    if (!this.isAudioPlayerV2 || this.destroyed || this.waveformPeaksSource) {
+      return false;
+    }
+    const compressedBytes = this.options.file?.size;
+    const durationSec = this.mediaEl?.duration;
+    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;
+  }
+
+  /**
+   * @param {number} durationSec
+   * @return {boolean}
+   */
+  isConversionDurationMismatch(durationSec) {
+    const mediaDuration = this.mediaEl?.duration;
+    return (0,validateWaveformPayload/* isPositiveFinite */.Ze)(mediaDuration) && (0,validateWaveformPayload/* isPositiveFinite */.Ze)(durationSec) && Math.abs(durationSec - mediaDuration) > waveform_constants/* DURATION_MISMATCH_TOLERANCE_SEC */.GQ;
+  }
+
+  /**
+   * Conversion JSON fetched before metadata skipped duration matching. Drop
+   * those peaks once media duration is known if they disagree.
+   *
+   * @return {void}
+   */
+  dropConversionPeaksOnDurationMismatch() {
+    if (this.waveformPeaksSource !== 'conversion' || !this.isConversionDurationMismatch(this.waveformDurationSec)) {
+      return;
+    }
+    this.waveformPeaks = [];
+    this.waveformPeaksSource = null;
+    this.waveformDurationSec = 0;
+    this.renderUI();
+  }
+
+  /**
+   * Poll the conversion waveform representation and fetch its JSON.
+   * Missing, failed, or unloadable conversion falls back to client decode
+   * when the file is under size and duration caps.
+   *
+   * @return {Promise<void>}
+   */
+  async startConversionWaveformLoad() {
+    if (!this.isAudioPlayerV2 || this.destroyed) {
+      return;
+    }
+    const {
+      file
+    } = this.options;
+    const waveform = file?.representations?.entries ? getRepresentation(file, constants/* WAVEFORM_REP_NAME */.u4) : null;
+    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) {
+      this.startClientWaveformDecode();
+      return;
+    }
+    this.abortConversionWaveformLoad();
+    this.waveformStatus = this.getRepStatus(waveform);
+    this.waveformStatus.removeListener('conversionpending', this.resetLoadTimeout);
+    const status = this.waveformStatus;
+    try {
+      await status.getPromise();
+      if (this.destroyed || this.waveformStatus !== status || this.waveformPeaksSource) {
+        return;
+      }
+      const result = await this.loadConversionWaveformPayload(template);
+      this.handleConversionWaveformResult(result, status);
+    } catch {
+      this.startClientWaveformDecode();
+    }
+  }
+
+  /**
+   * Fetch and validate conversion waveform JSON after the rep is ready.
+   * `{+asset_path}` is empty. Auth is a header, not a query token.
+   *
+   * @param {string} template - content URL template
+   * @return {Promise<import('./waveform/types').WaveformLoadState>}
+   */
+  loadConversionWaveformPayload(template) {
+    const url = this.createContentUrlV2(template);
+    const durationSec = this.mediaEl?.duration;
+    const source = (0,createWaveformLoader/* createWaveformLoader */.nR)(signal => this.api.get(url, {
+      headers: this.appendAuthHeader(),
+      signal
+    }), Number.isFinite(durationSec) ? {
+      expectedDurationSec: durationSec
+    } : {});
+    this.waveformSource = source;
+    return source.load();
+  }
+  abortWaveformLoads() {
+    this.abortConversionWaveformLoad();
+    this.abortClientWaveformDecode();
+  }
+  abortConversionWaveformLoad() {
+    if (this.waveformSource) {
+      this.waveformSource.abort();
+      this.waveformSource = null;
+    }
+    if (this.waveformStatus) {
+      this.waveformStatus.destroy();
+      this.waveformStatus = null;
+    }
+  }
+
+  /**
+   * First source to apply peaks wins. Later results are ignored.
+   *
+   * @param {'conversion'|'client'} source
+   * @param {{ peaks: ArrayLike<number>, durationSec?: number }} payload
+   * @return {boolean} true when this source claimed peaks
+   */
+  applyWaveformPeaks(source, payload) {
+    if (this.waveformPeaksSource) {
+      return false;
+    }
+    this.waveformPeaks = payload.peaks;
+    this.waveformPeaksSource = source;
+    this.isWaveformDecodeRetryPending = false;
+    if (source === 'conversion') {
+      this.waveformDurationSec = payload.durationSec;
+      this.abortClientWaveformDecode();
+    } else if (this.waveformSource) {
+      // RepStatus.destroy() does not reject getPromise().
+      this.waveformSource.abort();
+      this.waveformSource = null;
+    }
+    this.renderUI();
+    return true;
+  }
+
+  /**
+   * Apply conversion peaks when the load is still current. Ignored if client
+   * decode already applied peaks.
+   *
+   * @param {import('./waveform/types').WaveformLoadState} result
+   * @param {Object} status - RepStatus instance that started this load
+   * @return {void}
+   */
+  handleConversionWaveformResult(result, status) {
+    if (!result || this.destroyed || !this.isAudioPlayerV2 || this.waveformStatus !== status) {
+      return;
+    }
+    if (result.status !== 'ready') {
+      if (result.status !== 'cancelled') {
+        this.startClientWaveformDecode();
+      }
+      return;
+    }
+    if (this.isConversionDurationMismatch(result.payload.durationSec)) {
+      this.startClientWaveformDecode();
+      return;
+    }
+    this.applyWaveformPeaks('conversion', result.payload);
   }
   /**
    * Fetch compressed audio bytes for client decode. Prefers an already-fetched blob URL.
@@ -35940,16 +36221,19 @@ class MP3Viewer extends media_MediaBaseViewer {
   }
 
   /**
-   * Decode peaks in the background when the file is under size and duration caps.
-   * Does not block playback. Capped or failed decode keeps the placeholder waveform.
+   * Decode peaks in the background until conversion or client decode applies
+   * them, when the file is under size and duration caps. Does not block
+   * playback. First source to apply peaks wins.
    *
    * @return {Promise<void>}
    */
   async startClientWaveformDecode() {
-    if (!this.isAudioPlayerV2 || this.destroyed) {
+    if (!this.shouldRaceClientWaveformDecode()) {
+      return;
+    }
+    if (this.waveformDecodeController && !this.waveformDecodeController.signal.aborted) {
       return;
     }
-    this.abortClientWaveformDecode();
     const controller = new AbortController();
     this.waveformDecodeController = controller;
     const {
@@ -35998,9 +36282,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       return;
     }
     if (result.status === 'ready') {
-      this.waveformPeaks = result.payload.peaks;
-      this.isWaveformDecodeRetryPending = false;
-      this.renderUI();
+      this.applyWaveformPeaks('client', result.payload);
       return;
     }
     if (result.status === 'cancelled') {
@@ -36030,10 +36312,7 @@ class MP3Viewer extends media_MediaBaseViewer {
         containerEl: this.mediaContainerEl
       });
     }
-    if (this.isAudioPlayerV2) {
-      this.removeListener('comment_markers', this.handleCommentMarkersUpdated);
-      this.addListener('comment_markers', this.handleCommentMarkersUpdated);
-    }
+    this.bindCommentMarkersListener();
     this.renderUI();
   }
   /**
@@ -36061,11 +36340,13 @@ class MP3Viewer extends media_MediaBaseViewer {
     if (!this.controls) {
       return;
     }
+    const mediaDuration = this.mediaEl.duration;
+    const durationTime = typeof mediaDuration === 'number' && mediaDuration > 0 ? mediaDuration : this.waveformDurationSec;
     const sharedProps = {
       autoplay: this.isAutoplayEnabled(),
       bufferedRange: this.mediaEl.buffered,
       currentTime: this.mediaEl.currentTime,
-      durationTime: this.mediaEl.duration,
+      durationTime,
       isPlaying: !this.mediaEl.paused,
       movePlayback: this.movePlayback,
       onAutoplayChange: this.setAutoplay,
@@ -37718,8 +37999,6 @@ function VideoControls({
 }
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
 var TimestampControl = __webpack_require__(3904);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/buildClusters.ts
-var buildClusters = __webpack_require__(2400);
 // EXTERNAL MODULE: ./src/lib/viewers/media/formatTimecode.ts
 var formatTimecode = __webpack_require__(4179);
 ;// ./src/lib/viewers/controls/media/FilmstripV2.scss
@@ -37800,18 +38079,89 @@ function FilmstripV2({
     "data-testid": "bp-FilmstripV2-time"
   }, fps ? (0,formatTimecode/* default */.A)(time, fps) : (0,DurationLabels/* formatTime */.f)(time)));
 }
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx + 1 modules
-var MarkerAvatarStack = __webpack_require__(9232);
-;// ./src/lib/viewers/controls/media/MarkerCluster.scss
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/useDismissableMarkerSelection.ts
+var useDismissableMarkerSelection = __webpack_require__(2378);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/helpers/buildClusters.ts
+var buildClusters = __webpack_require__(5510);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx + 1 modules
+var MarkerAvatar = __webpack_require__(2040);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatarStack.tsx + 1 modules
+var MarkerAvatarStack = __webpack_require__(308);
+;// ./src/lib/viewers/controls/media/markers/helpers/onMarkerGroupTickClick.ts
+/** Click the range/group tick: first member, unless one is already selected. */
+function onMarkerGroupTickClick(event, markers, selectedId, onMarkerClick) {
+  event.stopPropagation();
+  if (selectedId && markers.some(marker => marker.id === selectedId)) {
+    return;
+  }
+  onMarkerClick?.(markers[0]);
+}
+;// ./src/lib/viewers/controls/media/markers/MarkerTick.tsx
+
+
+
+
+function MarkerTick({
+  markers,
+  onMarkerClick,
+  position,
+  selectedId
+}) {
+  const isGroup = markers.length > 1;
+  const isSelected = !isGroup && markers[0].id === selectedId;
+  const className = `bp-TimeControlsV2-marker${isGroup ? ' bp-TimeControlsV2-marker--group' : ''}${isSelected ? ' bp-TimeControlsV2-marker--selected' : ''}`;
+  const style = {
+    left: `${position}%`
+  };
+  if (isGroup) {
+    return /*#__PURE__*/external_react_["default"].createElement("div", {
+      className: className,
+      "data-bp-marker-group": "",
+      "data-testid": "bp-time-controls-marker",
+      style: style
+    }, /*#__PURE__*/external_react_["default"].createElement("button", {
+      "aria-label": "Comment marker",
+      className: "bp-TimeControlsV2-marker-tick",
+      "data-resin-target": "commentMarkerGroup",
+      onClick: e => onMarkerGroupTickClick(e, markers, selectedId, onMarkerClick),
+      type: "button"
+    }), /*#__PURE__*/external_react_["default"].createElement(MarkerAvatarStack/* default */.A, {
+      markers: markers,
+      onMarkerClick: onMarkerClick,
+      selectedId: selectedId
+    }));
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("button", {
+    "aria-label": "Comment marker",
+    "aria-pressed": isSelected,
+    className: className,
+    "data-bp-marker-selected": isSelected ? '' : undefined,
+    "data-resin-target": "commentMarker",
+    "data-testid": "bp-time-controls-marker",
+    onClick: e => {
+      e.stopPropagation();
+      onMarkerClick?.(markers[0]);
+    },
+    style: style,
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
+    avatarUrl: markers[0].avatarUrl,
+    colorIndex: markers[0].colorIndex,
+    initial: markers[0].initial
+  }));
+}
+;// ./src/lib/viewers/controls/media/markers/MarkerCluster.scss
 // extracted by mini-css-extract-plugin
 
-;// ./src/lib/viewers/controls/media/MarkerCluster.tsx
+;// ./src/lib/viewers/controls/media/markers/MarkerCluster.tsx
+
 
 
 
 function MarkerCluster({
   cluster,
-  onMarkerClick
+  onMarkerClick,
+  selectedId
 }) {
   const {
     markers,
@@ -37824,54 +38174,19 @@ function MarkerCluster({
   };
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MarkerCluster",
+    "data-bp-marker-group": "",
     "data-testid": "bp-marker-cluster",
     style: style
   }, /*#__PURE__*/external_react_["default"].createElement("button", {
     "aria-label": "Comment marker",
     className: "bp-MarkerCluster-tick",
     "data-resin-target": "commentMarkerCluster",
-    onClick: e => {
-      e.stopPropagation();
-      onMarkerClick?.(markers[0]);
-    },
+    onClick: e => onMarkerGroupTickClick(e, markers, selectedId, onMarkerClick),
     type: "button"
   }), /*#__PURE__*/external_react_["default"].createElement(MarkerAvatarStack/* default */.A, {
     markers: markers,
-    onMarkerClick: onMarkerClick
-  }));
-}
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MarkerAvatar.tsx + 1 modules
-var MarkerAvatar = __webpack_require__(3524);
-;// ./src/lib/viewers/controls/media/MarkerTick.tsx
-
-
-
-function MarkerTick({
-  markers,
-  onMarkerClick,
-  position
-}) {
-  const isGroup = markers.length > 1;
-  return /*#__PURE__*/external_react_["default"].createElement("button", {
-    "aria-label": "Comment marker",
-    className: `bp-TimeControlsV2-marker${isGroup ? ' bp-TimeControlsV2-marker--group' : ''}`,
-    "data-resin-target": "commentMarker",
-    "data-testid": "bp-time-controls-marker",
-    onClick: e => {
-      e.stopPropagation();
-      onMarkerClick?.(markers[0]);
-    },
-    style: {
-      left: `${position}%`
-    },
-    type: "button"
-  }, isGroup ? /*#__PURE__*/external_react_["default"].createElement(MarkerAvatarStack/* default */.A, {
-    markers: markers,
-    onMarkerClick: onMarkerClick
-  }) : /*#__PURE__*/external_react_["default"].createElement(MarkerAvatar/* default */.A, {
-    avatarUrl: markers[0].avatarUrl,
-    colorIndex: markers[0].colorIndex,
-    initial: markers[0].initial
+    onMarkerClick: onMarkerClick,
+    selectedId: selectedId
   }));
 }
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
@@ -37889,8 +38204,6 @@ var utils = __webpack_require__(5346);
 
 
 
-
-
 const TRACK_COLOR_BUFFERED = 'rgb(127, 127, 127)';
 const TRACK_COLOR_UNPLAYED = 'rgb(85, 85, 85)';
 function TimeControlsV2({
@@ -37911,6 +38224,12 @@ function TimeControlsV2({
   const [hoverTime, setHoverTime] = external_react_["default"].useState(0);
   const [trackWidth, setTrackWidth] = external_react_["default"].useState(0);
   const scrubberRef = external_react_["default"].useRef(null);
+  const hostSelectedId = external_react_["default"].useMemo(() => commentMarkers.find(marker => marker.isSelected)?.id ?? null, [commentMarkers]);
+  const {
+    containerRef,
+    selectMarker,
+    selectedId
+  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId);
   const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
   const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
   const currentPercentage = (0,utils/* percent */.K)(currentValue, durationValue);
@@ -37928,6 +38247,10 @@ function TimeControlsV2({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
+  const handleMarkerClick = external_react_["default"].useCallback(marker => {
+    selectMarker(marker.id);
+    onCommentMarkerClick?.(marker);
+  }, [onCommentMarkerClick, selectMarker]);
   const clusters = external_react_["default"].useMemo(() => (0,buildClusters/* default */.A)(commentMarkers, durationValue, trackWidth), [commentMarkers, durationValue, trackWidth]);
   const trackMask = external_react_["default"].useMemo(() => {
     if (durationValue <= 0 || clusters.length === 0) return undefined;
@@ -37955,6 +38278,7 @@ function TimeControlsV2({
     setHoverTime(newTime);
   };
   return /*#__PURE__*/external_react_["default"].createElement("div", {
+    ref: containerRef,
     className: "bp-TimeControlsV2",
     "data-testid": "bp-time-controls-v2"
   }, !!filmstripInterval && /*#__PURE__*/external_react_["default"].createElement(FilmstripV2, {
@@ -37990,12 +38314,14 @@ function TimeControlsV2({
   }), durationValue > 0 && clusters.map(cluster => cluster.isSinglePoint ? /*#__PURE__*/external_react_["default"].createElement(MarkerTick, {
     key: cluster.id,
     markers: cluster.markers,
-    onMarkerClick: onCommentMarkerClick,
-    position: cluster.leftPercent
+    onMarkerClick: handleMarkerClick,
+    position: cluster.leftPercent,
+    selectedId: selectedId
   }) : /*#__PURE__*/external_react_["default"].createElement(MarkerCluster, {
     key: cluster.id,
     cluster: cluster,
-    onMarkerClick: onCommentMarkerClick
+    onMarkerClick: handleMarkerClick,
+    selectedId: selectedId
   }))));
 }
 ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
@@ -54252,8 +54578,12 @@ class Preview extends (events_default()) {
     if (isDash && isFeatureEnabled(this.options.features, constants/* AI_TRANSCRIPTION_FOR_VIDEO_SUBTITLES */.Iu)) {
       videoHint += constants/* X_REP_HINT_VIDEO_DASH_EXTRACTED_TEXT */.xU;
     }
+    let hints = `${constants/* X_REP_HINT_BASE */.pl}${constants/* X_REP_HINT_DOC_THUMBNAIL */.nC}${constants/* X_REP_HINT_IMAGE */.h3}${videoHint}`;
+    if (isFeatureEnabled(this.options.features, constants/* AUDIO_PLAYER_V2 */.Ku)) {
+      hints += constants/* X_REP_HINT_WAVEFORM */.jr;
+    }
     const headers = {
-      'X-Rep-Hints': `${constants/* X_REP_HINT_BASE */.pl}${constants/* X_REP_HINT_DOC_THUMBNAIL */.nC}${constants/* X_REP_HINT_IMAGE */.h3}${videoHint}`
+      'X-Rep-Hints': hints
     };
     return (0,util/* getHeaders */.dJ)(headers, token || this.options.token, this.options.sharedLink, this.options.sharedLinkPassword);
   }