@hyperframes/studio 0.4.12 → 0.4.13-alpha.1

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

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import {
+  getClipHandleOpacity,
+  getRenderedTimelineElement,
+  getTimelineTrackStyle,
+} from "./timelineTheme";
+
+describe("getTimelineTrackStyle", () => {
+  it("reuses heading styles for heading tags", () => {
+    expect(getTimelineTrackStyle("h2").accent).toBe(getTimelineTrackStyle("h1").accent);
+  });
+
+  it("falls back for unknown tags", () => {
+    expect(getTimelineTrackStyle("custom-tag").accent).toBe("#3CE6AC");
+  });
+});
+
+describe("getClipHandleOpacity", () => {
+  it("hides handles at rest", () => {
+    expect(getClipHandleOpacity({ isHovered: false, isSelected: false, isDragging: false })).toBe(
+      0,
+    );
+  });
+
+  it("prioritizes dragging over hover and selection", () => {
+    expect(getClipHandleOpacity({ isHovered: true, isSelected: true, isDragging: true })).toBe(
+      0.95,
+    );
+  });
+});
+
+describe("getRenderedTimelineElement", () => {
+  it("keeps non-dragged clips unchanged", () => {
+    const element = { id: "a", tag: "div", start: 1, duration: 2, track: 0 };
+    expect(
+      getRenderedTimelineElement({
+        element,
+        draggedElementId: "b",
+        previewStart: 2,
+        previewTrack: 1,
+      }),
+    ).toEqual(element);
+  });
+
+  it("moves the actual dragged clip to the preview position", () => {
+    const element = { id: "a", tag: "div", start: 1, duration: 2, track: 0 };
+    expect(
+      getRenderedTimelineElement({
+        element,
+        draggedElementId: "a",
+        previewStart: 2.4,
+        previewTrack: 3,
+      }),
+    ).toEqual({ ...element, start: 2.4, track: 3 });
+  });
+});

package/src/player/components/timelineTheme.ts

@@ -0,0 +1,141 @@
+import type { TimelineElement } from "../store/playerStore";
+
+export interface TimelineTrackStyle {
+  clip: string;
+  accent: string;
+  label: string;
+  iconBackground: string;
+}
+
+export interface TimelineTheme {
+  shellBackground: string;
+  shellBorder: string;
+  rulerBorder: string;
+  rowBackground: string;
+  rowBorder: string;
+  gutterBackground: string;
+  gutterBorder: string;
+  textPrimary: string;
+  textSecondary: string;
+  tickText: string;
+  tickMajor: string;
+  tickMinor: string;
+  clipBackground: string;
+  clipBackgroundActive: string;
+  clipBorder: string;
+  clipBorderHover: string;
+  clipBorderActive: string;
+  clipShadow: string;
+  clipShadowHover: string;
+  clipShadowActive: string;
+  clipShadowDragging: string;
+  handleColor: string;
+  panelResizeSeam: string;
+  panelResizeActive: string;
+  clipRadius: string;
+}
+
+const TIMELINE_TEAL = "#3CE6AC";
+const TIMELINE_TEAL_LABEL = "#E9FFF6";
+const TIMELINE_TEAL_ICON_BACKGROUND = "rgba(60,230,172,0.12)";
+
+function createTrackStyle(): TimelineTrackStyle {
+  return {
+    clip: TIMELINE_TEAL,
+    accent: TIMELINE_TEAL,
+    label: TIMELINE_TEAL_LABEL,
+    iconBackground: TIMELINE_TEAL_ICON_BACKGROUND,
+  };
+}
+
+const TRACK_STYLES: Record<string, TimelineTrackStyle> = {
+  video: createTrackStyle(),
+  audio: createTrackStyle(),
+  img: createTrackStyle(),
+  div: createTrackStyle(),
+  span: createTrackStyle(),
+  p: createTrackStyle(),
+  h1: createTrackStyle(),
+  section: createTrackStyle(),
+  sfx: createTrackStyle(),
+};
+
+const DEFAULT_TRACK_STYLE: TimelineTrackStyle = createTrackStyle();
+
+export const defaultTimelineTheme: TimelineTheme = {
+  shellBackground: "#0A0E15",
+  shellBorder: "rgba(255,255,255,0.05)",
+  rulerBorder: "rgba(255,255,255,0.045)",
+  rowBackground: "#0A0E15",
+  rowBorder: "rgba(255,255,255,0.05)",
+  gutterBackground: "#0D121B",
+  gutterBorder: "rgba(255,255,255,0.05)",
+  textPrimary: "#E8EDF5",
+  textSecondary: "#8391A8",
+  tickText: "rgba(131,145,168,0.92)",
+  tickMajor: "rgba(255,255,255,0.13)",
+  tickMinor: "rgba(255,255,255,0.08)",
+  clipBackground: "linear-gradient(180deg, rgba(20,25,34,0.98), rgba(14,18,27,0.98))",
+  clipBackgroundActive: "linear-gradient(180deg, rgba(24,30,40,0.99), rgba(15,20,29,0.99))",
+  clipBorder: "rgba(255,255,255,0.07)",
+  clipBorderHover: "rgba(255,255,255,0.11)",
+  clipBorderActive: "rgba(255,255,255,0.14)",
+  clipShadow: "inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 18px rgba(0,0,0,0.18)",
+  clipShadowHover: "inset 0 1px 0 rgba(255,255,255,0.035), 0 8px 20px rgba(0,0,0,0.2)",
+  clipShadowActive:
+    "inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.035)",
+  clipShadowDragging:
+    "inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 36px rgba(0,0,0,0.34), 0 8px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.04)",
+  handleColor: "rgba(255,255,255,0.11)",
+  panelResizeSeam: "rgba(255,255,255,0.12)",
+  panelResizeActive: "rgba(255,255,255,0.24)",
+  clipRadius: "11px 15px 13px 9px / 10px 14px 12px 10px",
+};
+
+export function getTimelineTrackStyle(tag: string): TimelineTrackStyle {
+  const normalized = tag.toLowerCase();
+  if (
+    normalized.startsWith("h") &&
+    normalized.length === 2 &&
+    "123456".includes(normalized[1] ?? "")
+  ) {
+    return TRACK_STYLES.h1;
+  }
+  return TRACK_STYLES[normalized] ?? DEFAULT_TRACK_STYLE;
+}
+
+export function getClipHandleOpacity({
+  isHovered,
+  isSelected,
+  isDragging,
+}: {
+  isHovered: boolean;
+  isSelected: boolean;
+  isDragging: boolean;
+}): number {
+  if (isDragging) return 0.95;
+  if (isSelected) return 0.82;
+  if (isHovered) return 0.76;
+  return 0;
+}
+
+export function getRenderedTimelineElement({
+  element,
+  draggedElementId,
+  previewStart,
+  previewTrack,
+}: {
+  element: TimelineElement;
+  draggedElementId: string | null;
+  previewStart: number | null;
+  previewTrack: number | null;
+}): TimelineElement {
+  if (element.id !== draggedElementId || previewStart === null || previewTrack === null) {
+    return element;
+  }
+  return {
+    ...element,
+    start: previewStart,
+    track: previewTrack,
+  };
+}

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

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import {
+  clampTimelineZoomPercent,
+  getNextTimelineZoomPercent,
+  getTimelinePixelsPerSecond,
+  getTimelineZoomPercent,
+  MAX_TIMELINE_ZOOM_PERCENT,
+  MIN_TIMELINE_ZOOM_PERCENT,
+} from "./timelineZoom";
+
+describe("clampTimelineZoomPercent", () => {
+  it("defaults invalid values to 100", () => {
+    expect(clampTimelineZoomPercent(Number.NaN)).toBe(100);
+  });
+
+  it("clamps to the supported percent bounds", () => {
+    expect(clampTimelineZoomPercent(1)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
+    expect(clampTimelineZoomPercent(5000)).toBe(MAX_TIMELINE_ZOOM_PERCENT);
+  });
+});
+
+describe("getTimelineZoomPercent", () => {
+  it("treats fit mode as 100 percent", () => {
+    expect(getTimelineZoomPercent("fit", 375)).toBe(100);
+  });
+
+  it("returns the clamped manual zoom percent", () => {
+    expect(getTimelineZoomPercent("manual", 125.2)).toBe(125);
+  });
+});
+
+describe("getTimelinePixelsPerSecond", () => {
+  it("uses fit pixels per second in fit mode", () => {
+    expect(getTimelinePixelsPerSecond(144, "fit", 250)).toBe(144);
+  });
+
+  it("scales from fit pixels per second in manual mode", () => {
+    expect(getTimelinePixelsPerSecond(144, "manual", 125)).toBe(180);
+  });
+});
+
+describe("getNextTimelineZoomPercent", () => {
+  it("zooms out from fit relative to 100 percent", () => {
+    expect(getNextTimelineZoomPercent("out", "fit", 375)).toBe(80);
+  });
+
+  it("zooms in from fit relative to 100 percent", () => {
+    expect(getNextTimelineZoomPercent("in", "fit", 375)).toBe(125);
+  });
+
+  it("clamps the lower bound", () => {
+    expect(getNextTimelineZoomPercent("out", "manual", MIN_TIMELINE_ZOOM_PERCENT)).toBe(
+      MIN_TIMELINE_ZOOM_PERCENT,
+    );
+  });
+
+  it("clamps the upper bound", () => {
+    expect(getNextTimelineZoomPercent("in", "manual", MAX_TIMELINE_ZOOM_PERCENT)).toBe(
+      MAX_TIMELINE_ZOOM_PERCENT,
+    );
+  });
+});

package/src/player/components/timelineZoom.ts

@@ -0,0 +1,38 @@
+import type { ZoomMode } from "../store/playerStore";
+
+export const MIN_TIMELINE_ZOOM_PERCENT = 10;
+export const MAX_TIMELINE_ZOOM_PERCENT = 2000;
+const ZOOM_OUT_FACTOR = 0.8;
+const ZOOM_IN_FACTOR = 1.25;
+
+export function clampTimelineZoomPercent(percent: number): number {
+  if (!Number.isFinite(percent)) return 100;
+  return Math.max(
+    MIN_TIMELINE_ZOOM_PERCENT,
+    Math.min(MAX_TIMELINE_ZOOM_PERCENT, Math.round(percent)),
+  );
+}
+
+export function getTimelineZoomPercent(zoomMode: ZoomMode, manualZoomPercent: number): number {
+  return zoomMode === "fit" ? 100 : clampTimelineZoomPercent(manualZoomPercent);
+}
+
+export function getTimelinePixelsPerSecond(
+  fitPixelsPerSecond: number,
+  zoomMode: ZoomMode,
+  manualZoomPercent: number,
+): number {
+  if (!Number.isFinite(fitPixelsPerSecond) || fitPixelsPerSecond <= 0) return 100;
+  const zoomPercent = getTimelineZoomPercent(zoomMode, manualZoomPercent);
+  return zoomMode === "fit" ? fitPixelsPerSecond : fitPixelsPerSecond * (zoomPercent / 100);
+}
+
+export function getNextTimelineZoomPercent(
+  direction: "in" | "out",
+  zoomMode: ZoomMode,
+  manualZoomPercent: number,
+): number {
+  const current = getTimelineZoomPercent(zoomMode, manualZoomPercent);
+  const next = direction === "in" ? current * ZOOM_IN_FACTOR : current * ZOOM_OUT_FACTOR;
+  return clampTimelineZoomPercent(next);
+}

package/src/player/hooks/useTimelinePlayer.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildStandaloneRootTimelineElement,
+  mergeTimelineElementsPreservingDowngrades,
+  resolveStandaloneRootCompositionSrc,
+} from "./useTimelinePlayer";
+
+describe("buildStandaloneRootTimelineElement", () => {
+  it("includes selector and source metadata for standalone composition fallback clips", () => {
+    expect(
+      buildStandaloneRootTimelineElement({
+        compositionId: "hero",
+        tagName: "DIV",
+        rootDuration: 8,
+        iframeSrc: "http://127.0.0.1:4173/api/projects/demo/preview/comp/scenes/hero.html?_t=123",
+        selector: '[data-composition-id="hero"]',
+      }),
+    ).toEqual({
+      id: "hero",
+      key: 'scenes/hero.html:[data-composition-id="hero"]:0',
+      tag: "div",
+      start: 0,
+      duration: 8,
+      track: 0,
+      compositionSrc: "scenes/hero.html",
+      selector: '[data-composition-id="hero"]',
+      selectorIndex: undefined,
+      sourceFile: "scenes/hero.html",
+    });
+  });
+
+  it("returns null for invalid fallback durations", () => {
+    expect(
+      buildStandaloneRootTimelineElement({
+        compositionId: "hero",
+        tagName: "div",
+        rootDuration: 0,
+        iframeSrc: "http://localhost/preview/comp/hero.html",
+      }),
+    ).toBe(null);
+    expect(
+      buildStandaloneRootTimelineElement({
+        compositionId: "hero",
+        tagName: "div",
+        rootDuration: Number.NaN,
+        iframeSrc: "http://localhost/preview/comp/hero.html",
+      }),
+    ).toBe(null);
+  });
+});
+
+describe("resolveStandaloneRootCompositionSrc", () => {
+  it("extracts the composition path from a preview iframe url", () => {
+    expect(
+      resolveStandaloneRootCompositionSrc(
+        "http://127.0.0.1:4173/api/projects/demo/preview/comp/scenes/hero.html?_t=123",
+      ),
+    ).toBe("scenes/hero.html");
+  });
+
+  it("returns undefined for non-composition preview urls", () => {
+    expect(
+      resolveStandaloneRootCompositionSrc("http://127.0.0.1:4173/api/projects/demo/preview"),
+    ).toBe(undefined);
+  });
+});
+
+describe("mergeTimelineElementsPreservingDowngrades", () => {
+  it("preserves missing current elements when a shorter manifest arrives", () => {
+    expect(
+      mergeTimelineElementsPreservingDowngrades(
+        [
+          { id: "hero", tag: "div", start: 0, duration: 4, track: 0 },
+          { id: "cta", tag: "div", start: 4, duration: 2, track: 1 },
+        ],
+        [{ id: "hero", tag: "div", start: 0, duration: 4, track: 0 }],
+        8,
+        8,
+      ),
+    ).toEqual([
+      { id: "hero", tag: "div", start: 0, duration: 4, track: 0 },
+      { id: "cta", tag: "div", start: 4, duration: 2, track: 1 },
+    ]);
+  });
+
+  it("accepts longer-duration or same-size updates as authoritative", () => {
+    expect(
+      mergeTimelineElementsPreservingDowngrades(
+        [{ id: "hero", tag: "div", start: 0, duration: 4, track: 0 }],
+        [{ id: "hero", tag: "div", start: 0, duration: 4, track: 0 }],
+        4,
+        6,
+      ),
+    ).toEqual([{ id: "hero", tag: "div", start: 0, duration: 4, track: 0 }]);
+  });
+});