kevinguevara/brandly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Support brand Intro and Outro videos in template fields

Browse Source
This commit is contained in:
kevinguevaradevia@gmail.com
2026-06-02 22:55:16 -05:00
parent dc6cab57bd
commit e85d8eabcc
2 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/express/builder/FieldConfigPanel.tsx
+26 -12
View File
@@ -25,17 +25,31 @@ const TYPE_OPTIONS: { value: TemplateFieldType; label: string; icon: React.React
{ value: 'sticker', label: 'Sticker', icon: <Zap size={10} /> }, { value: 'sticker', label: 'Sticker', icon: <Zap size={10} /> },
]; ];
/** Brand sources */ /** Brand sources categorized by field type */
const BRAND_SOURCES: { value: BrandSource; label: string }[] = [ const BRAND_SOURCES_MAP: Record<TemplateFieldType, { value: BrandSource; label: string }[]> = {
{ value: 'brand-name', label: 'Nombre de Marca' }, 'text': [
{ value: 'tagline', label: 'Tagline' }, { value: 'brand-name', label: 'Nombre de Marca' },
{ value: 'logo', label: 'Logo' }, { value: 'tagline', label: 'Tagline' },
{ value: 'instagram', label: 'Instagram' }, { value: 'instagram', label: 'Instagram' },
{ value: 'tiktok', label: 'TikTok' }, { value: 'tiktok', label: 'TikTok' },
{ value: 'twitter', label: 'X / Twitter' }, { value: 'twitter', label: 'X / Twitter' },
{ value: 'youtube', label: 'YouTube' }, { value: 'youtube', label: 'YouTube' },
{ value: 'website', label: 'Website' }, { 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. * 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" 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> <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> <option key={s.value} value={s.value}>{s.label}</option>
))} ))}
</select> </select>
src/utils/expressCompiler.ts
+10 -1
View File
@@ -372,7 +372,16 @@ export function compileExpressToTimeline(
...(field.type === 'image' || field.type === 'video' ? { ...(field.type === 'image' || field.type === 'video' ? {
width: field.position.w, width: field.position.w,
height: field.position.h, 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' ? { ...(field.type === 'shape' ? {
width: field.position.w, width: field.position.w,