npm - box-content-preview - Versions diffs - 3.95.0 → 3.97.0 - Mend

box-content-preview 3.95.0 → 3.97.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
 [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
-[![version](https://img.shields.io/badge/version-v3.95.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
+[![version](https://img.shields.io/badge/version-v3.97.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
 [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
 # [Box Content Preview](https://developer.box.com/docs/box-content-preview)
@@ -22,11 +22,11 @@ We encourage all users to update their applications to utilize modern browsers f
 ## Current Version
-- Version: v3.95.0
+- Version: v3.97.0
 - Locale: en-US
-https://cdn01.boxcdn.net/platform/preview/3.95.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.95.0/en-US/preview.css
+https://cdn01.boxcdn.net/platform/preview/3.97.0/en-US/preview.js
+https://cdn01.boxcdn.net/platform/preview/3.97.0/en-US/preview.css
 ## Supported Locales
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
     <title>Box Content Preview Demo</title>
     <!-- Latest version of Preview SDK for your locale -->
-    <script src="https://cdn01.boxcdn.net/platform/preview/3.95.0/en-US/preview.js"></script>
+    <script src="https://cdn01.boxcdn.net/platform/preview/3.97.0/en-US/preview.js"></script>
     <link
       rel="stylesheet"
-      href="https://cdn01.boxcdn.net/platform/preview/3.95.0/en-US/preview.css"
+      href="https://cdn01.boxcdn.net/platform/preview/3.97.0/en-US/preview.css"
     />
   </head>
   <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
 1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
-- Check out a specific version with `git checkout v3.95.0`
+- Check out a specific version with `git checkout v3.97.0`
 - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
 2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`

package/dist/lib/index.css CHANGED Viewed

@@ -61,6 +61,7 @@
 .bp-MarkerAvatarStack{position:absolute;bottom:calc(100% + 4px);left:50%;display:flex;align-items:center;transform:translateX(-50%)}.bp-MarkerAvatarStack-item{position:relative;flex-shrink:0;box-sizing:content-box;width:20px;height:20px;padding:0;background:none;border:0;border-radius:50%;outline:none;overflow:visible;cursor:pointer;appearance:none;transition:margin 150ms}.bp-MarkerAvatarStack-item:focus,.bp-MarkerAvatarStack-item:focus-visible{outline:none}.bp-MarkerAvatarStack-item:not(:first-child){margin-left:var(--bp-marker-stack-overlap, -10px)}.bp-MarkerAvatarStack-item .bp-MarkerAvatar{position:absolute;top:50%;bottom:auto;left:50%;display:block;transform:translate(-50%, -50%);transform-origin:center center}.bp-MarkerAvatarStack-item:hover,.bp-MarkerAvatarStack-item:focus-visible{z-index:3}:is(.bp-WaveformCommentMarkers-marker--group,.bp-TimeControlsV2-marker--group,.bp-MarkerCluster):is(:hover,:has(.bp-MarkerAvatarStack-item:focus-visible)) .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-MarkerAvatarStack-overflow{cursor:pointer}.bp-MarkerAvatarStack-overflowBadge{background-color:#383838;color:#fff}.bp-MarkerAvatarStack-overflowBadge .bp-MarkerAvatar-initial{color:#fff}
 .bp-WaveformCommentMarkers{position:absolute;top:-2px;right:0;left:0;z-index:4;box-sizing:border-box;height:24px;padding:0 60px;overflow:visible;pointer-events:auto}.bp-WaveformCommentMarkers--zoomed,.bp-WaveformCommentMarkers--tape{padding:0;overflow:clip visible}.bp-WaveformCommentMarkers--tape{top:auto;bottom:100%;margin-bottom:12px}.bp-WaveformCommentMarkers-track{position:relative;width:100%;height:100%;overflow:visible}.bp-WaveformCommentMarkers--zoomed .bp-WaveformCommentMarkers-track,.bp-WaveformCommentMarkers--tape .bp-WaveformCommentMarkers-track{overflow:clip visible}.bp-WaveformCommentMarkers-marker{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;background:none;border:0;border-radius:50%;transform:translate(-50%, -50%);cursor:pointer;appearance:none;pointer-events:auto;overflow:visible;outline:none;transition:box-shadow 150ms}.bp-WaveformCommentMarkers-marker:focus,.bp-WaveformCommentMarkers-marker:focus-visible{outline:none}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar{overflow:visible;isolation:isolate;cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar img{cursor:pointer}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{position:absolute;z-index:1;inset:0;background:#000;border-radius:50%;opacity:.4;pointer-events:none;content:"";transition:opacity 150ms}.bp-WaveformCommentMarkers-marker>.bp-MarkerAvatar{position:relative;bottom:auto;left:auto;transform:none;transform-origin:center center}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge),.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack .bp-MarkerAvatar:not(.bp-MarkerAvatarStack-overflowBadge){background-color:#000}.bp-WaveformCommentMarkers-marker .bp-MarkerAvatarStack{position:relative;bottom:auto;left:auto;transform:none}.bp-WaveformCommentMarkers-marker--group{width:auto}.bp-WaveformView:hover~.bp-WaveformCommentMarkers .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers:hover .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers:has(:focus-visible) .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers-marker:not(.bp-WaveformCommentMarkers-marker--group).bp-WaveformCommentMarkers-marker--selected .bp-MarkerAvatar::after,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item--selected .bp-MarkerAvatar::after{opacity:0}.bp-WaveformCommentMarkers-marker--selected{z-index:3}.bp-WaveformCommentMarkers-marker:hover,.bp-WaveformCommentMarkers-marker:focus-within{z-index:4}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item{cursor:pointer;transition:margin 150ms}.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:hover,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item:focus-visible{z-index:3}@media(prefers-reduced-motion: reduce){.bp-WaveformCommentMarkers-marker,.bp-WaveformCommentMarkers .bp-MarkerAvatarStack-item,.bp-WaveformCommentMarkers-marker .bp-MarkerAvatar::after{transition:none}}
 .bp-WaveformGeneratingIndicator{display:flex;gap:4px;align-items:center;height:48px;padding:8px 16px 8px 12px;pointer-events:none}.bp-WaveformGeneratingIndicator-bars{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px}.bp-WaveformGeneratingIndicator-bar{width:2px;height:10px;background:rgba(255,255,255,.3);border-radius:6px;animation:bp-WaveformGeneratingIndicator-pulse .66s ease-in-out infinite}.bp-WaveformGeneratingIndicator-bar:nth-child(2){margin-left:2px;animation-delay:.1s}.bp-WaveformGeneratingIndicator-bar:last-child{margin-left:2px;animation-delay:.2s}.bp-WaveformGeneratingIndicator-label{color:#fff;font-weight:normal;font-size:14px;line-height:22px;white-space:nowrap}@keyframes bp-WaveformGeneratingIndicator-pulse{0%,80%,100%{background:rgba(255,255,255,.3);transform:scaleY(1.2)}40%{background:#fff;transform:scaleY(1.6)}}@media(prefers-reduced-motion: reduce){.bp-WaveformGeneratingIndicator-bar{animation:none;background:#fff;transform:none}}
+.bp-WaveformShuttle{position:absolute;top:48px;left:50%;z-index:6;display:flex;gap:4px;align-items:center;height:48px;padding:8px 16px;color:#fff;background:rgba(255,255,255,.1);border-radius:24px;box-shadow:0 2px 12px rgba(0,0,0,.08);transform:translateX(-50%);backdrop-filter:blur(60px);pointer-events:none;-webkit-user-select:none;user-select:none}.bp-WaveformShuttle-glyph{display:block;flex:0 0 auto;width:19px;height:11px}.bp-WaveformShuttle.bp-is-reverse .bp-WaveformShuttle-glyph{transform:scaleX(-1)}.bp-WaveformShuttle-rate{font-weight:500;font-size:14px;line-height:22px;white-space:nowrap}
 .bp-WaveformRange{position:absolute;inset:0;z-index:2;pointer-events:none}.bp-WaveformRange-region{position:absolute;top:50%;box-sizing:border-box;height:150px;pointer-events:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);border-radius:10px;box-shadow:0 0 0 1px #222;transform:translateY(-50%);transition:border-width 100ms ease,border-color 100ms ease}.bp-WaveformRange--highlight .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle:hover) .bp-WaveformRange-region,.bp-WaveformRange:has(.bp-WaveformRange-handle--dragging) .bp-WaveformRange-region{border-width:2px;border-color:#fff}.bp-WaveformRange-handle{position:absolute;top:50%;z-index:1;width:24px;height:150px;pointer-events:auto;cursor:ew-resize;touch-action:none;transform:translate(-50%, -50%)}.bp-WaveformRange-handle--end{z-index:2}.bp-WaveformRange-handleGrip{position:absolute;top:50%;left:50%;width:8px;height:20px;background:#fff;border:1px solid #222;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translate(-50%, -50%) scale(0.5);transition:opacity 100ms ease-in,transform 100ms ease-in}.bp-WaveformRange-handle:hover .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle:focus-visible .bp-WaveformRange-handleGrip,.bp-WaveformRange-handle--dragging .bp-WaveformRange-handleGrip{opacity:1;transform:translate(-50%, -50%) scale(1);transition:opacity 150ms ease-out,transform 150ms ease-out}.bp-WaveformRange-comment{position:absolute;top:calc(50% - 75px);z-index:5;display:inline-flex;gap:8px;align-items:center;justify-content:center;box-sizing:border-box;height:48px;padding:8px 14px;color:rgba(255,255,255,.8);font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:22px;letter-spacing:.1px;white-space:nowrap;background:rgba(0,0,0,.8);border:0;backdrop-filter:blur(12px);border-radius:46px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12);transform:translate(-50%, calc(-100% - 36px));cursor:pointer;appearance:none;pointer-events:auto}.bp-WaveformRange-commentIcon{display:block;flex:0 0 auto;width:20px;height:20px}.bp-WaveformView--tape .bp-WaveformRange-comment{top:calc(50% - (100% + 10px) / 2)}.bp-WaveformRange-tooltip{position:absolute;top:100%;z-index:3;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformRange-tooltipTime{padding:4px 10px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:rgba(34,34,34,.92);border:1px solid rgba(255,255,255,.18);border-radius:8px}@media(prefers-reduced-motion: reduce){.bp-WaveformRange-region,.bp-WaveformRange-handleGrip{transition:none}}
 .bp-WaveformView{box-sizing:border-box;width:100%;height:206px;min-height:206px;padding:0 60px;overflow:visible;background:none;-webkit-tap-highlight-color:transparent}.bp-WaveformView.bp-WaveformView--zoomed,.bp-WaveformView.bp-WaveformView--tape{padding:0;touch-action:none}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas{overflow:hidden;mask-image:linear-gradient(to right, transparent, #000 92px, #000 calc(100% - 92px), transparent)}.bp-WaveformView.bp-WaveformView--zoomed .bp-WaveformView-canvas>*::part(scroll),.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){overscroll-behavior-x:none}.bp-WaveformView.bp-WaveformView--tape{flex:1 1 auto;height:100%;min-height:0}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas{height:100%}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-canvas>*::part(scroll){scrollbar-width:none}.bp-WaveformView.bp-WaveformView--tape .bp-WaveformView-playhead,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-region,.bp-WaveformView.bp-WaveformView--tape .bp-WaveformRange-handle{height:calc(100% + 10px)}.bp-WaveformView-track{position:relative;display:flex;align-items:center;width:100%;height:100%;cursor:pointer}.bp-WaveformView-canvas{z-index:0;width:100%;height:140px}.bp-WaveformView-playhead{position:absolute;top:50%;left:0;z-index:1;width:2px;height:150px;pointer-events:none;background:linear-gradient(#2487ff, #006bed);border-radius:1px;box-shadow:0 0 0 1px #222,0 0 10px 0 rgba(36,135,255,.3);transform:translate(-50%, -50%)}.bp-WaveformView-hover{position:absolute;top:100%;z-index:2;margin-top:4px;pointer-events:none;transform:translateX(-50%)}.bp-WaveformView-hover--tape{top:-24px;left:50%;z-index:5;margin-top:0;transform:translate(-50%, -50%)}.bp-WaveformView-hoverTime{padding:4px 10px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:rgba(34,34,34,.92);border:1px solid rgba(255,255,255,.18);border-radius:8px}.bp-WaveformView--inert{pointer-events:none}.bp-WaveformView--inert .bp-WaveformView-track{cursor:default}.bp-WaveformView--inert .bp-WaveformRange-handle,.bp-WaveformView--inert .bp-WaveformRange-comment{pointer-events:none;cursor:default}.bp-WaveformView:not(:hover) .bp-WaveformRange:not(.bp-WaveformRange--persist){opacity:.4}
 .bp-SliderControl{outline:0;position:relative;cursor:pointer}.bp-SliderControl:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SliderControl:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-SliderControl:focus:not(:focus-visible){box-shadow:none}.bp-SliderControl-thumb{position:absolute;top:calc(50% - 6px);width:12px;height:12px;margin-left:-6px;background:#0061d5;border:0;border-radius:12px;cursor:pointer}.bp-SliderControl-track{position:absolute;inset:0;height:3px;margin:auto 3px;background:transparent linear-gradient(#fff, #fff) no-repeat center border-box}

package/dist/lib/index.js CHANGED Viewed

@@ -314,6 +314,7 @@ class PreviewError extends Error {
 /* harmony export */   Ci: () => (/* binding */ CLASS_BOX_PREVIEW_VIDEO_PRELOAD_PLAY_OVERLAY),
 /* harmony export */   D4: () => (/* binding */ CLASS_ANNOTATIONS_VIDEO_FTUX_CURSOR_SEEN),
 /* harmony export */   EP: () => (/* binding */ ORIGINAL_REP_NAME),
+/* harmony export */   Ed: () => (/* binding */ BLUEPRINT_MIGRATION_SUPPORTING_UI),
 /* harmony export */   Ev: () => (/* binding */ BROWSERS),
 /* harmony export */   FD: () => (/* binding */ SELECTOR_BOX_PREVIEW_LOGO_DEFAULT),
 /* harmony export */   GA: () => (/* binding */ ANNOTATOR_EVENT),
@@ -337,6 +338,7 @@ class PreviewError extends Error {
 /* harmony export */   Mi: () => (/* binding */ PDFJS_CSS_UNITS),
 /* harmony export */   Mj: () => (/* binding */ CLASS_BOX_PREVIEW_THUMBNAILS_CLOSE_ACTIVE),
 /* harmony export */   N7: () => (/* binding */ DISCOVERABILITY_ATTRIBUTE),
+/* harmony export */   OQ: () => (/* binding */ BLUEPRINT_MIGRATION_CONTROLS_BAR),
 /* harmony export */   OW: () => (/* binding */ PRELOAD_REP_NAME),
 /* harmony export */   Oo: () => (/* binding */ CLASS_ANNOTATIONS_CREATE_REGION),
 /* harmony export */   P8: () => (/* binding */ CLASS_BOX_PREVIEW_HAS_HEADER),
@@ -367,9 +369,11 @@ class PreviewError extends Error {
 /* harmony export */   bE: () => (/* binding */ SELECTOR_BOX_PREVIEW_CONTENT),
 /* harmony export */   br: () => (/* binding */ FILE_OPTION_FILE_VERSION_ID),
 /* harmony export */   c6: () => (/* binding */ PRELOAD_PAGED_REP_NAME),
+/* harmony export */   cA: () => (/* binding */ BLUEPRINT_MIGRATION_ARCHIVE),
 /* harmony export */   cP: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_VIDEO),
 /* harmony export */   cR: () => (/* binding */ TEXT_STATIC_ASSETS_VERSION),
 /* harmony export */   cZ: () => (/* binding */ CLASS_ANNOTATIONS_DISCOVERABLE),
+/* harmony export */   dR: () => (/* binding */ BLUEPRINT_MIGRATION_MEDIA_CONTROLS),
 /* harmony export */   eA: () => (/* binding */ SUBTITLES_OFF),
 /* harmony export */   eF: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_CONTENT),
 /* harmony export */   eM: () => (/* binding */ CLASS_BOX_PREVIEW_HAS_NAVIGATION),
@@ -525,6 +529,13 @@ 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';
+// One per wave of the Blueprint migration. Each is reported as its own metric dimension so a
+// dashboard can compare a wave's timings with its flag on against the same wave with it off.
+const BLUEPRINT_MIGRATION_ARCHIVE = 'blueprintMigrationArchive.enabled';
+const BLUEPRINT_MIGRATION_CONTROLS_BAR = 'blueprintMigrationControlsBar.enabled';
+const BLUEPRINT_MIGRATION_MEDIA_CONTROLS = 'blueprintMigrationMediaControls.enabled';
+const BLUEPRINT_MIGRATION_SUPPORTING_UI = 'blueprintMigrationSupportingUi.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
@@ -1018,7 +1029,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.95.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.97.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 = {};
@@ -4609,7 +4620,7 @@ function getPdfjsWorkerSrc() {
 /***/ },
-/***/ 8862
+/***/ 2460
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
@@ -4735,43 +4746,8 @@ function morphPeaks(from, to, elapsedMs) {
 }
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/viewport.ts
 var waveform_viewport = __webpack_require__(772);
-;// ./src/lib/viewers/media/waveform/useTapeWaveform.ts
-function isIPadNavigator(tapeNavigator) {
-  return /iPad/i.test(tapeNavigator.userAgent || '') || tapeNavigator.platform === 'MacIntel' && (tapeNavigator.maxTouchPoints || 0) > 1;
-}
-function isCoarsePrimaryPointer(tapeWindow) {
-  return typeof tapeWindow.matchMedia === 'function' && tapeWindow.matchMedia(constants/* TAPE_POINTER_MEDIA_QUERY */.Le).matches;
-}
-/**
- * Tape vs desktop camera: coarse primary pointer (finger) or iPad
- * (including iPadOS reporting itself as Mac). Not width, not hasTouch,
- * not Browser.isMobile().
- */
-function isTapeWaveformInput(tapeWindow = window) {
-  return isCoarsePrimaryPointer(tapeWindow) || isIPadNavigator(tapeWindow.navigator);
-}
-/** Subscribe to the pointer media query; re-read the iPad heuristic on change. */
-function useTapeWaveform() {
-  const [isTape, setIsTape] = (0,external_react_.useState)(() => typeof window !== 'undefined' && isTapeWaveformInput(window));
-  (0,external_react_.useEffect)(() => {
-    if (typeof window.matchMedia !== 'function') {
-      setIsTape(isTapeWaveformInput(window));
-      return undefined;
-    }
-    const mediaQuery = window.matchMedia(constants/* TAPE_POINTER_MEDIA_QUERY */.Le);
-    const sync = () => {
-      setIsTape(isTapeWaveformInput(window));
-    };
-    sync();
-    mediaQuery.addEventListener('change', sync);
-    return () => mediaQuery.removeEventListener('change', sync);
-  }, []);
-  return isTape;
-}
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/useTapeWaveform.ts
+var useTapeWaveform = __webpack_require__(7308);
 // EXTERNAL MODULE: ./node_modules/classnames/index.js
 var classnames = __webpack_require__(2485);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
@@ -4962,14 +4938,62 @@ function WaveformGeneratingIndicator() {
     className: "bp-WaveformGeneratingIndicator-label"
   }, label));
 }
+;// ./src/lib/viewers/controls/icons/IconShuttleForward.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); }
+function IconShuttleForward(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", _extends({
+    "data-testid": "IconShuttleForward",
+    focusable: false,
+    height: 11,
+    viewBox: "35.57 37.51 37.79 21.24",
+    width: 19
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M35.5684 56.7422V39.502C35.5684 38.8275 35.7415 38.3262 36.0879 37.998C36.4342 37.6699 36.8398 37.5059 37.3047 37.5059C37.7331 37.5059 38.1523 37.6289 38.5625 37.875L53.0137 46.2832C53.5423 46.5931 53.9206 46.8848 54.1484 47.1582C54.3854 47.4316 54.5039 47.7552 54.5039 48.1289C54.5039 48.5026 54.3854 48.8262 54.1484 49.0996C53.9206 49.373 53.5423 49.6647 53.0137 49.9746L38.5625 58.3828C38.1523 58.6289 37.7331 58.752 37.3047 58.752C36.8398 58.752 36.4342 58.5879 36.0879 58.2598C35.7415 57.9316 35.5684 57.4258 35.5684 56.7422Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M54.4219 56.7422V39.502C54.4219 38.8275 54.5905 38.3262 54.9277 37.998C55.2741 37.6699 55.6842 37.5059 56.1582 37.5059C56.5866 37.5059 57.0059 37.6289 57.416 37.875L71.8672 46.2832C72.3958 46.5931 72.7741 46.8848 73.002 47.1582C73.2389 47.4316 73.3574 47.7552 73.3574 48.1289C73.3574 48.5026 73.2389 48.8262 73.002 49.0996C72.7741 49.373 72.3958 49.6647 71.8672 49.9746L57.416 58.3828C57.0059 58.6289 56.5866 58.752 56.1582 58.752C55.6842 58.752 55.2741 58.5879 54.9277 58.2598C54.5905 57.9316 54.4219 57.4258 54.4219 56.7422Z",
+    fill: "currentColor"
+  }));
+}
+/* harmony default export */ const icons_IconShuttleForward = (IconShuttleForward);
+// EXTERNAL MODULE: ./src/lib/util.js + 1 modules
+var util = __webpack_require__(4410);
+;// ./src/lib/viewers/media/waveform/WaveformShuttleIndicator.scss
+// extracted by mini-css-extract-plugin
+;// ./src/lib/viewers/media/waveform/WaveformShuttleIndicator.tsx
+function WaveformShuttleIndicator({
+  direction,
+  rate
+}) {
+  const isReverse = direction === 'reverse';
+  const label = (0,util/* replacePlaceholders */.Lb)(isReverse ? "Scanning backward at {1}x" : "Scanning forward at {1}x", [String(rate)]);
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    "aria-label": label,
+    className: classnames_default()('bp-WaveformShuttle', {
+      'bp-is-reverse': isReverse
+    }),
+    "data-testid": "bp-waveform-shuttle",
+    role: "status"
+  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconShuttleForward, {
+    "aria-hidden": "true",
+    className: "bp-WaveformShuttle-glyph"
+  }), /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-WaveformShuttle-rate"
+  }, `${rate}x`));
+}
 ;// external "react-dom"
 ;// ./node_modules/wavesurfer.js/dist/wavesurfer.esm.js
 function t(t,e,i,n){return new(i||(i=Promise))((function(s,r){function o(t){try{l(n.next(t))}catch(t){r(t)}}function a(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?s(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(o,a)}l((n=n.apply(t,e||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class e{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),null==i?void 0:i.once){const i=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}const i={decode:function(e,i){return t(this,void 0,void 0,(function*(){const t=new AudioContext({sampleRate:i});try{return yield t.decodeAudioData(e)}finally{"closed"!==t.state&&(yield t.close().catch((()=>{})))}}))},createBuffer:function(t,e){if(!t||0===t.length)throw new Error("channelData must be a non-empty array");if(e<=0)throw new Error("duration must be greater than 0");if("number"==typeof t[0]&&(t=[t]),!t[0]||0===t[0].length)throw new Error("channelData must contain non-empty channel arrays");!function(t){const e=t[0];if(e.some((t=>t>1||t<-1))){const i=e.length;let n=0;for(let t=0;t<i;t++){const i=Math.abs(e[t]);i>n&&(n=i)}for(const e of t)for(let t=0;t<i;t++)e[t]/=n}}(t);const i=t.map((t=>t instanceof Float32Array?t:Float32Array.from(t)));return{duration:e,length:i[0].length,sampleRate:i[0].length/e,numberOfChannels:i.length,getChannelData:t=>{const e=i[t];if(!e)throw new Error(`Channel ${t} not found`);return e},copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}};function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(n(t,e));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}function r(t){return t instanceof HTMLElement||"object"==typeof t&&null!==t&&t.nodeType===Node.ELEMENT_NODE&&"object"==typeof t.style}var o=Object.freeze({__proto__:null,createElement:s,default:s,isHTMLElement:r});const a={fetchBlob:function(e,i,n){return t(this,void 0,void 0,(function*(){var s;const r=yield fetch(e,n);if(r.status>=400)throw new Error(`Failed to fetch ${e}: ${r.status} (${r.statusText})`);return function(e,i,n){t(this,void 0,void 0,(function*(){var t;if(!e.body||!e.headers)return;const s=e.body.getReader(),r=Number(e.headers.get("Content-Length"))||0;let o=0;const a=()=>{s.cancel()};if(n){if(n.aborted)return void s.cancel();n.addEventListener("abort",a,{once:!0})}try{for(;;){const e=yield s.read();if(e.done)break;if(o+=(null===(t=e.value)||void 0===t?void 0:t.length)||0,r>0){const t=Math.round(o/r*100);i(t)}}}catch(t){if(t instanceof DOMException&&"AbortError"===t.name)return;console.warn("Progress tracking error:",t)}finally{n&&n.removeEventListener("abort",a)}}))}(r.clone(),i,null!==(s=null==n?void 0:n.signal)&&void 0!==s?s:void 0),r.blob()}))}};function l(t){let e=t;const i=new Set;return{get value(){return e},set(t){Object.is(e,t)||(e=t,i.forEach((t=>t(e))))},update(t){this.set(t(e))},subscribe:t=>(i.add(t),()=>i.delete(t))}}function h(t,e){const i=l(t());return e.forEach((e=>e.subscribe((()=>{const e=t();Object.is(i.value,e)||i.set(e)})))),{get value(){return i.value},subscribe:t=>i.subscribe(t)}}function c(t,e){let i;const n=()=>{i&&(i(),i=void 0),i=t()},s=e.map((t=>t.subscribe(n)));return n(),()=>{i&&(i(),i=void 0),s.forEach((t=>t()))}}class u extends e{get isPlayingSignal(){return this._isPlaying}get currentTimeSignal(){return this._currentTime}get durationSignal(){return this._duration}get volumeSignal(){return this._volume}get mutedSignal(){return this._muted}get playbackRateSignal(){return this._playbackRate}get seekingSignal(){return this._seeking}constructor(t){super(),this.isExternalMedia=!1,this._ownBlobUrl=null,this.reactiveMediaEventCleanups=[],t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),this._isPlaying=l(!1),this._currentTime=l(0),this._duration=l(0),this._volume=l(this.media.volume),this._muted=l(this.media.muted),this._playbackRate=l(this.media.playbackRate||1),this._seeking=l(!1),this.setupReactiveMediaEvents(),t.mediaControls&&(this.media.controls=!0),t.autoplay&&(this.media.autoplay=!0),null!=t.playbackRate&&this.onMediaEvent("canplay",(()=>{null!=t.playbackRate&&(this.media.playbackRate=t.playbackRate)}),{once:!0})}setupReactiveMediaEvents(){this.reactiveMediaEventCleanups.push(this.onMediaEvent("play",(()=>{this._isPlaying.set(!0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("pause",(()=>{this._isPlaying.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("ended",(()=>{this._isPlaying.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("timeupdate",(()=>{this._currentTime.set(this.media.currentTime)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("durationchange",(()=>{this._duration.set(this.media.duration||0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("loadedmetadata",(()=>{this._duration.set(this.media.duration||0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("seeking",(()=>{this._seeking.set(!0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("seeked",(()=>{this._seeking.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("volumechange",(()=>{this._volume.set(this.media.volume),this._muted.set(this.media.muted)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("ratechange",(()=>{this._playbackRate.set(this.media.playbackRate)})))}onMediaEvent(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e,i)}getSrc(){return this.media.currentSrc||this.media.src||""}revokeSrc(){this._ownBlobUrl&&(URL.revokeObjectURL(this._ownBlobUrl),this._ownBlobUrl=null)}canPlayType(t){return""!==this.media.canPlayType(t)}setSrc(t,e){const i=this.getSrc();if(t&&i===t)return;this.revokeSrc();const n=e instanceof Blob&&(this.canPlayType(e.type)||!t)?URL.createObjectURL(e):t;if(n!==t&&(this._ownBlobUrl=n),i&&this.media.removeAttribute("src"),n||t)try{this.media.src=n}catch(e){this.media.src=t}}destroy(){this.reactiveMediaEventCleanups.forEach((t=>t())),this.reactiveMediaEventCleanups=[],this.revokeSrc(),this.unAll(),this.isExternalMedia||(this.media.pause(),this.media.removeAttribute("src"),this.media.load(),this.media.remove())}setMediaElement(t){this.reactiveMediaEventCleanups.forEach((t=>t())),this.reactiveMediaEventCleanups=[],this.media=t,this.setupReactiveMediaEvents()}play(){return t(this,void 0,void 0,(function*(){try{return yield this.media.play()}catch(t){if(t instanceof DOMException&&"AbortError"===t.name)return;throw t}}))}pause(){this.media.pause()}isPlaying(){return!this.media.paused&&!this.media.ended}setTime(t){this.media.currentTime=Math.max(0,Math.min(t,this.getDuration()))}getDuration(){return this.media.duration}getCurrentTime(){return this.media.currentTime}getVolume(){return this.media.volume}setVolume(t){this.media.volume=t}getMuted(){return this.media.muted}setMuted(t){this.media.muted=t}getPlaybackRate(){return this.media.playbackRate}isSeeking(){return this.media.seeking}setPlaybackRate(t,e){null!=e&&(this.media.preservesPitch=e),this.media.playbackRate=t}getMediaElement(){return this.media}setSinkId(t){return this.media.setSinkId(t)}}function d({maxTop:t,maxBottom:e,halfHeight:i,vScale:n,barMinHeight:s=0,barAlign:r}){let o=Math.round(t*i*n);let a=o+Math.round(e*i*n)||1;return a<s&&(a=s,r||(o=a/2)),{topHeight:o,totalHeight:a}}function p({barAlign:t,halfHeight:e,topHeight:i,totalHeight:n,canvasHeight:s}){return"top"===t?0:"bottom"===t?s-n:e-i}function m(t,e,i){const n=e-t.left,s=i-t.top;return[n/t.width,s/t.height]}function g(t){return Boolean(t.barWidth||t.barGap||t.barAlign)}function f(t,e){if(!g(e))return t;const i=e.barWidth||.5,n=i+(e.barGap||i/2);return 0===n?t:Math.floor(t/n)*n}function v({scrollLeft:t,totalWidth:e,numCanvases:i}){if(0===e)return[0];const n=t/e,s=Math.floor(n*i);return[s-1,s,s+1]}function b(t){const e=t._cleanup;"function"==typeof e&&e()}function y(t){const e=l({scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,clientWidth:t.clientWidth}),i=h((()=>function(t){const{scrollLeft:e,scrollWidth:i,clientWidth:n}=t;if(0===i)return{startX:0,endX:1};const s=e/i,r=(e+n)/i;return{startX:Math.max(0,Math.min(1,s)),endX:Math.max(0,Math.min(1,r))}}(e.value)),[e]),n=h((()=>function(t){return{left:t.scrollLeft,right:t.scrollLeft+t.clientWidth}}(e.value)),[e]),s=()=>{e.set({scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,clientWidth:t.clientWidth})};t.addEventListener("scroll",s,{passive:!0});return{scrollData:e,percentages:i,bounds:n,cleanup:()=>{t.removeEventListener("scroll",s),b(e)}}}class C extends e{constructor(t,e){super(),this.timeouts=[],this.isScrollable=!1,this.audioData=null,this.resizeObserver=null,this.lastContainerWidth=0,this.isDragging=!1,this.subscriptions=[],this.unsubscribeOnScroll=[],this.dragStream=null,this.scrollStream=null,this.containerInlinePadding=0,this.onClickWrapper=t=>{const e=this.wrapper.getBoundingClientRect(),[i,n]=m(e,t.clientX,t.clientY);this.emit("click",i,n)},this.onDblClickWrapper=t=>{const e=this.wrapper.getBoundingClientRect(),[i,n]=m(e,t.clientX,t.clientY);this.emit("dblclick",i,n)},this.subscriptions=[],this.options=t;const i=this.parentFromOptionsContainer(t.container);this.parent=i;const[n,s]=this.initHtml();i.appendChild(n),this.container=n,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),this.cursor=s.querySelector(".cursor"),this.calculateInlinePadding(),e&&s.appendChild(e),this.initEvents()}parentFromOptionsContainer(t){let e;if("string"==typeof t?e=document.querySelector(t):r(t)&&(e=t),!e)throw new Error("Container not found");return e}initEvents(){this.wrapper.addEventListener("click",this.onClickWrapper),this.wrapper.addEventListener("dblclick",this.onDblClickWrapper),!0!==this.options.dragToSeek&&"object"!=typeof this.options.dragToSeek||this.initDrag(),this.scrollStream=y(this.scrollContainer);const t=c((()=>{const{startX:t,endX:e}=this.scrollStream.percentages.value,{left:i,right:n}=this.scrollStream.bounds.value;this.emit("scroll",t,e,i,n)}),[this.scrollStream.percentages,this.scrollStream.bounds]);if(this.subscriptions.push(t),"function"==typeof ResizeObserver){const t=this.createDelay(100);this.resizeObserver=new ResizeObserver((()=>{t().then((()=>this.onContainerResize())).catch((()=>{}))})),this.resizeObserver.observe(this.scrollContainer)}}onContainerResize(){const t=this.parent.clientWidth;this.calculateInlinePadding(),t===this.lastContainerWidth&&"auto"!==this.options.height||(this.lastContainerWidth=t,this.reRender(),this.emit("resize"))}initDrag(){if(this.dragStream)return;this.dragStream=function(t,e={}){const{threshold:i=3,mouseButton:n=0,touchDelay:s=100}=e,r=l(null),o=new Map,a=matchMedia("(pointer: coarse)").matches;let h=()=>{};const c=e=>{if(e.button!==n)return;if(o.has(e.pointerId))return;if(o.set(e.pointerId,e),o.size>1)return;const l=e.pointerId;let c=e.clientX,u=e.clientY,d=!1;const p=Date.now(),m=t.getBoundingClientRect(),{left:g,top:f}=m,v=t=>{if(t.pointerId!==l)return;if(t.defaultPrevented||o.size>1)return;if(a&&Date.now()-p<s)return;const e=t.clientX,n=t.clientY,h=e-c,m=n-u;(d||Math.abs(h)>i||Math.abs(m)>i)&&(t.preventDefault(),t.stopPropagation(),d||(r.set({type:"start",x:c-g,y:u-f}),d=!0),r.set({type:"move",x:e-g,y:n-f,deltaX:h,deltaY:m}),c=e,u=n)},b=t=>{if(o.delete(t.pointerId)){if(t.pointerId===l&&d){const e=t.clientX,i=t.clientY;r.set({type:"end",x:e-g,y:i-f})}0===o.size&&h()}},y=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||b(t)},C=t=>{d&&(t.stopPropagation(),t.preventDefault())},S=t=>{t.defaultPrevented||o.size>1||d&&t.preventDefault()};document.addEventListener("pointermove",v),document.addEventListener("pointerup",b),document.addEventListener("pointerout",y),document.addEventListener("pointercancel",y),document.addEventListener("touchmove",S,{passive:!1}),document.addEventListener("click",C,{capture:!0}),h=()=>{document.removeEventListener("pointermove",v),document.removeEventListener("pointerup",b),document.removeEventListener("pointerout",y),document.removeEventListener("pointercancel",y),document.removeEventListener("touchmove",S),setTimeout((()=>{document.removeEventListener("click",C,{capture:!0})}),10)}};return t.addEventListener("pointerdown",c),{signal:r,cleanup:()=>{h(),t.removeEventListener("pointerdown",c),o.clear(),b(r)}}}(this.wrapper);const t=c((()=>{const t=this.dragStream.signal.value;if(!t)return;const e=this.wrapper.getBoundingClientRect().width,i=(n=t.x/e)<0?0:n>1?1:n;var n;"start"===t.type?(this.isDragging=!0,this.emit("dragstart",i)):"move"===t.type?this.emit("drag",i):"end"===t.type&&(this.isDragging=!1,this.emit("dragend",i))}),[this.dragStream.signal]);this.subscriptions.push(t)}calculateInlinePadding(){const{paddingLeft:t,paddingRight:e}=getComputedStyle(this.scrollContainer),i=parseFloat(t)+parseFloat(e);this.containerInlinePadding=Number.isNaN(i)?0:i}initHtml(){const t=document.createElement("div"),e=t.attachShadow({mode:"open"}),i=this.options.cspNonce&&"string"==typeof this.options.cspNonce?this.options.cspNonce.replace(/"/g,""):"";return e.innerHTML=`\n      <style${i?` nonce="${i}"`:""}>\n        :host {\n          user-select: none;\n          min-width: 1px;\n        }\n        :host audio {\n          display: block;\n          width: 100%;\n        }\n        :host .scroll {\n          overflow-x: auto;\n          overflow-y: hidden;\n          width: 100%;\n          position: relative;\n        }\n        :host .noScrollbar {\n          scrollbar-color: transparent;\n          scrollbar-width: none;\n        }\n        :host .noScrollbar::-webkit-scrollbar {\n          display: none;\n          -webkit-appearance: none;\n        }\n        :host .wrapper {\n          position: relative;\n          overflow: visible;\n          z-index: 2;\n        }\n        :host .canvases {\n          min-height: ${this.getHeight(this.options.height,this.options.splitChannels)}px;\n          pointer-events: none;\n        }\n        :host .canvases > div {\n          position: relative;\n        }\n        :host canvas {\n          display: block;\n          position: absolute;\n          top: 0;\n          image-rendering: pixelated;\n        }\n        :host .progress {\n          pointer-events: none;\n          position: absolute;\n          z-index: 2;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          overflow: hidden;\n        }\n        :host .progress > div {\n          position: relative;\n        }\n        :host .cursor {\n          pointer-events: none;\n          position: absolute;\n          z-index: 5;\n          top: 0;\n          left: 0;\n          height: 100%;\n          border-radius: 2px;\n        }\n      </style>\n\n      <div class="scroll" part="scroll">\n        <div class="wrapper" part="wrapper">\n          <div class="canvases" part="canvases"></div>\n          <div class="progress" part="progress"></div>\n          <div class="cursor" part="cursor"></div>\n        </div>\n      </div>\n    `,[t,e]}setOptions(t){var e;if(this.options.container!==t.container){const e=this.parentFromOptionsContainer(t.container);e.appendChild(this.container),this.parent=e}!0===t.dragToSeek||"object"==typeof this.options.dragToSeek?this.initDrag():(null===(e=this.dragStream)||void 0===e||e.cleanup(),this.dragStream=null),this.options=t,this.reRender()}getWrapper(){return this.wrapper}getWidth(){return this.scrollContainer.clientWidth-this.containerInlinePadding}getScroll(){return this.scrollContainer.scrollLeft}setScroll(t){this.scrollContainer.scrollLeft=t}setScrollPercentage(t){const{scrollWidth:e}=this.scrollContainer,i=e*t;this.setScroll(i)}destroy(){var t;this.wrapper.removeEventListener("click",this.onClickWrapper),this.wrapper.removeEventListener("dblclick",this.onDblClickWrapper),this.timeouts.forEach((t=>t())),this.timeouts=[],this.subscriptions.forEach((t=>t())),this.container.remove(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),null===(t=this.unsubscribeOnScroll)||void 0===t||t.forEach((t=>t())),this.unsubscribeOnScroll=[],this.dragStream&&(this.dragStream.cleanup(),this.dragStream=null),this.scrollStream&&(this.scrollStream.cleanup(),this.scrollStream=null)}createDelay(t=10){let e,i;const n=()=>{e&&(clearTimeout(e),e=void 0),i&&(i(),i=void 0)};return this.timeouts.push(n),()=>new Promise(((s,r)=>{n(),i=r,e=setTimeout((()=>{e=void 0,i=void 0,s()}),t)}))}getHeight(t,e){var i;const n=(null===(i=this.audioData)||void 0===i?void 0:i.numberOfChannels)||1;return function({optionsHeight:t,optionsSplitChannels:e,parentHeight:i,numberOfChannels:n,defaultHeight:s=128}){if(null==t)return s;const r=Number(t);if(!isNaN(r))return r;if("auto"===t){const t=i||s;return(null==e?void 0:e.every((t=>!t.overlay)))?t/n:t}return s}({optionsHeight:t,optionsSplitChannels:e,parentHeight:this.parent.clientHeight,numberOfChannels:n,defaultHeight:128})}convertColorValues(t,e){return function(t,e,i){if(!Array.isArray(t))return t||"";if(0===t.length)return"#999";if(t.length<2)return t[0]||"";const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return t[0]||"";const r=i||n.height*e,o=s.createLinearGradient(0,0,0,r),a=1/(t.length-1);return t.forEach(((t,e)=>{o.addColorStop(e*a,t)})),o}(t,this.getPixelRatio(),null==e?void 0:e.canvas.height)}getPixelRatio(){return t=window.devicePixelRatio,Math.max(1,t||1);// removed by dead control flow
  var t; }renderBarWaveform(t,e,i,n){const{width:s,height:r}=i.canvas,{halfHeight:o,barWidth:a,barRadius:l,barIndexScale:h,barSpacing:c,barMinHeight:u}=function({width:t,height:e,length:i,options:n,pixelRatio:s}){const r=e/2,o=n.barWidth?n.barWidth*s:1,a=n.barGap?n.barGap*s:n.barWidth?o/2:0,l=o+a||1;return{halfHeight:r,barWidth:o,barGap:a,barRadius:n.barRadius||0,barMinHeight:n.barMinHeight?n.barMinHeight*s:0,barIndexScale:i>0?t/l/i:0,barSpacing:l}}({width:s,height:r,length:(t[0]||[]).length,options:e,pixelRatio:this.getPixelRatio()}),m=function({channelData:t,barIndexScale:e,barSpacing:i,barWidth:n,halfHeight:s,vScale:r,canvasHeight:o,barAlign:a,barMinHeight:l}){const h=t[0]||[],c=t[1]||h,u=h.length,m=[];let g=0,f=0,v=0;for(let t=0;t<=u;t++){const u=Math.round(t*e);if(u>g){const{topHeight:t,totalHeight:e}=d({maxTop:f,maxBottom:v,halfHeight:s,vScale:r,barMinHeight:l,barAlign:a}),h=p({barAlign:a,halfHeight:s,topHeight:t,totalHeight:e,canvasHeight:o});m.push({x:g*i,y:h,width:n,height:e}),g=u,f=0,v=0}const b=Math.abs(h[t]||0),y=Math.abs(c[t]||0);b>f&&(f=b),y>v&&(v=y)}return m}({channelData:t,barIndexScale:h,barSpacing:c,barWidth:a,halfHeight:o,vScale:n,canvasHeight:r,barAlign:e.barAlign,barMinHeight:u});i.beginPath();for(const t of m)l&&"roundRect"in i?i.roundRect(t.x,t.y,t.width,t.height,l):i.rect(t.x,t.y,t.width,t.height);i.fill(),i.closePath()}renderLineWaveform(t,e,i,n){const{width:s,height:r}=i.canvas,o=function({channelData:t,width:e,height:i,vScale:n}){const s=i/2,r=t[0]||[];return[r,t[1]||r].map(((t,i)=>{const r=t.length,o=r?e/r:0,a=s,l=0===i?-1:1,h=[{x:0,y:a}];let c=0,u=0;for(let e=0;e<=r;e++){const i=Math.round(e*o);if(i>c){const t=a+(Math.round(u*s*n)||1)*l;h.push({x:c,y:t}),c=i,u=0}const r=Math.abs(t[e]||0);r>u&&(u=r)}return h.push({x:c,y:a}),h}))}({channelData:t,width:s,height:r,vScale:n});i.beginPath();for(const t of o)if(t.length){i.moveTo(t[0].x,t[0].y);for(let e=1;e<t.length;e++){const n=t[e];i.lineTo(n.x,n.y)}}i.fill(),i.closePath()}renderWaveform(t,e,i){if(i.fillStyle=this.convertColorValues(e.waveColor,i),e.renderFunction)return void e.renderFunction(t,i);const n=function({channelData:t,barHeight:e,normalize:i,maxPeak:n}){var s;const r=e||1;if(!i)return r;const o=t[0];if(!o||0===o.length)return r;let a=null!=n?n:0;if(!n)for(let t=0;t<o.length;t++){const e=null!==(s=o[t])&&void 0!==s?s:0,i=Math.abs(e);i>a&&(a=i)}return a?r/a:r}({channelData:t,barHeight:e.barHeight,normalize:e.normalize,maxPeak:e.maxPeak});g(e)?this.renderBarWaveform(t,e,i,n):this.renderLineWaveform(t,e,i,n)}renderSingleCanvas(t,e,i,n,s,r,o){const a=this.getPixelRatio(),l=document.createElement("canvas");l.width=Math.round(i*a),l.height=Math.round(n*a),l.style.width=`${i}px`,l.style.height=`${n}px`,l.style.left=`${Math.round(s)}px`,r.appendChild(l);const h=l.getContext("2d");if(e.renderFunction?(h.fillStyle=this.convertColorValues(e.waveColor,h),e.renderFunction(t,h)):this.renderWaveform(t,e,h),l.width>0&&l.height>0){const t=l.cloneNode(),i=t.getContext("2d");i.drawImage(l,0,0),i.globalCompositeOperation="source-in",i.fillStyle=this.convertColorValues(e.progressColor,i),i.fillRect(0,0,l.width,l.height),o.appendChild(t)}}renderMultiCanvas(t,e,i,n,s,r){const o=this.getPixelRatio(),{clientWidth:a}=this.scrollContainer,l=i/o,h=function({clientWidth:t,totalWidth:e,options:i}){return f(Math.min(8e3,t,e),i)}({clientWidth:a,totalWidth:l,options:e});let c={};if(0===h)return;const u=i=>{if(i<0||i>=d)return;if(c[i])return;c[i]=!0;const o=i*h;let a=Math.min(l-o,h);if(a=f(a,e),a<=0)return;const u=function({channelData:t,offset:e,clampedWidth:i,totalWidth:n}){return t.map((t=>{const s=Math.floor(e/n*t.length),r=Math.floor((e+i)/n*t.length);return t.slice(s,r)}))}({channelData:t,offset:o,clampedWidth:a,totalWidth:l});this.renderSingleCanvas(u,e,a,n,o,s,r)},d=Math.ceil(l/h);if(!this.isScrollable){for(let t=0;t<d;t++)u(t);return}if(v({scrollLeft:this.scrollContainer.scrollLeft,totalWidth:l,numCanvases:d}).forEach((t=>u(t))),d>1){const t=this.on("scroll",(()=>{const{scrollLeft:t}=this.scrollContainer;Object.keys(c).length>10&&(s.innerHTML="",r.innerHTML="",c={}),v({scrollLeft:t,totalWidth:l,numCanvases:d}).forEach((t=>u(t)))}));this.unsubscribeOnScroll.push(t)}}renderChannel(t,e,i,n){var{overlay:s}=e,r=function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(t);s<n.length;s++)e.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(t,n[s])&&(i[n[s]]=t[n[s]])}return i}(e,["overlay"]);const o=document.createElement("div"),a=this.getHeight(r.height,r.splitChannels);o.style.height=`${a}px`,s&&n>0&&(o.style.marginTop=`-${a}px`),this.canvasWrapper.style.minHeight=`${a}px`,this.canvasWrapper.appendChild(o);const l=o.cloneNode();this.progressWrapper.appendChild(l),this.renderMultiCanvas(t,r,i,a,o,l)}render(e){return t(this,void 0,void 0,(function*(){var t;this.timeouts.forEach((t=>t())),this.timeouts=[],this.unsubscribeOnScroll.forEach((t=>t())),this.unsubscribeOnScroll=[],this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="",null!=this.options.width&&(this.scrollContainer.style.width="number"==typeof this.options.width?`${this.options.width}px`:this.options.width);const i=this.getPixelRatio(),n=this.scrollContainer.clientWidth-this.containerInlinePadding,{scrollWidth:s,isScrollable:r,useParentWidth:o,width:a}=function({duration:t,minPxPerSec:e=0,parentWidth:i,fillParent:n,pixelRatio:s}){const r=Math.ceil(t*e),o=r>i,a=Boolean(n&&!o);return{scrollWidth:r,isScrollable:o,useParentWidth:a,width:(a?i:r)*s}}({duration:e.duration,minPxPerSec:this.options.minPxPerSec||0,parentWidth:n,fillParent:this.options.fillParent,pixelRatio:i});if(this.isScrollable=r,this.wrapper.style.width=o?"100%":`${s}px`,this.scrollContainer.style.overflowX=this.isScrollable?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.cursor.style.backgroundColor=`${this.options.cursorColor||this.options.progressColor}`,this.cursor.style.width=`${this.options.cursorWidth}px`,this.audioData=e,this.emit("render"),this.options.splitChannels)for(let i=0;i<e.numberOfChannels;i++){const n=Object.assign(Object.assign({},this.options),null===(t=this.options.splitChannels)||void 0===t?void 0:t[i]);this.renderChannel([e.getChannelData(i)],n,a,i)}else{const t=[e.getChannelData(0)];e.numberOfChannels>1&&t.push(e.getChannelData(1)),this.renderChannel(t,this.options,a,0)}Promise.resolve().then((()=>this.emit("rendered")))}))}reRender(){if(this.unsubscribeOnScroll.forEach((t=>t())),this.unsubscribeOnScroll=[],!this.audioData)return;const{scrollWidth:t}=this.scrollContainer,{right:e}=this.progressWrapper.getBoundingClientRect();if(this.render(this.audioData),!this.isScrollable&&this.scrollContainer.scrollLeft)this.scrollContainer.scrollLeft=0;else if(this.isScrollable&&t!==this.scrollContainer.scrollWidth){const{right:t}=this.progressWrapper.getBoundingClientRect(),i=function(t){const e=2*t;return(e<0?Math.floor(e):Math.ceil(e))/2}(t-e);this.scrollContainer.scrollLeft+=i}}zoom(t){this.options.minPxPerSec=t,this.reRender()}scrollIntoView(t,e=!1){var i;const{scrollLeft:n,scrollWidth:s,clientWidth:r}=this.scrollContainer,o=t*s,a=n,l=n+r,h=r/2;if(this.isDragging){const t=30;o+t>l?this.scrollContainer.scrollLeft+=t:o-t<a&&(this.scrollContainer.scrollLeft-=t)}else{(o<a||o>l)&&(this.scrollContainer.scrollLeft=o-(this.options.autoCenter?h:0));const t=o-n-h;if(e&&this.options.autoCenter&&t>0){const e=null===(i=this.audioData)||void 0===i?void 0:i.duration;if(void 0===e||e<=0)return void(this.scrollContainer.scrollLeft+=t);const n=s/e;this.scrollContainer.scrollLeft+=n<=600?Math.min(t,10):t}}}renderProgress(t,e){if(isNaN(t))return;const i=100*t;this.canvasWrapper.style.clipPath=`polygon(${i}% 0%, 100% 0%, 100% 100%, ${i}% 100%)`,this.progressWrapper.style.width=`${i}%`,this.cursor.style.left=`${i}%`,this.cursor.style.transform=this.options.cursorWidth?`translateX(-${t*this.options.cursorWidth}px)`:"",this.isScrollable&&this.options.autoScroll&&this.audioData&&this.audioData.duration>0&&this.scrollIntoView(t,e)}exportImage(e,i,n){return t(this,void 0,void 0,(function*(){const t=this.canvasWrapper.querySelectorAll("canvas");if(!t.length)throw new Error("No waveform data");if("dataURL"===n){const n=Array.from(t).map((t=>t.toDataURL(e,i)));return Promise.resolve(n)}return Promise.all(Array.from(t).map((t=>new Promise(((n,s)=>{t.toBlob((t=>{t?n(t):s(new Error("Could not export image"))}),e,i)})))))}))}}class S extends e{constructor(){super(...arguments),this.animationFrameId=null,this.isRunning=!1}start(){if(this.isRunning)return;this.isRunning=!0;const t=()=>{this.isRunning&&(this.emit("tick"),this.animationFrameId=requestAnimationFrame(t))};t()}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}destroy(){this.stop(),this.unAll()}}class E extends e{constructor(t){super(),this.bufferNode=null,this.playStartTime=0,this.playbackPosition=0,this._muted=!1,this._playbackRate=1,this._duration=void 0,this.buffer=null,this.currentSrc="",this.paused=!0,this.crossOrigin=null,this.seeking=!1,this.autoplay=!1,this.addEventListener=this.on,this.removeEventListener=this.un,this._destroyed=!1,function(){const t=globalThis.navigator;if(null==t?void 0:t.audioSession)try{t.audioSession.type="playback"}catch(t){console.warn("Setting navigator.audioSession.type failed:",t)}}(),this.audioContext=t||new AudioContext,this.gainNode=this.audioContext.createGain(),this.gainNode.connect(this.audioContext.destination)}load(){return t(this,void 0,void 0,(function*(){}))}remove(){this.destroy()}destroy(){if(!this._destroyed){if(this._destroyed=!0,this.currentSrc="",this.bufferNode){this.bufferNode.onended=null;try{this.bufferNode.stop()}catch(t){}this.bufferNode.disconnect(),this.bufferNode=null}this.gainNode.disconnect(),"function"==typeof this.audioContext.close&&Promise.resolve(this.audioContext.close.call(this.audioContext)).catch((()=>{})),this.buffer=null,this.unAll()}}get src(){return this.currentSrc}set src(t){if(this.currentSrc=t,this._duration=void 0,!t)return this.buffer=null,void this.emit("emptied");fetch(t).then((e=>{if(e.status>=400)throw new Error(`Failed to fetch ${t}: ${e.status} (${e.statusText})`);return e.arrayBuffer()})).then((e=>this.currentSrc!==t?null:this.audioContext.decodeAudioData(e))).then((e=>{this.currentSrc===t&&(this.buffer=e,this.emit("loadedmetadata"),this.emit("canplay"),this.autoplay&&this.play())})).catch((t=>{console.error("WebAudioPlayer load error:",t)}))}_play(){if(!this.paused)return;this.paused=!1,this.bufferNode&&(this.bufferNode.onended=null,this.bufferNode.disconnect()),this.bufferNode=this.audioContext.createBufferSource(),this.buffer&&(this.bufferNode.buffer=this.buffer),this.bufferNode.playbackRate.value=this._playbackRate,this.bufferNode.connect(this.gainNode);let t=this.playbackPosition;(t>=this.duration||t<0)&&(t=0,this.playbackPosition=0),this.bufferNode.start(this.audioContext.currentTime,t),this.playStartTime=this.audioContext.currentTime,this.bufferNode.onended=()=>{!this.paused&&this.duration-this.currentTime<.01&&(this.pause(),this.emit("ended"))}}_pause(){if(this.paused=!0,this.bufferNode){this.bufferNode.onended=null;try{this.bufferNode.stop()}catch(t){}}this.playbackPosition+=(this.audioContext.currentTime-this.playStartTime)*this._playbackRate}play(){return t(this,void 0,void 0,(function*(){this.paused&&(this._play(),this.emit("play"))}))}pause(){this.paused||(this._pause(),this.emit("pause"))}stopAt(t){const e=(t-this.currentTime)/this._playbackRate,i=this.bufferNode;null==i||i.stop(this.audioContext.currentTime+e),null==i||i.addEventListener("ended",(()=>{i===this.bufferNode&&(this.bufferNode=null,this.pause(),this.playbackPosition=Math.min(t,this.duration),this.emit("timeupdate"))}),{once:!0})}setSinkId(e){return t(this,void 0,void 0,(function*(){return this.audioContext.setSinkId(e)}))}get playbackRate(){return this._playbackRate}set playbackRate(t){const e=!this.paused;e&&this._pause(),this._playbackRate=t,e&&this._play(),this.bufferNode&&(this.bufferNode.playbackRate.value=t)}get currentTime(){return this.paused?this.playbackPosition:this.playbackPosition+(this.audioContext.currentTime-this.playStartTime)*this._playbackRate}set currentTime(t){const e=!this.paused;e&&this._pause(),this.playbackPosition=t,e&&this._play(),this.emit("seeking"),this.emit("timeupdate")}get duration(){var t,e;return null!==(t=this._duration)&&void 0!==t?t:(null===(e=this.buffer)||void 0===e?void 0:e.duration)||0}set duration(t){this._duration=t}get volume(){return this.gainNode.gain.value}set volume(t){this.gainNode.gain.value=t,this.emit("volumechange")}get muted(){return this._muted}set muted(t){this._muted!==t&&(this._muted=t,this._muted?this.gainNode.disconnect():this.gainNode.connect(this.audioContext.destination))}canPlayType(t){return/^(audio|video)\//.test(t)}getGainNode(){return this.gainNode}getChannelData(){const t=[];if(!this.buffer)return t;const e=this.buffer.numberOfChannels;for(let i=0;i<e;i++)t.push(this.buffer.getChannelData(i));return t}removeAttribute(t){switch(t){case"src":this.src="";break;case"playbackRate":this.playbackRate=0;break;case"currentTime":this.currentTime=0;break;case"duration":this.duration=0;break;case"volume":this.volume=0;break;case"muted":this.muted=!1}}}const P={waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,dragToSeek:!1,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class w extends u{static create(t){return new w(t)}getState(){return this.wavesurferState}getRenderer(){return this.renderer}constructor(t){const e=t.media||("WebAudio"===t.backend?new E:void 0);super({media:e,mediaControls:t.mediaControls,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.stopAtPosition=null,this.subscriptions=[],this.mediaSubscriptions=[],this.abortController=null,this._isDestroyed=!1,this._loadVersion=0,this.reactiveCleanups=[],this.options=Object.assign({},P,t);const{state:i,actions:n}=function(t){var e,i,n,s,r,o;const a=null!==(e=null==t?void 0:t.currentTime)&&void 0!==e?e:l(0),c=null!==(i=null==t?void 0:t.duration)&&void 0!==i?i:l(0),u=null!==(n=null==t?void 0:t.isPlaying)&&void 0!==n?n:l(!1),d=null!==(s=null==t?void 0:t.isSeeking)&&void 0!==s?s:l(!1),p=null!==(r=null==t?void 0:t.volume)&&void 0!==r?r:l(1),m=null!==(o=null==t?void 0:t.playbackRate)&&void 0!==o?o:l(1),g=l(null),f=l(null),v=l(""),b=l(0),y=l(0),C=h((()=>!u.value),[u]),S=h((()=>null!==g.value),[g]),E=h((()=>S.value&&c.value>0),[S,c]),P=h((()=>a.value),[a]),w=h((()=>c.value>0?a.value/c.value:0),[a,c]);return{state:{currentTime:a,duration:c,isPlaying:u,isPaused:C,isSeeking:d,volume:p,playbackRate:m,audioBuffer:g,peaks:f,url:v,zoom:b,scrollPosition:y,canPlay:S,isReady:E,progress:P,progressPercent:w},actions:{setCurrentTime:t=>{const e=Math.max(0,Math.min(c.value||1/0,t));a.set(e)},setDuration:t=>{c.set(Math.max(0,t))},setPlaying:t=>{u.set(t)},setSeeking:t=>{d.set(t)},setVolume:t=>{const e=Math.max(0,Math.min(1,t));p.set(e)},setPlaybackRate:t=>{const e=Math.max(.1,Math.min(16,t));m.set(e)},setAudioBuffer:t=>{g.set(t),t&&c.set(t.duration)},setPeaks:t=>{f.set(t)},setUrl:t=>{v.set(t)},setZoom:t=>{b.set(Math.max(0,t))},setScrollPosition:t=>{y.set(Math.max(0,t))}}}}({isPlaying:this.isPlayingSignal,currentTime:this.currentTimeSignal,duration:this.durationSignal,volume:this.volumeSignal,playbackRate:this.playbackRateSignal,isSeeking:this.seekingSignal});this.wavesurferState=i,this.wavesurferActions=n,this.timer=new S;const s=e?void 0:this.getMediaElement();this.renderer=new C(this.options,s),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReactiveState(),this.initPlugins();const r=this.options.url||this.getSrc()||"";Promise.resolve().then((()=>{this.emit("init");const{peaks:t,duration:e}=this.options;(r||t&&e)&&this.load(r,t,e).catch((()=>{}))}))}updateProgress(t=this.getCurrentTime()){return this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),t}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{if(!this.isSeeking()){const t=this.updateProgress();if(this.emit("timeupdate",t),this.emit("audioprocess",t),null!=this.stopAtPosition&&this.isPlaying()&&t>=this.stopAtPosition){const t=this.stopAtPosition;this.pause(),this.setTime(t)}}})))}initReactiveState(){this.reactiveCleanups.push(function(t,e){const i=[];i.push(c((()=>{const i=t.isPlaying.value;e.emit(i?"play":"pause")}),[t.isPlaying])),i.push(c((()=>{const i=t.currentTime.value;e.emit("timeupdate",i),t.isPlaying.value&&e.emit("audioprocess",i)}),[t.currentTime,t.isPlaying])),i.push(c((()=>{t.isSeeking.value&&e.emit("seeking",t.currentTime.value)}),[t.isSeeking,t.currentTime]));let n=!1;i.push(c((()=>{t.isReady.value&&!n&&(n=!0,e.emit("ready",t.duration.value))}),[t.isReady,t.duration])),i.push(c((()=>{null===t.audioBuffer.value&&(n=!1)}),[t.audioBuffer]));let s=!1;return i.push(c((()=>{const i=t.isPlaying.value,n=t.currentTime.value,r=t.duration.value,o=r>0&&n>=r;s&&!i&&o&&e.emit("finish"),s=i&&o}),[t.isPlaying,t.currentTime,t.duration])),i.push(c((()=>{const i=t.zoom.value;i>0&&e.emit("zoom",i)}),[t.zoom])),()=>{i.forEach((t=>t()))}}(this.wavesurferState,{emit:this.emit.bind(this)}))}initPlayerEvents(){this.isPlaying()&&(this.emit("play"),this.timer.start()),this.mediaSubscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.updateProgress();this.emit("timeupdate",t)})),this.onMediaEvent("play",(()=>{this.emit("play"),this.timer.start()})),this.onMediaEvent("pause",(()=>{this.emit("pause"),this.timer.stop(),this.stopAtPosition=null})),this.onMediaEvent("emptied",(()=>{this.timer.stop(),this.stopAtPosition=null})),this.onMediaEvent("ended",(()=>{this.emit("timeupdate",this.getDuration()),this.emit("finish"),this.stopAtPosition=null})),this.onMediaEvent("seeking",(()=>{this.emit("seeking",this.getCurrentTime())})),this.onMediaEvent("error",(()=>{var t;this.emit("error",null!==(t=this.getMediaElement().error)&&void 0!==t?t:new Error("Media error")),this.stopAtPosition=null})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",((t,e)=>{this.options.interact&&(this.seekTo(t),this.emit("interaction",t*this.getDuration()),this.emit("click",t,e))})),this.renderer.on("dblclick",((t,e)=>{this.emit("dblclick",t,e)})),this.renderer.on("scroll",((t,e,i,n)=>{const s=this.getDuration();this.emit("scroll",t*s,e*s,i,n)})),this.renderer.on("render",(()=>{this.emit("redraw")})),this.renderer.on("rendered",(()=>{this.emit("redrawcomplete")})),this.renderer.on("dragstart",(t=>{this.emit("dragstart",t)})),this.renderer.on("dragend",(t=>{this.emit("dragend",t)})),this.renderer.on("resize",(()=>{this.emit("resize")})));{let t;const e=this.renderer.on("drag",(e=>{var i;if(!this.options.interact)return;this.renderer.renderProgress(e),clearTimeout(t);let n=0;const s=this.options.dragToSeek;this.isPlaying()?n=0:!0===s?n=200:s&&"object"==typeof s&&(n=null!==(i=s.debounceTime)&&void 0!==i?i:200),t=setTimeout((()=>{this.seekTo(e)}),n),this.emit("interaction",e*this.getDuration()),this.emit("drag",e)}));this.subscriptions.push((()=>{clearTimeout(t),e()}))}}initPlugins(){var t;(null===(t=this.options.plugins)||void 0===t?void 0:t.length)&&this.options.plugins.forEach((t=>{this.registerPlugin(t)}))}unsubscribePlayerEvents(){this.mediaSubscriptions.forEach((t=>t())),this.mediaSubscriptions=[]}setOptions(t){this.options=Object.assign({},this.options,t),t.duration&&!t.peaks&&(this.decodedData=i.createBuffer(this.exportPeaks(),t.duration)),t.peaks&&t.duration&&(this.decodedData=i.createBuffer(t.peaks,t.duration)),this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate),null!=t.mediaControls&&(this.getMediaElement().controls=t.mediaControls)}registerPlugin(t){if(this.plugins.includes(t))return t;t._init(this),this.plugins.push(t);const e=t.once("destroy",(()=>{this.plugins=this.plugins.filter((e=>e!==t)),this.subscriptions=this.subscriptions.filter((t=>t!==e))}));return this.subscriptions.push(e),t}unregisterPlugin(t){this.plugins=this.plugins.filter((e=>e!==t)),t.destroy()}getWrapper(){return this.renderer.getWrapper()}getWidth(){return this.renderer.getWidth()}getScroll(){return this.renderer.getScroll()}setScroll(t){return this.renderer.setScroll(t)}setScrollTime(t){const e=t/this.getDuration();this.renderer.setScrollPercentage(e)}getActivePlugins(){return this.plugins}loadAudio(e,n,s,r){return t(this,void 0,void 0,(function*(){var t;const o=++this._loadVersion;if(this._isDestroyed=!1,this.emit("load",e),!this.options.media&&this.isPlaying()&&this.pause(),this.decodedData=null,this.stopAtPosition=null,null===(t=this.abortController)||void 0===t||t.abort(),this.abortController=null,!n&&!s){const t=this.options.fetchParams||{};window.AbortController&&!t.signal&&(this.abortController=new AbortController,t.signal=this.abortController.signal);const i=t=>this.emit("loading",t);if(n=yield a.fetchBlob(e,i,t),this._isDestroyed||o!==this._loadVersion)return;const s=this.options.blobMimeType;s&&(n=new Blob([n],{type:s}))}if(this._isDestroyed||o!==this._loadVersion)return;this.setSrc(e,n);const l=yield new Promise((t=>{const e=r||this.getDuration();e?t(e):this.mediaSubscriptions.push(this.onMediaEvent("loadedmetadata",(()=>t(this.getDuration())),{once:!0}))}));if(!this._isDestroyed&&o===this._loadVersion){if(!e&&!n){const t=this.getMediaElement();t instanceof E&&(t.duration=l)}if(s)this.decodedData=i.createBuffer(s,l||0);else if(n){const t=yield n.arrayBuffer();if(this._isDestroyed||o!==this._loadVersion)return;this.decodedData=yield i.decode(t,this.options.sampleRate)}this._isDestroyed||o!==this._loadVersion||(this.decodedData&&(this.emit("decode",this.getDuration()),this.renderer.render(this.decodedData)),this.emit("ready",this.getDuration()))}}))}load(e,i,n){return t(this,void 0,void 0,(function*(){try{return yield this.loadAudio(e,void 0,i,n)}catch(t){throw this.emit("error",t),t}}))}loadBlob(e,i,n){return t(this,void 0,void 0,(function*(){try{return yield this.loadAudio("",e,i,n)}catch(t){throw this.emit("error",t),t}}))}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}exportPeaks({channels:t=2,maxLength:e=8e3,precision:i=1e4}={}){if(!this.decodedData)throw new Error("The audio has not been decoded yet");const n=Math.min(t,this.decodedData.numberOfChannels),s=[];for(let t=0;t<n;t++){const n=this.decodedData.getChannelData(t),r=[],o=n.length/e;for(let t=0;t<e;t++){const e=n.slice(Math.floor(t*o),Math.ceil((t+1)*o));let s=0;for(let t=0;t<e.length;t++){const i=e[t];Math.abs(i)>Math.abs(s)&&(s=i)}r.push(Math.round(s*i)/i)}s.push(r)}return s}getDuration(){let t=super.getDuration()||0;return 0!==t&&t!==1/0||!this.decodedData||(t=this.decodedData.duration),t}toggleInteraction(t){this.options.interact=t}setTime(t){this.stopAtPosition=null,super.setTime(t),this.updateProgress(t),this.emit("timeupdate",t)}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}play(e,i){const n=Object.create(null,{play:{get:()=>super.play}});return t(this,void 0,void 0,(function*(){null!=e&&this.setTime(e);const t=yield n.play.call(this);return null!=i&&(this.media instanceof E?this.media.stopAt(i):this.stopAtPosition=i),t}))}playPause(){return t(this,void 0,void 0,(function*(){return this.isPlaying()?this.pause():this.play()}))}stop(){this.pause(),this.setTime(0)}skip(t){this.setTime(this.getCurrentTime()+t)}empty(){this.load("",[[0]],.001)}setMediaElement(t){this.unsubscribePlayerEvents(),super.setMediaElement(t),this.initPlayerEvents()}exportImage(){return t(this,arguments,void 0,(function*(t="image/png",e=1,i="dataURL"){return this.renderer.exportImage(t,e,i)}))}destroy(){var t;this._isDestroyed=!0,this.emit("destroy"),null===(t=this.abortController)||void 0===t||t.abort(),this.plugins.forEach((t=>t.destroy())),this.subscriptions.forEach((t=>t())),this.unsubscribePlayerEvents(),this.reactiveCleanups.forEach((t=>t())),this.reactiveCleanups=[],this.timer.destroy(),this.renderer.destroy(),super.destroy()}}w.BasePlugin=class extends e{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}},w.dom=o;
-// EXTERNAL MODULE: ./src/lib/util.js + 1 modules
-var util = __webpack_require__(4410);
 ;// ./src/lib/viewers/media/waveform/colors.ts
 /**
  * Figma Audio Player waveform tokens as opaque fills.
@@ -5606,10 +5630,10 @@ function usePlayheadCamera({
   };
 }
 ;// ./src/lib/viewers/controls/icons/IconComment24.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); }
+function IconComment24_extends() { return IconComment24_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; }, IconComment24_extends.apply(null, arguments); }
 function IconComment24(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", _extends({
+  return /*#__PURE__*/external_react_.createElement("svg", IconComment24_extends({
     "data-testid": "IconComment24",
     fill: "none",
     focusable: false,
@@ -5676,6 +5700,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   onPreviewChange,
   onRangeChange,
   range,
+  readOnly = false,
   viewport
 }, ref) {
   const rootRef = (0,external_react_.useRef)(null);
@@ -5706,7 +5731,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const durationMs = (0,waveform_range/* durationMsFromSec */.uH)(durationSec);
   const displayed = dragRange ?? (0,waveform_range/* resolveRange */.Ss)(range, durationMs);
   displayedRef.current = displayed;
-  const showCommentButton = Boolean(onDragCreate) && displayed.startMs !== displayed.endMs && activeHandle == null;
+  const showCommentButton = !readOnly && Boolean(onDragCreate) && displayed.startMs !== displayed.endMs && activeHandle == null;
   const syncPositions = (0,external_react_.useCallback)((next, nextViewport, nextDurationSec) => {
     displayedRef.current = next;
     const collapsed = next.startMs === next.endMs;
@@ -5810,7 +5835,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     });
   }, [currentTimeSec, syncPositions]);
   const startDrag = (0,external_react_.useCallback)((handle, event) => {
-    if (!interactive || event.button > 1 || event.ctrlKey || event.metaKey) {
+    if (readOnly || !interactive || event.button > 1 || event.ctrlKey || event.metaKey) {
       return;
     }
     event.preventDefault();
@@ -5834,7 +5859,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       endMs: (0,waveform_range/* isRangeCollapsed */.BT)(rangeRef.current) ? null : resolved.endMs,
       startMs: resolved.startMs
     });
-  }, [interactive]);
+  }, [interactive, readOnly]);
   const onHandlePointerDown = (0,external_react_.useCallback)(event => {
     const root = rootRef.current;
     if (!root) {
@@ -5919,12 +5944,13 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     className: `bp-WaveformRange${keepHighlight ? ' bp-WaveformRange--persist' : ''}${highlight ? ' bp-WaveformRange--highlight' : ''}`,
     "data-collapsed": collapsed ? 'true' : 'false',
     "data-highlighted": highlight ? 'true' : 'false',
+    "data-readonly": readOnly ? '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", {
+  }), !readOnly && /*#__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",
@@ -5932,7 +5958,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     onPointerDown: onHandlePointerDown
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformRange-handleGrip"
-  })), /*#__PURE__*/external_react_["default"].createElement("div", {
+  })), !readOnly && /*#__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",
@@ -6129,6 +6155,7 @@ function WaveformView({
   onZoomChange,
   peaks,
   range = null,
+  rangeReadOnly = false,
   zoomLevel: zoomLevelProp
 }) {
   // DOM / WaveSurfer
@@ -6945,6 +6972,7 @@ function WaveformView({
   }, []);
   const hoverLeft = isRangeDragging || hoverProgress == null ? null : (0,waveform_viewport/* timeLeftPercent */.Mu)(hoverProgress * durationSec, durationSec, viewportRef.current);
   const overlayRange = createRange ?? range;
+  const isOverlayReadOnly = rangeReadOnly && createRange == null;
   const showRangeOverlay = Boolean(overlayRange) && (isRangeDragging || !isPlaying || !(0,waveform_range/* isRangeCollapsed */.BT)(overlayRange));
   const scrubTimeChip = isTape && scrubPreviewTimeSec != null ? /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover bp-WaveformView-hover--tape",
@@ -6993,14 +7021,15 @@ function WaveformView({
     currentTimeSec: currentTime,
     durationSec: durationSec,
     getPlayheadSec: getPlayheadSec,
-    interactive: interactive,
+    interactive: interactive && !isOverlayReadOnly,
     isHighlighted: isRangeDragging || isRangeHovered,
     keepHighlight: true,
     onDragChange: handleRangeDragChange,
-    onDragCreate: interactive && !isRangeDragging ? onRangeDragCreate : undefined,
+    onDragCreate: interactive && !isRangeDragging && !isOverlayReadOnly ? onRangeDragCreate : undefined,
     onPreviewChange: setPreviewRange,
-    onRangeChange: interactive ? onRangeChange : undefined,
+    onRangeChange: interactive && !isOverlayReadOnly ? onRangeChange : undefined,
     range: overlayRange,
+    readOnly: isOverlayReadOnly,
     viewport: viewport
   }), hoverLeft != null && hoverProgress != null && !isRangeDragging && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover",
@@ -7249,12 +7278,14 @@ function WaveformZoomControl({
 const PLACEHOLDER_PEAKS = placeholderPeaks();
 function MP3ControlsV2({
   autoplay,
   bufferedRange,
   commentMarkers,
   commentRangeDraft = null,
+  commentRangeReadOnly = null,
   currentTime,
   durationTime,
   hasStartedPlayback = false,
@@ -7278,6 +7309,8 @@ function MP3ControlsV2({
   peaks,
   playNext,
   rate,
+  shuttleDirection = null,
+  shuttleRate = 0,
   volume
 }) {
   const durationValue = typeof durationTime === 'number' && isFinite_default()(durationTime) ? durationTime : 0;
@@ -7293,7 +7326,7 @@ function MP3ControlsV2({
   const waveformDurationSec = hasWaveformDuration ? durationValue : PLACEHOLDER_DURATION_SEC;
   const [playRequested, setPlayRequested] = (0,external_react_.useState)(hasStartedPlayback);
   const [viewport, setViewport] = (0,external_react_.useState)(null);
-  const isTape = useTapeWaveform();
+  const isTape = (0,useTapeWaveform/* default */.Ay)();
   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
@@ -7362,6 +7395,8 @@ function MP3ControlsV2({
     // Overlay unmounts on click; without this, focus lands on body and Space is lost.
     mediaEl?.closest('.bp-media-container')?.focus();
   }, [mediaEl, onPlayPause]);
+  const waveformRange = commentRangeDraft ?? commentRangeReadOnly;
+  const isRangeReadOnly = commentRangeDraft == null && commentRangeReadOnly != null;
   const waveformMarkers = (0,external_react_.useMemo)(() => commentMarkers || [], [commentMarkers]);
   const selectedMarkerId = (0,external_react_.useMemo)(() => waveformMarkers.find(marker => marker.isSelected)?.id ?? null, [waveformMarkers]);
   const handleCommentMarkerClick = (0,external_react_.useCallback)(marker => {
@@ -7380,6 +7415,7 @@ function MP3ControlsV2({
   const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
   const hasZoomControl = hasZoomHandlers && hasMediaMetadata && maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW;
   const showGeneratingWaveformIndicator = isGeneratingWaveform && !hasRealPeaks;
+  const showShuttle = !isTape && !!shuttleDirection && shuttleRate > 0;
   const waveformZoomLevel = isTape || hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2",
@@ -7405,7 +7441,8 @@ function MP3ControlsV2({
     onViewportChange: hasRealPeaks ? handleViewportChange : undefined,
     onZoomChange: hasZoomHandlers ? handleWaveformZoom : undefined,
     peaks: waveformPeaks,
-    range: commentRangeDraft,
+    range: waveformRange,
+    rangeReadOnly: isRangeReadOnly,
     zoomLevel: waveformZoomLevel
   }), /*#__PURE__*/external_react_["default"].createElement(WaveformCommentMarkers, {
     commentMarkers: waveformMarkers,
@@ -7414,7 +7451,10 @@ function MP3ControlsV2({
     onCommentMarkerClick: handleCommentMarkerClick,
     selectedId: selectedMarkerId,
     viewport: viewport
-  })), (showGeneratingWaveformIndicator || hasZoomControl) && /*#__PURE__*/external_react_["default"].createElement("div", {
+  })), showShuttle && shuttleDirection && /*#__PURE__*/external_react_["default"].createElement(WaveformShuttleIndicator, {
+    direction: shuttleDirection,
+    rate: shuttleRate
+  }), (showGeneratingWaveformIndicator || hasZoomControl) && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-waveformZoom"
   }, showGeneratingWaveformIndicator ? /*#__PURE__*/external_react_["default"].createElement(WaveformGeneratingIndicator, null) : /*#__PURE__*/external_react_["default"].createElement(WaveformZoomControl, {
     isRevealed: isZoomRevealed,
@@ -7695,6 +7735,8 @@ function isWaveformErrorCode(value) {
 /** Desktop walks then pins near the right inset. Tape keeps the playhead at center. */
+/** J scans backward, L scans forward. Absent when shuttle is off. */
 /** One canvas linear-gradient stop. `offset` is 0–1 along the bar. */
 /**
@@ -8437,6 +8479,55 @@ function rangeProgress(range, durationMs) {
 /***/ },
+/***/ 7308
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Ay: () => (/* binding */ useTapeWaveform),
+/* harmony export */   MQ: () => (/* binding */ isTapeWaveformInput)
+/* harmony export */ });
+/* unused harmony exports isIPadNavigator, isCoarsePrimaryPointer */
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4929);
+function isIPadNavigator(tapeNavigator) {
+  return /iPad/i.test(tapeNavigator.userAgent || '') || tapeNavigator.platform === 'MacIntel' && (tapeNavigator.maxTouchPoints || 0) > 1;
+}
+function isCoarsePrimaryPointer(tapeWindow) {
+  return typeof tapeWindow.matchMedia === 'function' && tapeWindow.matchMedia(_constants__WEBPACK_IMPORTED_MODULE_1__/* .TAPE_POINTER_MEDIA_QUERY */ .Le).matches;
+}
+/**
+ * Tape vs desktop camera: coarse primary pointer (finger) or iPad
+ * (including iPadOS reporting itself as Mac). Not width, not hasTouch,
+ * not Browser.isMobile().
+ */
+function isTapeWaveformInput(tapeWindow = window) {
+  return isCoarsePrimaryPointer(tapeWindow) || isIPadNavigator(tapeWindow.navigator);
+}
+/** Subscribe to the pointer media query; re-read the iPad heuristic on change. */
+function useTapeWaveform() {
+  const [isTape, setIsTape] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(() => typeof window !== 'undefined' && isTapeWaveformInput(window));
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (typeof window.matchMedia !== 'function') {
+      setIsTape(isTapeWaveformInput(window));
+      return undefined;
+    }
+    const mediaQuery = window.matchMedia(_constants__WEBPACK_IMPORTED_MODULE_1__/* .TAPE_POINTER_MEDIA_QUERY */ .Le);
+    const sync = () => {
+      setIsTape(isTapeWaveformInput(window));
+    };
+    sync();
+    mediaQuery.addEventListener('change', sync);
+    return () => mediaQuery.removeEventListener('change', sync);
+  }, []);
+  return isTape;
+}
+/***/ },
 /***/ 1053
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
@@ -24650,7 +24741,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.95.0";
+const CLIENT_VERSION = "3.97.0";
 /* eslint-enable no-undef */
 class Logger {
@@ -33876,6 +33967,27 @@ class TextLoader extends viewers_AssetLoader {
   }
 }
 /* harmony default export */ const text_TextLoader = (new TextLoader());
+;// ./src/lib/viewers/controls/media/markers/helpers/commentMarkerRange.ts
+/**
+ * Turn a host comment marker into the waveform range for a read-only span.
+ * `comment_markers` uses seconds (`time` is the start, `endTime` the end); the
+ * waveform draws `{ startMs, endMs }`. A point comment, or a span whose end is
+ * not after the start, has no range, so the viewer only seeks.
+ */
+function commentMarkerRange(marker) {
+  if (!marker || !Number.isFinite(marker.time) || marker.endTime == null || !Number.isFinite(marker.endTime)) {
+    return null;
+  }
+  const startMs = Math.round(marker.time * 1000);
+  const endMs = Math.round(marker.endTime * 1000);
+  if (!(endMs > startMs)) {
+    return null;
+  }
+  return {
+    endMs,
+    startMs
+  };
+}
 ;// ./src/lib/viewers/controls/media/types.ts
 /**
  * Draft range drawn on the waveform. Sidebar sends `comment_range_draft`
@@ -37431,6 +37543,8 @@ var waveform_constants = __webpack_require__(4929);
 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/useTapeWaveform.ts
+var useTapeWaveform = __webpack_require__(7308);
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/validateWaveformPayload.ts
 var validateWaveformPayload = __webpack_require__(1053);
 ;// ./src/lib/viewers/media/MP3.scss
@@ -37454,6 +37568,8 @@ 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;
@@ -37551,6 +37667,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       if (selected) {
         if (selected.id !== this.hostSelectedMarkerId) {
           this.hostSelectedMarkerId = selected.id;
+          this.commentRangeReadOnly = commentMarkerRange(selected);
           if (Number.isFinite(selected.time)) {
             this.pendingHostSelectedSeek = selected;
             this.applyPendingHostSelectedSeek();
@@ -37559,6 +37676,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       } else if (this.hostSelectedMarkerId && !markers.some(marker => marker.id === this.hostSelectedMarkerId)) {
         this.hostSelectedMarkerId = null;
         this.pendingHostSelectedSeek = null;
+        this.commentRangeReadOnly = null;
       }
       this.renderUI();
     });
@@ -37628,21 +37746,19 @@ class MP3Viewer extends media_MediaBaseViewer {
       this.isCommentRangeDragging = !!isDragging;
     });
     MP3Viewer_defineProperty(this, "handleCommentRangeClear", () => {
-      if (!this.commentRangeDraft || this.commentRangeDraft.endMs == null) {
+      const clearedDraftRange = this.clearOpenCommentRangeDraft();
+      const clearedReadOnlyRange = this.commentRangeReadOnly != null;
+      this.commentRangeReadOnly = null;
+      if (!clearedDraftRange && !clearedReadOnlyRange) {
         return;
       }
-      const notifyHost = this.isCommentRangeTimestampActive;
-      this.commentRangeDraft = null;
-      this.isCommentRangeTimestampActive = false;
-      if (notifyHost) {
-        this.emit(EVENT_COMMENT_RANGE_DRAFT_DISMISS);
-      }
       this.syncCommentRangeLoop();
       this.renderUI();
     });
     MP3Viewer_defineProperty(this, "handleCommentMarkerClick", marker => {
       this.exitShuttle();
       this.hostSelectedMarkerId = marker.id;
+      this.commentRangeReadOnly = commentMarkerRange(marker);
       this.pendingHostSelectedSeek = marker;
       if (this.mediaEl) {
         this.mediaEl.pause();
@@ -37698,6 +37814,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.mediaEl.setAttribute('preload', 'auto');
     this.commentMarkers = [];
     this.commentRangeDraft = null;
+    this.commentRangeReadOnly = null;
     this.hostSelectedMarkerId = null;
     this.isCommentRangeDragging = false;
     this.isCommentRangeTimestampActive = false;
@@ -37840,6 +37957,9 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.handlePlayRequest();
   }
   shuttle(direction) {
+    if ((0,useTapeWaveform/* isTapeWaveformInput */.MQ)()) {
+      return;
+    }
     const sameDirection = this.shuttleDirection === direction;
     const rate = nextShuttleRate(this.shuttleRate, sameDirection);
     if (direction === 'forward') {
@@ -37866,6 +37986,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       }).catch(() => {});
     }
     this.scheduleCommentRangeLoopWrap(true);
+    this.renderUI();
   }
   startReverseShuttle(rate) {
     this.stopReverseShuttle();
@@ -37885,6 +38006,7 @@ class MP3Viewer extends media_MediaBaseViewer {
         this.exitShuttle();
       }
     }, AUDIO_V2_SHUTTLE_TICK_MS);
+    this.renderUI();
   }
   stopReverseShuttle() {
     if (this.reverseShuttleTimer) {
@@ -37988,7 +38110,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {Promise<{ default: Function }>} MP3ControlsV2 module
    */
   importV2Controls() {
-    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 8862));
+    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 2460));
   }
   /**
@@ -38015,6 +38137,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.removeListener(EVENT_COMMENT_RANGE_DRAFT, this.handleCommentRangeDraft);
     this.removeListener(EVENT_COMMENT_RANGE_DRAFT_CLEAR, this.handleCommentRangeDraftClear);
     this.commentRangeDraft = null;
+    this.commentRangeReadOnly = null;
     this.isCommentRangeDragging = false;
     this.isCommentRangeTimestampActive = false;
     this.stopReverseShuttle();
@@ -38031,6 +38154,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     if (this.isAudioPlayerV2) {
       // A file-version switch is a clear, not a resync of the previous draft.
       this.commentRangeDraft = null;
+      this.commentRangeReadOnly = null;
       this.isCommentRangeDragging = false;
       this.isCommentRangeTimestampActive = false;
       this.syncCommentRangeLoop();
@@ -38455,30 +38579,52 @@ class MP3Viewer extends media_MediaBaseViewer {
     }
     this.pendingHostSelectedSeek = null;
     this.exitShuttle();
-    this.handleCommentRangeClear();
+    this.clearOpenCommentRangeDraft();
+    this.commentRangeReadOnly = commentMarkerRange(marker);
     this.mediaEl.pause();
     if (this.mediaEl.currentTime !== marker.time) {
       this.mediaEl.currentTime = marker.time;
     }
+    this.syncCommentRangeLoop();
   }
   /**
-   * Seconds of the open draft span, or null when collapsed / absent.
-   * Collapsed drafts (`endMs: null`) do not confine playback.
+   * Seconds of the span that confines playback, or null when collapsed / absent.
+   * A composer draft wins over a viewed comment range. Collapsed drafts 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)) {
+    // An open composer draft owns playback. A viewed comment range does otherwise.
+    const source = this.commentRangeDraft != null ? this.commentRangeDraft : this.commentRangeReadOnly;
+    if ((0,range/* isRangeCollapsed */.BT)(source) || !Number.isFinite(source.startMs) || !Number.isFinite(source.endMs)) {
       return null;
     }
     return {
-      endSec: draft.endMs / 1000,
-      startSec: draft.startMs / 1000
+      endSec: source.endMs / 1000,
+      startSec: source.startMs / 1000
     };
   }
+  /**
+   * Drop an open composer draft. A collapsed timestamp is left alone.
+   * Does not clear a viewed comment range.
+   *
+   * @return {boolean} whether an open draft was cleared
+   */
+  clearOpenCommentRangeDraft() {
+    if (!this.commentRangeDraft || this.commentRangeDraft.endMs == null) {
+      return false;
+    }
+    const notifyHost = this.isCommentRangeTimestampActive;
+    this.commentRangeDraft = null;
+    this.isCommentRangeTimestampActive = false;
+    if (notifyHost) {
+      this.emit(EVENT_COMMENT_RANGE_DRAFT_DISMISS);
+    }
+    return true;
+  }
   /**
    * Keep a seek inside the open draft. Waveform click-outside and host
    * comment seeks dismiss first, then seek; clamp does not apply then.
@@ -38648,6 +38794,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Mp3ControlsV2, MP3Viewer_extends({}, sharedProps, {
         commentMarkers: this.commentMarkers || [],
         commentRangeDraft: this.commentRangeDraft || null,
+        commentRangeReadOnly: this.commentRangeReadOnly || null,
         hasStartedPlayback: !!this.userRequestedPlay,
         isGeneratingWaveform: this.isGeneratingWaveform(),
         keyboardVolumeStep: this.keyboardVolumeStep,
@@ -38660,7 +38807,9 @@ class MP3Viewer extends media_MediaBaseViewer {
         onCommentRangeDragCreate: this.handleCommentRangeDragCreate,
         onPlayNextChange: this.setPlayNext,
         peaks: this.waveformPeaks,
-        playNext: this.isPlayNextEnabled()
+        playNext: this.isPlayNextEnabled(),
+        shuttleDirection: this.shuttleDirection,
+        shuttleRate: this.shuttleRate
       })));
       return;
     }
@@ -56121,11 +56270,18 @@ class Preview extends (events_default()) {
   loadFromCache() {
     // Log cache hit
     this.logger.setCached();
-    // Finally load the viewer
-    this.loadViewer();
     const needsVideoReps = this.isVideoFileByExtension() && !this.hasPlayableVideoReps(this.file);
-    if (!this.options.skipServerUpdate || needsVideoReps) {
+    const needsTranscriptionRep = isFeatureEnabled(this.options.features, constants/* AI_TRANSCRIPTION_FOR_VIDEO_SUBTITLES */.Iu) && this.isVideoFileByExtension() && !this.hasTranscriptionRep(this.file);
+    // Captions are optional — do not treat a missing extracted_text rep like missing
+    // dash/mp4. skipServerUpdate still skips this refresh; default reopen already
+    // calls loadFromServer() because skipServerUpdate is false.
+    const needsServerRefresh = !this.options.skipServerUpdate || needsVideoReps || needsTranscriptionRep;
+    // Play from cache immediately. Default reopen still refreshes file info in the
+    // background; handleFileInfoResponse then updates the live viewer if extracted_text
+    // arrived. A failed captions-only refresh must not uncache or destroy playback.
+    this.loadViewer();
+    if (needsServerRefresh) {
       this.loadFromServer();
     }
   }
@@ -56156,7 +56312,14 @@ class Preview extends (events_default()) {
     const fileInfoUrl = (0,util/* appendQueryParams */.Ne)(getURL(this.file.id, fileVersionId, apiHost), params);
     this.api.get(fileInfoUrl, {
       headers: this.getRequestHeaders()
-    }).then(this.handleFileInfoResponse).catch(this.handleFetchError);
+    }).then(this.handleFileInfoResponse).catch(err => {
+      // Captions are optional. If a cache-hit viewer is already playing dash/mp4,
+      // a failed background file-info refresh must not uncache or triggerError.
+      if (this.viewer && this.hasPlayableVideoReps(this.file)) {
+        return;
+      }
+      this.handleFetchError(err);
+    });
   }
   /**
@@ -56247,6 +56410,7 @@ class Preview extends (events_default()) {
       if (this.isVideoFileByExtension() && !this.hasPlayableVideoReps(file)) {
         throw new PreviewError/* default */.A(lib_events/* ERROR_CODE */.bo.ACCOUNT, "This preview didn’t load because your account is unable to preview this file type. Please try to open or download the file to view.");
       }
+      const needsTranscriptionReload = this.canUseDash() && isFeatureEnabled(this.options.features, constants/* AI_TRANSCRIPTION_FOR_VIDEO_SUBTITLES */.Iu) && this.isVideoFileByExtension() && !this.hasTranscriptionRep(cachedFile) && this.hasTranscriptionRep(file);
       // Should load viewer for first time if:
       //   - File isn't cached OR
@@ -56260,6 +56424,18 @@ class Preview extends (events_default()) {
       } else if (cachedFile.file_version.sha1 !== file.file_version.sha1 || isFileWatermarked) {
         this.logger.setCacheStale(); // Log that cache is stale
         this.reload(true); // Reload viewer without fetching updated file info from server
+      } else if (needsTranscriptionReload) {
+        // Cache was valid but lacked extracted_text (e.g. prefetch without the hint).
+        // Server refresh now has the rep — update the already-playing viewer so
+        // loadTranscription can attach captions. Only call it after loadeddata;
+        // calling earlier duplicates the Auto-generated Shaka track and can throw
+        // if UI is not ready. If loadeddata has not fired, the handler uses this file.
+        if (this.viewer) {
+          this.viewer.options.file = this.file;
+          if (this.viewer.isLoaded() && typeof this.viewer.loadTranscription === 'function') {
+            this.viewer.loadTranscription();
+          }
+        }
       }
     } catch (err) {
       const error = err instanceof PreviewError/* default */.A ? err : new PreviewError/* default */.A(lib_events/* ERROR_CODE */.bo.LOAD_VIEWER, "This preview didn’t load. Please try to open or download the file to view.", {}, err.message);
@@ -56380,6 +56556,31 @@ class Preview extends (events_default()) {
     });
   }
+  /**
+   * Returns true if file has an extracted_text transcription rep with a content URL.
+   *
+   * @private
+   * @param {Object} file - File object
+   * @return {boolean}
+   */
+  hasTranscriptionRep(file) {
+    if (!file?.representations?.entries) {
+      return false;
+    }
+    const extractedText = getRepresentation(file, 'extracted_text');
+    return !!extractedText?.content?.url_template;
+  }
+  /**
+   * Returns true when Dash playback is available and not disabled.
+   *
+   * @private
+   * @return {boolean}
+   */
+  canUseDash() {
+    return lib_Browser.canPlayDash() && !this.disabledViewers.Dash;
+  }
   /**
    * Returns true if file has playable video representations (dash or mp4).
    *
@@ -56834,7 +57035,7 @@ class Preview extends (events_default()) {
       previewMode,
       sharedLinkAuth
     } = this.options || {};
-    this.emit(name, Preview_objectSpread(Preview_objectSpread({}, payload), {}, {
+    this.emit(name, Preview_objectSpread(Preview_objectSpread(Preview_objectSpread({}, payload), this.getBlueprintMigrationTags()), {}, {
       access_pattern: accessPattern,
       client_name: clientName,
       content_type: (0,util/* getProp */.GT)(this.viewer, 'options.viewer.NAME', ''),
@@ -56852,6 +57053,26 @@ class Preview extends (events_default()) {
     }, getClientLogDetails()));
   }
+  /**
+   * Returns the state of each Blueprint migration wave for this preview session. Every metric
+   * and error carries all four, including the waves that are off, so the flag-off side of a
+   * rollout is measured the same way as the flag-on side rather than inferred from its absence.
+   *
+   * @private
+   * @return {Object} Blueprint migration dimensions
+   */
+  getBlueprintMigrationTags() {
+    const {
+      features
+    } = this.options || {};
+    return {
+      blueprint_archive: isFeatureEnabled(features, constants/* BLUEPRINT_MIGRATION_ARCHIVE */.cA),
+      blueprint_controls_bar: isFeatureEnabled(features, constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ),
+      blueprint_media_controls: isFeatureEnabled(features, constants/* BLUEPRINT_MIGRATION_MEDIA_CONTROLS */.dR),
+      blueprint_supporting_ui: isFeatureEnabled(features, constants/* BLUEPRINT_MIGRATION_SUPPORTING_UI */.Ed)
+    };
+  }
   /**
    * Returns the prefetch/preload dimensions for this preview session. Only attached to
    * the load event, preview_preload_outcome counter, and preview_error — exactly one
@@ -56875,7 +57096,7 @@ class Preview extends (events_default()) {
    * @return {Object} Headers
    */
   getRequestHeaders(token) {
-    const isDash = lib_Browser.canPlayDash() && !this.disabledViewers.Dash;
+    const isDash = this.canUseDash();
     let videoHint = isDash ? constants/* X_REP_HINT_VIDEO_DASH */.yF : constants/* X_REP_HINT_VIDEO_MP4 */.Zg;
     if (isDash && isFeatureEnabled(this.options.features, constants/* AI_TRANSCRIPTION_FOR_VIDEO_SUBTITLES */.Iu)) {
       videoHint += constants/* X_REP_HINT_VIDEO_DASH_EXTRACTED_TEXT */.xU;

package/package.json CHANGED Viewed

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