@hyperframes/studio 0.4.38 → 0.5.0-alpha.10

package/src/components/sidebar/CompositionsTab.tsx

@@ -1,4 +1,4 @@
-import { memo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 
 interface CompositionsTabProps {
   projectId: string;
@@ -8,6 +8,17 @@ interface CompositionsTabProps {
 }
 
 const DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
+const THUMBNAIL_SEEK_TIME_SECONDS = 3;
+const THUMBNAIL_PLAYBACK_SYNC_ATTEMPTS = 10;
+
+type PreviewWindow = Window & {
+  __player?: {
+    play?: () => void;
+    pause?: () => void;
+    seek?: (time: number) => void;
+    getDuration?: () => number;
+  };
+};
 
 export function resolveCompositionPreviewScale(input: {
   cardWidth: number;
@@ -28,6 +39,54 @@ export function resolveCompositionPreviewScale(input: {
   return Math.min(scaleX, scaleY);
 }
 
+export function resolveThumbnailSeekTime(durationSeconds: number | null | undefined): number {
+  if (
+    Number.isFinite(durationSeconds) &&
+    durationSeconds != null &&
+    durationSeconds > 0 &&
+    durationSeconds < THUMBNAIL_SEEK_TIME_SECONDS
+  ) {
+    return durationSeconds / 2;
+  }
+
+  return THUMBNAIL_SEEK_TIME_SECONDS;
+}
+
+function parsePositiveNumber(value: string | null): number | null {
+  if (value == null) return null;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
+function resolveIframeDuration(iframe: HTMLIFrameElement | null): number | null {
+  const win = iframe?.contentWindow as PreviewWindow | null;
+  const playerDuration = win?.__player?.getDuration?.();
+  if (Number.isFinite(playerDuration) && playerDuration != null && playerDuration > 0) {
+    return playerDuration;
+  }
+
+  const doc = iframe?.contentDocument;
+  const root = doc?.querySelector("[data-composition-id]") ?? doc?.documentElement ?? null;
+  return (
+    parsePositiveNumber(root?.getAttribute("data-composition-duration") ?? null) ??
+    parsePositiveNumber(root?.getAttribute("data-duration") ?? null)
+  );
+}
+
+function syncIframePlayback(iframe: HTMLIFrameElement | null, shouldPlay: boolean): boolean {
+  const player = (iframe?.contentWindow as PreviewWindow | null)?.__player;
+  if (!player) return false;
+
+  if (shouldPlay) {
+    player.play?.();
+    return true;
+  }
+
+  player.pause?.();
+  player.seek?.(resolveThumbnailSeekTime(resolveIframeDuration(iframe)));
+  return true;
+}
+
 function CompCard({
   projectId,
   comp,
@@ -41,7 +100,25 @@ function CompCard({
 }) {
   const [hovered, setHovered] = useState(false);
   const [stageSize, setStageSize] = useState(DEFAULT_PREVIEW_STAGE);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const syncTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const requestIframePlaybackSync = useCallback((shouldPlay: boolean) => {
+    if (syncTimer.current) {
+      clearTimeout(syncTimer.current);
+      syncTimer.current = null;
+    }
+
+    const sync = (remainingAttempts: number) => {
+      if (syncIframePlayback(iframeRef.current, shouldPlay) || remainingAttempts <= 0) return;
+
+      syncTimer.current = setTimeout(() => sync(remainingAttempts - 1), 100);
+    };
+
+    sync(THUMBNAIL_PLAYBACK_SYNC_ATTEMPTS);
+  }, []);
+
   const handleEnter = () => {
     hoverTimer.current = setTimeout(() => setHovered(true), 300);
   };
@@ -53,7 +130,6 @@ function CompCard({
     setHovered(false);
   };
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
-  const thumbnailUrl = `/api/projects/${projectId}/thumbnail/${comp}?t=2`;
   const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
   const previewScale = resolveCompositionPreviewScale({
     cardWidth: 80,
@@ -62,6 +138,17 @@ function CompCard({
     stageHeight: stageSize.height,
   });
 
+  useEffect(() => {
+    requestIframePlaybackSync(hovered);
+  }, [hovered, requestIframePlaybackSync]);
+
+  useEffect(() => {
+    return () => {
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
+      if (syncTimer.current) clearTimeout(syncTimer.current);
+    };
+  }, []);
+
   return (
     <div
       onClick={onSelect}
@@ -74,49 +161,34 @@ function CompCard({
       }`}
     >
       <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
-        {/* Live iframe preview on hover */}
-        {hovered && (
-          <iframe
-            src={previewUrl}
-            sandbox="allow-scripts allow-same-origin"
-            className="absolute left-0 top-0 border-none pointer-events-none"
-            style={{
-              transformOrigin: "0 0",
-              width: stageSize.width,
-              height: stageSize.height,
-              transform: `scale(${previewScale})`,
-            }}
-            onLoad={(e) => {
-              try {
-                const iframe = e.currentTarget;
-                const root = iframe.contentDocument?.querySelector("[data-composition-id]");
-                const width =
-                  Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
-                const height =
-                  Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
-                setStageSize({ width, height });
-              } catch {
-                setStageSize(DEFAULT_PREVIEW_STAGE);
-              }
-            }}
-            tabIndex={-1}
-          />
-        )}
-        {/* Static thumbnail — hidden while hovering */}
-        <div
-          className="absolute inset-0 transition-opacity duration-150"
-          style={{ opacity: hovered ? 0 : 1 }}
-        >
-          <img
-            src={thumbnailUrl}
-            alt={name}
-            loading="lazy"
-            className="w-full h-full object-contain"
-            onError={(e) => {
-              (e.target as HTMLImageElement).style.display = "none";
-            }}
-          />
-        </div>
+        <iframe
+          ref={iframeRef}
+          src={previewUrl}
+          sandbox="allow-scripts allow-same-origin"
+          loading="lazy"
+          className="absolute left-0 top-0 border-none pointer-events-none"
+          style={{
+            transformOrigin: "0 0",
+            width: stageSize.width,
+            height: stageSize.height,
+            transform: `scale(${previewScale})`,
+          }}
+          onLoad={(e) => {
+            try {
+              const iframe = e.currentTarget;
+              const root = iframe.contentDocument?.querySelector("[data-composition-id]");
+              const width = Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
+              const height =
+                Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
+              setStageSize({ width, height });
+              requestIframePlaybackSync(hovered);
+            } catch {
+              setStageSize(DEFAULT_PREVIEW_STAGE);
+            }
+          }}
+          title={`${name} preview`}
+          tabIndex={-1}
+        />
       </div>
       <div className="min-w-0 flex-1">
         <span className="text-[11px] font-medium text-neutral-300 truncate block">{name}</span>

package/src/components/sidebar/LeftSidebar.tsx

@@ -35,7 +35,6 @@ interface LeftSidebarProps {
   codeChildren?: ReactNode;
   onLint?: () => void;
   linting?: boolean;
-  onToggleCollapse?: () => void;
 }
 
 export const LeftSidebar = memo(function LeftSidebar({
@@ -58,7 +57,6 @@ export const LeftSidebar = memo(function LeftSidebar({
   codeChildren,
   onLint,
   linting,
-  onToggleCollapse,
 }: LeftSidebarProps) {
   const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
 
@@ -90,64 +88,45 @@ export const LeftSidebar = memo(function LeftSidebar({
       style={{ width }}
     >
       {/* Tabs — Code first */}
-      <div className="flex border-b border-neutral-800/50 flex-shrink-0">
-        <button
-          type="button"
-          onClick={() => selectTab("code")}
-          className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
-            tab === "code"
-              ? "text-neutral-200 border-b-2 border-studio-accent"
-              : "text-neutral-500 hover:text-neutral-400"
-          }`}
+      <div className="border-b border-neutral-800/50 px-3 py-3 flex-shrink-0">
+        <div
+          className="grid gap-1 rounded-[18px] bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
+          style={{ gridTemplateColumns: "0.9fr 1.25fr 0.9fr" }}
         >
-          Code
-        </button>
-        <button
-          type="button"
-          onClick={() => selectTab("compositions")}
-          className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
-            tab === "compositions"
-              ? "text-neutral-200 border-b-2 border-studio-accent"
-              : "text-neutral-500 hover:text-neutral-400"
-          }`}
-        >
-          Compositions
-        </button>
-        <button
-          type="button"
-          onClick={() => selectTab("assets")}
-          className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
-            tab === "assets"
-              ? "text-neutral-200 border-b-2 border-studio-accent"
-              : "text-neutral-500 hover:text-neutral-400"
-          }`}
-        >
-          Assets
-        </button>
-        {onToggleCollapse && (
           <button
             type="button"
-            onClick={onToggleCollapse}
-            className="mx-1 my-1 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
-            title="Hide sidebar"
-            aria-label="Hide sidebar"
+            onClick={() => selectTab("code")}
+            className={`rounded-[14px] px-2.5 py-2 text-[10px] font-semibold transition-all ${
+              tab === "code"
+                ? "bg-neutral-800 text-white"
+                : "text-neutral-500 hover:text-neutral-200"
+            }`}
           >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="m14 7-5 5 5 5" />
-              <path d="M19 4v16" />
-            </svg>
+            Code
           </button>
-        )}
+          <button
+            type="button"
+            onClick={() => selectTab("compositions")}
+            className={`rounded-[14px] px-2.5 py-2 text-[10px] font-semibold transition-all ${
+              tab === "compositions"
+                ? "bg-neutral-800 text-white"
+                : "text-neutral-500 hover:text-neutral-200"
+            }`}
+          >
+            Compositions
+          </button>
+          <button
+            type="button"
+            onClick={() => selectTab("assets")}
+            className={`rounded-[14px] px-2.5 py-2 text-[10px] font-semibold transition-all ${
+              tab === "assets"
+                ? "bg-neutral-800 text-white"
+                : "text-neutral-500 hover:text-neutral-200"
+            }`}
+          >
+            Assets
+          </button>
+        </div>
       </div>
 
       {/* Tab content */}

package/src/icons/SystemIcons.tsx

@@ -53,7 +53,6 @@ import {
   CaretRight,
   ClipboardText,
   ArrowCounterClockwise,
-  Camera as PhCamera,
   Gear,
 } from "@phosphor-icons/react";
 import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from "@phosphor-icons/react";
@@ -128,5 +127,4 @@ export const ChevronDown = makeIcon(CaretDown);
 export const ChevronRight = makeIcon(CaretRight);
 export const ClipboardList = makeIcon(ClipboardText);
 export const RotateCcw = makeIcon(ArrowCounterClockwise);
-export const Camera = makeIcon(PhCamera);
 export const Settings = makeIcon(Gear);

package/src/player/components/CompositionThumbnail.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { buildCompositionThumbnailUrl } from "./CompositionThumbnail";
+
+describe("buildCompositionThumbnailUrl", () => {
+  it("includes selector and occurrence index for precise element thumbnails", () => {
+    expect(
+      buildCompositionThumbnailUrl({
+        previewUrl: "/api/projects/demo/preview",
+        seekTime: 1,
+        duration: 2,
+        selector: ".card",
+        selectorIndex: 2,
+        origin: "http://localhost:3000",
+      }),
+    ).toBe(
+      "http://localhost:3000/api/projects/demo/thumbnail/index.html?t=2.00&v=v2&selector=.card&selectorIndex=2",
+    );
+  });
+});

package/src/player/components/CompositionThumbnail.tsx

@@ -7,6 +7,7 @@ interface CompositionThumbnailProps {
   labelColor: string;
   accentColor?: string;
   selector?: string;
+  selectorIndex?: number;
   seekTime?: number;
   duration?: number;
   width?: number;
@@ -16,12 +17,44 @@ interface CompositionThumbnailProps {
 const CLIP_HEIGHT = 66;
 const THUMBNAIL_URL_VERSION = "v2";
 
+export function buildCompositionThumbnailUrl({
+  previewUrl,
+  seekTime = 2,
+  duration = 5,
+  selector,
+  selectorIndex,
+  origin,
+}: {
+  previewUrl: string;
+  seekTime?: number;
+  duration?: number;
+  selector?: string;
+  selectorIndex?: number;
+  origin: string;
+}): string {
+  const thumbnailBase = previewUrl
+    .replace("/preview/comp/", "/thumbnail/")
+    .replace(/\/preview$/, "/thumbnail/index.html");
+  const midTime = seekTime + duration / 2;
+  const thumbnailUrl = new URL(thumbnailBase, origin);
+  thumbnailUrl.searchParams.set("t", midTime.toFixed(2));
+  thumbnailUrl.searchParams.set("v", THUMBNAIL_URL_VERSION);
+  if (selector) {
+    thumbnailUrl.searchParams.set("selector", selector);
+    if (selectorIndex != null && selectorIndex > 0) {
+      thumbnailUrl.searchParams.set("selectorIndex", String(selectorIndex));
+    }
+  }
+  return thumbnailUrl.toString();
+}
+
 export const CompositionThumbnail = memo(function CompositionThumbnail({
   previewUrl,
   label,
   labelColor,
   accentColor = "#6B7280",
   selector,
+  selectorIndex,
   seekTime = 2,
   duration = 5,
 }: CompositionThumbnailProps) {
@@ -48,15 +81,14 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
     roRef.current?.disconnect();
   });
 
-  const thumbnailBase = previewUrl
-    .replace("/preview/comp/", "/thumbnail/")
-    .replace(/\/preview$/, "/thumbnail/index.html");
-  const midTime = seekTime + duration / 2;
-  const thumbnailUrl = new URL(thumbnailBase, window.location.origin);
-  thumbnailUrl.searchParams.set("t", midTime.toFixed(2));
-  thumbnailUrl.searchParams.set("v", THUMBNAIL_URL_VERSION);
-  if (selector) thumbnailUrl.searchParams.set("selector", selector);
-  const url = thumbnailUrl.toString();
+  const url = buildCompositionThumbnailUrl({
+    previewUrl,
+    seekTime,
+    duration,
+    selector,
+    selectorIndex,
+    origin: window.location.origin,
+  });
   const frameW = Math.max(48, Math.round(CLIP_HEIGHT * aspect));
   const frameCount = containerWidth > 0 ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
 
@@ -66,7 +98,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
         src={url}
         alt=""
         draggable={false}
-        loading="lazy"
+        loading="eager"
         onLoad={(e) => {
           const img = e.currentTarget;
           if (img.naturalWidth > 0 && img.naturalHeight > 0) {

package/src/player/components/EditModal.tsx

@@ -3,6 +3,7 @@ import { useMountEffect } from "../../hooks/useMountEffect";
 import { usePlayerStore } from "../store/playerStore";
 import { formatTime } from "../lib/time";
 import { buildPromptCopyText, buildTimelineAgentPrompt } from "./timelineEditing";
+import { copyTextToClipboard } from "../../utils/clipboard";
 
 interface EditPopoverProps {
   rangeStart: number;
@@ -62,16 +63,8 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
   }, [start, end, elementsInRange, prompt]);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(buildClipboardText());
-    } catch {
-      const ta = document.createElement("textarea");
-      ta.value = buildClipboardText();
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-    }
+    const copied = await copyTextToClipboard(buildClipboardText());
+    if (!copied) return;
     setCopiedAgentPrompt(true);
     setTimeout(() => {
       setCopiedAgentPrompt(false);
@@ -82,16 +75,8 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
   const handleCopyPrompt = useCallback(async () => {
     const promptText = buildPromptCopyText(prompt);
     if (!promptText) return;
-    try {
-      await navigator.clipboard.writeText(promptText);
-    } catch {
-      const ta = document.createElement("textarea");
-      ta.value = promptText;
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      document.body.removeChild(ta);
-    }
+    const copied = await copyTextToClipboard(promptText);
+    if (!copied) return;
     setCopiedPromptOnly(true);
     setTimeout(() => {
       setCopiedPromptOnly(false);

package/src/player/components/Player.tsx

@@ -1,36 +1,29 @@
 import { forwardRef, useRef, useState } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
-// NOTE: importing "@hyperframes/player" registers a class extending HTMLElement
-// at module load, which throws under SSR. Defer the import to the mount effect
-// so it only runs in the browser.
 
 interface PlayerProps {
   projectId?: string;
   directUrl?: string;
   onLoad: () => void;
   portrait?: boolean;
+  style?: React.CSSProperties;
 }
 
 interface HyperframesPlayerElement extends HTMLElement {
   iframeElement: HTMLIFrameElement;
 }
 
-/**
- * Readiness check for a Lottie animation instance. Duck-types both supported
- * player shapes:
- *
- * - `lottie-web` exposes a boolean `isLoaded` on `AnimationItem`.
- * - `@dotlottie/player-component` doesn't; we infer readiness from
- *   `totalFrames > 0` since that value is only populated once the animation
- *   JSON has been parsed.
- *
- * Kept in sync with the runtime adapter's own checks in
- * `@hyperframes/core/runtime/adapters/lottie.ts` — that module would be a
- * more canonical home for the helper, but importing from the core package's
- * root index pulls Node-only submodules (path, url) into this browser bundle
- * and breaks Vite. If the helper grows, split a browser-safe submodule
- * export in core and switch this to import it.
- */
+function enableInteractiveIframe(player: HyperframesPlayerElement): void {
+  const root = player.shadowRoot;
+  if (!root) return;
+
+  const container = root.querySelector<HTMLElement>(".hfp-container");
+  const iframe = root.querySelector<HTMLIFrameElement>(".hfp-iframe");
+
+  container?.style.setProperty("pointer-events", "auto");
+  iframe?.style.setProperty("pointer-events", "auto");
+}
+
 function isLottieAnimationReady(anim: unknown): boolean {
   if (typeof anim !== "object" || anim === null) return true;
   const maybe = anim as { isLoaded?: boolean; totalFrames?: number };
@@ -39,14 +32,6 @@ function isLottieAnimationReady(anim: unknown): boolean {
   return false;
 }
 
-// Assets are considered ready when every `<video>`/`<audio>` has enough data
-// to play through without buffering, and every registered Lottie animation has
-// finished loading.
-//
-// Returns whichever value was returned last on cross-origin / transient DOM
-// races so a brief access failure (e.g. an iframe that just swapped src)
-// doesn't flicker the overlay state — we keep showing whatever was most
-// recently true.
 function hasUnloadedAssets(iframe: HTMLIFrameElement, lastResult: boolean): boolean {
   try {
     const win = iframe.contentWindow as unknown as (Window & { __hfLottie?: unknown[] }) | null;
@@ -72,18 +57,9 @@ function hasUnloadedAssets(iframe: HTMLIFrameElement, lastResult: boolean): bool
   }
 }
 
-/**
- * Renders a composition preview using the <hyperframes-player> web component.
- *
- * The web component handles iframe scaling, dimension detection, and
- * ResizeObserver internally. This wrapper bridges its inner iframe to the
- * forwarded ref so useTimelinePlayer can access it for clip manifest parsing,
- * timeline probing, and DOM inspection.
- */
 export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
-  ({ projectId, directUrl, onLoad, portrait }, ref) => {
+  ({ projectId, directUrl, onLoad, portrait, style }, ref) => {
     const containerRef = useRef<HTMLDivElement>(null);
-    const loadCountRef = useRef(0);
     const assetPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
     const [assetsLoading, setAssetsLoading] = useState(false);
 
@@ -94,11 +70,9 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
       let canceled = false;
       let cleanup: (() => void) | undefined;
 
-      // Dynamic import registers the custom element in the browser only.
       import("@hyperframes/player").then(() => {
         if (canceled) return;
 
-        // Create the web component imperatively to avoid JSX custom-element typing.
         const player = document.createElement("hyperframes-player") as HyperframesPlayerElement;
         const src = directUrl || `/api/projects/${projectId}/preview`;
         player.setAttribute("src", src);
@@ -108,8 +82,8 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
         player.style.height = "100%";
         player.style.display = "block";
         container.appendChild(player);
+        enableInteractiveIframe(player);
 
-        // Bridge the inner iframe to the forwarded ref for useTimelinePlayer.
         const iframe = player.iframeElement;
         if (typeof ref === "function") {
           ref(iframe);
@@ -117,35 +91,12 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
           (ref as React.MutableRefObject<HTMLIFrameElement | null>).current = iframe;
         }
 
-        // Prevent the web component's built-in click-to-toggle behavior.
-        // The studio manages playback exclusively via useTimelinePlayer.
         const preventToggle = (e: Event) => e.stopImmediatePropagation();
         player.addEventListener("click", preventToggle, { capture: true });
 
-        // Forward the iframe's native load event to the studio's onIframeLoad.
         const handleLoad = () => {
-          loadCountRef.current++;
-          // Reveal animation on reload (hot-reload, composition switch)
-          if (loadCountRef.current > 1) {
-            container.classList.remove("preview-revealing");
-            void container.offsetWidth;
-            container.classList.add("preview-revealing");
-            const onEnd = () => container.classList.remove("preview-revealing");
-            container.addEventListener("animationend", onEnd, { once: true });
-          }
           onLoad();
 
-          // Show a loading overlay until every `<video>`/`<audio>` and Lottie
-          // asset is ready. Without this users can click play before audio has
-          // buffered — the runtime is resilient (queued play() resolves once
-          // data arrives), but the overlay communicates why the first frame
-          // or first audio beat may lag.
-          //
-          // Poll with a 10 s safety cap (100 ticks × 100 ms). If the cap
-          // trips we hide the overlay so the UI doesn't appear stuck forever,
-          // but we log a debug warning so the case is diagnosable — a long
-          // cold video or a broken asset can legitimately exceed 10 s on a
-          // slow network.
           if (assetPollRef.current) clearInterval(assetPollRef.current);
           let lastUnloaded = hasUnloadedAssets(iframe, false);
           if (lastUnloaded) {
@@ -158,11 +109,6 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
                 if (assetPollRef.current) clearInterval(assetPollRef.current);
                 assetPollRef.current = null;
                 setAssetsLoading(false);
-                if (lastUnloaded) {
-                  console.debug(
-                    "[Player] Asset-loading overlay timed out after 10s; hiding anyway. Check network or asset integrity.",
-                  );
-                }
               }
             }, 100);
           } else {
@@ -177,7 +123,6 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
           if (assetPollRef.current) clearInterval(assetPollRef.current);
           assetPollRef.current = null;
           container.removeChild(player);
-          // Clear the forwarded ref
           if (typeof ref === "function") {
             ref(null);
           } else if (ref) {
@@ -193,7 +138,10 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
     });
 
     return (
-      <div className="relative w-full h-full max-w-full max-h-full overflow-hidden bg-black flex items-center justify-center">
+      <div
+        className="relative w-full h-full max-w-full max-h-full overflow-hidden bg-black flex items-center justify-center"
+        style={style}
+      >
         <div ref={containerRef} className="w-full h-full" />
         {assetsLoading && (
           <div className="absolute inset-0 bg-black/80 flex flex-col items-center justify-center z-20 pointer-events-none">