box-content-preview 3.105.0 → 3.107.0

package/dist/lib/index.js

@@ -424,7 +424,7 @@ class PreviewError extends Error {
 /* harmony export */   zb: () => (/* binding */ CLASS_DOC_FIRST_IMAGE),
 /* harmony export */   ze: () => (/* binding */ STATUS_PENDING)
 /* harmony export */ });
-/* unused harmony exports CLASS_ACTIVE, CLASS_BOX_PREVIEW, CLASS_BOX_PREVIEW_CONTAINER, CLASS_BOX_PREVIEW_HEADER_CONTAINER, CLASS_BOX_PREVIEW_ICON, CLASS_BOX_PREVIEW_LOGO_CUSTOM, CLASS_BOX_PREVIEW_LOGO_DEFAULT, CLASS_PREFETCHED_IMAGE, SELECTOR_BOX_PREVIEW_HEADER, SELECTOR_BOX_PREVIEW_NOTIFICATION */
+/* unused harmony exports CLASS_ACTIVE, CLASS_BOX_PREVIEW, CLASS_BOX_PREVIEW_CONTAINER, CLASS_BOX_PREVIEW_HEADER_CONTAINER, CLASS_BOX_PREVIEW_ICON, CLASS_BOX_PREVIEW_LOGO_CUSTOM, CLASS_BOX_PREVIEW_LOGO_DEFAULT, CLASS_BOX_PREVIEW_VERSION_BANNER, CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED, CLASS_PREFETCHED_IMAGE, SELECTOR_BOX_PREVIEW_VERSION_BANNER, SELECTOR_BOX_PREVIEW_HEADER, SELECTOR_BOX_PREVIEW_NOTIFICATION */
 const CLASS_ACTIVE = 'bp-is-active';
 const CLASS_ANNOTATIONS_CREATE_DRAWING = 'bp-annotations-create--drawing';
 const CLASS_ANNOTATIONS_CREATE_HIGHLIGHT = 'bp-annotations-create--highlight';
@@ -453,6 +453,8 @@ const CLASS_BOX_PREVIEW_LOGO_CUSTOM = 'bp-custom-logo';
 const CLASS_BOX_PREVIEW_LOGO_DEFAULT = 'bp-default-logo';
 const CLASS_BOX_PREVIEW_MENU = 'bp-menu';
 const CLASS_BOX_PREVIEW_MOBILE = 'bp-is-mobile';
+const CLASS_BOX_PREVIEW_VERSION_BANNER = 'bp-version-banner';
+const CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED = 'bp-version-banner--compared';
 const CLASS_BOX_PREVIEW_OVERLAY = 'bp-overlay';
 const CLASS_BOX_PREVIEW_OVERLAY_WRAPPER = 'bp-overlay-wrapper';
 const CLASS_BOX_PREVIEW_PRELOAD = 'bp-preload';
@@ -492,6 +494,7 @@ const DISCOVERABILITY_ATTRIBUTE = 'data-resin-discoverability';
 const SELECTOR_BOX_PREVIEW_CONTAINER = `.${CLASS_BOX_PREVIEW_CONTAINER}`;
 const SELECTOR_BOX_PREVIEW = `.${CLASS_BOX_PREVIEW}`;
 const SELECTOR_BOX_PREVIEW_CONTENT = `.${CLASS_BOX_PREVIEW_CONTENT}`;
+const SELECTOR_BOX_PREVIEW_VERSION_BANNER = (/* unused pure expression or super */ null && (`.${CLASS_BOX_PREVIEW_VERSION_BANNER}`));
 const SELECTOR_NAVIGATION_LEFT = '.bp-navigate-left';
 const SELECTOR_NAVIGATION_RIGHT = '.bp-navigate-right';
 const SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT = '.bp-btn-annotate-point';
@@ -1029,7 +1032,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.105.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.107.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 = {};
@@ -3698,21 +3701,29 @@ function eventTargetElement(target) {
  * Optimistic comment-badge selection that clears on pointerdown outside the
  * selected avatar or its cluster. Host `hostSelectedId` can restore a different
  * id; acking the dismissed id must not bring the ring back.
+ * A new `selectionSeq` is the user picking that same comment again, so the ring returns.
  */
-function useDismissableMarkerSelection(hostSelectedId = null) {
+function useDismissableMarkerSelection(hostSelectedId = null, selectionSeq = null) {
   const containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   const dismissedIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const appliedSeqRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   const [optimisticSelectedId, setOptimisticSelectedId] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
   const [isSelectionDismissed, setIsSelectionDismissed] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const selectedId = optimisticSelectedId ?? (isSelectionDismissed ? null : hostSelectedId);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     setOptimisticSelectedId(null);
+    if (selectionSeq != null && selectionSeq !== appliedSeqRef.current) {
+      appliedSeqRef.current = selectionSeq;
+      dismissedIdRef.current = null;
+      setIsSelectionDismissed(false);
+      return;
+    }
     if (dismissedIdRef.current && hostSelectedId === dismissedIdRef.current) {
       return;
     }
     dismissedIdRef.current = null;
     setIsSelectionDismissed(false);
-  }, [hostSelectedId]);
+  }, [hostSelectedId, selectionSeq]);
   const selectMarker = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(id => {
     dismissedIdRef.current = null;
     setIsSelectionDismissed(false);
@@ -4807,6 +4818,8 @@ function morphPeaks(from, to, elapsedMs) {
 }
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/viewport.ts
 var waveform_viewport = __webpack_require__(772);
+// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/range.ts
+var waveform_range = __webpack_require__(4253);
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/useTapeWaveform.ts
 var useTapeWaveform = __webpack_require__(7308);
 // EXTERNAL MODULE: ./node_modules/classnames/index.js
@@ -4873,6 +4886,7 @@ function WaveformCommentMarkers({
   isTape = false,
   onCommentMarkerClick,
   selectedId: hostSelectedId = null,
+  selectionSeq = null,
   viewport = null
 }) {
   const trackRef = (0,external_react_.useRef)(null); // width source for clustering overlapping badges
@@ -4880,7 +4894,7 @@ function WaveformCommentMarkers({
     containerRef,
     selectMarker,
     selectedId
-  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId);
+  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId, selectionSeq);
   const [trackWidth, setTrackWidth] = (0,external_react_.useState)(0);
   const canShowTrack = durationSec > 0 && commentMarkers.length > 0;
   const zoomLevel = viewport?.zoomLevel ?? constants/* WAVEFORM_ZOOM_MIN */.LW;
@@ -5392,8 +5406,6 @@ function IconComment24(props) {
   }));
 }
 /* harmony default export */ const icons_IconComment24 = (IconComment24);
-// EXTERNAL MODULE: ./src/lib/viewers/media/waveform/range.ts
-var waveform_range = __webpack_require__(4253);
 ;// ./src/lib/viewers/media/waveform/usePlayheadCamera.ts
 
 
@@ -5727,6 +5739,15 @@ var IconExit24 = __webpack_require__(8950);
 function stopRangeEvent(event) {
   event.stopPropagation();
 }
+function focusMediaContainer(event) {
+  const {
+    currentTarget
+  } = event;
+  if (!(currentTarget instanceof Element)) {
+    return;
+  }
+  currentTarget.closest('.bp-media-container')?.focus();
+}
 function offsetLeftCss(base, offsetPx) {
   if (!offsetPx) {
     return base;
@@ -5810,7 +5831,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
   const isRangeOpen = displayed.startMs !== displayed.endMs && activeHandle == null;
   const showCommentButton = !readOnly && Boolean(onDragCreate) && isRangeOpen;
   const showClearControl = onRangeClear != null && isRangeOpen;
-  const showClearOnly = readOnly && showClearControl;
+  const showClearOnly = showClearControl && !showCommentButton;
   const syncPositions = (0,external_react_.useCallback)((next, nextViewport, nextDurationSec) => {
     displayedRef.current = next;
     const collapsed = next.startMs === next.endMs;
@@ -6040,6 +6061,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       "data-testid": "bp-waveform-range-clear",
       onClick: event => {
         stopRangeEvent(event);
+        focusMediaContainer(event);
         onRangeClear();
       },
       onPointerDown: stopRangeEvent,
@@ -6077,6 +6099,7 @@ const WaveformRangeSelection = /*#__PURE__*/(0,external_react_.forwardRef)(funct
       "data-testid": "bp-waveform-range-clear",
       onClick: event => {
         stopRangeEvent(event);
+        focusMediaContainer(event);
         onRangeClear();
       },
       onPointerDown: stopRangeEvent,
@@ -6162,6 +6185,14 @@ function devicePixelWidth(widthCssPx) {
   const pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
   return widthCssPx * pixelRatio;
 }
+
+/** Dragged time while media is still at the pre-drag position. */
+function pinnedPlayheadSec(pin, mediaTimeSec) {
+  if (pin && Math.abs(mediaTimeSec - pin.fromSec) <= 0.001 && Math.abs(mediaTimeSec - pin.sec) > 0.001) {
+    return pin.sec;
+  }
+  return null;
+}
 function WaveformView_prefersReducedMotion() {
   return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
@@ -6320,9 +6351,9 @@ function WaveformView({
   const containerRef = (0,external_react_.useRef)(null); // WaveSurfer canvas host
   const playheadAnimationRef = (0,external_react_.useRef)(0); // animation frame id while the playhead follows playback
   const playheadRef = (0,external_react_.useRef)(null); // playhead element the camera positions
+  const rangeLayerRef = (0,external_react_.useRef)(null);
   const trackRef = (0,external_react_.useRef)(null); // hover / tap target around the canvas
   const wavesurferRef = (0,external_react_.useRef)(null); // WaveSurfer instance
-  const rangeLayerRef = (0,external_react_.useRef)(null);
 
   // Latest props for WaveSurfer + media listeners that must not re-subscribe each render.
   const cameraModeRef = (0,external_react_.useRef)(cameraMode); // latest tape/desktop; WaveSurfer create() deps stay empty
@@ -6333,10 +6364,10 @@ function WaveformView({
   const isPlayingRef = (0,external_react_.useRef)(isPlaying); // latest isPlaying; tape tap toggles from this
   const mediaElRef = (0,external_react_.useRef)(mediaEl); // latest <audio>/<video>; camera + playhead tick read this
   const onPlayPauseRef = (0,external_react_.useRef)(onPlayPause); // latest play/pause; tape tap must not re-bind
-  const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
   const onRangeChangeRef = (0,external_react_.useRef)(onRangeChange); // latest range commit; drag-create must not re-bind
   const onRangeClearRef = (0,external_react_.useRef)(onRangeClear); // latest click-outside clear; WaveSurfer click must not re-bind
   const onRangeDragChangeRef = (0,external_react_.useRef)(onRangeDragChange); // latest drag flag; unmount must not re-bind
+  const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
   const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange); // latest viewport callback; camera commits here
   const peaksRef = (0,external_react_.useRef)(peaks); // latest peaks; WaveSurfer create() + morph read this
 
@@ -6347,9 +6378,12 @@ function WaveformView({
   const bufferProgressRef = (0,external_react_.useRef)(0); // latest buffer fill; zoomed tile tint reads this
   const hideScrubTimeChipTimerRef = (0,external_react_.useRef)(0); // hides the tape scrub time chip after scroll settles
   const hoverProgressRef = (0,external_react_.useRef)(null); // latest hover fill; zoomed tile tint reads this
+  const isPlayheadDraggingRef = (0,external_react_.useRef)(false); // playhead drag owns position until pointerup
   const lastObservedWidthRef = (0,external_react_.useRef)(0); // last ResizeObserver width; skip no-op resizes
   const liveHeightRef = (0,external_react_.useRef)(height); // canvas height last applied to WaveSurfer
   const pinchStartRef = (0,external_react_.useRef)(null); // two-finger distance and zoom at pinch start
+  const playheadDragRef = (0,external_react_.useRef)(null); // active playhead drag; pointerup seeks
+  const playheadPinRef = (0,external_react_.useRef)(null); // dragged time until media/props catch up
   const pointerZoomClearTimerRef = (0,external_react_.useRef)(0); // clears pointerZoomRef after WAVEFORM_ZOOM_DISMISS_MS
   const pointerZoomRef = (0,external_react_.useRef)(false); // pinch/wheel in progress; skip play/pause and tape recenter
   const queuedTapeSeekTimeSecRef = (0,external_react_.useRef)(null); // seek time waiting for the next animation frame
@@ -6362,16 +6396,18 @@ function WaveformView({
   const zoomOriginRef = (0,external_react_.useRef)(null); // pointer+time so zoom keeps that point fixed
 
   cameraModeRef.current = cameraMode;
-  currentTimeRef.current = currentTime;
+  if (!isPlayheadDraggingRef.current && playheadPinRef.current == null) {
+    currentTimeRef.current = currentTime;
+  }
   durationSecRef.current = durationSec;
   interactiveRef.current = interactive;
   isPlayingRef.current = isPlaying;
   mediaElRef.current = mediaEl;
   onPlayPauseRef.current = onPlayPause;
-  onSeekRef.current = onSeek;
   onRangeChangeRef.current = onRangeChange;
   onRangeClearRef.current = onRangeClear;
   onRangeDragChangeRef.current = onRangeDragChange;
+  onSeekRef.current = onSeek;
   onViewportChangeRef.current = onViewportChange;
   peaksRef.current = peaks;
   const [internalZoom, setInternalZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
@@ -6383,15 +6419,16 @@ function WaveformView({
   const [previewRange, setPreviewRange] = (0,external_react_.useState)(null);
   const [createRange, setCreateRange] = (0,external_react_.useState)(null);
   const [isRangeDragging, setIsRangeDragging] = (0,external_react_.useState)(false);
-  const isRangeDraggingRef = (0,external_react_.useRef)(false);
-  const rangeRef = (0,external_react_.useRef)(range); // latest committed draft; drag-create must not start on top of an open span
+  const [isPlayheadDragging, setIsPlayheadDragging] = (0,external_react_.useState)(false);
   const createDragRef = (0,external_react_.useRef)(null);
-  const tapeRangeHoldRef = (0,external_react_.useRef)(false); // a tape long-press is waiting to draw; touch must not scroll
+  const isRangeDraggingRef = (0,external_react_.useRef)(false);
+  const lastSetTimeSecRef = (0,external_react_.useRef)(null);
   const rangeDragPointerXRef = (0,external_react_.useRef)(null); // clientX while a handle or create-drag is down
+  const rangeRef = (0,external_react_.useRef)(range); // latest committed draft; drag-create must not start on top of an open span
   const removeCreateDragListenersRef = (0,external_react_.useRef)(null);
   const removeTapeContextMenuRef = (0,external_react_.useRef)(null);
   const skipNextSeekRef = (0,external_react_.useRef)(false); // ignore the click fired when a handle is released
-  const lastSetTimeSecRef = (0,external_react_.useRef)(null);
+  const tapeRangeHoldRef = (0,external_react_.useRef)(false); // a tape long-press is waiting to draw; touch must not scroll
   const [isRangeHovered, setIsRangeHovered] = (0,external_react_.useState)(false);
   const isControlled = typeof zoomLevelProp === 'number';
   const maxZoom = (0,waveform_viewport/* getWaveformZoomMax */.by)({
@@ -6826,7 +6863,17 @@ function WaveformView({
     applyZoomWindow();
   }, [applyZoomWindow]);
   (0,external_react_.useLayoutEffect)(() => {
-    updatePlayheadPosition(mediaEl ? mediaEl.currentTime : currentTime);
+    if (isPlayheadDraggingRef.current) {
+      return;
+    }
+    const mediaTimeSec = mediaEl ? mediaEl.currentTime : currentTime;
+    const draggedTimeSec = pinnedPlayheadSec(playheadPinRef.current, mediaTimeSec);
+    if (draggedTimeSec != null) {
+      updatePlayheadPosition(draggedTimeSec);
+      return;
+    }
+    playheadPinRef.current = null;
+    updatePlayheadPosition(mediaTimeSec);
   }, [currentTime, durationSec, mediaEl, updatePlayheadPosition, viewport]);
   (0,external_react_.useEffect)(() => {
     const media = mediaEl;
@@ -6834,10 +6881,15 @@ function WaveformView({
       return undefined;
     }
     const tick = () => {
-      if (!media.paused) {
-        updatePlayheadPosition(media.currentTime);
-        if (!isRangeDraggingRef.current) {
-          applyPlayheadCamera(media.currentTime, false);
+      if (!media.paused && !isPlayheadDraggingRef.current) {
+        const mediaTimeSec = media.currentTime;
+        const draggedTimeSec = pinnedPlayheadSec(playheadPinRef.current, mediaTimeSec);
+        if (draggedTimeSec == null) {
+          playheadPinRef.current = null;
+        }
+        updatePlayheadPosition(draggedTimeSec ?? mediaTimeSec);
+        if (draggedTimeSec == null && !isRangeDraggingRef.current) {
+          applyPlayheadCamera(mediaTimeSec, false);
         }
       }
       playheadAnimationRef.current = window.requestAnimationFrame(tick);
@@ -6845,7 +6897,7 @@ function WaveformView({
     const startLoop = () => {
       window.cancelAnimationFrame(playheadAnimationRef.current);
       releaseUserPanHold();
-      if (!isRangeDraggingRef.current) {
+      if (!isRangeDraggingRef.current && !isPlayheadDraggingRef.current) {
         applyPlayheadCamera(media.currentTime, true);
       }
       playheadAnimationRef.current = window.requestAnimationFrame(tick);
@@ -6858,9 +6910,15 @@ function WaveformView({
         clearFollowPin();
       }
       syncViewport();
-      updatePlayheadPosition(media.currentTime);
+      if (!isPlayheadDraggingRef.current) {
+        updatePlayheadPosition(media.currentTime);
+      }
     };
     const handleSeeked = () => {
+      if (isPlayheadDraggingRef.current) {
+        return;
+      }
+      playheadPinRef.current = null;
       onPlayheadSeek(media.currentTime);
       if (!isUserPanning() && !isRangeDraggingRef.current) {
         seekTo(media.currentTime);
@@ -6924,15 +6982,19 @@ function WaveformView({
     });
     if (isScrollableWindow) {
       tintZoomedWaveform(wavesurfer, fills);
-      return;
+    } else {
+      wavesurfer.setOptions({
+        progressColor: toCanvasFill(fills.progressColor, devicePixelWidth(canvasWidthPx)),
+        waveColor: toCanvasFill(fills.waveColor, devicePixelWidth(canvasWidthPx))
+      });
     }
-    wavesurfer.setOptions({
-      progressColor: toCanvasFill(fills.progressColor, devicePixelWidth(canvasWidthPx)),
-      waveColor: toCanvasFill(fills.waveColor, devicePixelWidth(canvasWidthPx))
-    });
-    lastSetTimeSecRef.current = currentTimeRef.current;
-    wavesurfer.setTime(currentTimeRef.current);
-  }, [activeRangeProgress, bufferProgress, canvasWidthPx, hoverProgress, isRangeDragging, isScrollableWindow, isTape, isZoomed]);
+    if (!isScrollableWindow || isPlayheadDragging) {
+      // WaveSurfer clips progressColor left of this time.
+      const playedUntilSec = isPlayheadDragging && hoverProgress != null ? hoverProgress * durationSecRef.current : currentTimeRef.current;
+      lastSetTimeSecRef.current = playedUntilSec;
+      wavesurfer.setTime(playedUntilSec);
+    }
+  }, [activeRangeProgress, bufferProgress, canvasWidthPx, hoverProgress, isPlayheadDragging, isRangeDragging, isScrollableWindow, isTape, isZoomed]);
   (0,external_react_.useEffect)(() => {
     const track = trackRef.current;
     if (!track) {
@@ -7045,6 +7107,9 @@ function WaveformView({
     setHoverProgress(Math.min(1, Math.max(0, pointerX / rect.width)));
   }, [durationSec, interactive, isTape]);
   const onHoverLeave = (0,external_react_.useCallback)(() => {
+    if (isPlayheadDraggingRef.current) {
+      return;
+    }
     setHoverProgress(null);
     setIsRangeHovered(false);
   }, []);
@@ -7091,10 +7156,10 @@ function WaveformView({
       hasPreviousFrame = true;
       previousFrameMs = frameMs;
       const pointer = getPointerInTrack();
-      const viewport = viewportRef.current;
+      const currentViewport = viewportRef.current;
       const scrollDeltaPx = pointer ? (0,waveform_viewport/* getRangeEdgeScrollDeltaPx */.CD)({
         elapsedSec,
-        pixelsPerSecond: viewport.pixelsPerSecond,
+        pixelsPerSecond: currentViewport.pixelsPerSecond,
         pointerX: pointer.x,
         widthPx: pointer.width
       }) : null;
@@ -7102,8 +7167,8 @@ function WaveformView({
         pendingScrollPx = 0;
       } else {
         pendingScrollPx += scrollDeltaPx;
-        const nextScroll = Math.min((0,waveform_viewport/* maxScrollLeft */.d0)(viewport), Math.max(0, viewport.scrollLeftPx + pendingScrollPx));
-        const scrolledPx = nextScroll - viewport.scrollLeftPx;
+        const nextScroll = Math.min((0,waveform_viewport/* maxScrollLeft */.d0)(currentViewport), Math.max(0, currentViewport.scrollLeftPx + pendingScrollPx));
+        const scrolledPx = nextScroll - currentViewport.scrollLeftPx;
         pendingScrollPx = scrolledPx === 0 ? 0 : pendingScrollPx - scrolledPx;
         if (scrolledPx !== 0) {
           applyScrollLeft(nextScroll, true);
@@ -7129,6 +7194,9 @@ function WaveformView({
         createDragRef.current = null;
         onRangeDragChangeRef.current?.(false);
       }
+      isPlayheadDraggingRef.current = false;
+      playheadDragRef.current = null;
+      playheadPinRef.current = null;
     };
   }, []);
   (0,external_react_.useLayoutEffect)(() => {
@@ -7228,7 +7296,7 @@ function WaveformView({
     const {
       target
     } = event;
-    if (target instanceof Element && target.closest('.bp-WaveformRange-handle, .bp-WaveformRange-comment')) {
+    if (target instanceof Element && target.closest('.bp-WaveformRange-handle, .bp-WaveformRange-comment, .bp-WaveformView-playhead--draggable')) {
       return;
     }
     const drag = rangeCreateDragFromEvent(event, {
@@ -7327,6 +7395,112 @@ function WaveformView({
   const isOverlayReadOnly = rangeReadOnly && createRange == null;
   const showPlayheadComment = interactive && !isPlaying && !isRangeDragging && (0,waveform_range/* isRangeCollapsed */.BT)(overlayRange) && Boolean(onPlayheadComment);
   const showRangeOverlay = Boolean(overlayRange) && (isRangeDragging || !isPlaying || !(0,waveform_range/* isRangeCollapsed */.BT)(overlayRange));
+  const canDragPlayhead = interactive && !isTape;
+
+  /** Media time under a pointer X on the waveform track. */
+  const mediaTimeFromClientX = clientX => {
+    const track = trackRef.current;
+    if (!track || !(durationSecRef.current > 0) || !Number.isFinite(clientX)) {
+      return null;
+    }
+    const rect = track.getBoundingClientRect();
+    if (!(rect.width > 0)) {
+      return null;
+    }
+    const pointerX = clientX - rect.left;
+    const currentViewport = viewportRef.current;
+    const unclampedTimeSec = currentViewport.pixelsPerSecond > 0 ? (0,waveform_viewport/* timeFromPositionPx */.lZ)(pointerX, currentViewport) : pointerX / rect.width * durationSecRef.current;
+    return Number.isFinite(unclampedTimeSec) ? Math.min(durationSecRef.current, Math.max(0, unclampedTimeSec)) : null;
+  };
+
+  /** CSS playhead + hover fills at timeSec; media seek waits for pointerup. */
+  const showDraggedPlayhead = timeSec => {
+    const playhead = playheadRef.current;
+    if (!playhead) {
+      return;
+    }
+    const drag = playheadDragRef.current;
+    playheadPinRef.current = {
+      fromSec: drag?.fromSec ?? timeSec,
+      sec: timeSec
+    };
+    playhead.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)(timeSec, durationSecRef.current, viewportRef.current);
+    setHoverProgress(timeSec / durationSecRef.current);
+  };
+  const onPlayheadPointerDown = event => {
+    if (event.target instanceof Element && event.target.closest('.bp-WaveformView-playheadComment')) {
+      return;
+    }
+    if (!canDragPlayhead || event.button > 0 || event.ctrlKey || event.metaKey || isRangeDraggingRef.current) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    try {
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    } catch {
+      return; // Don't start a drag we cannot track after the pointer leaves.
+    }
+    const fromSec = mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
+    playheadDragRef.current = {
+      fromSec,
+      pointerId: event.pointerId
+    };
+    playheadPinRef.current = {
+      fromSec,
+      sec: fromSec
+    };
+    isPlayheadDraggingRef.current = true;
+    setIsPlayheadDragging(true);
+    setHoverProgress(durationSecRef.current > 0 ? fromSec / durationSecRef.current : null);
+    clearFollowPin();
+    cancelJump();
+  };
+  const onPlayheadPointerMove = event => {
+    const drag = playheadDragRef.current;
+    if (!drag || event.pointerId !== drag.pointerId) {
+      return;
+    }
+    const timeSec = mediaTimeFromClientX(event.clientX);
+    if (timeSec == null) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    showDraggedPlayhead(timeSec);
+  };
+  const onPlayheadPointerUp = event => {
+    const drag = playheadDragRef.current;
+    if (!drag || event.pointerId !== drag.pointerId) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const timeSec = mediaTimeFromClientX(event.clientX) ?? playheadPinRef.current?.sec;
+    if (timeSec != null) {
+      playheadPinRef.current = {
+        fromSec: drag.fromSec,
+        sec: timeSec
+      };
+      currentTimeRef.current = timeSec;
+    }
+    playheadDragRef.current = null;
+    isPlayheadDraggingRef.current = false;
+    setIsPlayheadDragging(false);
+    if (event.type !== 'lostpointercapture') {
+      try {
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+      } catch {
+        // Capture was never set or already lost.
+      }
+    }
+    if (timeSec == null) {
+      return;
+    }
+    onPlayheadSeek(timeSec);
+    updatePlayheadPosition(timeSec);
+    onSeekRef.current?.(timeSec);
+  };
   const scrubTimeChip = isTape && scrubPreviewTimeSec != null ? /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover bp-WaveformView-hover--tape",
     "data-testid": "bp-waveform-hover"
@@ -7338,6 +7512,7 @@ function WaveformView({
     ref: bindOverlayPortalHost,
     className: classnames_default()('bp-WaveformView', {
       'bp-WaveformView--inert': !interactive,
+      'bp-WaveformView--playheadDragging': isPlayheadDragging,
       'bp-WaveformView--tape': isTape,
       'bp-WaveformView--zoomed': isZoomed
     }),
@@ -7366,8 +7541,16 @@ function WaveformView({
     className: "bp-WaveformView-canvas"
   }), /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: playheadRef,
-    className: "bp-WaveformView-playhead",
-    "data-testid": "bp-waveform-playhead"
+    className: classnames_default()('bp-WaveformView-playhead', {
+      'bp-WaveformView-playhead--draggable': canDragPlayhead
+    }),
+    "data-target-id": canDragPlayhead ? 'Waveform-dragPlayhead' : undefined,
+    "data-testid": "bp-waveform-playhead",
+    onLostPointerCapture: onPlayheadPointerUp,
+    onPointerCancel: onPlayheadPointerUp,
+    onPointerDown: onPlayheadPointerDown,
+    onPointerMove: onPlayheadPointerMove,
+    onPointerUp: onPlayheadPointerUp
   }, showPlayheadComment && /*#__PURE__*/external_react_["default"].createElement("button", {
     className: "bp-WaveformRange-comment bp-WaveformView-playheadComment",
     "data-target-id": "Waveform-commentAtTime",
@@ -7398,7 +7581,7 @@ function WaveformView({
     },
     onPreviewChange: setPreviewRange,
     onRangeChange: interactive && !isOverlayReadOnly ? onRangeChange : undefined,
-    onRangeClear: onRangeClear,
+    onRangeClear: isTape && !isRangeDragging ? onRangeClear : undefined,
     range: overlayRange,
     readOnly: isOverlayReadOnly,
     viewport: viewport
@@ -7650,7 +7833,11 @@ function WaveformZoomControl({
 
 
 
+
 const PLACEHOLDER_PEAKS = placeholderPeaks();
+
+/** Clicks here keep an open range. Everywhere else in the player dismisses it. */
+const RANGE_DISMISS_IGNORE = '.bp-WaveformView, .bp-WaveformCommentMarkers, .bp-WaveformRange-comment, .bp-WaveformZoomControl, .bp-MP3ControlsV2-bar';
 function MP3ControlsV2({
   autoplay,
   bufferedRange,
@@ -7699,6 +7886,7 @@ function MP3ControlsV2({
   const [playRequested, setPlayRequested] = (0,external_react_.useState)(hasStartedPlayback);
   const [viewport, setViewport] = (0,external_react_.useState)(null);
   const isTape = (0,useTapeWaveform/* default */.Ay)();
+  const controlsRef = (0,external_react_.useRef)(null); // player root; pointerdown outside the range chrome dismisses it
   const hasAppliedTapeDefaultZoomRef = (0,external_react_.useRef)(false); // ~10s window applied; reset to 1× when leaving tape
   const lastKeyboardZoomStepRef = (0,external_react_.useRef)(0); // last +/− step applied; skip re-step when maxZoom retriggers the effect
   const userChangedTapeZoomRef = (0,external_react_.useRef)(false); // pinch/wheel zoom; skip re-applying the 10s default
@@ -7770,7 +7958,9 @@ function MP3ControlsV2({
   const waveformRange = commentRangeDraft ?? commentRangeReadOnly;
   const isRangeReadOnly = commentRangeDraft == null && commentRangeReadOnly != null;
   const waveformMarkers = (0,external_react_.useMemo)(() => commentMarkers || [], [commentMarkers]);
-  const selectedMarkerId = (0,external_react_.useMemo)(() => waveformMarkers.find(marker => marker.isSelected)?.id ?? null, [waveformMarkers]);
+  const selectedMarker = (0,external_react_.useMemo)(() => waveformMarkers.find(marker => marker.isSelected) ?? null, [waveformMarkers]);
+  const selectedMarkerId = selectedMarker?.id ?? null;
+  const selectionSeq = selectedMarker?.selectionSeq ?? null;
   const handleCommentMarkerClick = (0,external_react_.useCallback)(marker => {
     setPlayRequested(true);
     onPlayPause(false);
@@ -7782,6 +7972,24 @@ function MP3ControlsV2({
   }, [onCommentMarkerClick, onPlayPause, onTimeChange]);
   const hasStarted = playRequested || hasStartedPlayback;
   const isWaveformInteractive = hasStarted && hasMediaMetadata;
+  const canDismissOpenRange = isWaveformInteractive && !(0,waveform_range/* isRangeCollapsed */.BT)(waveformRange);
+  (0,external_react_.useEffect)(() => {
+    const root = controlsRef.current;
+    if (!canDismissOpenRange || !onCommentRangeClear || !root) {
+      return undefined;
+    }
+    const onPointerDown = event => {
+      const {
+        target
+      } = event;
+      if (!(target instanceof Element) || target.closest(RANGE_DISMISS_IGNORE)) {
+        return;
+      }
+      onCommentRangeClear();
+    };
+    root.addEventListener('pointerdown', onPointerDown);
+    return () => root.removeEventListener('pointerdown', onPointerDown);
+  }, [canDismissOpenRange, onCommentRangeClear]);
   const isWaitingToPlay = hasStarted && !hasMediaMetadata;
   const showPlayOverlay = !hasStarted && !isPlaying;
   const hasZoomHandlers = hasRealPeaks && !showPlayOverlay;
@@ -7790,7 +7998,8 @@ function MP3ControlsV2({
   const showShuttle = !isTape && !!shuttleDirection && shuttleRate > 0;
   const waveformZoomLevel = isTape || hasZoomHandlers ? zoomLevel : constants/* WAVEFORM_ZOOM_MIN */.LW;
   return /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: "bp-MP3ControlsV2",
+    ref: controlsRef,
+    className: canDismissOpenRange ? 'bp-MP3ControlsV2 bp-MP3ControlsV2--rangeDismiss' : 'bp-MP3ControlsV2',
     "data-testid": "media-controls-wrapper-v2"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-stage"
@@ -7823,6 +8032,7 @@ function MP3ControlsV2({
     isTape: isTape,
     onCommentMarkerClick: handleCommentMarkerClick,
     selectedId: selectedMarkerId,
+    selectionSeq: selectionSeq,
     viewport: viewport
   })), showShuttle && shuttleDirection && /*#__PURE__*/external_react_["default"].createElement(WaveformShuttleIndicator, {
     direction: shuttleDirection,
@@ -25154,7 +25364,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.105.0";
+const CLIENT_VERSION = "3.107.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -38066,9 +38276,13 @@ class MP3Viewer extends media_MediaBaseViewer {
 
       // Host echoes often omit isSelected. Keep hostSelectedMarkerId so ↑/↓ can
       // still walk other comments at the same time. Clear only when that id is gone.
+      // selectionSeq is a new pick of that same comment: seek and draw the range again.
       if (selected) {
-        if (selected.id !== this.hostSelectedMarkerId) {
+        const incomingSeq = Number.isFinite(selected.selectionSeq) ? selected.selectionSeq : null;
+        const isRepeatSelect = incomingSeq != null && incomingSeq !== this.hostSelectedMarkerSeq;
+        if (selected.id !== this.hostSelectedMarkerId || isRepeatSelect) {
           this.hostSelectedMarkerId = selected.id;
+          this.hostSelectedMarkerSeq = incomingSeq;
           this.commentRangeReadOnly = commentMarkerRange(selected);
           if (Number.isFinite(selected.time)) {
             this.pendingHostSelectedSeek = selected;
@@ -38077,6 +38291,7 @@ class MP3Viewer extends media_MediaBaseViewer {
         }
       } else if (this.hostSelectedMarkerId && !markers.some(marker => marker.id === this.hostSelectedMarkerId)) {
         this.hostSelectedMarkerId = null;
+        this.hostSelectedMarkerSeq = null;
         this.pendingHostSelectedSeek = null;
         this.commentRangeReadOnly = null;
       }
@@ -38135,7 +38350,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     });
     MP3Viewer_defineProperty(this, "handleCommentRangeDragCreate", () => {
       const draft = this.commentRangeDraft;
-      if (!draft || (0,range/* isRangeCollapsed */.BT)(draft)) {
+      if (!this.getCanCreateComment() || !draft || (0,range/* isRangeCollapsed */.BT)(draft)) {
         return;
       }
       this.isCommentRangeTimestampActive = true;
@@ -38152,7 +38367,7 @@ class MP3Viewer extends media_MediaBaseViewer {
      */
     MP3Viewer_defineProperty(this, "handlePlayheadComment", () => {
       const timeSec = this.mediaEl?.currentTime;
-      if (this.shuttleDirection || !Number.isFinite(timeSec) || timeSec < 0) {
+      if (!this.getCanCreateComment() || this.shuttleDirection || !Number.isFinite(timeSec) || timeSec < 0) {
         return;
       }
       if (this.commentRangeDraft && !(0,range/* isRangeCollapsed */.BT)(this.commentRangeDraft)) {
@@ -38244,6 +38459,7 @@ class MP3Viewer extends media_MediaBaseViewer {
     this.commentRangeDraft = null;
     this.commentRangeReadOnly = null;
     this.hostSelectedMarkerId = null;
+    this.hostSelectedMarkerSeq = null;
     this.isCommentRangeDragging = false;
     this.isCommentRangeTimestampActive = false;
     this.shuttleDirection = null;
@@ -39184,6 +39400,17 @@ class MP3Viewer extends media_MediaBaseViewer {
     }
     super.mediaendHandler();
   }
+
+  /**
+   * Only an explicit `can_comment` shows Comment.
+   * A missing file, permissions object, or flag hides it.
+   *
+   * @return {boolean}
+   */
+  getCanCreateComment() {
+    const canComment = this.options?.file?.permissions?.can_comment;
+    return canComment ?? false;
+  }
   /**
    * @inheritdoc
    */
@@ -39232,8 +39459,8 @@ class MP3Viewer extends media_MediaBaseViewer {
         onCommentRangeChange: this.handleCommentRangeChange,
         onCommentRangeClear: this.handleCommentRangeClear,
         onCommentRangeDragChange: this.handleCommentRangeDragChange,
-        onCommentRangeDragCreate: this.handleCommentRangeDragCreate,
-        onPlayheadComment: this.handlePlayheadComment,
+        onCommentRangeDragCreate: this.getCanCreateComment() ? this.handleCommentRangeDragCreate : undefined,
+        onPlayheadComment: this.getCanCreateComment() ? this.handlePlayheadComment : undefined,
         onPlayNextChange: this.setPlayNext,
         peaks: this.waveformPeaks,
         playNext: this.isPlayNextEnabled(),
@@ -41090,12 +41317,13 @@ function TimeControlsV2({
   const [hoverTime, setHoverTime] = external_react_["default"].useState(0);
   const [trackWidth, setTrackWidth] = external_react_["default"].useState(0);
   const scrubberRef = external_react_["default"].useRef(null);
-  const hostSelectedId = external_react_["default"].useMemo(() => commentMarkers.find(marker => marker.isSelected)?.id ?? null, [commentMarkers]);
+  const selectedMarker = external_react_["default"].useMemo(() => commentMarkers.find(marker => marker.isSelected) ?? null, [commentMarkers]);
+  const hostSelectedId = selectedMarker?.id ?? null;
   const {
     containerRef,
     selectMarker,
     selectedId
-  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId);
+  } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId, selectedMarker?.selectionSeq ?? null);
   const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
   const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
   const currentPercentage = (0,utils/* percent */.K)(currentValue, durationValue);
@@ -45444,14 +45672,14 @@ function GalleryGrid({
   function syncHighRes() {
     const store = highResStoreRef.current;
     const {
-      pageRatio
+      pageRatio: thumbnailPageRatio
     } = thumbnail;
-    if (!store || !pageRatio) return;
+    if (!store || !thumbnailPageRatio) return;
     const width = getNeededThumbWidth();
     if (width === GALLERY_THUMB_MAX_WIDTH) {
-      store.setRetained([], width, pageRatio);
+      store.setRetained([], width, thumbnailPageRatio);
     } else if (!isProcessingRef.current) {
-      store.setRetained(getPagesNearViewport(0.5), width, pageRatio);
+      store.setRetained(getPagesNearViewport(0.5), width, thumbnailPageRatio);
     }
   }
   function getUnloadedNearViewport() {
@@ -55717,6 +55945,8 @@ class Preview extends (events_default()) {
    * @return {void}
    */
   destroy() {
+    clearTimeout(this.retryTimeout);
+
     // Log all load metrics
     this.emitLoadMetrics();