box-content-preview 3.75.0 → 3.77.0

package/dist/lib/index.js

@@ -15388,7 +15388,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 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.75.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.77.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 = {};
@@ -17085,7 +17085,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const Logger_CLIENT_NAME = "box-content-preview";
-const Logger_CLIENT_VERSION = "3.75.0";
+const Logger_CLIENT_VERSION = "3.77.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -31890,6 +31890,42 @@ const play_48px_namespaceObject = "<svg fill=\"#fff\" height=\"48\" viewBox=\"0
 const arrow_curved_back_24px_namespaceObject = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.707 2.29346C12.3165 1.90293 11.6835 1.90293 11.293 2.29346L8.64648 4.93994C8.06097 5.52574 8.06083 6.47534 8.64648 7.06104L11.293 9.70752C11.6834 10.0976 12.3166 10.0976 12.707 9.70752C13.0974 9.3171 13.0972 8.68399 12.707 8.29346L11.4131 6.99951H12C15.3136 6.99951 17.9998 9.68597 18 12.9995C18 16.3132 15.3137 18.9995 12 18.9995C10.7239 18.9995 9.54372 18.6019 8.57227 17.9243C8.11945 17.6086 7.49569 17.7198 7.17969 18.1724C6.8638 18.6252 6.97502 19.2489 7.42773 19.5649C8.72394 20.4691 10.3016 20.9995 12 20.9995C16.4183 20.9995 20 17.4178 20 12.9995C19.9998 8.5814 16.4182 4.99951 12 4.99951H11.415L12.707 3.70752C13.0975 3.31707 13.0973 2.684 12.707 2.29346ZM3.2793 8.99951C2.67882 8.99951 2.32725 9.26833 2.27832 9.9126L2.09277 12.3882V12.4126C2.06348 12.8862 2.33203 13.2964 2.92285 13.2964C3.31348 13.2964 3.49414 13.2085 3.76758 12.9692C3.99217 12.7691 4.29991 12.5933 4.68555 12.5933C5.35925 12.5933 5.83283 13.0476 5.83301 13.6919C5.83301 14.3511 5.33984 14.8394 4.6709 14.8394C4.10449 14.8394 3.7627 14.5708 3.48926 14.1606C3.27447 13.8923 3.05948 13.7798 2.72266 13.7798C2.26868 13.7798 2.00015 14.0437 2 14.4829C2 14.6537 2.04404 14.8199 2.12207 14.9761C2.4834 15.6938 3.51855 16.2212 4.68555 16.2212C6.36035 16.2212 7.52246 15.2007 7.52246 13.6528C7.52229 12.3151 6.56531 11.3774 5.23242 11.3774C4.49526 11.3774 3.92389 11.6852 3.65039 12.1489H3.61621L3.75293 10.3765H6.44824C6.87793 10.3765 7.15137 10.1079 7.15137 9.68799C7.15121 9.26828 6.87292 8.99951 6.44824 8.99951H3.2793Z\" fill=\"white\"/>\n</svg>\n";
 ;// ./src/lib/icons/arrow_curved_forward_24px.svg
 const arrow_curved_forward_24px_namespaceObject = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M11.293 2.29346C11.6835 1.90293 12.3165 1.90293 12.707 2.29346L15.3535 4.93994C15.939 5.52574 15.9392 6.47535 15.3535 7.06104L12.707 9.70752C12.3166 10.0976 11.6834 10.0976 11.293 9.70752C10.9026 9.31711 10.9028 8.684 11.293 8.29346L12.5869 6.99951H12C8.68642 6.99951 6.00021 9.68598 6 12.9995C6 16.3132 8.68629 18.9995 12 18.9995C13.2761 18.9995 14.4563 18.6019 15.4277 17.9243C15.8805 17.6086 16.5043 17.7198 16.8203 18.1724C17.1362 18.6252 17.025 19.2489 16.5723 19.5649C15.2761 20.4691 13.6984 20.9995 12 20.9995C7.58172 20.9995 4 17.4178 4 12.9995C4.00021 8.58141 7.58185 4.99951 12 4.99951H12.585L11.293 3.70752C10.9025 3.31708 10.9027 2.684 11.293 2.29346ZM20.9258 8.99951C21.3505 8.99951 21.6287 9.26828 21.6289 9.68799C21.6289 10.1079 21.3555 10.3765 20.9258 10.3765H18.2305L18.0938 12.1489H18.1279C18.4014 11.6852 18.9728 11.3774 19.71 11.3774C21.0428 11.3774 21.9998 12.3151 22 13.6528C22 15.2007 20.8379 16.2212 19.1631 16.2212C17.9961 16.2212 16.9609 15.6938 16.5996 14.9761C16.5216 14.8199 16.4775 14.6537 16.4775 14.4829C16.4777 14.0437 16.7462 13.7798 17.2002 13.7798C17.537 13.7798 17.752 13.8923 17.9668 14.1606C18.2402 14.5708 18.582 14.8394 19.1484 14.8394C19.8174 14.8394 20.3105 14.3511 20.3105 13.6919C20.3104 13.0476 19.8368 12.5933 19.1631 12.5933C18.7774 12.5933 18.4697 12.7691 18.2451 12.9692C17.9717 13.2085 17.791 13.2964 17.4004 13.2964C16.8096 13.2964 16.541 12.8862 16.5703 12.4126V12.3882L16.7559 9.9126C16.8048 9.26833 17.1564 8.99951 17.7568 8.99951H20.9258Z\" fill=\"white\"/>\n</svg>\n";
+;// ./src/lib/viewers/media/fitFrameToViewport.js
+/**
+ * Contain-fits a frame into the viewport (same model as object-fit: contain).
+ * Never exceeds the viewport; does not enforce a minimum width.
+ *
+ * @param {number} aspectRatio - width / height
+ * @param {Object} viewport - { width, height }
+ * @return {{ width: number, height: number }}
+ */
+function fitFrameToViewport(aspectRatio, viewport = {}) {
+  const {
+    width: viewportWidth = 0,
+    height: viewportHeight = 0
+  } = viewport;
+  const ratio = aspectRatio || 1;
+  if (viewportWidth <= 0 || viewportHeight <= 0) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  let width = viewportWidth;
+  let height = width / ratio;
+  if (height > viewportHeight) {
+    height = viewportHeight;
+    width = height * ratio;
+  }
+  if (width > viewportWidth) {
+    width = viewportWidth;
+    height = width / ratio;
+  }
+  return {
+    width,
+    height
+  };
+}
 ;// ./src/lib/viewers/media/VideoPreloader.js
 function VideoPreloader_defineProperty(e, r, t) { return (r = VideoPreloader_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function VideoPreloader_toPropertyKey(t) { var i = VideoPreloader_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -31899,6 +31935,7 @@ function VideoPreloader_toPrimitive(t, r) { if ("object" != typeof t || !t) retu
 
 
 
+
 class VideoPreloader extends (events_default()) {
   /**
    * [constructor]
@@ -31927,6 +31964,12 @@ class VideoPreloader extends (events_default()) {
     VideoPreloader_defineProperty(this, "wrapperClassName", void 0);
     /** @property {HTMLElement} - Preload wrapper element */
     VideoPreloader_defineProperty(this, "wrapperEl", void 0);
+    /** @property {boolean} - When true, never create/paint a new Instant Preview poster */
+    VideoPreloader_defineProperty(this, "blockPosterPaint", false);
+    /** @property {number} - Monotonic id so overlapping showPreload fetches cannot append orphans */
+    VideoPreloader_defineProperty(this, "preloadRequestId", 0);
+    /** @property {Promise|null} - In-flight showPreload promise (single-flight) */
+    VideoPreloader_defineProperty(this, "showPreloadPromise", null);
     /**
      * Cleans up preload DOM.
      *
@@ -31940,9 +31983,13 @@ class VideoPreloader extends (events_default()) {
         }
         this.wrapperEl = undefined;
       }
+
+      // Remove any Instant Preview wrappers left by overlapping showPreload races.
+      this.removeOrphanPreloadWrappers();
       this.preloadEl = undefined;
       this.imageEl = undefined;
       this.placeholderEl = undefined;
+      this.showPreloadPromise = null;
       if (this.srcUrl) {
         URL.revokeObjectURL(this.srcUrl);
         this.srcUrl = undefined;
@@ -31955,16 +32002,17 @@ class VideoPreloader extends (events_default()) {
      * @return {void}
      */
     VideoPreloader_defineProperty(this, "loadHandler", () => {
-      if (!this.preloadEl || !this.imageEl) {
+      if (!this.preloadEl || !this.imageEl || !this.preloadEl.classList.contains(CLASS_INVISIBLE)) {
         return;
       }
-      this.sizeContainerToViewport(this.preloadOptions?.viewport);
+      if (this.checkVideoLoaded()) {
+        return;
+      }
+      this.sizeContainerToViewport(this.resolveViewport());
       this.preloadEl.classList.remove(CLASS_INVISIBLE);
-      if (this.containerEl && this.containerEl.parentNode) {
-        const mediaWrapper = this.containerEl.parentNode;
-        if (mediaWrapper && mediaWrapper.classList && mediaWrapper.classList.contains('bp-media')) {
-          mediaWrapper.classList.add(CLASS_IS_VISIBLE);
-        }
+      const mediaWrapper = this.containerEl?.closest('.bp-media');
+      if (mediaWrapper) {
+        mediaWrapper.classList.add(CLASS_IS_VISIBLE);
       }
       const onImageClick = this.preloadOptions?.onImageClick;
       if (onImageClick && this.wrapperEl) {
@@ -31993,6 +32041,37 @@ class VideoPreloader extends (events_default()) {
     this.wrapperClassName = CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_VIDEO;
   }
 
+  /**
+   * Stop any in-flight or future poster from painting. Used once the video is ready
+   * (or playback has dismissed Instant Preview) so a late JPG cannot overlay the video.
+   * Does not hide an Instant Preview that is already painted — play still dismisses that.
+   *
+   * @return {void}
+   */
+  blockFuturePosterPaint() {
+    this.blockPosterPaint = true;
+    // Invalidate in-flight showPreload work so a late fetch cannot append another wrapper.
+    this.preloadRequestId += 1;
+  }
+
+  /**
+   * Removes Instant Preview wrapper nodes in the container that are not the tracked wrapper.
+   * Overlapping showPreload calls can leave orphans that dismiss would otherwise miss.
+   *
+   * @private
+   * @return {void}
+   */
+  removeOrphanPreloadWrappers() {
+    if (!this.containerEl) {
+      return;
+    }
+    this.containerEl.querySelectorAll(`.${this.wrapperClassName}`).forEach(el => {
+      if (el !== this.wrapperEl) {
+        el.remove();
+      }
+    });
+  }
+
   /**
    * Shows a preload of the video by showing a thumbnail image. This should be called
    * while the full video loads to give the user visual feedback on the file as soon as possible.
@@ -32007,16 +32086,27 @@ class VideoPreloader extends (events_default()) {
   showPreload(preloadUrlWithAuth, containerEl, options = {}) {
     this.containerEl = containerEl;
     this.preloadOptions = options;
-    return this.api.get(preloadUrlWithAuth, {
+    if (this.shouldAbortPosterPaint()) {
+      return Promise.resolve();
+    }
+
+    // load() may call showPreload again before wrapperEl is set (async fetch). Only one
+    // in-flight create is allowed so dismiss cannot leave an orphan wrapper behind.
+    if (this.wrapperEl || this.showPreloadPromise) {
+      return this.showPreloadPromise || Promise.resolve();
+    }
+    this.preloadRequestId += 1;
+    const requestId = this.preloadRequestId;
+    this.showPreloadPromise = this.api.get(preloadUrlWithAuth, {
       type: 'blob'
     }).then(handleRepresentationBlobFetch).then(imgBlob => {
-      if (this.checkVideoLoaded()) {
+      if (requestId !== this.preloadRequestId || this.checkVideoLoaded()) {
         return;
       }
       this.srcUrl = URL.createObjectURL(imgBlob);
-      this.wrapperEl = document.createElement('div');
-      this.wrapperEl.className = this.wrapperClassName;
-      this.wrapperEl.innerHTML = `
+      const wrapperEl = document.createElement('div');
+      wrapperEl.className = this.wrapperClassName;
+      wrapperEl.innerHTML = `
                 <div class="${CLASS_BOX_PREVIEW_PRELOAD} ${CLASS_INVISIBLE}">
                     <div class="${CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER}">
                         <img class="${CLASS_BOX_PREVIEW_PRELOAD_CONTENT}" src="${this.srcUrl}" />
@@ -32024,6 +32114,17 @@ class VideoPreloader extends (events_default()) {
                     </div>
                 </div>
             `.trim();
+
+      // Video may have become ready while we built the DOM — do not attach an unpainted poster.
+      if (requestId !== this.preloadRequestId || this.checkVideoLoaded()) {
+        URL.revokeObjectURL(this.srcUrl);
+        this.srcUrl = undefined;
+        return;
+      }
+
+      // Drop any stray Instant Preview nodes before attaching the tracked one.
+      this.wrapperEl = wrapperEl;
+      this.removeOrphanPreloadWrappers();
       this.containerEl.appendChild(this.wrapperEl);
       this.placeholderEl = this.wrapperEl.querySelector(`.${CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER}`);
       this.preloadEl = this.wrapperEl.querySelector(`.${CLASS_BOX_PREVIEW_PRELOAD}`);
@@ -32037,7 +32138,10 @@ class VideoPreloader extends (events_default()) {
       }
     }).catch(() => {
       // Silently fail if preload image can't be loaded
+    }).finally(() => {
+      this.showPreloadPromise = null;
     });
+    return this.showPreloadPromise;
   }
 
   /**
@@ -32046,6 +32150,8 @@ class VideoPreloader extends (events_default()) {
    * @return {void}
    */
   hidePreload() {
+    // Orphans are never faded via wrapperEl; remove them immediately on dismiss.
+    this.removeOrphanPreloadWrappers();
     if (!this.wrapperEl) {
       return;
     }
@@ -32124,6 +32230,16 @@ class VideoPreloader extends (events_default()) {
       this.placeholderEl.appendChild(spinner);
     }
   }
+
+  /**
+   * Whether the poster is still the authoritative painted frame.
+   * False once hide/dismiss starts (transparent fade) so resize uses video geometry.
+   *
+   * @return {boolean} true when the poster has painted and is not dismissing
+   */
+  isVisible() {
+    return !!this.preloadEl && !!this.wrapperEl && !this.preloadEl.classList.contains(CLASS_INVISIBLE) && !this.wrapperEl.classList.contains(CLASS_IS_TRANSPARENT);
+  }
   /**
    * Binds event listeners for preload
    *
@@ -32154,7 +32270,25 @@ class VideoPreloader extends (events_default()) {
     }
   }
   /**
-   * Sizes the container based on viewport dimensions and image aspect ratio to match video player sizing.
+   * Resolves the viewport to size against, preferring a live getter when provided
+   * so layout changes after showPreload() are reflected at paint time.
+   *
+   * @private
+   * @return {Object|undefined} viewport width/height
+   */
+  resolveViewport() {
+    const {
+      getViewport,
+      viewport
+    } = this.preloadOptions || {};
+    if (typeof getViewport === 'function') {
+      return getViewport();
+    }
+    return viewport;
+  }
+
+  /**
+   * Sizes the target based on viewport dimensions and image aspect ratio to match video player sizing.
    * This prevents the thumbnail from appearing small and then jumping to the correct size.
    *
    * @param {Object} [viewportOverride] - Optional { width, height }; when provided, use instead of walking DOM (same as video viewport)
@@ -32190,52 +32324,87 @@ class VideoPreloader extends (events_default()) {
       };
     }
 
-    // Apply minimum width to match video sizing logic
-    // This ensures controls don't overflow
-    const containerWidth = Math.max(MIN_VIDEO_WIDTH_PX, viewport.width);
-
-    // Calculate container height based on image aspect ratio
     // Use natural dimensions if available (image has loaded), otherwise use current dimensions
     const imageWidth = this.imageEl.naturalWidth || this.imageEl.width || 1;
     const imageHeight = this.imageEl.naturalHeight || this.imageEl.height || 1;
-    const aspectRatio = imageWidth / imageHeight;
+    if (this.preloadOptions?.earlyPaint) {
+      const {
+        width,
+        height
+      } = fitFrameToViewport(imageWidth / imageHeight, viewport);
+      this.containerEl.style.width = `${width}px`;
+      this.containerEl.style.height = `${height}px`;
+      return;
+    }
 
-    // Calculate height based on width and aspect ratio
+    // Legacy path: enforce minimum width to match V1 / pre-early-paint V2 video sizing
+    const containerWidth = Math.max(MIN_VIDEO_WIDTH_PX, viewport.width);
+    const aspectRatio = imageWidth / imageHeight;
     let containerHeight = containerWidth / aspectRatio;
     let finalWidth = containerWidth;
-
-    // Ensure height doesn't exceed viewport height
     if (containerHeight > viewport.height) {
       containerHeight = viewport.height;
-      // If height is constrained, recalculate width to maintain aspect ratio
       finalWidth = containerHeight * aspectRatio;
-      // Ensure we still meet minimum width requirement
       if (finalWidth < MIN_VIDEO_WIDTH_PX) {
         finalWidth = MIN_VIDEO_WIDTH_PX;
         containerHeight = finalWidth / aspectRatio;
       }
     }
-
-    // Set container dimensions
     this.containerEl.style.width = `${finalWidth}px`;
     this.containerEl.style.height = `${containerHeight}px`;
   }
   /**
-   * Check if video is already loaded - if so, hide the preload.
+   * Whether Instant Preview should stop creating/painting a poster.
+   * True once the viewer marks the video ready, while playing, or once metadata exists.
    *
    * @private
-   * @return {boolean} Whether video is already loaded
+   * @return {boolean}
+   */
+  shouldAbortPosterPaint() {
+    if (this.blockPosterPaint) {
+      return true;
+    }
+    if (!this.containerEl) {
+      return false;
+    }
+    const videoEl = this.containerEl.querySelector('video');
+    if (!videoEl) {
+      return false;
+    }
+
+    // Playing: never let a late poster land on top of playback.
+    if (videoEl.paused === false) {
+      return true;
+    }
+
+    // Metadata available: same gate Instant Preview has always used.
+    return videoEl.readyState >= 1;
+  }
+
+  /**
+   * Check if video is already loaded / poster paint should be aborted.
+   * Unpainted poster DOM is removed immediately; an already-visible Instant Preview is left
+   * for dismiss-on-play. Reveals the video when tearing down an unpainted poster.
+   *
+   * @private
+   * @return {boolean} Whether poster create/paint should abort
    */
   checkVideoLoaded() {
-    // If video element exists and has loaded metadata, hide the preload
-    if (this.containerEl) {
-      const videoEl = this.containerEl.querySelector('video');
-      if (videoEl && videoEl.readyState >= 1) {
-        this.hidePreload();
-        return true;
-      }
+    if (!this.shouldAbortPosterPaint()) {
+      return false;
     }
-    return false;
+    const painted = this.wrapperEl && this.preloadEl && !this.preloadEl.classList.contains(CLASS_INVISIBLE);
+    if (painted) {
+      // Instant Preview is already up — play/dismiss owns hiding it.
+      return true;
+    }
+
+    // Never painted (or no DOM): drop it and make sure the video can show.
+    if (this.wrapperEl) {
+      this.cleanupPreload();
+    }
+    this.containerEl?.querySelector('video')?.classList.remove(CLASS_INVISIBLE);
+    return true;
   }
 }
 /* harmony default export */ const media_VideoPreloader = (VideoPreloader);
@@ -32254,6 +32423,7 @@ function VideoBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) ret
 
 
 
+
 const MOUSE_MOVE_TIMEOUT_IN_MILLIS = 1000;
 const CLASS_PLAY_BUTTON = 'bp-media-play-button';
 const CLASS_PLAY_CONTAINER = 'bp-media-overlay-play-container';
@@ -32274,6 +32444,8 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     VideoBaseViewer_defineProperty(this, "videoAnnotationsEnabled", false);
     /** @property {VideoPreloader} - Video preloader instance */
     VideoBaseViewer_defineProperty(this, "preloader", void 0);
+    /** @property {HTMLElement} - Full-size padded stage around the shared V2 media frame */
+    VideoBaseViewer_defineProperty(this, "mediaStageEl", void 0);
     /**
      * Auto-play was prevented, try muted play
      *
@@ -32337,6 +32509,18 @@ class VideoBaseViewer extends media_MediaBaseViewer {
 
     // Call super() to set up common layout
     super.setup();
+    this.isVideoPlayerV2 = this.featureEnabled('videoPlayerV2.enabled') && this.supportsVideoPlayerV2();
+    this.isVideoPosterEarlyPaint = this.isVideoPlayerV2 && this.featureEnabled('videoPosterEarlyPaint.enabled');
+    if (this.isVideoPlayerV2) {
+      this.wrapperEl.classList.add('bp-media--v2');
+      this.mediaContainerEl.classList.add('bp-media-container--v2');
+      if (this.isVideoPosterEarlyPaint) {
+        this.mediaStageEl = document.createElement('div');
+        this.mediaStageEl.classList.add('bp-media-stage--v2');
+        this.wrapperEl.insertBefore(this.mediaStageEl, this.mediaContainerEl);
+        this.mediaStageEl.appendChild(this.mediaContainerEl);
+      }
+    }
     this.videoAnnotationsEnabled = this.featureEnabled(VIDEO_ANNOTATIONS_ENABLED);
     this.isNarrowVideo = false;
     this.userRequestedPlay = false;
@@ -32359,17 +32543,22 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     this.bufferingSpinnerEl = this.mediaContainerEl.appendChild(document.createElement('div'));
     this.bufferingSpinnerEl.classList.add('bp-media-buffering-spinner');
     this.bufferingSpinnerEl.classList.add(CLASS_HIDDEN);
-    if (this.useReactControls() && !this.featureEnabled('videoPlayerV2.enabled')) {
+    if (this.useReactControls() && !this.isVideoPlayerV2) {
       // Shift up by half the control bar + half the spinner to visually center above the controls
       this.bufferingSpinnerEl.style.marginTop = `-${VIDEO_PLAYER_CONTROL_BAR_HEIGHT / 2 + SPINNER_HALF_SIZE}px`;
     }
-    if (this.featureEnabled('videoPlayerV2.enabled')) {
-      this.wrapperEl.classList.add('bp-media--v2');
-      this.mediaContainerEl.classList.add('bp-media-container--v2');
-    }
     this.lowerLights();
   }
 
+  /**
+   * Whether this viewer supports the V2 video player structure.
+   *
+   * @return {boolean} true when V2 is supported
+   */
+  supportsVideoPlayerV2() {
+    return true;
+  }
+
   /**
    * Loads a media source.
    *
@@ -32386,14 +32575,21 @@ class VideoBaseViewer extends media_MediaBaseViewer {
   /**
    * Dismisses the preload thumbnail if it is currently visible. Safe to call
    * multiple times — hidePreload() guards on wrapperEl internally.
+   * Always reveals the video: the poster wrapper may already be gone after fade/cleanup
+   * while mediaEl is still bp-is-invisible from showPreload().
    *
    * @private
    * @return {void}
    */
   dismissPreload() {
-    if (this.preloader?.wrapperEl) {
+    const hadPoster = Boolean(this.preloader?.wrapperEl);
+    this.preloader?.blockFuturePosterPaint?.();
+    if (hadPoster) {
       this.hidePreload();
-      this.mediaEl.classList.remove(CLASS_INVISIBLE);
+    }
+    this.mediaEl?.classList.remove(CLASS_INVISIBLE);
+    // Avoid extra resize on no-op calls (e.g. play with no Instant Preview).
+    if (hadPoster) {
       this.resize();
     }
   }
@@ -32404,9 +32600,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
    * @return {void}
    */
   handlePlayRequest() {
-    if (this.preloader) {
-      this.preloader.showLoading();
-    }
+    this.preloader?.showLoading();
     this.userRequestedPlay = true;
     this.togglePlay();
   }
@@ -32453,7 +32647,12 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     const options = {
       onImageClick: () => this.handlePlayRequest()
     };
-    if (this.wrapperEl) {
+    if (this.isVideoPosterEarlyPaint) {
+      // Resolve viewport at paint time so sidebar/layout changes after showPreload
+      // don't leave the poster sized to a stale, oversized box.
+      options.getViewport = () => this.getVideoViewport();
+      options.earlyPaint = true;
+    } else if (this.wrapperEl) {
       const controlsHeight = this.useReactControls() ? VIDEO_PLAYER_CONTROL_BAR_HEIGHT : 0;
       options.viewport = {
         width: this.wrapperEl.clientWidth,
@@ -32482,9 +32681,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
    * @return {void}
    */
   hidePreload() {
-    if (this.preloader) {
-      this.preloader.hidePreload();
-    }
+    this.preloader?.hidePreload();
   }
 
   /**
@@ -32586,7 +32783,12 @@ class VideoBaseViewer extends media_MediaBaseViewer {
   destroy() {
     if (this.preloadBlobUrl) {
       URL.revokeObjectURL(this.preloadBlobUrl);
+      this.preloadBlobUrl = undefined;
     }
+
+    // Stop in-flight Instant Preview from painting after navigate-away, and drop any poster DOM.
+    this.preloader?.blockFuturePosterPaint?.();
+    this.preloader?.cleanupPreload?.();
     if (this.mediaEl) {
       this.mediaEl.removeEventListener('mousemove', this.mousemoveHandler);
       this.mediaEl.removeEventListener('click', this.pointerHandler);
@@ -32606,6 +32808,20 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     super.destroy();
   }
 
+  /**
+   * Once the video has data: stop late Instant Preview painting, and reveal the
+   * video element when no poster wrapper is covering it.
+   *
+   * @protected
+   * @return {void}
+   */
+  syncInstantPreviewWithLoadedVideo() {
+    this.preloader?.blockFuturePosterPaint?.();
+    if (!this.preloader?.wrapperEl) {
+      this.mediaEl?.classList.remove(CLASS_INVISIBLE);
+    }
+  }
+
   /**
    * Handler for meta data load for the media element.
    *
@@ -32614,9 +32830,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
    */
   loadeddataHandler() {
     super.loadeddataHandler();
-    if (!this.preloader?.wrapperEl) {
-      this.mediaEl.classList.remove(CLASS_INVISIBLE);
-    }
+    this.syncInstantPreviewWithLoadedVideo();
     this.showPlayButton();
     if (this.userRequestedPlay) {
       this.play();
@@ -32651,7 +32865,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
 
     // For the V2 player, mount the controls on the wrapper (above the media container)
     // so their width is constrained by the viewport rather than the video
-    const controlsContainerEl = this.featureEnabled('videoPlayerV2.enabled') ? this.wrapperEl : this.mediaContainerEl;
+    const controlsContainerEl = this.isVideoPlayerV2 ? this.wrapperEl : this.mediaContainerEl;
     this.controls = new ControlsRoot({
       className: 'bp-VideoControlsRoot',
       containerEl: controlsContainerEl,
@@ -32789,10 +33003,11 @@ class VideoBaseViewer extends media_MediaBaseViewer {
    */
   resize() {
     // Reset any prior set widths and heights
-    // We are only going to modify the widths and not heights
-    // This is because in Chrome its not possible to set a height
-    // that larger than the current videoHeight.
+    // V1 only modifies widths: Chrome can't set a height larger than the current videoHeight
     this.mediaEl.style.width = '';
+    if (this.isVideoPosterEarlyPaint) {
+      this.mediaEl.style.height = '';
+    }
     if (this.mediaContainerEl) {
       this.mediaContainerEl.style.width = '';
       this.mediaContainerEl.style.height = '';
@@ -32810,6 +33025,47 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     super.resize();
   }
 
+  /**
+   * Returns the usable V2 stage content box (inside padding).
+   *
+   * Prefer the stage element's box over the wrapper: the stage is what actually
+   * clips/centers the shared media frame. V2 controls are position:absolute overlays
+   * and do not consume flex space, so do not reserve control-bar height here.
+   *
+   * @private
+   * @return {Object} viewport width and height
+   */
+  getVideoViewport() {
+    if (!this.mediaStageEl) {
+      return {
+        height: Math.max(0, this.wrapperEl.clientHeight),
+        width: Math.max(0, this.wrapperEl.clientWidth)
+      };
+    }
+    const stageStyle = window.getComputedStyle(this.mediaStageEl);
+    const horizontalPadding = (parseFloat(stageStyle.paddingLeft) || 0) + (parseFloat(stageStyle.paddingRight) || 0);
+    const verticalPadding = (parseFloat(stageStyle.paddingTop) || 0) + (parseFloat(stageStyle.paddingBottom) || 0);
+    return {
+      width: Math.max(0, this.mediaStageEl.clientWidth - horizontalPadding),
+      height: Math.max(0, this.mediaStageEl.clientHeight - verticalPadding)
+    };
+  }
+
+  /**
+   * Applies width/height to the shared V2 media frame (container + video element).
+   *
+   * @private
+   * @param {number} width
+   * @param {number} height
+   * @return {void}
+   */
+  applySharedMediaFrame(width, height) {
+    this.mediaEl.style.width = `${width}px`;
+    this.mediaEl.style.height = `${height}px`;
+    this.mediaContainerEl.style.width = `${width}px`;
+    this.mediaContainerEl.style.height = `${height}px`;
+  }
+
   /**
    * Calculates and applies video dimensions based on viewport constraints.
    * Handles three cases: video fits in viewport, fullscreen mode, or overflow.
@@ -32821,15 +33077,26 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     let width = this.videoWidth || 0;
     let height = this.videoHeight || 0;
     const controlsHeight = this.useReactControls() ? VIDEO_PLAYER_CONTROL_BAR_HEIGHT : 0;
-
-    // Calculate the viewport height minus the control bar height if using react controls
-    // This is necessary to prevent the control bar from overflowing the viewport when the video scale
-    // is expanded.
-    const viewport = {
+    const viewport = this.isVideoPosterEarlyPaint ? this.getVideoViewport() : {
       height: this.wrapperEl.clientHeight - controlsHeight,
       width: this.wrapperEl.clientWidth
     };
 
+    // Early-paint V2: one contain-fit into the stage for poster and video so Instant Preview
+    // and playback share the same frame (V2 controls overlay and do not change the stage).
+    if (this.isVideoPosterEarlyPaint) {
+      if (this.preloader?.isVisible()) {
+        this.preloader.sizeContainerToViewport(viewport);
+        this.mediaEl.style.width = this.mediaContainerEl.style.width;
+        this.mediaEl.style.height = this.mediaContainerEl.style.height;
+        return;
+      }
+      const aspectRatio = this.aspect || width / (height || 1) || 1;
+      const frame = fitFrameToViewport(aspectRatio, viewport);
+      this.applySharedMediaFrame(frame.width, frame.height);
+      return;
+    }
+
     // We need the width to be atleast wide enough for the controls
     // to not overflow and fit properly
     if (width < MIN_VIDEO_WIDTH_PX) {
@@ -32869,7 +33136,9 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     if (this.mediaContainerEl && this.mediaEl.style.width) {
       this.mediaContainerEl.style.width = this.mediaEl.style.width;
     }
-    if (this.featureEnabled('videoPlayerV2.enabled')) {
+
+    // Legacy V2: let the padded container fill the stage; size Instant Preview to the video box.
+    if (this.isVideoPlayerV2) {
       this.mediaContainerEl.style.width = '';
       if (this.preloader?.wrapperEl && this.mediaEl.style.width) {
         const videoWidth = parseInt(this.mediaEl.style.width, 10);
@@ -32892,7 +33161,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
    */
   handleNarrowVideoUI() {
     if (this.useReactControls()) {
-      const widthNumber = this.featureEnabled('videoPlayerV2.enabled') ? this.wrapperEl.clientWidth : parseInt(this.mediaEl.style.width, 10);
+      const widthNumber = this.isVideoPlayerV2 ? this.wrapperEl.clientWidth : parseInt(this.mediaEl.style.width, 10);
       if (!Number.isNaN(widthNumber)) {
         // check if play and seek buttons exist in the dom
         if (this.playContainerEl && widthNumber >= SMALL_VIDEO_WIDTH_THRESHOLD) {
@@ -34117,7 +34386,6 @@ class MP4Viewer extends media_VideoBaseViewer {
 
     // Call super() first to set up common layout
     super.setup();
-    this.isVideoPlayerV2 = this.featureEnabled('videoPlayerV2.enabled');
 
     // mp4 specific class
     this.wrapperEl.classList.add(CSS_CLASS_MP4);
@@ -34153,9 +34421,7 @@ class MP4Viewer extends media_VideoBaseViewer {
     if (this.isDestroyed()) {
       return;
     }
-    if (!this.preloader?.wrapperEl) {
-      this.mediaEl.classList.remove(CLASS_INVISIBLE);
-    }
+    this.syncInstantPreviewWithLoadedVideo();
     if (this.useReactControls()) {
       this.loadUIReact();
     } else {
@@ -34514,7 +34780,6 @@ class DashViewer extends media_VideoBaseViewer {
 
     // dash specific class
     this.wrapperEl.classList.add(CSS_CLASS_DASH);
-    this.isVideoPlayerV2 = this.featureEnabled('videoPlayerV2.enabled');
   }
 
   /**
@@ -34576,7 +34841,7 @@ class DashViewer extends media_VideoBaseViewer {
       this.showPreload();
       return Promise.resolve();
     }
-    if (!this.preloader?.wrapperEl) this.showPreload();
+    if (!this.preloader?.wrapperEl && !this.preloader?.showPreloadPromise) this.showPreload();
     this.mediaUrl = this.options.representation.content.url_template;
     this.watermarkCacheBust = Date.now();
     this.addEventListenersForMediaLoad();
@@ -35265,9 +35530,7 @@ class DashViewer extends media_VideoBaseViewer {
     if (this.isDestroyed()) {
       return;
     }
-    if (!this.preloader?.wrapperEl) {
-      this.mediaEl.classList.remove(CLASS_INVISIBLE);
-    }
+    this.syncInstantPreviewWithLoadedVideo();
     this.calculateVideoDimensions();
     if (this.useReactControls()) {
       this.loadUIReact();
@@ -36166,6 +36429,11 @@ class Video360Viewer extends media_DashViewer {
     this.onCanvasMouseUp = this.onCanvasMouseUp.bind(this);
   }
 
+  /** @inheritdoc */
+  supportsVideoPlayerV2() {
+    return false;
+  }
+
   /** @inheritdoc */
   setup() {
     if (this.isSetup) {
@@ -36174,11 +36442,6 @@ class Video360Viewer extends media_DashViewer {
 
     // Call super() to set up common layout
     super.setup();
-
-    // 360 videos do not support v2 video player yet, so remove the v2 classes
-    this.isVideoPlayerV2 = false;
-    this.wrapperEl.classList.remove('bp-media--v2');
-    this.mediaContainerEl.classList.remove('bp-media-container--v2');
     this.destroyed = false;
 
     // Hide video element