Update app.py

app.py

@@ -98,7 +98,7 @@ body{{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans
 .clip-info{{padding:0 6px;flex:1;overflow:hidden}}
 .clip-name{{font-size:10px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
 .clip-duration{{font-size:9px;color:rgba(255,255,255,0.7)}}
-.clip-handles{{position:absolute;top:0;bottom:0;width:6px;background:rgba(255,255,255,0.4);cursor:ew-resize;opacity:0;transition:opacity 0.15s}}
+.clip-handles{{position:absolute;top:0;bottom:0;width:10px;background:rgba(255,255,255,0.5);cursor:ew-resize;opacity:0;transition:opacity 0.15s;z-index:10}}
 .timeline-clip:hover .clip-handles{{opacity:1}}
 .clip-handle-left{{left:0;border-radius:6px 0 0 6px}}
 .clip-handle-right{{right:0;border-radius:0 6px 6px 0}}
@@ -208,7 +208,7 @@ Simple Video Editor
 </div>
 </div>
 <script>
-var S={{mediaLibrary:[],timelineClips:[],selectedClipId:null,isPlaying:false,isMuted:false,currentTime:0,totalDuration:0,zoom:1,pps:80,undoStack:[],animId:null,audioElements:{{}}}};
+var S={{mediaLibrary:[],timelineClips:[],selectedClipId:null,isPlaying:false,isMuted:false,currentTime:0,totalDuration:0,zoom:1,pps:80,undoStack:[],animId:null,audioElements:{{}},trimData:null,exportCancelled:false}};
 function gid(){{return Date.now().toString(36)+Math.random().toString(36).substr(2)}}
 function fmt(s){{if(!s||isNaN(s))s=0;var m=Math.floor(s/60),sec=Math.floor(s%60),ms=Math.floor((s%1)*100);return(m<10?'0':'')+m+':'+(sec<10?'0':'')+sec+'.'+(ms<10?'0':'')+ms}}
 function upStat(msg){{var e=document.getElementById('statusBar');if(e)e.textContent=msg+' | 미디어: '+S.mediaLibrary.length+'개 | 클립: '+S.timelineClips.length+'개'}}
@@ -249,7 +249,7 @@ var c={{id:gid(),mid:m.id,name:m.name,type:m.type,url:m.url,thumb:m.thumb,track:
 S.timelineClips.push(c);
 renderTL();upDur();upStat('클립 추가됨: '+c.name);
 }}
-function getTrEnd(tr){{var mx=0;S.timelineClips.forEach(function(c){{if(c.track===tr){{var e=c.start+(c.te-c.ts);if(e>mx)mx=e}}}});return mx}}
+function getTrEnd(tr){{var mx=0;S.timelineClips.forEach(function(c){{if(c.track===tr){{var e=c.start+(c.te-c.ts);if(e>mx)mx=e}}}});return Math.round(mx*1000)/1000}}
 function renderTL(){{
 var t0=document.getElementById('track0'),t1=document.getElementById('track1');
 if(t0)t0.innerHTML='';if(t1)t1.innerHTML='';
@@ -263,11 +263,44 @@ d.onclick=function(e){{e.stopPropagation();selClip(c.id)}};
 d.oncontextmenu=function(e){{e.preventDefault();selClip(c.id);showCtx(e.clientX,e.clientY)}};
 d.ondragstart=function(e){{e.dataTransfer.setData('cid',c.id);e.dataTransfer.setData('ox',e.offsetX.toString())}};
 var th=c.thumb?'<img class="clip-thumbnail" src="'+c.thumb+'">':'';
-d.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+c.name+'</div><div class="clip-duration">'+fmt(cd)+'</div></div><div class="clip-handles clip-handle-left"></div><div class="clip-handles clip-handle-right"></div>';
+d.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+c.name+'</div><div class="clip-duration">'+fmt(cd)+'</div></div><div class="clip-handles clip-handle-left" data-cid="'+c.id+'" data-side="left"></div><div class="clip-handles clip-handle-right" data-cid="'+c.id+'" data-side="right"></div>';
+var hl=d.querySelector('.clip-handle-left');
+var hr=d.querySelector('.clip-handle-right');
+hl.onmousedown=function(e){{e.stopPropagation();startTrim(e,c.id,'left')}};
+hr.onmousedown=function(e){{e.stopPropagation();startTrim(e,c.id,'right')}};
 tr.appendChild(d);
 }});
 renderRuler();setupDrop();
 }}
+function startTrim(e,cid,side){{
+e.preventDefault();
+var c=S.timelineClips.find(function(x){{return x.id===cid}});if(!c)return;
+save();
+S.trimData={{cid:cid,side:side,startX:e.clientX,origTs:c.ts,origTe:c.te,origStart:c.start}};
+document.addEventListener('mousemove',doTrim);
+document.addEventListener('mouseup',endTrim);
+}}
+function doTrim(e){{
+if(!S.trimData)return;
+var c=S.timelineClips.find(function(x){{return x.id===S.trimData.cid}});if(!c)return;
+var dx=e.clientX-S.trimData.startX;
+var dt=dx/(S.pps*S.zoom);
+if(S.trimData.side==='left'){{
+var newTs=Math.max(0,Math.min(c.te-0.1,S.trimData.origTs+dt));
+var delta=newTs-S.trimData.origTs;
+c.ts=newTs;
+c.start=S.trimData.origStart+delta;
+}}else{{
+var newTe=Math.max(c.ts+0.1,Math.min(c.dur,S.trimData.origTe+dt));
+c.te=newTe;
+}}
+renderTL();upDur();
+}}
+function endTrim(){{
+S.trimData=null;
+document.removeEventListener('mousemove',doTrim);
+document.removeEventListener('mouseup',endTrim);
+}}
 function renderRuler(){{
 var r=document.getElementById('timelineRuler');if(!r)return;
 var w=Math.max(S.totalDuration*S.pps*S.zoom+300,1000);r.style.width=w+'px';
@@ -306,12 +339,19 @@ ct.innerHTML=h;
 }}
 function upProp(p,v){{save();var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(c){{c[p]=v;renderTL();upDur();renderProps()}}}}
 function editorSplit(){{
-if(!S.selectedClipId)return;
+if(!S.selectedClipId){{alert('클립을 선택해주세요.');return}}
 var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(!c)return;
-save();var cd=c.te-c.ts,sp=cd/2;
-var c2=JSON.parse(JSON.stringify(c));c2.id=gid();c2.start=c.start+sp;c2.ts=c.ts+sp;
-c.te=c.ts+sp;
-S.timelineClips.push(c2);renderTL();hideCtx();upStat('클립 분할됨');
+var clipEnd=c.start+(c.te-c.ts);
+if(S.currentTime<=c.start||S.currentTime>=clipEnd){{alert('플레이헤드가 선택한 클립 범위 안에 있어야 합니다.');return}}
+save();
+var splitAt=S.currentTime-c.start;
+var c2=JSON.parse(JSON.stringify(c));
+c2.id=gid();
+c2.start=S.currentTime;
+c2.ts=c.ts+splitAt;
+c.te=c.ts+splitAt;
+S.timelineClips.push(c2);
+renderTL();upDur();hideCtx();upStat('클립이 현재 위치에서 분할됨');
 }}
 function editorDuplicate(){{
 if(!S.selectedClipId)return;
@@ -418,58 +458,82 @@ function editorExport(){{
 if(S.timelineClips.length===0){{alert('타임라인에 클립을 추가해주세요.');return}}
 document.getElementById('exportModal').style.display='flex';
 document.getElementById('exportProgress').style.width='0%';
-document.getElementById('exportStatus').textContent='프로젝트 정보 준비 중...';
-var p=0,iv=setInterval(function(){{
-p+=5;document.getElementById('exportProgress').style.width=p+'%';
-if(p===30)document.getElementById('exportStatus').textContent='클립 정보 수집 중...';
-if(p===60)document.getElementById('exportStatus').textContent='파일 생성 중...';
-if(p>=100){{
-clearInterval(iv);
-document.getElementById('exportStatus').textContent='✅ 완료! 다운로드를 시작합니다.';
-document.getElementById('cancelExportBtn').textContent='닫기';
-setTimeout(function(){{downloadProject()}},500);
-}}
-}},30);
-}}
-function downloadProject(){{
-var project={{
-version:'1.0',
-duration:S.totalDuration,
-clips:S.timelineClips.map(function(c){{
-return {{id:c.id,name:c.name,type:c.type,track:c.track,start:c.start,duration:c.dur,trimStart:c.ts,trimEnd:c.te,volume:c.vol}};
-}}),
-media:S.mediaLibrary.map(function(m){{
-return {{id:m.id,name:m.name,type:m.type,duration:m.duration}};
-}})
-}};
-var json=JSON.stringify(project,null,2);
-var blob=new Blob([json],{{type:'application/json'}});
+document.getElementById('exportStatus').textContent='영상 렌더링 준비 중...';
+document.getElementById('cancelExportBtn').textContent='취소';
+S.exportCancelled=false;
+setTimeout(function(){{startRender()}},100);
+}}
+function startRender(){{
+var canvas=document.createElement('canvas');
+canvas.width=1280;canvas.height=720;
+var ctx=canvas.getContext('2d');
+var stream=canvas.captureStream(30);
+var audioCtx=new(window.AudioContext||window.webkitAudioContext)();
+var dest=audioCtx.createMediaStreamDestination();
+stream.addTrack(dest.stream.getAudioTracks()[0]||stream.getAudioTracks()[0]);
+var chunks=[];
+var recorder=new MediaRecorder(stream,{{mimeType:'video/webm;codecs=vp9',videoBitsPerSecond:5000000}});
+recorder.ondataavailable=function(e){{if(e.data.size>0)chunks.push(e.data)}};
+recorder.onstop=function(){{
+if(S.exportCancelled)return;
+var blob=new Blob(chunks,{{type:'video/webm'}});
 var url=URL.createObjectURL(blob);
 var a=document.createElement('a');
-a.href=url;
-a.download='video_project_'+Date.now()+'.json';
-document.body.appendChild(a);
-a.click();
-document.body.removeChild(a);
+a.href=url;a.download='edited_video_'+Date.now()+'.webm';
+document.body.appendChild(a);a.click();document.body.removeChild(a);
 URL.revokeObjectURL(url);
-if(S.timelineClips.length===1){{
-var clip=S.timelineClips[0];
-var media=S.mediaLibrary.find(function(m){{return m.id===clip.mid}});
-if(media&&(media.type==='video'||media.type==='audio')){{
-setTimeout(function(){{
-if(confirm('원본 미디어 파일도 다운로드하시겠습니까?')){{
-var a2=document.createElement('a');
-a2.href=media.url;
-a2.download=media.name;
-document.body.appendChild(a2);
-a2.click();
-document.body.removeChild(a2);
+document.getElementById('exportStatus').textContent='✅ 다운로드 완료!';
+document.getElementById('cancelExportBtn').textContent='닫기';
+}};
+recorder.start();
+var renderTime=0;
+var duration=S.totalDuration;
+var fps=30;
+var frameTime=1/fps;
+var audioSources={{}};
+S.mediaLibrary.forEach(function(m){{
+if(m.type==='video'||m.type==='audio'){{
+var el=document.createElement(m.type);
+el.src=m.url;el.crossOrigin='anonymous';el.preload='auto';el.muted=true;
+audioSources[m.id]=el;
+}}
+}});
+function renderFrame(){{
+if(S.exportCancelled){{recorder.stop();return}}
+if(renderTime>=duration){{recorder.stop();return}}
+var prog=Math.min(100,Math.round((renderTime/duration)*100));
+document.getElementById('exportProgress').style.width=prog+'%';
+document.getElementById('exportStatus').textContent='렌더링 중... '+prog+'% ('+fmt(renderTime)+' / '+fmt(duration)+')';
+ctx.fillStyle='#000';ctx.fillRect(0,0,1280,720);
+var curClips=S.timelineClips.filter(function(c){{var ce=c.start+(c.te-c.ts);return renderTime>=c.start&&renderTime<ce}});
+var vc=curClips.find(function(c){{return c.type==='video'||c.type==='image'}});
+if(vc){{
+var clipTime=renderTime-vc.start+vc.ts;
+var media=S.mediaLibrary.find(function(m){{return m.id===vc.mid}});
+if(media){{
+if(vc.type==='image'){{
+var img=new Image();img.src=media.url;
+try{{drawFit(ctx,img,1280,720)}}catch(e){{}}
+}}else if(vc.type==='video'){{
+var vid=audioSources[media.id];
+if(vid){{vid.currentTime=clipTime;try{{drawFit(ctx,vid,1280,720)}}catch(e){{}}}}
+}}
+}}
 }}
-}},1000);
+renderTime+=frameTime;
+setTimeout(renderFrame,1);
 }}
+setTimeout(renderFrame,500);
 }}
+function drawFit(ctx,src,w,h){{
+var sw=src.videoWidth||src.width||1280;
+var sh=src.videoHeight||src.height||720;
+var scale=Math.min(w/sw,h/sh);
+var dw=sw*scale,dh=sh*scale;
+var dx=(w-dw)/2,dy=(h-dh)/2;
+ctx.drawImage(src,dx,dy,dw,dh);
 }}
-function editorCancelExport(){{document.getElementById('exportModal').style.display='none';document.getElementById('cancelExportBtn').textContent='취소'}}
+function editorCancelExport(){{S.exportCancelled=true;document.getElementById('exportModal').style.display='none';document.getElementById('cancelExportBtn').textContent='취소'}}
 document.addEventListener('keydown',function(e){{
 if(e.target.tagName==='INPUT')return;
 if(e.code==='Space'){{e.preventDefault();editorTogglePlay()}}