85 lines
3.7 KiB
TypeScript
85 lines
3.7 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
|
||
|
|
import { z } from "zod";
|
||
|
|
import { colorSchema } from "../lib/branding";
|
||
|
|
import { FONT } from "../lib/fonts";
|
||
|
|
import { useLayout } from "../lib/aspect";
|
||
|
|
import { getBlock } from "../scenes/registry";
|
||
|
|
import { withDefaults, clampDuration } from "../scenes/types";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* FlexStory — the scene sequencer. A template is `scenes: SceneInstance[]`; this
|
||
|
|
* composition stacks each block in a <Sequence> at its own (clamped) duration and
|
||
|
|
* computes the total length dynamically via calculateMetadata. This is the engine
|
||
|
|
* that turns add/duplicate/delete/reorder + per-scene duration into a real render.
|
||
|
|
*/
|
||
|
|
export const flexStorySchema = z.object({
|
||
|
|
scenes: z.array(
|
||
|
|
z.object({
|
||
|
|
blockId: z.string(),
|
||
|
|
durationSec: z.number(),
|
||
|
|
props: z.record(z.string()),
|
||
|
|
})
|
||
|
|
),
|
||
|
|
...colorSchema,
|
||
|
|
});
|
||
|
|
type Props = z.infer<typeof flexStorySchema>;
|
||
|
|
|
||
|
|
const FPS = 30;
|
||
|
|
|
||
|
|
export const flexStoryDefaults: Props = {
|
||
|
|
scenes: [
|
||
|
|
{ blockId: "TitleCard", durationSec: 4, props: { kicker: "فلترندر", title: "موتور صحنهای", subtitle: "هر قالب، فهرستی از صحنههای قابلویرایش است" } },
|
||
|
|
{ blockId: "CharacterScene", durationSec: 3, props: { title: "یک ایده", caption: "همهچیز با یک جرقهٔ کوچک شروع شد", character: "illustrations/dicebear/openpeeps-04.svg", prop: "cup" } },
|
||
|
|
{ blockId: "ImageCaption", durationSec: 4, props: { title: "نمایش تصویر", caption: "تصویر یا اسکرینشات خود را اینجا قرار دهید", imageUrl: "" } },
|
||
|
|
{ blockId: "KineticQuote", durationSec: 5, props: { quote: "ساختن ویدیوی حرفهای دیگر سخت نیست.", author: "فلترندر" } },
|
||
|
|
{ blockId: "Slideshow", durationSec: 6, props: { title: "چرا فلترندر؟", slide1: "سریع", slide2: "ارزان", slide3: "حرفهای", slide4: "" } },
|
||
|
|
{ blockId: "OutroCTA", durationSec: 4, props: { brandText: "فلترندر", tagline: "همین حالا داستان خود را بسازید", cta: "شروع کنید" } },
|
||
|
|
],
|
||
|
|
accentColor: "#cf8a76",
|
||
|
|
secondaryColor: "#6f9d96",
|
||
|
|
backgroundColor: "#ece4d6",
|
||
|
|
textColor: "#2b3a55",
|
||
|
|
};
|
||
|
|
|
||
|
|
const activeScenes = (props: Props) =>
|
||
|
|
(props.scenes?.length ? props.scenes : flexStoryDefaults.scenes).filter((s) => getBlock(s.blockId));
|
||
|
|
|
||
|
|
export const FlexStory: React.FC<Props> = (props) => {
|
||
|
|
const { fps } = useVideoConfig();
|
||
|
|
const L = useLayout();
|
||
|
|
const colors = {
|
||
|
|
accentColor: props.accentColor,
|
||
|
|
secondaryColor: props.secondaryColor,
|
||
|
|
backgroundColor: props.backgroundColor,
|
||
|
|
textColor: props.textColor,
|
||
|
|
};
|
||
|
|
const scenes = activeScenes(props);
|
||
|
|
let from = 0;
|
||
|
|
return (
|
||
|
|
<AbsoluteFill style={{ backgroundColor: colors.backgroundColor, fontFamily: FONT }}>
|
||
|
|
{scenes.map((sc, i) => {
|
||
|
|
const block = getBlock(sc.blockId)!;
|
||
|
|
const dur = Math.round(clampDuration(sc.durationSec, block) * fps);
|
||
|
|
const Comp = block.component;
|
||
|
|
const node = (
|
||
|
|
<Sequence key={i} from={from} durationInFrames={dur}>
|
||
|
|
<Comp data={withDefaults(block, sc.props || {})} colors={colors} L={L} index={i} total={scenes.length} durationInFrames={dur} />
|
||
|
|
</Sequence>
|
||
|
|
);
|
||
|
|
from += dur;
|
||
|
|
return node;
|
||
|
|
})}
|
||
|
|
</AbsoluteFill>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
/** Composition length = Σ per-scene durations (so add/delete/duration all flow). */
|
||
|
|
export const calcFlexStoryMetadata = ({ props }: { props: Props }) => {
|
||
|
|
const total = activeScenes(props).reduce((acc, s) => {
|
||
|
|
const b = getBlock(s.blockId)!;
|
||
|
|
return acc + Math.round(clampDuration(s.durationSec, b) * FPS);
|
||
|
|
}, 0);
|
||
|
|
return { durationInFrames: Math.max(1, total) };
|
||
|
|
};
|