c.kind==='stitched'||c.children);
if(!cs.length) return;
const restored=[];
for(const m of cs){
(m.children||[]).forEach(ch=>{ const c={...ch,id:`clip_${Date.now()}_${Math.random().toString(16).slice(2)}`,start:m.start+(ch.rel_start||0),lane:(ch.orig_lane ?? ch.lane ?? m.lane),group_id:null,stitch_id:null}; delete c.rel_start; delete c.orig_start; restored.push(c); });
}
state.project.clips=(state.project.clips||[]).filter(c=>!cs.some(m=>m.id===c.id)).concat(restored);
setSelection(restored[0]?.id||null); renderAll(); status('UnStitched');
}
function deleteSelected(){ if(!state.selectedClipIds.length) return; state.project.clips=state.project.clips.filter(c=>!isSelected(c.id)); setSelection(null); renderAll(); status('Deleted selected clips'); }
function duplicateSelected(){
const cs=selectedClips();
if(!cs.length) return;
const newIds=cs.map(c=>{
const clone={...c,id:`clip_${Date.now()}_${Math.random().toString(16).slice(2)}`,start:c.start+c.length,group_id:null,stitch_id:null};
normalizeClipBounds(clone);
state.project.clips.push(clone);
return clone.id;
});
state.selectedClipIds=newIds; state.selectedClipId=newIds[newIds.length-1]||null;
renderAll(); status(`Duplicated ${cs.length} clip(s)`);
}
function copySelected(){
const cs=selectedClips();
if(!cs.length) return;
state.clipboard=cs.map(c=>({...c}));
status(`Copied ${cs.length} clip(s)`);
}
function pasteClipboard(){
const cb=state.clipboard;
if(!cb || !cb.length) return;
const minStart=Math.min(...cb.map(c=>c.start));
const target=snapFrame(state.currentFrame);
const newIds=cb.map(c=>{
const clone={...c,id:`clip_${Date.now()}_${Math.random().toString(16).slice(2)}`,start:Math.max(0,target+(c.start-minStart)),group_id:null,stitch_id:null};
normalizeClipBounds(clone);
state.project.clips.push(clone);
return clone.id;
});
state.selectedClipIds=newIds; state.selectedClipId=newIds[newIds.length-1]||null;
renderAll(); status(`Pasted ${cb.length} clip(s)`);
}
function groupSelected(){ const cs=selectedClips(); if(cs.length){ const gid=`group_${Date.now()}`; cs.forEach(c=>c.group_id=gid); renderAll(); status('Grouped'); } }
function ungroupSelected(){ selectedClips().forEach(c=>c.group_id=null); renderAll(); status('Ungrouped'); }
function detachAudio(){
const c=selectedClip();
if(!c || c.kind!=='video') return;
// Detaching audio must silence the video's own track - otherwise the
// original video clip keeps playing its native audio right alongside
// the newly split-out audio clip, doubling it up.
c.audio_enabled=false;
const audio={...c,id:`clip_${Date.now()}_audio`,kind:'audio',name:`${c.name} (Audio)`,lane:clamp(c.lane+1,0,4),audio_detached:true,audio_enabled:true,detached_from:c.id};
state.project.clips.push(audio);
setSelection(audio.id); renderAll(); status('Audio detached');
}
function mergeAudioBack(){
const c=selectedClip();
if(!c) return;
// Works from either side: select the detached audio clip, or the video
// clip it was split from.
let audioClip=null, videoClip=null;
if(c.kind==='audio' && c.detached_from){ audioClip=c; videoClip=findClip(c.detached_from); }
else if(c.kind==='video'){ audioClip=(state.project.clips||[]).find(x=>x.kind==='audio' && x.detached_from===c.id); videoClip=c; }
if(!audioClip || !videoClip){ status('No matching detached audio clip found for this selection'); return; }
videoClip.audio_enabled=true;
state.project.clips=(state.project.clips||[]).filter(x=>x.id!==audioClip.id);
setSelection(videoClip.id); renderAll(); status('Audio merged back into video');
}
// Version Stack: alternate ComfyUI-generated takes of the same clip, kept
// as a list on the clip itself (not the shared media-bin item, since two
// clips can point at the same source media but hold different version
// history). setActiveVersion overwrites the clip's own path/url in place -
// that's the one field both the editor's playback path (monitorMediaFor)
// and the exporter (export.py reads clip["path"] directly, no separate
// media lookup) already treat as the source of truth, so no other code
// needs to know versions exist.
function ensureVersions(c){
if(!c.versions || !c.versions.length){
c.versions=[{id:'orig', path:c.path, url:c.url||null, name:c.name}];
c.active_version_id='orig';
}
return c.versions;
}
function setActiveVersion(c, versionId){
const v=(c.versions||[]).find(x=>x.id===versionId);
if(!v) return;
c.active_version_id=versionId; c.path=v.path; c.url=v.url||null;
renderAll(); status(`Active version: ${v.name}`);
}
async function addVersionToClip(c, file){
const fd=new FormData(); fd.append('files', file); fd.append('project', state.project?.name || 'itda-project-1');
try{
const data=await fetch('/itda/api/media/upload',{method:'POST',body:fd}).then(r=>{if(!r.ok) throw new Error(`${r.status} ${r.statusText}`); return r.json();});
const path=(data.items||[])[0];
if(!path){ status('Version upload failed'); return; }
ensureVersions(c);
const vid=`v_${Date.now()}`;
c.versions.push({id:vid, path, name:file.name});
setActiveVersion(c, vid);
}catch(e){ status(`Add Version failed: ${e.message}`); }
}
function deleteVersion(c, versionId){
ensureVersions(c);
if(c.versions.length<=1) return;
const wasActive=c.active_version_id===versionId;
c.versions=c.versions.filter(v=>v.id!==versionId);
state.versionCompareSel=(state.versionCompareSel||[]).filter(id=>id!==versionId);
if(wasActive) setActiveVersion(c, c.versions[0].id); else renderAll();
}
function compareVersions(c, idA, idB){
const vA=(c.versions||[]).find(v=>v.id===idA), vB=(c.versions||[]).find(v=>v.id===idB);
if(!vA || !vB) return;
state.versionCompareClips=[{...c,path:vA.path,url:vA.url||null,name:vA.name},{...c,path:vB.path,url:vB.url||null,name:vB.name}];
state.previewMode='wipe';
renderAll();
}
function renderVersionsSection(c){
ensureVersions(c);
const compareSel=state.versionCompareSel||[];
const rows=c.versions.map(v=>{
const active=v.id===c.active_version_id, marked=compareSel.includes(v.id);
return `
${esc(trunc(v.name,26))}${active?' ✓':''}
${c.versions.length>1?`× `:''}
`;
}).join('');
return `Versions
${rows}
+ Add Version Compare (Wipe)
${label}
`;
}
function toggleField(prop,label,checked){
return `${label} System Default `].concat((state.fonts||[]).map(f=>`${esc(f.family)} `)).join('');
body.innerHTML=`
Clip
Name Type video audio image text Lane Timing
Start Length Trim In Trim Out
${['video','audio'].includes(c.kind) ? `
Audio
${toggleField('audio_enabled','Audio',c.audio_enabled!==false)}${toggleField('solo','Solo',!!c.solo)}${sliderField('volume','Gain %',0,200,1,c.volume??100)}` : ''}
${['video','image'].includes(c.kind) ? `
Transition In
Type ${TRANSITION_TYPES.map(t=>`${t.label} `).join('')} Frames (0=auto) Blends this clip's head with whatever other clip's active window it starts inside of - drag it onto a different lane so it overlaps that clip's tail.
` : ''}
${['video','audio','image'].includes(c.kind) ? renderVersionsSection(c) : ''}
Text / Overlay
Font ${fontOptions} ${sliderField('x','X %',0,100,1,c.x??50)}${sliderField('y','Y %',0,100,1,c.y??88)}${sliderField('size','Size',8,220,1,c.size||42)}${sliderField('opacity','Opacity',0,1,0.05,c.opacity??1)}
Text Color ${toggleField('shadow_enabled','Shadow',c.shadow_enabled)}
Shadow Color ${sliderField('shadow_opacity','Shadow Opacity',0,1,0.05,c.shadow_opacity??0.6)}
`;
const kind=body.querySelector('[data-prop="kind"]'); if(kind) kind.value=c.kind||'video';
const font=body.querySelector('[data-prop="font_family"]'); if(font) font.value=c.font_family||'system';
body.addEventListener('mousedown', e=>e.stopPropagation(), true);
body.addEventListener('pointerdown', e=>e.stopPropagation(), true);
body.addEventListener('keydown', e=>e.stopPropagation(), true);
body.querySelectorAll('.slider-field').forEach(wrap=>{
const range=wrap.querySelector('input[type="range"]');
const num=wrap.querySelector('input.mirror-num');
if(!range||!num) return;
range.addEventListener('input', ()=>{ num.value=range.value; });
num.addEventListener('input', ()=>{ range.value=num.value; range.dispatchEvent(new Event('input',{bubbles:true})); });
num.addEventListener('change', ()=>{ range.dispatchEvent(new Event('change',{bubbles:true})); });
});
{ const versionList=body.querySelector('#versionList');
if(versionList){
versionList.querySelectorAll('.version-row').forEach(row=>{
row.addEventListener('click', e=>{
if(e.target.closest('.version-delete')) return;
const vid=row.dataset.vid;
if(e.ctrlKey||e.metaKey||e.shiftKey){
const sel=state.versionCompareSel||[];
state.versionCompareSel = sel.includes(vid) ? sel.filter(x=>x!==vid) : [...sel, vid].slice(-2);
updateProps();
} else setActiveVersion(c, vid);
});
const del=row.querySelector('.version-delete');
if(del) del.addEventListener('click', e=>{ e.stopPropagation(); deleteVersion(c, row.dataset.vid); });
});
const addBtn=body.querySelector('#addVersionBtn'), fp=body.querySelector('#versionFilePicker');
if(addBtn && fp){ addBtn.onclick=e=>{ e.stopPropagation(); fp.click(); }; fp.onchange=e=>{ const f=e.target.files[0]; if(f) addVersionToClip(c,f); fp.value=''; }; }
const cmpBtn=body.querySelector('#compareVersionsBtn');
if(cmpBtn) cmpBtn.onclick=e=>{ e.stopPropagation(); const sel=state.versionCompareSel||[]; if(sel.length===2) compareVersions(c, sel[0], sel[1]); };
}
}
body.querySelectorAll('[data-prop]').forEach(input=>{
const readValue=()=>{
const p=input.dataset.prop;
let v=input.type==='checkbox' ? input.checked : input.value;
if(['start','length','source_in','source_out','x','y','size','opacity','shadow_opacity','volume','transition_frames'].includes(p)) v=Number(v);
return {p,v};
};
const applyModelOnly=()=>{
const {p,v}=readValue();
if(p==='lane') c.lane=clamp(Number(v)-1,0,4);
else c[p]=v;
if(p==='kind') c.kind=v;
normalizeClipBounds(c);
};
const commit=()=>{
applyModelOnly();
renderAll();
};
// IMPORTANT: never render timeline/preview on every keystroke.
// Rendering while input/textarea is focused replaces DOM and drops the caret after one key.
input.oninput=()=>{
applyModelOnly();
// Live-update only the visible text overlay without rebuilding Clip Properties.
if(input.dataset.prop==='text' || input.dataset.prop==='color' || input.dataset.prop==='opacity' || input.dataset.prop==='size' || input.dataset.prop==='x' || input.dataset.prop==='y' || input.dataset.prop==='shadow_enabled' || input.dataset.prop==='shadow_color' || input.dataset.prop==='shadow_opacity' || input.dataset.prop==='font_family'){
updatePreviewTextOnly();
}
};
input.onchange=commit;
input.onblur=commit;
});
}
function updatePreviewTextOnly(){
const frame = state.currentFrame;
// While a text clip is selected (i.e. being edited in Clip Properties), show
// its live values regardless of the playhead's position: otherwise, editing a
// text clip that isn't the layer-priority clip under the current playhead
// silently updates its data with no visible feedback, which reads as "the
// sliders don't do anything."
const sel = selectedClip();
const txt = (sel && sel.kind==='text') ? sel : topTextClip(frame);
const t = $('textOverlay');
if(!t) return;
if(!txt){ clearTextOverlay(t); return; }
// Delegate to the same function the full render path (updatePreview) uses.
// This used to duplicate loadTextOverlay's styling inline and had drifted:
// different font-family fallback ('system-ui' vs 'Inter, Segoe UI, Arial'),
// different text-shadow formula, and top-vs-bottom positioning. That drift
// meant every commit (releasing a slider) visibly snapped the font/shadow/
// position back to a different look than what was shown while dragging.
loadTextOverlay(txt, t);
}
function updateControls(){ const two=selectedClips().length===2; const hasVersionCompare=!!(state.versionCompareClips && state.versionCompareClips.length===2); $('compareTop').disabled=!two; $('overlayTop').disabled=!two; const wipeTop=$('wipeTop'); if(wipeTop) wipeTop.disabled=!two && !hasVersionCompare; if(!two && !hasVersionCompare && state.previewMode!=='single') state.previewMode='single'; $('previewMode').classList.toggle('active',state.previewMode==='single'); $('compareTop').classList.toggle('active',state.previewMode==='compare'); $('overlayTop').classList.toggle('active',state.previewMode==='overlay'); if(wipeTop) wipeTop.classList.toggle('active',state.previewMode==='wipe'); $('snapToggle').classList.toggle('active',state.snap); const peakBtn=$('peakSnapToggle'); if(peakBtn) peakBtn.classList.toggle('active',state.peakSnap); const prBtn=$('prerender'); if(prBtn){ const stale=prerenderStale(); prBtn.classList.toggle('active', !!state.prerender && !stale); prBtn.textContent = state.prerender ? (stale?'Pre-render (stale)':`Pre-rendered ${state.prerender.start_frame}–${state.prerender.end_frame}f`) : 'Pre-render'; } const autoStitchBtn=$('autoStitchClip'); if(autoStitchBtn){ const svids=selectedClips().filter(c=>c.kind==='video'); autoStitchBtn.disabled=svids.length!==2; } const transBtn=$('addTransition'); if(transBtn){ const existingTrans=existingTransitionPair(); if(existingTrans){ transBtn.disabled=false; transBtn.textContent='🎞 Remove Transition'; transBtn.dataset.mode='remove'; } else { transBtn.disabled=!adjacentClipPair(); transBtn.textContent='🎞 Transition'; transBtn.dataset.mode='add'; } } const aiBtn=$('aiDetect'); if(aiBtn){ const sc=selectedClip(); aiBtn.disabled=!(sc && ['video','audio'].includes(sc.kind) && sc.path); } $('loopToggle').classList.toggle('active',state.loop); $('muteToggle').classList.toggle('active',state.mute); const sab=$('scrubAudioToggle'); if(sab) sab.classList.toggle('active',state.scrubAudio); $('snapStatus').textContent=state.snap?'ON':'OFF'; $('statusbarFps').textContent=`Project FPS: ${fps().toFixed(3)}`; $('totalStatus').textContent=`Total: ${totalFrames()}f / ${fmtTime(totalFrames())}`; $('projectFpsStatus').textContent=`FPS ${fps().toFixed(3)} · Total ${totalFrames()}f`; }
function showModal(title,html,footer=''){ $('modalTitle').textContent=title; $('modalBody').innerHTML=html; $('modalFooter').innerHTML=footer||'OK '; $('modal').classList.remove('hidden'); const ok=$('modalOk'); if(ok) ok.onclick=closeModal; }
function closeModal(){ $('modal').classList.add('hidden'); }
async function showProjectPopup(){
showModal('Project Library', `Projects are stored in ComfyUI/input/ITDA/projects.
`, `+ New Project Open Duplicate Rename Delete Close `);
let selected = state.project?.name || 'itda-project-1';
const listEl = $('projectLibraryList');
async function refreshList(){
try{
const data=await api('/itda/api/projects');
const items=data.items||[];
if(!items.length){ listEl.innerHTML='No projects yet.
'; return; }
listEl.innerHTML=items.map(it=>`${esc(it.name)}
`).join('');
listEl.querySelectorAll('.project-row').forEach(row=>row.onclick=()=>{selected=row.dataset.project; refreshList();});
}catch(e){ listEl.innerHTML=`Project list failed: ${esc(e.message)}
`; }
}
await refreshList();
$('projectNew').onclick=async()=>{ const base=prompt('New Project Name','itda-project-1'); if(!base) return; const data=await api('/itda/api/project/new',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:base})}); closeModal(); await initProject(data.project?.name || base); };
$('projectOpen').onclick=()=>{ if(!selected) return; closeModal(); initProject(selected); };
$('projectDuplicate').onclick=async()=>{ if(!selected) return; const target=prompt('Duplicate Project Name', `${selected}-copy`); if(!target) return; const data=await api('/itda/api/project/duplicate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({source:selected,target})}); selected=data.project||target; await refreshList(); status(`Duplicated: ${selected}`); };
$('projectRename').onclick=async()=>{ if(!selected) return; const target=prompt('Rename Project', selected); if(!target || target===selected) return; try{ const data=await api('/itda/api/project/rename',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({source:selected,target})}); const renamed=data.project||target; if(state.project?.name===selected){ closeModal(); await initProject(renamed); } else { selected=renamed; await refreshList(); } }catch(e){ status(`Rename failed: ${e.message}`); } };
$('projectDelete').onclick=async()=>{
if(!selected) return;
const target=selected;
const ok=await confirmModal('Delete Project', `Delete project ${esc(target)} ?
Project file, media folder, and cache folder will be deleted.
`);
if(!ok){ await showProjectPopup(); return; }
try{
await api('/itda/api/project/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({project:target})});
if(state.project?.name===target){ await initProject('itda-project-1'); } else { selected=state.project?.name||'itda-project-1'; }
await showProjectPopup();
}catch(e){ status(`Delete failed: ${e.message}`); await showProjectPopup(); }
};
$('modalOk').onclick=closeModal;
}
// Only meaningful when ITDA is running standalone (no filesystem shared
// with ComfyUI, see itda_standalone.py) - "Send To ComfyUI" then uploads
// over ComfyUI's own /upload/image API instead of writing a local file.
// Empty = same-process mode, i.e. the existing local-write behavior.
function getComfyUrl(){ return localStorage.getItem('itda_comfy_url') || ''; }
function setComfyUrl(v){ v ? localStorage.setItem('itda_comfy_url', v) : localStorage.removeItem('itda_comfy_url'); }
function showSettingsPopup(){ showModal('Project Settings', `Project FPS Total Frames Frame Policy Normalize to Project FPS Frame Drop Interpolation ComfyUI Server URL
Below 16fps is not allowed; 60fps and above is flagged as a warning. Changing these rescales the timeline ruler and every clip's frame positions together.
ComfyUI Server URL is only needed in the standalone app - it's where "Send To ComfyUI" uploads clips to, since a standalone instance has no folder shared with ComfyUI. Leave blank when running inside ComfyUI itself.
`, `Apply Cancel `); $('settingsApply').onclick=()=>{ const oldFps=fps(); let nf=Number($('settingsFps').value||24); if(nf<16){nf=16;status('Below 16fps is not allowed - clamped to 16fps');} if(nf>=60) status('Warning: 60fps or higher'); const total=Number($('settingsTotal').value||DEFAULT_TOTAL); const ratio=nf/oldFps; state.project.settings={...state.project.settings,fps:nf,total_frames:Math.max(1,Math.round(total))}; state.totalFrames=state.project.settings.total_frames; (state.project.clips||[]).forEach(c=>{ c.start=Math.round(c.start*ratio); c.length=Math.max(1,Math.round(c.length*ratio)); c.source_in=Math.round((c.source_in||0)*ratio); c.source_out=Math.round((c.source_out||c.length)*ratio); c.fps=nf; normalizeClipBounds(c); }); setComfyUrl($('settingsComfyUrl').value.trim()); closeModal(); renderAll(); }; $('modalOk').onclick=closeModal; }
function snapshotClipCandidate(){
const sel=selectedClips();
let c=sel.find(x=>state.currentFrame>=x.start && state.currentFrametoast.classList.add('hidden'),1600); status(`Snapshot saved: source frame ${payload.source_frame}`); return;
}catch(e){ status(`Original frame snapshot failed, fallback viewport: ${e.message}`); }
}
const stage=$('previewStage'); const rect=stage.getBoundingClientRect(); const canvas=document.createElement('canvas'); canvas.width=Math.max(2,Math.round(rect.width)); canvas.height=Math.max(2,Math.round(rect.height)); const ctx=canvas.getContext('2d'); ctx.clearRect(0,0,canvas.width,canvas.height);
const drawContain=(el)=>{ if(!el || getComputedStyle(el).display==='none') return; const vw=el.videoWidth||el.naturalWidth, vh=el.videoHeight||el.naturalHeight; if(!vw||!vh) return; const scale=Math.min(canvas.width/vw, canvas.height/vh); const w=vw*scale,h=vh*scale,x=(canvas.width-w)/2,y=(canvas.height-h)/2; try{ctx.drawImage(el,x,y,w,h);}catch{} };
drawContain($('previewVideo')); drawContain($('previewImage')); drawContain($('previewVideoB')); drawContain($('previewImageB'));
const text=$('textOverlay'); if(text.textContent){ ctx.font=`${parseInt(text.style.fontSize||42,10)}px sans-serif`; ctx.fillStyle=(state.selectedClipId && findClip(state.selectedClipId)?.color) || '#fff'; ctx.textAlign='center'; ctx.shadowColor='transparent'; ctx.shadowBlur=0; ctx.fillText(text.textContent, canvas.width/2, canvas.height*.82); }
const blob=await new Promise(res=>canvas.toBlob(res,'image/png'));
try{ const fd=new FormData(); fd.append('project',state.project?.name||'itda-project-1'); fd.append('image',blob,'snapshot.png'); await fetch('/itda/api/snapshot',{method:'POST',body:fd}).then(r=>{if(!r.ok) throw new Error(`${r.status} ${r.statusText}`); return r.json();}); const toast=$('snapshotToast'); toast.textContent='Snapshot saved'; toast.classList.remove('hidden'); setTimeout(()=>toast.classList.add('hidden'),1600); status('Snapshot saved to input/ITDA-SNAPSHOT'); }catch(e){ status(`Snapshot failed: ${e.message}`); }
}
async function exportProject(){
if(!state.project) return;
showModal('Export', `Format MP4 (H.264 + AAC) MOV (H.264 + AAC) WEBM (VP9 + Opus)
`, 'Render Cancel ');
$('exportGo').onclick=()=>runExport($('exportFormat').value);
}
async function runExport(fmt){
status(`Exporting timeline to ${fmt.toUpperCase()}... this can take a while for long timelines.`);
// Real per-frame progress isn't available without parsing ffmpeg's own
// progress stream, which the export request doesn't surface yet - but
// silence with no feedback at all reads as "is this even doing
// anything?" for a render that can take a while. A spinner + elapsed
// timer at least confirms it's alive and shows how long it's been.
const startedAt = Date.now();
showModal('Export', `
Rendering ${esc(state.project.name)} to ${fmt.toUpperCase()}...
0s elapsed
Compositing every layer (video/image/text) and mixing audio via ffmpeg.
Rendering... ');
const elapsedTimer = setInterval(()=>{
const el = document.getElementById('exportElapsed');
if(el) el.textContent = `${Math.round((Date.now()-startedAt)/1000)}s elapsed`;
}, 1000);
try{
const data=await api('/itda/api/export',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({project:state.project.name,format:fmt})});
clearInterval(elapsedTimer);
const secs=Math.round((Date.now()-startedAt)/1000);
showModal('Export Complete', `✅ ${esc(state.project.name)} exported in ${secs}s.
${esc(data.path)}
${data.width}x${data.height} · ${data.total_frames}f @ ${data.fps}fps ${data.has_audio?'· with audio':'· no audio'}
`);
status(`Exported to ${data.path}`);
}catch(e){
clearInterval(elapsedTimer);
showModal('Export Failed', `${esc(e.message)}
`);
status(`Export failed: ${e.message}`);
}
}
async function sendAllTimelineToComfy(){
const clips=(state.project?.clips||[]).filter(c=>c.path && ['video','image','audio'].includes(c.kind));
if(!clips.length){ showModal('Send To ComfyUI', 'No sendable clips (video/image/audio) on this timeline.
'); return; }
const comfyUrl=getComfyUrl();
status(`Sending ${clips.length} clip(s) to ComfyUI...`);
const items=[];
for(const c of clips){
try{
const payload={project:state.project?.name||'itda-project-1',path:c.path,kind:c.kind,source_in:c.source_in||0,source_out:c.source_out||c.length,fps:c.fps||fps(),name:c.name,comfy_url:comfyUrl};
const data=await api('/itda/api/send_to_comfy',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
items.push(comfyUrl ? {name:data.comfy_name, subfolder:data.comfy_subfolder, type:data.comfy_type, kind:c.kind} : {relative:data.relative, kind:c.kind});
}catch(e){ status(`Send failed for ${c.name}: ${e.message}`); }
}
if(!items.length){ showModal('Send To ComfyUI', 'All clips failed to export - see status bar.
'); return; }
if(comfyUrl){
// Standalone: nothing to auto-open across origins for a batch - the
// files are on ComfyUI's side now, ready to pick from its own node UI.
showModal('Send To ComfyUI', `Sent ${items.length}/${clips.length} clip(s) to ComfyUI at ${esc(comfyUrl)} .
Pick them up from a Load node's file list there (subfolder: ITDA/send/${esc(state.project?.name||'')}).
`);
} else {
const url=`${location.origin}/?itda_send_batch=${encodeURIComponent(JSON.stringify(items))}`;
window.open(url,'_blank');
}
status(`Sent ${items.length}/${clips.length} clip(s) to ComfyUI`);
}
async function sendToComfy(){
const sel=selectedClips();
if(sel.length===0){ return sendAllTimelineToComfy(); }
if(sel.length!==1){ showModal('Send To ComfyUI', `Select exactly one Video, Image, or Audio clip to send that clip/range, or clear selection to send the whole timeline as a batch.
`); return; }
const c=sel[0];
if(!c.path || !['video','image','audio'].includes(c.kind)){ showModal('Send To ComfyUI', `Text/stitched clips cannot be sent yet. Select a Video, Image, or Audio clip.
`); return; }
let srcIn=c.source_in||0, srcOut=c.source_out||c.length, mode='clip';
if(state.range.start!=null && state.range.end!=null){
const a=Math.min(state.range.start,state.range.end), b=Math.max(state.range.start,state.range.end);
const clipStart=c.start, clipEnd=c.start+c.length;
const overlapStart=Math.max(a,clipStart), overlapEnd=Math.min(b,clipEnd);
if(overlapEnd>overlapStart){
srcIn=(c.source_in||0)+(overlapStart-clipStart);
srcOut=(c.source_in||0)+(overlapEnd-clipStart);
mode='range';
}
}
const comfyUrl=getComfyUrl();
status(`Sending ${mode} to ComfyUI...`);
try{
const payload={project:state.project?.name||'itda-project-1',path:c.path,kind:c.kind,source_in:srcIn,source_out:srcOut,fps:c.fps||fps(),name:c.name,comfy_url:comfyUrl};
const data=await api('/itda/api/send_to_comfy',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
if(comfyUrl){
status(`Sent ${mode} to ComfyUI (${comfyUrl}): ${data.comfy_subfolder}/${data.comfy_name}`);
} else {
const url=`${location.origin}/?itda_send=${encodeURIComponent(data.relative)}&itda_kind=${encodeURIComponent(c.kind)}`;
window.open(url,'_blank');
status(`Sent ${mode} to ComfyUI input: ${data.relative}`);
}
}catch(e){ status(`Send To ComfyUI failed: ${e.message}`); }
}
async function runPrerender(){
if(state.prerender && !prerenderStale()){
// Second press on a still-valid render clears it and returns the
// preview to live compositing.
state.prerender=null; renderAll(); status('Pre-render cleared');
return;
}
if(state.range.start==null || state.range.end==null){
showModal('Pre-render', 'Mark an In (I) and Out (O) point on the timeline first.
Pre-render flattens that range into one cached file so it plays back smoothly.
');
return;
}
const a=Math.min(state.range.start,state.range.end), b=Math.max(state.range.start,state.range.end);
if(b-a<1){ showModal('Pre-render', 'That range is empty.
'); return; }
const started=Date.now();
showModal('Pre-render', `
Rendering ${b-a} frames (${fmtTime(b-a)})…
0.0s
Failed: ${esc(data.error||'unknown error')}
`); return; }
state.prerender={
start_frame:data.start_frame, end_frame:data.end_frame, path:data.path,
url:`/itda/api/file?path=${encodeURIComponent(data.path)}&project=${encodeURIComponent(state.project?.name||'')}&_cb=${Date.now()}`,
signature:projectSignature(),
};
renderAll();
showModal('Pre-render', `${data.start_frame}f – ${data.end_frame}f pre-rendered in ${((Date.now()-started)/1000).toFixed(1)}s.
Playback inside that range now uses the cached composite. Any edit invalidates it automatically; press R again to clear it.
`);
}catch(e){
clearInterval(timer);
showModal('Pre-render', `Failed: ${esc(e.message)}
`);
}
}
function applyTooltips(){
const tips={settingsTop:'Settings (Ctrl+,)',projectMenu:'Project Library (Ctrl+P)',saveProject:'Save Project (Ctrl+S)',exportProject:'Export (Ctrl+E)',sendComfy:'Send To ComfyUI (Ctrl+Enter)',previewMode:'Single Preview (1)',compareTop:'Compare Preview (2) - requires 2 selected clips',overlayTop:'Overlay Preview (3) - requires 2 selected clips',wipeTop:'Wipe Compare (4) - requires 2 selected clips, drag the split line',snapshotTop:'Snapshot (P)',fullscreenTop:'Fullscreen (F)',gotoClipStart:'Selected Clip Start',gotoClipEnd:'Selected Clip End',loopToggle:'Loop Range (L)',muteToggle:'Mute Monitor (M)',markIn:'Mark In (I)',markOut:'Mark Out (O)',clearRange:'Clear Range (Alt+X)',snapToggle:'Snap Toggle (S)',splitClip:'Split / Cut (C)',stitchClip:'Stitch selected clips (Shift+M)',autoStitchClip:'Auto Stitch - analyze the best overlap cut point between 2 selected video clips',addTransition:'Add Transition - select 2 adjacent video/image clips and insert a blended transition at the join',aiDetect:'AI Detect - scene changes / beat tracking for the selected clip',unstitchClip:'UnStitch selected clips (Shift+U)',groupClip:'Group selected clips (G)',ungroupClip:'Ungroup selected clips (Shift+G)',detachAudio:'Detach Audio (D)',mergeAudio:'Merge Audio back into video',prerender:'Pre-render the marked In/Out range into one cached file for smooth playback (R). Press again to clear.',deleteClip:'Delete selected clip (Delete/Backspace)',hZoom:'Horizontal Timeline Zoom',vZoom:'Vertical Track Zoom'};
Object.entries(tips).forEach(([id,t])=>{const el=$(id); if(el) el.title=t;});
}
function bind(){
applyTooltips();
document.addEventListener('pointerup', e=>{ if(e.target.closest('button,input[type="range"]')) requestAnimationFrame(()=>document.activeElement?.blur?.()); }, true);
$('saveProject').onclick=saveProject; $('projectMenu').onclick=showProjectPopup; $('settingsTop').onclick=showSettingsPopup; $('exportProject').onclick=exportProject; $('sendComfy').onclick=sendToComfy;
$('clearMedia').onclick=()=>{state.media=[]; if(state.project){state.project.media=[];state.project.clips=[];} setSelection(null); renderAll();};
$('addVideo').onclick=()=>{const fp=$('filePicker'); fp.accept='video/*'; fp.dataset.kind='video'; fp.click();}; $('addAudio').onclick=()=>{const fp=$('filePicker'); fp.accept='audio/*'; fp.dataset.kind='audio'; fp.click();}; $('addImage').onclick=()=>{const fp=$('filePicker'); fp.accept='image/*'; fp.dataset.kind='image'; fp.click();}; $('addText').onclick=addTextMedia; $('filePicker').onchange=e=>{addLocalFiles(e.target.files,e.target.dataset.kind); e.target.value='';};
$('gridView').onclick=()=>{state.mediaView='grid'; $('gridView').classList.add('active'); $('listView').classList.remove('active'); renderMedia();}; $('listView').onclick=()=>{state.mediaView='list'; $('listView').classList.add('active'); $('gridView').classList.remove('active'); renderMedia();}; $('thumbScale').oninput=e=>{state.mediaThumb=Number(e.target.value)||104; renderMedia();};
const mediaBin=document.querySelector('.media-bin');
if(mediaBin){
mediaBin.addEventListener('dragover',e=>{ if(e.dataTransfer?.types?.includes('Files')){ e.preventDefault(); mediaBin.classList.add('drag-over'); }});
mediaBin.addEventListener('dragleave',()=>mediaBin.classList.remove('drag-over'));
mediaBin.addEventListener('drop',e=>{ if(e.dataTransfer?.files?.length){ e.preventDefault(); mediaBin.classList.remove('drag-over'); addLocalFiles(e.dataTransfer.files,null); }});
}
$('playPause').onclick=playSelectedFromStart; $('previewStage').onclick=e=>{ if(e.target.id!=='snapshotToast' && !e.target.closest('#wipeHandle')) togglePlay(); };
{ const wh=$('wipeHandle'), stage=$('previewStage');
wh.addEventListener('pointerdown', e=>{
e.preventDefault(); e.stopPropagation();
const move=ev=>{
const rect=stage.getBoundingClientRect();
state.wipePos=clamp(((ev.clientX-rect.left)/rect.width)*100, 2, 98);
stage.style.setProperty('--wipe-pos', `${state.wipePos}%`);
};
move(e);
document.addEventListener('pointermove', move);
document.addEventListener('pointerup', ()=>document.removeEventListener('pointermove', move), {once:true});
});
} $('gotoClipStart').onclick=gotoSelectedStart; $('gotoClipEnd').onclick=gotoSelectedEnd; $('compareTop').onclick=()=>{ if(selectedClips().length===2){state.previewMode=state.previewMode==='compare'?'single':'compare'; renderAll();} }; $('overlayTop').onclick=()=>{ if(selectedClips().length===2){state.previewMode=state.previewMode==='overlay'?'single':'overlay'; renderAll();} }; const wipeTop=$('wipeTop'); if(wipeTop) wipeTop.onclick=()=>{ if(selectedClips().length===2){state.previewMode=state.previewMode==='wipe'?'single':'wipe'; renderAll();} }; $('previewMode').onclick=()=>{state.previewMode='single'; renderAll();}; $('snapshotTop').onclick=snapshot; $('fullscreenTop').onclick=()=>{ const el=$('previewStage'); if(document.fullscreenElement) document.exitFullscreen(); else el.requestFullscreen?.(); };
document.querySelectorAll('[data-step]').forEach(btn=>btn.onclick=()=>stepFrame(btn.dataset.step)); $('snapToggle').onclick=()=>{state.snap=!state.snap; updateControls();}; const peakBtn=$('peakSnapToggle'); if(peakBtn) peakBtn.onclick=()=>{state.peakSnap=!state.peakSnap; updateControls(); status(`Peak Match ${state.peakSnap?'ON':'OFF'}`);}; $('loopToggle').onclick=()=>{state.loop=!state.loop; updateControls();}; $('muteToggle').onclick=()=>{state.mute=!state.mute; updateControls(); updatePreview();}; $('scrubAudioToggle').onclick=()=>{state.scrubAudio=!state.scrubAudio; updateControls(); if(!state.scrubAudio)(state.scrubAudios||[]).forEach(a=>a.pause());}; $('monitorVolume').oninput=e=>{const v=Math.min(100,Math.max(0,Number(e.target.value)||0)); e.target.value=v; state.monitorVolume=v/100; $('volumeLabel').textContent=`${v}%`; [$('previewVideo'),$('previewVideoB'),...(state.scrubAudios||[]),...(state.monitorAudios||[])].forEach(a=>{ if(a){ a.volume=state.monitorVolume; if(v>0 && !state.mute) a.muted=false; }});}; $('markIn').onclick=()=>{state.range.start=state.currentFrame; renderRange();}; $('markOut').onclick=()=>{state.range.end=state.currentFrame; renderRange();}; $('clearRange').onclick=()=>{state.range={start:null,end:null}; renderRange();};
$('splitClip').onclick=splitSelected; $('stitchClip').onclick=stitchSelected; $('unstitchClip').onclick=unstitchSelected; const autoStitchBtn2=$('autoStitchClip'); if(autoStitchBtn2) autoStitchBtn2.onclick=autoStitchSelected; const transBtn2=$('addTransition'); if(transBtn2) transBtn2.onclick=()=>{ if(transBtn2.dataset.mode==='remove') removeTransitionSelected(); else addTransitionSelected(); }; const aiDetectBtn2=$('aiDetect'); if(aiDetectBtn2) aiDetectBtn2.onclick=aiDetectSelected; $('groupClip').onclick=groupSelected; $('ungroupClip').onclick=ungroupSelected; $('detachAudio').onclick=detachAudio; $('mergeAudio').onclick=mergeAudioBack; $('prerender').onclick=runPrerender; $('deleteClip').onclick=deleteSelected; const hz=$('hZoom'); if(hz) hz.oninput=e=>{state.pxPerFrame=Number(e.target.value)||state.pxPerFrame; renderTimeline();}; const vz=$('vZoom'); if(vz) vz.oninput=e=>{state.laneHeight=Number(e.target.value)||DEFAULT_LANE_H; renderTimeline();};
const timeline=$('timeline'), ruler=$('ruler'); let scrubbing=false; const scrub=e=>{state.currentFrame=frameFromTimelineEvent(e); if(state.playing){state.playStartFrame=state.currentFrame; state.playStartedAt=performance.now();} updatePlayhead();}; ruler.addEventListener('mousedown',e=>{e.preventDefault(); e.stopPropagation(); scrubbing=true; scrub(e);}); document.addEventListener('mousemove',e=>{if(scrubbing){e.preventDefault(); scrub(e);}}); document.addEventListener('mouseup',e=>{ if(scrubbing){ e.preventDefault?.(); e.stopPropagation?.(); } scrubbing=false;});
timeline.addEventListener('mousedown',e=>{
if(e.target.closest('.clip')||e.target.closest('.lane-label')||e.target.closest('#ruler')) return;
e.preventDefault();
const additive=e.ctrlKey||e.metaKey||e.shiftKey;
const box={startX:e.clientX,startY:e.clientY,moved:false,additive};
const onMove=ev=>{
if(Math.abs(ev.clientX-box.startX)>3 || Math.abs(ev.clientY-box.startY)>3) box.moved=true;
if(!box.moved) return;
const rect=timeline.getBoundingClientRect();
const x1=Math.min(box.startX,ev.clientX)-rect.left+timeline.scrollLeft, x2=Math.max(box.startX,ev.clientX)-rect.left+timeline.scrollLeft;
// y1/y2 are already correct #timeline-relative content coordinates -
// #boxSelect is positioned absolute within #timeline, whose content
// space starts at its own top (the sticky ruler still reserves its
// 48px of flow space there). The old "-48" here subtracted that
// reserved space a second time, drawing the box a constant 48px
// above the actual cursor regardless of scroll.
const y1=Math.min(box.startY,ev.clientY)-rect.top+timeline.scrollTop, y2=Math.max(box.startY,ev.clientY)-rect.top+timeline.scrollTop;
const bs=$('boxSelect'); bs.style.display='block'; bs.style.left=`${x1}px`; bs.style.width=`${Math.max(1,x2-x1)}px`; bs.style.top=`${Math.max(0,y1)}px`; bs.style.height=`${Math.max(1,y2-y1)}px`;
};
const onUp=ev=>{
document.removeEventListener('mousemove',onMove); document.removeEventListener('mouseup',onUp);
$('boxSelect').style.display='none';
if(!box.moved){ setSelection(null); state.currentFrame=frameFromTimelineEvent(e); renderAll(); return; }
const fA=frameFromTimelineEvent({clientX:box.startX}), fB=frameFromTimelineEvent(ev);
const frameLo=Math.min(fA,fB), frameHi=Math.max(fA,fB);
const laneA=laneFromClientY(box.startY), laneB=laneFromClientY(ev.clientY);
const laneLo=Math.min(laneA,laneB), laneHi=Math.max(laneA,laneB);
const hits=(state.project?.clips||[]).filter(c=>c.lane>=laneLo && c.lane<=laneHi && c.startframeLo);
if(!hits.length){ if(!box.additive) setSelection(null); renderAll(); return; }
if(box.additive){ hits.forEach(c=>{ if(!isSelected(c.id)) setSelection(c.id,true); }); }
else { setSelection(hits[0].id,false); for(let i=1;i{e.preventDefault();}); timeline.addEventListener('drop',e=>{e.preventDefault(); const raw=e.dataTransfer.getData('application/itda-media'); if(!raw) return; const item=JSON.parse(raw); addClipFromMedia(item,frameFromTimelineEvent(e)); const c=selectedClip(); if(c){ const lane=laneFromTimelineEvent(e); if(!state.lockedLanes[lane]){ const fitted=fitSingleMove(c,c.start,lane,1); c.lane=fitted.lane; c.start=fitted.start; } renderAll(); }});
timeline.addEventListener('wheel',e=>{ if(!e.ctrlKey) return; e.preventDefault(); const old=state.pxPerFrame; state.pxPerFrame=Math.max(.5,Math.min(20,state.pxPerFrame+(e.deltaY<0?.5:-.5))); timeline.scrollLeft=timeline.scrollLeft*(state.pxPerFrame/old); renderTimeline(); },{passive:false});
function isShortcutBlockedByTextInput(e){
if(e.isComposing) return true;
const editableTypes = new Set(['text','number','search','url','email','password','tel','color','date','datetime-local','month','week','time']);
const nodes = [];
if(e.target) nodes.push(e.target);
if(document.activeElement) nodes.push(document.activeElement);
if(typeof e.composedPath === 'function') nodes.push(...e.composedPath());
return nodes.some(el=>{
if(!el || el === window || el === document || !el.tagName) return false;
const tag = el.tagName.toUpperCase();
if(el.isContentEditable) return true;
if(tag === 'TEXTAREA' || tag === 'SELECT') return true;
if(tag === 'INPUT'){
const type = (el.getAttribute('type') || 'text').toLowerCase();
return editableTypes.has(type);
}
return false;
});
}
document.addEventListener('keydown',e=>{
if(isShortcutBlockedByTextInput(e)) return;
const k=e.key.toLowerCase();
if((e.ctrlKey||e.metaKey) && k===','){e.preventDefault(); showSettingsPopup(); return;}
if((e.ctrlKey||e.metaKey) && k==='p'){e.preventDefault(); showProjectPopup(); return;}
if((e.ctrlKey||e.metaKey) && k==='s'){e.preventDefault(); saveProject(); return;}
if((e.ctrlKey||e.metaKey) && k==='e'){e.preventDefault(); $('exportProject').click(); return;}
if((e.ctrlKey||e.metaKey) && e.key==='Enter'){e.preventDefault(); $('sendComfy').click(); return;}
if((e.ctrlKey||e.metaKey) && k==='d'){e.preventDefault(); duplicateSelected(); return;}
if((e.ctrlKey||e.metaKey) && k==='c'){e.preventDefault(); copySelected(); return;}
if((e.ctrlKey||e.metaKey) && k==='v'){e.preventDefault(); pasteClipboard(); return;}
if(e.code==='Space'){e.preventDefault(); togglePlay();}
else if(e.key==='Escape'){setSelection(null); renderAll();}
else if(e.key==='Delete'||e.key==='Backspace') deleteSelected();
else if(e.key==='ArrowLeft'&&e.altKey) stepFrame('first');
else if(e.key==='ArrowRight'&&e.altKey) stepFrame('last');
else if(e.key==='ArrowLeft'&&e.shiftKey) stepFrame(-5);
else if(e.key==='ArrowRight'&&e.shiftKey) stepFrame(5);
else if(e.key==='ArrowLeft') stepFrame(-1);
else if(e.key==='ArrowRight') stepFrame(1);
else if(k==='s' && !e.ctrlKey && !e.metaKey){state.snap=!state.snap; updateControls();}
else if(k==='i'){state.range.start=state.currentFrame; renderRange();}
else if(k==='o'){state.range.end=state.currentFrame; renderRange();}
else if(k==='x'&&e.altKey){state.range={start:null,end:null}; renderRange();}
else if(k==='l'){state.loop=!state.loop; updateControls();}
else if(k==='m'&&e.shiftKey){stitchSelected();}
else if(k==='u'&&e.shiftKey){unstitchSelected();}
else if(k==='c'){splitSelected();}
else if(k==='g'&&e.shiftKey){ungroupSelected();}
else if(k==='g'){groupSelected();}
else if(k==='d'&&!e.ctrlKey&&!e.metaKey){detachAudio();}
else if(k==='r'){ $('prerender').click();}
else if(k==='m'){state.mute=!state.mute; updateControls(); updatePreview();}
else if(k==='a'){state.scrubAudio=!state.scrubAudio; updateControls(); if(!state.scrubAudio)(state.scrubAudios||[]).forEach(x=>x.pause());}
else if(k==='f'){$('fullscreenTop').click();}
else if(k==='1'){state.previewMode='single'; renderAll();}
else if(k==='2'){if(selectedClips().length===2){state.previewMode=state.previewMode==='compare'?'single':'compare'; renderAll();}}
else if(k==='3'){if(selectedClips().length===2){state.previewMode=state.previewMode==='overlay'?'single':'overlay'; renderAll();}}
else if(k==='4'){if(selectedClips().length===2){state.previewMode=state.previewMode==='wipe'?'single':'wipe'; renderAll();}}
else if(k==='p') snapshot();
else if(e.key==='='||e.key==='+'){state.pxPerFrame=Math.min(20,state.pxPerFrame+.5); if($('hZoom')) $('hZoom').value=state.pxPerFrame; renderTimeline();}
else if(e.key==='-'){state.pxPerFrame=Math.max(.5,state.pxPerFrame-.5); if($('hZoom')) $('hZoom').value=state.pxPerFrame; renderTimeline();}
});
$('previewVideo').addEventListener('timeupdate',()=>{ /* playhead is driven by frame clock, not video end events */ });
let resizing=false; $('resizeHandle').addEventListener('mousedown',()=>resizing=true); document.addEventListener('mousemove',e=>{ if(!resizing) return; const y=e.clientY-46,h=window.innerHeight-46,upper=Math.max(250,Math.min(h-210,y)); $('upperPane').style.height=`${upper}px`; document.querySelector('.lower').style.height=`${h-upper-5}px`; }); document.addEventListener('mouseup',()=>resizing=false); $('modalClose').onclick=closeModal; $('modal').addEventListener('click',e=>{if(e.target.id==='modal') closeModal();});
}
bind(); initProject(new URLSearchParams(location.search).get('project')).catch(e=>status(`Init failed: ${e.message}`));
})();