Update app.py

app.py

@@ -708,40 +708,133 @@ if(S.playing)play();else stop();
 }}
 
 function play(){{
-var last=performance.now();
-var targetFPS=30;
-var frameInterval=1000/targetFPS;
-function loop(now){{
+// 현재 비주얼 클립 찾기
+var vc=getClipAt(S.time,'visual');
+if(vc&&vc.type==='video'){{
+var el=S.els[vc.mid];
+if(el){{
+el.currentTime=S.time-vc.start+vc.ts;
+el.play().catch(function(){{}});
+}}
+}}
+// 오디오 클립들 시작
+S.clips.forEach(function(c){{
+if(c.type==='audio'){{
+var cEnd=c.start+(c.te-c.ts);
+if(S.time>=c.start&&S.time<cEnd){{
+var el=S.els[c.mid];
+if(el){{
+el.currentTime=S.time-c.start+c.ts;
+el.volume=S.muted?0:c.vol;
+el.play().catch(function(){{}});
+}}
+}}
+}}
+}});
+function loop(){{
 if(!S.playing)return;
-var dt=(now-last);
-if(dt<frameInterval){{
-S.animId=requestAnimationFrame(loop);
-return;
+var vc=getClipAt(S.time,'visual');
+if(vc&&vc.type==='video'){{
+var el=S.els[vc.mid];
+if(el&&!el.paused){{
+S.time=vc.start+(el.currentTime-vc.ts);
+}}else{{
+S.time+=1/60;
+}}
+}}else{{
+S.time+=1/60;
 }}
-last=now-(dt%frameInterval);
-S.time=S.time+dt/1000;
-
 if(S.time>=S.dur){{
 S.time=0;
 if(S.dur===0){{S.playing=false;document.getElementById('playBtn').textContent='▶';return}}
 }}
 updateHead();
-drawFrame();
+drawFrameSmooth();
 S.animId=requestAnimationFrame(loop);
 }}
 S.animId=requestAnimationFrame(loop);
 }}
 
+function drawFrameSmooth(){{
+var t=S.time;
+var vc=getClipAt(t,'visual');
+var size=S.ratioSizes[S.ratio];
+var pw=size.pw,ph=size.ph;
+
+S.ctx.fillStyle='#000';
+S.ctx.fillRect(0,0,pw,ph);
+
+if(vc){{
+var el=S.els[vc.mid];
+if(el){{
+if(vc.type==='video'){{
+el.volume=S.muted?0:vc.vol;
+}}
+try{{
+var sw=el.videoWidth||el.naturalWidth||el.width||pw;
+var sh=el.videoHeight||el.naturalHeight||el.height||ph;
+drawWithMode(S.ctx,el,sw,sh,pw,ph,S.fillMode);
+}}catch(e){{}}
+}}
+}}else if(S.clips.length===0){{
+S.ctx.fillStyle='#444';
+S.ctx.font='14px sans-serif';
+S.ctx.textAlign='center';
+S.ctx.fillText('Add media to timeline',pw/2,ph/2);
+}}
+
+// 오디오 동기화 (가벼운 체크만)
+S.clips.forEach(function(c){{
+if(c.type!=='audio')return;
+var cEnd=c.start+(c.te-c.ts);
+var el=S.els[c.mid];
+if(!el)return;
+if(t>=c.start&&t<cEnd){{
+el.volume=S.muted?0:c.vol;
+if(el.paused)el.play().catch(function(){{}});
+}}else{{
+if(!el.paused)el.pause();
+}}
+}});
+
+if(!vc&&S.clips.length>0){{
+var hasText=getTextClipsAt(t).length>0;
+if(!hasText){{
+S.ctx.fillStyle='#333';
+S.ctx.font='12px sans-serif';
+S.ctx.textAlign='center';
+S.ctx.fillText('No media at playhead',pw/2,ph/2);
+}}
+}}
+
+var textClips=getTextClipsAt(t);
+textClips.forEach(function(tc){{
+drawText(S.ctx,tc,pw,ph);
+}});
+}}
+
 function stop(){{
 if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}
 Object.keys(S.els).forEach(function(k){{
 var el=S.els[k];
-if(el&&el.pause)el.pause();
+if(el&&el.pause){{
+el.pause();
+}}
 }});
+drawFrame();
 }}
 
 function seek(t){{
 S.time=Math.max(0,Math.min(S.dur||0,t));
+// 비디오/오디오 위치도 동기화
+S.clips.forEach(function(c){{
+var el=S.els[c.mid];
+if(!el)return;
+var cEnd=c.start+(c.te-c.ts);
+if(t>=c.start&&t<cEnd){{
+el.currentTime=t-c.start+c.ts;
+}}
+}});
 updateHead();
 drawFrame();
 }}