feat: daily timeline advanced UI and calendar integration
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Save, AlertCircle, Crown } from 'lucide-react';
|
||||
import { Save, AlertCircle, Crown, FolderOpen, Sparkles } from 'lucide-react';
|
||||
import { DesignMD, CompanyProfile } from '../types';
|
||||
import { BrandTabGeneral } from './brand/BrandTabGeneral';
|
||||
import { BrandTabVisual } from './brand/BrandTabVisual';
|
||||
import { BrandTabTypography } from './brand/BrandTabTypography';
|
||||
import { BrandTabMedia } from './brand/BrandTabMedia';
|
||||
import { BrandTabGenerated } from './brand/BrandTabGenerated';
|
||||
import { BrandPreview } from './brand/BrandPreview';
|
||||
import { Toast } from './ui/Toast';
|
||||
|
||||
@@ -22,6 +23,7 @@ const TABS = [
|
||||
{ id: 'visual', label: 'Visual y Colores', icon: '🎨' },
|
||||
{ id: 'typography', label: 'Tipografía', icon: '🔤' },
|
||||
{ id: 'media', label: 'Video y Audio', icon: '🎬' },
|
||||
{ id: 'generated', label: 'Generados', icon: '✨' },
|
||||
] as const;
|
||||
|
||||
type TabId = typeof TABS[number]['id'];
|
||||
@@ -59,7 +61,13 @@ export const BrandArchitecture: React.FC<BrandArchitectureProps> = ({ company, h
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleOpenFolder = async () => {
|
||||
if (window.electronAPI && company?.id) {
|
||||
const workspacePath = await window.electronAPI.fs.getWorkspacePath();
|
||||
const folderPath = `${workspacePath}/${company.id}`;
|
||||
await window.electronAPI.fs.openFolder(folderPath);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="flex-1 flex flex-col w-full overflow-hidden">
|
||||
{/* ═══ Sticky Header: Title + Brand Identity ═══ */}
|
||||
@@ -120,6 +128,14 @@ export const BrandArchitecture: React.FC<BrandArchitectureProps> = ({ company, h
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleOpenFolder}
|
||||
title="Abrir carpeta local"
|
||||
className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-neutral-800/80 hover:bg-neutral-700/80 border border-neutral-700/50 text-neutral-300 text-sm font-medium transition-all"
|
||||
>
|
||||
<FolderOpen size={16} />
|
||||
</button>
|
||||
|
||||
{/* Save Button */}
|
||||
<button
|
||||
onClick={handleSave}
|
||||
@@ -185,6 +201,7 @@ export const BrandArchitecture: React.FC<BrandArchitectureProps> = ({ company, h
|
||||
)}
|
||||
{activeTab === 'visual' && (
|
||||
<BrandTabVisual
|
||||
company={company}
|
||||
designMD={designMD}
|
||||
handleDesignChange={handleDesignChange}
|
||||
onEditAsset={onEditAsset}
|
||||
@@ -195,28 +212,37 @@ export const BrandArchitecture: React.FC<BrandArchitectureProps> = ({ company, h
|
||||
)}
|
||||
{activeTab === 'media' && (
|
||||
<BrandTabMedia
|
||||
company={company}
|
||||
designMD={designMD}
|
||||
handleDesignChange={handleDesignChange}
|
||||
onEditAsset={onEditAsset}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
{activeTab === 'generated' && (
|
||||
<BrandTabGenerated company={company} />
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview Column */}
|
||||
<BrandPreview
|
||||
designMD={designMD}
|
||||
company={company}
|
||||
activeTab={activeTab}
|
||||
zoom={zoom}
|
||||
setZoom={setZoom}
|
||||
aspectRatio={aspectRatio}
|
||||
setAspectRatio={setAspectRatio}
|
||||
handleDesignChange={handleDesignChange}
|
||||
/>
|
||||
{activeTab === 'generated' ? (
|
||||
<div className="flex-1 bg-neutral-950 flex flex-col items-center justify-center text-neutral-500">
|
||||
<Sparkles className="w-12 h-12 mb-4 opacity-50" />
|
||||
<p>Selecciona un archivo generado para previsualizarlo.</p>
|
||||
</div>
|
||||
) : (
|
||||
<BrandPreview
|
||||
designMD={designMD}
|
||||
company={company}
|
||||
activeTab={activeTab}
|
||||
zoom={zoom}
|
||||
setZoom={setZoom}
|
||||
aspectRatio={aspectRatio}
|
||||
setAspectRatio={setAspectRatio}
|
||||
handleDesignChange={handleDesignChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Success Toast */}
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import { Sparkles, FolderCog } from 'lucide-react';
|
||||
import { DesignMD, CompanyProfile, ExpressTemplate } from '../types';
|
||||
import { TemplatesPanel, TemplateDragPreview } from './dashboard/TemplatesPanel';
|
||||
import { BrandsPanel, BrandDragPreview } from './dashboard/BrandsPanel';
|
||||
@@ -60,6 +60,26 @@ export const Dashboard: React.FC<DashboardProps> = ({
|
||||
const [selectedBrand, setSelectedBrand] = useState<CompanyProfile | null>(null);
|
||||
const [activeDrag, setActiveDrag] = useState<DragItem | null>(null);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [workspacePath, setWorkspacePath] = useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (window.electronAPI) {
|
||||
window.electronAPI.fs.getWorkspacePath().then(setWorkspacePath);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleChangeWorkspace = async () => {
|
||||
if (window.electronAPI) {
|
||||
const newPath = await window.electronAPI.fs.setWorkspacePath();
|
||||
if (newPath) {
|
||||
setWorkspacePath(newPath);
|
||||
// Force reload of brands and templates by the parent if possible,
|
||||
// or just let the user know they might need to restart/reload.
|
||||
// For now, we'll just reload the window to ensure fresh state.
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// DnD sensor config — require 5px movement before starting drag (allows click)
|
||||
const sensors = useSensors(
|
||||
@@ -117,16 +137,16 @@ export const Dashboard: React.FC<DashboardProps> = ({
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragCancel={handleDragCancel}
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto w-full relative bg-neutral-950">
|
||||
<div className="flex-1 overflow-hidden w-full relative bg-neutral-950 flex flex-col">
|
||||
{/* Subtle grid background */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '40px 40px' }}
|
||||
/>
|
||||
|
||||
<div className="max-w-6xl w-full mx-auto p-8 relative z-10">
|
||||
<div className="w-full max-w-[1600px] mx-auto p-8 lg:p-10 xl:p-12 relative z-10 flex flex-col h-full overflow-hidden">
|
||||
{/* ── Header ── */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-8 shrink-0">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-600 to-fuchsia-600 flex items-center justify-center shadow-lg shadow-violet-900/30">
|
||||
<Sparkles size={20} className="text-white" />
|
||||
@@ -135,11 +155,29 @@ export const Dashboard: React.FC<DashboardProps> = ({
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight">Crear Contenido</h1>
|
||||
<p className="text-sm text-neutral-500">Combina una plantilla con una marca para generar contenido</p>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
{workspacePath && (
|
||||
<div className="flex flex-col items-end mr-4">
|
||||
<span className="text-[10px] text-neutral-500 uppercase font-semibold tracking-wider">Espacio de trabajo</span>
|
||||
<span className="text-xs text-neutral-300 font-mono" title={workspacePath}>
|
||||
{workspacePath.length > 35 ? '...' + workspacePath.slice(-35) : workspacePath}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={handleChangeWorkspace}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-neutral-900 border border-neutral-800 hover:border-neutral-700 hover:bg-neutral-800 rounded-xl text-sm font-medium text-white transition-colors"
|
||||
>
|
||||
<FolderCog size={16} className="text-neutral-400" />
|
||||
Cambiar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Zone 1 & 2: Templates + Brands (side by side) ── */}
|
||||
<div className="flex gap-5 mb-6" style={{ height: 380 }}>
|
||||
<div className="flex gap-6 lg:gap-8 mb-8 flex-1 min-h-[450px]">
|
||||
<TemplatesPanel
|
||||
templates={templates}
|
||||
onSelect={handleSelectTemplate}
|
||||
@@ -160,15 +198,17 @@ export const Dashboard: React.FC<DashboardProps> = ({
|
||||
</div>
|
||||
|
||||
{/* ── Zone 3: Generate Content ── */}
|
||||
<GenerateZone
|
||||
selectedTemplate={selectedTemplate}
|
||||
selectedBrand={selectedBrand}
|
||||
onClearTemplate={() => setSelectedTemplate(null)}
|
||||
onClearBrand={() => setSelectedBrand(null)}
|
||||
onClickTemplateSlot={() => {/* Could open a modal selector — for now click on panel */}}
|
||||
onClickBrandSlot={() => {/* Could open a modal selector — for now click on panel */}}
|
||||
onGenerate={handleGenerate}
|
||||
/>
|
||||
<div className="shrink-0 pb-8">
|
||||
<GenerateZone
|
||||
selectedTemplate={selectedTemplate}
|
||||
selectedBrand={selectedBrand}
|
||||
onClearTemplate={() => setSelectedTemplate(null)}
|
||||
onClearBrand={() => setSelectedBrand(null)}
|
||||
onClickTemplateSlot={() => {/* Could open a modal selector — for now click on panel */}}
|
||||
onClickBrandSlot={() => {/* Could open a modal selector — for now click on panel */}}
|
||||
onGenerate={handleGenerate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { LayoutTemplate, Menu, Home, Settings, Download, ZoomIn, ZoomOut, X, CalendarDays, Sparkles, Play } from 'lucide-react';
|
||||
import { LayoutTemplate, Menu, Home, Settings, Download, ZoomIn, ZoomOut, X, CalendarDays, Sparkles, Play, FolderOpen } from 'lucide-react';
|
||||
|
||||
interface TopHeaderProps {
|
||||
currentStep: 'dashboard' | 'brand' | 'studio' | 'express' | 'content-grid' | 'template-builder' | 'production-form';
|
||||
@@ -84,7 +84,7 @@ export const TopHeader: React.FC<TopHeaderProps> = ({
|
||||
<button
|
||||
className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-neutral-300 hover:bg-neutral-700 hover:text-white transition-colors"
|
||||
>
|
||||
<Download size={14} /> Descargar
|
||||
<FolderOpen size={14} /> Abrir
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
@@ -172,6 +172,17 @@ export const TopHeader: React.FC<TopHeaderProps> = ({
|
||||
Editor Pro 🎛️
|
||||
</button>
|
||||
)}
|
||||
|
||||
{currentStep !== 'content-grid' && (
|
||||
<button
|
||||
onClick={() => setCurrentStep('content-grid')}
|
||||
title="Abrir malla de contenidos"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 text-white text-[10px] font-semibold transition-all"
|
||||
>
|
||||
<CalendarDays size={12} />
|
||||
Malla de Contenidos
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isStudio && (
|
||||
<span className="text-[10px] font-medium text-neutral-500 uppercase tracking-wider">
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { CompanyProfile } from '../../types';
|
||||
import { GeneratedMediaList } from '../content-grid/GeneratedMediaList';
|
||||
|
||||
interface BrandTabGeneratedProps {
|
||||
company: CompanyProfile;
|
||||
}
|
||||
|
||||
export const BrandTabGenerated: React.FC<BrandTabGeneratedProps> = ({ company }) => {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2 flex items-center gap-2">
|
||||
Contenido Generado
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-400">
|
||||
Archivos renderizados y guardados para la marca {company.name}.
|
||||
</p>
|
||||
</div>
|
||||
<GeneratedMediaList brandId={company.id} draggable={false} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Film, Volume2, Music, X, Upload, Wand2, Maximize2, Minimize2, Move, Pipette } from 'lucide-react';
|
||||
import { DesignMD } from '../../types';
|
||||
import { DesignMD, CompanyProfile } from '../../types';
|
||||
import { FileDropZone } from '../ui/FileDropZone';
|
||||
|
||||
interface BrandTabMediaProps {
|
||||
company: CompanyProfile;
|
||||
designMD: DesignMD;
|
||||
handleDesignChange: (key: keyof DesignMD, value: string | number | string[] | boolean) => void;
|
||||
}
|
||||
@@ -15,7 +16,7 @@ interface BrandTabMediaProps {
|
||||
* All positioning, fit, duration, and blend controls live in the TemplateBuilder
|
||||
* (per-template segment configuration), avoiding collisions.
|
||||
*/
|
||||
export const BrandTabMedia: React.FC<BrandTabMediaProps & { onEditAsset?: (type: keyof DesignMD, url: string) => void }> = ({ designMD, handleDesignChange, onEditAsset }) => {
|
||||
export const BrandTabMedia: React.FC<BrandTabMediaProps & { onEditAsset?: (type: keyof DesignMD, url: string) => void }> = ({ company, designMD, handleDesignChange, onEditAsset }) => {
|
||||
|
||||
/** Auto-detect video duration and store it in DesignMD (for BrandPreview playback) */
|
||||
const probeVideoDuration = useCallback((url: string, key: 'introDurationFrames' | 'outroDurationFrames') => {
|
||||
@@ -48,6 +49,7 @@ export const BrandTabMedia: React.FC<BrandTabMediaProps & { onEditAsset?: (type:
|
||||
|
||||
{/* ═══ Intro Video ═══ */}
|
||||
<VideoUploadSimple
|
||||
company={company}
|
||||
label="Video de Cabezote (Intro)"
|
||||
description="Se usará automáticamente en plantillas que incluyan segmento de intro de marca"
|
||||
videoUrl={designMD.introVideoUrl || ''}
|
||||
@@ -70,6 +72,7 @@ export const BrandTabMedia: React.FC<BrandTabMediaProps & { onEditAsset?: (type:
|
||||
|
||||
{/* ═══ Outro Video ═══ */}
|
||||
<VideoUploadSimple
|
||||
company={company}
|
||||
label="Video de Cierre (Outro)"
|
||||
description="Se usará automáticamente en plantillas que incluyan segmento de outro de marca"
|
||||
videoUrl={designMD.outroVideoUrl || ''}
|
||||
@@ -144,10 +147,25 @@ export const BrandTabMedia: React.FC<BrandTabMediaProps & { onEditAsset?: (type:
|
||||
accept="audio/*"
|
||||
label="Subir audio"
|
||||
onFiles={async (files) => {
|
||||
let workspacePath = '';
|
||||
if (window.electronAPI) {
|
||||
workspacePath = await window.electronAPI.fs.getWorkspacePath();
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', files[0]);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/upload', { method: 'POST', body: formData });
|
||||
let res;
|
||||
if (workspacePath && company.id) {
|
||||
formData.append('brandId', company.id);
|
||||
formData.append('workspacePath', workspacePath);
|
||||
res = await fetch('/api/upload/brand', { method: 'POST', body: formData });
|
||||
} else {
|
||||
res = await fetch('/api/upload', { method: 'POST', body: formData });
|
||||
}
|
||||
|
||||
if (!res.ok) throw new Error('Upload failed');
|
||||
const data = await res.json();
|
||||
if (data.url) handleDesignChange('brandAudioUrl', data.url);
|
||||
} catch (err) {
|
||||
@@ -184,6 +202,7 @@ export const BrandTabMedia: React.FC<BrandTabMediaProps & { onEditAsset?: (type:
|
||||
/* ── Simple Video Upload Card ── */
|
||||
|
||||
const VideoUploadSimple: React.FC<{
|
||||
company: CompanyProfile;
|
||||
label: string;
|
||||
description: string;
|
||||
videoUrl: string;
|
||||
@@ -196,7 +215,7 @@ const VideoUploadSimple: React.FC<{
|
||||
onFitChange?: (fit: 'cover' | 'contain' | 'fill') => void;
|
||||
bgColor?: string | null;
|
||||
onBgColorChange?: (color: string | null) => void;
|
||||
}> = ({ label, description, videoUrl, accentColor, onUrlChange, onClear, onEdit, showEdit, fit = 'cover', onFitChange, bgColor, onBgColorChange }) => {
|
||||
}> = ({ company, label, description, videoUrl, accentColor, onUrlChange, onClear, onEdit, showEdit, fit = 'cover', onFitChange, bgColor, onBgColorChange }) => {
|
||||
const hasVideo = !!videoUrl && videoUrl.trim().length > 0;
|
||||
const colorInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
@@ -258,10 +277,25 @@ const VideoUploadSimple: React.FC<{
|
||||
accept="video/*"
|
||||
label="Subir archivo"
|
||||
onFiles={async (files) => {
|
||||
let workspacePath = '';
|
||||
if (window.electronAPI) {
|
||||
workspacePath = await window.electronAPI.fs.getWorkspacePath();
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', files[0]);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/upload', { method: 'POST', body: formData });
|
||||
let res;
|
||||
if (workspacePath && company.id) {
|
||||
formData.append('brandId', company.id);
|
||||
formData.append('workspacePath', workspacePath);
|
||||
res = await fetch('/api/upload/brand', { method: 'POST', body: formData });
|
||||
} else {
|
||||
res = await fetch('/api/upload', { method: 'POST', body: formData });
|
||||
}
|
||||
|
||||
if (!res.ok) throw new Error('Upload failed');
|
||||
const data = await res.json();
|
||||
if (data.url) onUrlChange(data.url);
|
||||
} catch (err) {
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Settings2, ImageIcon, Wand2 } from 'lucide-react';
|
||||
import { DesignMD } from '../../types';
|
||||
import { DesignMD, CompanyProfile } from '../../types';
|
||||
import { FileDropZone } from '../ui/FileDropZone';
|
||||
|
||||
interface BrandTabVisualProps {
|
||||
company: CompanyProfile;
|
||||
designMD: DesignMD;
|
||||
handleDesignChange: (key: keyof DesignMD, value: string | number | string[] | boolean) => void;
|
||||
onEditAsset?: (type: keyof DesignMD, url: string) => void;
|
||||
}
|
||||
|
||||
export const BrandTabVisual: React.FC<BrandTabVisualProps> = ({
|
||||
company,
|
||||
designMD,
|
||||
handleDesignChange,
|
||||
onEditAsset,
|
||||
@@ -19,9 +21,23 @@ export const BrandTabVisual: React.FC<BrandTabVisualProps> = ({
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
let workspacePath = '';
|
||||
if (window.electronAPI) {
|
||||
workspacePath = await window.electronAPI.fs.getWorkspacePath();
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const res = await fetch('/api/upload', { method: 'POST', body: formData });
|
||||
|
||||
let res;
|
||||
if (workspacePath && company.id) {
|
||||
formData.append('brandId', company.id);
|
||||
formData.append('workspacePath', workspacePath);
|
||||
res = await fetch('/api/upload/brand', { method: 'POST', body: formData });
|
||||
} else {
|
||||
res = await fetch('/api/upload', { method: 'POST', body: formData });
|
||||
}
|
||||
|
||||
if (!res.ok) throw new Error('Upload failed');
|
||||
const data = await res.json();
|
||||
handleDesignChange('logoUrl', data.url);
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import { ChevronLeft, ChevronRight, Plus } from 'lucide-react';
|
||||
import { ContentPiece, ContentPillar } from '../../types';
|
||||
import { ContentCard } from './ContentCard';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { ChevronLeft, ChevronRight, Image as ImageIcon, Play } from 'lucide-react';
|
||||
import { CompanyProfile } from '../../types';
|
||||
import { useDroppable } from '@dnd-kit/core';
|
||||
|
||||
interface CalendarViewProps {
|
||||
pieces: ContentPiece[];
|
||||
pillars: ContentPillar[];
|
||||
onPieceClick: (piece: ContentPiece) => void;
|
||||
onCreatePiece: (date: string) => void;
|
||||
onDropPiece: (pieceId: string, newDate: string) => void;
|
||||
contentMesh: any;
|
||||
onContentMeshChange: (mesh: any) => void;
|
||||
companies: CompanyProfile[];
|
||||
filterBrandId: string;
|
||||
onSelectDate: (date: string) => void;
|
||||
}
|
||||
|
||||
const DAYS_ES = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
|
||||
@@ -17,73 +17,74 @@ const MONTHS_ES = [
|
||||
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
|
||||
];
|
||||
|
||||
/**
|
||||
* Monthly calendar view inspired by Later/Planable.
|
||||
* Shows content pieces in day cells with drag-and-drop rescheduling.
|
||||
*/
|
||||
export const CalendarView: React.FC<CalendarViewProps> = ({
|
||||
pieces,
|
||||
pillars,
|
||||
onPieceClick,
|
||||
onCreatePiece,
|
||||
onDropPiece,
|
||||
contentMesh,
|
||||
onContentMeshChange,
|
||||
companies,
|
||||
filterBrandId,
|
||||
onSelectDate,
|
||||
}) => {
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [dragOverDate, setDragOverDate] = useState<string | null>(null);
|
||||
const [calendarType, setCalendarType] = useState<'month' | 'week'>('month');
|
||||
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth();
|
||||
const yearNum = currentDate.getFullYear();
|
||||
const monthNum = currentDate.getMonth();
|
||||
|
||||
// Generate calendar grid (6 weeks × 7 days)
|
||||
// Generate calendar grid
|
||||
const calendarDays = useMemo(() => {
|
||||
const firstDay = new Date(year, month, 1);
|
||||
// Adjust so Monday = 0
|
||||
const startDow = (firstDay.getDay() + 6) % 7;
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
if (calendarType === 'month') {
|
||||
const firstDay = new Date(yearNum, monthNum, 1);
|
||||
// Adjust so Monday = 0
|
||||
const startDow = (firstDay.getDay() + 6) % 7;
|
||||
const daysInMonth = new Date(yearNum, monthNum + 1, 0).getDate();
|
||||
|
||||
const days: { date: Date; isCurrentMonth: boolean }[] = [];
|
||||
const days: { date: Date; isCurrentMonth: boolean }[] = [];
|
||||
|
||||
// Previous month fill
|
||||
const prevMonthDays = new Date(year, month, 0).getDate();
|
||||
for (let i = startDow - 1; i >= 0; i--) {
|
||||
days.push({
|
||||
date: new Date(year, month - 1, prevMonthDays - i),
|
||||
isCurrentMonth: false,
|
||||
});
|
||||
}
|
||||
|
||||
// Current month
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
days.push({
|
||||
date: new Date(year, month, d),
|
||||
isCurrentMonth: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Next month fill (to complete 6 rows)
|
||||
const remaining = 42 - days.length;
|
||||
for (let d = 1; d <= remaining; d++) {
|
||||
days.push({
|
||||
date: new Date(year, month + 1, d),
|
||||
isCurrentMonth: false,
|
||||
});
|
||||
}
|
||||
|
||||
return days;
|
||||
}, [year, month]);
|
||||
|
||||
// Group pieces by date
|
||||
const piecesByDate = useMemo(() => {
|
||||
const map: Record<string, ContentPiece[]> = {};
|
||||
pieces.forEach(p => {
|
||||
if (p.scheduledDate) {
|
||||
const key = p.scheduledDate;
|
||||
if (!map[key]) map[key] = [];
|
||||
map[key].push(p);
|
||||
// Previous month fill
|
||||
const prevMonthDays = new Date(yearNum, monthNum, 0).getDate();
|
||||
for (let i = startDow - 1; i >= 0; i--) {
|
||||
days.push({
|
||||
date: new Date(yearNum, monthNum - 1, prevMonthDays - i),
|
||||
isCurrentMonth: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
return map;
|
||||
}, [pieces]);
|
||||
|
||||
// Current month
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
days.push({
|
||||
date: new Date(yearNum, monthNum, d),
|
||||
isCurrentMonth: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Next month fill (to complete 6 rows)
|
||||
const remaining = 42 - days.length;
|
||||
for (let d = 1; d <= remaining; d++) {
|
||||
days.push({
|
||||
date: new Date(yearNum, monthNum + 1, d),
|
||||
isCurrentMonth: false,
|
||||
});
|
||||
}
|
||||
|
||||
return days;
|
||||
} else {
|
||||
// Week view
|
||||
const firstDayOfWeek = new Date(currentDate);
|
||||
firstDayOfWeek.setDate(currentDate.getDate() - ((currentDate.getDay() + 6) % 7));
|
||||
firstDayOfWeek.setHours(0,0,0,0);
|
||||
|
||||
const days: { date: Date; isCurrentMonth: boolean }[] = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const d = new Date(firstDayOfWeek);
|
||||
d.setDate(d.getDate() + i);
|
||||
days.push({
|
||||
date: d,
|
||||
isCurrentMonth: d.getMonth() === currentDate.getMonth()
|
||||
});
|
||||
}
|
||||
return days;
|
||||
}
|
||||
}, [currentDate, yearNum, monthNum, calendarType]);
|
||||
|
||||
const toDateKey = (date: Date) => {
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
@@ -96,41 +97,56 @@ export const CalendarView: React.FC<CalendarViewProps> = ({
|
||||
date.getFullYear() === today.getFullYear();
|
||||
};
|
||||
|
||||
const goToPrev = () => setCurrentDate(new Date(year, month - 1, 1));
|
||||
const goToNext = () => setCurrentDate(new Date(year, month + 1, 1));
|
||||
const goToToday = () => setCurrentDate(new Date());
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent, dateKey: string) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setDragOverDate(dateKey);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent, dateKey: string) => {
|
||||
e.preventDefault();
|
||||
const pieceId = e.dataTransfer.getData('text/piece-id');
|
||||
if (pieceId) {
|
||||
onDropPiece(pieceId, dateKey);
|
||||
const goToPrev = () => {
|
||||
if (calendarType === 'month') {
|
||||
setCurrentDate(new Date(yearNum, monthNum - 1, 1));
|
||||
} else {
|
||||
const prevWeek = new Date(currentDate);
|
||||
prevWeek.setDate(currentDate.getDate() - 7);
|
||||
setCurrentDate(prevWeek);
|
||||
}
|
||||
setDragOverDate(null);
|
||||
}, [onDropPiece]);
|
||||
|
||||
const handleDragStart = useCallback((e: React.DragEvent, piece: ContentPiece) => {
|
||||
e.dataTransfer.setData('text/piece-id', piece.id);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
}, []);
|
||||
};
|
||||
|
||||
const goToNext = () => {
|
||||
if (calendarType === 'month') {
|
||||
setCurrentDate(new Date(yearNum, monthNum + 1, 1));
|
||||
} else {
|
||||
const nextWeek = new Date(currentDate);
|
||||
nextWeek.setDate(currentDate.getDate() + 7);
|
||||
setCurrentDate(nextWeek);
|
||||
}
|
||||
};
|
||||
const goToToday = () => setCurrentDate(new Date());
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Calendar Header */}
|
||||
<div className="flex items-center justify-between px-1 pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="text-lg font-bold text-white">
|
||||
{MONTHS_ES[month]} {year}
|
||||
<h3 className="text-lg font-bold text-white min-w-[150px]">
|
||||
{MONTHS_ES[monthNum]} {yearNum}
|
||||
</h3>
|
||||
<div className="flex bg-neutral-900 border border-neutral-800 rounded-lg p-0.5">
|
||||
<button
|
||||
onClick={() => setCalendarType('month')}
|
||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
||||
calendarType === 'month' ? 'bg-violet-600 text-white' : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
|
||||
}`}
|
||||
>
|
||||
Mes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCalendarType('week')}
|
||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
||||
calendarType === 'week' ? 'bg-violet-600 text-white' : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
|
||||
}`}
|
||||
>
|
||||
Semana
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={goToToday}
|
||||
className="px-2 py-1 text-[10px] font-semibold text-violet-400 bg-violet-600/10 border border-violet-500/20 rounded-lg hover:bg-violet-600/20 transition-all"
|
||||
className="px-2 py-1 ml-2 text-[10px] font-semibold text-violet-400 bg-violet-600/10 border border-violet-500/20 rounded-lg hover:bg-violet-600/20 transition-all"
|
||||
title="Ir a hoy"
|
||||
>
|
||||
Hoy
|
||||
@@ -164,72 +180,120 @@ export const CalendarView: React.FC<CalendarViewProps> = ({
|
||||
</div>
|
||||
|
||||
{/* Calendar grid */}
|
||||
<div className="grid grid-cols-7 gap-px flex-1 bg-neutral-800/30 rounded-xl overflow-hidden border border-neutral-800/50">
|
||||
<div className={`grid grid-cols-7 gap-px flex-1 bg-neutral-800/30 rounded-xl overflow-hidden border border-neutral-800/50 ${calendarType === 'week' ? 'grid-rows-1' : ''}`}>
|
||||
{calendarDays.map(({ date, isCurrentMonth }, idx) => {
|
||||
const dateKey = toDateKey(date);
|
||||
const dayPieces = piecesByDate[dateKey] || [];
|
||||
const today = isToday(date);
|
||||
const isDragOver = dragOverDate === dateKey;
|
||||
|
||||
const [yyyy, mm, dd] = dateKey.split('-');
|
||||
const dayData = contentMesh?.[yyyy]?.[mm]?.[dd] || { images: [], videos: [] };
|
||||
const itemsCount = (dayData.images?.length || 0) + (dayData.videos?.length || 0);
|
||||
|
||||
return (
|
||||
<div
|
||||
<DayCell
|
||||
key={idx}
|
||||
className={`min-h-[100px] p-1.5 flex flex-col transition-colors ${
|
||||
isCurrentMonth
|
||||
? 'bg-neutral-950/80'
|
||||
: 'bg-neutral-950/40'
|
||||
} ${isDragOver ? 'bg-violet-950/30 ring-1 ring-inset ring-violet-500/40' : ''}`}
|
||||
onDragOver={(e) => handleDragOver(e, dateKey)}
|
||||
onDragLeave={() => setDragOverDate(null)}
|
||||
onDrop={(e) => handleDrop(e, dateKey)}
|
||||
>
|
||||
{/* Day number */}
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span
|
||||
className={`text-[11px] font-semibold w-6 h-6 flex items-center justify-center rounded-full transition-colors ${
|
||||
today
|
||||
? 'bg-violet-600 text-white'
|
||||
: isCurrentMonth
|
||||
? 'text-neutral-300'
|
||||
: 'text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
{date.getDate()}
|
||||
</span>
|
||||
{isCurrentMonth && (
|
||||
<button
|
||||
onClick={() => onCreatePiece(dateKey)}
|
||||
className="w-4 h-4 rounded flex items-center justify-center text-neutral-700 hover:text-violet-400 hover:bg-violet-600/10 transition-all opacity-0 hover:opacity-100 focus:opacity-100"
|
||||
title="Crear contenido en este día"
|
||||
>
|
||||
<Plus size={10} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content pieces */}
|
||||
<div className="space-y-0.5 flex-1 overflow-y-auto custom-scrollbar">
|
||||
{dayPieces.slice(0, 3).map(piece => (
|
||||
<ContentCard
|
||||
key={piece.id}
|
||||
piece={piece}
|
||||
pillar={pillars.find(p => p.id === piece.pillarId)}
|
||||
onClick={onPieceClick}
|
||||
compact
|
||||
draggable
|
||||
onDragStart={handleDragStart}
|
||||
/>
|
||||
))}
|
||||
{dayPieces.length > 3 && (
|
||||
<span className="text-[9px] text-neutral-600 font-mono px-1">
|
||||
+{dayPieces.length - 3} más
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
date={date}
|
||||
dateKey={dateKey}
|
||||
isCurrentMonth={isCurrentMonth}
|
||||
today={today}
|
||||
itemsCount={itemsCount}
|
||||
dayData={dayData}
|
||||
filterBrandId={filterBrandId}
|
||||
companies={companies}
|
||||
onClick={() => onSelectDate(dateKey)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface DayCellProps {
|
||||
date: Date;
|
||||
dateKey: string;
|
||||
isCurrentMonth: boolean;
|
||||
today: boolean;
|
||||
itemsCount: number;
|
||||
dayData: { images: any[]; videos: any[] };
|
||||
filterBrandId: string;
|
||||
companies: CompanyProfile[];
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const DayCell: React.FC<DayCellProps> = ({
|
||||
date,
|
||||
dateKey,
|
||||
isCurrentMonth,
|
||||
today,
|
||||
dayData,
|
||||
filterBrandId,
|
||||
companies,
|
||||
onClick
|
||||
}) => {
|
||||
const { setNodeRef, isOver } = useDroppable({
|
||||
id: dateKey,
|
||||
});
|
||||
|
||||
const filteredVideos = filterBrandId ? (dayData.videos || []).filter(v => v.mark_id === filterBrandId) : (dayData.videos || []);
|
||||
const filteredImages = filterBrandId ? (dayData.images || []).filter(i => i.mark_id === filterBrandId) : (dayData.images || []);
|
||||
const itemsCount = filteredVideos.length + filteredImages.length;
|
||||
|
||||
const getBrandName = (id: string) => companies.find(c => c.id === id)?.name || '';
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
onClick={onClick}
|
||||
className={`min-h-[100px] p-1.5 flex flex-col transition-colors cursor-pointer ${
|
||||
isCurrentMonth
|
||||
? 'bg-neutral-950/80 hover:bg-neutral-900'
|
||||
: 'bg-neutral-950/40 hover:bg-neutral-900/60'
|
||||
} ${isOver ? 'bg-violet-950/30 ring-2 ring-inset ring-violet-500' : ''}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span
|
||||
className={`text-[11px] font-semibold w-6 h-6 flex items-center justify-center rounded-full transition-colors ${
|
||||
today
|
||||
? 'bg-violet-600 text-white'
|
||||
: isCurrentMonth
|
||||
? 'text-neutral-300'
|
||||
: 'text-neutral-700'
|
||||
}`}
|
||||
>
|
||||
{date.getDate()}
|
||||
</span>
|
||||
{itemsCount > 0 && (
|
||||
<span className="text-[10px] font-medium text-violet-400 bg-violet-500/10 px-1.5 rounded">
|
||||
{itemsCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col gap-1 overflow-hidden mt-1">
|
||||
{filteredVideos.slice(0, 2).map((v, i) => {
|
||||
const displayName = filterBrandId ? v.original_name : `${getBrandName(v.mark_id)} - ${v.original_name}`;
|
||||
return (
|
||||
<div key={`v-${i}`} className="text-[9px] bg-indigo-500/10 text-indigo-300 px-1 py-0.5 rounded flex items-center gap-1 truncate" title={displayName}>
|
||||
<Play size={8} className="shrink-0" /> <span className="truncate">{displayName}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{filteredImages.slice(0, 2).map((img, i) => {
|
||||
const displayName = filterBrandId ? img.original_name : `${getBrandName(img.mark_id)} - ${img.original_name}`;
|
||||
return (
|
||||
<div key={`i-${i}`} className="text-[9px] bg-fuchsia-500/10 text-fuchsia-300 px-1 py-0.5 rounded flex items-center gap-1 truncate" title={displayName}>
|
||||
<ImageIcon size={8} className="shrink-0" /> <span className="truncate">{displayName}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{itemsCount > 4 && (
|
||||
<div className="text-[9px] text-neutral-500 font-medium pl-1">
|
||||
+{itemsCount - 4} más
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,321 +1,168 @@
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
CalendarDays, LayoutGrid, List, Plus, Settings2, Sparkles,
|
||||
BarChart3, TrendingUp
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
ContentPiece, ContentPillar, ContentStatus, Platform, CompanyProfile
|
||||
} from '../../types';
|
||||
import { DEFAULT_PILLARS } from '../../data/defaults';
|
||||
import { ContentFilters } from './ContentFilters';
|
||||
import React, { useState } from 'react';
|
||||
import { DndContext, DragEndEvent } from '@dnd-kit/core';
|
||||
import { CompanyProfile } from '../../types';
|
||||
import { ContentMeshSidebar } from './ContentMeshSidebar';
|
||||
import { CalendarView } from './CalendarView';
|
||||
import { GridView } from './GridView';
|
||||
import { ListView } from './ListView';
|
||||
import { ContentDetailModal } from './ContentDetailModal';
|
||||
import { PillarManager } from './PillarManager';
|
||||
|
||||
type ViewMode = 'calendar' | 'grid' | 'list';
|
||||
import { DailyTimelineView } from './DailyTimelineView';
|
||||
|
||||
interface ContentGridViewProps {
|
||||
company: CompanyProfile;
|
||||
pieces: ContentPiece[];
|
||||
pillars: ContentPillar[];
|
||||
onPiecesChange: (pieces: ContentPiece[]) => void;
|
||||
onPillarsChange: (pillars: ContentPillar[]) => void;
|
||||
onOpenProject: (projectId: string) => void;
|
||||
companies: CompanyProfile[];
|
||||
contentMesh: any;
|
||||
onContentMeshChange: (mesh: any) => void;
|
||||
onOpenProject: (projectId: string, companyId: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main content grid view with three visualization modes.
|
||||
* Orchestrates Calendar, Grid, and List views with shared filters.
|
||||
*/
|
||||
export const ContentGridView: React.FC<ContentGridViewProps> = ({
|
||||
company,
|
||||
pieces,
|
||||
pillars,
|
||||
onPiecesChange,
|
||||
onPillarsChange,
|
||||
companies,
|
||||
contentMesh,
|
||||
onContentMeshChange,
|
||||
onOpenProject,
|
||||
}) => {
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('calendar');
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [editingPiece, setEditingPiece] = useState<ContentPiece | null>(null);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [createDate, setCreateDate] = useState<string | undefined>();
|
||||
const [viewMode, setViewMode] = useState<'calendar' | 'timeline'>('calendar');
|
||||
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
||||
const [filterBrandId, setFilterBrandId] = useState<string>('');
|
||||
|
||||
// Grid view state
|
||||
const [gridPlatform, setGridPlatform] = useState<Platform>('instagram');
|
||||
const selectedFilterBrand = filterBrandId ? companies.find(c => c.id === filterBrandId) : null;
|
||||
const title = selectedFilterBrand ? `Malla de Contenidos - ${selectedFilterBrand.name}` : 'Malla de Contenidos Global';
|
||||
|
||||
// Filters
|
||||
const [selectedPillar, setSelectedPillar] = useState<string | null>(null);
|
||||
const [selectedStatus, setSelectedStatus] = useState<ContentStatus | null>(null);
|
||||
const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over) return;
|
||||
|
||||
// Filter pieces
|
||||
const filteredPieces = useMemo(() => {
|
||||
return pieces.filter(p => {
|
||||
if (selectedPillar && p.pillarId !== selectedPillar) return false;
|
||||
if (selectedStatus && p.status !== selectedStatus) return false;
|
||||
if (selectedPlatform && !p.platforms.includes(selectedPlatform)) return false;
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
const matches =
|
||||
p.title.toLowerCase().includes(q) ||
|
||||
(p.description || '').toLowerCase().includes(q) ||
|
||||
(p.caption || '').toLowerCase().includes(q);
|
||||
if (!matches) return false;
|
||||
if (active.data.current?.type === 'generated-media') {
|
||||
const { brandId, mediaItem } = active.data.current;
|
||||
|
||||
let targetDate = over.id as string;
|
||||
let targetStatus = 'draft'; // default status
|
||||
let targetTime = '12:00'; // default time
|
||||
|
||||
if (String(over.id).startsWith('timeline-')) {
|
||||
// Dropped into a specific time slot
|
||||
if (!selectedDate) return;
|
||||
targetDate = selectedDate;
|
||||
targetTime = String(over.id).replace('timeline-', '');
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [pieces, selectedPillar, selectedStatus, selectedPlatform, searchQuery]);
|
||||
|
||||
// Simple validation for YYYY-MM-DD
|
||||
const dateParts = targetDate.split('-');
|
||||
if (dateParts.length !== 3) return;
|
||||
const [year, month, day] = dateParts;
|
||||
|
||||
// Stats
|
||||
const stats = useMemo(() => {
|
||||
const total = pieces.length;
|
||||
const scheduled = pieces.filter(p => p.status === 'scheduled').length;
|
||||
const published = pieces.filter(p => p.status === 'published').length;
|
||||
const thisWeek = pieces.filter(p => {
|
||||
if (!p.scheduledDate) return false;
|
||||
const d = new Date(p.scheduledDate);
|
||||
const now = new Date();
|
||||
const weekEnd = new Date(now);
|
||||
weekEnd.setDate(weekEnd.getDate() + 7);
|
||||
return d >= now && d <= weekEnd;
|
||||
}).length;
|
||||
return { total, scheduled, published, thisWeek };
|
||||
}, [pieces]);
|
||||
const newMesh = JSON.parse(JSON.stringify(contentMesh || {})); // deep copy
|
||||
|
||||
// Handlers
|
||||
const handleCreatePiece = useCallback((date?: string) => {
|
||||
setCreateDate(date);
|
||||
setEditingPiece(null);
|
||||
setShowCreateModal(true);
|
||||
}, []);
|
||||
if (!newMesh[year]) newMesh[year] = {};
|
||||
if (!newMesh[year][month]) newMesh[year][month] = {};
|
||||
if (!newMesh[year][month][day]) newMesh[year][month][day] = { images: [], videos: [] };
|
||||
|
||||
const handleSavePiece = useCallback((piece: ContentPiece) => {
|
||||
piece.companyId = company.id;
|
||||
const exists = pieces.find(p => p.id === piece.id);
|
||||
if (exists) {
|
||||
onPiecesChange(pieces.map(p => p.id === piece.id ? piece : p));
|
||||
} else {
|
||||
// Apply the pre-set date if creating from calendar
|
||||
if (createDate && !piece.scheduledDate) {
|
||||
piece.scheduledDate = createDate;
|
||||
if (piece.status === 'idea') piece.status = 'draft';
|
||||
const format = mediaItem.type === 'video' ? 'videos' : 'images';
|
||||
|
||||
newMesh[year][month][day][format].push({
|
||||
id: `mesh-${Date.now()}`,
|
||||
mark_id: brandId,
|
||||
file_path: mediaItem.path,
|
||||
original_name: mediaItem.name || (mediaItem.path.split('/').pop() || mediaItem.path),
|
||||
status: targetStatus,
|
||||
time: targetTime,
|
||||
platforms: []
|
||||
});
|
||||
|
||||
onContentMeshChange(newMesh);
|
||||
}
|
||||
else if (active.data.current?.type === 'timeline-item' || active.data.current?.type === 'kanban-item') {
|
||||
// Reordering within the timeline
|
||||
const { item } = active.data.current;
|
||||
if (!selectedDate) return;
|
||||
|
||||
const newMesh = JSON.parse(JSON.stringify(contentMesh));
|
||||
const [year, month, day] = selectedDate.split('-');
|
||||
const dayData = newMesh[year]?.[month]?.[day] || { images: [], videos: [] };
|
||||
|
||||
const isVideo = dayData.videos?.some((v: any) => v.id === item.id);
|
||||
const isImage = dayData.images?.some((v: any) => v.id === item.id);
|
||||
const format = isVideo ? 'videos' : (isImage ? 'images' : null);
|
||||
if (!format) return;
|
||||
|
||||
const targetArray = newMesh[year][month][day][format];
|
||||
if (!targetArray) return;
|
||||
|
||||
const idx = targetArray.findIndex((v: any) => v.id === item.id);
|
||||
if (idx === -1) return;
|
||||
|
||||
if (String(over.id).startsWith('timeline-')) {
|
||||
const targetTime = String(over.id).replace('timeline-', '');
|
||||
targetArray[idx].time = targetTime;
|
||||
onContentMeshChange(newMesh);
|
||||
}
|
||||
onPiecesChange([...pieces, piece]);
|
||||
}
|
||||
setEditingPiece(null);
|
||||
setShowCreateModal(false);
|
||||
setCreateDate(undefined);
|
||||
}, [pieces, company.id, onPiecesChange, createDate]);
|
||||
|
||||
const handleDeletePiece = useCallback((id: string) => {
|
||||
onPiecesChange(pieces.filter(p => p.id !== id));
|
||||
setEditingPiece(null);
|
||||
setShowCreateModal(false);
|
||||
}, [pieces, onPiecesChange]);
|
||||
|
||||
const handleDropPiece = useCallback((pieceId: string, newDate: string) => {
|
||||
onPiecesChange(pieces.map(p =>
|
||||
p.id === pieceId
|
||||
? { ...p, scheduledDate: newDate, updatedAt: new Date().toISOString() }
|
||||
: p
|
||||
));
|
||||
}, [pieces, onPiecesChange]);
|
||||
|
||||
const handleStatusChange = useCallback((pieceId: string, newStatus: ContentStatus) => {
|
||||
onPiecesChange(pieces.map(p =>
|
||||
p.id === pieceId
|
||||
? { ...p, status: newStatus, updatedAt: new Date().toISOString() }
|
||||
: p
|
||||
));
|
||||
}, [pieces, onPiecesChange]);
|
||||
|
||||
const handlePieceClick = useCallback((piece: ContentPiece) => {
|
||||
setEditingPiece(piece);
|
||||
setShowCreateModal(true);
|
||||
}, []);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-hidden flex flex-col w-full relative bg-neutral-950">
|
||||
{/* Background pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.02]"
|
||||
style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '32px 32px' }}
|
||||
/>
|
||||
<DndContext onDragEnd={handleDragEnd}>
|
||||
<div className="flex-1 flex flex-col overflow-hidden w-full relative bg-neutral-950">
|
||||
{/* Background pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.02] pointer-events-none"
|
||||
style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '32px 32px' }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col overflow-hidden p-6">
|
||||
{/* ═══ Header ═══ */}
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
{/* Global Header (Full Width) */}
|
||||
<div className="relative z-10 p-4 px-6 border-b border-neutral-800/50 bg-neutral-900/40 flex items-center justify-between shrink-0">
|
||||
{/* Left: Brand Selector */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-600 to-fuchsia-600 flex items-center justify-center shadow-lg shadow-violet-900/20">
|
||||
<CalendarDays size={18} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-bold text-white tracking-tight">Malla de Contenidos</h1>
|
||||
<p className="text-[11px] text-neutral-500">
|
||||
{company.name} · {filteredPieces.length} de {pieces.length} piezas
|
||||
</p>
|
||||
</div>
|
||||
<label className="text-sm font-medium text-neutral-400">Marca:</label>
|
||||
<select
|
||||
value={filterBrandId}
|
||||
onChange={(e) => setFilterBrandId(e.target.value)}
|
||||
className="bg-neutral-950 border border-neutral-800 rounded-lg px-4 py-2 text-sm text-white focus:border-violet-500 focus:outline-none transition-colors min-w-[240px]"
|
||||
>
|
||||
<option value="">Todas las marcas</option>
|
||||
{companies.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Stats mini-bar */}
|
||||
<div className="hidden md:flex items-center gap-3 mr-3">
|
||||
<StatPill label="Esta semana" value={stats.thisWeek} icon={<TrendingUp size={10} />} color="#a78bfa" />
|
||||
<StatPill label="Programados" value={stats.scheduled} icon={<CalendarDays size={10} />} color="#60a5fa" />
|
||||
<StatPill label="Publicados" value={stats.published} icon={<BarChart3 size={10} />} color="#22c55e" />
|
||||
</div>
|
||||
|
||||
{/* Settings button */}
|
||||
<button
|
||||
onClick={() => setShowSettings(!showSettings)}
|
||||
className={`p-2 rounded-lg transition-all border ${
|
||||
showSettings
|
||||
? 'bg-violet-600/15 border-violet-500/30 text-violet-300'
|
||||
: 'bg-neutral-900/60 border-neutral-800 text-neutral-500 hover:text-white hover:border-neutral-700'
|
||||
}`}
|
||||
title="Configurar Pilares"
|
||||
>
|
||||
<Settings2 size={16} />
|
||||
</button>
|
||||
|
||||
{/* New content CTA */}
|
||||
<button
|
||||
onClick={() => handleCreatePiece()}
|
||||
className="flex items-center gap-1.5 px-4 py-2 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white rounded-xl text-xs font-semibold transition-all shadow-lg shadow-violet-900/20 hover:shadow-violet-900/40 hover:scale-[1.02] active:scale-[0.98]"
|
||||
>
|
||||
<Plus size={14} /> Nuevo Contenido
|
||||
</button>
|
||||
{/* Right: Title */}
|
||||
<div className="text-right">
|
||||
<h1 className="text-xl font-bold text-white tracking-tight">{title}</h1>
|
||||
<p className="text-xs text-neutral-400 mt-1">Arrastra el contenido finalizado al calendario.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ═══ Settings Panel (Pillar Manager) ═══ */}
|
||||
{showSettings && (
|
||||
<div className="mb-5 bg-neutral-900/40 border border-neutral-800/50 rounded-xl p-4 animate-in fade-in-0 slide-in-from-top-2 duration-200">
|
||||
<PillarManager pillars={pillars} onChange={onPillarsChange} />
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 flex overflow-hidden relative z-10">
|
||||
{/* Sidebar */}
|
||||
<ContentMeshSidebar companies={companies} filterBrandId={filterBrandId} />
|
||||
|
||||
{/* Main Area */}
|
||||
<div className="flex-1 overflow-hidden p-6">
|
||||
{viewMode === 'calendar' ? (
|
||||
<CalendarView
|
||||
contentMesh={contentMesh}
|
||||
onContentMeshChange={onContentMeshChange}
|
||||
companies={companies}
|
||||
filterBrandId={filterBrandId}
|
||||
onSelectDate={(date) => {
|
||||
setSelectedDate(date);
|
||||
setViewMode('timeline');
|
||||
}}
|
||||
/>
|
||||
) : selectedDate ? (
|
||||
<DailyTimelineView
|
||||
dateKey={selectedDate}
|
||||
contentMesh={contentMesh}
|
||||
onContentMeshChange={onContentMeshChange}
|
||||
companies={companies}
|
||||
filterBrandId={filterBrandId}
|
||||
onClose={() => {
|
||||
setSelectedDate(null);
|
||||
setViewMode('calendar');
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ═══ View Mode Toggle + Filters ═══ */}
|
||||
<div className="flex items-start justify-between gap-4 mb-5">
|
||||
{/* Filters */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<ContentFilters
|
||||
pillars={pillars}
|
||||
selectedPillar={selectedPillar}
|
||||
onPillarChange={setSelectedPillar}
|
||||
selectedStatus={selectedStatus}
|
||||
onStatusChange={setSelectedStatus}
|
||||
selectedPlatform={selectedPlatform}
|
||||
onPlatformChange={setSelectedPlatform}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* View toggle */}
|
||||
<div className="flex bg-neutral-900 border border-neutral-800 rounded-xl p-0.5 shrink-0">
|
||||
{([
|
||||
{ id: 'calendar' as ViewMode, icon: <CalendarDays size={14} />, label: 'Calendario' },
|
||||
{ id: 'grid' as ViewMode, icon: <LayoutGrid size={14} />, label: 'Grid' },
|
||||
{ id: 'list' as ViewMode, icon: <List size={14} />, label: 'Lista' },
|
||||
]).map(v => (
|
||||
<button
|
||||
key={v.id}
|
||||
onClick={() => setViewMode(v.id)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
viewMode === v.id
|
||||
? 'bg-neutral-800 text-white shadow-sm'
|
||||
: 'text-neutral-500 hover:text-neutral-300'
|
||||
}`}
|
||||
title={v.label}
|
||||
>
|
||||
{v.icon}
|
||||
<span className="hidden sm:inline">{v.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ═══ View Content ═══ */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{viewMode === 'calendar' && (
|
||||
<CalendarView
|
||||
pieces={filteredPieces}
|
||||
pillars={pillars}
|
||||
onPieceClick={handlePieceClick}
|
||||
onCreatePiece={(date) => handleCreatePiece(date)}
|
||||
onDropPiece={handleDropPiece}
|
||||
/>
|
||||
)}
|
||||
{viewMode === 'grid' && (
|
||||
<GridView
|
||||
pieces={filteredPieces}
|
||||
pillars={pillars}
|
||||
onPieceClick={handlePieceClick}
|
||||
platform={gridPlatform}
|
||||
onPlatformChange={setGridPlatform}
|
||||
/>
|
||||
)}
|
||||
{viewMode === 'list' && (
|
||||
<ListView
|
||||
pieces={filteredPieces}
|
||||
pillars={pillars}
|
||||
onPieceClick={handlePieceClick}
|
||||
onStatusChange={handleStatusChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{filteredPieces.length === 0 && pieces.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center h-full text-neutral-600">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-600/10 to-fuchsia-600/10 border border-violet-500/10 flex items-center justify-center mb-4">
|
||||
<Sparkles size={28} className="text-violet-500/40" />
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-neutral-400 mb-1">Tu malla está vacía</h3>
|
||||
<p className="text-xs text-neutral-600 text-center max-w-xs mb-4">
|
||||
Empieza a planificar tu contenido creando piezas y organizándolas en el calendario
|
||||
</p>
|
||||
<button
|
||||
onClick={() => handleCreatePiece()}
|
||||
className="flex items-center gap-1.5 px-4 py-2 bg-violet-600/15 hover:bg-violet-600/25 text-violet-400 text-xs font-semibold rounded-xl border border-violet-500/20 hover:border-violet-500/40 transition-all"
|
||||
>
|
||||
<Plus size={14} /> Crear primera pieza
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ═══ Content Detail Modal ═══ */}
|
||||
{showCreateModal && (
|
||||
<ContentDetailModal
|
||||
piece={editingPiece}
|
||||
pillars={pillars}
|
||||
projects={company.projects || []}
|
||||
onSave={handleSavePiece}
|
||||
onDelete={handleDeletePiece}
|
||||
onClose={() => { setShowCreateModal(false); setEditingPiece(null); setCreateDate(undefined); }}
|
||||
onOpenProject={onOpenProject}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</DndContext>
|
||||
);
|
||||
};
|
||||
|
||||
/** Mini stat pill for the header */
|
||||
const StatPill: React.FC<{ label: string; value: number; icon: React.ReactNode; color: string }> = ({
|
||||
label, value, icon, color,
|
||||
}) => (
|
||||
<div
|
||||
className="flex items-center gap-1.5 px-2 py-1 rounded-lg border text-[10px] font-medium"
|
||||
style={{ borderColor: `${color}20`, color, backgroundColor: `${color}08` }}
|
||||
>
|
||||
{icon}
|
||||
<span className="font-bold">{value}</span>
|
||||
<span className="opacity-60">{label}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import React, { useState } from 'react';
|
||||
import { CompanyProfile } from '../../types';
|
||||
import { Search } from 'lucide-react';
|
||||
import { GeneratedMediaList } from './GeneratedMediaList';
|
||||
|
||||
interface ContentMeshSidebarProps {
|
||||
companies: CompanyProfile[];
|
||||
filterBrandId: string;
|
||||
}
|
||||
|
||||
export const ContentMeshSidebar: React.FC<ContentMeshSidebarProps> = ({ companies, filterBrandId }) => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
return (
|
||||
<div className="w-80 border-r border-neutral-800 bg-neutral-900/60 flex flex-col h-full overflow-hidden shrink-0">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-neutral-800">
|
||||
<h2 className="text-sm font-semibold text-white mb-4">Contenido Generado</h2>
|
||||
|
||||
<div className="space-y-3"> {/* Search */}
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Search size={14} className="text-neutral-500" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-neutral-950 border border-neutral-800 rounded-lg pl-9 pr-3 py-2 text-sm text-white focus:border-violet-500 focus:outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Media List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
|
||||
<GeneratedMediaList brandId={filterBrandId} companies={companies} searchQuery={searchQuery} draggable={true} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,391 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ChevronLeft, Play, Image as ImageIcon, FolderOpen, Instagram, Music, Youtube, Facebook, Twitter, ChevronDown, ChevronRight, Moon } from 'lucide-react';
|
||||
import { useDroppable, useDraggable } from '@dnd-kit/core';
|
||||
import { CompanyProfile } from '../../types';
|
||||
|
||||
interface DailyTimelineViewProps {
|
||||
dateKey: string;
|
||||
contentMesh: any;
|
||||
onContentMeshChange: (mesh: any) => void;
|
||||
companies: CompanyProfile[];
|
||||
filterBrandId?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const HOURS = Array.from({ length: 24 }, (_, i) => i);
|
||||
const SLOT_HEIGHT = 80; // 80px per hour
|
||||
const HALF_SLOT = SLOT_HEIGHT / 2;
|
||||
|
||||
const PLATFORMS = [
|
||||
{ id: 'instagram', icon: Instagram, color: 'text-pink-500', bg: 'bg-pink-500/20' },
|
||||
{ id: 'tiktok', icon: Music, color: 'text-cyan-400', bg: 'bg-cyan-500/20' },
|
||||
{ id: 'youtube', icon: Youtube, color: 'text-red-500', bg: 'bg-red-500/20' },
|
||||
{ id: 'facebook', icon: Facebook, color: 'text-blue-500', bg: 'bg-blue-500/20' },
|
||||
{ id: 'twitter', icon: Twitter, color: 'text-neutral-300', bg: 'bg-neutral-500/20' },
|
||||
];
|
||||
|
||||
export const DailyTimelineView: React.FC<DailyTimelineViewProps> = ({
|
||||
dateKey,
|
||||
contentMesh,
|
||||
onContentMeshChange,
|
||||
companies,
|
||||
filterBrandId,
|
||||
onClose
|
||||
}) => {
|
||||
const [year, month, day] = dateKey.split('-');
|
||||
const dayData = contentMesh?.[year]?.[month]?.[day] || { images: [], videos: [] };
|
||||
|
||||
const allItems = [...(dayData.videos || []), ...(dayData.images || [])]
|
||||
.filter(i => !filterBrandId || i.mark_id === filterBrandId);
|
||||
|
||||
const selectedBrand = filterBrandId ? companies.find(c => c.id === filterBrandId) : null;
|
||||
const getBrandName = (brandId: string) => companies.find(c => c.id === brandId)?.name || 'Marca desconocida';
|
||||
|
||||
const [workspacePath, setWorkspacePath] = useState('');
|
||||
const scrollRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isMorningCollapsed, setIsMorningCollapsed] = useState(true);
|
||||
const startHour = isMorningCollapsed ? 8 : 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (window.electronAPI) {
|
||||
window.electronAPI.fs.getWorkspacePath().then(setWorkspacePath);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
// Offset so 12 PM is clearly visible
|
||||
const targetScroll = (12 - startHour) * SLOT_HEIGHT - 20;
|
||||
scrollRef.current.scrollTop = Math.max(0, targetScroll);
|
||||
}
|
||||
}, [startHour]);
|
||||
|
||||
const getUrl = (absolutePath: string) => {
|
||||
if (!workspacePath) return '';
|
||||
const relPath = absolutePath.replace(workspacePath, '');
|
||||
return `http://localhost:3000/workspace${relPath.startsWith('/') ? '' : '/'}${relPath}`;
|
||||
};
|
||||
|
||||
const handleOpenPath = async (filePath: string) => {
|
||||
if (window.electronAPI) {
|
||||
await window.electronAPI.fs.showItemInFolder(filePath);
|
||||
}
|
||||
};
|
||||
|
||||
const updateItem = (itemId: string, updater: (item: any) => void) => {
|
||||
const newMesh = JSON.parse(JSON.stringify(contentMesh));
|
||||
const isVideo = dayData.videos?.some((v: any) => v.id === itemId);
|
||||
const isImage = dayData.images?.some((v: any) => v.id === itemId);
|
||||
const format = isVideo ? 'videos' : (isImage ? 'images' : null);
|
||||
|
||||
if (format) {
|
||||
const targetArray = newMesh[year][month][day][format];
|
||||
const idx = targetArray.findIndex((v: any) => v.id === itemId);
|
||||
if (idx !== -1) {
|
||||
updater(targetArray[idx]);
|
||||
onContentMeshChange(newMesh);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleStatus = (itemId: string, currentStatus: string) => {
|
||||
const nextStatus = currentStatus === 'draft' ? 'scheduled' : currentStatus === 'scheduled' ? 'posted' : 'draft';
|
||||
updateItem(itemId, item => { item.status = nextStatus; });
|
||||
};
|
||||
|
||||
const handleTogglePlatform = (itemId: string, platform: string) => {
|
||||
updateItem(itemId, item => {
|
||||
const current = item.platforms || [];
|
||||
if (current.includes(platform)) {
|
||||
item.platforms = current.filter((p: string) => p !== platform);
|
||||
} else {
|
||||
item.platforms = [...current, platform];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Metrics for header
|
||||
const totalPosts = allItems.length;
|
||||
let platformCounts: Record<string, number> = {};
|
||||
allItems.forEach(i => {
|
||||
const pList = i.platforms || [];
|
||||
pList.forEach((p: string) => {
|
||||
platformCounts[p] = (platformCounts[p] || 0) + 1;
|
||||
});
|
||||
});
|
||||
|
||||
// Date formatting for header
|
||||
const dateObj = new Date(`${year}-${month}-${day}T12:00:00`); // mid-day to avoid timezone shifting
|
||||
const formatter = new Intl.DateTimeFormat('es-ES', { weekday: 'long', day: 'numeric', month: 'short' });
|
||||
const formattedDate = formatter.format(dateObj).replace(',', '');
|
||||
const capitalizedDate = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col overflow-hidden animate-in fade-in bg-neutral-900 border border-neutral-800 rounded-2xl shadow-xl relative">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-neutral-800 flex items-center justify-between bg-neutral-900/90 backdrop-blur shrink-0 z-20 absolute top-0 left-0 right-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors bg-neutral-950 border border-neutral-800 shrink-0"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
|
||||
<div className="w-px h-8 bg-neutral-800 hidden sm:block"></div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{selectedBrand && selectedBrand.logo && (
|
||||
<img src={selectedBrand.logo} alt={selectedBrand.name} className="w-8 h-8 rounded object-cover" />
|
||||
)}
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white tracking-tight">
|
||||
{capitalizedDate} {selectedBrand ? `· ${selectedBrand.name}` : ''}
|
||||
</h2>
|
||||
<div className="flex flex-wrap items-center gap-3 mt-0.5">
|
||||
<span className="text-xs text-neutral-400 font-medium">{totalPosts} publicaciones programadas</span>
|
||||
<div className="flex gap-1.5">
|
||||
{Object.entries(platformCounts).map(([plat, count]) => {
|
||||
const pConfig = PLATFORMS.find(p => p.id === plat);
|
||||
if (!pConfig) return null;
|
||||
const Icon = pConfig.icon;
|
||||
return (
|
||||
<div key={plat} className={`flex items-center gap-1 text-[10px] font-bold px-1.5 py-0.5 rounded-full ${pConfig.bg} ${pConfig.color}`} title={plat}>
|
||||
<Icon size={10} /> {count}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline Scroll Area */}
|
||||
<div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar pt-[80px] bg-neutral-950/50">
|
||||
<div className="relative min-w-[600px] mx-auto max-w-4xl px-4 pb-12" style={{ height: `${(24 - startHour) * SLOT_HEIGHT + 60}px` }}>
|
||||
|
||||
{/* Collapsed Morning Bar */}
|
||||
<div className="mb-4 pt-4">
|
||||
<button
|
||||
onClick={() => setIsMorningCollapsed(!isMorningCollapsed)}
|
||||
className="w-full flex items-center justify-between p-3 rounded-xl bg-neutral-900 border border-neutral-800 text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<Moon size={16} className="text-indigo-400" />
|
||||
12 AM – 7 AM · <span className="text-neutral-500 font-normal">Oculto por defecto</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
{isMorningCollapsed ? 'Expandir' : 'Colapsar'}
|
||||
{isMorningCollapsed ? <ChevronDown size={14} /> : <ChevronLeft size={14} className="rotate-90" />}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative" style={{ height: `${(24 - startHour) * SLOT_HEIGHT}px` }}>
|
||||
{/* Time axis background lines */}
|
||||
{HOURS.slice(startHour).map(hour => (
|
||||
<div key={hour} className="absolute w-full border-t border-neutral-800/40 pointer-events-none" style={{ top: `${(hour - startHour) * SLOT_HEIGHT}px` }}>
|
||||
<div className="absolute -top-[9px] left-0 text-[11px] font-medium text-neutral-500 bg-neutral-950/80 px-1">
|
||||
{hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Droppable Slots (every 30 mins) */}
|
||||
<div className="absolute top-0 bottom-0 left-[60px] right-0 flex flex-col z-0">
|
||||
{HOURS.slice(startHour).map(hour => (
|
||||
<React.Fragment key={`slots-${hour}`}>
|
||||
<TimeSlot timeStr={`${hour.toString().padStart(2, '0')}:00`} height={HALF_SLOT} />
|
||||
<TimeSlot timeStr={`${hour.toString().padStart(2, '0')}:30`} height={HALF_SLOT} />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Draggable Items */}
|
||||
<div className="absolute top-0 bottom-0 left-[70px] right-2 z-10 pointer-events-none">
|
||||
{allItems.map((item, index) => {
|
||||
// Filter out items in collapsed morning
|
||||
const [h] = (item.time || '12:00').split(':').map(Number);
|
||||
if (isMorningCollapsed && h < 8) return null;
|
||||
|
||||
return (
|
||||
<TimelineItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
brandName={getBrandName(item.mark_id)}
|
||||
getUrl={getUrl}
|
||||
onOpenFolder={handleOpenPath}
|
||||
onToggleStatus={handleToggleStatus}
|
||||
onTogglePlatform={handleTogglePlatform}
|
||||
startHour={startHour}
|
||||
overlapOffset={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PEAK_HOURS = ['12:00', '19:00'];
|
||||
|
||||
const TimeSlot: React.FC<{ timeStr: string; height: number }> = ({ timeStr, height }) => {
|
||||
const { setNodeRef, isOver } = useDroppable({ id: `timeline-${timeStr}` });
|
||||
const isPeak = PEAK_HOURS.includes(timeStr);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
className={`w-full border-b border-dashed relative transition-colors ${isOver ? 'bg-violet-500/10' : ''} ${isPeak ? 'border-violet-500/40 bg-violet-500/5' : 'border-neutral-800/20'}`}
|
||||
style={{ height: `${height}px` }}
|
||||
>
|
||||
{isPeak && !isOver && (
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2 text-[10px] font-bold text-violet-400/80 flex items-center gap-1 bg-violet-500/10 px-2 py-0.5 rounded-full pointer-events-none">
|
||||
🔥 Buena hora
|
||||
</div>
|
||||
)}
|
||||
{isOver && (
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2 text-[10px] font-bold text-violet-300 pointer-events-none">
|
||||
Suelta el contenido aquí
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TimelineItem: React.FC<{
|
||||
item: any;
|
||||
brandName: string;
|
||||
getUrl: (path: string) => string;
|
||||
onOpenFolder: (path: string) => void;
|
||||
onToggleStatus: (id: string, currentStatus: string) => void;
|
||||
onTogglePlatform: (id: string, platform: string) => void;
|
||||
startHour: number;
|
||||
overlapOffset: number;
|
||||
}> = ({ item, brandName, getUrl, onOpenFolder, onToggleStatus, onTogglePlatform, startHour, overlapOffset }) => {
|
||||
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
|
||||
id: `timeline-${item.id}`,
|
||||
data: {
|
||||
type: 'timeline-item',
|
||||
item
|
||||
}
|
||||
});
|
||||
|
||||
// Calculate position
|
||||
let topPosition = 0;
|
||||
if (item.time) {
|
||||
const [h, m] = item.time.split(':').map(Number);
|
||||
topPosition = (h - startHour + m / 60) * SLOT_HEIGHT;
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
draft: { label: 'Borrador', color: 'text-neutral-400 bg-neutral-800 border-neutral-700 hover:bg-neutral-700' },
|
||||
scheduled: { label: 'Programado', color: 'text-blue-400 bg-blue-900/30 border-blue-800 hover:bg-blue-900/50' },
|
||||
posted: { label: 'Publicado', color: 'text-green-400 bg-green-900/30 border-green-800 hover:bg-green-900/50' },
|
||||
};
|
||||
|
||||
const currentStatus = item.status || 'draft';
|
||||
const statusUI = statusConfig[currentStatus as keyof typeof statusConfig] || statusConfig.draft;
|
||||
const isPosted = currentStatus === 'posted';
|
||||
|
||||
const style = {
|
||||
top: `${topPosition}px`,
|
||||
transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
|
||||
zIndex: isDragging ? 50 : (isPosted ? 10 : 20),
|
||||
opacity: isDragging ? 0.9 : (isPosted ? 0.6 : 1),
|
||||
};
|
||||
|
||||
const isVideo = item.file_path.match(/\.(mp4|webm|mov)$/i);
|
||||
const fileUrl = getUrl(item.file_path);
|
||||
const currentPlatforms = item.platforms || [];
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`absolute left-0 pointer-events-auto flex items-stretch bg-neutral-900 border ${isPosted ? 'border-neutral-800' : 'border-neutral-700'} rounded-xl overflow-hidden transition-shadow shadow-lg ${isDragging ? 'shadow-2xl shadow-violet-900/30 ring-2 ring-violet-500' : ''} hover:border-neutral-500 w-[340px] h-[64px]`}
|
||||
>
|
||||
{/* Thumbnail Area - acts as drag handle */}
|
||||
<div
|
||||
className="w-[64px] h-full bg-neutral-950 relative flex items-center justify-center shrink-0 border-r border-neutral-800 cursor-grab active:cursor-grabbing group"
|
||||
{...listeners}
|
||||
{...attributes}
|
||||
>
|
||||
{isVideo ? (
|
||||
<video
|
||||
src={fileUrl}
|
||||
className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity pointer-events-none"
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.pause();
|
||||
e.currentTarget.currentTime = 0;
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={fileUrl}
|
||||
alt={item.original_name}
|
||||
className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity pointer-events-none"
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info Area */}
|
||||
<div className="flex-1 min-w-0 p-2.5 flex flex-col justify-between">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[11px] font-bold text-violet-400">{item.time || '12:00'}</span>
|
||||
{/* Platform toggles inline */}
|
||||
<div className="flex items-center gap-0.5">
|
||||
{PLATFORMS.map(p => {
|
||||
const Icon = p.icon;
|
||||
const isActive = currentPlatforms.includes(p.id);
|
||||
return (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => onTogglePlatform(item.id, p.id)}
|
||||
className={`p-1 rounded transition-colors ${isActive ? p.bg + ' ' + p.color : 'text-neutral-600 hover:bg-neutral-800 hover:text-neutral-400'}`}
|
||||
title={p.id}
|
||||
>
|
||||
<Icon size={10} />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => onToggleStatus(item.id, currentStatus)}
|
||||
className={`px-2 py-0.5 text-[9px] font-bold border rounded-full transition-colors shrink-0 ${statusUI.color}`}
|
||||
>
|
||||
{statusUI.label}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<button
|
||||
onClick={() => onOpenFolder(item.file_path)}
|
||||
className="p-1 rounded bg-neutral-800 text-neutral-400 hover:text-white transition-colors shrink-0"
|
||||
title="Abrir en Finder"
|
||||
>
|
||||
<FolderOpen size={10} />
|
||||
</button>
|
||||
<h4 className={`text-xs font-medium truncate ${isPosted ? 'text-neutral-500 line-through' : 'text-white'}`} title={item.original_name}>
|
||||
{item.original_name}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,270 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Play, Image as ImageIcon, FolderOpen, Edit2, Check, X } from 'lucide-react';
|
||||
import { useDraggable } from '@dnd-kit/core';
|
||||
|
||||
export interface MediaItem {
|
||||
path: string;
|
||||
date: string;
|
||||
name: string;
|
||||
type: 'video' | 'image';
|
||||
}
|
||||
|
||||
interface GeneratedMediaListProps {
|
||||
brandId?: string;
|
||||
companies?: any[];
|
||||
searchQuery?: string;
|
||||
draggable?: boolean;
|
||||
}
|
||||
|
||||
const DraggableMediaCard: React.FC<{
|
||||
item: MediaItem;
|
||||
brandId: string;
|
||||
draggable: boolean;
|
||||
getUrl: (path: string) => string;
|
||||
onOpenFolder: (path: string) => void;
|
||||
onRename: (oldPath: string, newName: string) => Promise<void>;
|
||||
}> = ({ item, brandId, draggable, getUrl, onOpenFolder, onRename }) => {
|
||||
const fileName = item.path.split('/').pop() || item.path;
|
||||
const displayName = item.name || fileName;
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editName, setEditName] = useState(displayName);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// dnd-kit logic
|
||||
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
|
||||
id: `media-${item.path}`,
|
||||
data: {
|
||||
type: 'generated-media',
|
||||
brandId,
|
||||
mediaItem: item
|
||||
},
|
||||
disabled: !draggable || isEditing,
|
||||
});
|
||||
|
||||
const style = transform ? {
|
||||
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
||||
zIndex: isDragging ? 50 : 1,
|
||||
opacity: isDragging ? 0.8 : 1,
|
||||
} : undefined;
|
||||
|
||||
const handleSaveRename = async () => {
|
||||
if (!editName.trim() || editName === displayName) {
|
||||
setIsEditing(false);
|
||||
return;
|
||||
}
|
||||
setIsSaving(true);
|
||||
await onRename(item.path, editName);
|
||||
setIsSaving(false);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`group relative bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden hover:border-violet-500/50 transition-colors ${isDragging ? 'shadow-2xl shadow-violet-500/20' : ''}`}
|
||||
>
|
||||
{/* Thumbnail Area - acts as drag handle if draggable */}
|
||||
<div
|
||||
className={`aspect-video bg-neutral-950 relative flex items-center justify-center overflow-hidden ${draggable && !isEditing ? 'cursor-grab active:cursor-grabbing' : ''}`}
|
||||
{...(draggable && !isEditing ? listeners : {})}
|
||||
{...(draggable && !isEditing ? attributes : {})}
|
||||
>
|
||||
{item.type === 'video' ? (
|
||||
<video
|
||||
src={getUrl(item.path)}
|
||||
className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity pointer-events-none"
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.pause();
|
||||
e.currentTarget.currentTime = 0;
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={getUrl(item.path)}
|
||||
alt={displayName}
|
||||
className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity pointer-events-none"
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
<div className="absolute top-2 right-2 px-2 py-1 bg-black/60 rounded text-[10px] font-medium text-white backdrop-blur-sm uppercase">
|
||||
{item.type}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Area */}
|
||||
<div className="p-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
{isEditing ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<input
|
||||
type="text"
|
||||
value={editName}
|
||||
onChange={e => setEditName(e.target.value)}
|
||||
className="w-full bg-neutral-950 text-white text-sm px-2 py-1 rounded border border-violet-500/50 outline-none"
|
||||
autoFocus
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter') handleSaveRename();
|
||||
if (e.key === 'Escape') {
|
||||
setEditName(displayName);
|
||||
setIsEditing(false);
|
||||
}
|
||||
}}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
<button onClick={handleSaveRename} disabled={isSaving} className="text-green-500 hover:bg-green-500/20 p-1 rounded">
|
||||
<Check size={14} />
|
||||
</button>
|
||||
<button onClick={() => { setEditName(displayName); setIsEditing(false); }} disabled={isSaving} className="text-red-500 hover:bg-red-500/20 p-1 rounded">
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 group/edit">
|
||||
<p className="text-sm font-medium text-white truncate flex-1" title={displayName}>
|
||||
{displayName}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="opacity-0 group-hover/edit:opacity-100 p-1 text-neutral-400 hover:text-white transition-opacity"
|
||||
title="Renombrar"
|
||||
>
|
||||
<Edit2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-neutral-500 mt-0.5">
|
||||
{new Date(item.date).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
{!isEditing && (
|
||||
<button
|
||||
onClick={() => onOpenFolder(item.path)}
|
||||
title="Abrir en Finder"
|
||||
className="shrink-0 p-1.5 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded-lg transition-colors"
|
||||
>
|
||||
<FolderOpen size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const GeneratedMediaList: React.FC<GeneratedMediaListProps> = ({ brandId, companies, searchQuery, draggable = false }) => {
|
||||
const [media, setMedia] = useState<MediaItem[]>([]);
|
||||
const [workspacePath, setWorkspacePath] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchMedia = async () => {
|
||||
if (window.electronAPI) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const wp = await window.electronAPI.fs.getWorkspacePath();
|
||||
setWorkspacePath(wp);
|
||||
|
||||
let allMedia: MediaItem[] = [];
|
||||
const brandsToFetch = brandId ? [brandId] : (companies?.map(c => c.id) || []);
|
||||
|
||||
for (const bid of brandsToFetch) {
|
||||
try {
|
||||
const videos = await window.electronAPI.fs.getGeneratedMedia(bid, 'video');
|
||||
const images = await window.electronAPI.fs.getGeneratedMedia(bid, 'image');
|
||||
|
||||
allMedia = [
|
||||
...allMedia,
|
||||
...videos.map((v: any) => ({ ...v, type: 'video' as const, brandId: bid })),
|
||||
...images.map((img: any) => ({ ...img, type: 'image' as const, brandId: bid }))
|
||||
];
|
||||
} catch (e) {
|
||||
console.error(`Error fetching media for brand ${bid}`, e);
|
||||
}
|
||||
}
|
||||
|
||||
allMedia.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
setMedia(allMedia);
|
||||
} catch (err) {
|
||||
console.error('Error fetching generated media:', err);
|
||||
}
|
||||
setLoading(false);
|
||||
} else {
|
||||
setMedia([]);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMedia();
|
||||
}, [brandId]);
|
||||
|
||||
const handleOpenPath = async (filePath: string) => {
|
||||
if (window.electronAPI) {
|
||||
await window.electronAPI.fs.showItemInFolder(filePath);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRename = async (oldPath: string, newName: string) => {
|
||||
if (!window.electronAPI || !brandId) return;
|
||||
|
||||
// Find the item to know its type
|
||||
const item = media.find(m => m.path === oldPath);
|
||||
if (!item) return;
|
||||
|
||||
try {
|
||||
const newPath = await window.electronAPI.fs.renameGeneratedMedia(brandId, item.type, oldPath, newName);
|
||||
if (newPath) {
|
||||
await fetchMedia();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Rename failed", e);
|
||||
}
|
||||
};
|
||||
|
||||
const getUrl = (absolutePath: string) => {
|
||||
if (!workspacePath) return '';
|
||||
const relPath = absolutePath.replace(workspacePath, '');
|
||||
return `http://localhost:3000/workspace${relPath.startsWith('/') ? '' : '/'}${relPath}`;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-neutral-500 text-sm p-4">Cargando...</div>;
|
||||
}
|
||||
|
||||
|
||||
const filteredMedia = media.filter(item => {
|
||||
if (!searchQuery) return true;
|
||||
const name = item.name || item.path.split('/').pop() || '';
|
||||
return name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
});
|
||||
|
||||
if (filteredMedia.length === 0) {
|
||||
return (
|
||||
<div className="bg-neutral-900/50 border border-neutral-800 rounded-xl p-8 text-center text-neutral-500 text-sm">
|
||||
No se encontró contenido.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`grid gap-4 ${draggable ? 'grid-cols-1' : 'grid-cols-2'}`}>
|
||||
{filteredMedia.map((item, idx) => (
|
||||
<DraggableMediaCard
|
||||
key={`${item.path}-${idx}`}
|
||||
item={item}
|
||||
brandId={brandId}
|
||||
draggable={draggable}
|
||||
getUrl={getUrl}
|
||||
onOpenFolder={handleOpenPath}
|
||||
onRename={handleRename}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -21,9 +21,11 @@ interface BatchDataPanelProps {
|
||||
templateFormat: 'video' | 'image';
|
||||
onSetBackgrounds: (files: File[]) => void;
|
||||
onUpdateField: (index: number, fieldId: string, value: string) => void;
|
||||
onUpdateVariation: (index: number, variationId: string | null) => void;
|
||||
onImportCSV: (file: File) => Promise<{ matched: number; unmatched: number }>;
|
||||
onRemovePiece: (index: number) => void;
|
||||
backgroundFiles: File[];
|
||||
availableVariations: { id: string; name: string }[];
|
||||
}
|
||||
|
||||
/** Get only text-type editable slots (for table columns) */
|
||||
@@ -38,9 +40,11 @@ export const BatchDataPanel: React.FC<BatchDataPanelProps> = ({
|
||||
templateFormat,
|
||||
onSetBackgrounds,
|
||||
onUpdateField,
|
||||
onUpdateVariation,
|
||||
onImportCSV,
|
||||
onRemovePiece,
|
||||
backgroundFiles,
|
||||
availableVariations,
|
||||
}) => {
|
||||
const bgInputRef = useRef<HTMLInputElement>(null);
|
||||
const csvInputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -145,7 +149,7 @@ export const BatchDataPanel: React.FC<BatchDataPanelProps> = ({
|
||||
</div>
|
||||
|
||||
{/* ── Text Data Table ── */}
|
||||
{textSlots.length > 0 && N > 0 && (
|
||||
{(textSlots.length > 0 || availableVariations.length > 0) && N > 0 && (
|
||||
<div className="space-y-2">
|
||||
{/* Table header with CSV import */}
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -185,11 +189,14 @@ export const BatchDataPanel: React.FC<BatchDataPanelProps> = ({
|
||||
<div
|
||||
className="grid gap-px bg-neutral-800/50 text-[9px] text-neutral-500 font-bold uppercase tracking-wider"
|
||||
style={{
|
||||
gridTemplateColumns: `36px 90px ${textSlots.map(() => '1fr').join(' ')} 28px`,
|
||||
gridTemplateColumns: `36px 90px ${availableVariations.length > 0 ? '100px ' : ''}${textSlots.map(() => '1fr').join(' ')} 28px`,
|
||||
}}
|
||||
>
|
||||
<div className="bg-neutral-900/80 px-2 py-1.5 text-center">#</div>
|
||||
<div className="bg-neutral-900/80 px-2 py-1.5">Fondo</div>
|
||||
{availableVariations.length > 0 && (
|
||||
<div className="bg-neutral-900/80 px-2 py-1.5">Variación</div>
|
||||
)}
|
||||
{textSlots.map(({ field }) => (
|
||||
<div key={field.id} className="bg-neutral-900/80 px-2 py-1.5 truncate">
|
||||
{field.label}
|
||||
@@ -208,7 +215,7 @@ export const BatchDataPanel: React.FC<BatchDataPanelProps> = ({
|
||||
hasErrors ? 'bg-red-500/5' : 'bg-neutral-800/20'
|
||||
}`}
|
||||
style={{
|
||||
gridTemplateColumns: `36px 90px ${textSlots.map(() => '1fr').join(' ')} 28px`,
|
||||
gridTemplateColumns: `36px 90px ${availableVariations.length > 0 ? '100px ' : ''}${textSlots.map(() => '1fr').join(' ')} 28px`,
|
||||
}}
|
||||
>
|
||||
{/* Row number */}
|
||||
@@ -223,6 +230,22 @@ export const BatchDataPanel: React.FC<BatchDataPanelProps> = ({
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Variation Selector */}
|
||||
{availableVariations.length > 0 && (
|
||||
<div className="bg-neutral-900/60 px-0.5 py-0.5 flex items-center">
|
||||
<select
|
||||
value={piece.variationId || ''}
|
||||
onChange={(e) => onUpdateVariation(piece.index, e.target.value || null)}
|
||||
className="w-full bg-transparent px-1.5 py-1 rounded text-[10px] text-neutral-300 focus:outline-none focus:bg-neutral-800/50 transition-colors"
|
||||
>
|
||||
<option value="">Layout Default</option>
|
||||
{availableVariations.map(v => (
|
||||
<option key={v.id} value={v.id}>{v.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Text fields */}
|
||||
{textSlots.map(({ field }) => {
|
||||
const val = piece.fieldData[field.id] || '';
|
||||
@@ -279,8 +302,8 @@ export const BatchDataPanel: React.FC<BatchDataPanelProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Empty state (no text fields) ── */}
|
||||
{textSlots.length === 0 && N > 0 && (
|
||||
{/* ── Empty state (no text fields and no variations) ── */}
|
||||
{textSlots.length === 0 && availableVariations.length === 0 && N > 0 && (
|
||||
<div className="text-center py-4">
|
||||
<p className="text-[10px] text-neutral-500">
|
||||
Esta plantilla no tiene campos de texto editables.
|
||||
|
||||
@@ -28,56 +28,66 @@ export const GenerateZone: React.FC<GenerateZoneProps> = ({
|
||||
const canGenerate = !!selectedTemplate && !!selectedBrand;
|
||||
|
||||
return (
|
||||
<div className="bg-neutral-900/50 border border-neutral-800/50 rounded-2xl p-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="w-6 h-6 rounded-lg bg-gradient-to-br from-violet-600/20 to-fuchsia-600/20 flex items-center justify-center">
|
||||
<Sparkles size={14} className="text-violet-400" />
|
||||
<div className="bg-neutral-900/50 border border-neutral-800/50 rounded-2xl p-6 flex items-center justify-between gap-8">
|
||||
{/* Left: Info */}
|
||||
<div className="flex flex-col gap-1.5 shrink-0 min-w-[220px]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-600/20 to-fuchsia-600/20 flex items-center justify-center border border-violet-500/20 shadow-inner">
|
||||
<Sparkles size={18} className="text-violet-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-white">Generar contenido</h2>
|
||||
<p className="text-xs text-neutral-500 mt-0.5">
|
||||
Arrastra una plantilla y una marca
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-sm font-bold text-white">Generar contenido</h2>
|
||||
</div>
|
||||
<p className="text-[11px] text-neutral-500 mb-5 ml-8">
|
||||
Arrastra una plantilla y una marca, o toca para elegir.
|
||||
</p>
|
||||
|
||||
{/* Slots row */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Middle: Slots row */}
|
||||
<div className="flex items-center justify-center gap-6 flex-1 max-w-[800px]">
|
||||
{/* Template slot */}
|
||||
<DropSlot
|
||||
type="template"
|
||||
item={selectedTemplate}
|
||||
onClear={onClearTemplate}
|
||||
onClick={onClickTemplateSlot}
|
||||
/>
|
||||
<div className="flex-1 max-w-[320px]">
|
||||
<DropSlot
|
||||
type="template"
|
||||
item={selectedTemplate}
|
||||
onClear={onClearTemplate}
|
||||
onClick={onClickTemplateSlot}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* × separator */}
|
||||
<div className="shrink-0 flex items-center justify-center">
|
||||
<span className="text-xl font-bold text-neutral-600 select-none">×</span>
|
||||
<span className="text-2xl font-bold text-neutral-700 select-none">×</span>
|
||||
</div>
|
||||
|
||||
{/* Brand slot */}
|
||||
<DropSlot
|
||||
type="brand"
|
||||
item={selectedBrand}
|
||||
onClear={onClearBrand}
|
||||
onClick={onClickBrandSlot}
|
||||
/>
|
||||
<div className="flex-1 max-w-[320px]">
|
||||
<DropSlot
|
||||
type="brand"
|
||||
item={selectedBrand}
|
||||
onClear={onClearBrand}
|
||||
onClick={onClickBrandSlot}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Generate button */}
|
||||
{/* Right: Generate button */}
|
||||
<div className="shrink-0">
|
||||
<button
|
||||
onClick={onGenerate}
|
||||
disabled={!canGenerate}
|
||||
title={canGenerate ? 'Generar contenido con esta plantilla y marca' : 'Selecciona una plantilla y una marca primero'}
|
||||
className={`
|
||||
shrink-0 flex items-center gap-2 px-6 py-4 rounded-xl font-bold text-sm transition-all duration-200
|
||||
flex items-center justify-center gap-3 px-8 py-5 rounded-xl font-bold text-base transition-all duration-300 min-w-[200px]
|
||||
${canGenerate
|
||||
? 'bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white shadow-lg shadow-violet-900/30 hover:shadow-violet-900/50 hover:scale-[1.02] active:scale-[0.98]'
|
||||
: 'bg-neutral-800/50 text-neutral-600 cursor-not-allowed border border-neutral-800'
|
||||
? 'bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white shadow-xl shadow-violet-900/40 hover:shadow-violet-900/60 hover:scale-[1.03] active:scale-[0.98]'
|
||||
: 'bg-neutral-800/50 text-neutral-600 cursor-not-allowed border border-neutral-800/80'
|
||||
}
|
||||
`}
|
||||
>
|
||||
Generar
|
||||
<ArrowRight size={16} />
|
||||
<ArrowRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ import { migrateExpressFields } from '../../context/TemplateBuilderContext';
|
||||
import { useBatchProduction } from '../../hooks/useBatchProduction';
|
||||
import { useVideoDurations } from '../../hooks/useVideoDurations';
|
||||
import { BatchDataPanel } from './BatchDataPanel';
|
||||
import { exportBatchAsZip, BatchExportProgress } from '../../utils/batchExporter';
|
||||
import { exportBatchToDisk, BatchExportProgress } from '../../utils/batchExporter';
|
||||
|
||||
interface ProductionFormProps {
|
||||
template: ExpressTemplate;
|
||||
@@ -111,11 +111,23 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
const totalDuration = getTemplateDuration(template, videoDurations, designMD);
|
||||
const totalFrames = Math.max(30, totalDuration * fps);
|
||||
|
||||
// ─── Variations ───
|
||||
const availableVariations = useMemo(() => {
|
||||
for (const scene of template.scenes) {
|
||||
if (scene.variations && scene.variations.length > 0) {
|
||||
return scene.variations;
|
||||
}
|
||||
}
|
||||
return [];
|
||||
}, [template]);
|
||||
|
||||
const [activeVariationId, setActiveVariationId] = useState<string | null>(null);
|
||||
|
||||
// ─── Compile for ExportModal (only when modal is open — LivePreviewCanvas handles its own compile) ───
|
||||
const compiled = useMemo(
|
||||
() => {
|
||||
if (!showExportModal) return { elements: [], layers: [] };
|
||||
const result = compileExpressToTimeline(template, fieldData, designMD, brand, videoDurations);
|
||||
const result = compileExpressToTimeline(template, fieldData, designMD, brand, videoDurations, activeVariationId || undefined);
|
||||
result.elements = result.elements.map(el => {
|
||||
const fieldId = el.sourceFieldId;
|
||||
const fitOverride = fieldId ? mediaFits[fieldId] : undefined;
|
||||
@@ -130,7 +142,7 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
});
|
||||
return result;
|
||||
},
|
||||
[showExportModal, template, fieldData, designMD, brand, mediaFits, containBgColors, videoDurations]
|
||||
[showExportModal, template, fieldData, designMD, brand, mediaFits, containBgColors, videoDurations, activeVariationId]
|
||||
);
|
||||
|
||||
// ─── Collect all TemplateFields across all scenes ───
|
||||
@@ -251,7 +263,7 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
setBatchExportProgress({ current: 0, total: batch.pieceCount, status: 'rendering' });
|
||||
|
||||
try {
|
||||
await exportBatchAsZip(
|
||||
await exportBatchToDisk(
|
||||
batch.pieces,
|
||||
template,
|
||||
brand,
|
||||
@@ -277,7 +289,7 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
}
|
||||
|
||||
// 2. Compile to timeline elements
|
||||
const compiled = compileExpressToTimeline(template, fd, designMD, brand, videoDurations);
|
||||
const compiled = compileExpressToTimeline(template, fd, designMD, brand, videoDurations, piece.variationId);
|
||||
|
||||
// 3. Apply fit overrides
|
||||
compiled.elements = compiled.elements.map(el => {
|
||||
@@ -331,6 +343,7 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
layers: compiled.layers,
|
||||
brandVisibility: { logo: false, frame: false, background: true },
|
||||
outputFormat: 'video',
|
||||
brandId: brand.id,
|
||||
});
|
||||
}
|
||||
}, [batch.pieces, template, backgroundFieldId, designMD, brand, videoDurations, mediaFits, containBgColors, startExport]);
|
||||
@@ -412,9 +425,11 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
templateFormat={template.format}
|
||||
onSetBackgrounds={batch.setBackgroundFiles}
|
||||
onUpdateField={batch.updatePieceField}
|
||||
onUpdateVariation={batch.updatePieceVariation}
|
||||
onImportCSV={batch.importCSV}
|
||||
onRemovePiece={batch.removePiece}
|
||||
backgroundFiles={batch.backgroundFiles}
|
||||
availableVariations={availableVariations}
|
||||
/>
|
||||
) : (
|
||||
/* ── SINGLE MODE: Original form ── */
|
||||
@@ -433,6 +448,23 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Variation selector */}
|
||||
{availableVariations.length > 0 && (
|
||||
<div className="px-5 pt-3 border-b border-neutral-800/30 shrink-0">
|
||||
<label className="text-[10px] text-neutral-400 font-semibold mb-1 block">Variación de Diseño</label>
|
||||
<select
|
||||
value={activeVariationId || ''}
|
||||
onChange={(e) => setActiveVariationId(e.target.value || null)}
|
||||
className="w-full bg-neutral-900 border border-neutral-700 rounded-lg px-2.5 py-1.5 text-xs text-white focus:border-violet-500/50 focus:outline-none mb-3"
|
||||
>
|
||||
<option value="">Layout Default</option>
|
||||
{availableVariations.map(v => (
|
||||
<option key={v.id} value={v.id}>{v.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scrollable fields */}
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar px-5 py-4 space-y-5">
|
||||
{/* ── Segment upload fields (form-sourced intro/outro) ── */}
|
||||
@@ -686,6 +718,7 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
onSceneChange={setActiveSceneId}
|
||||
playerRef={playerRef}
|
||||
videoDurations={videoDurations}
|
||||
variationId={batch.isBatchMode ? (batch.pieces[activeBatchPieceIndex]?.variationId || undefined) : (activeVariationId || undefined)}
|
||||
statusLabel={
|
||||
batch.isBatchMode
|
||||
? (batch.pieceCount > 0 ? `Pieza ${activeBatchPieceIndex + 1} de ${batch.pieceCount}` : 'Sin piezas')
|
||||
@@ -738,6 +771,7 @@ export const ProductionForm: React.FC<ProductionFormProps> = ({
|
||||
brandVisibility={{ logo: false, frame: false, background: true }}
|
||||
outputFormat={template.format}
|
||||
aspectRatio={template.aspectRatio}
|
||||
brandId={brand.id}
|
||||
/>
|
||||
|
||||
{/* ═══ Batch Export Modal (video batch only) ═══ */}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Download, Loader2, CheckCircle2, XCircle, Clock, Trash2, X } from 'lucide-react';
|
||||
import { Download, Loader2, CheckCircle2, XCircle, Clock, Trash2, X, FolderOpen } from 'lucide-react';
|
||||
import type { RenderJobClient } from '../../hooks/useExportQueue';
|
||||
|
||||
interface ExportJobItemProps {
|
||||
@@ -49,10 +49,10 @@ export const ExportJobItem: React.FC<ExportJobItemProps> = ({ job, onCancel, onD
|
||||
{job.status === 'done' && (
|
||||
<button
|
||||
onClick={() => onDownload(job)}
|
||||
title="Descargar"
|
||||
title="Abrir en carpeta"
|
||||
className="p-1 rounded-md bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 transition-colors"
|
||||
>
|
||||
<Download size={12} />
|
||||
<FolderOpen size={12} />
|
||||
</button>
|
||||
)}
|
||||
{(job.status === 'queued' || job.status === 'rendering') && (
|
||||
|
||||
@@ -16,6 +16,7 @@ interface ExportModalProps {
|
||||
brandVisibility?: { logo: boolean; frame: boolean; background: boolean };
|
||||
outputFormat?: 'video' | 'image';
|
||||
aspectRatio?: string;
|
||||
brandId?: string;
|
||||
onAssetSaved?: (url: string) => void;
|
||||
}
|
||||
|
||||
@@ -54,6 +55,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
|
||||
brandVisibility,
|
||||
outputFormat,
|
||||
aspectRatio,
|
||||
brandId,
|
||||
onAssetSaved,
|
||||
}) => {
|
||||
const { jobs, activeJobs, hasActiveJobs, isConnected, startExport, cancelJob, downloadJob } = useExportQueue();
|
||||
@@ -162,6 +164,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
|
||||
layers,
|
||||
brandVisibility,
|
||||
outputFormat,
|
||||
brandId,
|
||||
};
|
||||
|
||||
const job = await startExport(config, {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useExportQueue } from '../../context/ExportQueueContext';
|
||||
import { Loader2, Download, Film, Image as ImageIcon, X, Zap } from 'lucide-react';
|
||||
import { Loader2, Download, Film, Image as ImageIcon, X, Zap, FolderOpen } from 'lucide-react';
|
||||
|
||||
export const GlobalExportWidget: React.FC = () => {
|
||||
const { jobs, activeJobs, hasActiveJobs, downloadJob, cancelJob } = useExportQueue();
|
||||
@@ -77,7 +77,7 @@ export const GlobalExportWidget: React.FC = () => {
|
||||
onClick={() => downloadJob(job)}
|
||||
className="flex items-center gap-1 text-[10px] bg-violet-600 hover:bg-violet-500 text-white px-2 py-1 rounded transition-colors"
|
||||
>
|
||||
<Download size={12} /> Descargar
|
||||
<FolderOpen size={12} /> Abrir
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -85,6 +85,8 @@ export const BuilderCanvas: React.FC = () => {
|
||||
activeScene,
|
||||
updateSegment,
|
||||
previewBrand,
|
||||
activeVariationId,
|
||||
resolveFieldPosition,
|
||||
} = useTemplateBuilder();
|
||||
|
||||
// Detect segment mode: active scene is an intro/outro with segmentSource
|
||||
@@ -106,13 +108,15 @@ export const BuilderCanvas: React.FC = () => {
|
||||
onMove: useCallback((id: string, x: number, y: number) => {
|
||||
const field = fields.find(f => f.id === id);
|
||||
if (!field) return;
|
||||
updateField(id, { position: { ...field.position, x, y } });
|
||||
}, [fields, updateField]),
|
||||
const pos = resolveFieldPosition(field);
|
||||
updateField(id, { position: { ...pos, x, y } });
|
||||
}, [fields, updateField, resolveFieldPosition]),
|
||||
onResize: useCallback((id: string, w: number, h: number) => {
|
||||
const field = fields.find(f => f.id === id);
|
||||
if (!field) return;
|
||||
updateField(id, { position: { ...field.position, w, h } });
|
||||
}, [fields, updateField]),
|
||||
const pos = resolveFieldPosition(field);
|
||||
updateField(id, { position: { ...pos, w, h } });
|
||||
}, [fields, updateField, resolveFieldPosition]),
|
||||
snapLines: [50],
|
||||
snapThreshold: 1.5,
|
||||
});
|
||||
@@ -208,17 +212,18 @@ export const BuilderCanvas: React.FC = () => {
|
||||
const isDraggingField = dragFieldId === field.id;
|
||||
const isLocked = field.locked === true;
|
||||
const colors = NATURE_COLORS[field.nature];
|
||||
const pos = resolveFieldPosition(field);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={field.id}
|
||||
className="absolute transition-shadow"
|
||||
style={{
|
||||
left: `${field.position.x - field.position.w / 2}%`,
|
||||
top: `${field.position.y - field.position.h / 2}%`,
|
||||
width: `${field.position.w}%`,
|
||||
height: `${field.position.h}%`,
|
||||
transform: field.position.rotation ? `rotate(${field.position.rotation}deg)` : undefined,
|
||||
left: `${pos.x - pos.w / 2}%`,
|
||||
top: `${pos.y - pos.h / 2}%`,
|
||||
width: `${pos.w}%`,
|
||||
height: `${pos.h}%`,
|
||||
transform: pos.rotation ? `rotate(${pos.rotation}deg)` : undefined,
|
||||
// z-index from array position: index 0 = back, last = front
|
||||
// Dragging/selected get temporary boost to stay on top during interaction
|
||||
zIndex: isDraggingField ? 1000 : isSelected ? 999 : idx + 1,
|
||||
@@ -242,7 +247,7 @@ export const BuilderCanvas: React.FC = () => {
|
||||
e.stopPropagation();
|
||||
if (isLocked) return; // Can't interact with locked layers
|
||||
setSelectedFieldId(field.id);
|
||||
startDrag(e, field.id, field.position);
|
||||
startDrag(e, field.id, pos);
|
||||
}}
|
||||
>
|
||||
{/* ── Nature-specific content ── */}
|
||||
|
||||
@@ -67,6 +67,7 @@ export const FieldConfigPanel: React.FC = () => {
|
||||
editableSlotCount,
|
||||
totalFieldCount,
|
||||
templateMeta,
|
||||
resolveFieldPosition,
|
||||
} = useTemplateBuilder();
|
||||
|
||||
const field = fields.find(f => f.id === selectedFieldId);
|
||||
@@ -368,10 +369,10 @@ export const FieldConfigPanel: React.FC = () => {
|
||||
|
||||
{/* ── Position (FieldInspector) ── */}
|
||||
<FieldInspector
|
||||
position={field.position}
|
||||
position={resolveFieldPosition(field)}
|
||||
onPositionChange={(pos) => {
|
||||
updateField(field.id, {
|
||||
position: { ...field.position, ...pos },
|
||||
position: { ...resolveFieldPosition(field), ...pos },
|
||||
});
|
||||
}}
|
||||
textStyle={field.type === 'text' ? {
|
||||
|
||||
@@ -169,6 +169,11 @@ const TemplateBuilderInner: React.FC<InnerProps> = ({
|
||||
updateSegment,
|
||||
introScene,
|
||||
outroScene,
|
||||
// Variations
|
||||
activeVariationId,
|
||||
setActiveVariationId,
|
||||
addVariation,
|
||||
deleteVariation,
|
||||
} = useTemplateBuilder();
|
||||
|
||||
const sceneFieldsMap = useSceneFieldsMap();
|
||||
@@ -339,6 +344,44 @@ const TemplateBuilderInner: React.FC<InnerProps> = ({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Variation Selector (design mode only) */}
|
||||
{viewMode === 'design' && (
|
||||
<div className="flex items-center bg-neutral-800/60 rounded-lg border border-neutral-700/50 p-0.5 relative group">
|
||||
<select
|
||||
value={activeVariationId || ''}
|
||||
onChange={(e) => setActiveVariationId(e.target.value || null)}
|
||||
className="bg-transparent text-[9px] font-medium text-white border-none focus:outline-none cursor-pointer px-2 py-1 appearance-none pr-4"
|
||||
style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 4px center' }}
|
||||
>
|
||||
<option value="">Layout Default</option>
|
||||
{(activeScene?.variations || []).map(v => (
|
||||
<option key={v.id} value={v.id}>{v.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={() => {
|
||||
const count = (activeScene?.variations || []).length + 1;
|
||||
addVariation(`Variación ${count}`);
|
||||
}}
|
||||
title="Crear nueva variación"
|
||||
className="px-1.5 py-0.5 hover:bg-neutral-700 rounded text-neutral-400 hover:text-white transition-colors text-[10px] font-bold border-l border-neutral-700/50"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
{activeVariationId && (
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm('¿Eliminar esta variación?')) deleteVariation(activeVariationId);
|
||||
}}
|
||||
title="Eliminar variación"
|
||||
className="px-1.5 py-0.5 hover:bg-red-500/20 hover:text-red-400 rounded text-neutral-400 transition-colors text-[9px] font-bold border-l border-neutral-700/50"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Brand preview selector */}
|
||||
<div className="flex items-center bg-neutral-800/60 rounded-lg border border-neutral-700/50 p-0.5">
|
||||
<Briefcase size={10} className={previewBrand ? 'text-violet-400 ml-1.5' : 'text-neutral-500 ml-1.5'} />
|
||||
|
||||
@@ -32,6 +32,8 @@ export interface LivePreviewCanvasProps {
|
||||
onSceneChange?: (sceneId: string) => void;
|
||||
/** External player ref */
|
||||
playerRef?: React.RefObject<BradlyPlayerRef>;
|
||||
/** Optional variation ID to apply */
|
||||
variationId?: string;
|
||||
/** Status label (e.g. "Listo" / "Faltan campos") */
|
||||
statusLabel?: string;
|
||||
/** Whether all required fields are complete */
|
||||
@@ -69,6 +71,7 @@ export const LivePreviewCanvas: React.FC<LivePreviewCanvasProps> = ({
|
||||
statusLabel,
|
||||
isComplete = false,
|
||||
videoDurations,
|
||||
variationId,
|
||||
}) => {
|
||||
const internalRef = useRef<BradlyPlayerRef>(null);
|
||||
const playerRef = externalRef || internalRef;
|
||||
@@ -85,7 +88,7 @@ export const LivePreviewCanvas: React.FC<LivePreviewCanvasProps> = ({
|
||||
|
||||
// Compile template to timeline (reactive to fieldData + mediaFits)
|
||||
const compiled = useMemo(() => {
|
||||
const result = compileExpressToTimeline(template, fieldData, designMD, brand, videoDurations);
|
||||
const result = compileExpressToTimeline(template, fieldData, designMD, brand, videoDurations, variationId);
|
||||
// Strip transitions and apply mediaFit overrides
|
||||
result.elements = result.elements.map(el => {
|
||||
const fieldId = el.sourceFieldId;
|
||||
@@ -100,7 +103,7 @@ export const LivePreviewCanvas: React.FC<LivePreviewCanvasProps> = ({
|
||||
};
|
||||
});
|
||||
return result;
|
||||
}, [template, fieldData, designMD, brand, mediaFits, containBgColors, videoDurations]);
|
||||
}, [template, fieldData, designMD, brand, mediaFits, containBgColors, videoDurations, variationId]);
|
||||
|
||||
const playerInputProps = useMemo(() => ({
|
||||
designMD,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Download, Loader2, X, Clock, CheckCircle, AlertCircle, FileVideo, Image as ImageIcon } from 'lucide-react';
|
||||
import { Download, Loader2, X, Clock, CheckCircle, AlertCircle, FileVideo, Image as ImageIcon, FolderOpen } from 'lucide-react';
|
||||
|
||||
interface RenderJob {
|
||||
id: string;
|
||||
@@ -9,6 +9,7 @@ interface RenderJob {
|
||||
width: number;
|
||||
height: number;
|
||||
downloadUrl?: string;
|
||||
targetPath?: string;
|
||||
error?: string;
|
||||
createdAt: number;
|
||||
completedAt?: number;
|
||||
@@ -18,13 +19,14 @@ interface RenderJob {
|
||||
interface RenderHistoryPanelProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onDownload?: (job: RenderJob) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* RenderHistoryPanel — Shows past and active render jobs with progress,
|
||||
* download links, and job status information.
|
||||
*/
|
||||
export const RenderHistoryPanel: React.FC<RenderHistoryPanelProps> = ({ isOpen, onClose }) => {
|
||||
export const RenderHistoryPanel: React.FC<RenderHistoryPanelProps> = ({ isOpen, onClose, onDownload = () => {} }) => {
|
||||
const [jobs, setJobs] = useState<RenderJob[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -160,15 +162,23 @@ export const RenderHistoryPanel: React.FC<RenderHistoryPanelProps> = ({ isOpen,
|
||||
|
||||
{/* Download button */}
|
||||
{job.status === 'done' && job.downloadUrl && (
|
||||
<a
|
||||
href={job.downloadUrl}
|
||||
download
|
||||
title="Descargar"
|
||||
className="flex items-center gap-1 px-2 py-1 bg-emerald-600/20 text-emerald-300 rounded hover:bg-emerald-600/30 transition-colors"
|
||||
<button
|
||||
onClick={() => {
|
||||
if ((window as any).electronAPI && job.targetPath) {
|
||||
(window as any).electronAPI.fs.showItemInFolder(job.targetPath);
|
||||
} else {
|
||||
const a = document.createElement('a');
|
||||
a.href = job.downloadUrl!;
|
||||
a.download = `export-${job.id.slice(0, 8)}`;
|
||||
a.click();
|
||||
}
|
||||
}}
|
||||
title="Abrir en carpeta"
|
||||
className="p-1.5 rounded-lg bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<Download size={10} />
|
||||
<span>Descargar</span>
|
||||
</a>
|
||||
<FolderOpen size={12} />
|
||||
<span>Abrir en carpeta</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user