box-content-preview 3.114.0 → 3.115.0

package/dist/lib/index.js

@@ -31,11 +31,12 @@ import { default as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_features_virtua
 import { AutoSizer as __WEBPACK_EXTERNAL_MODULE__box_react_virtualized_ec986521_AutoSizer__, Column as __WEBPACK_EXTERNAL_MODULE__box_react_virtualized_ec986521_Column__, SortDirection as __WEBPACK_EXTERNAL_MODULE__box_react_virtualized_ec986521_SortDirection__ } from "@box/react-virtualized";
 import { default as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_breadcrumb_da64b71d_default__ } from "box-ui-elements/es/components/breadcrumb";
 import { default as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_plain_button_PlainButton_6ddbae5a_default__ } from "box-ui-elements/es/components/plain-button/PlainButton";
-import { Pause as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Pause__, Play as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Play__ } from "@box/blueprint-web-assets/icons/MediumFilled";
 import { createPortal as __WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee_createPortal__ } from "react-dom";
 import { Grid as __WEBPACK_EXTERNAL_MODULE__box_react_virtualized_dist_es_Grid_5f3cce90_Grid__ } from "@box/react-virtualized/dist/es/Grid";
 import * as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__ from "@box/blueprint-web";
 import * as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__ from "@box/blueprint-web-assets/icons/Medium";
+import * as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c__ from "@box/blueprint-web-assets/icons/MediumFilled";
+import * as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_tokens_tokens_b764a744__ from "@box/blueprint-web-assets/tokens/tokens";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7__ from "react-dom/client";
 import { default as __WEBPACK_EXTERNAL_MODULE_axios_default__ } from "axios";
@@ -46,10 +47,22 @@ import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Me
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_PencilTip_154ad3fd_default__ } from "@box/blueprint-web-assets/icons/Medium/PencilTip";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_SquarePlus_c11758f1_default__ } from "@box/blueprint-web-assets/icons/Medium/SquarePlus";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_TCursorHighlight_508374cb_default__ } from "@box/blueprint-web-assets/icons/Medium/TCursorHighlight";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Search_ef3e4aba_default__ } from "@box/blueprint-web-assets/icons/Medium/Search";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMaximize_12b9ae40_default__ } from "@box/blueprint-web-assets/icons/Medium/ArrowsMaximize";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMinimize_35faab95_default__ } from "@box/blueprint-web-assets/icons/Medium/ArrowsMinimize";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_GridView_ac92b674_default__ } from "@box/blueprint-web-assets/icons/Medium/GridView";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronDown_a545a634_default__ } from "@box/blueprint-web-assets/icons/Medium/ChevronDown";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronUp_d399c022_default__ } from "@box/blueprint-web-assets/icons/Medium/ChevronUp";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_RotateLeft_c726d679_default__ } from "@box/blueprint-web-assets/icons/Medium/RotateLeft";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Nav_d41e959a_default__ } from "@box/blueprint-web-assets/icons/Medium/Nav";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_Nav_ae6d790f_default__ } from "@box/blueprint-web-assets/icons/MediumFilled/Nav";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Minus_cc9df143_default__ } from "@box/blueprint-web-assets/icons/Medium/Minus";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Plus_aaa7b14f_default__ } from "@box/blueprint-web-assets/icons/Medium/Plus";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Checkmark_52a58454_default__ } from "@box/blueprint-web-assets/icons/Medium/Checkmark";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Download_0dc63cde_default__ } from "@box/blueprint-web-assets/icons/Medium/Download";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Ellipsis_9a96c07b_default__ } from "@box/blueprint-web-assets/icons/Medium/Ellipsis";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Expand_92c6b888_default__ } from "@box/blueprint-web-assets/icons/Medium/Expand";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Trash_28211f44_default__ } from "@box/blueprint-web-assets/icons/Medium/Trash";
 import { PreviewLoading as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_preview_386c8d2b_PreviewLoading__, getIcon as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_preview_386c8d2b_getIcon__ } from "box-ui-elements/es/components/preview";
 /******/ var __webpack_modules__ = ({
 
@@ -57,12 +70,16 @@ import { PreviewLoading as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_componen
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (/* binding */ BlueprintProviders)
+/* harmony export */   A: () => (/* binding */ BlueprintProviders),
+/* harmony export */   n: () => (/* binding */ PortalContainerContext)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
 /* harmony import */ var _box_blueprint_web__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8912);
 
 
+// Tooltips read the container from TooltipProvider; Popover and DropdownMenu content take it as a prop.
+const PortalContainerContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createContext(undefined);
+
 // Preview has no Split client, so Blueprint's treatment-driven configuration resolves to its defaults.
 function BlueprintProviders({
   children,
@@ -70,9 +87,11 @@ function BlueprintProviders({
 }) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_box_blueprint_web__WEBPACK_IMPORTED_MODULE_1__.BlueprintProvider, {
     useTreatment: _box_blueprint_web__WEBPACK_IMPORTED_MODULE_1__.useNoopTreatment
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(PortalContainerContext.Provider, {
+    value: container
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_box_blueprint_web__WEBPACK_IMPORTED_MODULE_1__.TooltipProvider, {
     container: container
-  }, children));
+  }, children)));
 }
 
 /***/ },
@@ -1082,7 +1101,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.114.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.115.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 = {};
@@ -4251,7 +4270,29 @@ function MediaToggle(props) {
 
 /***/ },
 
-/***/ 2677
+/***/ 2048
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (/* binding */ PlayOverlayIcon)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
+/* harmony import */ var _box_blueprint_web_assets_icons_MediumFilled__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5903);
+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); }
+
+
+
+// IconButton sizes its icon from its own size map (24px at most); play overlays need 48px.
+function PlayOverlayIcon(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement(_box_blueprint_web_assets_icons_MediumFilled__WEBPACK_IMPORTED_MODULE_1__.Play, _extends({}, props, {
+    height: 48,
+    width: 48
+  }));
+}
+
+/***/ },
+
+/***/ 5760
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -4264,8 +4305,8 @@ __webpack_require__.d(__webpack_exports__, {
 var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: external "@box/blueprint-web"
 var blueprint_web_ = __webpack_require__(8912);
-;// external "@box/blueprint-web-assets/icons/MediumFilled"
-
+// EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/MediumFilled"
+var MediumFilled_ = __webpack_require__(5903);
 ;// ./src/lib/viewers/controls/icons/IconPause24.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); }
 
@@ -4325,7 +4366,7 @@ function PlayPauseButton({
       "aria-label": title,
       "data-resin-target": "playPause",
       "data-target-id": "PlayPauseButton-playPause",
-      icon: isPlaying ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Pause__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Play__,
+      icon: isPlaying ? MediumFilled_.Pause : MediumFilled_.Play,
       onClick: handleClick,
       onKeyDown: utils/* stopActivationKeyPropagation */.My,
       size: "large",
@@ -4357,8 +4398,8 @@ var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: ./node_modules/lodash/noop.js
 var noop = __webpack_require__(3950);
 var noop_default = /*#__PURE__*/__webpack_require__.n(noop);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 3 modules
-var PlayPauseButton = __webpack_require__(2677);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 2 modules
+var PlayPauseButton = __webpack_require__(5760);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/SkipButton.tsx + 2 modules
 var SkipButton = __webpack_require__(2659);
 ;// ./src/lib/viewers/controls/media/PlayPauseToggle.scss
@@ -4496,7 +4537,7 @@ function SkipButton({
 
 /***/ },
 
-/***/ 3904
+/***/ 3308
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -4512,6 +4553,12 @@ var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: ./node_modules/classnames/index.js
 var classnames = __webpack_require__(2485);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+// EXTERNAL MODULE: external "@box/blueprint-web"
+var blueprint_web_ = __webpack_require__(8912);
+// EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/Medium"
+var Medium_ = __webpack_require__(9747);
+// EXTERNAL MODULE: external "@box/blueprint-web-assets/tokens/tokens"
+var tokens_ = __webpack_require__(8380);
 // EXTERNAL MODULE: ./src/lib/viewers/media/formatTimecode.ts
 var formatTimecode = __webpack_require__(4179);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconCheckMark24.tsx
@@ -4522,8 +4569,75 @@ var IconChevronDownMedium24 = __webpack_require__(8668);
 var IconChevronUpMedium24 = __webpack_require__(2155);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/hooks/useClickOutside.ts
 var useClickOutside = __webpack_require__(2959);
+;// ./src/lib/TabularDigits.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/TabularDigits.tsx
+/* unused harmony import specifier */ var React;
+
+
+
+// The Inter subset served to the app has no tabular figures, so `font-variant-numeric: tabular-nums`
+// has no effect. Wrapping each digit in a 1ch box keeps changing numbers, and whatever follows them,
+// from shifting as they update.
+const TABULAR_DIGIT_CLASS = 'bp-TabularDigit';
+const isDigit = char => char >= '0' && char <= '9';
+const isDigitNode = node => node.nodeType === Node.ELEMENT_NODE;
+
+/**
+ * Writes `text` into `el` with each digit in a fixed-width box. For labels updated outside React,
+ * e.g. on animation frames. Unchanged characters are left in place, so a ticking clock only touches
+ * the digits that changed.
+ */
+function renderTabularDigits(el, text) {
+  if (el.textContent === text) {
+    return;
+  }
+  const chars = Array.from(text);
+  const nodes = el.childNodes;
+  const canPatch = nodes.length === chars.length && chars.every((char, index) => isDigit(char) === isDigitNode(nodes[index]));
+  if (canPatch) {
+    chars.forEach((char, index) => {
+      if (nodes[index].textContent !== char) {
+        nodes[index].textContent = char;
+      }
+    });
+    return;
+  }
+  const fragment = document.createDocumentFragment();
+  chars.forEach(char => {
+    if (isDigit(char)) {
+      const digitEl = document.createElement('span');
+      digitEl.className = TABULAR_DIGIT_CLASS;
+      digitEl.textContent = char;
+      fragment.appendChild(digitEl);
+    } else {
+      fragment.appendChild(document.createTextNode(char));
+    }
+  });
+  el.replaceChildren(fragment);
+}
+/**
+ * Renders `children` with each digit in a fixed-width box. Place it inside the element that
+ * provides the typography, e.g. `<Text as="span"><TabularDigits>{label}</TabularDigits></Text>`.
+ */
+function TabularDigits({
+  children
+}) {
+  const elRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (elRef.current) {
+      renderTabularDigits(elRef.current, children);
+    }
+  }, [children]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: elRef
+  });
+}
 // EXTERNAL MODULE: ./src/lib/viewers/media/videoFps.ts
 var videoFps = __webpack_require__(3234);
+// EXTERNAL MODULE: ./src/lib/BlueprintProviders.tsx
+var BlueprintProviders = __webpack_require__(2758);
 // EXTERNAL MODULE: ./src/lib/util.js + 1 modules
 var util = __webpack_require__(4410);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/DurationLabels.tsx + 1 modules
@@ -4543,6 +4657,11 @@ var DurationLabels = __webpack_require__(820);
 
 
 
+
+
+
+
+
 let TimeFormat = /*#__PURE__*/function (TimeFormat) {
   TimeFormat["STANDARD"] = "standard";
   TimeFormat["TIMECODE"] = "timecode";
@@ -4560,6 +4679,14 @@ function formatLabel(time, format, fps) {
       return (0,DurationLabels/* formatTime */.f)(time);
   }
 }
+
+// The viewer maps Space, Enter and the arrow keys to playback, seek and volume shortcuts.
+const stopMenuTriggerKeyPropagation = event => {
+  const key = (0,util/* decodeKeydown */.wU)(event);
+  if (key === 'Enter' || key === 'Space' || key === 'ArrowDown' || key === 'ArrowUp') {
+    event.stopPropagation();
+  }
+};
 const FORMAT_OPTIONS = [{
   label: () => "Standard time",
   value: TimeFormat.STANDARD
@@ -4575,6 +4702,7 @@ function TimestampControl({
   durationTime = 0,
   fps = videoFps/* DEFAULT_FPS */.ge,
   canChangeTimeFormat = false,
+  isBlueprintEnabled = false,
   isNarrowWidth = false,
   mediaEl
 }) {
@@ -4583,8 +4711,15 @@ function TimestampControl({
   const containerElRef = external_react_["default"].useRef(null);
   const buttonElRef = external_react_["default"].useRef(null);
   const currentElRef = external_react_["default"].useRef(null);
+  const durationElRef = external_react_["default"].useRef(null);
   const rafIdRef = external_react_["default"].useRef(0);
-  (0,useClickOutside/* default */.A)(containerElRef, () => setIsOpen(false));
+  const portalContainer = external_react_["default"].useContext(BlueprintProviders/* PortalContainerContext */.n) ?? undefined;
+  (0,useClickOutside/* default */.A)(containerElRef, () => {
+    // The Blueprint menu portals outside the container and handles outside clicks itself.
+    if (!isBlueprintEnabled) {
+      setIsOpen(false);
+    }
+  });
   external_react_["default"].useEffect(() => {
     const container = mediaEl?.closest('.bp-media-container');
     if (container) {
@@ -4600,7 +4735,12 @@ function TimestampControl({
     }
     const tick = () => {
       if (currentElRef.current && mediaEl) {
-        currentElRef.current.textContent = formatLabel(mediaEl.currentTime, format, fps);
+        const label = formatLabel(mediaEl.currentTime, format, fps);
+        if (isBlueprintEnabled) {
+          renderTabularDigits(currentElRef.current, label);
+        } else {
+          currentElRef.current.textContent = label;
+        }
       }
       rafIdRef.current = requestAnimationFrame(tick);
     };
@@ -4621,7 +4761,21 @@ function TimestampControl({
       mediaEl.removeEventListener('play', startLoop);
       mediaEl.removeEventListener('pause', stopLoop);
     };
-  }, [format, fps, mediaEl]);
+  }, [format, fps, isBlueprintEnabled, mediaEl]);
+  const currentLabel = formatLabel(currentTime, format, fps);
+  external_react_["default"].useLayoutEffect(() => {
+    // The animation frame loop owns the label while a frame-accurate format is playing.
+    const isFrameLoopRunning = format !== TimeFormat.STANDARD && mediaEl?.paused === false;
+    if (isBlueprintEnabled && currentElRef.current && !isFrameLoopRunning) {
+      renderTabularDigits(currentElRef.current, currentLabel);
+    }
+  }, [currentLabel, format, isBlueprintEnabled, mediaEl]);
+  const durationLabel = formatLabel(durationTime, format, fps);
+  external_react_["default"].useLayoutEffect(() => {
+    if (isBlueprintEnabled && durationElRef.current) {
+      renderTabularDigits(durationElRef.current, durationLabel);
+    }
+  }, [durationLabel, isBlueprintEnabled, isNarrowWidth]);
   const handleKeyDown = event => {
     const key = (0,util/* decodeKeydown */.wU)(event);
     if (key === 'Escape' && isOpen) {
@@ -4632,6 +4786,13 @@ function TimestampControl({
       event.stopPropagation();
     }
   };
+
+  // Menu keys must not reach the viewer shortcuts or the host page, which may close the preview
+  // on Escape. The Blueprint menu's own Escape listener is on the document, so close it here.
+  const handleMenuKeyDown = event => {
+    event.stopPropagation();
+    handleKeyDown(event);
+  };
   const handleSelect = selectedFormat => {
     setFormat(selectedFormat);
     setIsOpen(false);
@@ -4649,6 +4810,84 @@ function TimestampControl({
     event.stopPropagation();
     handleSelect(selectedFormat);
   };
+  const renderChevron = () => {
+    if (isBlueprintEnabled) {
+      const Chevron = isOpen ? Medium_.ChevronUp : Medium_.ChevronDown;
+      return /*#__PURE__*/external_react_["default"].createElement(Chevron, {
+        className: "bp-TimestampControl-chevron",
+        color: tokens_.bpIconCtaIconOnDark
+      });
+    }
+    return isOpen ? /*#__PURE__*/external_react_["default"].createElement(IconChevronUpMedium24/* default */.A, {
+      className: "bp-TimestampControl-chevron"
+    }) : /*#__PURE__*/external_react_["default"].createElement(IconChevronDownMedium24/* default */.A, {
+      className: "bp-TimestampControl-chevron"
+    });
+  };
+  const renderBlueprintTime = () => /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    ref: currentElRef,
+    as: "span",
+    color: "textOnDarkDefault",
+    variant: "bodyDefault"
+  }), !isNarrowWidth && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    as: "span",
+    color: "textOnDarkDefault",
+    variant: "bodyDefault"
+  }, "/"), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    ref: durationElRef,
+    as: "span",
+    color: "textOnDarkDefault",
+    variant: "bodyDefault"
+  })));
+  if (isBlueprintEnabled && !canChangeTimeFormat) {
+    return /*#__PURE__*/external_react_["default"].createElement("div", {
+      className: "bp-TimestampControl",
+      "data-testid": "bp-TimestampControl"
+    }, /*#__PURE__*/external_react_["default"].createElement("span", {
+      className: "bp-TimestampControl-static",
+      "data-testid": "bp-TimestampControl-static"
+    }, renderBlueprintTime()));
+  }
+  if (isBlueprintEnabled) {
+    return /*#__PURE__*/external_react_["default"].createElement("div", {
+      ref: containerElRef,
+      className: "bp-TimestampControl",
+      "data-testid": "bp-TimestampControl"
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Root, {
+      modal: false,
+      onOpenChange: setIsOpen,
+      open: isOpen
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Trigger, {
+      asChild: true
+    }, /*#__PURE__*/external_react_["default"].createElement("button", {
+      "aria-label": "Time format",
+      className: classnames_default()('bp-TimestampControl-button', {
+        'bp-is-open': isOpen
+      }),
+      "data-resin-target": "timeFormat",
+      "data-testid": "bp-TimestampControl-button",
+      onKeyDown: stopMenuTriggerKeyPropagation,
+      type: "button"
+    }, renderBlueprintTime(), renderChevron())), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Content, {
+      align: "center",
+      container: portalContainer,
+      "data-testid": "bp-TimestampControl-flyout",
+      onKeyDown: handleMenuKeyDown,
+      side: "top"
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.SubHeader, null, "Time format"), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.RadioGroup, {
+      onValueChange: value => setFormat(value),
+      value: format
+    }, FORMAT_OPTIONS.map(({
+      label,
+      value
+    }) => /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.RadioSelectItem, {
+      key: value,
+      "data-resin-target": `timeFormat-${value}`,
+      value: value
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+      as: "span"
+    }, label())))))));
+  }
   if (!canChangeTimeFormat) {
     return /*#__PURE__*/external_react_["default"].createElement("div", {
       className: "bp-TimestampControl",
@@ -4688,11 +4927,7 @@ function TimestampControl({
     className: "bp-TimestampControl-separator"
   }, "/"), /*#__PURE__*/external_react_["default"].createElement("span", {
     className: "bp-TimestampControl-duration"
-  }, format === TimeFormat.FRAMES ? Math.floor(durationTime * fps).toString() : formatLabel(durationTime, format, fps))), isOpen ? /*#__PURE__*/external_react_["default"].createElement(IconChevronUpMedium24/* default */.A, {
-    className: "bp-TimestampControl-chevron"
-  }) : /*#__PURE__*/external_react_["default"].createElement(IconChevronDownMedium24/* default */.A, {
-    className: "bp-TimestampControl-chevron"
-  })), isOpen && /*#__PURE__*/external_react_["default"].createElement("div", {
+  }, format === TimeFormat.FRAMES ? Math.floor(durationTime * fps).toString() : formatLabel(durationTime, format, fps))), renderChevron()), isOpen && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-TimestampControl-flyout",
     "data-testid": "bp-TimestampControl-flyout",
     onKeyDown: handleKeyDown,
@@ -5552,6 +5787,7 @@ function useDismissableMarkerSelection(hostSelectedId = null, selectionSeq = nul
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   B9: () => (/* binding */ stopToolbarKeyPropagation),
 /* harmony export */   KN: () => (/* binding */ percent),
 /* harmony export */   My: () => (/* binding */ stopActivationKeyPropagation)
 /* harmony export */ });
@@ -5572,6 +5808,14 @@ const stopActivationKeyPropagation = event => {
     event.stopPropagation();
   }
 };
+const TOOLBAR_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'End', 'Enter', 'Home', 'Space']);
+
+// Toolbars move focus with the arrow, Home and End keys, which the viewer maps to seeking.
+const stopToolbarKeyPropagation = event => {
+  if (TOOLBAR_KEYS.has((0,_util__WEBPACK_IMPORTED_MODULE_0__/* .decodeKeydown */ .wU)(event))) {
+    event.stopPropagation();
+  }
+};
 
 /***/ },
 
@@ -6489,12 +6733,18 @@ var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: ./node_modules/lodash/isFinite.js
 var lodash_isFinite = __webpack_require__(2297);
 var isFinite_default = /*#__PURE__*/__webpack_require__.n(lodash_isFinite);
+// EXTERNAL MODULE: external "@box/blueprint-web"
+var blueprint_web_ = __webpack_require__(8912);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaSettings.tsx + 6 modules
 var MediaSettings = __webpack_require__(9229);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayOverlayIcon.tsx
+var PlayOverlayIcon = __webpack_require__(2048);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseToggle.tsx + 1 modules
 var PlayPauseToggle = __webpack_require__(6321);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
-var TimestampControl = __webpack_require__(3904);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 3 modules
+var TimestampControl = __webpack_require__(3308);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
+var utils = __webpack_require__(5346);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/VolumeControls.tsx + 8 modules
 var VolumeControls = __webpack_require__(3945);
 // EXTERNAL MODULE: ./src/lib/icons/play_48px.svg
@@ -6614,8 +6864,6 @@ var buildClusters = __webpack_require__(5510);
 var MarkerAvatarStack = __webpack_require__(308);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/markers/MarkerAvatar.tsx + 1 modules
 var MarkerAvatar = __webpack_require__(2040);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
-var utils = __webpack_require__(5346);
 ;// ./src/lib/viewers/media/waveform/WaveformCommentMarkers.scss
 // extracted by mini-css-extract-plugin
 
@@ -6768,8 +7016,6 @@ function WaveformCommentMarkers({
     }));
   })));
 }
-// EXTERNAL MODULE: external "@box/blueprint-web"
-var blueprint_web_ = __webpack_require__(8912);
 ;// ./src/lib/viewers/media/waveform/WaveformGeneratingIndicator.scss
 // extracted by mini-css-extract-plugin
 
@@ -6809,6 +7055,10 @@ function WaveformGeneratingIndicator({
     className: "bp-WaveformGeneratingIndicator-label"
   }, label));
 }
+// EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/MediumFilled"
+var MediumFilled_ = __webpack_require__(5903);
+// EXTERNAL MODULE: external "@box/blueprint-web-assets/tokens/tokens"
+var tokens_ = __webpack_require__(8380);
 ;// ./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); }
 
@@ -6840,6 +7090,8 @@ var util = __webpack_require__(4410);
 
 
 
+
+
 function WaveformShuttleIndicator({
   direction,
   isBlueprintEnabled = false,
@@ -6848,6 +7100,7 @@ function WaveformShuttleIndicator({
   const isReverse = direction === 'reverse';
   const rateLabel = `${rate}x`;
   const label = (0,util/* replacePlaceholders */.Lb)(isReverse ? "Scanning backward at {1}x" : "Scanning forward at {1}x", [String(rate)]);
+  const ShuttleIcon = isReverse ? MediumFilled_.Backward : MediumFilled_.Forward;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     "aria-label": label,
     className: classnames_default()('bp-WaveformShuttle', {
@@ -6855,16 +7108,22 @@ function WaveformShuttleIndicator({
     }),
     "data-testid": "bp-waveform-shuttle",
     role: "status"
-  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconShuttleForward, {
-    "aria-hidden": "true",
-    className: "bp-WaveformShuttle-glyph"
-  }), isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+  }, isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(ShuttleIcon, {
+    "aria-hidden": true,
+    color: tokens_.bpIconIconOnDark,
+    "data-testid": "bp-waveform-shuttle-icon",
+    height: tokens_.Size5,
+    width: tokens_.Size5
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
     as: "span",
     color: "textOnDarkDefault",
     variant: "bodyDefaultSemibold"
-  }, rateLabel) : /*#__PURE__*/external_react_["default"].createElement("span", {
+  }, rateLabel)) : /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(icons_IconShuttleForward, {
+    "aria-hidden": "true",
+    className: "bp-WaveformShuttle-glyph"
+  }), /*#__PURE__*/external_react_["default"].createElement("span", {
     className: "bp-WaveformShuttle-rate"
-  }, rateLabel));
+  }, rateLabel)));
 }
 ;// external "react-dom"
 
@@ -6872,6 +7131,8 @@ function WaveformShuttleIndicator({
 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: external "@box/blueprint-web-assets/icons/Medium"
+var Medium_ = __webpack_require__(9747);
 ;// ./src/lib/viewers/media/waveform/colors.ts
 /**
  * Figma Audio Player waveform tokens as opaque fills.
@@ -7539,6 +7800,9 @@ var IconExit24 = __webpack_require__(8950);
 
 
 
+
+
+
 function stopRangeEvent(event) {
   event.stopPropagation();
 }
@@ -7586,6 +7850,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   getPlayheadSec,
   isSwiping = false,
   interactive = true,
+  isBlueprintEnabled = false,
   isHighlighted = false,
   keepHighlight = true,
   onDragChange,
@@ -7858,7 +8123,45 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
     className: "bp-WaveformRange-commentIcon"
   }), "Comment");
   let commentButton = null;
-  if (showClearOnly && onRangeClear) {
+  if (isBlueprintEnabled && (showCommentButton || showClearControl)) {
+    commentButton = /*#__PURE__*/external_react_["default"].createElement("div", {
+      ref: commentPillRef,
+      className: "bp-WaveformRange-comment bp-WaveformRange-comment--blueprint",
+      "data-testid": "bp-waveform-range-comment-toolbar",
+      role: "presentation",
+      onKeyDown: utils/* stopToolbarKeyPropagation */.B9,
+      onPointerDown: stopRangeEvent,
+      onPointerUp: stopRangeEvent
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Root, {
+      "aria-label": "Comment"
+    }, showCommentButton && onDragCreate && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+      "data-resin-target": "waveformRangeComment",
+      "data-target-id": "Waveform-commentOnRange",
+      "data-testid": "bp-waveform-range-comment",
+      onClick: event => {
+        stopRangeEvent(event);
+        onDragCreate();
+      }
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+      icon: Medium_.Comment
+    }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+      as: "span"
+    }, "Comment")), showCommentButton && showClearControl && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Separator, null), showClearControl && onRangeClear && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+      content: "Clear"
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+      "aria-label": "Clear",
+      "data-resin-target": "waveformRangeClear",
+      "data-target-id": "Waveform-clearRange",
+      "data-testid": "bp-waveform-range-clear",
+      onClick: event => {
+        stopRangeEvent(event);
+        focusMediaContainer(event);
+        onRangeClear();
+      }
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+      icon: Medium_.XMark
+    })))));
+  } else if (showClearOnly && onRangeClear) {
     commentButton = /*#__PURE__*/external_react_["default"].createElement("button", {
       ref: commentButtonRef,
       "aria-label": "Clear",
@@ -7991,6 +8294,8 @@ 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) {
@@ -9397,7 +9702,28 @@ function WaveformView({
     onPointerDown: onPlayheadPointerDown,
     onPointerMove: onPlayheadPointerMove,
     onPointerUp: onPlayheadPointerUp
-  }, showPlayheadComment && /*#__PURE__*/external_react_["default"].createElement("button", {
+  }, showPlayheadComment && isBlueprintEnabled && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-WaveformRange-comment bp-WaveformRange-comment--blueprint bp-WaveformView-playheadComment",
+    "data-testid": "bp-waveform-playhead-comment-toolbar",
+    role: "presentation",
+    onKeyDown: utils/* stopToolbarKeyPropagation */.B9,
+    onPointerDown: event => event.stopPropagation(),
+    onPointerUp: event => event.stopPropagation()
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Root, {
+    "aria-label": "Comment"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "data-resin-target": "waveformPlayheadComment",
+    "data-target-id": "Waveform-commentAtTime",
+    "data-testid": "bp-waveform-playhead-comment",
+    onClick: event => {
+      event.stopPropagation();
+      onPlayheadComment?.();
+    }
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: Medium_.Comment
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    as: "span"
+  }, "Comment")))), showPlayheadComment && !isBlueprintEnabled && /*#__PURE__*/external_react_["default"].createElement("button", {
     className: "bp-WaveformRange-comment bp-WaveformView-playheadComment",
     "data-resin-target": "waveformPlayheadComment",
     "data-target-id": "Waveform-commentAtTime",
@@ -9418,6 +9744,7 @@ function WaveformView({
     durationSec: durationSec,
     getPlayheadSec: getPlayheadSec,
     interactive: interactive && !isOverlayReadOnly,
+    isBlueprintEnabled: isBlueprintEnabled,
     isHighlighted: isRangeDragging || isRangeHovered,
     isSwiping: isTape && scrubPreviewTimeSec != null,
     keepHighlight: true,
@@ -9523,6 +9850,8 @@ var SliderControl = __webpack_require__(4937);
 
 
 
+
+
 function WaveformZoomControl({
   isBlueprintEnabled = false,
   isRevealed = false,
@@ -9582,6 +9911,11 @@ function WaveformZoomControl({
       handleStep(constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
     }
   }, [handleStep, isAtMaxZoom]);
+  const handleZoomOutClick = (0,external_react_.useCallback)(() => {
+    if (!isAtMinZoom) {
+      handleStep(-constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
+    }
+  }, [handleStep, isAtMinZoom]);
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: zoomControlElRef,
     "aria-label": "Zoom",
@@ -9628,7 +9962,22 @@ function WaveformZoomControl({
     "aria-hidden": "true",
     className: "bp-WaveformZoomControl-divider",
     "data-testid": "bp-waveform-zoom-divider"
-  })), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+  })), isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: "Zoom in"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+    "aria-disabled": isOpen && isAtMaxZoom,
+    "aria-label": "Zoom in",
+    className: "bp-WaveformZoomControl-iconButton",
+    "data-resin-target": "waveformZoomIn",
+    "data-target-id": "WaveformZoomControl-zoomIn",
+    "data-testid": "bp-waveform-zoom-in",
+    icon: Medium_.ZoomIn,
+    onClick: handleZoomInClick,
+    onKeyDown: utils/* stopActivationKeyPropagation */.My,
+    onPointerDown: handleZoomInPointerDown,
+    size: "large",
+    variant: "on-dark"
+  })) : /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
     "aria-disabled": isOpen && isAtMaxZoom,
     className: "bp-WaveformZoomControl-button",
     "data-resin-target": "waveformZoomIn",
@@ -9641,16 +9990,27 @@ function WaveformZoomControl({
     className: classnames_default()('bp-WaveformZoomControl-flyout', {
       'bp-is-open': isOpen
     })
-  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+  }, isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: "Zoom out"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+    "aria-disabled": isAtMinZoom,
+    "aria-label": "Zoom out",
+    className: "bp-WaveformZoomControl-iconButton",
+    "data-resin-target": "waveformZoomOut",
+    "data-target-id": "WaveformZoomControl-zoomOut",
+    "data-testid": "bp-waveform-zoom-out",
+    icon: Medium_.ZoomOut,
+    onClick: handleZoomOutClick,
+    onKeyDown: utils/* stopActivationKeyPropagation */.My,
+    size: "large",
+    tabIndex: isOpen ? 0 : -1,
+    variant: "on-dark"
+  })) : /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
     "aria-disabled": isAtMinZoom,
     className: "bp-WaveformZoomControl-button",
     "data-resin-target": "waveformZoomOut",
     "data-testid": "bp-waveform-zoom-out",
-    onClick: () => {
-      if (!isAtMinZoom) {
-        handleStep(-constants/* WAVEFORM_ZOOM_BUTTON_STEP */.QD);
-      }
-    },
+    onClick: handleZoomOutClick,
     tabIndex: isOpen ? 0 : -1,
     title: "Zoom out"
   }, /*#__PURE__*/external_react_["default"].createElement(icons_IconZoomOut24, null)), /*#__PURE__*/external_react_["default"].createElement(SliderControl/* default */.A, {
@@ -9691,6 +10051,9 @@ function WaveformZoomControl({
 
 
 
+
+
+
 
 const PLACEHOLDER_PEAKS = placeholderPeaks();
 
@@ -9911,7 +10274,21 @@ function MP3ControlsV2({
     maxZoom: maxZoom,
     onZoomChange: handleWaveformZoom,
     zoomLevel: zoomLevel
-  })), showPlayOverlay && /*#__PURE__*/external_react_["default"].createElement("button", {
+  })), showPlayOverlay && isBlueprintEnabled && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: "Play"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+    "aria-label": "Play",
+    className: "bp-MP3ControlsV2-playOverlayButton",
+    "data-resin-target": "playOverlay",
+    "data-target-id": "MP3ControlsV2-play",
+    "data-testid": "bp-MP3ControlsV2-play-overlay",
+    icon: PlayOverlayIcon/* default */.A,
+    onClick: handlePlayOverlayClick,
+    onKeyDown: utils/* stopActivationKeyPropagation */.My,
+    onMouseDown: event => event.preventDefault(),
+    size: "large",
+    variant: "on-dark"
+  })), showPlayOverlay && !isBlueprintEnabled && /*#__PURE__*/external_react_["default"].createElement("button", {
     className: "bp-MP3ControlsV2-playOverlay"
     // Static SVG from the icons module, same asset video uses for the overlay.
     // eslint-disable-next-line react/no-danger
@@ -9943,7 +10320,8 @@ function MP3ControlsV2({
     className: "bp-MP3ControlsV2-divider"
   }), /*#__PURE__*/external_react_["default"].createElement(TimestampControl/* default */.Ay, {
     currentTime: currentTime,
-    durationTime: durationValue
+    durationTime: durationValue,
+    isBlueprintEnabled: isBlueprintEnabled
   })), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-group"
   }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
@@ -18565,7 +18943,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["BlueprintProvider"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.BlueprintProvider), ["Breadcrumb"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Breadcrumb), ["IconButton"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.IconButton), ["IconToggleButton"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.IconToggleButton), ["LoadingIndicator"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.LoadingIndicator), ["SearchInput"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.SearchInput), ["SelectMenu"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.SelectMenu), ["Text"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Text), ["Toolbar"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Toolbar), ["Tooltip"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Tooltip), ["TooltipProvider"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.TooltipProvider), ["useNoopTreatment"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.useNoopTreatment) });
+module.exports = x({ ["BlueprintProvider"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.BlueprintProvider), ["Breadcrumb"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Breadcrumb), ["DropdownMenu"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.DropdownMenu), ["IconButton"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.IconButton), ["IconToggleButton"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.IconToggleButton), ["LoadingIndicator"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.LoadingIndicator), ["SearchInput"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.SearchInput), ["SelectMenu"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.SelectMenu), ["Text"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Text), ["Toolbar"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Toolbar), ["Tooltip"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Tooltip), ["TooltipProvider"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.TooltipProvider), ["useNoopTreatment"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.useNoopTreatment) });
 
 /***/ },
 
@@ -18576,7 +18954,29 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["ArrowCurveBack5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowCurveBack5), ["ArrowCurveForward5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowCurveForward5), ["ArrowsMaximize"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowsMaximize), ["ArrowsMinimize"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowsMinimize), ["Volume0"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume0), ["Volume1"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume1), ["Volume2"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume2), ["VolumeX"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.VolumeX) });
+module.exports = x({ ["ArrowCurveBack5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowCurveBack5), ["ArrowCurveForward5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowCurveForward5), ["ArrowsMaximize"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowsMaximize), ["ArrowsMinimize"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowsMinimize), ["ChevronDown"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ChevronDown), ["ChevronUp"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ChevronUp), ["Comment"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Comment), ["Volume0"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume0), ["Volume1"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume1), ["Volume2"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume2), ["VolumeX"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.VolumeX), ["XMark"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.XMark), ["ZoomIn"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ZoomIn), ["ZoomOut"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ZoomOut) });
+
+/***/ },
+
+/***/ 5903
+(module, __unused_webpack_exports, __webpack_require__) {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["Backward"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c__.Backward), ["Forward"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c__.Forward), ["Pause"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c__.Pause), ["Play"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c__.Play) });
+
+/***/ },
+
+/***/ 8380
+(module, __unused_webpack_exports, __webpack_require__) {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["Size5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_tokens_tokens_b764a744__.Size5), ["bpIconCtaIconOnDark"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_tokens_tokens_b764a744__.bpIconCtaIconOnDark), ["bpIconIconOnDark"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_tokens_tokens_b764a744__.bpIconIconOnDark) });
 
 /***/ },
 
@@ -34188,7 +34588,7 @@ function isNpmBuild() {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.114.0";
+const CLIENT_VERSION = "3.115.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -48498,6 +48898,12 @@ var play_48px = __webpack_require__(3493);
 const arrow_curved_back_24px_namespaceObject = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.707 2.29346C12.3165 1.90293 11.6835 1.90293 11.293 2.29346L8.64648 4.93994C8.06097 5.52574 8.06083 6.47534 8.64648 7.06104L11.293 9.70752C11.6834 10.0976 12.3166 10.0976 12.707 9.70752C13.0974 9.3171 13.0972 8.68399 12.707 8.29346L11.4131 6.99951H12C15.3136 6.99951 17.9998 9.68597 18 12.9995C18 16.3132 15.3137 18.9995 12 18.9995C10.7239 18.9995 9.54372 18.6019 8.57227 17.9243C8.11945 17.6086 7.49569 17.7198 7.17969 18.1724C6.8638 18.6252 6.97502 19.2489 7.42773 19.5649C8.72394 20.4691 10.3016 20.9995 12 20.9995C16.4183 20.9995 20 17.4178 20 12.9995C19.9998 8.5814 16.4182 4.99951 12 4.99951H11.415L12.707 3.70752C13.0975 3.31707 13.0973 2.684 12.707 2.29346ZM3.2793 8.99951C2.67882 8.99951 2.32725 9.26833 2.27832 9.9126L2.09277 12.3882V12.4126C2.06348 12.8862 2.33203 13.2964 2.92285 13.2964C3.31348 13.2964 3.49414 13.2085 3.76758 12.9692C3.99217 12.7691 4.29991 12.5933 4.68555 12.5933C5.35925 12.5933 5.83283 13.0476 5.83301 13.6919C5.83301 14.3511 5.33984 14.8394 4.6709 14.8394C4.10449 14.8394 3.7627 14.5708 3.48926 14.1606C3.27447 13.8923 3.05948 13.7798 2.72266 13.7798C2.26868 13.7798 2.00015 14.0437 2 14.4829C2 14.6537 2.04404 14.8199 2.12207 14.9761C2.4834 15.6938 3.51855 16.2212 4.68555 16.2212C6.36035 16.2212 7.52246 15.2007 7.52246 13.6528C7.52229 12.3151 6.56531 11.3774 5.23242 11.3774C4.49526 11.3774 3.92389 11.6852 3.65039 12.1489H3.61621L3.75293 10.3765H6.44824C6.87793 10.3765 7.15137 10.1079 7.15137 9.68799C7.15121 9.26828 6.87292 8.99951 6.44824 8.99951H3.2793Z\" fill=\"white\"/>\n</svg>\n";
 ;// ./src/lib/icons/arrow_curved_forward_24px.svg
 const arrow_curved_forward_24px_namespaceObject = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M11.293 2.29346C11.6835 1.90293 12.3165 1.90293 12.707 2.29346L15.3535 4.93994C15.939 5.52574 15.9392 6.47535 15.3535 7.06104L12.707 9.70752C12.3166 10.0976 11.6834 10.0976 11.293 9.70752C10.9026 9.31711 10.9028 8.684 11.293 8.29346L12.5869 6.99951H12C8.68642 6.99951 6.00021 9.68598 6 12.9995C6 16.3132 8.68629 18.9995 12 18.9995C13.2761 18.9995 14.4563 18.6019 15.4277 17.9243C15.8805 17.6086 16.5043 17.7198 16.8203 18.1724C17.1362 18.6252 17.025 19.2489 16.5723 19.5649C15.2761 20.4691 13.6984 20.9995 12 20.9995C7.58172 20.9995 4 17.4178 4 12.9995C4.00021 8.58141 7.58185 4.99951 12 4.99951H12.585L11.293 3.70752C10.9025 3.31708 10.9027 2.684 11.293 2.29346ZM20.9258 8.99951C21.3505 8.99951 21.6287 9.26828 21.6289 9.68799C21.6289 10.1079 21.3555 10.3765 20.9258 10.3765H18.2305L18.0938 12.1489H18.1279C18.4014 11.6852 18.9728 11.3774 19.71 11.3774C21.0428 11.3774 21.9998 12.3151 22 13.6528C22 15.2007 20.8379 16.2212 19.1631 16.2212C17.9961 16.2212 16.9609 15.6938 16.5996 14.9761C16.5216 14.8199 16.4775 14.6537 16.4775 14.4829C16.4777 14.0437 16.7462 13.7798 17.2002 13.7798C17.537 13.7798 17.752 13.8923 17.9668 14.1606C18.2402 14.5708 18.582 14.8394 19.1484 14.8394C19.8174 14.8394 20.3105 14.3511 20.3105 13.6919C20.3104 13.0476 19.8368 12.5933 19.1631 12.5933C18.7774 12.5933 18.4697 12.7691 18.2451 12.9692C17.9717 13.2085 17.791 13.2964 17.4004 13.2964C16.8096 13.2964 16.541 12.8862 16.5703 12.4126V12.3882L16.7559 9.9126C16.8048 9.26833 17.1564 8.99951 17.7568 8.99951H20.9258Z\" fill=\"white\"/>\n</svg>\n";
+// EXTERNAL MODULE: external "@box/blueprint-web"
+var blueprint_web_ = __webpack_require__(8912);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayOverlayIcon.tsx
+var PlayOverlayIcon = __webpack_require__(2048);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
+var utils = __webpack_require__(5346);
 ;// ./src/lib/viewers/media/fitFrameToViewport.js
 /**
  * Contain-fits a frame into the viewport (same model as object-fit: contain).
@@ -48544,6 +48950,12 @@ function VideoPreloader_toPrimitive(t, r) { if ("object" != typeof t || !t) retu
 
 
 
+
+
+
+
+
+
 class VideoPreloader extends (events_default()) {
   /**
    * [constructor]
@@ -48578,6 +48990,8 @@ class VideoPreloader extends (events_default()) {
     VideoPreloader_defineProperty(this, "preloadRequestId", 0);
     /** @property {Promise|null} - In-flight showPreload promise (single-flight) */
     VideoPreloader_defineProperty(this, "showPreloadPromise", null);
+    /** @property {Root|undefined} - React root for the Blueprint play overlay */
+    VideoPreloader_defineProperty(this, "playOverlayRoot", void 0);
     /**
      * Cleans up preload DOM.
      *
@@ -48585,6 +48999,7 @@ class VideoPreloader extends (events_default()) {
      * @return {void}
      */
     VideoPreloader_defineProperty(this, "cleanupPreload", () => {
+      this.unmountBlueprintPlayOverlay();
       if (this.wrapperEl) {
         if (this.wrapperEl.parentNode) {
           this.wrapperEl.parentNode.removeChild(this.wrapperEl);
@@ -48689,6 +49104,8 @@ class VideoPreloader extends (events_default()) {
    * @param {Object} [options] - Optional options
    * @param {Object} [options.viewport] - { width, height } to use for sizing (same as video viewport to avoid jump)
    * @param {Function} [options.onImageClick] - Called when user clicks the preload image
+   * @param {boolean} [options.isBlueprintEnabled] - Renders the play overlay as a Blueprint IconButton
+   * @param {HTMLElement} [options.portalContainer] - Container for Blueprint portaled content (tooltips)
    * @return {Promise} Promise to show preload
    */
   showPreload(preloadUrlWithAuth, containerEl, options = {}) {
@@ -48712,13 +49129,17 @@ class VideoPreloader extends (events_default()) {
         return;
       }
       this.srcUrl = URL.createObjectURL(imgBlob);
+      const {
+        isBlueprintEnabled
+      } = this.preloadOptions;
+      const playOverlayClassName = isBlueprintEnabled ? `${constants/* CLASS_BOX_PREVIEW_VIDEO_PRELOAD_PLAY_OVERLAY */.Ci} ${constants/* CLASS_BOX_PREVIEW_VIDEO_PRELOAD_PLAY_OVERLAY */.Ci}--blueprint` : constants/* CLASS_BOX_PREVIEW_VIDEO_PRELOAD_PLAY_OVERLAY */.Ci;
       const wrapperEl = document.createElement('div');
       wrapperEl.className = this.wrapperClassName;
       wrapperEl.innerHTML = `
                 <div class="${constants/* CLASS_BOX_PREVIEW_PRELOAD */.Ar} ${constants/* CLASS_INVISIBLE */.Zb}">
                     <div class="${constants/* CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER */.oK}">
                         <img class="${constants/* CLASS_BOX_PREVIEW_PRELOAD_CONTENT */.eF}" src="${this.srcUrl}" />
-                        <div class="${constants/* CLASS_BOX_PREVIEW_VIDEO_PRELOAD_PLAY_OVERLAY */.Ci}">${play_48px}</div>
+                        <div class="${playOverlayClassName}">${isBlueprintEnabled ? '' : play_48px}</div>
                     </div>
                 </div>
             `.trim();
@@ -48737,6 +49158,9 @@ class VideoPreloader extends (events_default()) {
       this.placeholderEl = this.wrapperEl.querySelector(`.${constants/* CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER */.oK}`);
       this.preloadEl = this.wrapperEl.querySelector(`.${constants/* CLASS_BOX_PREVIEW_PRELOAD */.Ar}`);
       this.imageEl = this.preloadEl.querySelector(`.${constants/* CLASS_BOX_PREVIEW_PRELOAD_CONTENT */.eF}`);
+      if (isBlueprintEnabled) {
+        this.renderBlueprintPlayOverlay();
+      }
       this.bindDOMListeners();
 
       // If image is already loaded (cached), show it immediately
@@ -48752,6 +49176,49 @@ class VideoPreloader extends (events_default()) {
     return this.showPreloadPromise;
   }
 
+  /**
+   * Renders the Blueprint play button into the thumbnail's play overlay. Clicks bubble to
+   * the wrapper's image click handler, so the button and the thumbnail start playback the same way.
+   *
+   * @private
+   * @return {void}
+   */
+  renderBlueprintPlayOverlay() {
+    const overlayEl = this.wrapperEl.querySelector(`.${constants/* CLASS_BOX_PREVIEW_VIDEO_PRELOAD_PLAY_OVERLAY */.Ci}`);
+    if (!overlayEl) {
+      return;
+    }
+    this.playOverlayRoot = (0,client_.createRoot)(overlayEl);
+    this.playOverlayRoot.render(/*#__PURE__*/external_react_["default"].createElement(BlueprintProviders/* default */.A, {
+      container: this.preloadOptions.portalContainer
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+      content: "Play"
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+      "aria-label": "Play",
+      className: "bp-video-preload-play-button",
+      "data-resin-target": "playOverlay",
+      "data-target-id": "VideoPreloader-play",
+      "data-testid": "bp-video-preload-play-button",
+      icon: PlayOverlayIcon/* default */.A,
+      onKeyDown: utils/* stopActivationKeyPropagation */.My,
+      size: "large",
+      variant: "on-dark"
+    }))));
+  }
+
+  /**
+   * Unmounts the Blueprint play overlay, if any.
+   *
+   * @private
+   * @return {void}
+   */
+  unmountBlueprintPlayOverlay() {
+    if (this.playOverlayRoot) {
+      this.playOverlayRoot.unmount();
+      this.playOverlayRoot = undefined;
+    }
+  }
+
   /**
    * Hides the preload if it exists.
    *
@@ -48825,6 +49292,10 @@ class VideoPreloader extends (events_default()) {
     }
     const playOverlay = this.wrapperEl.querySelector(`.${constants/* CLASS_BOX_PREVIEW_VIDEO_PRELOAD_PLAY_OVERLAY */.Ci}`);
     if (playOverlay) {
+      // Hiding the focused play button would drop focus to body, where Space no longer reaches the player.
+      if (playOverlay.contains(document.activeElement)) {
+        this.containerEl?.focus();
+      }
       playOverlay.classList.add(constants/* CLASS_HIDDEN */.zX);
     }
     if (this.imageClickHandler) {
@@ -49253,7 +49724,9 @@ class VideoBaseViewer extends media_MediaBaseViewer {
       url_template: template
     } = preloadRep.content;
     const options = {
-      onImageClick: () => this.handlePlayRequest()
+      isBlueprintEnabled: this.isBlueprintMediaControlsEnabled(),
+      onImageClick: () => this.handlePlayRequest(),
+      portalContainer: this.containerEl
     };
     if (this.isVideoPosterEarlyPaint) {
       // Resolve viewport at paint time so sidebar/layout changes after showPreload
@@ -50110,12 +50583,12 @@ function VideoControls({
     onFullscreenToggle: onFullscreenToggle
   })))));
 }
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 3 modules
-var PlayPauseButton = __webpack_require__(2677);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 2 modules
+var PlayPauseButton = __webpack_require__(5760);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/SkipButton.tsx + 2 modules
 var SkipButton = __webpack_require__(2659);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
-var TimestampControl = __webpack_require__(3904);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 3 modules
+var TimestampControl = __webpack_require__(3308);
 // EXTERNAL MODULE: ./src/lib/viewers/media/formatTimecode.ts
 var formatTimecode = __webpack_require__(4179);
 ;// ./src/lib/viewers/controls/media/FilmstripV2.scss
@@ -50306,8 +50779,6 @@ function MarkerCluster({
     selectedId: selectedId
   }));
 }
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
-var utils = __webpack_require__(5346);
 ;// ./src/lib/viewers/controls/media/TimeControlsV2.scss
 // extracted by mini-css-extract-plugin
 
@@ -50442,8 +50913,6 @@ function TimeControlsV2({
     selectedId: selectedId
   }))));
 }
-// EXTERNAL MODULE: external "@box/blueprint-web"
-var blueprint_web_ = __webpack_require__(8912);
 // EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/Medium"
 var Medium_ = __webpack_require__(9747);
 ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
@@ -50651,6 +51120,7 @@ function VideoControlsV2({
     currentTime: currentTime,
     durationTime: durationTime,
     fps: fps,
+    isBlueprintEnabled: isBlueprintEnabled,
     isNarrowWidth: isNarrowVideo,
     mediaEl: mediaEl
   })), /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -53559,6 +54029,95 @@ function ColorPickerControlV2({
     onClick: () => onColorSelect(color)
   }))));
 }
+;// external "@box/blueprint-web-assets/icons/Medium/Search"
+
+;// ./src/lib/viewers/controls/findbar/FindBarToggleV2.tsx
+
+
+
+function FindBarToggleV2({
+  onFindBarToggle
+}) {
+  if (!onFindBarToggle) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: "Toggle findbar"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "aria-label": "Toggle findbar",
+    "data-resin-target": "findBar",
+    onClick: ({
+      currentTarget
+    }) => onFindBarToggle(currentTarget)
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Search_ef3e4aba_default__
+  })));
+}
+;// external "@box/blueprint-web-assets/icons/Medium/ArrowsMaximize"
+
+;// external "@box/blueprint-web-assets/icons/Medium/ArrowsMinimize"
+
+;// ./src/lib/viewers/controls/fullscreen/FullscreenToggleV2.tsx
+const FullscreenToggleV2_excluded = ["onFullscreenToggle"];
+function FullscreenToggleV2_extends() { return FullscreenToggleV2_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; }, FullscreenToggleV2_extends.apply(null, arguments); }
+function FullscreenToggleV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = FullscreenToggleV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function FullscreenToggleV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+
+function FullscreenToggleV2(_ref) {
+  let {
+      onFullscreenToggle
+    } = _ref,
+    rest = FullscreenToggleV2_objectWithoutProperties(_ref, FullscreenToggleV2_excluded);
+  const isFullscreen = useFullscreen();
+  const icon = isFullscreen ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMinimize_35faab95_default__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMaximize_12b9ae40_default__;
+  const label = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+  const handleClick = ({
+    currentTarget
+  }) => {
+    onFullscreenToggle(!isFullscreen, currentTarget);
+  };
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: label
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, FullscreenToggleV2_extends({
+    "aria-label": label,
+    "data-resin-target": "fullscreen",
+    onClick: handleClick
+  }, rest), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: icon
+  })));
+}
+;// external "@box/blueprint-web-assets/icons/Medium/GridView"
+
+;// ./src/lib/viewers/controls/gallery/GalleryToggleV2.tsx
+
+
+
+
+function GalleryToggleV2({
+  isGalleryOpen,
+  onGalleryToggle
+}) {
+  if (!onGalleryToggle) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleGroup, {
+    onValueChange: () => onGalleryToggle(),
+    type: "multiple",
+    value: isGalleryOpen ? ['gallery'] : []
+  }, /*#__PURE__*/external_react_["default"].createElement(ToggleTooltipV2, {
+    content: "Gallery view"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleItem, {
+    "aria-label": "Gallery view",
+    "data-bp-gallery-toggle": "",
+    "data-resin-target": "galleryView",
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_GridView_ac92b674_default__,
+    value: "gallery"
+  })));
+}
 ;// external "@box/blueprint-web-assets/icons/Medium/ChevronDown"
 
 ;// external "@box/blueprint-web-assets/icons/Medium/ChevronUp"
@@ -53708,6 +54267,62 @@ function PageControlsV2({
     icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronDown_a545a634_default__
   }))));
 }
+;// external "@box/blueprint-web-assets/icons/Medium/RotateLeft"
+
+;// ./src/lib/viewers/controls/rotate/RotateControlV2.tsx
+
+
+
+function RotateControlV2({
+  onRotateLeft
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: "Rotate left"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "aria-label": "Rotate left",
+    "data-resin-target": "rotate",
+    onClick: onRotateLeft
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_RotateLeft_c726d679_default__
+  })));
+}
+;// external "@box/blueprint-web-assets/icons/Medium/Nav"
+
+;// external "@box/blueprint-web-assets/icons/MediumFilled/Nav"
+
+;// ./src/lib/viewers/controls/sidebar/ThumbnailsToggleV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/sidebar/ThumbnailsToggleV2.tsx
+
+
+
+
+
+
+function ThumbnailsToggleV2({
+  isThumbnailsOpen,
+  onThumbnailsToggle
+}) {
+  if (!onThumbnailsToggle) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-ThumbnailsToggleV2"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleGroup, {
+    onValueChange: () => onThumbnailsToggle(),
+    type: "multiple",
+    value: isThumbnailsOpen ? ['thumbnails'] : []
+  }, /*#__PURE__*/external_react_["default"].createElement(ToggleTooltipV2, {
+    content: "Toggle thumbnails"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleItem, {
+    "aria-expanded": isThumbnailsOpen,
+    "aria-label": "Toggle thumbnails",
+    "data-resin-target": "thumbnails",
+    icon: isThumbnailsOpen ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_Nav_ae6d790f_default__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Nav_d41e959a_default__,
+    value: "thumbnails"
+  }))));
+}
 ;// external "@box/blueprint-web-assets/icons/Medium/Minus"
 
 ;// external "@box/blueprint-web-assets/icons/Medium/Plus"
@@ -53832,10 +54447,10 @@ function DocControlsV2({
   };
   return /*#__PURE__*/external_react_["default"].createElement(ExperiencesProvider, {
     experiences: experiences
-  }, /*#__PURE__*/external_react_["default"].createElement(ControlsBarV2, null, !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(ThumbnailsToggle, {
+  }, /*#__PURE__*/external_react_["default"].createElement(ControlsBarV2, null, !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(ThumbnailsToggleV2, {
     isThumbnailsOpen: isThumbnailsOpen,
     onThumbnailsToggle: onThumbnailsToggle
-  }), /*#__PURE__*/external_react_["default"].createElement(FindBarToggle, {
+  }), /*#__PURE__*/external_react_["default"].createElement(FindBarToggleV2, {
     onFindBarToggle: onFindBarToggle
   }), /*#__PURE__*/external_react_["default"].createElement(PageControlsV2, {
     onPageChange: onPageChange,
@@ -53850,12 +54465,12 @@ function DocControlsV2({
     resinTargetZoomIn: isGalleryOpen ? 'galleryZoomIn' : undefined,
     resinTargetZoomOut: isGalleryOpen ? 'galleryZoomOut' : undefined,
     scale: scale
-  }), !isGalleryOpen && onRotateLeft && /*#__PURE__*/external_react_["default"].createElement(RotateControl, {
+  }), !isGalleryOpen && onRotateLeft && /*#__PURE__*/external_react_["default"].createElement(RotateControlV2, {
     onRotateLeft: onRotateLeft
-  }), /*#__PURE__*/external_react_["default"].createElement(GalleryToggle, {
+  }), /*#__PURE__*/external_react_["default"].createElement(GalleryToggleV2, {
     isGalleryOpen: isGalleryOpen,
     onGalleryToggle: onGalleryToggle
-  }), /*#__PURE__*/external_react_["default"].createElement(FullscreenToggle, {
+  }), /*#__PURE__*/external_react_["default"].createElement(FullscreenToggleV2, {
     onFullscreenToggle: onFullscreenToggle
   }), hasAnnotations && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Separator, null), /*#__PURE__*/external_react_["default"].createElement(AnnotationsExitButtonV2, {
     onClick: handleAnnotationsExit
@@ -57623,7 +58238,7 @@ class DocBaseViewer extends viewers_BaseViewer {
       toggleThumbnails: () => this.toggleThumbnails(),
       requestUiUpdate: () => this.renderUI(),
       focusToggle: () => {
-        const toggle = this.containerEl.querySelector('.bp-GalleryToggle');
+        const toggle = this.containerEl.querySelector('.bp-GalleryToggle, [data-bp-gallery-toggle]');
         if (toggle && toggle.focus) {
           toggle.focus();
         }
@@ -59435,6 +60050,9 @@ class DocBaseViewer extends viewers_BaseViewer {
       pagesCount
     } = this.pdfViewer;
     this.cacheThumbnailsToggledState(this.thumbnailsSidebar.isOpen);
+    if (this.featureEnabled(constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ)) {
+      this.renderUI();
+    }
     let metricName;
     let eventName;
     if (!this.thumbnailsSidebar.isOpen) {
@@ -64739,6 +65357,16 @@ office_OfficeLoader,
 doc_DocLoader,
 // should come after text
 swf_SWFLoader, video360_Video360Loader, media_MediaLoader, image360_Image360Loader, image_ImageLoader, model3d_Model3DLoader, iframe_IFrameLoader]);
+;// external "@box/blueprint-web-assets/icons/Medium/Checkmark"
+
+;// external "@box/blueprint-web-assets/icons/Medium/Download"
+
+;// external "@box/blueprint-web-assets/icons/Medium/Ellipsis"
+
+;// external "@box/blueprint-web-assets/icons/Medium/Expand"
+
+;// external "@box/blueprint-web-assets/icons/Medium/Trash"
+
 ;// ./src/lib/ComparisonBanner.tsx
 function ComparisonBanner_defineProperty(e, r, t) { return (r = ComparisonBanner_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function ComparisonBanner_toPropertyKey(t) { var i = ComparisonBanner_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -64746,6 +65374,13 @@ function ComparisonBanner_toPrimitive(t, r) { if ("object" != typeof t || !t) re
 
 
 
+
+
+
+
+
+
+
 function formatComparisonTimestamp(iso, locale) {
   if (!iso) {
     return '';
@@ -64767,7 +65402,13 @@ function getComparisonBannerAuthor(file = {}) {
 function ComparisonBanner({
   file = {},
   isComparedPreview = false,
-  locale
+  isOnDark = false,
+  locale,
+  menuContainer,
+  onDelete,
+  onDownload,
+  onMakeCurrent,
+  onOpenFullPreview
 }) {
   const versionNumber = file.version_number != null && file.version_number !== '' ? String(file.version_number) : '';
   const timestamp = formatComparisonTimestamp(file.modified_at, locale);
@@ -64776,8 +65417,10 @@ function ComparisonBanner({
     return null;
   }
   return /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: isComparedPreview ? `${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on} ${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED */.Uj}` : constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on
+  }, /*#__PURE__*/external_react_["default"].createElement("div", {
     "aria-label": isComparedPreview ? "Previous version" : "Current version",
-    className: isComparedPreview ? `${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on} ${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED */.Uj}` : constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on,
+    className: "bp-version-banner-details",
     role: "status"
   }, versionNumber && /*#__PURE__*/external_react_["default"].createElement("span", {
     className: "bp-version-banner-badge"
@@ -64787,24 +65430,88 @@ function ComparisonBanner({
     className: "bp-version-banner-time"
   }, timestamp), author && /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-version-banner-author"
-  }, author)));
+  }, author))), isComparedPreview && (onMakeCurrent || onDownload || onOpenFullPreview || onDelete) && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-version-banner-actions",
+    onKeyDown: event => {
+      event.stopPropagation(); // Prevents global key handling
+    },
+    role: "presentation"
+  }, /*#__PURE__*/external_react_["default"].createElement(BlueprintProviders/* default */.A, {
+    container: menuContainer
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Root, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Trigger, {
+    asChild: true
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+    "aria-label": "More actions",
+    "data-target-id": "ComparisonBanner-openActions",
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Ellipsis_9a96c07b_default__,
+    size: "small",
+    variant: isOnDark ? 'on-dark' : 'default'
+  })), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Content, {
+    align: "end",
+    container: menuContainer ?? undefined,
+    side: "bottom"
+  }, onMakeCurrent && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, {
+    "data-target-id": "ComparisonBanner-makeCurrent",
+    onSelect: onMakeCurrent
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Checkmark_52a58454_default__
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
+    label: "Make Current"
+  })), onDownload && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, {
+    "data-target-id": "ComparisonBanner-download",
+    onSelect: onDownload
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Download_0dc63cde_default__
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
+    label: "Download"
+  })), onOpenFullPreview && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, {
+    "data-target-id": "ComparisonBanner-openFullPreview",
+    onSelect: onOpenFullPreview
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Expand_92c6b888_default__
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
+    label: "Open Full Preview"
+  })), onDelete && (onMakeCurrent || onDownload || onOpenFullPreview) && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Separator, null), onDelete && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, {
+    "data-target-id": "ComparisonBanner-delete",
+    onSelect: onDelete,
+    variant: "destructive"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Trash_28211f44_default__
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
+    label: "Delete"
+  })))))));
 }
 class ComparisonBannerRoot {
   constructor(containerEl) {
+    ComparisonBanner_defineProperty(this, "containerEl", void 0);
     ComparisonBanner_defineProperty(this, "hostEl", void 0);
     ComparisonBanner_defineProperty(this, "root", void 0);
+    this.containerEl = containerEl;
     this.hostEl = document.createElement('div');
     containerEl.insertBefore(this.hostEl, containerEl.firstChild);
     this.root = (0,client_.createRoot)(this.hostEl);
   }
-  render(file = {}, {
-    isComparedPreview = false,
-    locale
-  } = {}) {
+  render(file = {}, options = {}) {
+    const {
+      isComparedPreview = false,
+      isOnDark,
+      locale,
+      menuContainer,
+      onDelete,
+      onDownload,
+      onMakeCurrent,
+      onOpenFullPreview
+    } = options;
     this.root.render(/*#__PURE__*/external_react_["default"].createElement(ComparisonBanner, {
       file: file,
       isComparedPreview: isComparedPreview,
-      locale: locale
+      isOnDark: isOnDark,
+      locale: locale,
+      menuContainer: menuContainer ?? this.containerEl,
+      onDelete: onDelete,
+      onDownload: onDownload,
+      onMakeCurrent: onMakeCurrent,
+      onOpenFullPreview: onOpenFullPreview
     }));
   }
   destroy() {
@@ -66520,11 +67227,25 @@ class Preview extends (events_default()) {
     }
     const {
       currentFileVersion,
-      previousFileVersion
+      previousFileVersion,
+      onDelete,
+      onDownload: onDownloadVersion,
+      onMakeCurrent,
+      onOpenFullPreview
     } = comparisonBanner || {};
+
+    // Videos always lower the lights; MP3 is dark only on the v2 player.
+    const viewerName = (0,util/* getProp */.GT)(this.viewer, 'options.viewer.NAME', '');
+    const isOnDark = constants/* VIDEO_VIEWER_NAMES */.yE.indexOf(viewerName) > -1 || viewerName === 'MP3' && !!(0,util/* getProp */.GT)(this.viewer, 'isAudioPlayerV2');
     this.comparisonBannerRoot.render(isComparedPreview ? previousFileVersion : currentFileVersion, {
       isComparedPreview,
-      locale: (0,util/* getProp */.GT)(this.location, 'locale')
+      isOnDark,
+      locale: (0,util/* getProp */.GT)(this.location, 'locale'),
+      menuContainer: this.container,
+      onDelete: isComparedPreview ? onDelete : undefined,
+      onDownload: isComparedPreview ? onDownloadVersion : undefined,
+      onMakeCurrent: isComparedPreview ? onMakeCurrent : undefined,
+      onOpenFullPreview: isComparedPreview ? onOpenFullPreview : undefined
     });
   }
 
@@ -66987,6 +67708,9 @@ class Preview extends (events_default()) {
     // Setup the viewer DOM
     this.viewer.setup();
 
+    // The banner renders before the viewer exists, so refresh it once the viewer's stage is known
+    this.updateComparisonBanner();
+
     // Load the representation into the viewer
     this.viewer.load();