@lalalic/markcut 1.0.0

package/src/types/Folder.tsx

@@ -0,0 +1,180 @@
+import * as React from "react";
+import { Sequence, Series, Loop, useVideoConfig } from "remotion";
+import { TransitionSeries, linearTiming } from "@remotion/transitions";
+import { fade } from "@remotion/transitions/fade";
+import { slide } from "@remotion/transitions/slide";
+import { wipe } from "@remotion/transitions/wipe";
+import { flip } from "@remotion/transitions/flip";
+import { clockWipe } from "@remotion/transitions/clock-wipe";
+
+import { ComposeContext, AudioContext, useFrameEvents } from "../context/index";
+import { cssJS, toClassName } from "../utils/index";
+import type { Folder as FolderStream, Stream } from "../schema/index";
+
+import { VideoLeaf } from "./Video";
+import { AudioLeaf } from "./Audio";
+import { ImageLeaf } from "./Image";
+import { ComponentLeaf } from "./Component";
+import { RhythmLeaf } from "./Rhythm";
+import { MapLeaf } from "./Map";
+import { IncludeLeaf } from "./Include";
+import { SceneLeaf } from "./Scene";
+import { EffectWrapper } from "./Effect";
+
+const Leaves: Record<string, React.ComponentType<{ stream: any }>> = {
+  video: VideoLeaf,
+  audio: AudioLeaf,
+  image: ImageLeaf,
+  component: ComponentLeaf,
+  rhythm: RhythmLeaf,
+  map: MapLeaf,
+  include: IncludeLeaf,
+  scene: SceneLeaf,
+};
+
+const TransitionPresets: Record<string, (opts?: any) => any> = {
+  fade,
+  slide,
+  wipe,
+  flip,
+  clockWipe,
+};
+
+const NotSeries = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+NotSeries.Sequence = ({ children }: { children: React.ReactNode; durationInFrames?: number; layout?: any }) => (
+  <>{children}</>
+);
+
+export function FolderLeaf({ stream }: { stream: FolderStream }) {
+  const { fps, width, height } = useVideoConfig();
+  const { Container } = React.useContext(ComposeContext);
+  const parentAudio = React.useContext(AudioContext);
+  const totalDur = stream.durationInSeconds ?? 1;
+  useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * fps)));
+
+  const isSeries = !!stream.isSeries;
+  const transition = stream.transition;
+  const transitionTime = stream.transitionTime ?? 0.5;
+  const isRoot = stream.id === "root";
+
+  const visibleChildren = (stream.children as Stream[]).filter((c) => c.visible !== false);
+
+  // Background children are rendered outside the series (parallel overlays),
+  // so TransitionSeries doesn't reject the <Loop> wrapper.
+  const bgChildren = visibleChildren.filter((c) => c.isBackground);
+  const seriesChildren = isSeries ? visibleChildren.filter((c) => !c.isBackground) : visibleChildren;
+
+  // When all non-background series children are audio, skip transitions to
+  // avoid audio overlap (both audio tracks play simultaneously during a fade).
+  const allAudio = seriesChildren.length > 0 && seriesChildren.every((c) => c.type === "audio");
+
+  // Skip transitions when all series children are audio (avoids audio overlap).
+  const effectiveTransition = allAudio ? undefined : transition;
+
+  const TypedSeries: any = React.useMemo(() => {
+    if (!isSeries) return NotSeries;
+    return effectiveTransition ? TransitionSeries : Series;
+  }, [isSeries, effectiveTransition]);
+
+  const transEl = React.useMemo(() => {
+    if (!isSeries || !effectiveTransition) return null;
+    const presentation = TransitionPresets[transition]?.(
+      transition === "clockWipe" ? { width, height } : undefined,
+    );
+    return (
+      <TransitionSeries.Transition
+        presentation={presentation}
+        timing={linearTiming({ durationInFrames: Math.floor(fps * transitionTime) })}
+      />
+    );
+  }, [isSeries, effectiveTransition, transitionTime, fps, width, height]);
+
+  const sequences = seriesChildren
+    .map((child) => {
+      const dur = child.durationInSeconds ?? 0;
+      const durFrames = Math.max(1, Math.floor(dur * fps));
+      const SequenceWrap = TypedSeries.Sequence ?? Sequence;
+      const isLeaf = child.type !== "folder" && child.type !== "root" && child.type !== "effect";
+      const childContent = isLeaf
+        ? React.createElement(Leaves[child.type] ?? (() => null), { stream: child })
+        : child.type === "effect"
+          ? <EffectWrapper stream={child as any}><FolderLeaf stream={child as any} /></EffectWrapper>
+          : React.createElement(FolderLeaf, { stream: child as FolderStream });
+      return (
+        <SequenceWrap key={child.id} durationInFrames={durFrames} layout="none">
+          <Container
+            id={child.id}
+            type={child.type}
+            style={cssJS(child.style) as React.CSSProperties}
+            className={`${child.type} ${toClassName(child.id ?? "")}`}
+          >
+            {childContent}
+          </Container>
+        </SequenceWrap>
+      );
+    })
+    .filter(Boolean);
+
+  // Background children: rendered as parallel loops outside the series
+  const bgContent = bgChildren.length > 0 && (
+    <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
+      {bgChildren.map((child) => {
+        const dur = child.durationInSeconds ?? 0;
+        const durFrames = Math.max(1, Math.floor(dur * fps));
+        const isLeaf = child.type !== "folder" && child.type !== "root" && child.type !== "effect";
+        const childContent = isLeaf
+          ? React.createElement(Leaves[child.type] ?? (() => null), { stream: child })
+          : child.type === "effect"
+            ? <EffectWrapper stream={child as any}><FolderLeaf stream={child as any} /></EffectWrapper>
+            : React.createElement(FolderLeaf, { stream: child as FolderStream });
+        const wrapped = (
+          <Container
+            id={child.id}
+            type={child.type}
+            style={cssJS(child.style) as React.CSSProperties}
+            className={`${child.type} ${toClassName(child.id ?? "")}`}
+          >
+            {childContent}
+          </Container>
+        );
+        const times = Math.max(1, Math.ceil((stream.durationInSeconds! * fps) / durFrames));
+        return (
+          <Loop key={child.id} durationInFrames={durFrames} times={times} showInTimeline={false}>
+            {wrapped}
+          </Loop>
+        );
+      })}
+    </div>
+  );
+
+  // interleave transitions
+  if (isSeries && transEl) {
+    for (let i = 1; i < sequences.length; i += 2) {
+      sequences.splice(i, 0, React.cloneElement(transEl, { key: `t${i}` } as any));
+    }
+  }
+
+  const audioCtx = React.useMemo(
+    () => (stream.type !== "folder" ? { id: stream.id, parent: parentAudio } : parentAudio),
+    [stream.id, stream.type, parentAudio],
+  );
+
+  if (visibleChildren.length === 0 || stream.visible === false) return null;
+
+  const containerStyle = cssJS(stream.style) as React.CSSProperties;
+  const orientation = isRoot ? (width > height ? "landscape" : "portrait") : "";
+
+  return (
+    <AudioContext.Provider value={audioCtx as any}>
+      <Container
+        id={stream.id}
+        type={stream.type}
+        style={containerStyle}
+        className={`${orientation} ${stream.type}`.trim()}
+      >
+        {isSeries ? <TypedSeries>{sequences}</TypedSeries> : sequences}
+        {bgContent}
+      </Container>
+    </AudioContext.Provider>
+  );
+}

package/src/types/FrameSyncStyle.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+
+/**
+ * Wraps children in a <div> that syncs CSS animations to the current Remotion frame.
+ *
+ * CSS @keyframes animations are wall-clock-based and don't respond to
+ * Remotion's frame-based seeking. This component freezes the animation
+ * at the correct time by setting:
+ *   animation-play-state: paused
+ *   animation-delay: -${currentTime}s
+ *
+ * If the style has no `animation` property, it applies the style directly
+ * with no overhead.
+ */
+export function FrameSyncStyle({
+  style,
+  children,
+}: {
+  style: Record<string, unknown>;
+  children: React.ReactNode;
+}) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const hasAnimation = "animation" in style;
+
+  const mergedStyle = React.useMemo<React.CSSProperties>(() => {
+    if (!hasAnimation) return style as React.CSSProperties;
+
+    const currentTime = frame / fps;
+    return {
+      ...style,
+      animationPlayState: "paused",
+      animationDelay: `-${currentTime}s`,
+    } as React.CSSProperties;
+  }, [style, hasAnimation, frame, fps]);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        ...mergedStyle,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/types/Image.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Sequence, Img, useVideoConfig, staticFile } from "remotion";
+import { cssJS } from "../utils/index";
+import { useFrameEvents } from "../context/index";
+import type { Image } from "../schema/index";
+import { FrameSyncStyle } from "./FrameSyncStyle";
+
+function resolveImageSrc(src: string): string {
+  if (/^(https?:|data:|blob:|file:|\/)/.test(src)) return src;
+  return staticFile(src);
+}
+
+export function ImageLeaf({ stream }: { stream: Image }) {
+  const { fps } = useVideoConfig();
+  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * fps)));
+  if (!stream.src) return null;
+  const resolvedSrc = resolveImageSrc(stream.src);
+
+  return (
+    <>
+      {stream.actions.map((a) => {
+        const start = a.start ?? 0;
+        const end = a.end ?? start + 1;
+        return (
+          <Sequence
+            key={a.id}
+            durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
+            from={Math.floor(fps * start)}
+            layout="none"
+          >
+            <FrameSyncStyle style={cssJS(a.style)}>
+              <Img
+                src={resolvedSrc}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  objectFit: stream.fit,
+                }}
+                onDragStart={(e) => {
+                  e.stopPropagation();
+                  return false;
+                }}
+              />
+            </FrameSyncStyle>
+          </Sequence>
+        );
+      })}
+    </>
+  );
+}

package/src/types/Include.tsx

@@ -0,0 +1,394 @@
+import * as React from "react";
+import { AbsoluteFill, Sequence, useVideoConfig, delayRender, continueRender, staticFile, Audio } from "remotion";
+import { ComposeContext, AudioContext, useFrameEvents } from "../context/index";
+import { cssJS, toClassName, getDurationInSeconds, type DurationStream } from "../utils/index";
+import type { Include as IncludeStream, Root } from "../schema/index";
+import { FolderLeaf } from "./Folder";
+
+// Aspect dimensions for scene-based video content
+const ASPECT_DIMS: Record<string, { width: number; height: number }> = {
+  "16x9": { width: 1920, height: 1080 },
+  "9x16": { width: 1080, height: 1920 },
+  "1x1": { width: 1080, height: 1080 },
+};
+
+interface SceneBasedVideo {
+  meta: { title: string; fps: number; aspects?: string[] };
+  voiceover?: { tts: string; voice: string };
+  bgm?: { src: string; baseVolume: number };
+  scenes: Array<{
+    id: string;
+    start?: number;
+    duration?: number;
+    component?: string;
+    props?: { headline?: string; subhead?: string; [k: string]: unknown };
+    voiceover?: { audio?: string };
+  }>;
+}
+
+/**
+ * Determines whether a parsed JSON value is a scene-based video.json
+ * (has `meta` and `scenes`) vs a stream tree (has `type: "root"` or a `root` property).
+ */
+function isSceneBased(data: unknown): data is SceneBasedVideo {
+  if (!data || typeof data !== "object") return false;
+  const d = data as Record<string, unknown>;
+  return typeof d.meta === "object" && d.meta !== null && Array.isArray(d.scenes);
+}
+
+/**
+ * Resolve a relative src path via staticFile() if it's not an absolute URL or path.
+ */
+function resolveIncludeSrc(src: string): string {
+  if (src.startsWith("http://") || src.startsWith("https://") || src.startsWith("data:") || src.startsWith("/")) {
+    return src;
+  }
+  return staticFile(src);
+}
+
+/**
+ * Dynamic import of a component bundle, returning the registry map.
+ * Returns null if the URL is falsy or import fails.
+ */
+function useSubVideoRegistry(importsUrl: string | undefined):
+  { registry: Record<string, React.ComponentType<any>> | null; loaded: boolean }
+{
+  const [registry, setRegistry] = React.useState<Record<string, React.ComponentType<any>> | null>(null);
+  const [loaded, setLoaded] = React.useState(false);
+  const handleRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    if (!importsUrl) {
+      setRegistry(null);
+      setLoaded(true);
+      return;
+    }
+    if (!handleRef.current) {
+      handleRef.current = delayRender(`Loading sub-video components: ${importsUrl}`);
+    }
+
+    import(/* webpackIgnore: true */ importsUrl)
+      .then((mod: any) => {
+        setRegistry(mod.default ?? mod);
+        setLoaded(true);
+        if (handleRef.current) {
+          continueRender(handleRef.current);
+          handleRef.current = null;
+        }
+      })
+      .catch((err: Error) => {
+        console.warn(`Sub-video component registry failed to load: ${importsUrl}`, err);
+        setLoaded(true);
+        if (handleRef.current) {
+          continueRender(handleRef.current);
+          handleRef.current = null;
+        }
+      });
+  }, [importsUrl]);
+
+  return { registry, loaded };
+}
+
+/**
+ * IncludeLeaf renders a video composition referenced by `src`.
+ *
+ * The `src` points to a JSON file that can be either:
+ *   - A stream tree (has `type: "root"`) — rendered via FolderLeaf
+ *   - A scene-based video.json (has `meta` and `scenes`) — rendered via inline scene renderer
+ *
+ * Falls back to inline `children` (legacy behavior) when `src` is not set.
+ *
+ * When the loaded JSON carries its own `imports` field (component bundle URL),
+ * IncludeLeaf dynamically imports the bundle and creates a nested ComposeContext
+ * with the sub-video's registry merged into the parent's, so custom components
+ * registered by the sub-video are available during its rendering.
+ *
+ * Usage:
+ *   { type: "include", src: "./path/to/video.json", actions: [{ start: 0, end: 5 }] }
+ */
+export function IncludeLeaf({ stream }: { stream: IncludeStream }) {
+  const { fps: parentFps, width: parentWidth, height: parentHeight } = useVideoConfig();
+  const parentCompose = React.useContext(ComposeContext);
+  const { Container } = parentCompose;
+  const parentAudio = React.useContext(AudioContext);
+  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * parentFps)));
+
+  if (!stream.actions?.length) return null;
+
+  // ── External JSON loading ─────────────────────────────────────────────
+  const [externalData, setExternalData] = React.useState<unknown | null>(null);
+  const [loadError, setLoadError] = React.useState<string | null>(null);
+  const [handle] = React.useState(() =>
+    stream.src ? delayRender(`Loading include: ${stream.src}`) : null,
+  );
+
+  React.useEffect(() => {
+    if (!stream.src || !handle) return;
+    let active = true;
+
+    const url = resolveIncludeSrc(stream.src);
+
+    fetch(url)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${stream.src}`);
+        return res.json();
+      })
+      .then((data) => {
+        if (!active) return;
+        // Stamp durationInSeconds on loaded data so transitions work correctly
+        const streamTree = (data as any).root ?? data;
+        getDurationInSeconds(streamTree as unknown as DurationStream, true);
+        setExternalData(data);
+        continueRender(handle);
+      })
+      .catch((err: unknown) => {
+        if (!active) return;
+        const msg = err instanceof Error ? err.message : String(err);
+        setLoadError(msg);
+        console.warn(`Include "${stream.src}" failed to load: ${msg}`);
+        continueRender(handle);
+      });
+
+    return () => { active = false; };
+  }, [stream.src, handle]);
+
+  // Stamp durationInSeconds (for inline children legacy fallback)
+  React.useMemo(() => {
+    if (!stream.src) {
+      getDurationInSeconds(stream as unknown as DurationStream, true);
+    }
+  }, [stream, stream.src]);
+
+  // ── Extract sub-video imports URL from loaded data ─────────────────
+  const subImportsUrl = React.useMemo<string | undefined>(() => {
+    if (!externalData) return undefined;
+    const root = (externalData as any).root ?? externalData;
+    return root?.imports;
+  }, [externalData]);
+
+  // ── Load sub-video component registry ──────────────────────────────
+  const { registry: subRegistry, loaded: subRegistryLoaded } = useSubVideoRegistry(subImportsUrl);
+
+  // ── Merge registries: sub-video components take priority ───────────
+  const mergedCompose = React.useMemo(() => {
+    const parentComponents = parentCompose.components;
+    if (!subRegistry) return parentCompose;
+    return {
+      ...parentCompose,
+      components: {
+        ...parentComponents,
+        ...subRegistry,
+      },
+    };
+  }, [parentCompose, subRegistry]);
+
+  // ── Include foreground audio context ─────────────────────────────
+  const audioCtx = React.useMemo(
+    () => ({ id: stream.id, foreground: true, parent: parentAudio }),
+    [stream.id, parentAudio],
+  );
+
+  // ── External video content renderer ───────────────────────────────
+  const renderExternalContent = React.useCallback(() => {
+    if (!externalData) return null;
+    if (loadError) {
+      return (
+        <div style={{ color: "#ff4444", fontSize: 24, padding: 40 }}>
+          ⚠ Include load error: {loadError}
+        </div>
+      );
+    }
+
+    if (isSceneBased(externalData)) {
+      // ── Scene-based video.json ──────────────────────────────────
+      const vj = externalData;
+      const vjFps = vj.meta.fps ?? parentFps;
+      // Use first aspect's dimensions (default to 16x9)
+      const aspectKey = (vj.meta.aspects?.[0] ?? "16x9") as keyof typeof ASPECT_DIMS;
+      const dims = ASPECT_DIMS[aspectKey] ?? { width: parentWidth, height: parentHeight };
+
+      return (
+        <AbsoluteFill style={{ backgroundColor: "#0a0a0a", width: dims.width, height: dims.height }}>
+          {/* Background music from video.json */}
+          {vj.bgm && (
+            <Audio src={vj.bgm.src} volume={vj.bgm.baseVolume} />
+          )}
+
+          {/* Per-scene rendering */}
+          {vj.scenes.map((scene: any) => {
+            const startFrame = Math.round((scene.start ?? 0) * vjFps);
+            const durFrames = Math.round((scene.duration ?? 1) * vjFps);
+            return (
+              <Sequence
+                key={scene.id}
+                from={startFrame}
+                durationInFrames={durFrames}
+                name={`${scene.id}:${scene.component}`}
+              >
+                {/* Scene headline + subhead */}
+                <AbsoluteFill
+                  style={{
+                    backgroundColor: "#0c0c0e",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: 60,
+                  }}
+                >
+                  <div
+                    style={{
+                      color: "#fafafa",
+                      fontSize: 48,
+                      fontWeight: 800,
+                      fontFamily: "Inter, system-ui, sans-serif",
+                      textAlign: "center",
+                      marginBottom: 16,
+                    }}
+                  >
+                    {scene.props?.headline ?? scene.id}
+                  </div>
+                  {scene.props?.subhead && (
+                    <div
+                      style={{
+                        color: "#a1a1aa",
+                        fontSize: 28,
+                        fontFamily: "Inter, system-ui, sans-serif",
+                        textAlign: "center",
+                      }}
+                    >
+                      {scene.props.subhead}
+                    </div>
+                  )}
+                </AbsoluteFill>
+
+                {/* Voiceover audio */}
+                {scene.voiceover?.audio && (
+                  <Audio src={scene.voiceover.audio} volume={1} />
+                )}
+              </Sequence>
+            );
+          })}
+        </AbsoluteFill>
+      );
+    }
+
+    // ── Stream tree format ─────────────────────────────────────────
+    const streamTree: Root = (externalData as any).root ?? externalData;
+    // Override width/height to parent-relative sizing
+    const merged = {
+      ...streamTree,
+      width: streamTree.width ?? parentWidth,
+      height: streamTree.height ?? parentHeight,
+      fps: streamTree.fps ?? parentFps,
+    };
+    return (
+      <div
+        style={{
+          width: merged.width,
+          height: merged.height,
+          overflow: "hidden",
+          position: "relative",
+        }}
+      >
+        <FolderLeaf stream={merged as any} />
+      </div>
+    );
+  }, [externalData, loadError, parentFps, parentWidth, parentHeight]);
+
+  // ── Action-based rendering ───────────────────────────────────────
+  const renderAction = (a: IncludeStream["actions"][number]) => {
+    const start = a.start ?? 0;
+    const end = a.end ?? (stream.durationInSeconds ?? start + 1);
+    const dur = Math.max(0.1, end - start);
+    const durFrames = Math.max(1, Math.floor(parentFps * dur));
+
+    // ── Inline children fallback (legacy) ─────────────────────────
+    if (!stream.src && stream.children?.length) {
+      return (
+        <Sequence
+          key={a.id}
+          durationInFrames={durFrames}
+          from={Math.floor(parentFps * start)}
+          layout="none"
+          showInTimeline={false}
+        >
+          <Container
+            id={stream.id}
+            type="include"
+            style={{
+              ...cssJS(stream.style) as React.CSSProperties,
+              width: parentWidth,
+              height: parentHeight,
+              overflow: "hidden",
+              position: "relative",
+            }}
+            className={`include ${toClassName(stream.id ?? "")}`}
+          >
+            <FolderLeaf stream={stream as any} />
+          </Container>
+        </Sequence>
+      );
+    }
+
+    // ── External src rendering ─────────────────────────────────────
+    return (
+      <Sequence
+        key={a.id}
+        durationInFrames={durFrames}
+        from={Math.floor(parentFps * start)}
+        layout="none"
+        showInTimeline={false}
+      >
+        {externalData || loadError ? (
+          <div
+            style={{
+              width: parentWidth,
+              height: parentHeight,
+              overflow: "hidden",
+              position: "relative",
+            }}
+          >
+            {renderExternalContent()}
+          </div>
+        ) : (
+          <div
+            style={{
+              width: parentWidth,
+              height: parentHeight,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#666",
+              fontSize: 20,
+              fontFamily: "monospace",
+            }}
+          >
+            Loading… {stream.src}
+          </div>
+        )}
+      </Sequence>
+    );
+  };
+
+  // ── Determine if we need a nested ComposeContext ───────────────────
+  const needsNestedContext = subRegistry !== null && subRegistry !== parentCompose.components;
+
+  const inner = (
+    <AudioContext.Provider value={audioCtx as any}>
+      {stream.actions.map(renderAction)}
+    </AudioContext.Provider>
+  );
+
+  // When the sub-video has its own component registry, wrap in a nested
+  // ComposeContext so its components are available to FolderLeaf.
+  if (needsNestedContext && subRegistryLoaded) {
+    return (
+      <ComposeContext.Provider value={mergedCompose}>
+        {inner}
+      </ComposeContext.Provider>
+    );
+  }
+
+  return inner;
+}