import React, { useState, useRef, useEffect } from ‘react’;
import {
Wand2, Play, Download, Settings,
ListVideo, Sparkles, Scissors, Volume2,
CheckCircle, Loader2, Music, Mic,
Clock, Smile, CheckSquare, Maximize,
Pause, RotateCcw, Trash, Type, Zap
} from ‘lucide-react’;
const videoColors = [“bg-blue-500”, “bg-rose-500”, “bg-amber-500”, “bg-emerald-500”, “bg-purple-500”, “bg-cyan-500”, “bg-fuchsia-500”, “bg-lime-500”, “bg-orange-500”, “bg-indigo-500″];
// NOVO: Detetor de Palavras-Chave para o Estilo Alex Hormozi
const getHormoziStyle = (word) => {
const w = word.toLowerCase().replace(/[^a-zãáâéêíóôúç]/g, ”);
let color = ‘#FFFFFF’;
let emoji = ”;
if ([‘dinheiro’, ‘rico’, ‘milionario’, ‘milhoes’, ‘lucro’, ‘venda’, ‘cash’].includes(w)) { color = ‘#4ADE80’; emoji = ‘💸’; }
else if ([‘nao’, ‘nunca’, ‘proibido’, ‘morte’, ‘perigo’, ‘pior’, ‘ruim’].includes(w)) { color = ‘#EF4444’; emoji = ‘🚫’; }
else if ([‘incrivel’, ‘segredo’, ‘descubra’, ‘wow’, ‘magica’, ‘fogo’, ‘explosao’, ‘bum’].includes(w)) { color = ‘#FBBF24’; emoji = ‘💥’; }
else if ([‘amor’, ‘coracao’, ‘paixao’, ‘sentimento’].includes(w)) { color = ‘#EC4899’; emoji = ‘❤️’; }
else if ([‘ideia’, ‘cerebro’, ‘inteligente’, ‘mente’, ‘pensar’].includes(w)) { color = ‘#60A5FA’; emoji = ‘🧠’; }
else if ([‘tempo’, ‘rapido’, ‘hora’, ‘agora’, ‘ja’].includes(w)) { color = ‘#F97316’; emoji = ‘⏱️’; }
// Rotação pseudo-aleatória fixa baseada na palavra
const rot = (word.length % 3 === 0 ? 0.06 : (word.length % 2 === 0 ? -0.04 : 0));
return { color, emoji, rot };
};
// NOVO: Detetor de Palavras-Chave para o Estilo MrBeast
const getMrBeastStyle = (word) => {
const w = word.toLowerCase().replace(/[^a-zãáâéêíóôúç]/g, ”);
let bgColor = ‘rgba(0, 0, 0, 0.85)’;
let textColor = ‘#FFFFFF’;
if ([‘dinheiro’, ‘rico’, ‘milhoes’, ‘lucro’, ‘venda’, ‘cash’, ‘ganhar’].includes(w)) { bgColor = ‘#FDE047’; textColor = ‘#000000’; }
else if ([‘nao’, ‘nunca’, ‘morte’, ‘perigo’, ‘pior’, ‘ruim’].includes(w)) { bgColor = ‘#EF4444’; textColor = ‘#FFFFFF’; }
else if ([‘incrivel’, ‘segredo’, ‘descubra’, ‘novo’, ‘magica’, ‘facil’].includes(w)) { bgColor = ‘#06B6D4’; textColor = ‘#FFFFFF’; }
else if ([‘amor’, ‘coracao’, ‘feliz’, ‘bom’].includes(w)) { bgColor = ‘#EC4899’; textColor = ‘#FFFFFF’; }
const rot = (word.length % 2 === 0 ? 0.04 : -0.04);
return { bgColor, textColor, rot };
};
// Utilitário Web Audio API nativa para SFX Cinematográficos
const playGeneratedSFX = (type, audioCtx, destination = audioCtx.destination, masterVol = 1.0) => {
const t = audioCtx.currentTime;
const masterGain = audioCtx.createGain();
masterGain.gain.value = masterVol;
masterGain.connect(destination);
if (type === ‘impact’) {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = ‘sine’;
osc.frequency.setValueAtTime(150, t);
osc.frequency.exponentialRampToValueAtTime(0.001, t + 1.5);
gain.gain.setValueAtTime(2.5, t);
gain.gain.exponentialRampToValueAtTime(0.001, t + 1.5);
osc.connect(gain); gain.connect(masterGain);
osc.start(t); osc.stop(t + 1.5);
const bufferSize = audioCtx.sampleRate * 0.2;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1; const noise = audioCtx.createBufferSource(); noise.buffer = buffer; const noiseFilter = audioCtx.createBiquadFilter(); noiseFilter.type = 'lowpass'; noiseFilter.frequency.setValueAtTime(1000, t); noiseFilter.frequency.exponentialRampToValueAtTime(100, t + 0.2); const noiseGain = audioCtx.createGain(); noiseGain.gain.setValueAtTime(1.5, t); noiseGain.gain.exponentialRampToValueAtTime(0.01, t + 0.2); noise.connect(noiseFilter); noiseFilter.connect(noiseGain); noiseGain.connect(masterGain); noise.start(t); } else if (type === 'riser') { const duration = 2.0; const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'sawtooth'; osc.frequency.setValueAtTime(50, t); osc.frequency.exponentialRampToValueAtTime(1000, t + duration); gain.gain.setValueAtTime(0, t); gain.gain.linearRampToValueAtTime(0.4, t + duration - 0.2); gain.gain.linearRampToValueAtTime(0, t + duration); const filter = audioCtx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.setValueAtTime(200, t); filter.frequency.exponentialRampToValueAtTime(3000, t + duration); osc.connect(filter); filter.connect(gain); gain.connect(masterGain); osc.start(t); osc.stop(t + duration); } else if (type === 'heartbeat') { const playBeat = (offset, vol) => {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = ‘sine’;
osc.frequency.setValueAtTime(80, t + offset);
osc.frequency.exponentialRampToValueAtTime(20, t + offset + 0.2);
gain.gain.setValueAtTime(vol, t + offset);
gain.gain.exponentialRampToValueAtTime(0.01, t + offset + 0.2);
osc.connect(gain); gain.connect(masterGain);
osc.start(t + offset); osc.stop(t + offset + 0.2);
}
playBeat(0, 1.5);
playBeat(0.25, 2.0);
} else if (type === ‘gasp’) {
const bufferSize = audioCtx.sampleRate * 1.5;
const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1; const noise = audioCtx.createBufferSource(); noise.buffer = buffer; const bandpass = audioCtx.createBiquadFilter(); bandpass.type = 'bandpass'; bandpass.frequency.value = 800; bandpass.Q.value = 1.0; const gain = audioCtx.createGain(); gain.gain.setValueAtTime(0, t); gain.gain.linearRampToValueAtTime(1.5, t + 0.2); gain.gain.exponentialRampToValueAtTime(0.01, t + 1.0); noise.connect(bandpass); bandpass.connect(gain); gain.connect(masterGain); noise.start(t); } else if (type === 'cash') { const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(1200, t); osc.frequency.setValueAtTime(1600, t + 0.1); gain.gain.setValueAtTime(0, t); gain.gain.linearRampToValueAtTime(0.5, t + 0.02); gain.gain.linearRampToValueAtTime(0, t + 0.3); osc.connect(gain); gain.connect(masterGain); osc.start(t); osc.stop(t + 0.3); } }; // Utilitário PCM -> WAV
const pcmToWav = (pcmData, sampleRate) => {
const numChannels = 1;
const bitsPerSample = 16;
const blockAlign = numChannels * (bitsPerSample / 8);
const byteRate = sampleRate * blockAlign;
const dataSize = pcmData.length;
const chunkSize = 36 + dataSize;
const buffer = new ArrayBuffer(44 + dataSize);
const view = new DataView(buffer);
const writeString = (view, offset, string) => {
for (let i = 0; i < string.length; i++) { view.setUint8(offset + i, string.charCodeAt(i)); } }; writeString(view, 0, 'RIFF'); view.setUint32(4, chunkSize, true); writeString(view, 8, 'WAVE'); writeString(view, 12, 'fmt '); view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, numChannels, true); view.setUint32(24, sampleRate, true); view.setUint32(28, byteRate, true); view.setUint16(32, blockAlign, true); view.setUint16(34, bitsPerSample, true); writeString(view, 36, 'data'); view.setUint32(40, dataSize, true); for (let i = 0; i < dataSize; i++) { view.setUint8(44 + i, pcmData[i]); } return new Blob([view], { type: 'audio/wav' }); }; // --- COMPONENTES SECUNDÁRIOS --- const StepIndicator = ({ currentStep }) => {
const steps = [
{ id: 1, label: ‘Importar Links’ },
{ id: 2, label: ‘Editor & Timeline’ },
{ id: 3, label: ‘Exportar & Viralizar’ }
];
return (
{steps.map((step, index) => (
step.id ? ‘bg-emerald-500 text-white’ : ‘bg-gray-800 text-gray-500’}`}>
{currentStep > step.id ? : step.id}
{step.label}
{index < steps.length - 1 && ( step.id ? 'bg-emerald-500' : 'bg-gray-800'}`} />
)}
))}
);
};
// — COMPONENTE PRINCIPAL —
export default function App() {
const [step, setStep] = useState(1);
const [isProcessing, setIsProcessing] = useState(false);
const [loadingMsg, setLoadingMsg] = useState(“”);
const [loadingProgress, setLoadingProgress] = useState(0);
const [magicTone, setMagicTone] = useState(“Sério e Impactante”);
const [magicNarrators, setMagicNarrators] = useState(1);
const [isGeneratingMagic, setIsGeneratingMagic] = useState(false);
const [magicContext, setMagicContext] = useState(“”);
const [globalPrefix, setGlobalPrefix] = useState(“TOP”);
const [showNumbers, setShowNumbers] = useState(true);
const [topCount, setTopCount] = useState(5);
const [bgmLibrary, setBgmLibrary] = useState([]);
const [useStickers, setUseStickers] = useState(true);
const [isExporting, setIsExporting] = useState(false);
const [exportProgress, setExportProgress] = useState(0);
const [exportMsg, setExportMsg] = useState(“Preparando arquivos…”);
const [finalVideoUrl, setFinalVideoUrl] = useState(null);
const [generalTitle, setGeneralTitle] = useState(“”);
const [videoType, setVideoType] = useState(“best”);
const [videos, setVideos] = useState(
Array.from({ length: 5 }, (_, i) => ({
id: i + 1, url: “”, title: “”, color: videoColors[i], localUrl: null, trimStart: 0, trimEnd: 100,
caption: “”, volume: 100, bgmUrl: null, bgmName: “”, bgmVolume: 30, narrationVolume: 100, videoDuration: 0,
zoom: 100, posX: 0, posY: 0, captionY: 15, narrationCaptionY: 80, showNarration: true,
narrationCaptionSize: 60, narrationCaptionStyle: ‘hormozi’, captionSize: 68, captionStyle: ‘style1’, customTopLabel: null,
filter: ‘none’, autoDucking: true,
narrations: [{ id: Math.random().toString(36).substring(2, 9), script: “”, narrationVoice: ‘Fenrir’, narrationTone: ‘enérgica e profissional’, customAudioUrl: null, audioDuration: 0, timedCaptions: [], isGeneratingScript: false, isGeneratingText: false, audioGenerated: false }],
sfxTracks: [],
vfxTracks: []
}))
);
const [playingItemId, setPlayingItemId] = useState(null);
const [currentTimePreview, setCurrentTimePreview] = useState(0);
const [activeToolTab, setActiveToolTab] = useState(‘enquadramento’);
const [isPreviewPlaying, setIsPreviewPlaying] = useState(true);
const previewVideoRef = useRef(null);
const bgmRef = useRef(null);
const previewAudioCtxRef = useRef(null);
const playedSFXIdsRef = useRef(new Set());
const shakeWrapperRef = useRef(null);
const activeVideoForPreview = videos.find(v => v.id === playingItemId) || videos[0];
const getFilterStyle = (filterType) => {
switch(filterType) {
case ‘cinematic’: return ‘contrast(1.2) saturate(1.3) brightness(0.9)’;
case ‘sigma’: return ‘grayscale(1) contrast(1.5) brightness(0.8)’;
case ‘vintage’: return ‘sepia(0.6) contrast(1.1) brightness(0.9) hue-rotate(-15deg)’;
case ‘cyberpunk’: return ‘contrast(1.3) saturate(1.8) hue-rotate(45deg)’;
default: return ‘none’;
}
};
useEffect(() => {
if (isPreviewPlaying) {
previewVideoRef.current?.play().catch(()=>{});
bgmRef.current?.play().catch(()=>{});
} else {
previewVideoRef.current?.pause();
bgmRef.current?.pause();
activeVideoForPreview?.narrations.forEach(n => {
const audioEl = document.getElementById(`audio-${n.id}`);
if (audioEl) audioEl.pause();
});
}
}, [isPreviewPlaying, playingItemId, activeVideoForPreview]);
useEffect(() => {
if (previewVideoRef.current && activeVideoForPreview) previewVideoRef.current.volume = activeVideoForPreview.volume / 100;
if (bgmRef.current && activeVideoForPreview) bgmRef.current.volume = activeVideoForPreview.bgmVolume / 100;
}, [activeVideoForPreview?.volume, activeVideoForPreview?.bgmVolume, playingItemId]);
useEffect(() => {
if (previewVideoRef.current && activeVideoForPreview) {
const startSec = (activeVideoForPreview.trimStart / 100) * activeVideoForPreview.videoDuration;
const endSec = (activeVideoForPreview.trimEnd / 100) * activeVideoForPreview.videoDuration;
if (previewVideoRef.current.currentTime < startSec || previewVideoRef.current.currentTime > endSec) {
previewVideoRef.current.currentTime = startSec;
if (bgmRef.current) bgmRef.current.currentTime = 0;
activeVideoForPreview.narrations.forEach(n => {
const audioEl = document.getElementById(`audio-${n.id}`);
if (audioEl) { audioEl.pause(); audioEl.currentTime = 0; }
});
}
}
}, [activeVideoForPreview?.trimStart, activeVideoForPreview?.trimEnd, playingItemId]);
useEffect(() => {
let animationFrameId;
const renderLoop = () => {
if (previewVideoRef.current && shakeWrapperRef.current && activeVideoForPreview) {
const t = previewVideoRef.current.currentTime;
const startSec = (activeVideoForPreview.trimStart / 100) * activeVideoForPreview.videoDuration;
const endSec = (activeVideoForPreview.trimEnd / 100) * activeVideoForPreview.videoDuration;
let dx = 0;
let dy = 0;
if (activeVideoForPreview.vfxTracks && isPreviewPlaying) {
activeVideoForPreview.vfxTracks.forEach(vfx => {
const sTime = startSec + (vfx.startTimePerc / 100) * (endSec – startSec);
const eTime = sTime + (vfx.durationPerc / 100) * (endSec – startSec);
if (t >= sTime && t <= eTime) { const intensity = (vfx.intensity || 50) / 100 * 20; const speed = (vfx.speed || 50) / 100 * 50; const timeMs = t * 1000; dx += (Math.sin(timeMs * 0.01 * speed) + Math.cos(timeMs * 0.013 * speed)) * intensity; dy += (Math.cos(timeMs * 0.011 * speed) + Math.sin(timeMs * 0.009 * speed)) * intensity; } }); } shakeWrapperRef.current.style.transform = `translate(${dx}px, ${dy}px)`; } animationFrameId = requestAnimationFrame(renderLoop); }; renderLoop(); return () => cancelAnimationFrame(animationFrameId);
}, [isPreviewPlaying, activeVideoForPreview]);
const getSticker = (index) => {
const bestEmojis = [‘😱’, ‘🤩’, ‘🤯’, ‘💀’, ‘😲’, ‘☠️’, ‘🤩’, ‘😱’];
const worstEmojis = [‘😭’, ‘💀’, ‘😢’, ‘😱’, ‘☠️’, ‘😨’, ‘😭’, ‘🤦’];
const list = videoType === ‘best’ ? bestEmojis : worstEmojis;
return list[index % list.length];
};
const handleTopCountChange = (e) => {
const newCount = parseInt(e.target.value);
setTopCount(newCount);
setVideos(prev => {
const newVideos = […prev];
if (newCount > prev.length) {
for (let i = prev.length; i < newCount; i++) { newVideos.push({ id: i + 1, url: "", title: "", color: videoColors[i % 10], localUrl: null, trimStart: 0, trimEnd: 100, caption: "", volume: 100, bgmUrl: null, bgmName: "", bgmVolume: 30, narrationVolume: 100, videoDuration: 0, zoom: 100, posX: 0, posY: 0, captionY: 15, narrationCaptionY: 80, showNarration: true, narrationCaptionSize: 60, narrationCaptionStyle: 'hormozi', captionSize: 68, captionStyle: 'style1', customTopLabel: null, filter: 'none', autoDucking: true, narrations: [{ id: Math.random().toString(36).substring(2, 9), script: "", narrationVoice: 'Fenrir', narrationTone: 'enérgica e profissional', customAudioUrl: null, audioDuration: 0, timedCaptions: [], isGeneratingScript: false, isGeneratingText: false, audioGenerated: false }], sfxTracks: [], vfxTracks: [] }); } } else if (newCount < prev.length) { return newVideos.slice(0, newCount); } return newVideos; }); }; const handleVideoChange = (id, field, value) => {
setVideos(prevVideos => prevVideos.map(v => v.id === id ? { …v, [field]: value } : v));
};
const handleFileUpload = (id, event) => {
const file = event.target.files[0];
if (file) {
const localUrl = URL.createObjectURL(file);
const video = document.createElement(‘video’);
video.preload = ‘metadata’;
video.onloadedmetadata = () => {
handleVideoChange(id, ‘videoDuration’, video.duration);
handleVideoChange(id, ‘localUrl’, localUrl);
};
video.src = localUrl;
}
};
const handleBgmFolderUpload = (event) => {
const files = Array.from(event.target.files).filter(file => file.type.startsWith(‘audio/’) || file.name.endsWith(‘.mp3’) || file.name.endsWith(‘.wav’));
if (files.length === 0) return;
const newLibrary = files.map(f => ({ name: f.name, url: URL.createObjectURL(f) }));
setBgmLibrary(prev => […prev, …newLibrary]);
alert(“Músicas carregadas com sucesso!”);
};
const setRandomBgm = (videoId) => {
if (bgmLibrary.length === 0) return alert(“Carregue músicas primeiro!”);
const randomTrack = bgmLibrary[Math.floor(Math.random() * bgmLibrary.length)];
handleVideoChange(videoId, ‘bgmUrl’, randomTrack.url);
handleVideoChange(videoId, ‘bgmName’, randomTrack.name);
};
const applyBgmToAll = (currentUrl, currentName, currentVolume) => {
if (!currentUrl) return alert(“Selecione uma música primeiro!”);
setVideos(videos.map(v => ({ …v, bgmUrl: currentUrl, bgmName: currentName, bgmVolume: currentVolume || 30 })));
alert(“🎵 Música aplicada a todos os clipes!”);
};
const updateNarration = (videoId, narrationId, field, value) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, narrations: v.narrations.map(n => n.id === narrationId ? { …n, [field]: value } : n) };
}
return v;
}));
};
const addNarration = (videoId) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, narrations: […v.narrations, { id: Math.random().toString(36).substring(2, 9), script: “”, narrationVoice: ‘Fenrir’, narrationTone: ‘enérgica e profissional’, customAudioUrl: null, audioDuration: 0, timedCaptions: [], sfxBlocks: [], isGeneratingScript: false, isGeneratingText: false, audioGenerated: false }] };
}
return v;
}));
};
const removeNarration = (videoId, narrationId) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, narrations: v.narrations.filter(n => n.id !== narrationId) };
}
return v;
}));
};
const addSfxTrack = (videoId) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, sfxTracks: […v.sfxTracks, { id: Math.random().toString(36).substring(2, 9), type: ‘impact’, startTimePerc: 50, volume: 100 }] };
}
return v;
}));
};
const updateSfxTrack = (videoId, sfxId, field, value) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, sfxTracks: v.sfxTracks.map(sfx => sfx.id === sfxId ? { …sfx, [field]: value } : sfx) };
}
return v;
}));
};
const removeSfxTrack = (videoId, sfxId) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, sfxTracks: v.sfxTracks.filter(sfx => sfx.id !== sfxId) };
}
return v;
}));
};
const addVfxTrack = (videoId) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, vfxTracks: […v.vfxTracks, { id: Math.random().toString(36).substring(2, 9), type: ‘shake’, startTimePerc: 0, durationPerc: 100, intensity: 50, speed: 50 }] };
}
return v;
}));
};
const updateVfxTrack = (videoId, vfxId, field, value) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, vfxTracks: v.vfxTracks.map(vfx => vfx.id === vfxId ? { …vfx, [field]: value } : vfx) };
}
return v;
}));
};
const removeVfxTrack = (videoId, vfxId) => {
setVideos(prev => prev.map(v => {
if (v.id === videoId) {
return { …v, vfxTracks: v.vfxTracks.filter(vfx => vfx.id !== vfxId) };
}
return v;
}));
};
const generateTimedCaptions = (text, totalDuration) => {
const words = text.split(/s+/).filter(w => w.length > 0);
const totalChars = words.join(”).length;
let currentStartTime = 0;
return words.map(word => {
const wordWeight = word.length / totalChars;
const wordDuration = totalDuration * wordWeight;
const startTime = currentStartTime;
const endTime = currentStartTime + wordDuration;
currentStartTime = endTime;
return { word, startTime, endTime };
});
};
const generateTTS = async (text, videoId, narrationId, voiceName = ‘Fenrir’, tone = ‘enérgica e profissional’) => {
if (!text) return;
updateNarration(videoId, narrationId, ‘isGeneratingScript’, true);
try {
const apiKey = “”;
const payload = {
contents: [{ parts: [{ text: `Fale de forma ${tone}: ${text}` }] }],
generationConfig: {
responseModalities: [“AUDIO”],
speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: voiceName } } }
},
model: “gemini-2.5-flash-preview-tts”
};
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(payload)
});
const result = await response.json();
const inlineData = result.candidates[0].content.parts[0].inlineData;
const base64Data = inlineData.data;
const mimeType = inlineData.mimeType;
const rateMatch = mimeType.match(/rate=(d+)/);
const sampleRate = rateMatch ? parseInt(rateMatch[1], 10) : 24000;
const binaryString = window.atob(base64Data);
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) bytes[i] = binaryString.charCodeAt(i); const wavBlob = pcmToWav(bytes, sampleRate); const audioUrl = URL.createObjectURL(wavBlob); const audio = new Audio(); audio.onloadedmetadata = () => {
const duration = audio.duration;
const timedCaptions = generateTimedCaptions(text, duration);
updateNarration(videoId, narrationId, ‘audioDuration’, duration);
updateNarration(videoId, narrationId, ‘customAudioUrl’, audioUrl);
updateNarration(videoId, narrationId, ‘audioGenerated’, true);
updateNarration(videoId, narrationId, ‘timedCaptions’, timedCaptions);
};
audio.src = audioUrl;
} catch (e) {
alert(“Erro na narração: ” + e.message);
} finally {
updateNarration(videoId, narrationId, ‘isGeneratingScript’, false);
}
};
const generateTextForNarration = async (videoId, narrationId) => {
const video = videos.find(v => v.id === videoId);
const currentNarrationIndex = video.narrations.findIndex(n => n.id === narrationId);
const currentNarration = video.narrations[currentNarrationIndex];
const previousNarrations = video.narrations.slice(0, currentNarrationIndex).map(n => n.script).join(” “);
const clipName = video.title || `Momento ${videoId}`;
updateNarration(videoId, narrationId, ‘isGeneratingText’, true);
try {
const apiKey = “”;
const prompt = `Você é um roteirista de vídeos virais curtos (TikTok/Shorts).
Tema Geral: “${generalTitle || ‘Tópicos Virais’}”
Assunto deste clipe específico: “${clipName}”
Tom/Emoção exigido para esta fala: ${currentNarration.narrationTone || ‘enérgica e profissional’}
${previousNarrations ? `O que já foi falado neste clipe até agora pelas outras vozes:n”${previousNarrations}”nnTarefa: Escreva APENAS a próxima fala, continuando a história/diálogo de forma super fluida, natural e viciante.` : ‘Tarefa: Escreva APENAS o roteiro inicial curto e super chamativo para este clipe (focado em reter a atenção).’}
Regras Absolutas:
– Responda APENAS com a fala direta. Sem aspas, sem marcações de quem está a falar, sem explicações.
– Curto, dinâmico, máximo de 2 a 3 frases.
– Retenha a atenção do espetador ao máximo!`;
const payload = {
contents: [{ parts: [{ text: prompt }] }],
model: “gemini-2.5-flash-preview-09-2025″
};
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(payload)
});
const result = await response.json();
let generatedText = result.candidates[0].content.parts[0].text;
generatedText = generatedText.replace(/`/g, ”).replace(/^”/, ”).replace(/”$/, ”).trim();
updateNarration(videoId, narrationId, ‘script’, generatedText);
} catch (e) {
console.error(“Falha ao gerar texto:”, e);
alert(“Erro ao gerar roteiro IA para esta caixa: ” + e.message);
} finally {
updateNarration(videoId, narrationId, ‘isGeneratingText’, false);
}
};
const generateMagicScript = async () => {
const hasTitles = videos.some(v => v.title.trim() !== “”);
if (!generalTitle && !hasTitles && magicContext.trim() === “”) {
console.warn(“Preencha o Título Geral, nomes dos clipes ou cole uma descrição para a IA saber o que fazer!”);
return;
}
setIsGeneratingMagic(true);
try {
const apiKey = “”;
const prompt = `Você é um roteirista de vídeos virais curtos (TikTok/Shorts).
Crie um roteiro formato Top ${topCount}.
Título/Tema Geral: “${generalTitle || ‘Tópicos Virais’}”
Nomes dos clipes informados pelo usuário:
${videos.map((v, i) => `${i + 1}. ${v.title || ‘Crie um nome criativo’}`).join(‘n’)}
${magicContext.trim() !== “” ? `nContexto extra ou Roteiro Base fornecido pelo usuário:n”${magicContext}”n(Use este contexto como base e guia absoluto para escrever as narrações!)` : ”}
Diretrizes Obrigatórias:
– Estilo e Tom do vídeo: ${magicTone}.
– Número de locutores/narradores por clipe: ${magicNarrators}.
– Vozes disponíveis: Fenrir (Masculina enérgica), Kore (Feminina clara), Charon (Idoso), Puck (Adolescente).
– Se houver 2 ou 3 narradores, faça-os interagir, debater ou alternar as falas em cada clipe usando as vozes distintas.
– As falas devem ser dinâmicas e curtas (máximo 2 frases por fala).
– Retorne exatamente ${topCount} clipes no JSON.`;
const payload = {
contents: [{ parts: [{ text: prompt }] }],
generationConfig: {
responseMimeType: “application/json”,
responseSchema: {
type: “OBJECT”,
properties: {
generalTitle: { type: “STRING”, description: “Um título super viral e clickbait para o vídeo geral” },
clips: {
type: “ARRAY”,
items: {
type: “OBJECT”,
properties: {
title: { type: “STRING”, description: “Nome ou título muito curto do item” },
caption: { type: “STRING”, description: “Legenda de impacto/viral para exibir na tela” },
narrations: {
type: “ARRAY”,
items: {
type: “OBJECT”,
properties: {
text: { type: “STRING”, description: “A fala do narrador” },
voice: { type: “STRING”, description: “Uma das vozes: Fenrir, Kore, Charon, Puck” }
}
}
}
}
}
}
}
}
},
model: “gemini-2.5-flash-preview-09-2025″
};
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(payload)
});
const result = await response.json();
const rawText = result.candidates[0].content.parts[0].text;
const cleanText = rawText.replace(/“`json/gi, ”).replace(/“`/g, ”).trim();
const parsed = JSON.parse(cleanText);
if (parsed.generalTitle && !generalTitle) setGeneralTitle(parsed.generalTitle);
if (parsed.clips && parsed.clips.length > 0) {
setVideos(prev => {
const newVids = […prev];
for (let i = 0; i < Math.min(newVids.length, parsed.clips.length); i++) { const clipData = parsed.clips[i]; newVids[i] = { ...newVids[i], title: clipData.title || newVids[i].title, caption: clipData.caption || newVids[i].caption, }; if (clipData.narrations && clipData.narrations.length > 0) {
newVids[i].narrations = clipData.narrations.map(n => ({
id: Math.random().toString(36).substring(2, 9),
script: n.text,
narrationVoice: n.voice || ‘Fenrir’,
narrationTone: magicTone,
customAudioUrl: null,
audioDuration: 0,
timedCaptions: [],
isGeneratingScript: false,
isGeneratingText: false,
audioGenerated: false
}));
}
}
return newVids;
});
}
} catch (e) {
console.error(“Falha ao gerar o roteiro: “, e);
} finally {
setIsGeneratingMagic(false);
}
};
const startExport = async () => {
const validVideos = videos.filter(v => v.localUrl);
if (validVideos.length === 0) return alert(“Anexe vídeos primeiro!”);
setIsExporting(true);
setExportProgress(0);
try {
const canvas = document.createElement(‘canvas’);
canvas.width = 720; canvas.height = 1280;
const ctx = canvas.getContext(‘2d’);
const audioCtx = new AudioContext();
const dest = audioCtx.createMediaStreamDestination();
const playWhoosh = () => {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = ‘sine’;
osc.frequency.setValueAtTime(400, audioCtx.currentTime);
osc.frequency.exponentialRampToValueAtTime(40, audioCtx.currentTime + 0.4);
gain.gain.setValueAtTime(0, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0.5, audioCtx.currentTime + 0.1);
gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.4);
osc.connect(gain);
gain.connect(dest);
osc.start(audioCtx.currentTime);
osc.stop(audioCtx.currentTime + 0.4);
};
const recorder = new MediaRecorder(new MediaStream([…canvas.captureStream(30).getVideoTracks(), …dest.stream.getAudioTracks()]), { mimeType: ‘video/webm’ });
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);
const exportPromise = new Promise(resolve => recorder.onstop = () => resolve(new Blob(chunks, { type: ‘video/webm’ })));
recorder.start();
const hiddenDiv = document.createElement(‘div’);
hiddenDiv.style.display = ‘none’;
document.body.appendChild(hiddenDiv);
for (let i = 0; i < validVideos.length; i++) { const v = validVideos[i]; setExportMsg(`Renderizando Clipe ${i + 1}...`); setExportProgress((i / validVideos.length) * 100); await new Promise(resolveClip => {
hiddenDiv.innerHTML = ”;
const videoEl = document.createElement(‘video’);
videoEl.src = v.localUrl; videoEl.playsInline = true;
hiddenDiv.appendChild(videoEl);
const source = audioCtx.createMediaElementSource(videoEl);
const gain = audioCtx.createGain(); gain.gain.value = v.volume / 100;
source.connect(gain); gain.connect(dest);
videoEl.onloadedmetadata = () => {
const startSec = (v.trimStart / 100) * videoEl.duration;
const endSec = (v.trimEnd / 100) * videoEl.duration;
videoEl.currentTime = startSec;
let whooshPlayed = false;
let bgmEl = null;
let bgmGain = null;
if (v.bgmUrl) {
bgmEl = document.createElement(‘audio’); bgmEl.src = v.bgmUrl; bgmEl.loop = true;
hiddenDiv.appendChild(bgmEl);
const bgmSource = audioCtx.createMediaElementSource(bgmEl);
bgmGain = audioCtx.createGain(); bgmGain.gain.value = v.bgmVolume / 100;
bgmSource.connect(bgmGain); bgmGain.connect(dest);
}
const validNarrations = v.narrations.filter(n => n.audioGenerated);
let currentOffset = startSec;
const exportNarrationBlocks = validNarrations.map(n => {
const block = { …n, startPlay: currentOffset, endPlay: currentOffset + n.audioDuration };
currentOffset += n.audioDuration;
return block;
});
const ttsElements = exportNarrationBlocks.map(block => {
const ttsEl = document.createElement(‘audio’);
ttsEl.src = block.customAudioUrl;
hiddenDiv.appendChild(ttsEl);
const ttsSource = audioCtx.createMediaElementSource(ttsEl);
const ttsGain = audioCtx.createGain();
ttsGain.gain.value = v.narrationVolume / 100;
ttsSource.connect(ttsGain);
ttsGain.connect(dest);
return { el: ttsEl, block, ttsGain };
});
videoEl.play(); if (bgmEl) bgmEl.play();
const exportPlayedSFX = new Set(); // NOVO: Controle de SFX na exportação
const drawFrame = () => {
if (videoEl.currentTime >= endSec || videoEl.ended) {
videoEl.pause(); if (bgmEl) bgmEl.pause();
ttsElements.forEach(({el}) => el.pause());
resolveClip(); return;
}
let isAnyVoicePlaying = false;
ttsElements.forEach(({ el, block, ttsGain }) => {
if (videoEl.currentTime >= block.startPlay && videoEl.currentTime < block.endPlay) { isAnyVoicePlaying = true; if (el.paused && el.currentTime === 0) el.play().catch(()=>{});
} else if (videoEl.currentTime >= block.endPlay && !el.paused) {
el.pause();
}
});
// Processamento dos Efeitos Sonoros Manuais (Exportação)
if (v.sfxTracks && v.sfxTracks.length > 0) {
v.sfxTracks.forEach(sfx => {
const sfxTime = startSec + (sfx.startTimePerc / 100) * (endSec – startSec);
if (videoEl.currentTime >= sfxTime && !exportPlayedSFX.has(sfx.id)) {
playGeneratedSFX(sfx.type, audioCtx, dest, sfx.volume / 100);
exportPlayedSFX.add(sfx.id);
}
});
}
if (bgmEl && bgmGain && v.autoDucking) {
const targetVol = isAnyVoicePlaying ? (v.bgmVolume * 0.15) / 100 : v.bgmVolume / 100;
bgmGain.gain.value += (targetVol – bgmGain.gain.value) * 0.1;
}
let vfxOffsetX = 0;
let vfxOffsetY = 0;
if (v.vfxTracks && v.vfxTracks.length > 0) {
v.vfxTracks.forEach(vfx => {
const sfxTime = startSec + (vfx.startTimePerc / 100) * (endSec – startSec);
const eTime = sfxTime + (vfx.durationPerc / 100) * (endSec – startSec);
if (videoEl.currentTime >= sfxTime && videoEl.currentTime <= eTime) { const intensity = (vfx.intensity || 50) / 100 * 20; const speed = (vfx.speed || 50) / 100 * 50; const t = videoEl.currentTime * 1000; vfxOffsetX += (Math.sin(t * 0.01 * speed) + Math.cos(t * 0.013 * speed)) * intensity; vfxOffsetY += (Math.cos(t * 0.011 * speed) + Math.sin(t * 0.009 * speed)) * intensity; } }); } ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); const timeLeft = endSec - videoEl.currentTime; const timeElapsed = videoEl.currentTime - startSec; const fadeTime = 0.4; let videoAlpha = 1; if (i < validVideos.length - 1 && timeLeft <= fadeTime) { videoAlpha = Math.max(0, timeLeft / fadeTime); if (!whooshPlayed) { playWhoosh(); whooshPlayed = true; } } else if (i > 0 && timeElapsed <= fadeTime) { videoAlpha = Math.min(1, timeElapsed / fadeTime); } const zoom = v.zoom / 100; const vRatio = videoEl.videoWidth / videoEl.videoHeight; const cRatio = canvas.width / canvas.height; let dw, dh; if (vRatio > cRatio) {
dh = canvas.height;
dw = videoEl.videoWidth * (canvas.height / videoEl.videoHeight);
} else {
dw = canvas.width;
dh = videoEl.videoHeight * (canvas.width / videoEl.videoWidth);
}
const basePosX = (canvas.width – dw*zoom)/2;
const basePosY = (canvas.height – dh*zoom)/2;
let finalPosX = basePosX + (v.posX / 100) * canvas.width + vfxOffsetX;
let finalPosY = basePosY + (v.posY / 100) * canvas.height + vfxOffsetY;
ctx.globalAlpha = videoAlpha;
ctx.filter = getFilterStyle(v.filter || ‘none’);
ctx.drawImage(videoEl, finalPosX, finalPosY, dw*zoom, dh*zoom);
ctx.filter = ‘none’;
ctx.globalAlpha = 1;
const defaultLabel = topCount === 1 && globalPrefix === “TOP” ? “VÍDEO” : (showNumbers ? `${globalPrefix} ${topCount – i}`.trim() : globalPrefix.trim());
const labelText = v.customTopLabel !== null ? v.customTopLabel : defaultLabel;
if (labelText.trim() !== “”) {
ctx.fillStyle = ‘rgba(0,0,0,0.8)’;
ctx.fillRect(20, 20, 240, 90);
ctx.strokeStyle = ‘white’;
ctx.lineWidth = 2;
ctx.strokeRect(20, 20, 240, 90);
ctx.fillStyle = ‘white’;
ctx.font = ‘black 55px sans-serif’;
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘middle’;
ctx.fillText(labelText, 140, 65);
}
if (useStickers) {
const emoji = getSticker(i);
const bounce = Math.sin(videoEl.currentTime * 5) * 15;
ctx.font = ‘100px Arial’;
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘middle’;
ctx.fillText(emoji, canvas.width – 100, 120 + bounce);
}
if (v.caption) {
const py = (v.captionY / 100) * canvas.height;
const cSize = v.captionSize || 68;
const cStyle = v.captionStyle || ‘style1’;
const textUpper = v.caption.toUpperCase();
ctx.font = `900 ${cSize}px sans-serif`; ctx.textAlign = ‘center’; ctx.textBaseline = ‘middle’;
ctx.shadowColor = ‘transparent’; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0;
ctx.lineJoin = ’round’;
if (cStyle === ‘style1’) {
ctx.lineWidth = cSize * 0.2; ctx.strokeStyle = ‘black’; ctx.strokeText(textUpper, canvas.width/2, py);
ctx.fillStyle = ‘#FBBF24’; ctx.fillText(textUpper, canvas.width/2, py);
} else if (cStyle === ‘style2’) {
ctx.shadowColor = ‘rgba(0,0,0,0.8)’; ctx.shadowBlur = 15; ctx.shadowOffsetY = 5;
ctx.fillStyle = ‘white’; ctx.fillText(textUpper, canvas.width/2, py);
} else if (cStyle === ‘style3’) {
ctx.shadowColor = ‘#EC4899’; ctx.shadowBlur = 20;
ctx.fillStyle = ‘white’; ctx.fillText(textUpper, canvas.width/2, py);
ctx.fillText(textUpper, canvas.width/2, py);
} else if (cStyle === ‘style4’) {
const tWidth = ctx.measureText(textUpper).width;
ctx.fillStyle = ‘rgba(0,0,0,0.7)’;
ctx.fillRect(canvas.width/2 – tWidth/2 – 20, py – cSize/2 – 10, tWidth + 40, cSize + 20);
ctx.fillStyle = ‘white’; ctx.fillText(textUpper, canvas.width/2, py);
} else if (cStyle === ‘style5’) {
ctx.fillStyle = ‘#064E3B’; ctx.fillText(textUpper, canvas.width/2 + 6, py + 6);
ctx.lineWidth = cSize * 0.2; ctx.strokeStyle = ‘#14532D’; ctx.strokeText(textUpper, canvas.width/2, py);
ctx.fillStyle = ‘#4ADE80’; ctx.fillText(textUpper, canvas.width/2, py);
}
ctx.shadowColor = ‘transparent’; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0;
}
if (v.showNarration) {
const activeBlock = exportNarrationBlocks.find(b => videoEl.currentTime >= b.startPlay && videoEl.currentTime < b.endPlay); if (activeBlock && activeBlock.timedCaptions.length > 0) {
const localCurrentTime = videoEl.currentTime – activeBlock.startPlay;
const segment = activeBlock.timedCaptions.find(s => localCurrentTime >= s.startTime && localCurrentTime <= s.endTime); if (segment) { const ny = (v.narrationCaptionY / 100) * canvas.height; const nSize = v.narrationCaptionSize || 60; const nStyle = v.narrationCaptionStyle || 'style1'; ctx.font = `900 ${nSize}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.lineJoin = 'round'; const textUpper = segment.word.toUpperCase(); ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; if (nStyle === 'hormozi') { // Estilo Alex Hormozi (Animado, Cores Dinâmicas e Emojis) const progress = localCurrentTime - segment.startTime; const { color, emoji, rot } = getHormoziStyle(segment.word); // Efeito de Pop-in (Bounce) let bounceScale = 1; if (progress < 0.15) { const p = progress / 0.15; bounceScale = 0.5 + Math.sin(p * Math.PI * 0.7) * 0.7; // Começa pequeno, passa de 1 e volta a 1 } ctx.save(); ctx.translate(canvas.width/2, ny); ctx.scale(bounceScale, bounceScale); ctx.rotate(rot); ctx.fillStyle = color; ctx.lineWidth = nSize * 0.25; ctx.strokeStyle = 'black'; ctx.strokeText(textUpper, 0, 0); ctx.fillText(textUpper, 0, 0); if (emoji) { ctx.font = `${nSize * 0.9}px Arial`; const bounceY = Math.sin(progress * 10) * 10; // Flutuação rápida do emoji ctx.fillText(emoji, 0, -nSize + bounceY); } ctx.restore(); } else if (nStyle === 'mrbeast') { // Estilo MrBeast (Fundo de cor sólida marcante com leve rotação) const progress = localCurrentTime - segment.startTime; const { bgColor, textColor, rot } = getMrBeastStyle(segment.word); let bounceScale = 1; if (progress < 0.1) bounceScale = 0.8 + (progress / 0.1) * 0.2; ctx.save(); ctx.translate(canvas.width/2, ny); ctx.scale(bounceScale, bounceScale); ctx.rotate(rot); const tWidth = ctx.measureText(textUpper).width; const paddingX = nSize * 0.4; const paddingY = nSize * 0.3; // Desenhar a caixa de fundo estilo marcador ctx.fillStyle = bgColor; ctx.beginPath(); if (ctx.roundRect) { ctx.roundRect(-tWidth/2 - paddingX, -nSize/2 - paddingY/2, tWidth + paddingX*2, nSize + paddingY, 12); } else { ctx.fillRect(-tWidth/2 - paddingX, -nSize/2 - paddingY/2, tWidth + paddingX*2, nSize + paddingY); } ctx.fill(); // Se o fundo for amarelo (texto preto), adicionar uma borda para realce if (textColor === '#000000') { ctx.lineWidth = 4; ctx.strokeStyle = '#000000'; ctx.stroke(); } // Desenhar o texto ctx.fillStyle = textColor; ctx.fillText(textUpper, 0, 0); ctx.restore(); } else { // Estilos Clássicos if (nStyle === 'style1') { ctx.fillStyle = '#064E3B'; ctx.fillText(textUpper, canvas.width/2 + 6, ny + 6); ctx.lineWidth = nSize / 5; ctx.strokeStyle = '#14532D'; ctx.strokeText(textUpper, canvas.width/2, ny); ctx.fillStyle = '#4ADE80'; ctx.fillText(textUpper, canvas.width/2, ny); } else if (nStyle === 'style2') { ctx.shadowColor = 'rgba(0,0,0,0.8)'; ctx.shadowBlur = 15; ctx.shadowOffsetY = 5; ctx.fillStyle = 'white'; ctx.fillText(textUpper, canvas.width/2, ny); } else if (nStyle === 'style3') { ctx.shadowColor = '#EC4899'; ctx.shadowBlur = 20; ctx.fillStyle = 'white'; ctx.fillText(textUpper, canvas.width/2, ny); ctx.fillText(textUpper, canvas.width/2, ny); } else if (nStyle === 'style4') { const tWidth = ctx.measureText(textUpper).width; ctx.fillStyle = 'rgba(0,0,0,0.7)'; ctx.fillRect(canvas.width/2 - tWidth/2 - 20, ny - nSize/2 - 10, tWidth + 40, nSize + 20); ctx.fillStyle = 'white'; ctx.fillText(textUpper, canvas.width/2, ny); } else if (nStyle === 'style5') { const st = nSizePrev * 0.15; styleProps = { ...styleProps, color: 'white', textShadow: `-${st}px -${st}px 0 #9333EA, 0 -${st}px 0 #9333EA, ${st}px -${st}px 0 #9333EA, ${st}px 0 0 #9333EA, ${st}px ${st}px 0 #9333EA, 0 ${st}px 0 #9333EA, -${st}px ${st}px 0 #9333EA, -${st}px 0 0 #9333EA, 0 4px 15px rgba(147, 51, 234, 0.8)` }; } } ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; } } } requestAnimationFrame(drawFrame); }; drawFrame(); }; }); } document.body.removeChild(hiddenDiv); recorder.stop(); setFinalVideoUrl(URL.createObjectURL(await exportPromise)); setStep(3); setIsExporting(false); } catch (e) { console.error(e); setIsExporting(false); } }; const downloadVideo = () => {
const link = document.createElement(“a”);
link.href = finalVideoUrl; link.download = `Viral_Top${topCount}.webm`;
link.click();
};
const startProcessing = () => {
setIsProcessing(true);
setLoadingProgress(0);
const stages = [“Conectando…”, “Baixando vídeos…”, “Formatando 9:16…”, “Gerando narração…”, “Montando timeline…”];
let currentStage = 0;
const interval = setInterval(() => {
setLoadingProgress(prev => {
const next = prev + 1;
if (next >= 100) {
clearInterval(interval);
setTimeout(() => { setIsProcessing(false); setStep(2); setPlayingItemId(1); }, 500);
return 100;
}
return next;
});
if (Math.random() > 0.8 && currentStage < stages.length) { setLoadingMsg(stages[currentStage]); currentStage++; } }, 50); }; const renderStep1 = () => (

Configuração Viral

Personalize a sua lista para o YouTube Shorts.

setGeneralTitle(e.target.value)} />
setGlobalPrefix(e.target.value.toUpperCase())} title=”Personalizar o prefixo para todas as etiquetas” />

setShowNumbers(e.target.checked)} className=”w-3.5 h-3.5 rounded bg-gray-950 border-gray-700 text-purple-600″ />
INCLUIR NÚMEROS (1,2,3)


{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => ({num === 1 ? ‘1 Vídeo’ : (showNumbers ? `${globalPrefix} ${num}`.trim() : `${num} Vídeos`)}))}

setVideoType(‘best’)} className={`flex-1 p-2 rounded-lg border text-xs font-bold ${videoType===’best’?’bg-purple-600 border-purple-500′:’border-gray-700 text-gray-500′}`}>🔥 MELHORES
setVideoType(‘worst’)} className={`flex-1 p-2 rounded-lg border text-xs font-bold ${videoType===’worst’?’bg-pink-600 border-pink-500′:’border-gray-700 text-gray-500′}`}>💀 PIORES

setUseStickers(e.target.checked)} className=”w-3.5 h-3.5 rounded bg-gray-950 border-gray-700 text-purple-600″ />
ADICIONAR STICKERS AUTOMÁTICOS

{videos.map((video, index) => {
const defaultLabel = topCount === 1 && globalPrefix === “TOP” ? ‘VÍDEO’ : (showNumbers ? `${globalPrefix} ${topCount-index}`.trim() : globalPrefix.trim());
return (
handleVideoChange(video.id, ‘customTopLabel’, e.target.value)} title=”Personalizar etiqueta (ex: FATO 1)” />
handleVideoChange(video.id, ‘title’, e.target.value)} />
handleFileUpload(video.id, e)} className=”hidden” id={`f-${video.id}`} />

{video.localUrl ? ‘ANEXADO ✓’ : ‘ANEXAR .MP4’}

);
})}

Botão Mágico (Gerador de Roteiro IA)

Preencha os nomes dos vídeos acima e a IA criará o roteiro perfeito!

setMagicContext(e.target.value)}<br /> /><br /> <select value={magicTone} onChange={(e) => setMagicTone(e.target.value)} className=”w-full bg-gray-950 border border-indigo-500/50 rounded-lg px-4 py-3 text-white text-sm focus:outline-none”><option value="Sério e Impactante">Sério e Impactante</option><option value="Engraçado e Comédia">Engraçado e Comédia</option><option value="Documentário Informativo">Documentário Informativo</option><option value="Zueira e Memes">Zueira e Memes</option><option value="Religioso e Reflexão">Religioso e Reflexão</option><option value="Assustador e Misterioso">Assustador e Misterioso</option><option value="Motivacional (Sigma)">Motivacional (Sigma)</option><option value="Curiosidades Rápidas">Curiosidades Rápidas</option><option value="Sarcástico e Irônico">Sarcástico e Irônico</option></select><br /> <select value={magicNarrators} onChange={(e) => setMagicNarrators(Number(e.target.value))} className=”w-full bg-gray-950 border border-indigo-500/50 rounded-lg px-4 py-3 text-white text-sm focus:outline-none”><option value={1}>1 Narrador</option><option value={2}>2 Narradores (Diálogo)</option><option value={3}>3 Narradores (Interação)</option></select><br /> <button onClick={generateMagicScript} disabled={isGeneratingMagic} className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-black py-3 rounded-lg flex items-center justify-center gap-2 transition-all shadow-[0_0_15px_rgba(79,70,229,0.4)]"><br /> {isGeneratingMagic ? <Loader2 size={16} className="animate-spin" /> : <Wand2 size={16} />}<br /> {isGeneratingMagic ? “CRIANDO ROTEIRO MÁGICO…” : “GERAR ROTEIRO COM BASE NOS NOMES (TÍTULO E VOZES)”}<br /> </button><br /> <button onClick={() => { setIsProcessing(true); setTimeout(()=> { setStep(2); setIsProcessing(false); setPlayingItemId(1); }, 1500); }} className=”w-full bg-gradient-to-r from-purple-600 to-pink-600 py-4 rounded-xl font-bold shadow-lg text-white”>ABRIR ESTÚDIO DE EDIÇÃO</button><br /> );<br /> const renderStep2 = () => {<br /> const activeVideo = videos.find(v => v.id === playingItemId) || videos[0];<br /> const activeIndex = videos.findIndex(v => v.id === activeVideo.id);<br /> const defaultActiveLabel = topCount === 1 && globalPrefix === “TOP” ? “VÍDEO” : (showNumbers ? `${globalPrefix} ${topCount – activeIndex}`.trim() : globalPrefix.trim());<br /> const activeTopLabel = activeVideo.customTopLabel !== null ? activeVideo.customTopLabel : defaultActiveLabel;<br /> const startSec = (activeVideo.trimStart / 100) * activeVideo.videoDuration;<br /> const endSec = (activeVideo.trimEnd / 100) * activeVideo.videoDuration;<br /> const validNarrations = activeVideo.narrations.filter(n => n.audioGenerated);<br /> let currentOffsetPreview = startSec;<br /> const narrationBlocksPreview = validNarrations.map(n => {<br /> const block = { …n, startPlay: currentOffsetPreview, endPlay: currentOffsetPreview + n.audioDuration };<br /> currentOffsetPreview += n.audioDuration;<br /> return block;<br /> });<br /> const handlePreviewTimeUpdate = (e) => {<br /> const vid = e.target;<br /> if (vid.currentTime >= endSec – 0.1) {<br /> vid.currentTime = startSec;<br /> if (bgmRef.current) bgmRef.current.currentTime = 0;<br /> playedSFXIdsRef.current.clear(); // Reset dos SFX<br /> narrationBlocksPreview.forEach(block => {<br /> const audioEl = document.getElementById(`audio-${block.id}`);<br /> if (audioEl) { audioEl.pause(); audioEl.currentTime = 0; }<br /> });<br /> if (!isPreviewPlaying) vid.pause();<br /> } else if (vid.currentTime < startSec) { vid.currentTime = startSec; } if (isPreviewPlaying) { let isAnyVoicePlayingPreview = false; if (!previewAudioCtxRef.current) previewAudioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)(); if (previewAudioCtxRef.current.state === 'suspended') previewAudioCtxRef.current.resume(); // Processamento dos Efeitos Sonoros Manuais (Prévia) if (activeVideo.sfxTracks && activeVideo.sfxTracks.length > 0) {<br /> activeVideo.sfxTracks.forEach(sfx => {<br /> const sfxTime = startSec + (sfx.startTimePerc / 100) * (endSec – startSec);<br /> if (vid.currentTime >= sfxTime && !playedSFXIdsRef.current.has(sfx.id)) {<br /> playGeneratedSFX(sfx.type, previewAudioCtxRef.current, previewAudioCtxRef.current.destination, sfx.volume / 100);<br /> playedSFXIdsRef.current.add(sfx.id);<br /> }<br /> });<br /> }<br /> narrationBlocksPreview.forEach(block => {<br /> const audioEl = document.getElementById(`audio-${block.id}`);<br /> if (audioEl) {<br /> audioEl.volume = activeVideo.narrationVolume / 100;<br /> if (vid.currentTime >= block.startPlay && vid.currentTime < block.endPlay) { isAnyVoicePlayingPreview = true; if (audioEl.paused) { audioEl.currentTime = vid.currentTime - block.startPlay; audioEl.play().catch(()=>{});<br /> }<br /> setCurrentTimePreview(vid.currentTime – block.startPlay);<br /> } else {<br /> if (!audioEl.paused) {<br /> audioEl.pause();<br /> audioEl.currentTime = 0;<br /> }<br /> }<br /> }<br /> });<br /> if (bgmRef.current && activeVideo.autoDucking) {<br /> const targetVol = isAnyVoicePlayingPreview ? (activeVideo.bgmVolume * 0.15) / 100 : activeVideo.bgmVolume / 100;<br /> bgmRef.current.volume += (targetVol – bgmRef.current.volume) * 0.1;<br /> }<br /> }<br /> };<br /> const restartPreview = () => {<br /> if (previewVideoRef.current) previewVideoRef.current.currentTime = startSec;<br /> if (bgmRef.current) bgmRef.current.currentTime = 0;<br /> playedSFXIdsRef.current.clear(); // Reset dos SFX<br /> activeVideo.narrations.forEach(n => {<br /> const audioEl = document.getElementById(`audio-${n.id}`);<br /> if (audioEl) { audioEl.pause(); audioEl.currentTime = 0; }<br /> });<br /> if (!isPreviewPlaying) setIsPreviewPlaying(true);<br /> };<br /> return (<br /> <Settings size={14} className="text-purple-400" /><br /> CLIPE #{activeVideo.id}<br /> {activeVideo ? (<br /> {activeVideo.localUrl && (<br /> <video key={`v-${activeVideo.id}`} src={activeVideo.localUrl} autoPlay={isPreviewPlaying} muted={false} ref={previewVideoRef} onTimeUpdate={handlePreviewTimeUpdate} className="absolute inset-0 w-full h-full object-cover transition-all duration-200" style={{ transform: `scale(${activeVideo.zoom/100}) translate(${activeVideo.posX}%, ${activeVideo.posY}%)`, filter: getFilterStyle(activeVideo.filter || 'none') }} /><br /> )}<br /> {activeVideo.bgmUrl && (<audio key={`bgm-${activeVideo.id}`} src={activeVideo.bgmUrl} autoPlay={isPreviewPlaying} loop ref={bgmRef} />)}<br /> {activeVideo.narrations.map(n => n.audioGenerated ? (<br /> <audio key={`a-${n.id}`} id={`audio-${n.id}`} src={n.customAudioUrl} preload="auto" /><br /> ) : null)}<br /> <button onClick={restartPreview} className="p-2 rounded-full text-white hover:bg-gray-700 transition-colors" title="Reiniciar Prévia"><br /> <RotateCcw size={16} /><br /> </button><br /> <button onClick={() => setIsPreviewPlaying(!isPreviewPlaying)} className=”p-2 rounded-full text-white hover:bg-gray-700 transition-colors” title=”Play/Pause”><br /> {isPreviewPlaying ? <Pause size={16} /> : <Play size={16} />}<br /> </button><br /> {activeTopLabel.trim() !== “” && (<br /> {activeTopLabel}<br /> )}<br /> {useStickers && (<br /> {getSticker(activeIndex)}<br /> )}<br /> {(() => {<br /> const cSizePrev = (activeVideo.captionSize || 68) * 0.5;<br /> const cStyle = activeVideo.captionStyle || ‘style1’;<br /> let styleProps = { fontSize: `${cSizePrev}px` };<br /> if (cStyle === ‘style1’) {<br /> const st = cSizePrev * 0.15;<br /> styleProps = { …styleProps, color: ‘#FBBF24’, textShadow: `-${st}px -${st}px 0 #000, 0 -${st}px 0 #000, ${st}px -${st}px 0 #000, ${st}px 0 0 #000, ${st}px ${st}px 0 #000, 0 ${st}px 0 #000, -${st}px ${st}px 0 #000, -${st}px 0 0 #000, 4px 4px 0 #000` };<br /> } else if (cStyle === ‘style2’) {<br /> styleProps = { …styleProps, color: ‘white’, textShadow: ‘0px 4px 10px rgba(0,0,0,0.8)’ };<br /> } else if (cStyle === ‘style3’) {<br /> styleProps = { …styleProps, color: ‘white’, textShadow: ‘0 0 10px #EC4899, 0 0 20px #EC4899’ };<br /> } else if (cStyle === ‘style4’) {<br /> styleProps = { …styleProps, color: ‘white’, backgroundColor: ‘rgba(0,0,0,0.7)’, padding: ‘2px 8px’, borderRadius: ‘6px’ };<br /> } else if (cStyle === ‘style5’) {<br /> const st = cSizePrev * 0.15;<br /> styleProps = { …styleProps, color: ‘#4ADE80’, textShadow: `-${st}px -${st}px 0 #14532D, 0 -${st}px 0 #14532D, ${st}px -${st}px 0 #14532D, ${st}px 0 0 #14532D, ${st}px ${st}px 0 #14532D, 0 ${st}px 0 #14532D, -${st}px ${st}px 0 #14532D, -${st}px 0 0 #14532D, 3px 3px 0 #064E3B` };<br /> }<br /> return (<br /> {activeVideo.caption || activeVideo.title || “VÍDEO”}<br /> );<br /> })()}<br /> {activeVideo.showNarration && (<br /> {narrationBlocksPreview.map(block => {<br /> if (previewVideoRef.current && previewVideoRef.current.currentTime >= block.startPlay && previewVideoRef.current.currentTime < block.endPlay) { return block.timedCaptions.filter(s => currentTimePreview >= s.startTime && currentTimePreview <= s.endTime).map((seg, idx) => {<br /> const nSizePrev = (activeVideo.narrationCaptionSize || 60) * 0.4;<br /> const nStyle = activeVideo.narrationCaptionStyle || ‘style1’;<br /> if (nStyle === ‘hormozi’) {<br /> const { color, emoji, rot } = getHormoziStyle(seg.word);<br /> const progress = currentTimePreview – seg.startTime;<br /> const isPopping = progress < 0.15; const strokeW = nSizePrev * 0.15; const hStyle = { fontSize: `${nSizePrev}px`, color: color, textShadow: `-${strokeW}px -${strokeW}px 0 #000, 0 -${strokeW}px 0 #000, ${strokeW}px -${strokeW}px 0 #000, ${strokeW}px 0 0 #000, ${strokeW}px ${strokeW}px 0 #000, 0 ${strokeW}px 0 #000, -${strokeW}px ${strokeW}px 0 #000, -${strokeW}px 0 0 #000`, transform: `rotate(${rot * 50}deg)`, }; return ( {emoji && {emoji}} {seg.word} ); } else if (nStyle === 'mrbeast') { const { bgColor, textColor, rot } = getMrBeastStyle(seg.word); const progress = currentTimePreview - seg.startTime; const isPopping = progress < 0.1; const mbStyle = { fontSize: `${nSizePrev}px`, color: textColor, backgroundColor: bgColor, padding: '4px 12px', borderRadius: '8px', boxShadow: '0 8px 15px rgba(0,0,0,0.3)', transform: `rotate(${rot * 40}deg)`, border: `2px solid ${textColor === '#000000' ? '#000' : 'transparent'}` }; return ( {seg.word} ); } // Estilos Clássicos Prévia let styleProps = { fontSize: `${nSizePrev}px` }; if (nStyle === 'style1') { const st = nSizePrev * 0.15; styleProps = { ...styleProps, color: '#4ADE80', textShadow: `-${st}px -${st}px 0 #14532D, 0 -${st}px 0 #14532D, ${st}px -${st}px 0 #14532D, ${st}px 0 0 #14532D, ${st}px ${st}px 0 #14532D, 0 ${st}px 0 #14532D, -${st}px ${st}px 0 #14532D, -${st}px 0 0 #14532D, 3px 3px 0 #064E3B` }; } else if (nStyle === 'style2') { styleProps = { ...styleProps, color: 'white', textShadow: '0px 4px 10px rgba(0,0,0,0.8)' }; } else if (nStyle === 'style3') { styleProps = { ...styleProps, color: 'white', textShadow: '0 0 10px #EC4899, 0 0 20px #EC4899' }; } else if (nStyle === 'style4') { styleProps = { ...styleProps, color: 'white', backgroundColor: 'rgba(0,0,0,0.7)', padding: '2px 8px', borderRadius: '6px' }; } else if (nStyle === 'style5') { const st = nSizePrev * 0.15; styleProps = { ...styleProps, color: 'white', textShadow: `-${st}px -${st}px 0 #9333EA, 0 -${st}px 0 #9333EA, ${st}px -${st}px 0 #9333EA, ${st}px 0 0 #9333EA, ${st}px ${st}px 0 #9333EA, 0 ${st}px 0 #9333EA, -${st}px ${st}px 0 #9333EA, -${st}px 0 0 #9333EA, 0 4px 15px rgba(147, 51, 234, 0.8)` }; } return ( {seg.word} ); }); } return null; })} )} ) : null} {/* MENU HORIZONTAL DE FERRAMENTAS DO CLIPE */} <button onClick={() => setActiveToolTab(‘enquadramento’)} title=”Enquadramento” className={`w-9 h-9 flex items-center justify-center rounded-xl transition-all shrink-0 ${activeToolTab === ‘enquadramento’ ? ‘bg-emerald-600 text-white shadow-[0_0_10px_rgba(16,185,129,0.3)]’ : ‘bg-gray-800/50 text-gray-400 hover:bg-gray-800 hover:text-white’}`}><br /> <Maximize size={16} className={activeToolTab === 'enquadramento' ? 'text-white' : 'text-emerald-500'}/><br /> </button><br /> <button onClick={() => setActiveToolTab(‘bgm’)} title=”Música de Fundo” className={`w-9 h-9 flex items-center justify-center rounded-xl transition-all shrink-0 ${activeToolTab === ‘bgm’ ? ‘bg-cyan-600 text-white shadow-[0_0_10px_rgba(8,145,178,0.3)]’ : ‘bg-gray-800/50 text-gray-400 hover:bg-gray-800 hover:text-white’}`}><br /> <Music size={16} className={activeToolTab === 'bgm' ? 'text-white' : 'text-cyan-500'}/><br /> </button><br /> <button onClick={() => setActiveToolTab(‘legenda’)} title=”Legenda de Título” className={`w-9 h-9 flex items-center justify-center rounded-xl transition-all shrink-0 ${activeToolTab === ‘legenda’ ? ‘bg-yellow-500 text-black shadow-[0_0_10px_rgba(234,179,8,0.3)]’ : ‘bg-gray-800/50 text-gray-400 hover:bg-gray-800 hover:text-white’}`}><br /> <Type size={16} className={activeToolTab === 'legenda' ? 'text-black' : 'text-yellow-500'}/><br /> </button><br /> <button onClick={() => setActiveToolTab(‘narracao’)} title=”Narração IA” className={`w-9 h-9 flex items-center justify-center rounded-xl transition-all shrink-0 ${activeToolTab === ‘narracao’ ? ‘bg-rose-600 text-white shadow-[0_0_10px_rgba(225,29,72,0.3)]’ : ‘bg-gray-800/50 text-gray-400 hover:bg-gray-800 hover:text-white’}`}><br /> <Mic size={16} className={activeToolTab === 'narracao' ? 'text-white' : 'text-rose-500'}/><br /> </button><br /> <button onClick={() => setActiveToolTab(‘corte’)} title=”Corte de Vídeo” className={`w-9 h-9 flex items-center justify-center rounded-xl transition-all shrink-0 ${activeToolTab === ‘corte’ ? ‘bg-purple-600 text-white shadow-[0_0_10px_rgba(147,51,234,0.3)]’ : ‘bg-gray-800/50 text-gray-400 hover:bg-gray-800 hover:text-white’}`}><br /> <Scissors size={16} className={activeToolTab === 'corte' ? 'text-white' : 'text-purple-500'}/><br /> </button><br /> <button onClick={() => setActiveToolTab(‘sfx’)} title=”Efeitos Sonoros” className={`w-9 h-9 flex items-center justify-center rounded-xl transition-all shrink-0 ${activeToolTab === ‘sfx’ ? ‘bg-yellow-500 text-black shadow-[0_0_10px_rgba(234,179,8,0.3)]’ : ‘bg-gray-800/50 text-gray-400 hover:bg-gray-800 hover:text-white’}`}><br /> <Volume2 size={16} className={activeToolTab === 'sfx' ? 'text-black' : 'text-yellow-500'}/><br /> </button><br /> <button onClick={() => setActiveToolTab(‘vfx’)} title=”Efeitos Visuais” className={`w-9 h-9 flex items-center justify-center rounded-xl transition-all shrink-0 ${activeToolTab === ‘vfx’ ? ‘bg-rose-500 text-white shadow-[0_0_10px_rgba(244,63,94,0.3)]’ : ‘bg-gray-800/50 text-gray-400 hover:bg-gray-800 hover:text-white’}`}><br /> <Zap size={16} className={activeToolTab === 'vfx' ? 'text-white' : 'text-rose-500'}/><br /> </button><br /> {/* ÁREA DE CONTEÚDO DAS FERRAMENTAS DO CLIPE */}<br /> {activeToolTab === ‘enquadramento’ && (</p> <h4 className="text-sm font-black text-white flex items-center gap-2 uppercase mb-4"><Maximize size={18} className="text-emerald-400"/> Enquadramento do Vídeo</h4> <p> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between">Zoom / Escala {activeVideo.zoom}%</label><br /> <input type="range" min="10" max="250" value={activeVideo.zoom} onChange={(e) => handleVideoChange(activeVideo.id, ‘zoom’, Number(e.target.value))} className=”w-full accent-emerald-500 h-1.5″ /><br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between">Volume Clipe {activeVideo.volume}%</label><br /> <input type="range" min="0" max="100" value={activeVideo.volume} onChange={(e) => handleVideoChange(activeVideo.id, ‘volume’, Number(e.target.value))} className=”w-full accent-blue-500 h-1.5″ /><br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between">Posição Horizontal (X) {activeVideo.posX}%</label><br /> <input type="range" min="-100" max="100" value={activeVideo.posX} onChange={(e) => handleVideoChange(activeVideo.id, ‘posX’, Number(e.target.value))} className=”w-full accent-white h-1.5″ /><br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between">Posição Vertical (Y) {activeVideo.posY}%</label><br /> <input type="range" min="-100" max="100" value={activeVideo.posY} onChange={(e) => handleVideoChange(activeVideo.id, ‘posY’, Number(e.target.value))} className=”w-full accent-white h-1.5″ /><br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between">Filtro Viral</label><br /> <select value={activeVideo.filter || 'none'} onChange={(e) => handleVideoChange(activeVideo.id, ‘filter’, e.target.value)} className=”w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-white text-sm focus:outline-none”><option value="none">🚫 Nenhum Filtro</option><option value="cinematic">🎬 Cinemático (Alto Contraste)</option><option value="sigma">🗿 Sigma / Dark (Preto & Branco)</option><option value="vintage">📻 Vintage / Retrô (Sépia)</option><option value="cyberpunk">🌃 Cyberpunk (Cores Neon)</option></select><br /> )}<br /> {activeToolTab === ‘bgm’ && (</p> <h4 className="text-sm font-black text-white flex items-center gap-2 uppercase mb-4"><Music size={18} className="text-cyan-400"/> Música de Fundo (BGM)</h4> <p> {bgmLibrary.length === 0 ? (<br /> <input type="file" accept="audio/*" multiple onChange={handleBgmFolderUpload} className="hidden" id="bgm-tool-upload" /><br /> <label htmlFor="bgm-tool-upload" className="text-xs font-bold text-cyan-400 cursor-pointer uppercase hover:text-cyan-300 transition-colors">📁 Clique para Carregar Músicas</label><br /> ) : (<br /> <select value={activeVideo.bgmUrl || ""} onChange={(e) => {<br /> const url = e.target.value;<br /> const track = bgmLibrary.find(t => t.url === url);<br /> handleVideoChange(activeVideo.id, ‘bgmUrl’, url);<br /> handleVideoChange(activeVideo.id, ‘bgmName’, track ? track.name : “”);<br /> }} className=”flex-1 bg-gray-900 border border-gray-700 rounded-xl px-4 py-3 text-white text-sm focus:outline-none”><option value="">Nenhuma música selecionada</option>{bgmLibrary.map((t, idx) =><option key={idx} value={t.url}>{t.name}</option>)}<br /> </select><br /> <button onClick={() => setRandomBgm(activeVideo.id)} className=”bg-gray-800 p-3 rounded-xl text-cyan-400 hover:bg-gray-700 transition-colors” title=”Música Aleatória”><Sparkles size={18}/></button><br /> <button onClick={() => applyBgmToAll(activeVideo.bgmUrl, activeVideo.bgmName, activeVideo.bgmVolume)} className=”bg-cyan-600 p-3 rounded-xl text-white hover:bg-cyan-500 transition-colors” title=”Aplicar a todos os clipes”><CheckSquare size={18}/></button><br /> {activeVideo.bgmUrl && (<br /> <Volume2 size={16} className="text-cyan-400" /><br /> <input type="range" min="0" max="100" value={activeVideo.bgmVolume} onChange={(e) => handleVideoChange(activeVideo.id, ‘bgmVolume’, Number(e.target.value))} className=”w-full accent-cyan-500 h-1.5″ /><br /> {activeVideo.bgmVolume}%<br /> <label className="flex items-center gap-3 text-xs font-bold text-gray-400 cursor-pointer hover:text-white transition-colors border-t border-gray-800 pt-4"><br /> <input type="checkbox" checked={activeVideo.autoDucking} onChange={(e) => handleVideoChange(activeVideo.id, ‘autoDucking’, e.target.checked)} className=”w-4 h-4 rounded bg-gray-950 border-gray-700 text-cyan-500″ /><br /> 🎚️ AUTO-DUCKING (Abaixar volume automaticamente durante as narrações)<br /> </label><br /> )}<br /> )}<br /> )}<br /> {activeToolTab === ‘legenda’ && (</p> <h4 className="text-sm font-black text-white flex items-center gap-2 uppercase"><Type size={18} className="text-yellow-400"/> Legenda de Título Fixo</h4> <p> <input type="text" placeholder="EX: O FINAL É LOUCURA..." className="w-full bg-gray-900 border border-gray-700 rounded-xl px-4 py-4 text-white font-black uppercase text-sm focus:outline-none placeholder-gray-600" value={activeVideo.caption} onChange={(e) => handleVideoChange(activeVideo.id, ‘caption’, e.target.value)} /><br /> <label className="text-xs font-bold text-gray-500 uppercase flex items-center justify-between mb-3">Tamanho do Título {activeVideo.captionSize || 68}px</label><br /> <input type="range" min="20" max="150" value={activeVideo.captionSize || 68} onChange={(e) => handleVideoChange(activeVideo.id, ‘captionSize’, Number(e.target.value))} className=”w-full accent-yellow-500 h-1.5″ /><br /> <label className="text-xs font-bold text-gray-500 uppercase flex items-center justify-between mb-3">Posição Vertical (Altura) {activeVideo.captionY}%</label><br /> <input type="range" min="5" max="95" value={activeVideo.captionY} onChange={(e) => handleVideoChange(activeVideo.id, ‘captionY’, Number(e.target.value))} className=”w-full accent-yellow-500 h-1.5″ /><br /> <label className="text-xs font-bold text-gray-500 uppercase flex items-center justify-between mb-3">Estilo Visual do Título</label><br /> <select value={activeVideo.captionStyle || 'style1'} onChange={(e) => handleVideoChange(activeVideo.id, ‘captionStyle’, e.target.value)} className=”w-full bg-gray-950 border border-gray-700 rounded-lg px-4 py-3 text-white text-sm focus:outline-none”><option value="style1">🔥 Viral Clássico (Amarelo/Preto)</option><option value="style2">🤍 Clean Soft (Branco c/ Sombra)</option><option value="style3">⚡ Neon Glow (Branco c/ Brilho Rosa)</option><option value="style4">⬛ Fundo Escuro (Texto dentro de uma Caixa)</option><option value="style5">🍏 Verde Pop (Verde Claro/Escuro)</option></select><br /> )}<br /> {activeToolTab === ‘narracao’ && (</p> <h4 className="text-sm font-black text-white flex items-center gap-2 uppercase"><Mic size={18} className="text-rose-400"/> Geração de Narração IA</h4> <p> {activeVideo.narrations.map((narration, index) => (<br /> Caixa de Narração {index + 1}<br /> {activeVideo.narrations.length > 1 && (<br /> <button onClick={() => removeNarration(activeVideo.id, narration.id)} className=”text-rose-500 hover:text-rose-400 transition-colors” title=”Remover esta narração”><br /> <Trash size={16} /><br /> </button><br /> )}<br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between">Voz do Narrador</label><br /> <select value={narration.narrationVoice} onChange={(e) => updateNarration(activeVideo.id, narration.id, ‘narrationVoice’, e.target.value)} className=”w-full bg-gray-950 border border-gray-700 rounded-lg px-3 py-3 text-white text-xs focus:outline-none”><option value="Fenrir">👨 Masculina (Enérgica)</option><option value="Kore">👩 Feminina (Clara)</option><option value="Charon">👴 Idoso (Profunda)</option><option value="Puck">🧒 Adolescente/Criança</option></select><br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between">Tom / Emoção</label><br /> <select value={narration.narrationTone || 'enérgica e profissional'} onChange={(e) => updateNarration(activeVideo.id, narration.id, ‘narrationTone’, e.target.value)} className=”w-full bg-gray-950 border border-gray-700 rounded-lg px-3 py-3 text-white text-xs focus:outline-none”><option value="enérgica e profissional">⚡ Enérgico e Profissional</option><option value="assustadora e misteriosa">👻 Assustador e Misterioso</option><option value="séria e documental">📰 Sério e Documental</option><option value="engraçada e irônica">😂 Engraçado e Irônico</option><option value="triste e dramática">😢 Triste e Dramático</option><option value="como um sussurro">🤫 Como um Sussurro</option></select><br /> <label className="text-[10px] font-bold text-gray-500 uppercase">Texto da Narração</label><br /> <button onClick={() => generateTextForNarration(activeVideo.id, narration.id)}<br /> disabled={narration.isGeneratingText}<br /> className=”text-[9px] font-bold bg-indigo-500/20 text-indigo-400 hover:bg-indigo-500/40 px-3 py-1.5 rounded transition-colors flex items-center gap-1.5 border border-indigo-500/30 disabled:opacity-50″<br /> ><br /> {narration.isGeneratingText ? <Loader2 size={12} className="animate-spin"/> : <Sparkles size={12}/>}<br /> {index === 0 ? ‘GERAR TEXTO COM IA’ : ‘CONTINUAR HISTÓRIA COM IA’}<br /> </button><br /> <textarea placeholder="Digite o que o locutor vai falar ou deixe a IA gerar..." className="w-full bg-gray-950 border border-gray-700 rounded-lg px-4 py-3 text-white text-sm h-24 resize-none focus:outline-none placeholder-gray-600" value={narration.script} onChange={(e) => updateNarration(activeVideo.id, narration.id, ‘script’, e.target.value)}/><br /> <button onClick={() => generateTTS(narration.script, activeVideo.id, narration.id, narration.narrationVoice, narration.narrationTone || ‘enérgica e profissional’)} disabled={!narration.script || narration.isGeneratingScript} className={`w-full ${narration.audioGenerated ? ‘bg-emerald-600 hover:bg-emerald-500’ : ‘bg-rose-600 hover:bg-rose-500’} text-white font-black py-3 rounded-xl flex items-center justify-center gap-2 transition-transform hover:scale-[0.98] disabled:opacity-50 disabled:hover:scale-100 text-xs`}><br /> {narration.isGeneratingScript ? <Loader2 size={16} className="animate-spin"/> : (narration.audioGenerated ? <CheckCircle size={16}/> : <Sparkles size={16}/>)}<br /> {narration.audioGenerated ? ‘REGERAR VOZ E LEGENDAS’ : ‘GERAR VOZ & LEGENDAS SINCRONIZADAS’}<br /> </button><br /> ))}<br /> {activeVideo.narrations[activeVideo.narrations.length – 1].audioGenerated && (<br /> <button onClick={() => addNarration(activeVideo.id)} className=”w-full border-2 border-dashed border-emerald-700/50 hover:border-emerald-500 text-emerald-500 hover:text-emerald-400 py-4 rounded-xl text-xs font-black transition-all bg-emerald-500/5 flex items-center justify-center gap-2 mt-4″><br /> <Mic size={16} /> + ADICIONAR NOVA CAIXA DE VOZ (DIÁLOGO)<br /> </button><br /> )}<br /> {activeVideo.narrations.some(n => n.audioGenerated) && (</p> <h5 className="text-xs font-black text-gray-400 uppercase tracking-widest mb-4">Configurações das Legendas da Voz</h5> <p> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between mb-3">Tamanho da Legenda {activeVideo.narrationCaptionSize || 60}px</label><br /> <input type="range" min="20" max="120" value={activeVideo.narrationCaptionSize || 60} onChange={(e) => handleVideoChange(activeVideo.id, ‘narrationCaptionSize’, Number(e.target.value))} className=”w-full accent-white h-1.5″ /><br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between mb-3">Posição Vertical (Altura) {activeVideo.narrationCaptionY}%</label><br /> <input type="range" min="5" max="95" value={activeVideo.narrationCaptionY} onChange={(e) => handleVideoChange(activeVideo.id, ‘narrationCaptionY’, Number(e.target.value))} className=”w-full accent-white h-1.5″ /><br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between mb-3">Estilo da Legenda Gerada</label><br /> <select value={activeVideo.narrationCaptionStyle || 'style1'} onChange={(e) => handleVideoChange(activeVideo.id, ‘narrationCaptionStyle’, e.target.value)} className=”w-full bg-gray-950 border border-gray-700 rounded-lg px-4 py-3 text-white text-sm focus:outline-none”><option value="hormozi">🔥 Estilo Alex Hormozi (Animado + Cores + Emojis)</option><option value="mrbeast">💎 Estilo MrBeast (Fundo Sólido Marcador)</option><option value="style1">🍏 Verde Pop (Verde Claro/Escuro)</option><option value="style2">🤍 Clean Soft (Branco c/ Sombra Suave)</option><option value="style3">⚡ Neon Glow (Branco c/ Brilho Rosa)</option><option value="style4">⬛ Fundo Escuro (Texto na Caixa Negra)</option><option value="style5">💜 Roxo Moderno (Branco c/ Brilho Roxo)</option></select><br /> <Volume2 size={18} className="text-rose-400" /><br /> <label className="text-[10px] font-bold text-gray-500 uppercase flex items-center justify-between mb-2">Volume Geral da Narração {activeVideo.narrationVolume}%</label><br /> <input type="range" min="0" max="100" value={activeVideo.narrationVolume} onChange={(e) => handleVideoChange(activeVideo.id, ‘narrationVolume’, Number(e.target.value))} className=”w-full accent-rose-500 h-1.5″ /><br /> )}<br /> )}<br /> {activeToolTab === ‘corte’ && (<br /> <Scissors size={18} className="text-purple-400"/><br /> Ajuste de Corte – Clipe #{activeVideo.id}<br /> INÍCIO {activeVideo.trimStart}%<br /> <input type="range" min="0" max={activeVideo.trimEnd - 1} value={activeVideo.trimStart} onChange={(e) => handleVideoChange(activeVideo.id, ‘trimStart’, Number(e.target.value))} className=”w-full accent-purple-500 h-2″ /><br /> <button onClick={()=>handleVideoChange(activeVideo.id, ‘trimStart’, Math.max(0, activeVideo.trimStart-1))} className=”text-purple-500 hover:text-purple-400 px-2 font-bold”>◀</button><br /> <button onClick={()=>handleVideoChange(activeVideo.id, ‘trimStart’, Math.min(activeVideo.trimEnd-1, activeVideo.trimStart+1))} className=”text-purple-500 hover:text-purple-400 px-2 font-bold”>▶</button><br /> FIM {activeVideo.trimEnd}%<br /> <input type="range" min={activeVideo.trimStart + 1} max="100" value={activeVideo.trimEnd} onChange={(e) => handleVideoChange(activeVideo.id, ‘trimEnd’, Number(e.target.value))} className=”w-full accent-purple-500 h-2″ /><br /> <button onClick={()=>handleVideoChange(activeVideo.id, ‘trimEnd’, Math.max(activeVideo.trimStart+1, activeVideo.trimEnd-1))} className=”text-purple-500 hover:text-purple-400 px-2 font-bold”>◀</button><br /> <button onClick={()=>handleVideoChange(activeVideo.id, ‘trimEnd’, Math.min(100, activeVideo.trimEnd+1))} className=”text-purple-500 hover:text-purple-400 px-2 font-bold”>▶</button><br /> )}<br /> {activeToolTab === ‘sfx’ && (<br /> <Volume2 size={18}/> Trilha de Efeitos Sonoros (SFX)<br /> <button onClick={() => addSfxTrack(activeVideo.id)} className=”text-xs font-black px-4 py-2 rounded-lg transition-transform hover:scale-105 bg-yellow-500 text-black shadow-[0_0_15px_rgba(234,179,8,0.4)]”><br /> + ADICIONAR SFX<br /> </button><br /> {activeVideo.sfxTracks && activeVideo.sfxTracks.length === 0 && (</p> <p className="text-sm text-gray-500 font-bold uppercase">Nenhum efeito sonoro adicionado neste clipe.</p> <p> )}<br /> {activeVideo.sfxTracks && activeVideo.sfxTracks.map((sfx) => (<br /> <select value={sfx.type} onChange={(e) => updateSfxTrack(activeVideo.id, sfx.id, ‘type’, e.target.value)} className=”w-36 bg-gray-950 text-white text-xs font-bold border border-gray-700 rounded-lg p-2 focus:outline-none”><option value="heartbeat">🫀 Batimento</option><option value="gasp">😨 Susto/Ar</option><option value="impact">💥 Impacto</option><option value="riser">✨ Tensão Subindo</option><option value="cash">💰 Moeda/Dinheiro</option></select><br /> <Clock size={14} className="text-gray-500" /><br /> <input type="range" min="0" max="100" value={sfx.startTimePerc} onChange={(e) => updateSfxTrack(activeVideo.id, sfx.id, ‘startTimePerc’, Number(e.target.value))} className=”w-full accent-yellow-500 h-1.5″ /><br /> {sfx.startTimePerc}%<br /> <Volume2 size={14} className="text-yellow-500" /><br /> <input type="range" min="0" max="200" value={sfx.volume} onChange={(e) => updateSfxTrack(activeVideo.id, sfx.id, ‘volume’, Number(e.target.value))} className=”w-full accent-yellow-500 h-1.5″ /><br /> <button onClick={() => {<br /> if (!previewAudioCtxRef.current) previewAudioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();<br /> if (previewAudioCtxRef.current.state === ‘suspended’) previewAudioCtxRef.current.resume();<br /> playGeneratedSFX(sfx.type, previewAudioCtxRef.current, previewAudioCtxRef.current.destination, sfx.volume / 100);<br /> }} className=”bg-gray-800 text-gray-300 hover:text-white hover:bg-gray-700 p-2 rounded-lg transition-colors border border-gray-700″><br /> <Play size={16}/><br /> </button><br /> <button onClick={() => removeSfxTrack(activeVideo.id, sfx.id)} className=”bg-rose-500/10 text-rose-500 hover:bg-rose-500 hover:text-white p-2 rounded-lg transition-colors border border-rose-500/20″><br /> <Trash size={16} /><br /> </button><br /> ))}<br /> )}<br /> {activeToolTab === ‘vfx’ && (<br /> <Zap size={18}/> Trilha de Efeitos Visuais (VFX)<br /> <button onClick={() => addVfxTrack(activeVideo.id)} className=”text-xs font-black px-4 py-2 rounded-lg transition-transform hover:scale-105 bg-rose-500 text-white shadow-[0_0_15px_rgba(244,63,94,0.4)]”><br /> + ADICIONAR VFX<br /> </button><br /> {activeVideo.vfxTracks && activeVideo.vfxTracks.length === 0 && (</p> <p className="text-sm text-gray-500 font-bold uppercase">Nenhum efeito visual adicionado neste clipe.</p> <p> )}<br /> {activeVideo.vfxTracks && activeVideo.vfxTracks.map((vfx) => (<br /> <select value={vfx.type} onChange={(e) => updateVfxTrack(activeVideo.id, vfx.id, ‘type’, e.target.value)} className=”w-36 bg-gray-950 text-white text-xs font-bold border border-gray-700 rounded-lg p-2 focus:outline-none”><option value="shake">🌋 Tensão (Tremor)</option></select><br /> <Clock size={14} className="text-gray-500" /><br /> INÍCIO<br /> <input type="range" min="0" max="100" value={vfx.startTimePerc} onChange={(e) => updateVfxTrack(activeVideo.id, vfx.id, ‘startTimePerc’, Number(e.target.value))} className=”w-full accent-rose-500 h-1.5″ /><br /> {vfx.startTimePerc}%<br /> <Maximize size={14} className="text-rose-500" /><br /> DURAÇÃO<br /> <input type="range" min="1" max="100" value={vfx.durationPerc} onChange={(e) => updateVfxTrack(activeVideo.id, vfx.id, ‘durationPerc’, Number(e.target.value))} className=”w-full accent-rose-500 h-1.5″ /><br /> <button onClick={() => removeVfxTrack(activeVideo.id, vfx.id)} className=”bg-rose-500/10 text-rose-500 hover:bg-rose-500 hover:text-white p-2 rounded-lg transition-colors border border-rose-500/20 ml-2″><br /> <Trash size={16} /><br /> </button><br /> INTENSIDADE<br /> <input type="range" min="1" max="100" value={vfx.intensity} onChange={(e) => updateVfxTrack(activeVideo.id, vfx.id, ‘intensity’, Number(e.target.value))} className=”w-full accent-rose-500 h-1.5″ /><br /> VELOCIDADE<br /> <input type="range" min="1" max="100" value={vfx.speed} onChange={(e) => updateVfxTrack(activeVideo.id, vfx.id, ‘speed’, Number(e.target.value))} className=”w-full accent-rose-500 h-1.5″ /><br /> ))}<br /> )}<br /> {/* TIMELINE */}<br /> {videos.map((v, i) => {<br /> const segmentDur = v.videoDuration * ((v.trimEnd – v.trimStart) / 100);<br /> const isSelected = playingItemId === v.id;<br /> const totalAudioDur = v.narrations.reduce((sum, n) => n.audioGenerated ? sum + n.audioDuration : sum, 0);<br /> return (<br /> setPlayingItemId(v.id)} className={`relative h-24 flex-shrink-0 rounded-xl border-2 transition-all cursor-pointer overflow-hidden bg-black group ${isSelected ? ‘border-purple-500 w-64 shadow-[0_0_20px_rgba(168,85,247,0.3)]’ : ‘border-gray-800 w-44 hover:border-gray-700’}`}><br /> {v.bgmUrl && ()}<br /> {/* BARRAS DE VOZ MÚLTIPLAS (ALTO CONTRASTE E GLOW) */}<br /> {v.narrations.filter(n => n.audioGenerated).reduce((acc, n, idx) => {<br /> const startPerc = v.trimStart + (acc.offset / v.videoDuration) * 100;<br /> const widthPerc = (n.audioDuration / v.videoDuration) * 100;<br /> acc.elements.push(<br /> );<br /> acc.offset += n.audioDuration;<br /> return acc;<br /> }, { offset: 0, elements: [] }).elements}<br /> {/* FAIXA DE EFEITOS (SFX) NA TIMELINE */}<br /> {v.sfxTracks && v.sfxTracks.map(sfx => {<br /> const sfxPerc = v.trimStart + (sfx.startTimePerc / 100) * (v.trimEnd – v.trimStart);<br /> const emoji = sfx.type === ‘impact’ ? ‘💥’ : sfx.type === ‘riser’ ? ‘✨’ : sfx.type === ‘heartbeat’ ? ‘🫀’ : sfx.type === ‘gasp’ ? ‘😨’ : ‘💰’;<br /> return (<br /> {emoji}<br /> );<br /> })}<br /> {/* FAIXA DE EFEITOS (VFX) NA TIMELINE */}<br /> {v.vfxTracks && v.vfxTracks.map(vfx => {<br /> const vfxStartPerc = v.trimStart + (vfx.startTimePerc / 100) * (v.trimEnd – v.trimStart);<br /> const vfxWidthPerc = (vfx.durationPerc / 100) * (v.trimEnd – v.trimStart);<br /> return (<br /> );<br /> })}<br /> {v.customTopLabel !== null ? v.customTopLabel : (topCount === 1 && globalPrefix === “TOP” ? ‘VÍDEO’ : (showNumbers ? `${globalPrefix} ${topCount – i}`.trim() : globalPrefix.trim()))}<br /> CLIP: {segmentDur.toFixed(1)}s<br /> {totalAudioDur > 0 && (VOZ: {totalAudioDur.toFixed(1)}s)}</p> <p className="text-[10px] text-white font-black truncate uppercase drop-shadow-[0_2px_2px_rgba(0,0,0,1)] bg-black/40 px-1 rounded w-fit">{v.title || “Vazio”}</p> <p> );<br /> })}<br /> <button onClick={startExport} className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-black px-6 py-2.5 rounded-xl shadow-[0_0_15px_rgba(16,185,129,0.4)] transition-transform hover:scale-105 flex items-center gap-2"><br /> <Download size={16} /> EXPORTAR PROJETO<br /> </button><br /> );<br /> };<br /> const renderStep3 = () => (<br /> <CheckCircle className="text-emerald-500" size={40} /></p> <h2 className="text-4xl font-black text-white mb-2 uppercase">Renderizado!</h2> <p> {finalVideoUrl && <video src={finalVideoUrl} autoPlay loop controls className="w-full h-full object-contain" />}<br /> <button onClick={downloadVideo} className="w-full bg-gradient-to-r from-emerald-500 to-teal-500 py-4 rounded-2xl font-black text-white shadow-xl hover:scale-95 transition-transform"><br /> TRANSFERIR VÍDEO (.WEBM)<br /> </button></p> <p className="text-gray-400 text-sm">Poste no YouTube Shorts para máxima visibilidade.</p> <p> <button onClick={() => setStep(1)} className=”mt-8 text-gray-500 underline text-xs”>Novo Projeto</button><br /> );<br /> return (</p> <header className="max-w-7xl w-full mx-auto flex items-center justify-between mb-4 shrink-0"> <ListVideo size={24} className="text-white" /></p> <h1 className="text-xl font-black tracking-tight text-white uppercase italic">Top{topCount}Creator</h1> <p> ENGINE WEBGL SYNC ON<br /> </header> <p> <main className="flex-1 w-full pb-12"><br /> {step === 1 && !isProcessing && renderStep1()}<br /> {step === 2 && !isExporting && renderStep2()}<br /> {isExporting && (<br /> <Download className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-emerald-400 animate-bounce" size={24} /></p> <h3 className="text-2xl font-black text-white mb-2 uppercase">Renderizando Engine</h3> <p className="text-emerald-400 font-bold mb-8 text-sm">{exportMsg}</p> <p> )}<br /> {step === 3 && renderStep3()}<br /> </main></p> <style dangerouslySetInnerHTML={{ __html: ` .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; } input[type=range] { -webkit-appearance: none; background: transparent; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: currentColor; cursor: pointer; margin-top: -6px; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #2d2d2d; border-radius: 2px; } @keyframes hormozi-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .animate-hormozi-pop { animation: hormozi-pop 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes mrbeast-pop { 0% { transform: scale(0.8) translateY(10px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .animate-mrbeast-pop { animation: mrbeast-pop 0.1s ease-out forwards; } @keyframes camera-shake { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(1.5px, -1.5px) rotate(0.5deg); } 50% { transform: translate(-1.5px, 1.5px) rotate(-0.5deg); } 75% { transform: translate(1.5px, 1.5px) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .animate-camera-shake { animation: camera-shake 0.15s infinite ease-in-out; } `}} /><br /> );<br /> }</p> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfive/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <script id="wp-block-template-skip-link-js-after"> ( function() { var skipLinkTarget = document.querySelector( 'main' ), sibling, skipLinkTargetID, skipLink; // Early exit if a skip-link target can't be located. if ( ! skipLinkTarget ) { return; } /* * Get the site wrapper. * The skip-link will be injected in the beginning of it. */ sibling = document.querySelector( '.wp-site-blocks' ); // Early exit if the root element was not found. if ( ! sibling ) { return; } // Get the skip-link target's ID, and generate one if it doesn't exist. skipLinkTargetID = skipLinkTarget.id; if ( ! skipLinkTargetID ) { skipLinkTargetID = 'wp--skip-link--target'; skipLinkTarget.id = skipLinkTargetID; } // Create the skip link. skipLink = document.createElement( 'a' ); skipLink.classList.add( 'skip-link', 'screen-reader-text' ); skipLink.id = 'wp-skip-link'; skipLink.href = '#' + skipLinkTargetID; skipLink.innerText = 'Pular para o conteúdo'; // Inject the skip link. sibling.parentElement.insertBefore( skipLink, sibling ); }() ); //# sourceURL=wp-block-template-skip-link-js-after </script> <script id="hostinger-reach-subscription-block-view-js-extra"> var hostinger_reach_subscription_block_data = {"endpoint":"https://tufuente.online/wp-json/hostinger-reach/v1/contact","nonce":"287724a58b","translations":{"thanks":"Obrigado por ser um assinante!","error":"Ocorreu um erro. Tente novamente."}}; //# sourceURL=hostinger-reach-subscription-block-view-js-extra </script> <script src="https://tufuente.online/wp-content/plugins/hostinger-reach/frontend/dist/blocks/subscription-view.js?ver=1776210207" id="hostinger-reach-subscription-block-view-js"></script> <script id="eael-general-js-extra"> var localize = {"ajaxurl":"https://tufuente.online/wp-admin/admin-ajax.php","nonce":"374f3d72c0","i18n":{"added":"Adicionado ","compare":"Comparar","loading":"Carregando..."},"eael_translate_text":{"required_text":"\u00e9 um campo obrigat\u00f3rio","invalid_text":"Inv\u00e1lido","billing_text":"Cobran\u00e7a","shipping_text":"Envio","fg_mfp_counter_text":"de"},"page_permalink":"https://tufuente.online/top-5-creator/","cart_redirectition":"","cart_page_url":"","el_breakpoints":{"mobile":{"label":"Dispositivos m\u00f3veis no modo retrato","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Dispositivos m\u00f3veis no modo paisagem","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet no modo retrato","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet no modo paisagem","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Notebook","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Tela ampla (widescreen)","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}}; //# sourceURL=eael-general-js-extra </script> <script src="https://tufuente.online/wp-content/plugins/essential-addons-for-elementor-lite/assets/front-end/js/view/general.min.js?ver=6.6.2" id="eael-general-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://tufuente.online/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://tufuente.online/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html> <!-- Page cached by LiteSpeed Cache 7.7 on 2026-05-17 15:01:32 -->