Update app-backup.py

app-backup.py

@@ -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}};
+var S={{mediaLibrary:[],timelineClips:[],selectedClipId:null,isPlaying:false,isMuted:false,currentTime:0,totalDuration:0,zoom:1,pps:80,undoStack:[],animId:null,audioElements:{{}}}};
 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+'개'}}
@@ -342,12 +342,13 @@ upPH();upPrev();S.animId=requestAnimationFrame(anim);
 }}
 S.animId=requestAnimationFrame(anim);
 }}
-function stopPB(){{if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}var v=document.querySelector('#previewContainer video');if(v&&!v.paused)v.pause()}}
+function stopPB(){{if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}var v=document.querySelector('#previewContainer video');if(v&&!v.paused)v.pause();if(S.audioElements)Object.keys(S.audioElements).forEach(function(id){{var au=S.audioElements[id];if(au&&!au.paused)au.pause()}})}}
 function upPH(){{var p=document.getElementById('playhead');if(p)p.style.left=(70+S.currentTime*S.pps*S.zoom)+'px';document.getElementById('currentTimeDisplay').textContent=fmt(S.currentTime)}}
 function upPrev(){{
 var ct=document.getElementById('previewContainer');if(!ct)return;
 var cur=S.timelineClips.filter(function(c){{var ce=c.start+(c.te-c.ts);return S.currentTime>=c.start&&S.currentTime<ce}});
 var vc=cur.find(function(c){{return c.type==='video'||c.type==='image'}});
+var ac=cur.filter(function(c){{return c.type==='audio'}});
 if(vc){{
 var ct2=S.currentTime-vc.start+vc.ts;
 if(vc.type==='image'){{if(!ct.querySelector('img[data-cid="'+vc.id+'"]'))ct.innerHTML='<img src="'+vc.url+'" data-cid="'+vc.id+'">'}}
@@ -360,9 +361,36 @@ else if(!S.isPlaying&&!v.paused)v.pause();
 v.volume=S.isMuted?0:vc.vol;v.muted=S.isMuted;
 }}
 }}else{{
-var ha=cur.some(function(c){{return c.type==='audio'}});
+var ha=ac.length>0;
 if(!ct.querySelector('.preview-placeholder'))ct.innerHTML='<div class="preview-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="2" y="2" width="20" height="20" rx="2"/><polygon points="10 8 16 12 10 16 10 8"/></svg><p>'+(ha?'🎵 오디오 재생 중':'타임라인에 미디어를 추가하세요')+'</p></div>';
 }}
+handleAudio(ac);
+}}
+function handleAudio(audioClips){{
+if(!S.audioElements)S.audioElements={{}};
+var activeIds={{}};
+audioClips.forEach(function(c){{
+activeIds[c.id]=true;
+var at=S.currentTime-c.start+c.ts;
+var au=S.audioElements[c.id];
+if(!au){{
+au=document.createElement('audio');
+au.src=c.url;
+au.preload='auto';
+S.audioElements[c.id]=au;
+}}
+if(Math.abs(au.currentTime-at)>0.3)au.currentTime=at;
+au.volume=S.isMuted?0:c.vol;
+au.muted=S.isMuted;
+if(S.isPlaying&&au.paused)au.play().catch(function(){{}});
+else if(!S.isPlaying&&!au.paused)au.pause();
+}});
+Object.keys(S.audioElements).forEach(function(id){{
+if(!activeIds[id]){{
+var au=S.audioElements[id];
+if(au&&!au.paused)au.pause();
+}}
+}});
 }}
 function editorSkipStart(){{S.currentTime=0;upPH();upPrev()}}
 function editorSkipEnd(){{S.currentTime=S.totalDuration;upPH();upPrev()}}
@@ -373,6 +401,7 @@ S.isMuted=!S.isMuted;var ic=document.getElementById('volumeIcon');
 if(S.isMuted)ic.innerHTML='<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>';
 else ic.innerHTML='<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/>';
 var v=document.querySelector('#previewContainer video');if(v)v.muted=S.isMuted;
+if(S.audioElements)Object.keys(S.audioElements).forEach(function(id){{var au=S.audioElements[id];if(au)au.muted=S.isMuted}});
 }}
 function editorSetZoom(v){{S.zoom=parseFloat(v);renderTL();upPH()}}
 function editorTimelineClick(e){{
@@ -389,14 +418,56 @@ 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='영상을 처리하고 있습니다...';
+document.getElementById('exportStatus').textContent='프로젝트 정보 준비 중...';
 var p=0,iv=setInterval(function(){{
-p+=2;document.getElementById('exportProgress').style.width=p+'%';
-if(p===30)document.getElementById('exportStatus').textContent='클립 병합 중...';
-if(p===60)document.getElementById('exportStatus').textContent='오디오 처리 중...';
-if(p===90)document.getElementById('exportStatus').textContent='최종 렌더�� 중...';
-if(p>=100){{clearInterval(iv);document.getElementById('exportStatus').textContent='✅ 완료!';document.getElementById('cancelExportBtn').textContent='닫기'}}
-}},50);
+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'}});
+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);
+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);
+}}
+}},1000);
+}}
+}}
 }}
 function editorCancelExport(){{document.getElementById('exportModal').style.display='none';document.getElementById('cancelExportBtn').textContent='취소'}}
 document.addEventListener('keydown',function(e){{