@hyperframes/studio 0.2.1 → 0.2.2-alpha.3

package/src/captions/components/CaptionPropertyPanel.tsx

@@ -0,0 +1,275 @@
+import { memo, useCallback, useState } from "react";
+import { useCaptionStore } from "../store";
+import type { CaptionStyle } from "../types";
+import { CaptionAnimationPanel } from "./CaptionAnimationPanel";
+import { Section, Row, inputCls } from "./shared";
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+interface CaptionPropertyPanelProps {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+}
+
+export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
+  iframeRef,
+}: CaptionPropertyPanelProps) {
+  const model = useCaptionStore((s) => s.model);
+  const selectedSegmentIds = useCaptionStore((s) => s.selectedSegmentIds);
+  const selectedGroupId = useCaptionStore((s) => s.selectedGroupId);
+  const updateSelectedStyle = useCaptionStore((s) => s.updateSelectedStyle);
+  const updateGroupStyle = useCaptionStore((s) => s.updateGroupStyle);
+
+  const [activeTab, setActiveTab] = useState<"style" | "animation">("style");
+
+  // Resolve effective style for the first selected segment
+  const firstSegmentId = selectedSegmentIds.size > 0 ? [...selectedSegmentIds][0] : undefined;
+  const firstSegment = model?.segments.get(firstSegmentId ?? "");
+
+  // Find the group that owns the first segment
+  let ownerGroupId: string | null = null;
+  if (model && firstSegmentId) {
+    for (const gid of model.groupOrder) {
+      const group = model.groups.get(gid);
+      if (group && group.segmentIds.includes(firstSegmentId)) {
+        ownerGroupId = gid;
+        break;
+      }
+    }
+  }
+
+  const groupStyle = ownerGroupId ? model?.groups.get(ownerGroupId)?.style : undefined;
+  const segmentOverrides = firstSegment?.style ?? {};
+
+  // Merge group style with segment overrides for display
+  const effectiveStyle: Partial<CaptionStyle> = {
+    ...groupStyle,
+    ...segmentOverrides,
+  };
+
+  /**
+   * Apply a CSS style change to selected word elements in the iframe DOM in real time.
+   * Maps CaptionStyle property names to CSS properties.
+   */
+  const applyToIframeDom = useCallback(
+    (updates: Partial<CaptionStyle>) => {
+      const iframe = iframeRef.current;
+      if (!iframe || !model) return;
+      let doc: Document | null = null;
+      try {
+        doc = iframe.contentDocument;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+
+      const groupEls = doc.querySelectorAll<HTMLElement>(".caption-group");
+
+      // Build list of word elements to update
+      const targetEls: HTMLElement[] = [];
+      for (const segId of selectedSegmentIds) {
+        for (let gi = 0; gi < model.groupOrder.length; gi++) {
+          const group = model.groups.get(model.groupOrder[gi]);
+          if (!group) continue;
+          const wi = group.segmentIds.indexOf(segId);
+          if (wi < 0) continue;
+          const groupEl = groupEls[gi];
+          if (!groupEl) continue;
+          // Resolve word span, handling wrappers
+          const children = groupEl.children;
+          let idx = 0;
+          for (const child of children) {
+            const c = child as HTMLElement;
+            if (c.dataset.captionWrapper === "true") {
+              const inner = c.querySelector<HTMLElement>(":scope > span");
+              if (inner && idx === wi) {
+                targetEls.push(inner);
+                break;
+              }
+            } else if (c.tagName === "SPAN") {
+              if (idx === wi) {
+                targetEls.push(c);
+                break;
+              }
+            }
+            idx++;
+          }
+          break;
+        }
+      }
+
+      // Apply transform updates via gsap.set on the WRAPPER (not the word span)
+      const hasTransform =
+        updates.x !== undefined ||
+        updates.y !== undefined ||
+        updates.scaleX !== undefined ||
+        updates.scaleY !== undefined ||
+        updates.rotation !== undefined;
+
+      if (hasTransform) {
+        try {
+          const iframeGsap = (
+            iframeRef.current?.contentWindow as unknown as {
+              gsap?: {
+                set: (el: HTMLElement, props: Record<string, unknown>) => void;
+                getProperty: (el: HTMLElement, prop: string) => number;
+              };
+            }
+          )?.gsap;
+          if (iframeGsap) {
+            for (const el of targetEls) {
+              // Get or create wrapper
+              let wrapper = el.parentElement;
+              if (!wrapper || wrapper.dataset.captionWrapper !== "true") {
+                wrapper = doc.createElement("span") as HTMLElement;
+                wrapper.style.display = "inline-block";
+                wrapper.dataset.captionWrapper = "true";
+                el.parentNode?.insertBefore(wrapper, el);
+                wrapper.appendChild(el);
+              }
+              // Read current wrapper state and merge with updates
+              const curX = iframeGsap.getProperty(wrapper, "x") || 0;
+              const curY = iframeGsap.getProperty(wrapper, "y") || 0;
+              const curScale = iframeGsap.getProperty(wrapper, "scale") || 1;
+              const curRotation = iframeGsap.getProperty(wrapper, "rotation") || 0;
+              iframeGsap.set(wrapper, {
+                x: updates.x ?? curX,
+                y: updates.y ?? curY,
+                scale: updates.scaleX ?? curScale,
+                rotation: updates.rotation ?? curRotation,
+              });
+            }
+          }
+        } catch {
+          /* cross-origin */
+        }
+      }
+    },
+    [iframeRef, model, selectedSegmentIds],
+  );
+
+  // All hooks must be called before any early return
+  const handleStyleChange = useCallback(
+    (updates: Partial<CaptionStyle>) => {
+      if (selectedGroupId) {
+        updateGroupStyle(selectedGroupId, updates);
+      } else {
+        updateSelectedStyle(updates);
+      }
+      applyToIframeDom(updates);
+    },
+    [selectedGroupId, updateGroupStyle, updateSelectedStyle, applyToIframeDom],
+  );
+
+  // Empty state — after all hooks
+  if (selectedSegmentIds.size === 0) {
+    return (
+      <div className="flex items-center justify-center h-full px-4 text-center">
+        <p className="text-xs text-neutral-500">Select caption words to edit their style</p>
+      </div>
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+  // Derived style values with fallbacks
+  // ---------------------------------------------------------------------------
+
+  const x = effectiveStyle.x ?? 0;
+  const y = effectiveStyle.y ?? 0;
+  const rotation = effectiveStyle.rotation ?? 0;
+  const scaleX = effectiveStyle.scaleX ?? 1;
+
+  // Count label
+  const countLabel = selectedSegmentIds.size === 1 ? "1 word" : `${selectedSegmentIds.size} words`;
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="px-3 py-2 border-b border-neutral-800 flex-shrink-0">
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-2xs text-neutral-500">{countLabel}</span>
+        </div>
+        {/* Tab switcher */}
+        <div className="flex gap-1">
+          <button
+            type="button"
+            onClick={() => setActiveTab("style")}
+            className={[
+              "flex-1 py-0.5 rounded text-2xs font-medium transition-colors",
+              activeTab === "style"
+                ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50"
+                : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
+            ].join(" ")}
+          >
+            Style
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab("animation")}
+            className={[
+              "flex-1 py-0.5 rounded text-2xs font-medium transition-colors",
+              activeTab === "animation"
+                ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50"
+                : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
+            ].join(" ")}
+          >
+            Animation
+          </button>
+        </div>
+      </div>
+
+      {/* Animation tab */}
+      {activeTab === "animation" && <CaptionAnimationPanel />}
+
+      {/* Style tab — Transform only */}
+      {activeTab === "style" && (
+        <div className="flex-1 overflow-y-auto px-3 py-2">
+          <Section label="Position">
+            <Row label="X">
+              <input
+                type="number"
+                value={x}
+                onChange={(e) => handleStyleChange({ x: Number(e.target.value) })}
+                className={inputCls}
+              />
+            </Row>
+            <Row label="Y">
+              <input
+                type="number"
+                value={y}
+                onChange={(e) => handleStyleChange({ y: Number(e.target.value) })}
+                className={inputCls}
+              />
+            </Row>
+          </Section>
+
+          <Section label="Transform">
+            <Row label="Scale">
+              <input
+                type="number"
+                value={scaleX}
+                step={0.1}
+                onChange={(e) =>
+                  handleStyleChange({
+                    scaleX: Number(e.target.value),
+                    scaleY: Number(e.target.value),
+                  })
+                }
+                className={inputCls}
+              />
+            </Row>
+            <Row label="Rotation">
+              <input
+                type="number"
+                value={rotation}
+                onChange={(e) => handleStyleChange({ rotation: Number(e.target.value) })}
+                className={inputCls}
+              />
+            </Row>
+          </Section>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/captions/components/CaptionTimeline.tsx

@@ -0,0 +1,187 @@
+import { memo, useCallback, useRef } from "react";
+import { useCaptionStore } from "../store";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const GROUP_COLORS = [
+  "#3CE6AC",
+  "#FF6B6B",
+  "#4ECDC4",
+  "#FFE66D",
+  "#A78BFA",
+  "#F472B6",
+  "#34D399",
+  "#FB923C",
+  "#60A5FA",
+  "#C084FC",
+];
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface CaptionTimelineProps {
+  pixelsPerSecond: number;
+  onSeek?: (time: number) => void;
+}
+
+interface DragState {
+  segId: string;
+  edge: "start" | "end";
+  originalStart: number;
+  originalEnd: number;
+  startX: number;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export const CaptionTimeline = memo(function CaptionTimeline({
+  pixelsPerSecond,
+  onSeek,
+}: CaptionTimelineProps) {
+  const model = useCaptionStore((s) => s.model);
+  const selectedSegmentIds = useCaptionStore((s) => s.selectedSegmentIds);
+  const selectSegment = useCaptionStore((s) => s.selectSegment);
+  const updateSegmentTiming = useCaptionStore((s) => s.updateSegmentTiming);
+  const splitGroup = useCaptionStore((s) => s.splitGroup);
+
+  const dragRef = useRef<DragState | null>(null);
+
+  const handleEdgePointerDown = useCallback(
+    (
+      e: React.PointerEvent<HTMLDivElement>,
+      segId: string,
+      edge: "start" | "end",
+      originalStart: number,
+      originalEnd: number,
+    ) => {
+      e.stopPropagation();
+      e.preventDefault();
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+      dragRef.current = { segId, edge, originalStart, originalEnd, startX: e.clientX };
+    },
+    [],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+
+      const delta = (e.clientX - drag.startX) / pixelsPerSecond;
+
+      if (drag.edge === "start") {
+        const newStart = Math.max(0, drag.originalStart + delta);
+        const clampedStart = Math.min(newStart, drag.originalEnd - 0.05);
+        updateSegmentTiming(drag.segId, clampedStart, drag.originalEnd);
+      } else {
+        const newEnd = Math.max(drag.originalStart + 0.05, drag.originalEnd + delta);
+        const clampedEnd = Math.max(0, newEnd);
+        updateSegmentTiming(drag.segId, drag.originalStart, clampedEnd);
+      }
+    },
+    [pixelsPerSecond, updateSegmentTiming],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    dragRef.current = null;
+  }, []);
+
+  const handleBlockClick = useCallback(
+    (e: React.MouseEvent, segId: string) => {
+      e.stopPropagation();
+      selectSegment(segId, e.shiftKey);
+    },
+    [selectSegment],
+  );
+
+  const handleBlockDoubleClick = useCallback(
+    (e: React.MouseEvent, groupId: string, segId: string) => {
+      e.stopPropagation();
+      splitGroup(groupId, segId);
+    },
+    [splitGroup],
+  );
+
+  const handleTrackClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!onSeek) return;
+      const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+      const x = e.clientX - rect.left - 32;
+      const time = Math.max(0, x / pixelsPerSecond);
+      onSeek(time);
+    },
+    [onSeek, pixelsPerSecond],
+  );
+
+  if (!model) return null;
+
+  return (
+    <div
+      className="relative select-none overflow-x-auto"
+      style={{ height: 40, minWidth: "100%" }}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerLeave={handlePointerUp}
+      onClick={handleTrackClick}
+    >
+      {model.groupOrder.map((groupId, groupIdx) => {
+        const group = model.groups.get(groupId);
+        if (!group) return null;
+        const color = GROUP_COLORS[groupIdx % GROUP_COLORS.length];
+
+        return group.segmentIds.map((segId) => {
+          const seg = model.segments.get(segId);
+          if (!seg) return null;
+
+          const left = 32 + seg.start * pixelsPerSecond;
+          const width = Math.max((seg.end - seg.start) * pixelsPerSecond, 4);
+          const isSelected = selectedSegmentIds.has(segId);
+
+          return (
+            <div
+              key={segId}
+              className={`absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer${
+                isSelected ? " ring-1 ring-white/50 z-10" : ""
+              }`}
+              style={{
+                left,
+                width,
+                backgroundColor: color,
+                zIndex: isSelected ? 10 : 1,
+              }}
+              onClick={(e) => handleBlockClick(e, segId)}
+              onDoubleClick={(e) => handleBlockDoubleClick(e, groupId, segId)}
+            >
+              {/* Left edge drag handle */}
+              <div
+                className="absolute left-0 top-0 bottom-0 cursor-col-resize z-20"
+                style={{ width: 6 }}
+                onPointerDown={(e) => handleEdgePointerDown(e, segId, "start", seg.start, seg.end)}
+              />
+
+              {/* Text label */}
+              <span
+                className="flex-1 truncate px-2 pointer-events-none"
+                style={{ fontSize: 9, color: "#000000", lineHeight: 1 }}
+              >
+                {seg.text}
+              </span>
+
+              {/* Right edge drag handle */}
+              <div
+                className="absolute right-0 top-0 bottom-0 cursor-col-resize z-20"
+                style={{ width: 6 }}
+                onPointerDown={(e) => handleEdgePointerDown(e, segId, "end", seg.start, seg.end)}
+              />
+            </div>
+          );
+        });
+      })}
+    </div>
+  );
+});

package/src/captions/components/shared.tsx

@@ -0,0 +1,26 @@
+import type React from "react";
+
+export const inputCls =
+  "w-full bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-none focus:border-neutral-600";
+
+export function Section({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-3">
+      <div className="flex items-center gap-1.5 mt-2 mb-1.5">
+        <span className="text-2xs font-medium text-neutral-500 uppercase tracking-wider">
+          {label}
+        </span>
+      </div>
+      <div className="space-y-1">{children}</div>
+    </div>
+  );
+}
+
+export function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-2xs text-neutral-600 w-14 text-right flex-shrink-0">{label}</span>
+      <div className="flex-1 min-w-0">{children}</div>
+    </div>
+  );
+}