@hyperframes/studio 0.4.24 → 0.5.0-alpha.2

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

@@ -88,40 +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>
+          <button
+            type="button"
+            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"
+            }`}
+          >
+            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/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">

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

@@ -144,7 +144,6 @@ describe("getTimelineScrollLeftForZoomTransition", () => {
     expect(getTimelineScrollLeftForZoomTransition("manual", "manual", 480)).toBe(480);
   });
 });
-
 describe("getTimelinePlayheadLeft", () => {
   it("converts time to a pixel offset from the gutter", () => {
     expect(getTimelinePlayheadLeft(4, 20)).toBe(112);

package/src/player/components/Timeline.tsx

@@ -131,7 +131,6 @@ export function getTimelineScrollLeftForZoomTransition(
   if (previousZoomMode === "manual" && nextZoomMode === "fit") return 0;
   return currentScrollLeft;
 }
-
 export function getTimelinePlayheadLeft(time: number, pixelsPerSecond: number): number {
   if (!Number.isFinite(time) || !Number.isFinite(pixelsPerSecond)) return GUTTER;
   return GUTTER + Math.max(0, time) * Math.max(0, pixelsPerSecond);
@@ -204,7 +203,6 @@ export function resolveTimelineAssetDrop(
     track: getDefaultDroppedTrack(input.trackOrder, rowIndex),
   };
 }
-
 /* ── Component ──────────────────────────────────────────────────── */
 interface TimelineProps {
   /** Called when user seeks via ruler/track click or playhead drag */
@@ -463,7 +461,6 @@ export const Timeline = memo(function Timeline({
     );
     previousZoomModeRef.current = zoomMode;
   }, [zoomMode]);
-
   useMountEffect(() => {
     const unsub = liveTime.subscribe((t) => {
       const dur = durationRef.current;

package/src/player/components/TimelineClip.tsx

@@ -62,6 +62,25 @@ export const TimelineClip = memo(function TimelineClip({
         : theme.clipShadow;
   const capabilities = getTimelineEditCapabilities(el);
   const showHandles = handleOpacity > 0.01;
+  const baseBackgroundImage = isSelected ? theme.clipBackgroundActive : theme.clipBackground;
+  const glossBackgroundImage = isSelected
+    ? "linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0))"
+    : "linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0))";
+  const accentBackgroundImage = `linear-gradient(120deg, ${trackStyle.accent}${
+    isSelected ? "22" : "1e"
+  }, transparent 28%)`;
+  const compositionStripeBackgroundImage =
+    isComposition && !hasCustomContent
+      ? "repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)"
+      : undefined;
+  const clipBackgroundImage = [
+    compositionStripeBackgroundImage,
+    glossBackgroundImage,
+    accentBackgroundImage,
+    baseBackgroundImage,
+  ]
+    .filter(Boolean)
+    .join(", ");
 
   return (
     <div
@@ -75,13 +94,7 @@ export const TimelineClip = memo(function TimelineClip({
         top: clipY,
         bottom: clipY,
         borderRadius: theme.clipRadius,
-        background: isSelected
-          ? `linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}22, transparent 28%), ${theme.clipBackgroundActive}`
-          : `linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}1e, transparent 28%), ${theme.clipBackground}`,
-        backgroundImage:
-          isComposition && !hasCustomContent
-            ? `repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)`
-            : undefined,
+        backgroundImage: clipBackgroundImage,
         border: `1px solid ${borderColor}`,
         boxShadow,
         transition:

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

@@ -428,7 +428,6 @@ describe("buildClipRangeSelection", () => {
     });
   });
 });
-
 describe("resolveTimelineAutoScroll", () => {
   it("does not scroll when the pointer stays away from the edges", () => {
     expect(
@@ -512,7 +511,6 @@ describe("buildTimelineElementAgentPrompt", () => {
     ).toContain("If this clip is animated with GSAP");
   });
 });
-
 describe("resolveTimelineResize", () => {
   it("shrinks clip duration from the right edge", () => {
     expect(

package/src/player/components/timelineEditing.ts

@@ -273,7 +273,6 @@ export function buildClipRangeSelection(
     anchorY: anchor.anchorY,
   };
 }
-
 export function buildTimelineAgentPrompt({
   rangeStart,
   rangeEnd,
@@ -347,7 +346,6 @@ export function buildTimelineElementAgentPrompt(element: {
 
   return lines.join("\n");
 }
-
 export function formatTimelineAttributeNumber(value: number): string {
   return Number(roundToCentiseconds(value).toFixed(2)).toString();
 }

package/src/player/hooks/useTimelinePlayer.ts

@@ -244,7 +244,6 @@ function buildTimelineElementKey(params: {
   if (params.selector) return `${scope}:${params.selector}:${params.selectorIndex ?? 0}`;
   return `${scope}:${params.id}:${params.fallbackIndex}`;
 }
-
 function findTimelineDomNode(doc: Document, id: string): Element | null {
   return (
     doc.getElementById(id) ??
@@ -290,7 +289,6 @@ export function buildStandaloneRootTimelineElement(params: {
     sourceFile: compositionSrc,
   };
 }
-
 function normalizePreviewViewport(doc: Document, win: Window): void {
   if (doc.documentElement) {
     doc.documentElement.style.overflow = "hidden";
@@ -944,18 +942,6 @@ export function useTimelinePlayer() {
     setIsPlaying(false);
   }, [getAdapter, stopRAFLoop, setIsPlaying]);
 
-  const refreshPlayer = useCallback(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    saveSeekPosition();
-
-    const src = iframe.src;
-    const url = new URL(src, window.location.origin);
-    url.searchParams.set("_t", String(Date.now()));
-    iframe.src = url.toString();
-  }, [saveSeekPosition]);
-
   const togglePlayRef = useRef(togglePlay);
   togglePlayRef.current = togglePlay;
   const getAdapterRef = useRef(getAdapter);
@@ -1053,8 +1039,6 @@ export function useTimelinePlayer() {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
       stopRAFLoop();
       if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
-      // Don't reset() on cleanup — preserve timeline elements across iframe refreshes
-      // to prevent blink. New data will replace old when the iframe reloads.
     };
   });
 
@@ -1072,7 +1056,6 @@ export function useTimelinePlayer() {
     togglePlay,
     seek,
     onIframeLoad,
-    refreshPlayer,
     saveSeekPosition,
     resetPlayer,
   };

package/src/utils/mediaTypes.ts

@@ -1,7 +1,7 @@
 export const IMAGE_EXT = /\.(jpg|jpeg|png|gif|webp|svg|ico)$/i;
 export const VIDEO_EXT = /\.(mp4|webm|mov)$/i;
 export const AUDIO_EXT = /\.(mp3|wav|ogg|m4a|aac)$/i;
-export const FONT_EXT = /\.(woff|woff2|ttf|otf|eot)$/i;
+export const FONT_EXT = /\.(woff|woff2|ttf|ttc|otf|eot)$/i;
 export const MEDIA_EXT = /\.(mp4|webm|mov|mp3|wav|ogg|m4a|aac|jpg|jpeg|png|gif|webp|svg|ico)$/i;
 
 export function isMediaFile(path: string): boolean {