feat(templates): aspect-ratio picker drives which variant is built

The detail page now loads a template's real published aspect variants (16:9/1:1/9:16)
from the content container and the preview chips select among them. Build now copies
the SELECTED variant's scene graph (passes that variant's content project UUID), not a
default. Selection is lifted to TemplateDetailContent and shared by the preview picker
and the build button; the preview box reflects the chosen aspect.

Verified on insta-promo (16:9 + a duplicated 1:1 variant): both chips render, and
building 1:1 copies the 1:1 project's scenes (1 scene, 6 fields).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-05 10:08:11 +03:30
parent 0ca11f19dd
commit 8ab86a5cc6
6 changed files with 94 additions and 14 deletions
+11 -2
View File
@@ -2,13 +2,16 @@ import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { TemplateDetailContent } from "@/components/templates/TemplateDetailContent";
import { fetchProject } from "@/lib/admin-api";
import { fetchProject, fetchTemplateVariants } from "@/lib/admin-api";
import {
adminProjectToCatalogTemplate,
VIDEO_TEMPLATES_CATALOG,
type TemplateDetailAspectRatio,
type VideoCatalogTemplate,
} from "@/lib/video-templates-catalog";
const SUPPORTED_ASPECTS = new Set<TemplateDetailAspectRatio>(["16:9", "1:1", "9:16"]);
interface TemplateDetailPageProps {
params: Promise<{ id: string }>;
}
@@ -20,7 +23,13 @@ interface TemplateDetailPageProps {
*/
async function resolveTemplate(id: string): Promise<VideoCatalogTemplate | null> {
const admin = await fetchProject(id);
if (admin) return adminProjectToCatalogTemplate(admin);
if (admin) {
const base = adminProjectToCatalogTemplate(admin);
const variants = (await fetchTemplateVariants(id))
.filter((v) => SUPPORTED_ASPECTS.has(v.aspect as TemplateDetailAspectRatio))
.map((v) => ({ aspect: v.aspect as TemplateDetailAspectRatio, projectId: v.projectId }));
return { ...base, variants };
}
return VIDEO_TEMPLATES_CATALOG.find((item) => item.id === id) ?? null;
}