Update app-backup6.py

app-backup6.py

@@ -659,18 +659,33 @@ rec.start(100);
 
 var dur=S.dur;
 var fps=30;
+var frameInterval=1000/fps; // 33.33ms
 var totalFrames=Math.ceil(dur*fps);
-var frameTime=1/fps;
+var startTime=performance.now();
 
-// 프레임 단위로 정확하게 렌더링
-for(var frame=0;frame<totalFrames;frame++){{
-if(S.cancelled)break;
+// 실시간 기반 렌더링 (정확한 타이밍)
+await new Promise(function(resolve){{
+var frameCount=0;
+var lastVideoEl=null;
+var lastClipId=null;
+
+function render(){{
+if(S.cancelled){{rec.stop();resolve();return}}
+
+var elapsed=performance.now()-startTime;
+var t=elapsed/1000; // 현재 시간 (초)
+
+if(t>=dur){{
+rec.stop();
+setTimeout(resolve,100);
+return;
+}}
 
-var t=frame*frameTime;
-document.getElementById('exportBar').style.width=(frame/totalFrames*100)+'%';
-document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(frame/totalFrames*100)+'% ('+Math.floor(t)+'/'+Math.floor(dur)+'초)';
+// 프로그레스 업데이트
+document.getElementById('exportBar').style.width=(t/dur*100)+'%';
+document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(t/dur*100)+'% ('+t.toFixed(1)+'/'+dur.toFixed(1)+'초)';
 
-// 오프스크린 캔버스에 먼저 그림
+// 오프스크린 캔버스에 렌더링
 offCtx.fillStyle='#000';
 offCtx.fillRect(0,0,1280,720);
 
@@ -680,8 +695,22 @@ var el=S.els[vc.mid];
 if(el){{
 if(vc.type==='video'){{
 var clipT=t-vc.start+vc.ts;
-await seekVideo(el,clipT);
+
+// 클립이 바뀌면 seek하고 재생
+if(lastClipId!==vc.id){{
+el.currentTime=clipT;
+el.play().catch(function(){{}});
+lastClipId=vc.id;
+lastVideoEl=el;
+}}
+
+// 이전 비디오 정지
+if(lastVideoEl&&lastVideoEl!==el&&!lastVideoEl.paused){{
+lastVideoEl.pause();
 }}
+lastVideoEl=el;
+}}
+
 try{{
 var sw=el.videoWidth||el.naturalWidth||el.width||1280;
 var sh=el.videoHeight||el.naturalHeight||el.height||720;
@@ -690,19 +719,27 @@ var dw=sw*scale,dh=sh*scale;
 offCtx.drawImage(el,(1280-dw)/2,(720-dh)/2,dw,dh);
 }}catch(e){{}}
 }}
+}}else{{
+// 클립 없으면 이전 비디오 정지
+if(lastVideoEl&&!lastVideoEl.paused){{
+lastVideoEl.pause();
+lastClipId=null;
+}}
 }}
 
-// 완성된 프레임을 메인 캔버스로 한 번에 복사 (깜빡임 방지)
+// 완성된 프레임을 메인 캔버스로 복사
 ctx.drawImage(offCanvas,0,0);
 
-// 프레임 간격만큼 대기
-await new Promise(function(resolve){{setTimeout(resolve,33)}});
+requestAnimationFrame(render);
 }}
 
-// 녹화 종료
-await new Promise(function(resolve){{
-rec.onstop=resolve;
-rec.stop();
+requestAnimationFrame(render);
+}});
+
+// 모든 비디오 정지
+Object.keys(S.els).forEach(function(k){{
+var el=S.els[k];
+if(el&&el.pause)el.pause();
 }});
 
 if(S.cancelled)return;
@@ -744,23 +781,6 @@ downloadDiv.appendChild(copyBtn);
 document.querySelector('.modal-box').appendChild(downloadDiv);
 }}
 
-// 비디오 seek 완료 대기 함수
-function seekVideo(video,time){{
-return new Promise(function(resolve){{
-if(Math.abs(video.currentTime-time)<0.05){{
-resolve();
-return;
-}}
-var onSeeked=function(){{
-video.removeEventListener('seeked',onSeeked);
-resolve();
-}};
-video.addEventListener('seeked',onSeeked);
-video.currentTime=time;
-setTimeout(resolve,200);
-}});
-}}
-
 function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}
 
 document.addEventListener('keydown',function(e){{