box-content-preview 3.108.0 → 3.109.0

package/README.md

@@ -2,7 +2,7 @@
 [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
 [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
-[![version](https://img.shields.io/badge/version-v3.108.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
+[![version](https://img.shields.io/badge/version-v3.109.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.108.0
+- Version: v3.109.0
 - Locale: en-US
 
-https://cdn01.boxcdn.net/platform/preview/3.108.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.108.0/en-US/preview.css
+https://cdn01.boxcdn.net/platform/preview/3.109.0/en-US/preview.js
+https://cdn01.boxcdn.net/platform/preview/3.109.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.108.0/en-US/preview.js"></script>
+    <script src="https://cdn01.boxcdn.net/platform/preview/3.109.0/en-US/preview.js"></script>
     <link
       rel="stylesheet"
-      href="https://cdn01.boxcdn.net/platform/preview/3.108.0/en-US/preview.css"
+      href="https://cdn01.boxcdn.net/platform/preview/3.109.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.108.0`
+- Check out a specific version with `git checkout v3.109.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.js

@@ -374,6 +374,7 @@ class PreviewError extends Error {
 /* 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 */   dl: () => (/* binding */ AUDIO_PLAYER_V2_RESIN_FEATURE),
 /* harmony export */   eA: () => (/* binding */ SUBTITLES_OFF),
 /* harmony export */   eF: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_CONTENT),
 /* harmony export */   eM: () => (/* binding */ CLASS_BOX_PREVIEW_HAS_NAVIGATION),
@@ -532,6 +533,7 @@ const X_REP_HINT_VIDEO_MP4 = '[mp4]';
 const X_REP_HINT_WAVEFORM = '[waveform]';
 const AI_TRANSCRIPTION_FOR_VIDEO_SUBTITLES = 'aiTranscriptionForVideoSubtitles';
 const AUDIO_PLAYER_V2 = 'audioPlayerV2.enabled';
+const AUDIO_PLAYER_V2_RESIN_FEATURE = 'audioPlayerV2';
 
 // 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.
@@ -1032,7 +1034,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.108.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.109.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 = {};
@@ -5791,6 +5793,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   onPreviewChange,
   onRangeChange,
   onRangeClear,
+  onResinAction,
   range,
   readOnly = false,
   viewport
@@ -5963,6 +5966,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     }
     event.preventDefault();
     event.stopPropagation();
+    onResinAction?.('waveformRangeResize');
     const resolved = (0,waveform_range/* resolveRange */.Ss)(rangeRef.current, (0,waveform_range/* durationMsFromSec */.uH)(durationSecRef.current));
     dragRef.current = {
       handle,
@@ -5984,7 +5988,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       endMs: (0,waveform_range/* isRangeCollapsed */.BT)(rangeRef.current) ? null : resolved.endMs,
       startMs: resolved.startMs
     });
-  }, [interactive, readOnly]);
+  }, [interactive, onResinAction, readOnly]);
   const onHandlePointerDown = (0,external_react_.useCallback)(event => {
     const root = rootRef.current;
     if (!root) {
@@ -6058,6 +6062,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       ref: commentButtonRef,
       "aria-label": "Clear",
       className: "bp-WaveformRange-comment bp-WaveformRange-comment--clearOnly",
+      "data-resin-target": "waveformRangeClear",
+      "data-target-id": "Waveform-clearRange",
       "data-testid": "bp-waveform-range-clear",
       onClick: event => {
         stopRangeEvent(event);
@@ -6075,6 +6081,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     const commentAction = /*#__PURE__*/external_react_["default"].createElement("button", {
       ref: showClearControl ? undefined : commentButtonRef,
       className: showClearControl ? 'bp-WaveformRange-commentLabel' : 'bp-WaveformRange-comment',
+      "data-resin-target": "waveformRangeComment",
+      "data-target-id": "Waveform-commentOnRange",
       "data-testid": "bp-waveform-range-comment",
       onClick: event => {
         stopRangeEvent(event);
@@ -6096,6 +6104,8 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     }), /*#__PURE__*/external_react_["default"].createElement("button", {
       "aria-label": "Clear",
       className: "bp-WaveformRange-commentClear",
+      "data-resin-target": "waveformRangeClear",
+      "data-target-id": "Waveform-clearRange",
       "data-testid": "bp-waveform-range-clear",
       onClick: event => {
         stopRangeEvent(event);
@@ -6130,6 +6140,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     className: classnames_default()('bp-WaveformRange-handle', 'bp-WaveformRange-handle--start', {
       'bp-WaveformRange-handle--dragging': activeHandle === 'start'
     }),
+    "data-target-id": "Waveform-resizeRangeStart",
     "data-testid": "bp-waveform-range-handle-start",
     onMouseMove: event => event.stopPropagation(),
     onPointerDown: onHandlePointerDown
@@ -6140,6 +6151,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     className: classnames_default()('bp-WaveformRange-handle', 'bp-WaveformRange-handle--end', {
       'bp-WaveformRange-handle--dragging': activeHandle === 'end'
     }),
+    "data-target-id": "Waveform-resizeRangeEnd",
     "data-testid": "bp-waveform-range-handle-end",
     onMouseMove: event => event.stopPropagation(),
     onPointerDown: onHandlePointerDown
@@ -6177,6 +6189,13 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 
 
 
+function recordGestureSession(lastAtRef, target, record) {
+  const currentTime = Date.now();
+  if (currentTime - lastAtRef.current > constants/* WAVEFORM_RESIN_GESTURE_GAP_MS */.Uz) {
+    record?.(target);
+  }
+  lastAtRef.current = currentTime;
+}
 
 /** Pointer X in the view and the media time under it; zoom keeps this point fixed. */
 
@@ -6339,6 +6358,7 @@ function WaveformView({
   onRangeClear,
   onRangeDragCreate,
   onRangeDragChange,
+  onResinAction,
   onSeek,
   onViewportChange,
   onZoomChange,
@@ -6367,6 +6387,7 @@ function WaveformView({
   const onRangeChangeRef = (0,external_react_.useRef)(onRangeChange); // latest range commit; drag-create must not re-bind
   const onRangeClearRef = (0,external_react_.useRef)(onRangeClear); // latest click-outside clear; WaveSurfer click must not re-bind
   const onRangeDragChangeRef = (0,external_react_.useRef)(onRangeDragChange); // latest drag flag; unmount must not re-bind
+  const onResinActionRef = (0,external_react_.useRef)(onResinAction); // latest resin callback; gesture listeners must not re-bind
   const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
   const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange); // latest viewport callback; camera commits here
   const peaksRef = (0,external_react_.useRef)(peaks); // latest peaks; WaveSurfer create() + morph read this
@@ -6381,6 +6402,8 @@ function WaveformView({
   const isPlayheadDraggingRef = (0,external_react_.useRef)(false); // playhead drag owns position until pointerup
   const lastObservedWidthRef = (0,external_react_.useRef)(0); // last ResizeObserver width; skip no-op resizes
   const liveHeightRef = (0,external_react_.useRef)(height); // canvas height last applied to WaveSurfer
+  const lastPinchResinAtRef = (0,external_react_.useRef)(0); // last pinch resin time; one zoomIn/zoomOut per WAVEFORM_RESIN_GESTURE_GAP_MS
+  const lastSwipeResinAtRef = (0,external_react_.useRef)(0); // last tape-swipe resin time; one waveformSwipe per burst
   const pinchStartRef = (0,external_react_.useRef)(null); // two-finger distance and zoom at pinch start
   const playheadDragRef = (0,external_react_.useRef)(null); // active playhead drag; pointerup seeks
   const playheadPinRef = (0,external_react_.useRef)(null); // dragged time until media/props catch up
@@ -6407,6 +6430,7 @@ function WaveformView({
   onRangeChangeRef.current = onRangeChange;
   onRangeClearRef.current = onRangeClear;
   onRangeDragChangeRef.current = onRangeDragChange;
+  onResinActionRef.current = onResinAction;
   onSeekRef.current = onSeek;
   onViewportChangeRef.current = onViewportChange;
   peaksRef.current = peaks;
@@ -6524,6 +6548,7 @@ function WaveformView({
       suppressNextTapPlayPauseTimerRef.current = 0;
       return;
     }
+    onResinActionRef.current?.('playPause');
     onPlayPauseRef.current?.(!isPlayingRef.current);
     suppressTapToPlayPause();
   }, [isUserPanning, suppressTapToPlayPause]);
@@ -6574,6 +6599,7 @@ function WaveformView({
    * show the scrub chip until the swipe settles.
    */
   const handleTapeSwipe = (0,external_react_.useCallback)(timeSec => {
+    recordGestureSession(lastSwipeResinAtRef, 'waveformSwipe', onResinActionRef.current);
     // Swallow the click WaveSurfer/iOS fires after a swipe or pinch.
     suppressNextTapPlayPauseRef.current = true;
     window.clearTimeout(suppressNextTapPlayPauseTimerRef.current);
@@ -6738,12 +6764,14 @@ function WaveformView({
           viewport: viewportRef.current
         })) {
           onRangeClearRef.current?.();
+          onResinActionRef.current?.('waveformRangeDismiss');
         }
       }
       if (cameraModeRef.current === 'tape') {
         toggleTapePlaybackRef.current?.();
         return;
       }
+      onResinActionRef.current?.('waveformSeek');
       onSeekRef.current?.(timeSec);
     });
     const unsubscribeScroll = wavesurfer.on('scroll', () => {
@@ -7024,6 +7052,7 @@ function WaveformView({
         return;
       }
       event.preventDefault();
+      recordGestureSession(lastPinchResinAtRef, event.deltaY > 0 ? 'zoomOut' : 'zoomIn', onResinActionRef.current);
       captureZoomOrigin(event.clientX);
       setZoomLevel(zoomRef.current * Math.exp(-event.deltaY * 0.01));
     };
@@ -7049,9 +7078,13 @@ function WaveformView({
         return;
       }
       event.preventDefault();
+      const distance = touchDistance(event.touches);
+      if (distance !== pinch.distance) {
+        recordGestureSession(lastPinchResinAtRef, distance > pinch.distance ? 'zoomIn' : 'zoomOut', onResinActionRef.current);
+      }
       zoomOriginRef.current = zoomOriginFromPinch(event.touches);
       markPointerZoom();
-      setZoomLevel(pinch.zoom * (touchDistance(event.touches) / pinch.distance));
+      setZoomLevel(pinch.zoom * (distance / pinch.distance));
     };
     const onTouchEnd = event => {
       if (event.touches.length < 2) {
@@ -7246,6 +7279,7 @@ function WaveformView({
       drag.range = drawnRangeFromMove(drag, moveEvent.clientX, moveTrack, viewportRef.current, playheadSec, durationSecRef.current);
       if (!drag.active) {
         drag.active = true;
+        onResinActionRef.current?.('waveformRangeCreate');
         handleRangeDragChange(true);
       }
       setCreateRange(drag.range);
@@ -7441,6 +7475,7 @@ function WaveformView({
     } catch {
       return; // Don't start a drag we cannot track after the pointer leaves.
     }
+    onResinActionRef.current?.('waveformPlayheadDrag');
     const fromSec = mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
     playheadDragRef.current = {
       fromSec,
@@ -7553,6 +7588,7 @@ function WaveformView({
     onPointerUp: onPlayheadPointerUp
   }, showPlayheadComment && /*#__PURE__*/external_react_["default"].createElement("button", {
     className: "bp-WaveformRange-comment bp-WaveformView-playheadComment",
+    "data-resin-target": "waveformPlayheadComment",
     "data-target-id": "Waveform-commentAtTime",
     "data-testid": "bp-waveform-playhead-comment",
     onClick: event => {
@@ -7579,6 +7615,7 @@ function WaveformView({
     onDragPointerX: clientX => {
       rangeDragPointerXRef.current = clientX;
     },
+    onResinAction: onResinAction,
     onPreviewChange: setPreviewRange,
     onRangeChange: interactive && !isOverlayReadOnly ? onRangeChange : undefined,
     onRangeClear: isTape && !isRangeDragging ? onRangeClear : undefined,
@@ -7859,6 +7896,7 @@ function MP3ControlsV2({
   onCommentRangeDragCreate,
   onCommentRangeDragChange,
   onPlayheadComment,
+  onResinAction,
   onMuteChange,
   onPlayPause,
   onPlayNextChange,
@@ -7985,11 +8023,12 @@ function MP3ControlsV2({
       if (!(target instanceof Element) || target.closest(RANGE_DISMISS_IGNORE)) {
         return;
       }
+      onResinAction?.('waveformRangeDismiss');
       onCommentRangeClear();
     };
     root.addEventListener('pointerdown', onPointerDown);
     return () => root.removeEventListener('pointerdown', onPointerDown);
-  }, [canDismissOpenRange, onCommentRangeClear]);
+  }, [canDismissOpenRange, onCommentRangeClear, onResinAction]);
   const isWaitingToPlay = hasStarted && !hasMediaMetadata;
   const showPlayOverlay = !hasStarted && !isPlaying;
   const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
@@ -8015,6 +8054,7 @@ function MP3ControlsV2({
     mediaEl: mediaEl,
     onPlayheadComment: isWaveformInteractive && !shuttleDirection ? onPlayheadComment : undefined,
     onPlayPause: isWaveformInteractive ? onPlayPause : undefined,
+    onResinAction: onResinAction,
     onRangeChange: isWaveformInteractive ? onCommentRangeChange : undefined,
     onRangeClear: isWaveformInteractive ? onCommentRangeClear : undefined,
     onRangeDragChange: onCommentRangeDragChange,
@@ -8052,6 +8092,8 @@ function MP3ControlsV2({
     dangerouslySetInnerHTML: {
       __html: play_48px
     },
+    "data-resin-target": "playOverlay",
+    "data-target-id": "MP3ControlsV2-play",
     "data-testid": "bp-MP3ControlsV2-play-overlay",
     onClick: handlePlayOverlayClick,
     onMouseDown: event => event.preventDefault(),
@@ -8183,6 +8225,7 @@ function isFpsAvailable(player) {
 /* harmony export */   Oe: () => (/* binding */ WAVEFORM_TAPE_RANGE_LONG_PRESS_CANCEL_PX),
 /* harmony export */   QD: () => (/* binding */ WAVEFORM_ZOOM_BUTTON_STEP),
 /* harmony export */   RQ: () => (/* binding */ WAVEFORM_TAPE_RANGE_LONG_PRESS_MS),
+/* harmony export */   Uz: () => (/* binding */ WAVEFORM_RESIN_GESTURE_GAP_MS),
 /* harmony export */   VS: () => (/* binding */ WAVEFORM_RANGE_EDGE_SCROLL_AUDIO_SEC_PER_SEC),
 /* harmony export */   XS: () => (/* binding */ WAVEFORM_BAR_MIN_HEIGHT),
 /* harmony export */   Zs: () => (/* binding */ WAVEFORM_FOLLOW_SCROLL_SETTLE_MS),
@@ -8246,6 +8289,8 @@ const WAVEFORM_PLAYHEAD_JUMP_MS = 400;
 const WAVEFORM_FOLLOW_SCROLL_SETTLE_MS = 150;
 /** Ignore a WaveSurfer click after a tape swipe (iOS delayed click). Must outlast the scrub-chip hide. */
 const WAVEFORM_TAPE_CLICK_SUPPRESS_MS = 200;
+/** One pinch or swipe burst. Same idle gap image, doc, text, and gallery use for pinch resin. */
+const WAVEFORM_RESIN_GESTURE_GAP_MS = 200;
 const WAVEFORM_BAR_GAP = 2;
 const WAVEFORM_BAR_WIDTH = 2;
 const WAVEFORM_BAR_RADIUS = WAVEFORM_BAR_WIDTH / 2;
@@ -25364,7 +25409,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.108.0";
+const CLIENT_VERSION = "3.109.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -38127,7 +38172,10 @@ function MP3ControlsRoot_toPrimitive(t, r) { if ("object" != typeof t || !t) ret
 
 class MP3ControlsRoot {
   constructor({
-    containerEl
+    containerEl,
+    fileExtension,
+    fileId,
+    resinFeature
   }) {
     MP3ControlsRoot_defineProperty(this, "containerEl", void 0);
     MP3ControlsRoot_defineProperty(this, "controlsEl", void 0);
@@ -38135,6 +38183,12 @@ class MP3ControlsRoot {
     this.controlsEl = document.createElement('div');
     this.controlsEl.setAttribute('class', 'bp-MP3ControlsRoot');
     this.controlsEl.setAttribute('data-testid', 'bp-controls');
+    this.controlsEl.setAttribute('data-resin-component', 'toolbar');
+    if (resinFeature) {
+      this.controlsEl.setAttribute('data-resin-feature', resinFeature);
+    }
+    this.controlsEl.setAttribute('data-resin-fileid', fileId != null ? String(fileId) : '');
+    this.controlsEl.setAttribute('data-resin-fileextension', fileExtension || '');
     this.containerEl = containerEl;
     this.containerEl.appendChild(this.controlsEl);
     this.root = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.controlsEl);
@@ -38164,6 +38218,8 @@ var validateWaveformPayload = __webpack_require__(1053);
 
 ;// ./src/lib/viewers/media/MP3Viewer.js
 function MP3Viewer_extends() { return MP3Viewer_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; }, MP3Viewer_extends.apply(null, arguments); }
+function MP3Viewer_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function MP3Viewer_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? MP3Viewer_ownKeys(Object(t), !0).forEach(function (r) { MP3Viewer_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : MP3Viewer_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function MP3Viewer_defineProperty(e, r, t) { return (r = MP3Viewer_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function MP3Viewer_toPropertyKey(t) { var i = MP3Viewer_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function MP3Viewer_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -38242,6 +38298,23 @@ function createLoadFailedError(message) {
 class MP3Viewer extends media_MediaBaseViewer {
   constructor(...args) {
     super(...args);
+    /**
+     * One toolbar resin event.
+     *
+     * @param {string} target
+     * @return {void}
+     */
+    MP3Viewer_defineProperty(this, "recordToolbarAction", target => {
+      const file = this.options.file || {};
+      this.options.resin?.recordAction({
+        action: 'programmatic',
+        component: 'toolbar',
+        feature: constants/* AUDIO_PLAYER_V2_RESIN_FEATURE */.dl,
+        target,
+        fileId: file.id,
+        fileExtension: file.extension
+      });
+    });
     /**
      * @inheritdoc
      */
@@ -38510,14 +38583,67 @@ class MP3Viewer extends media_MediaBaseViewer {
     }
     return super.onKeydown(key, event);
   }
+  /**
+   * Route slider and settings programmatic events through the audio v2 feature.
+   * Clicks pick the same feature up from data-resin-feature on the player root.
+   *
+   * @return {void}
+   */
+  bindAudioPlayerV2Resin() {
+    const host = this.options.resin;
+    if (!this.isAudioPlayerV2 || !host || typeof host.recordAction !== 'function' || this.audioPlayerV2ResinHost) {
+      return;
+    }
+    this.audioPlayerV2ResinHost = host;
+    const wrapped = {
+      recordAction: props => host.recordAction(MP3Viewer_objectSpread({
+        feature: constants/* AUDIO_PLAYER_V2_RESIN_FEATURE */.dl
+      }, props))
+    };
+    this.options.resin = wrapped;
+    if (window.Box?.Preview) {
+      window.Box.Preview.resin = wrapped;
+    }
+  }
+
+  /**
+   * @return {void}
+   */
+  unbindAudioPlayerV2Resin() {
+    const host = this.audioPlayerV2ResinHost;
+    if (!host) {
+      return;
+    }
+    this.options.resin = host;
+    if (window.Box?.Preview) {
+      window.Box.Preview.resin = host;
+    }
+    this.audioPlayerV2ResinHost = null;
+  }
+
+  /**
+   * @return {MP3ControlsRoot}
+   */
+  createControlsRoot() {
+    this.bindAudioPlayerV2Resin();
+    const file = this.options.file || {};
+    return new MP3ControlsRoot({
+      containerEl: this.mediaContainerEl,
+      fileExtension: file.extension || '',
+      fileId: file.id,
+      resinFeature: this.isAudioPlayerV2 ? constants/* AUDIO_PLAYER_V2_RESIN_FEATURE */.dl : undefined
+    });
+  }
   handleKeydownAudioV2(key, event) {
     const decoded = (key || '').toLowerCase();
     const altKey = !!(event && event.altKey);
     switch (decoded) {
       case 'space':
+        this.recordToolbarAction('playPause');
         this.toggleV2Play();
         return true;
       case 'k':
+        this.recordToolbarAction('playPause');
         this.exitShuttle();
         this.pause(undefined, true);
         return true;
@@ -38528,15 +38654,19 @@ class MP3Viewer extends media_MediaBaseViewer {
         this.shuttle('forward');
         return true;
       case 'arrowleft':
+        this.recordToolbarAction('seekBackward');
         this.quickSeek(-AUDIO_V2_SKIP_SEC);
         return true;
       case 'arrowright':
+        this.recordToolbarAction('seekForward');
         this.quickSeek(AUDIO_V2_SKIP_SEC);
         return true;
       case ',':
+        this.recordToolbarAction('frameBackward');
         this.frameStep('back');
         return true;
       case '.':
+        this.recordToolbarAction('frameForward');
         this.frameStep('forward');
         return true;
       case 'arrowup':
@@ -38557,17 +38687,25 @@ class MP3Viewer extends media_MediaBaseViewer {
         if (!this.mediaEl || !Number.isFinite(this.mediaEl.duration)) {
           return false;
         }
+        this.recordToolbarAction('seekEnd');
         this.exitShuttle();
         this.setMediaTime(this.mediaEl.duration);
         return true;
       case '0':
       case 'home':
+        this.recordToolbarAction('seekStart');
         this.exitShuttle();
         return false;
+      case 'm':
+      case 'shift+m':
+        this.recordToolbarAction('volumeToggle');
+        return false;
       case 'shift+arrowleft':
+        this.recordToolbarAction('skipBackward');
         this.quickSeek(-AUDIO_V2_SHIFT_SKIP_SEC);
         return true;
       case 'shift+arrowright':
+        this.recordToolbarAction('skipForward');
         this.quickSeek(AUDIO_V2_SHIFT_SKIP_SEC);
         return true;
       case 'i':
@@ -38580,10 +38718,12 @@ class MP3Viewer extends media_MediaBaseViewer {
       case 'shift++':
       case '+':
       case '=':
+        this.recordToolbarAction('waveformZoomIn');
         this.stepKeyboardZoom(1);
         return true;
       case '-':
       case 'shift+_':
+        this.recordToolbarAction('waveformZoomOut');
         this.stepKeyboardZoom(-1);
         return true;
       default:
@@ -38604,6 +38744,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     if ((0,useTapeWaveform/* isTapeWaveformInput */.MQ)()) {
       return;
     }
+    this.recordToolbarAction(direction === 'forward' ? 'shuttleForward' : 'shuttleReverse');
     const sameDirection = this.shuttleDirection === direction;
     const rate = nextShuttleRate(this.shuttleRate, sameDirection);
     if (direction === 'forward') {
@@ -38697,9 +38838,11 @@ class MP3Viewer extends media_MediaBaseViewer {
     if (!target || target.id === this.hostSelectedMarkerId) {
       return;
     }
+    this.recordToolbarAction(direction < 0 ? 'commentMarkerPrevious' : 'commentMarkerNext');
     this.handleCommentMarkerClick(target);
   }
   stepKeyboardVolume(direction) {
+    this.recordToolbarAction('volumeSlider');
     this.keyboardVolumeStep += 1;
     if (direction > 0) {
       this.increaseVolume();
@@ -38741,6 +38884,10 @@ class MP3Viewer extends media_MediaBaseViewer {
    */
   fallbackToV1Controls() {
     this.isAudioPlayerV2 = false;
+    this.unbindAudioPlayerV2Resin();
+    if (this.controls && this.controls.controlsEl) {
+      this.controls.controlsEl.removeAttribute('data-resin-feature');
+    }
     this.abortWaveformLoads();
     if (this.wrapperEl) {
       this.wrapperEl.classList.remove('bp-media--v2');
@@ -38788,6 +38935,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.shuttleDirection = null;
     this.shuttleRate = 0;
     this.abortWaveformLoads();
+    this.unbindAudioPlayerV2Resin();
     super.destroy();
   }
 
@@ -38817,9 +38965,7 @@ class MP3Viewer extends media_MediaBaseViewer {
   showAudioLoadingShell() {
     this.showMedia();
     if (!this.controls) {
-      this.controls = new MP3ControlsRoot({
-        containerEl: this.mediaContainerEl
-      });
+      this.controls = this.createControlsRoot();
     }
     this.ensureV2Controls().then(Mp3ControlsV2 => {
       if (this.destroyed) {
@@ -39201,9 +39347,7 @@ class MP3Viewer extends media_MediaBaseViewer {
   loadUIReact() {
     super.loadUIReact();
     if (!this.controls) {
-      this.controls = new MP3ControlsRoot({
-        containerEl: this.mediaContainerEl
-      });
+      this.controls = this.createControlsRoot();
     }
     this.bindCommentMarkersListener();
     this.bindCommentRangeDraftListeners();
@@ -39461,6 +39605,7 @@ class MP3Viewer extends media_MediaBaseViewer {
         onCommentRangeDragChange: this.handleCommentRangeDragChange,
         onCommentRangeDragCreate: this.getCanCreateComment() ? this.handleCommentRangeDragCreate : undefined,
         onPlayheadComment: this.getCanCreateComment() ? this.handlePlayheadComment : undefined,
+        onResinAction: this.recordToolbarAction,
         onPlayNextChange: this.setPlayNext,
         peaks: this.waveformPeaks,
         playNext: this.isPlayNextEnabled(),

package/package.json

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