62 lines
3.8 KiB
TypeScript
62 lines
3.8 KiB
TypeScript
|
import React from "react";
|
|||
|
|
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
|
|||
|
|
import { FONT } from "../../lib/fonts";
|
|||
|
|
import { hexToRgba } from "../../lib/anim";
|
|||
|
|
import { ThreeBackdrop, Grain, Vignette, ProgressDots, Kicker, useSceneTransition } from "../chrome";
|
|||
|
|
import type { BlockProps, SceneBlock } from "../types";
|
|||
|
|
|
|||
|
|
const Slideshow: React.FC<BlockProps> = ({ data, colors, L, index, total, durationInFrames }) => {
|
|||
|
|
const frame = useCurrentFrame();
|
|||
|
|
const { fps } = useVideoConfig();
|
|||
|
|
const { opacity, slide } = useSceneTransition(durationInFrames, L);
|
|||
|
|
const items = [data.slide1, data.slide2, data.slide3, data.slide4].filter((s) => s && s.trim());
|
|||
|
|
// distribute reveals across the available time (after the title settles)
|
|||
|
|
const start = 14;
|
|||
|
|
const span = Math.max(18, (durationInFrames - start - 14) / Math.max(1, items.length));
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<AbsoluteFill style={{ opacity, fontFamily: FONT, backgroundColor: colors.backgroundColor }}>
|
|||
|
|
<ThreeBackdrop colors={colors} />
|
|||
|
|
<AbsoluteFill style={{ display: "flex", alignItems: L.isWide ? "flex-start" : "center", justifyContent: "center", flexDirection: "column", padding: L.pick(L.vmin(120), L.vmin(80), L.vmin(70)) }}>
|
|||
|
|
<Kicker index={index} total={total} colors={colors} L={L} slide={slide} />
|
|||
|
|
<div style={{ direction: "rtl", textAlign: L.isWide ? "right" : "center", transform: `translateX(${slide}px)`, fontWeight: 800, fontSize: L.pick(L.vmin(72), L.vmin(64), L.vmin(60)), color: colors.textColor, lineHeight: 1.15, letterSpacing: -0.5, marginBottom: L.vmin(34) }}>
|
|||
|
|
{data.title}
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: "flex", flexDirection: "column", gap: L.vmin(16), width: "100%", alignItems: L.isWide ? "flex-start" : "center" }}>
|
|||
|
|
{items.map((s, i) => {
|
|||
|
|
const sp = spring({ frame: frame - (start + i * span), fps, config: { damping: 18, stiffness: 110 } });
|
|||
|
|
const x = interpolate(sp, [0, 1], [L.vmin(50), 0]);
|
|||
|
|
return (
|
|||
|
|
<div key={i} style={{ direction: "rtl", opacity: sp, transform: `translateX(${x}px)`, display: "flex", alignItems: "center", gap: L.vmin(16), borderRadius: L.vmin(18), background: hexToRgba(colors.textColor, 0.04), border: `1px solid ${hexToRgba(colors.textColor, 0.08)}`, padding: `${L.vmin(18)}px ${L.vmin(26)}px`, maxWidth: L.vmin(1000) }}>
|
|||
|
|
<span style={{ flexShrink: 0, width: L.vmin(40), height: L.vmin(40), borderRadius: 999, background: colors.accentColor, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: L.vmin(22) }}>
|
|||
|
|
{String(i + 1).replace(/[0-9]/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d])}
|
|||
|
|
</span>
|
|||
|
|
<span style={{ fontWeight: 600, fontSize: L.pick(L.vmin(34), L.vmin(32), L.vmin(30)), color: hexToRgba(colors.textColor, 0.84) }}>{s}</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</AbsoluteFill>
|
|||
|
|
<ProgressDots index={index} total={total} colors={colors} L={L} />
|
|||
|
|
<Vignette />
|
|||
|
|
<Grain />
|
|||
|
|
</AbsoluteFill>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const SlideshowBlock: SceneBlock = {
|
|||
|
|
id: "Slideshow",
|
|||
|
|
label: "اسلایدشو (فهرست)",
|
|||
|
|
component: Slideshow,
|
|||
|
|
fields: [
|
|||
|
|
{ key: "title", label: "عنوان", type: "text", default: "چرا فلترندر؟" },
|
|||
|
|
{ key: "slide1", label: "مورد ۱", type: "text", default: "ساخت ویدیو در چند دقیقه" },
|
|||
|
|
{ key: "slide2", label: "مورد ۲", type: "text", default: "بدون نیاز به دانش فنی" },
|
|||
|
|
{ key: "slide3", label: "مورد ۳", type: "text", default: "خروجی با کیفیت حرفهای" },
|
|||
|
|
{ key: "slide4", label: "مورد ۴", type: "text", default: "" },
|
|||
|
|
],
|
|||
|
|
defaultDurationSec: 6,
|
|||
|
|
minDurationSec: 3,
|
|||
|
|
maxDurationSec: 12,
|
|||
|
|
};
|