From e85d8eabcc5c474c74a92801145573f3ad238254 Mon Sep 17 00:00:00 2001
From: "kevinguevaradevia@gmail.com" <kevinguevaradevia@gmail.com>
Date: Tue, 2 Jun 2026 22:55:16 -0500
Subject: [PATCH] feat: Support brand Intro and Outro videos in template fields

---
 .../express/builder/FieldConfigPanel.tsx      | 38 +++++++++++++------
 src/utils/expressCompiler.ts                  | 11 +++++-
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/components/express/builder/FieldConfigPanel.tsx b/src/components/express/builder/FieldConfigPanel.tsx
index dd1ec82..333e147 100644
--- a/src/components/express/builder/FieldConfigPanel.tsx
+++ b/src/components/express/builder/FieldConfigPanel.tsx
@@ -25,17 +25,31 @@ const TYPE_OPTIONS: { value: TemplateFieldType; label: string; icon: React.React
   { value: 'sticker', label: 'Sticker', icon: <Zap size={10} /> },
 ];
 
-/** Brand sources */
-const BRAND_SOURCES: { value: BrandSource; label: string }[] = [
-  { value: 'brand-name', label: 'Nombre de Marca' },
-  { value: 'tagline', label: 'Tagline' },
-  { value: 'logo', label: 'Logo' },
-  { value: 'instagram', label: 'Instagram' },
-  { value: 'tiktok', label: 'TikTok' },
-  { value: 'twitter', label: 'X / Twitter' },
-  { value: 'youtube', label: 'YouTube' },
-  { value: 'website', label: 'Website' },
-];
+/** Brand sources categorized by field type */
+const BRAND_SOURCES_MAP: Record<TemplateFieldType, { value: BrandSource; label: string }[]> = {
+  'text': [
+    { value: 'brand-name', label: 'Nombre de Marca' },
+    { value: 'tagline', label: 'Tagline' },
+    { value: 'instagram', label: 'Instagram' },
+    { value: 'tiktok', label: 'TikTok' },
+    { value: 'twitter', label: 'X / Twitter' },
+    { value: 'youtube', label: 'YouTube' },
+    { value: 'website', label: 'Website' },
+  ],
+  'image': [
+    { value: 'logo', label: 'Logo' },
+  ],
+  'video': [
+    { value: 'intro-video', label: 'Video Intro de Marca' },
+    { value: 'outro-video', label: 'Video Outro de Marca' },
+  ],
+  'color': [
+    { value: 'primary-color', label: 'Color Primario' },
+    { value: 'secondary-color', label: 'Color Secundario' },
+  ],
+  'shape': [],
+  'sticker': [],
+};
 
 /**
  * FieldConfigPanel — Right panel in the Template Builder.
@@ -196,7 +210,7 @@ export const FieldConfigPanel: React.FC = () => {
               className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-xs text-white focus:border-violet-500/50 focus:outline-none"
             >
               <option value="">Seleccionar...</option>
-              {BRAND_SOURCES.map(s => (
+              {(BRAND_SOURCES_MAP[field.type] || []).map(s => (
                 <option key={s.value} value={s.value}>{s.label}</option>
               ))}
             </select>
diff --git a/src/utils/expressCompiler.ts b/src/utils/expressCompiler.ts
index b2243ee..d349355 100644
--- a/src/utils/expressCompiler.ts
+++ b/src/utils/expressCompiler.ts
@@ -372,7 +372,16 @@ export function compileExpressToTimeline(
           ...(field.type === 'image' || field.type === 'video' ? {
             width: field.position.w,
             height: field.position.h,
-            objectFit: (field.style.mediaFit || 'cover') as 'cover' | 'contain' | 'fill',
+            objectFit: ((field.nature === 'brand-variable' && field.brandSource === 'intro-video')
+              ? (designMD.introVideoFit || field.style.mediaFit || 'cover')
+              : (field.nature === 'brand-variable' && field.brandSource === 'outro-video')
+                ? (designMD.outroVideoFit || field.style.mediaFit || 'cover')
+                : (field.style.mediaFit || 'cover')) as 'cover' | 'contain' | 'fill',
+            containBgColor: (field.nature === 'brand-variable' && field.brandSource === 'intro-video')
+              ? designMD.introVideoBgColor
+              : (field.nature === 'brand-variable' && field.brandSource === 'outro-video')
+                ? designMD.outroVideoBgColor
+                : undefined,
           } : {}),
           ...(field.type === 'shape' ? {
             width: field.position.w,