Font
{alignments.map(a => (
))}
Color
{['#ffffff','#000000','#ff4444','#00ff00','#ffcc00','#3b82f6','#a855f7','#f97316'].map(c => (
setColor(c)} style={{ width: 20, height: 20, borderRadius: 3, background: c, cursor: 'pointer', border: color === c ? '2px solid #fff' : '1px solid rgba(255,255,255,0.2)' }} />
))}
);
}
function PanelCaptions() {
const [activeSeg, setActiveSeg] = React.useState(0);
const [editing, setEditing] = React.useState(null);
const [editText, setEditText] = React.useState('');
return (
{CAPTION_SEGMENTS.map((seg, i) => (
{ setActiveSeg(i); setEditing(null); }}>
{seg.t}
{editing === i ? (
e.stopPropagation()}>
setEditText(e.target.value)}
style={{ width: '100%', background: tk.bgInput, border: `1px solid rgba(0,255,0,0.4)`, borderRadius: 3, color: tk.textPrimary, fontSize: 11, padding: '2px 5px', outline: 'none' }}
onBlur={() => setEditing(null)} />
) : (
{ setEditing(i); setEditText(seg.text); }}>
{seg.text}
)}
))}
);
}
function PanelTransitions() {
const [active, setActive] = React.useState('Crossfade');
const [cat, setCat] = React.useState('All');
return (
{['All','Dissolve','Motion','Warp'].map(c => (
))}
{TRANSITION_NAMES.map((name, i) => (
))}
Duration
{['0.3s','0.5s','1.0s','1.5s'].map(d => (
))}
);
}
const EFFECT_DEFS = [
{ name: 'Blur', def: 0, max: 20 },
{ name: 'Sharpen', def: 0, max: 20 },
{ name: 'Vignette', def: 25, max: 100 },
{ name: 'Opacity', def: 100, max: 100 },
{ name: 'Grain', def: 0, max: 20 },
];
function PanelEffects() {
const [blend, setBlend] = React.useState('Normal');
const [effectVals, setEffectVals] = React.useState(() => Object.fromEntries(EFFECT_DEFS.map(e => [e.name, e.def])));
const blendModes = ['Normal', 'Multiply', 'Screen', 'Overlay', 'Soft Light', 'Hard Light', 'Color Dodge', 'Difference'];
return (
Blend Mode
{EFFECT_DEFS.map(({ name, max }) => (
))}
);
}
function PanelPresets() {
const [activeLut, setActiveLut] = React.useState(null);
const [bright, setBright] = React.useState(100);
const [contr, setContr] = React.useState(100);
const [sat, setSat] = React.useState(100);
return (
LUT Presets
{LUT_NAMES.map((name, i) => (
setActiveLut(activeLut === name ? null : name)}
style={{ borderRadius: 4, overflow: 'hidden', cursor: 'pointer', border: activeLut === name ? `1px solid ${tk.accent}` : `1px solid ${tk.border}`, transition: 'border-color 0.1s' }}>
{name}
))}
{[['Brightness', bright, setBright, 50, 150], ['Contrast', contr, setContr, 50, 150], ['Saturation', sat, setSat, 0, 200]].map(([label, val, setVal, mn, mx]) => (
))}
);
}
function PanelAuto() {
const [analyzed, setAnalyzed] = React.useState(false);
const [analyzing, setAnalyzing] = React.useState(false);
const suggestions = [
{ label: 'Stabilize clip at 0:08', type: 'Video', action: 'Apply' },
{ label: 'Lower music between 0:18–0:25', type: 'Audio', action: 'Apply' },
{ label: 'Add captions to interview segment', type: 'Captions', action: 'Generate' },
];
const typeColors = { Video: '#1d4ed8', Audio: '#065f46', Captions: '#7c3aed' };
const handleAnalyze = () => {
setAnalyzing(true);
setTimeout(() => { setAnalyzing(false); setAnalyzed(true); }, 1800);
};
return (
{!analyzed ? (
⚡
AI analysis finds issues and suggests fixes automatically.
) : (
3 Suggestions
{suggestions.map((s, i) => (
{s.type}
{s.label}
))}
)}
);
}
// ── Rail buttons ──────────────────────────────────────────────────────────────
const RAIL_ITEMS = [
{ id: 'Get Content', label: 'Media', icon:
},
{ id: 'Audio', label: 'Audio', icon:
},
{ id: 'Filters', label: 'Filters', icon:
},
{ id: 'Text', label: 'Text', icon:
},
{ id: 'Captions', label: 'Caps', icon:
},
{ id: 'Transitions', label: 'Trans', icon:
},
{ id: 'Effects', label: 'Effects', icon:
},
{ id: 'Presets', label: 'Color', icon:
},
{ id: 'Auto', label: 'Auto', icon:
},
];
const PANEL_MAP = {
'Get Content': PanelGetContent,
'Audio': PanelAudio,
'Filters': PanelFilters,
'Text': PanelText,
'Captions': PanelCaptions,
'Transitions': PanelTransitions,
'Effects': PanelEffects,
'Presets': PanelPresets,
'Auto': PanelAuto,
};
// ── Main component ─────────────────────────────────────────────────────────────
function AppEnhancedReal() {
const [activePanel, setActivePanel] = React.useState('Get Content');
const [sidebarOpen, setSidebarOpen] = React.useState(true);
const [isPlaying, setIsPlaying] = React.useState(false);
const [currentTime, setCurrentTime] = React.useState(0);
const [selectedClipId, setSelectedClipId] = React.useState(null);
const [activeTool, setActiveTool] = React.useState('select');
const rafRef = React.useRef(null);
const lastTRef = React.useRef(null);
const ctRef = React.useRef(0);
ctRef.current = currentTime;
React.useEffect(() => {
if (isPlaying) {
lastTRef.current = performance.now();
const tick = (now) => {
const dt = (now - lastTRef.current) / 1000;
lastTRef.current = now;
const next = ctRef.current + dt;
if (next >= TOTAL_DURATION) { setCurrentTime(0); setIsPlaying(false); return; }
setCurrentTime(next);
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
} else {
cancelAnimationFrame(rafRef.current);
}
return () => cancelAnimationFrame(rafRef.current);
}, [isPlaying]);
const pct = (currentTime / TOTAL_DURATION) * 100;
const fmt = (s) => {
const m = Math.floor(s / 60);
const sec = Math.floor(s % 60);
const f = Math.floor((s % 1) * 30);
return `${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}.${String(f).padStart(2,'0')}`;
};
const PanelComp = PANEL_MAP[activePanel] || PanelGetContent;
const handleRailClick = (panelId) => {
if (activePanel === panelId && sidebarOpen) { setSidebarOpen(false); }
else { setActivePanel(panelId); setSidebarOpen(true); }
};
const handleTimelineClick = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
setCurrentTime(ratio * TOTAL_DURATION);
};
return (
{/* Top toolbar */}
VLS
Untitled Project
{[
{ id: 'select', label: '↖ Select' },
{ id: 'split', label: '⊹ Split' },
{ id: 'delete', label: '✕ Delete' },
].map(tool => (
))}
{fmt(currentTime)}
{/* Body */}
{/* Left rail */}
{RAIL_ITEMS.map(item => (
))}
{/* Sidebar */}
{sidebarOpen && (
)}
{/* Center */}
{/* Preview */}
setIsPlaying(p => !p)}>
{!isPlaying && (
)}
{/* Timecode overlay */}
{fmt(currentTime)}
{/* Controls */}
{/* Timeline */}
{/* Toolbar */}
Timeline
{/* Tracks */}
{TRACK_LABELS.map((label, rowIdx) => {
const rowClips = DEMO_CLIPS.filter(c => c.row === rowIdx);
const isAudio = rowIdx >= 2;
return (
{label}
{/* Playhead */}
{/* Clips */}
{rowClips.map(clip => (
{ e.stopPropagation(); setSelectedClipId(clip.id===selectedClipId ? null : clip.id); }}>
{clip.name}
))}
);
})}
);
}
window.AppEnhancedReal = AppEnhancedReal;
})();
) : (
)}