npm - box-content-preview - Versions diffs - 3.84.0 → 3.85.0 - Mend

box-content-preview 3.84.0 → 3.85.0

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

Files changed (3) hide show

package/README.md CHANGED Viewed

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

package/dist/lib/index.js CHANGED Viewed

@@ -1010,7 +1010,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.84.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.85.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 = {};
@@ -4118,7 +4118,7 @@ function getPdfjsWorkerSrc() {
 /***/ },
-/***/ 3845
+/***/ 3678
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
@@ -4249,6 +4249,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/** Visible window: start/end times, pixels-per-second, and the current zoom. */
 function createWaveformViewport({
   durationSec,
   heightPx,
@@ -4356,6 +4357,96 @@ function zoomFromSliderValue(value, maxZoom = constants/* WAVEFORM_ZOOM_MIN */.L
   const t = Math.min(constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh, Math.max(0, value)) / constants/* WAVEFORM_ZOOM_SLIDER_MAX */.nh;
   return clampWaveformZoom(constants/* WAVEFORM_ZOOM_MIN */.LW + t * (max - constants/* WAVEFORM_ZOOM_MIN */.LW), max);
 }
+/** Max scroll that still shows a full window (no overscroll). */
+function maxScrollLeft(viewport) {
+  return Math.max(0, viewport.durationSec * viewport.pixelsPerSecond - viewport.widthPx);
+}
+/** Scroll offset that still shows a full window (no overscroll). */
+function clampScrollLeft(scrollLeftPx, viewport) {
+  if (!Number.isFinite(scrollLeftPx)) {
+    return 0;
+  }
+  return Math.min(maxScrollLeft(viewport), Math.max(0, scrollLeftPx));
+}
+/** Follow inset in CSS px, capped at one third of the view so a narrow player still has room. */
+function getFollowInsetPx(widthPx, insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM) {
+  if (!(widthPx > 0)) {
+    return 0;
+  }
+  return Math.min(Math.max(0, insetPx), widthPx / 3);
+}
+/** CSS left for a playhead pinned to the follow inset. */
+function getPinnedPlayheadLeft(widthPx, insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM) {
+  const inset = getFollowInsetPx(widthPx, insetPx);
+  if (!(widthPx > 0)) {
+    return '0%';
+  }
+  return `${(widthPx - inset) / widthPx * 100}%`;
+}
+/** CSS left % of the playhead from the left of the visible window. */
+function timeLeftPercent(timeSec, durationSec, viewport) {
+  if (viewport.widthPx > 0 && viewport.pixelsPerSecond > 0) {
+    return `${positionPxFromTime(timeSec, viewport) / viewport.widthPx * 100}%`;
+  }
+  const progress = durationSec > 0 ? Math.min(1, Math.max(0, timeSec / durationSec)) : 0;
+  return `${progress * 100}%`;
+}
+/**
+ * Walk across the view until the playhead nears the right edge, then follow.
+ * Off-screen at play start jumps in; off-screen right while playing keeps following.
+ */
+function getPlayheadCameraAction({
+  insetPx = constants/* WAVEFORM_FOLLOW_INSET_PX */.NM,
+  isPlaying,
+  playJustStarted,
+  timeSec,
+  viewport
+}) {
+  if (!isPlaying || viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW || !(viewport.widthPx > 0) || !(viewport.pixelsPerSecond > 0)) {
+    return {
+      type: 'none'
+    };
+  }
+  const inset = getFollowInsetPx(viewport.widthPx, insetPx);
+  const viewX = positionPxFromTime(timeSec, viewport);
+  const playheadCanvasX = timeSec * viewport.pixelsPerSecond;
+  const followX = viewport.widthPx - inset;
+  if (viewX < 0) {
+    if (!playJustStarted) {
+      return {
+        type: 'none'
+      };
+    }
+    return {
+      type: 'jump',
+      scrollLeftPx: clampScrollLeft(playheadCanvasX - inset, viewport)
+    };
+  }
+  if (viewX >= followX) {
+    const unclampedScroll = playheadCanvasX - followX;
+    const scrollLeftPx = clampScrollLeft(unclampedScroll, viewport);
+    if (playJustStarted && viewX > viewport.widthPx) {
+      return {
+        type: 'jump',
+        scrollLeftPx
+      };
+    }
+    return {
+      type: 'followRight',
+      isPlayheadPinned: unclampedScroll <= maxScrollLeft(viewport),
+      scrollLeftPx
+    };
+  }
+  return {
+    type: 'none'
+  };
+}
 ;// ./node_modules/wavesurfer.js/dist/wavesurfer.esm.js
 function t(t,e,i,n){return new(i||(i=Promise))((function(s,r){function o(t){try{l(n.next(t))}catch(t){r(t)}}function a(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?s(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(o,a)}l((n=n.apply(t,e||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class e{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),null==i?void 0:i.once){const i=(...n)=>{this.un(t,i),e(...n)};return this.listeners[t].add(i),()=>this.un(t,i)}return this.listeners[t].add(e),()=>this.un(t,e)}un(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}const i={decode:function(e,i){return t(this,void 0,void 0,(function*(){const t=new AudioContext({sampleRate:i});try{return yield t.decodeAudioData(e)}finally{"closed"!==t.state&&(yield t.close().catch((()=>{})))}}))},createBuffer:function(t,e){if(!t||0===t.length)throw new Error("channelData must be a non-empty array");if(e<=0)throw new Error("duration must be greater than 0");if("number"==typeof t[0]&&(t=[t]),!t[0]||0===t[0].length)throw new Error("channelData must contain non-empty channel arrays");!function(t){const e=t[0];if(e.some((t=>t>1||t<-1))){const i=e.length;let n=0;for(let t=0;t<i;t++){const i=Math.abs(e[t]);i>n&&(n=i)}for(const e of t)for(let t=0;t<i;t++)e[t]/=n}}(t);const i=t.map((t=>t instanceof Float32Array?t:Float32Array.from(t)));return{duration:e,length:i[0].length,sampleRate:i[0].length/e,numberOfChannels:i.length,getChannelData:t=>{const e=i[t];if(!e)throw new Error(`Channel ${t} not found`);return e},copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}};function n(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,s]of Object.entries(e))if("children"===t&&s)for(const[t,e]of Object.entries(s))e instanceof Node?i.appendChild(e):"string"==typeof e?i.appendChild(document.createTextNode(e)):i.appendChild(n(t,e));else"style"===t?Object.assign(i.style,s):"textContent"===t?i.textContent=s:i.setAttribute(t,s.toString());return i}function s(t,e,i){const s=n(t,e||{});return null==i||i.appendChild(s),s}function r(t){return t instanceof HTMLElement||"object"==typeof t&&null!==t&&t.nodeType===Node.ELEMENT_NODE&&"object"==typeof t.style}var o=Object.freeze({__proto__:null,createElement:s,default:s,isHTMLElement:r});const a={fetchBlob:function(e,i,n){return t(this,void 0,void 0,(function*(){var s;const r=yield fetch(e,n);if(r.status>=400)throw new Error(`Failed to fetch ${e}: ${r.status} (${r.statusText})`);return function(e,i,n){t(this,void 0,void 0,(function*(){var t;if(!e.body||!e.headers)return;const s=e.body.getReader(),r=Number(e.headers.get("Content-Length"))||0;let o=0;const a=()=>{s.cancel()};if(n){if(n.aborted)return void s.cancel();n.addEventListener("abort",a,{once:!0})}try{for(;;){const e=yield s.read();if(e.done)break;if(o+=(null===(t=e.value)||void 0===t?void 0:t.length)||0,r>0){const t=Math.round(o/r*100);i(t)}}}catch(t){if(t instanceof DOMException&&"AbortError"===t.name)return;console.warn("Progress tracking error:",t)}finally{n&&n.removeEventListener("abort",a)}}))}(r.clone(),i,null!==(s=null==n?void 0:n.signal)&&void 0!==s?s:void 0),r.blob()}))}};function l(t){let e=t;const i=new Set;return{get value(){return e},set(t){Object.is(e,t)||(e=t,i.forEach((t=>t(e))))},update(t){this.set(t(e))},subscribe:t=>(i.add(t),()=>i.delete(t))}}function h(t,e){const i=l(t());return e.forEach((e=>e.subscribe((()=>{const e=t();Object.is(i.value,e)||i.set(e)})))),{get value(){return i.value},subscribe:t=>i.subscribe(t)}}function c(t,e){let i;const n=()=>{i&&(i(),i=void 0),i=t()},s=e.map((t=>t.subscribe(n)));return n(),()=>{i&&(i(),i=void 0),s.forEach((t=>t()))}}class u extends e{get isPlayingSignal(){return this._isPlaying}get currentTimeSignal(){return this._currentTime}get durationSignal(){return this._duration}get volumeSignal(){return this._volume}get mutedSignal(){return this._muted}get playbackRateSignal(){return this._playbackRate}get seekingSignal(){return this._seeking}constructor(t){super(),this.isExternalMedia=!1,this._ownBlobUrl=null,this.reactiveMediaEventCleanups=[],t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),this._isPlaying=l(!1),this._currentTime=l(0),this._duration=l(0),this._volume=l(this.media.volume),this._muted=l(this.media.muted),this._playbackRate=l(this.media.playbackRate||1),this._seeking=l(!1),this.setupReactiveMediaEvents(),t.mediaControls&&(this.media.controls=!0),t.autoplay&&(this.media.autoplay=!0),null!=t.playbackRate&&this.onMediaEvent("canplay",(()=>{null!=t.playbackRate&&(this.media.playbackRate=t.playbackRate)}),{once:!0})}setupReactiveMediaEvents(){this.reactiveMediaEventCleanups.push(this.onMediaEvent("play",(()=>{this._isPlaying.set(!0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("pause",(()=>{this._isPlaying.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("ended",(()=>{this._isPlaying.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("timeupdate",(()=>{this._currentTime.set(this.media.currentTime)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("durationchange",(()=>{this._duration.set(this.media.duration||0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("loadedmetadata",(()=>{this._duration.set(this.media.duration||0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("seeking",(()=>{this._seeking.set(!0)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("seeked",(()=>{this._seeking.set(!1)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("volumechange",(()=>{this._volume.set(this.media.volume),this._muted.set(this.media.muted)}))),this.reactiveMediaEventCleanups.push(this.onMediaEvent("ratechange",(()=>{this._playbackRate.set(this.media.playbackRate)})))}onMediaEvent(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e,i)}getSrc(){return this.media.currentSrc||this.media.src||""}revokeSrc(){this._ownBlobUrl&&(URL.revokeObjectURL(this._ownBlobUrl),this._ownBlobUrl=null)}canPlayType(t){return""!==this.media.canPlayType(t)}setSrc(t,e){const i=this.getSrc();if(t&&i===t)return;this.revokeSrc();const n=e instanceof Blob&&(this.canPlayType(e.type)||!t)?URL.createObjectURL(e):t;if(n!==t&&(this._ownBlobUrl=n),i&&this.media.removeAttribute("src"),n||t)try{this.media.src=n}catch(e){this.media.src=t}}destroy(){this.reactiveMediaEventCleanups.forEach((t=>t())),this.reactiveMediaEventCleanups=[],this.revokeSrc(),this.unAll(),this.isExternalMedia||(this.media.pause(),this.media.removeAttribute("src"),this.media.load(),this.media.remove())}setMediaElement(t){this.reactiveMediaEventCleanups.forEach((t=>t())),this.reactiveMediaEventCleanups=[],this.media=t,this.setupReactiveMediaEvents()}play(){return t(this,void 0,void 0,(function*(){try{return yield this.media.play()}catch(t){if(t instanceof DOMException&&"AbortError"===t.name)return;throw t}}))}pause(){this.media.pause()}isPlaying(){return!this.media.paused&&!this.media.ended}setTime(t){this.media.currentTime=Math.max(0,Math.min(t,this.getDuration()))}getDuration(){return this.media.duration}getCurrentTime(){return this.media.currentTime}getVolume(){return this.media.volume}setVolume(t){this.media.volume=t}getMuted(){return this.media.muted}setMuted(t){this.media.muted=t}getPlaybackRate(){return this.media.playbackRate}isSeeking(){return this.media.seeking}setPlaybackRate(t,e){null!=e&&(this.media.preservesPitch=e),this.media.playbackRate=t}getMediaElement(){return this.media}setSinkId(t){return this.media.setSinkId(t)}}function d({maxTop:t,maxBottom:e,halfHeight:i,vScale:n,barMinHeight:s=0,barAlign:r}){let o=Math.round(t*i*n);let a=o+Math.round(e*i*n)||1;return a<s&&(a=s,r||(o=a/2)),{topHeight:o,totalHeight:a}}function p({barAlign:t,halfHeight:e,topHeight:i,totalHeight:n,canvasHeight:s}){return"top"===t?0:"bottom"===t?s-n:e-i}function m(t,e,i){const n=e-t.left,s=i-t.top;return[n/t.width,s/t.height]}function g(t){return Boolean(t.barWidth||t.barGap||t.barAlign)}function f(t,e){if(!g(e))return t;const i=e.barWidth||.5,n=i+(e.barGap||i/2);return 0===n?t:Math.floor(t/n)*n}function v({scrollLeft:t,totalWidth:e,numCanvases:i}){if(0===e)return[0];const n=t/e,s=Math.floor(n*i);return[s-1,s,s+1]}function b(t){const e=t._cleanup;"function"==typeof e&&e()}function y(t){const e=l({scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,clientWidth:t.clientWidth}),i=h((()=>function(t){const{scrollLeft:e,scrollWidth:i,clientWidth:n}=t;if(0===i)return{startX:0,endX:1};const s=e/i,r=(e+n)/i;return{startX:Math.max(0,Math.min(1,s)),endX:Math.max(0,Math.min(1,r))}}(e.value)),[e]),n=h((()=>function(t){return{left:t.scrollLeft,right:t.scrollLeft+t.clientWidth}}(e.value)),[e]),s=()=>{e.set({scrollLeft:t.scrollLeft,scrollWidth:t.scrollWidth,clientWidth:t.clientWidth})};t.addEventListener("scroll",s,{passive:!0});return{scrollData:e,percentages:i,bounds:n,cleanup:()=>{t.removeEventListener("scroll",s),b(e)}}}class C extends e{constructor(t,e){super(),this.timeouts=[],this.isScrollable=!1,this.audioData=null,this.resizeObserver=null,this.lastContainerWidth=0,this.isDragging=!1,this.subscriptions=[],this.unsubscribeOnScroll=[],this.dragStream=null,this.scrollStream=null,this.containerInlinePadding=0,this.onClickWrapper=t=>{const e=this.wrapper.getBoundingClientRect(),[i,n]=m(e,t.clientX,t.clientY);this.emit("click",i,n)},this.onDblClickWrapper=t=>{const e=this.wrapper.getBoundingClientRect(),[i,n]=m(e,t.clientX,t.clientY);this.emit("dblclick",i,n)},this.subscriptions=[],this.options=t;const i=this.parentFromOptionsContainer(t.container);this.parent=i;const[n,s]=this.initHtml();i.appendChild(n),this.container=n,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),this.cursor=s.querySelector(".cursor"),this.calculateInlinePadding(),e&&s.appendChild(e),this.initEvents()}parentFromOptionsContainer(t){let e;if("string"==typeof t?e=document.querySelector(t):r(t)&&(e=t),!e)throw new Error("Container not found");return e}initEvents(){this.wrapper.addEventListener("click",this.onClickWrapper),this.wrapper.addEventListener("dblclick",this.onDblClickWrapper),!0!==this.options.dragToSeek&&"object"!=typeof this.options.dragToSeek||this.initDrag(),this.scrollStream=y(this.scrollContainer);const t=c((()=>{const{startX:t,endX:e}=this.scrollStream.percentages.value,{left:i,right:n}=this.scrollStream.bounds.value;this.emit("scroll",t,e,i,n)}),[this.scrollStream.percentages,this.scrollStream.bounds]);if(this.subscriptions.push(t),"function"==typeof ResizeObserver){const t=this.createDelay(100);this.resizeObserver=new ResizeObserver((()=>{t().then((()=>this.onContainerResize())).catch((()=>{}))})),this.resizeObserver.observe(this.scrollContainer)}}onContainerResize(){const t=this.parent.clientWidth;this.calculateInlinePadding(),t===this.lastContainerWidth&&"auto"!==this.options.height||(this.lastContainerWidth=t,this.reRender(),this.emit("resize"))}initDrag(){if(this.dragStream)return;this.dragStream=function(t,e={}){const{threshold:i=3,mouseButton:n=0,touchDelay:s=100}=e,r=l(null),o=new Map,a=matchMedia("(pointer: coarse)").matches;let h=()=>{};const c=e=>{if(e.button!==n)return;if(o.has(e.pointerId))return;if(o.set(e.pointerId,e),o.size>1)return;const l=e.pointerId;let c=e.clientX,u=e.clientY,d=!1;const p=Date.now(),m=t.getBoundingClientRect(),{left:g,top:f}=m,v=t=>{if(t.pointerId!==l)return;if(t.defaultPrevented||o.size>1)return;if(a&&Date.now()-p<s)return;const e=t.clientX,n=t.clientY,h=e-c,m=n-u;(d||Math.abs(h)>i||Math.abs(m)>i)&&(t.preventDefault(),t.stopPropagation(),d||(r.set({type:"start",x:c-g,y:u-f}),d=!0),r.set({type:"move",x:e-g,y:n-f,deltaX:h,deltaY:m}),c=e,u=n)},b=t=>{if(o.delete(t.pointerId)){if(t.pointerId===l&&d){const e=t.clientX,i=t.clientY;r.set({type:"end",x:e-g,y:i-f})}0===o.size&&h()}},y=t=>{t.relatedTarget&&t.relatedTarget!==document.documentElement||b(t)},C=t=>{d&&(t.stopPropagation(),t.preventDefault())},S=t=>{t.defaultPrevented||o.size>1||d&&t.preventDefault()};document.addEventListener("pointermove",v),document.addEventListener("pointerup",b),document.addEventListener("pointerout",y),document.addEventListener("pointercancel",y),document.addEventListener("touchmove",S,{passive:!1}),document.addEventListener("click",C,{capture:!0}),h=()=>{document.removeEventListener("pointermove",v),document.removeEventListener("pointerup",b),document.removeEventListener("pointerout",y),document.removeEventListener("pointercancel",y),document.removeEventListener("touchmove",S),setTimeout((()=>{document.removeEventListener("click",C,{capture:!0})}),10)}};return t.addEventListener("pointerdown",c),{signal:r,cleanup:()=>{h(),t.removeEventListener("pointerdown",c),o.clear(),b(r)}}}(this.wrapper);const t=c((()=>{const t=this.dragStream.signal.value;if(!t)return;const e=this.wrapper.getBoundingClientRect().width,i=(n=t.x/e)<0?0:n>1?1:n;var n;"start"===t.type?(this.isDragging=!0,this.emit("dragstart",i)):"move"===t.type?this.emit("drag",i):"end"===t.type&&(this.isDragging=!1,this.emit("dragend",i))}),[this.dragStream.signal]);this.subscriptions.push(t)}calculateInlinePadding(){const{paddingLeft:t,paddingRight:e}=getComputedStyle(this.scrollContainer),i=parseFloat(t)+parseFloat(e);this.containerInlinePadding=Number.isNaN(i)?0:i}initHtml(){const t=document.createElement("div"),e=t.attachShadow({mode:"open"}),i=this.options.cspNonce&&"string"==typeof this.options.cspNonce?this.options.cspNonce.replace(/"/g,""):"";return e.innerHTML=`\n      <style${i?` nonce="${i}"`:""}>\n        :host {\n          user-select: none;\n          min-width: 1px;\n        }\n        :host audio {\n          display: block;\n          width: 100%;\n        }\n        :host .scroll {\n          overflow-x: auto;\n          overflow-y: hidden;\n          width: 100%;\n          position: relative;\n        }\n        :host .noScrollbar {\n          scrollbar-color: transparent;\n          scrollbar-width: none;\n        }\n        :host .noScrollbar::-webkit-scrollbar {\n          display: none;\n          -webkit-appearance: none;\n        }\n        :host .wrapper {\n          position: relative;\n          overflow: visible;\n          z-index: 2;\n        }\n        :host .canvases {\n          min-height: ${this.getHeight(this.options.height,this.options.splitChannels)}px;\n          pointer-events: none;\n        }\n        :host .canvases > div {\n          position: relative;\n        }\n        :host canvas {\n          display: block;\n          position: absolute;\n          top: 0;\n          image-rendering: pixelated;\n        }\n        :host .progress {\n          pointer-events: none;\n          position: absolute;\n          z-index: 2;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          overflow: hidden;\n        }\n        :host .progress > div {\n          position: relative;\n        }\n        :host .cursor {\n          pointer-events: none;\n          position: absolute;\n          z-index: 5;\n          top: 0;\n          left: 0;\n          height: 100%;\n          border-radius: 2px;\n        }\n      </style>\n\n      <div class="scroll" part="scroll">\n        <div class="wrapper" part="wrapper">\n          <div class="canvases" part="canvases"></div>\n          <div class="progress" part="progress"></div>\n          <div class="cursor" part="cursor"></div>\n        </div>\n      </div>\n    `,[t,e]}setOptions(t){var e;if(this.options.container!==t.container){const e=this.parentFromOptionsContainer(t.container);e.appendChild(this.container),this.parent=e}!0===t.dragToSeek||"object"==typeof this.options.dragToSeek?this.initDrag():(null===(e=this.dragStream)||void 0===e||e.cleanup(),this.dragStream=null),this.options=t,this.reRender()}getWrapper(){return this.wrapper}getWidth(){return this.scrollContainer.clientWidth-this.containerInlinePadding}getScroll(){return this.scrollContainer.scrollLeft}setScroll(t){this.scrollContainer.scrollLeft=t}setScrollPercentage(t){const{scrollWidth:e}=this.scrollContainer,i=e*t;this.setScroll(i)}destroy(){var t;this.wrapper.removeEventListener("click",this.onClickWrapper),this.wrapper.removeEventListener("dblclick",this.onDblClickWrapper),this.timeouts.forEach((t=>t())),this.timeouts=[],this.subscriptions.forEach((t=>t())),this.container.remove(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),null===(t=this.unsubscribeOnScroll)||void 0===t||t.forEach((t=>t())),this.unsubscribeOnScroll=[],this.dragStream&&(this.dragStream.cleanup(),this.dragStream=null),this.scrollStream&&(this.scrollStream.cleanup(),this.scrollStream=null)}createDelay(t=10){let e,i;const n=()=>{e&&(clearTimeout(e),e=void 0),i&&(i(),i=void 0)};return this.timeouts.push(n),()=>new Promise(((s,r)=>{n(),i=r,e=setTimeout((()=>{e=void 0,i=void 0,s()}),t)}))}getHeight(t,e){var i;const n=(null===(i=this.audioData)||void 0===i?void 0:i.numberOfChannels)||1;return function({optionsHeight:t,optionsSplitChannels:e,parentHeight:i,numberOfChannels:n,defaultHeight:s=128}){if(null==t)return s;const r=Number(t);if(!isNaN(r))return r;if("auto"===t){const t=i||s;return(null==e?void 0:e.every((t=>!t.overlay)))?t/n:t}return s}({optionsHeight:t,optionsSplitChannels:e,parentHeight:this.parent.clientHeight,numberOfChannels:n,defaultHeight:128})}convertColorValues(t,e){return function(t,e,i){if(!Array.isArray(t))return t||"";if(0===t.length)return"#999";if(t.length<2)return t[0]||"";const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return t[0]||"";const r=i||n.height*e,o=s.createLinearGradient(0,0,0,r),a=1/(t.length-1);return t.forEach(((t,e)=>{o.addColorStop(e*a,t)})),o}(t,this.getPixelRatio(),null==e?void 0:e.canvas.height)}getPixelRatio(){return t=window.devicePixelRatio,Math.max(1,t||1);// removed by dead control flow
  var t; }renderBarWaveform(t,e,i,n){const{width:s,height:r}=i.canvas,{halfHeight:o,barWidth:a,barRadius:l,barIndexScale:h,barSpacing:c,barMinHeight:u}=function({width:t,height:e,length:i,options:n,pixelRatio:s}){const r=e/2,o=n.barWidth?n.barWidth*s:1,a=n.barGap?n.barGap*s:n.barWidth?o/2:0,l=o+a||1;return{halfHeight:r,barWidth:o,barGap:a,barRadius:n.barRadius||0,barMinHeight:n.barMinHeight?n.barMinHeight*s:0,barIndexScale:i>0?t/l/i:0,barSpacing:l}}({width:s,height:r,length:(t[0]||[]).length,options:e,pixelRatio:this.getPixelRatio()}),m=function({channelData:t,barIndexScale:e,barSpacing:i,barWidth:n,halfHeight:s,vScale:r,canvasHeight:o,barAlign:a,barMinHeight:l}){const h=t[0]||[],c=t[1]||h,u=h.length,m=[];let g=0,f=0,v=0;for(let t=0;t<=u;t++){const u=Math.round(t*e);if(u>g){const{topHeight:t,totalHeight:e}=d({maxTop:f,maxBottom:v,halfHeight:s,vScale:r,barMinHeight:l,barAlign:a}),h=p({barAlign:a,halfHeight:s,topHeight:t,totalHeight:e,canvasHeight:o});m.push({x:g*i,y:h,width:n,height:e}),g=u,f=0,v=0}const b=Math.abs(h[t]||0),y=Math.abs(c[t]||0);b>f&&(f=b),y>v&&(v=y)}return m}({channelData:t,barIndexScale:h,barSpacing:c,barWidth:a,halfHeight:o,vScale:n,canvasHeight:r,barAlign:e.barAlign,barMinHeight:u});i.beginPath();for(const t of m)l&&"roundRect"in i?i.roundRect(t.x,t.y,t.width,t.height,l):i.rect(t.x,t.y,t.width,t.height);i.fill(),i.closePath()}renderLineWaveform(t,e,i,n){const{width:s,height:r}=i.canvas,o=function({channelData:t,width:e,height:i,vScale:n}){const s=i/2,r=t[0]||[];return[r,t[1]||r].map(((t,i)=>{const r=t.length,o=r?e/r:0,a=s,l=0===i?-1:1,h=[{x:0,y:a}];let c=0,u=0;for(let e=0;e<=r;e++){const i=Math.round(e*o);if(i>c){const t=a+(Math.round(u*s*n)||1)*l;h.push({x:c,y:t}),c=i,u=0}const r=Math.abs(t[e]||0);r>u&&(u=r)}return h.push({x:c,y:a}),h}))}({channelData:t,width:s,height:r,vScale:n});i.beginPath();for(const t of o)if(t.length){i.moveTo(t[0].x,t[0].y);for(let e=1;e<t.length;e++){const n=t[e];i.lineTo(n.x,n.y)}}i.fill(),i.closePath()}renderWaveform(t,e,i){if(i.fillStyle=this.convertColorValues(e.waveColor,i),e.renderFunction)return void e.renderFunction(t,i);const n=function({channelData:t,barHeight:e,normalize:i,maxPeak:n}){var s;const r=e||1;if(!i)return r;const o=t[0];if(!o||0===o.length)return r;let a=null!=n?n:0;if(!n)for(let t=0;t<o.length;t++){const e=null!==(s=o[t])&&void 0!==s?s:0,i=Math.abs(e);i>a&&(a=i)}return a?r/a:r}({channelData:t,barHeight:e.barHeight,normalize:e.normalize,maxPeak:e.maxPeak});g(e)?this.renderBarWaveform(t,e,i,n):this.renderLineWaveform(t,e,i,n)}renderSingleCanvas(t,e,i,n,s,r,o){const a=this.getPixelRatio(),l=document.createElement("canvas");l.width=Math.round(i*a),l.height=Math.round(n*a),l.style.width=`${i}px`,l.style.height=`${n}px`,l.style.left=`${Math.round(s)}px`,r.appendChild(l);const h=l.getContext("2d");if(e.renderFunction?(h.fillStyle=this.convertColorValues(e.waveColor,h),e.renderFunction(t,h)):this.renderWaveform(t,e,h),l.width>0&&l.height>0){const t=l.cloneNode(),i=t.getContext("2d");i.drawImage(l,0,0),i.globalCompositeOperation="source-in",i.fillStyle=this.convertColorValues(e.progressColor,i),i.fillRect(0,0,l.width,l.height),o.appendChild(t)}}renderMultiCanvas(t,e,i,n,s,r){const o=this.getPixelRatio(),{clientWidth:a}=this.scrollContainer,l=i/o,h=function({clientWidth:t,totalWidth:e,options:i}){return f(Math.min(8e3,t,e),i)}({clientWidth:a,totalWidth:l,options:e});let c={};if(0===h)return;const u=i=>{if(i<0||i>=d)return;if(c[i])return;c[i]=!0;const o=i*h;let a=Math.min(l-o,h);if(a=f(a,e),a<=0)return;const u=function({channelData:t,offset:e,clampedWidth:i,totalWidth:n}){return t.map((t=>{const s=Math.floor(e/n*t.length),r=Math.floor((e+i)/n*t.length);return t.slice(s,r)}))}({channelData:t,offset:o,clampedWidth:a,totalWidth:l});this.renderSingleCanvas(u,e,a,n,o,s,r)},d=Math.ceil(l/h);if(!this.isScrollable){for(let t=0;t<d;t++)u(t);return}if(v({scrollLeft:this.scrollContainer.scrollLeft,totalWidth:l,numCanvases:d}).forEach((t=>u(t))),d>1){const t=this.on("scroll",(()=>{const{scrollLeft:t}=this.scrollContainer;Object.keys(c).length>10&&(s.innerHTML="",r.innerHTML="",c={}),v({scrollLeft:t,totalWidth:l,numCanvases:d}).forEach((t=>u(t)))}));this.unsubscribeOnScroll.push(t)}}renderChannel(t,e,i,n){var{overlay:s}=e,r=function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(t);s<n.length;s++)e.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(t,n[s])&&(i[n[s]]=t[n[s]])}return i}(e,["overlay"]);const o=document.createElement("div"),a=this.getHeight(r.height,r.splitChannels);o.style.height=`${a}px`,s&&n>0&&(o.style.marginTop=`-${a}px`),this.canvasWrapper.style.minHeight=`${a}px`,this.canvasWrapper.appendChild(o);const l=o.cloneNode();this.progressWrapper.appendChild(l),this.renderMultiCanvas(t,r,i,a,o,l)}render(e){return t(this,void 0,void 0,(function*(){var t;this.timeouts.forEach((t=>t())),this.timeouts=[],this.unsubscribeOnScroll.forEach((t=>t())),this.unsubscribeOnScroll=[],this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="",null!=this.options.width&&(this.scrollContainer.style.width="number"==typeof this.options.width?`${this.options.width}px`:this.options.width);const i=this.getPixelRatio(),n=this.scrollContainer.clientWidth-this.containerInlinePadding,{scrollWidth:s,isScrollable:r,useParentWidth:o,width:a}=function({duration:t,minPxPerSec:e=0,parentWidth:i,fillParent:n,pixelRatio:s}){const r=Math.ceil(t*e),o=r>i,a=Boolean(n&&!o);return{scrollWidth:r,isScrollable:o,useParentWidth:a,width:(a?i:r)*s}}({duration:e.duration,minPxPerSec:this.options.minPxPerSec||0,parentWidth:n,fillParent:this.options.fillParent,pixelRatio:i});if(this.isScrollable=r,this.wrapper.style.width=o?"100%":`${s}px`,this.scrollContainer.style.overflowX=this.isScrollable?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.cursor.style.backgroundColor=`${this.options.cursorColor||this.options.progressColor}`,this.cursor.style.width=`${this.options.cursorWidth}px`,this.audioData=e,this.emit("render"),this.options.splitChannels)for(let i=0;i<e.numberOfChannels;i++){const n=Object.assign(Object.assign({},this.options),null===(t=this.options.splitChannels)||void 0===t?void 0:t[i]);this.renderChannel([e.getChannelData(i)],n,a,i)}else{const t=[e.getChannelData(0)];e.numberOfChannels>1&&t.push(e.getChannelData(1)),this.renderChannel(t,this.options,a,0)}Promise.resolve().then((()=>this.emit("rendered")))}))}reRender(){if(this.unsubscribeOnScroll.forEach((t=>t())),this.unsubscribeOnScroll=[],!this.audioData)return;const{scrollWidth:t}=this.scrollContainer,{right:e}=this.progressWrapper.getBoundingClientRect();if(this.render(this.audioData),!this.isScrollable&&this.scrollContainer.scrollLeft)this.scrollContainer.scrollLeft=0;else if(this.isScrollable&&t!==this.scrollContainer.scrollWidth){const{right:t}=this.progressWrapper.getBoundingClientRect(),i=function(t){const e=2*t;return(e<0?Math.floor(e):Math.ceil(e))/2}(t-e);this.scrollContainer.scrollLeft+=i}}zoom(t){this.options.minPxPerSec=t,this.reRender()}scrollIntoView(t,e=!1){var i;const{scrollLeft:n,scrollWidth:s,clientWidth:r}=this.scrollContainer,o=t*s,a=n,l=n+r,h=r/2;if(this.isDragging){const t=30;o+t>l?this.scrollContainer.scrollLeft+=t:o-t<a&&(this.scrollContainer.scrollLeft-=t)}else{(o<a||o>l)&&(this.scrollContainer.scrollLeft=o-(this.options.autoCenter?h:0));const t=o-n-h;if(e&&this.options.autoCenter&&t>0){const e=null===(i=this.audioData)||void 0===i?void 0:i.duration;if(void 0===e||e<=0)return void(this.scrollContainer.scrollLeft+=t);const n=s/e;this.scrollContainer.scrollLeft+=n<=600?Math.min(t,10):t}}}renderProgress(t,e){if(isNaN(t))return;const i=100*t;this.canvasWrapper.style.clipPath=`polygon(${i}% 0%, 100% 0%, 100% 100%, ${i}% 100%)`,this.progressWrapper.style.width=`${i}%`,this.cursor.style.left=`${i}%`,this.cursor.style.transform=this.options.cursorWidth?`translateX(-${t*this.options.cursorWidth}px)`:"",this.isScrollable&&this.options.autoScroll&&this.audioData&&this.audioData.duration>0&&this.scrollIntoView(t,e)}exportImage(e,i,n){return t(this,void 0,void 0,(function*(){const t=this.canvasWrapper.querySelectorAll("canvas");if(!t.length)throw new Error("No waveform data");if("dataURL"===n){const n=Array.from(t).map((t=>t.toDataURL(e,i)));return Promise.resolve(n)}return Promise.all(Array.from(t).map((t=>new Promise(((n,s)=>{t.toBlob((t=>{t?n(t):s(new Error("Could not export image"))}),e,i)})))))}))}}class S extends e{constructor(){super(...arguments),this.animationFrameId=null,this.isRunning=!1}start(){if(this.isRunning)return;this.isRunning=!0;const t=()=>{this.isRunning&&(this.emit("tick"),this.animationFrameId=requestAnimationFrame(t))};t()}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}destroy(){this.stop(),this.unAll()}}class E extends e{constructor(t){super(),this.bufferNode=null,this.playStartTime=0,this.playbackPosition=0,this._muted=!1,this._playbackRate=1,this._duration=void 0,this.buffer=null,this.currentSrc="",this.paused=!0,this.crossOrigin=null,this.seeking=!1,this.autoplay=!1,this.addEventListener=this.on,this.removeEventListener=this.un,this._destroyed=!1,function(){const t=globalThis.navigator;if(null==t?void 0:t.audioSession)try{t.audioSession.type="playback"}catch(t){console.warn("Setting navigator.audioSession.type failed:",t)}}(),this.audioContext=t||new AudioContext,this.gainNode=this.audioContext.createGain(),this.gainNode.connect(this.audioContext.destination)}load(){return t(this,void 0,void 0,(function*(){}))}remove(){this.destroy()}destroy(){if(!this._destroyed){if(this._destroyed=!0,this.currentSrc="",this.bufferNode){this.bufferNode.onended=null;try{this.bufferNode.stop()}catch(t){}this.bufferNode.disconnect(),this.bufferNode=null}this.gainNode.disconnect(),"function"==typeof this.audioContext.close&&Promise.resolve(this.audioContext.close.call(this.audioContext)).catch((()=>{})),this.buffer=null,this.unAll()}}get src(){return this.currentSrc}set src(t){if(this.currentSrc=t,this._duration=void 0,!t)return this.buffer=null,void this.emit("emptied");fetch(t).then((e=>{if(e.status>=400)throw new Error(`Failed to fetch ${t}: ${e.status} (${e.statusText})`);return e.arrayBuffer()})).then((e=>this.currentSrc!==t?null:this.audioContext.decodeAudioData(e))).then((e=>{this.currentSrc===t&&(this.buffer=e,this.emit("loadedmetadata"),this.emit("canplay"),this.autoplay&&this.play())})).catch((t=>{console.error("WebAudioPlayer load error:",t)}))}_play(){if(!this.paused)return;this.paused=!1,this.bufferNode&&(this.bufferNode.onended=null,this.bufferNode.disconnect()),this.bufferNode=this.audioContext.createBufferSource(),this.buffer&&(this.bufferNode.buffer=this.buffer),this.bufferNode.playbackRate.value=this._playbackRate,this.bufferNode.connect(this.gainNode);let t=this.playbackPosition;(t>=this.duration||t<0)&&(t=0,this.playbackPosition=0),this.bufferNode.start(this.audioContext.currentTime,t),this.playStartTime=this.audioContext.currentTime,this.bufferNode.onended=()=>{!this.paused&&this.duration-this.currentTime<.01&&(this.pause(),this.emit("ended"))}}_pause(){if(this.paused=!0,this.bufferNode){this.bufferNode.onended=null;try{this.bufferNode.stop()}catch(t){}}this.playbackPosition+=(this.audioContext.currentTime-this.playStartTime)*this._playbackRate}play(){return t(this,void 0,void 0,(function*(){this.paused&&(this._play(),this.emit("play"))}))}pause(){this.paused||(this._pause(),this.emit("pause"))}stopAt(t){const e=(t-this.currentTime)/this._playbackRate,i=this.bufferNode;null==i||i.stop(this.audioContext.currentTime+e),null==i||i.addEventListener("ended",(()=>{i===this.bufferNode&&(this.bufferNode=null,this.pause(),this.playbackPosition=Math.min(t,this.duration),this.emit("timeupdate"))}),{once:!0})}setSinkId(e){return t(this,void 0,void 0,(function*(){return this.audioContext.setSinkId(e)}))}get playbackRate(){return this._playbackRate}set playbackRate(t){const e=!this.paused;e&&this._pause(),this._playbackRate=t,e&&this._play(),this.bufferNode&&(this.bufferNode.playbackRate.value=t)}get currentTime(){return this.paused?this.playbackPosition:this.playbackPosition+(this.audioContext.currentTime-this.playStartTime)*this._playbackRate}set currentTime(t){const e=!this.paused;e&&this._pause(),this.playbackPosition=t,e&&this._play(),this.emit("seeking"),this.emit("timeupdate")}get duration(){var t,e;return null!==(t=this._duration)&&void 0!==t?t:(null===(e=this.buffer)||void 0===e?void 0:e.duration)||0}set duration(t){this._duration=t}get volume(){return this.gainNode.gain.value}set volume(t){this.gainNode.gain.value=t,this.emit("volumechange")}get muted(){return this._muted}set muted(t){this._muted!==t&&(this._muted=t,this._muted?this.gainNode.disconnect():this.gainNode.connect(this.audioContext.destination))}canPlayType(t){return/^(audio|video)\//.test(t)}getGainNode(){return this.gainNode}getChannelData(){const t=[];if(!this.buffer)return t;const e=this.buffer.numberOfChannels;for(let i=0;i<e;i++)t.push(this.buffer.getChannelData(i));return t}removeAttribute(t){switch(t){case"src":this.src="";break;case"playbackRate":this.playbackRate=0;break;case"currentTime":this.currentTime=0;break;case"duration":this.duration=0;break;case"volume":this.volume=0;break;case"muted":this.muted=!1}}}const P={waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,dragToSeek:!1,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class w extends u{static create(t){return new w(t)}getState(){return this.wavesurferState}getRenderer(){return this.renderer}constructor(t){const e=t.media||("WebAudio"===t.backend?new E:void 0);super({media:e,mediaControls:t.mediaControls,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.stopAtPosition=null,this.subscriptions=[],this.mediaSubscriptions=[],this.abortController=null,this._isDestroyed=!1,this._loadVersion=0,this.reactiveCleanups=[],this.options=Object.assign({},P,t);const{state:i,actions:n}=function(t){var e,i,n,s,r,o;const a=null!==(e=null==t?void 0:t.currentTime)&&void 0!==e?e:l(0),c=null!==(i=null==t?void 0:t.duration)&&void 0!==i?i:l(0),u=null!==(n=null==t?void 0:t.isPlaying)&&void 0!==n?n:l(!1),d=null!==(s=null==t?void 0:t.isSeeking)&&void 0!==s?s:l(!1),p=null!==(r=null==t?void 0:t.volume)&&void 0!==r?r:l(1),m=null!==(o=null==t?void 0:t.playbackRate)&&void 0!==o?o:l(1),g=l(null),f=l(null),v=l(""),b=l(0),y=l(0),C=h((()=>!u.value),[u]),S=h((()=>null!==g.value),[g]),E=h((()=>S.value&&c.value>0),[S,c]),P=h((()=>a.value),[a]),w=h((()=>c.value>0?a.value/c.value:0),[a,c]);return{state:{currentTime:a,duration:c,isPlaying:u,isPaused:C,isSeeking:d,volume:p,playbackRate:m,audioBuffer:g,peaks:f,url:v,zoom:b,scrollPosition:y,canPlay:S,isReady:E,progress:P,progressPercent:w},actions:{setCurrentTime:t=>{const e=Math.max(0,Math.min(c.value||1/0,t));a.set(e)},setDuration:t=>{c.set(Math.max(0,t))},setPlaying:t=>{u.set(t)},setSeeking:t=>{d.set(t)},setVolume:t=>{const e=Math.max(0,Math.min(1,t));p.set(e)},setPlaybackRate:t=>{const e=Math.max(.1,Math.min(16,t));m.set(e)},setAudioBuffer:t=>{g.set(t),t&&c.set(t.duration)},setPeaks:t=>{f.set(t)},setUrl:t=>{v.set(t)},setZoom:t=>{b.set(Math.max(0,t))},setScrollPosition:t=>{y.set(Math.max(0,t))}}}}({isPlaying:this.isPlayingSignal,currentTime:this.currentTimeSignal,duration:this.durationSignal,volume:this.volumeSignal,playbackRate:this.playbackRateSignal,isSeeking:this.seekingSignal});this.wavesurferState=i,this.wavesurferActions=n,this.timer=new S;const s=e?void 0:this.getMediaElement();this.renderer=new C(this.options,s),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReactiveState(),this.initPlugins();const r=this.options.url||this.getSrc()||"";Promise.resolve().then((()=>{this.emit("init");const{peaks:t,duration:e}=this.options;(r||t&&e)&&this.load(r,t,e).catch((()=>{}))}))}updateProgress(t=this.getCurrentTime()){return this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),t}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{if(!this.isSeeking()){const t=this.updateProgress();if(this.emit("timeupdate",t),this.emit("audioprocess",t),null!=this.stopAtPosition&&this.isPlaying()&&t>=this.stopAtPosition){const t=this.stopAtPosition;this.pause(),this.setTime(t)}}})))}initReactiveState(){this.reactiveCleanups.push(function(t,e){const i=[];i.push(c((()=>{const i=t.isPlaying.value;e.emit(i?"play":"pause")}),[t.isPlaying])),i.push(c((()=>{const i=t.currentTime.value;e.emit("timeupdate",i),t.isPlaying.value&&e.emit("audioprocess",i)}),[t.currentTime,t.isPlaying])),i.push(c((()=>{t.isSeeking.value&&e.emit("seeking",t.currentTime.value)}),[t.isSeeking,t.currentTime]));let n=!1;i.push(c((()=>{t.isReady.value&&!n&&(n=!0,e.emit("ready",t.duration.value))}),[t.isReady,t.duration])),i.push(c((()=>{null===t.audioBuffer.value&&(n=!1)}),[t.audioBuffer]));let s=!1;return i.push(c((()=>{const i=t.isPlaying.value,n=t.currentTime.value,r=t.duration.value,o=r>0&&n>=r;s&&!i&&o&&e.emit("finish"),s=i&&o}),[t.isPlaying,t.currentTime,t.duration])),i.push(c((()=>{const i=t.zoom.value;i>0&&e.emit("zoom",i)}),[t.zoom])),()=>{i.forEach((t=>t()))}}(this.wavesurferState,{emit:this.emit.bind(this)}))}initPlayerEvents(){this.isPlaying()&&(this.emit("play"),this.timer.start()),this.mediaSubscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.updateProgress();this.emit("timeupdate",t)})),this.onMediaEvent("play",(()=>{this.emit("play"),this.timer.start()})),this.onMediaEvent("pause",(()=>{this.emit("pause"),this.timer.stop(),this.stopAtPosition=null})),this.onMediaEvent("emptied",(()=>{this.timer.stop(),this.stopAtPosition=null})),this.onMediaEvent("ended",(()=>{this.emit("timeupdate",this.getDuration()),this.emit("finish"),this.stopAtPosition=null})),this.onMediaEvent("seeking",(()=>{this.emit("seeking",this.getCurrentTime())})),this.onMediaEvent("error",(()=>{var t;this.emit("error",null!==(t=this.getMediaElement().error)&&void 0!==t?t:new Error("Media error")),this.stopAtPosition=null})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",((t,e)=>{this.options.interact&&(this.seekTo(t),this.emit("interaction",t*this.getDuration()),this.emit("click",t,e))})),this.renderer.on("dblclick",((t,e)=>{this.emit("dblclick",t,e)})),this.renderer.on("scroll",((t,e,i,n)=>{const s=this.getDuration();this.emit("scroll",t*s,e*s,i,n)})),this.renderer.on("render",(()=>{this.emit("redraw")})),this.renderer.on("rendered",(()=>{this.emit("redrawcomplete")})),this.renderer.on("dragstart",(t=>{this.emit("dragstart",t)})),this.renderer.on("dragend",(t=>{this.emit("dragend",t)})),this.renderer.on("resize",(()=>{this.emit("resize")})));{let t;const e=this.renderer.on("drag",(e=>{var i;if(!this.options.interact)return;this.renderer.renderProgress(e),clearTimeout(t);let n=0;const s=this.options.dragToSeek;this.isPlaying()?n=0:!0===s?n=200:s&&"object"==typeof s&&(n=null!==(i=s.debounceTime)&&void 0!==i?i:200),t=setTimeout((()=>{this.seekTo(e)}),n),this.emit("interaction",e*this.getDuration()),this.emit("drag",e)}));this.subscriptions.push((()=>{clearTimeout(t),e()}))}}initPlugins(){var t;(null===(t=this.options.plugins)||void 0===t?void 0:t.length)&&this.options.plugins.forEach((t=>{this.registerPlugin(t)}))}unsubscribePlayerEvents(){this.mediaSubscriptions.forEach((t=>t())),this.mediaSubscriptions=[]}setOptions(t){this.options=Object.assign({},this.options,t),t.duration&&!t.peaks&&(this.decodedData=i.createBuffer(this.exportPeaks(),t.duration)),t.peaks&&t.duration&&(this.decodedData=i.createBuffer(t.peaks,t.duration)),this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate),null!=t.mediaControls&&(this.getMediaElement().controls=t.mediaControls)}registerPlugin(t){if(this.plugins.includes(t))return t;t._init(this),this.plugins.push(t);const e=t.once("destroy",(()=>{this.plugins=this.plugins.filter((e=>e!==t)),this.subscriptions=this.subscriptions.filter((t=>t!==e))}));return this.subscriptions.push(e),t}unregisterPlugin(t){this.plugins=this.plugins.filter((e=>e!==t)),t.destroy()}getWrapper(){return this.renderer.getWrapper()}getWidth(){return this.renderer.getWidth()}getScroll(){return this.renderer.getScroll()}setScroll(t){return this.renderer.setScroll(t)}setScrollTime(t){const e=t/this.getDuration();this.renderer.setScrollPercentage(e)}getActivePlugins(){return this.plugins}loadAudio(e,n,s,r){return t(this,void 0,void 0,(function*(){var t;const o=++this._loadVersion;if(this._isDestroyed=!1,this.emit("load",e),!this.options.media&&this.isPlaying()&&this.pause(),this.decodedData=null,this.stopAtPosition=null,null===(t=this.abortController)||void 0===t||t.abort(),this.abortController=null,!n&&!s){const t=this.options.fetchParams||{};window.AbortController&&!t.signal&&(this.abortController=new AbortController,t.signal=this.abortController.signal);const i=t=>this.emit("loading",t);if(n=yield a.fetchBlob(e,i,t),this._isDestroyed||o!==this._loadVersion)return;const s=this.options.blobMimeType;s&&(n=new Blob([n],{type:s}))}if(this._isDestroyed||o!==this._loadVersion)return;this.setSrc(e,n);const l=yield new Promise((t=>{const e=r||this.getDuration();e?t(e):this.mediaSubscriptions.push(this.onMediaEvent("loadedmetadata",(()=>t(this.getDuration())),{once:!0}))}));if(!this._isDestroyed&&o===this._loadVersion){if(!e&&!n){const t=this.getMediaElement();t instanceof E&&(t.duration=l)}if(s)this.decodedData=i.createBuffer(s,l||0);else if(n){const t=yield n.arrayBuffer();if(this._isDestroyed||o!==this._loadVersion)return;this.decodedData=yield i.decode(t,this.options.sampleRate)}this._isDestroyed||o!==this._loadVersion||(this.decodedData&&(this.emit("decode",this.getDuration()),this.renderer.render(this.decodedData)),this.emit("ready",this.getDuration()))}}))}load(e,i,n){return t(this,void 0,void 0,(function*(){try{return yield this.loadAudio(e,void 0,i,n)}catch(t){throw this.emit("error",t),t}}))}loadBlob(e,i,n){return t(this,void 0,void 0,(function*(){try{return yield this.loadAudio("",e,i,n)}catch(t){throw this.emit("error",t),t}}))}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}exportPeaks({channels:t=2,maxLength:e=8e3,precision:i=1e4}={}){if(!this.decodedData)throw new Error("The audio has not been decoded yet");const n=Math.min(t,this.decodedData.numberOfChannels),s=[];for(let t=0;t<n;t++){const n=this.decodedData.getChannelData(t),r=[],o=n.length/e;for(let t=0;t<e;t++){const e=n.slice(Math.floor(t*o),Math.ceil((t+1)*o));let s=0;for(let t=0;t<e.length;t++){const i=e[t];Math.abs(i)>Math.abs(s)&&(s=i)}r.push(Math.round(s*i)/i)}s.push(r)}return s}getDuration(){let t=super.getDuration()||0;return 0!==t&&t!==1/0||!this.decodedData||(t=this.decodedData.duration),t}toggleInteraction(t){this.options.interact=t}setTime(t){this.stopAtPosition=null,super.setTime(t),this.updateProgress(t),this.emit("timeupdate",t)}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}play(e,i){const n=Object.create(null,{play:{get:()=>super.play}});return t(this,void 0,void 0,(function*(){null!=e&&this.setTime(e);const t=yield n.play.call(this);return null!=i&&(this.media instanceof E?this.media.stopAt(i):this.stopAtPosition=i),t}))}playPause(){return t(this,void 0,void 0,(function*(){return this.isPlaying()?this.pause():this.play()}))}stop(){this.pause(),this.setTime(0)}skip(t){this.setTime(this.getCurrentTime()+t)}empty(){this.load("",[[0]],.001)}setMediaElement(t){this.unsubscribePlayerEvents(),super.setMediaElement(t),this.initPlayerEvents()}exportImage(){return t(this,arguments,void 0,(function*(t="image/png",e=1,i="dataURL"){return this.renderer.exportImage(t,e,i)}))}destroy(){var t;this._isDestroyed=!0,this.emit("destroy"),null===(t=this.abortController)||void 0===t||t.abort(),this.plugins.forEach((t=>t.destroy())),this.subscriptions.forEach((t=>t())),this.unsubscribePlayerEvents(),this.reactiveCleanups.forEach((t=>t())),this.reactiveCleanups=[],this.timer.destroy(),this.renderer.destroy(),super.destroy()}}w.BasePlugin=class extends e{constructor(t){super(),this.subscriptions=[],this.isDestroyed=!1,this.options=t}onInit(){}_init(t){this.isDestroyed&&(this.subscriptions=[],this.isDestroyed=!1),this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.subscriptions=[],this.isDestroyed=!0,this.wavesurfer=void 0}},w.dom=o;
@@ -4612,6 +4703,241 @@ function tintWaveformTiles({
     });
   });
 }
+;// ./src/lib/viewers/media/waveform/usePlayheadCamera.ts
+function getScrollLeft(wavesurfer, fallback = 0) {
+  return wavesurfer && wavesurfer.getScroll ? wavesurfer.getScroll() : fallback;
+}
+function prefersReducedMotion() {
+  return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Pin/follow vs user pan. Refs, not state: rAF and WaveSurfer `scroll` read these
+ * every frame. WaveformView owns WaveSurfer, zoom, and the media rAF loop.
+ */
+function usePlayheadCamera({
+  mediaElRef,
+  onViewportCommit,
+  playheadRef,
+  viewportRef,
+  wavesurferRef
+}) {
+  const onViewportCommitRef = (0,external_react_.useRef)(onViewportCommit);
+  onViewportCommitRef.current = onViewportCommit;
+  const programmaticScrollRef = (0,external_react_.useRef)(false);
+  const jumpAnimationRef = (0,external_react_.useRef)(0);
+  const lastCameraScrollRef = (0,external_react_.useRef)(null);
+  const mediaTimeRef = (0,external_react_.useRef)(0);
+  const isFollowPinnedRef = (0,external_react_.useRef)(false);
+  const userIsScrollingRef = (0,external_react_.useRef)(false);
+  const holdFollowUntilInsetRef = (0,external_react_.useRef)(false);
+  const scrollSettleTimerRef = (0,external_react_.useRef)(0);
+  const applyRef = (0,external_react_.useRef)(null);
+  const isFollowPinned = (0,external_react_.useCallback)(() => isFollowPinnedRef.current, []);
+  const cancelJump = (0,external_react_.useCallback)(() => {
+    if (!jumpAnimationRef.current) {
+      return;
+    }
+    window.cancelAnimationFrame(jumpAnimationRef.current);
+    jumpAnimationRef.current = 0;
+  }, []);
+  const clearFollowPin = (0,external_react_.useCallback)(() => {
+    isFollowPinnedRef.current = false;
+    programmaticScrollRef.current = false;
+  }, []);
+  const releaseUserPanHold = (0,external_react_.useCallback)(() => {
+    window.clearTimeout(scrollSettleTimerRef.current);
+    scrollSettleTimerRef.current = 0;
+    userIsScrollingRef.current = false;
+    holdFollowUntilInsetRef.current = false;
+  }, []);
+  const readMediaTime = (0,external_react_.useCallback)(() => {
+    const live = mediaElRef.current?.currentTime;
+    if (typeof live === 'number' && Number.isFinite(live)) {
+      mediaTimeRef.current = live;
+      return live;
+    }
+    return mediaTimeRef.current;
+  }, [mediaElRef]);
+  const onSeek = (0,external_react_.useCallback)(timeSec => {
+    mediaTimeRef.current = timeSec;
+    cancelJump();
+    clearFollowPin();
+  }, [cancelJump, clearFollowPin]);
+  /** Unpin and hold follow so zoom setScroll (slider center or pinch origin) is not stolen. */
+  const onZoom = (0,external_react_.useCallback)(() => {
+    cancelJump();
+    isFollowPinnedRef.current = false;
+    holdFollowUntilInsetRef.current = true;
+  }, [cancelJump]);
+  const applyScrollLeft = (0,external_react_.useCallback)((scrollLeftPx, shouldCommitState) => {
+    const wavesurfer = wavesurferRef.current;
+    if (!wavesurfer || !wavesurfer.setScroll) {
+      return;
+    }
+    programmaticScrollRef.current = true;
+    lastCameraScrollRef.current = scrollLeftPx;
+    wavesurfer.setScroll(scrollLeftPx);
+    const appliedScrollLeft = getScrollLeft(wavesurfer, scrollLeftPx);
+    lastCameraScrollRef.current = appliedScrollLeft;
+    viewportRef.current = getViewportAtScroll(viewportRef.current, appliedScrollLeft);
+    window.requestAnimationFrame(() => {
+      // Keep the flag through delayed `scroll` while the camera is driving.
+      if (jumpAnimationRef.current || isFollowPinnedRef.current) {
+        return;
+      }
+      programmaticScrollRef.current = false;
+    });
+    if (shouldCommitState) {
+      onViewportCommitRef.current(appliedScrollLeft, viewportRef.current);
+    }
+  }, [viewportRef, wavesurferRef]);
+  const pinFollowPlayhead = (0,external_react_.useCallback)((playhead, viewport, isPinned) => {
+    isFollowPinnedRef.current = isPinned;
+    if (!playhead || !isPinned || !(viewport.widthPx > 0)) {
+      return;
+    }
+    playhead.style.left = getPinnedPlayheadLeft(viewport.widthPx);
+  }, []);
+  const apply = (0,external_react_.useCallback)((timeSec, playJustStarted = false) => {
+    mediaTimeRef.current = timeSec;
+    const wavesurfer = wavesurferRef.current;
+    const viewport = viewportRef.current;
+    if (!wavesurfer) {
+      return;
+    }
+    if (viewport.zoomLevel <= constants/* WAVEFORM_ZOOM_MIN */.LW) {
+      clearFollowPin();
+      return;
+    }
+    if (userIsScrollingRef.current && !playJustStarted) {
+      return;
+    }
+    if (jumpAnimationRef.current && !playJustStarted) {
+      return;
+    }
+    const liveViewport = getViewportAtScroll(viewport, getScrollLeft(wavesurfer, viewport.scrollLeftPx));
+    const action = getPlayheadCameraAction({
+      isPlaying: true,
+      playJustStarted,
+      timeSec,
+      viewport: liveViewport
+    });
+    if (holdFollowUntilInsetRef.current && !playJustStarted) {
+      if (action.type !== 'none') {
+        return;
+      }
+      holdFollowUntilInsetRef.current = false;
+    }
+    if (action.type === 'none') {
+      if (isFollowPinnedRef.current) {
+        isFollowPinnedRef.current = false;
+        applyScrollLeft(liveViewport.scrollLeftPx, true);
+      }
+      programmaticScrollRef.current = false;
+      return;
+    }
+    cancelJump();
+    if (action.type === 'followRight') {
+      pinFollowPlayhead(playheadRef.current, liveViewport, action.isPlayheadPinned);
+      applyScrollLeft(action.scrollLeftPx, !action.isPlayheadPinned);
+      return;
+    }
+    isFollowPinnedRef.current = false;
+    const from = getScrollLeft(wavesurfer, liveViewport.scrollLeftPx);
+    if (prefersReducedMotion() || typeof window.requestAnimationFrame !== 'function') {
+      applyScrollLeft(action.scrollLeftPx, true);
+      apply(timeSec, false);
+      return;
+    }
+    programmaticScrollRef.current = true;
+    const start = (0,util/* getCurrentTimeMs */.RU)();
+    const tick = now => {
+      const t = Math.min(1, (now - start) / constants/* WAVEFORM_PLAYHEAD_JUMP_MS */.Bq);
+      const liveAction = getPlayheadCameraAction({
+        isPlaying: true,
+        playJustStarted: true,
+        timeSec: mediaTimeRef.current,
+        viewport: getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer, from))
+      });
+      const to = liveAction.type === 'none' ? action.scrollLeftPx : liveAction.scrollLeftPx;
+      applyScrollLeft(from + (to - from) * (1 - (1 - t) * (1 - t)), false);
+      if (t < 1) {
+        jumpAnimationRef.current = window.requestAnimationFrame(tick);
+        return;
+      }
+      jumpAnimationRef.current = 0;
+      applyScrollLeft(to, true);
+      apply(mediaTimeRef.current, false);
+    };
+    jumpAnimationRef.current = window.requestAnimationFrame(tick);
+  }, [applyScrollLeft, cancelJump, clearFollowPin, pinFollowPlayhead, playheadRef, viewportRef, wavesurferRef]);
+  applyRef.current = apply;
+  /**
+   * Camera-owned: jumping; matching follow scroll; unpinned programmatic; clamp-to-max.
+   * User pan: pinned and |scroll - lastCamera| > 1, or any non-programmatic scroll while not jumping.
+   */
+  const isUserPan = (0,external_react_.useCallback)(scrollLeftPx => {
+    const isCameraOwnedScroll = programmaticScrollRef.current || jumpAnimationRef.current !== 0;
+    const lastCameraScroll = lastCameraScrollRef.current;
+    const maxScroll = maxScrollLeft(viewportRef.current);
+    const isClampedToMax = lastCameraScroll != null && scrollLeftPx >= maxScroll - 1 && lastCameraScroll >= maxScroll - 1;
+    const isFollowCameraScroll = isFollowPinnedRef.current && lastCameraScroll != null && Math.abs(scrollLeftPx - lastCameraScroll) <= 1;
+    return !(isCameraOwnedScroll && (jumpAnimationRef.current !== 0 || isFollowCameraScroll || isClampedToMax || !isFollowPinnedRef.current));
+  }, [viewportRef]);
+  const handleScroll = (0,external_react_.useCallback)(onUserPan => {
+    const wavesurfer = wavesurferRef.current;
+    if (!wavesurfer) {
+      return;
+    }
+    const scrollLeftPx = getScrollLeft(wavesurfer);
+    if (!isUserPan(scrollLeftPx)) {
+      viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+      return;
+    }
+    viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
+    const timeSec = readMediaTime();
+    const playhead = playheadRef.current;
+    if (playhead) {
+      playhead.style.left = timeLeftPercent(timeSec, viewportRef.current.durationSec, viewportRef.current);
+    }
+    userIsScrollingRef.current = true;
+    holdFollowUntilInsetRef.current = true;
+    window.clearTimeout(scrollSettleTimerRef.current);
+    scrollSettleTimerRef.current = window.setTimeout(() => {
+      userIsScrollingRef.current = false;
+      scrollSettleTimerRef.current = 0;
+      if (!mediaElRef.current || mediaElRef.current.paused) {
+        return;
+      }
+      applyRef.current?.(readMediaTime(), false);
+    }, constants/* WAVEFORM_FOLLOW_SCROLL_SETTLE_MS */.Zs);
+    cancelJump();
+    isFollowPinnedRef.current = false;
+    programmaticScrollRef.current = false;
+    onUserPan(timeSec);
+  }, [cancelJump, isUserPan, mediaElRef, playheadRef, readMediaTime, viewportRef, wavesurferRef]);
+  (0,external_react_.useEffect)(() => () => {
+    releaseUserPanHold();
+    cancelJump();
+  }, [cancelJump, releaseUserPanHold]);
+  return {
+    apply,
+    applyScrollLeft,
+    cancelJump,
+    clearFollowPin,
+    handleScroll,
+    isFollowPinned,
+    onSeek,
+    onZoom,
+    releaseUserPanHold
+  };
+}
 ;// ./src/lib/viewers/media/waveform/WaveformView.scss
 // extracted by mini-css-extract-plugin
@@ -4630,6 +4956,7 @@ function WaveformView_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 /** Pointer X in the view and the media time under it; zoom keeps this point fixed. */
 /** CSS width × devicePixelRatio, for canvas gradient fills. */
@@ -4637,21 +4964,12 @@ function devicePixelWidth(widthCssPx) {
   const pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
   return widthCssPx * pixelRatio;
 }
-function prefersReducedMotion() {
+function WaveformView_prefersReducedMotion() {
   return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
-function getScrollLeft(wavesurfer, fallback = 0) {
+function WaveformView_getScrollLeft(wavesurfer, fallback = 0) {
   return wavesurfer && wavesurfer.getScroll ? wavesurfer.getScroll() : fallback;
 }
-/** CSS left % of the playhead from the left of the visible window. */
-function timeLeftPercent(timeSec, durationSec, viewport) {
-  if (viewport.widthPx > 0 && viewport.pixelsPerSecond > 0) {
-    return `${positionPxFromTime(timeSec, viewport) / viewport.widthPx * 100}%`;
-  }
-  const progress = durationSec > 0 ? Math.min(1, Math.max(0, timeSec / durationSec)) : 0;
-  return `${progress * 100}%`;
-}
 function applyPeaks(wavesurfer, peaks, durationSec) {
   if (!wavesurfer.load) {
     return;
@@ -4693,7 +5011,7 @@ function zoomOriginAtPointer(pointerX, wavesurfer, durationSec, fallbackWidth) {
   }
   return {
     pointerX,
-    timeSec: (getScrollLeft(wavesurfer) + pointerX) / fullWidth * durationSec
+    timeSec: (WaveformView_getScrollLeft(wavesurfer) + pointerX) / fullWidth * durationSec
   };
 }
@@ -4713,30 +5031,37 @@ function WaveformView({
   peaks,
   zoomLevel: zoomLevelProp
 }) {
+  // DOM / WaveSurfer
   const containerRef = (0,external_react_.useRef)(null);
   const trackRef = (0,external_react_.useRef)(null);
   const playheadRef = (0,external_react_.useRef)(null);
   const playheadAnimationRef = (0,external_react_.useRef)(0);
   const wavesurferRef = (0,external_react_.useRef)(null);
+  // Latest props for WaveSurfer + media listeners that must not re-subscribe each render.
   const onSeekRef = (0,external_react_.useRef)(onSeek);
   const interactiveRef = (0,external_react_.useRef)(interactive);
   const hasZoomHandlersRef = (0,external_react_.useRef)(false);
   const currentTimeRef = (0,external_react_.useRef)(currentTime);
   const peaksRef = (0,external_react_.useRef)(peaks);
+  const durationSecRef = (0,external_react_.useRef)(durationSec);
+  const mediaElRef = (0,external_react_.useRef)(mediaEl);
+  const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange);
   const displayedPeaksRef = (0,external_react_.useRef)(null);
   const peakTransitionAnimationRef = (0,external_react_.useRef)(0);
-  const durationSecRef = (0,external_react_.useRef)(durationSec);
+  // Zoom / pinch / tile tint (read from pointer + WaveSurfer handlers)
   const zoomOriginRef = (0,external_react_.useRef)(null);
   const pinchStartRef = (0,external_react_.useRef)(null);
+  const pointerZoomRef = (0,external_react_.useRef)(false);
+  const pointerZoomClearTimerRef = (0,external_react_.useRef)(0);
   const bufferProgressRef = (0,external_react_.useRef)(0);
   const hoverProgressRef = (0,external_react_.useRef)(null);
-  const programmaticScrollRef = (0,external_react_.useRef)(false);
-  const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange);
   onSeekRef.current = onSeek;
   interactiveRef.current = interactive;
   currentTimeRef.current = currentTime;
   peaksRef.current = peaks;
   durationSecRef.current = durationSec;
+  mediaElRef.current = mediaEl;
   onViewportChangeRef.current = onViewportChange;
   const [internalZoom, setInternalZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
   const [hoverProgress, setHoverProgress] = (0,external_react_.useState)(null);
@@ -4750,7 +5075,7 @@ function WaveformView({
   });
   hasZoomHandlersRef.current = maxZoom > constants/* WAVEFORM_ZOOM_MIN */.LW && (typeof onZoomChange === 'function' || typeof zoomLevelProp !== 'number');
   const zoomLevel = clampWaveformZoom(isControlled ? zoomLevelProp : internalZoom, maxZoom);
-  const zoomRef = (0,external_react_.useRef)(zoomLevel);
+  const zoomRef = (0,external_react_.useRef)(zoomLevel); // latest zoom for WaveSurfer redraw/zoom handlers
   zoomRef.current = zoomLevel;
   const prevZoomRef = (0,external_react_.useRef)(null);
   const isZoomed = zoomLevel > constants/* WAVEFORM_ZOOM_MIN */.LW;
@@ -4765,8 +5090,38 @@ function WaveformView({
     widthPx: canvasWidthPx,
     zoomLevel
   }), [canvasWidthPx, durationSec, height, maxZoom, scrollLeft, zoomLevel]);
-  const viewportRef = (0,external_react_.useRef)(viewport);
-  viewportRef.current = viewport;
+  const viewportRef = (0,external_react_.useRef)(viewport); // live scroll window; prefer this over render-state while the camera is moving
+  const onViewportCommit = (0,external_react_.useCallback)((scrollLeftPx, nextViewport) => {
+    onViewportChangeRef.current?.(nextViewport);
+    setScrollLeft(scrollLeftPx);
+  }, []);
+  const {
+    apply: applyPlayheadCamera,
+    applyScrollLeft,
+    cancelJump,
+    clearFollowPin,
+    handleScroll: handleCameraScroll,
+    isFollowPinned,
+    onSeek: onPlayheadSeek,
+    onZoom,
+    releaseUserPanHold
+  } = usePlayheadCamera({
+    mediaElRef,
+    onViewportCommit,
+    playheadRef,
+    viewportRef,
+    wavesurferRef
+  });
+  (0,external_react_.useLayoutEffect)(() => {
+    viewportRef.current = createWaveformViewport({
+      durationSec: viewport.durationSec,
+      heightPx: viewport.heightPx,
+      maxZoom: viewport.maxZoom,
+      scrollLeftPx: viewportRef.current.scrollLeftPx,
+      widthPx: viewport.widthPx,
+      zoomLevel: viewport.zoomLevel
+    });
+  }, [viewport]);
   const setZoomLevel = (0,external_react_.useCallback)(nextZoom => {
     const zoom = clampWaveformZoom(nextZoom, maxZoom);
     if (!isControlled) {
@@ -4774,12 +5129,20 @@ function WaveformView({
     }
     onZoomChange?.(zoom);
   }, [isControlled, maxZoom, onZoomChange]);
+  const markPointerZoom = (0,external_react_.useCallback)(() => {
+    pointerZoomRef.current = true;
+    window.clearTimeout(pointerZoomClearTimerRef.current);
+    pointerZoomClearTimerRef.current = window.setTimeout(() => {
+      pointerZoomRef.current = false;
+      pointerZoomClearTimerRef.current = 0;
+    }, constants/* WAVEFORM_ZOOM_DISMISS_MS */.m6);
+  }, []);
   const syncViewport = (0,external_react_.useCallback)(() => {
     const wavesurfer = wavesurferRef.current;
     if (!wavesurfer) {
       return;
     }
-    const scrollLeftPx = getScrollLeft(wavesurfer);
+    const scrollLeftPx = WaveformView_getScrollLeft(wavesurfer);
     viewportRef.current = getViewportAtScroll(viewportRef.current, scrollLeftPx);
     onViewportChangeRef.current?.(viewportRef.current);
     setScrollLeft(scrollLeftPx);
@@ -4789,29 +5152,14 @@ function WaveformView({
     if (!playhead) {
       return;
     }
-    playhead.style.left = timeLeftPercent(timeSec, durationSecRef.current, viewportRef.current);
+    if (!isFollowPinned()) {
+      playhead.style.left = timeLeftPercent(timeSec, durationSecRef.current, viewportRef.current);
+    }
     const wavesurfer = wavesurferRef.current;
     if (wavesurfer && wavesurfer.setTime) {
       wavesurfer.setTime(timeSec);
     }
-  }, []);
-  const applyScrollLeft = (0,external_react_.useCallback)((scrollLeftPx, shouldCommitState) => {
-    const wavesurfer = wavesurferRef.current;
-    if (!wavesurfer || !wavesurfer.setScroll) {
-      return;
-    }
-    programmaticScrollRef.current = true;
-    wavesurfer.setScroll(scrollLeftPx);
-    viewportRef.current = getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer, scrollLeftPx));
-    window.requestAnimationFrame(() => {
-      // Keep the flag through delayed `scroll` after a zoom setScroll.
-      programmaticScrollRef.current = false;
-    });
-    if (shouldCommitState) {
-      onViewportChangeRef.current?.(viewportRef.current);
-      setScrollLeft(getScrollLeft(wavesurfer, scrollLeftPx));
-    }
-  }, []);
+  }, [isFollowPinned]);
   (0,external_react_.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
@@ -4842,11 +5190,9 @@ function WaveformView({
       onSeekRef.current?.(relativeX * durationSecRef.current);
     });
     const unsubscribeScroll = wavesurfer.on('scroll', () => {
-      if (programmaticScrollRef.current) {
-        viewportRef.current = getViewportAtScroll(viewportRef.current, getScrollLeft(wavesurfer));
-        return;
-      }
-      syncViewport();
+      handleCameraScroll(() => {
+        syncViewport();
+      });
     });
     const unsubscribeZoom = wavesurfer.on('zoom', () => {
       syncViewport();
@@ -4864,6 +5210,8 @@ function WaveformView({
     displayedPeaksRef.current = peaksRef.current;
     syncViewport();
     return () => {
+      releaseUserPanHold();
+      cancelJump();
       window.cancelAnimationFrame(peakTransitionAnimationRef.current);
       unsubscribeClick();
       unsubscribeScroll();
@@ -4873,7 +5221,7 @@ function WaveformView({
       wavesurferRef.current = null;
       displayedPeaksRef.current = null;
     };
-  }, [height, syncViewport]);
+  }, [cancelJump, handleCameraScroll, height, releaseUserPanHold, syncViewport]);
   (0,external_react_.useLayoutEffect)(() => {
     const el = containerRef.current;
     if (!el) {
@@ -4935,23 +5283,30 @@ function WaveformView({
     zoomOriginRef.current = null;
     const didZoomChange = prevZoomRef.current !== zoomLevel;
     prevZoomRef.current = zoomLevel;
+    if (origin || didZoomChange) {
+      onZoom();
+    }
     if (minPxPerSec > 0) {
       if (origin) {
         applyScrollLeft(origin.timeSec * minPxPerSec - origin.pointerX, true);
-      } else if (didZoomChange) {
-        const maxScroll = Math.max(0, durationSec * minPxPerSec - viewWidthPx);
-        applyScrollLeft(Math.min(maxScroll, Math.max(0, currentTimeRef.current * minPxPerSec - viewWidthPx / 2)), true);
+      } else if (didZoomChange && !pointerZoomRef.current) {
+        const zoomedViewport = createWaveformViewport({
+          durationSec,
+          heightPx: height,
+          maxZoom,
+          scrollLeftPx: 0,
+          widthPx: viewWidthPx,
+          zoomLevel
+        });
+        applyScrollLeft(Math.min(maxScrollLeft(zoomedViewport), Math.max(0, currentTimeRef.current * minPxPerSec - viewWidthPx / 2)), true);
       }
     }
     wavesurfer.setTime(currentTimeRef.current);
     syncViewport();
-  }, [applyScrollLeft, durationSec, maxZoom, syncViewport, zoomLevel]);
+    updatePlayheadPosition(currentTimeRef.current);
+  }, [applyScrollLeft, durationSec, height, maxZoom, onZoom, syncViewport, updatePlayheadPosition, zoomLevel]);
   (0,external_react_.useLayoutEffect)(() => {
-    if (mediaEl && !mediaEl.paused) {
-      updatePlayheadPosition(mediaEl.currentTime);
-      return;
-    }
-    updatePlayheadPosition(currentTime);
+    updatePlayheadPosition(mediaEl ? mediaEl.currentTime : currentTime);
   }, [currentTime, durationSec, mediaEl, updatePlayheadPosition, viewport]);
   (0,external_react_.useEffect)(() => {
     const media = mediaEl;
@@ -4961,18 +5316,26 @@ function WaveformView({
     const tick = () => {
       if (!media.paused) {
         updatePlayheadPosition(media.currentTime);
+        applyPlayheadCamera(media.currentTime, false);
       }
       playheadAnimationRef.current = window.requestAnimationFrame(tick);
     };
     const startLoop = () => {
       window.cancelAnimationFrame(playheadAnimationRef.current);
+      releaseUserPanHold();
+      applyPlayheadCamera(media.currentTime, true);
       playheadAnimationRef.current = window.requestAnimationFrame(tick);
     };
     const stopLoop = () => {
       window.cancelAnimationFrame(playheadAnimationRef.current);
+      cancelJump();
+      releaseUserPanHold();
+      clearFollowPin();
+      syncViewport();
       updatePlayheadPosition(media.currentTime);
     };
     const handleSeeked = () => {
+      onPlayheadSeek(media.currentTime);
       updatePlayheadPosition(media.currentTime);
     };
     if (!media.paused) {
@@ -4984,12 +5347,14 @@ function WaveformView({
     media.addEventListener('seeked', handleSeeked);
     return () => {
       window.cancelAnimationFrame(playheadAnimationRef.current);
+      cancelJump();
+      releaseUserPanHold();
       media.removeEventListener('play', startLoop);
       media.removeEventListener('playing', startLoop);
       media.removeEventListener('pause', stopLoop);
       media.removeEventListener('seeked', handleSeeked);
     };
-  }, [mediaEl, updatePlayheadPosition]);
+  }, [applyPlayheadCamera, cancelJump, clearFollowPin, mediaEl, onPlayheadSeek, releaseUserPanHold, syncViewport, updatePlayheadPosition]);
   (0,external_react_.useEffect)(() => {
     const wavesurfer = wavesurferRef.current;
     if (!wavesurfer || !wavesurfer.setOptions || !(durationSec > 0)) {
@@ -4997,7 +5362,7 @@ function WaveformView({
     }
     window.cancelAnimationFrame(peakTransitionAnimationRef.current);
     const fromPeaks = displayedPeaksRef.current;
-    if (!fromPeaks || fromPeaks === peaks || prefersReducedMotion()) {
+    if (!fromPeaks || fromPeaks === peaks || WaveformView_prefersReducedMotion()) {
       displayedPeaksRef.current = peaks;
       applyPeaks(wavesurfer, peaks, durationSec);
       return undefined;
@@ -5046,6 +5411,7 @@ function WaveformView({
     const captureZoomOrigin = clientX => {
       const rect = track.getBoundingClientRect();
       zoomOriginRef.current = zoomOriginAtPointer(clientX - rect.left, wavesurferRef.current, durationSec, rect.width);
+      markPointerZoom();
     };
     /** Zoom origin at the midpoint of a two-finger pinch. */
@@ -5077,6 +5443,7 @@ function WaveformView({
         distance: touchDistance(event.touches),
         zoom: zoomRef.current
       };
+      markPointerZoom();
     };
     const onTouchMove = event => {
       const pinch = pinchStartRef.current;
@@ -5085,6 +5452,7 @@ function WaveformView({
       }
       event.preventDefault();
       zoomOriginRef.current = zoomOriginFromPinch(event.touches);
+      markPointerZoom();
       setZoomLevel(pinch.zoom * (touchDistance(event.touches) / pinch.distance));
     };
     const onTouchEnd = event => {
@@ -5104,13 +5472,14 @@ function WaveformView({
     track.addEventListener('touchend', onTouchEnd);
     track.addEventListener('touchcancel', onTouchEnd);
     return () => {
+      window.clearTimeout(pointerZoomClearTimerRef.current);
       track.removeEventListener('wheel', onZoomWheel);
       track.removeEventListener('touchstart', onTouchStart);
       track.removeEventListener('touchmove', onTouchMove);
       track.removeEventListener('touchend', onTouchEnd);
       track.removeEventListener('touchcancel', onTouchEnd);
     };
-  }, [durationSec, setZoomLevel]);
+  }, [durationSec, markPointerZoom, setZoomLevel]);
   const onHoverMove = (0,external_react_.useCallback)(event => {
     if (!interactive) {
       return;
@@ -5512,6 +5881,7 @@ function isFpsAvailable(player) {
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Bq: () => (/* binding */ WAVEFORM_PLAYHEAD_JUMP_MS),
 /* harmony export */   DY: () => (/* binding */ WAVEFORM_BAR_RADIUS),
 /* harmony export */   EB: () => (/* binding */ CLIENT_DECODE_MAX_COMPRESSED_BYTES),
 /* harmony export */   FY: () => (/* binding */ MAX_PEAK_COUNT),
@@ -5519,7 +5889,9 @@ function isFpsAvailable(player) {
 /* harmony export */   Kl: () => (/* binding */ WAVEFORM_MIN_VIEW_WINDOW_SEC),
 /* harmony export */   LW: () => (/* binding */ WAVEFORM_ZOOM_MIN),
 /* harmony export */   Lu: () => (/* binding */ WAVEFORM_BAR_GAP),
+/* harmony export */   NM: () => (/* binding */ WAVEFORM_FOLLOW_INSET_PX),
 /* harmony export */   XS: () => (/* binding */ WAVEFORM_BAR_MIN_HEIGHT),
+/* harmony export */   Zs: () => (/* binding */ WAVEFORM_FOLLOW_SCROLL_SETTLE_MS),
 /* harmony export */   f3: () => (/* binding */ CLIENT_DECODE_PEAK_COUNT),
 /* harmony export */   i8: () => (/* binding */ PEAK_UNIT_MAX),
 /* harmony export */   m6: () => (/* binding */ WAVEFORM_ZOOM_DISMISS_MS),
@@ -5562,6 +5934,10 @@ const WAVEFORM_ZOOM_MAX = 24;
 const WAVEFORM_MIN_VIEW_WINDOW_SEC = 4;
 const WAVEFORM_ZOOM_SLIDER_MAX = 100;
 const WAVEFORM_ZOOM_DISMISS_MS = 250;
+const WAVEFORM_FOLLOW_INSET_PX = 200;
+const WAVEFORM_PLAYHEAD_JUMP_MS = 400;
+/** After the last user pan, wait this long before the camera may pin again. */
+const WAVEFORM_FOLLOW_SCROLL_SETTLE_MS = 150;
 const WAVEFORM_BAR_GAP = 2;
 const WAVEFORM_BAR_WIDTH = 2;
 const WAVEFORM_BAR_RADIUS = WAVEFORM_BAR_WIDTH / 2;
@@ -21945,7 +22321,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.84.0";
+const CLIENT_VERSION = "3.85.0";
 /* eslint-enable no-undef */
 class Logger {
@@ -34752,7 +35128,7 @@ class MP3Viewer extends media_MediaBaseViewer {
    * @return {Promise<{ default: Function }>} MP3ControlsV2 module
    */
   importV2Controls() {
-    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 3845));
+    return Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 3678));
   }
   /**

package/package.json CHANGED Viewed

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