+ {synthOpen && (() => {
+ // Portal ra document.body: dropdown absolute bottom-8 bị clip bởi
+ // overflow-hidden của root Media Explorer khi list dài (max-h-72
+ // trồi lên trên) → header + ô tìm kiếm mất khi mở lần 2+.
+ const btnRect = btnSynthRef.current ? btnSynthRef.current.getBoundingClientRect() : null;
+ return ReactDOM.createPortal(
+
Select Instrument
@@ -15199,8 +15212,8 @@ const MediaExplorerPanel = ({ height, clipboardRef, active }) => {
{!synthLoading && filteredSynthList && filteredSynthList.length === 0 && synthFilter && (
Không tìm thấy nhạc cụ trùng khớp
)}
-
- )}
+
, document.body);
+ })()}
Tempo:
diff --git a/app/static/js/app.precompiled.js b/app/static/js/app.precompiled.js
index df21a50..1fa151f 100644
--- a/app/static/js/app.precompiled.js
+++ b/app/static/js/app.precompiled.js
@@ -721,7 +721,7 @@ const handleCanvasWheelRef=React.useRef(handleCanvasWheel);handleCanvasWheelRef.
const canvas=canvasRef.current;if(!canvas)return;const rect=canvas.getBoundingClientRect();const clientX=e.clientX-rect.left;const{pxPerSec,pxPerBeat,offset}=getCanvasLayout();const isMidi=isMidiFile(selected);const value=isMidi?(clientX+offset)/pxPerBeat// in beats
:(clientX+offset)/pxPerSec;// in seconds
setSelStart(value);setSelEnd(value);setIsDragging(true);setPreviewCtxMenu(null);};const handleCanvasMouseMove=e=>{if(!isDragging||!selected)return;const canvas=canvasRef.current;if(!canvas)return;const rect=canvas.getBoundingClientRect();const clientX=e.clientX-rect.left;const{pxPerSec,pxPerBeat,offset}=getCanvasLayout();const isMidi=isMidiFile(selected);const value=isMidi?(clientX+offset)/pxPerBeat:(clientX+offset)/pxPerSec;setSelEnd(value);};const handleCanvasMouseUp=e=>{if(isDragging){setIsDragging(false);}};const handleCanvasContextMenu=e=>{e.preventDefault();if(!selected||selStart===null||selEnd===null||Math.abs(selStart-selEnd)<0.01)return;setPreviewCtxMenu({x:e.clientX,y:e.clientY});};const handleCopySelection=async()=>{if(!selected||selStart===null||selEnd===null)return;const isMidi=isMidiFile(selected);const startVal=Math.min(selStart,selEnd);const endVal=Math.max(selStart,selEnd);if(isMidi){if(!midiNotes||!midiNotes.length){window.showToast&&window.showToast('Không có dữ liệu MIDI để sao chép','warning');return;}const copiedNotes=midiNotes.filter(n=>n.start_beat>=startVal&&n.start_beat<=endVal).map(n=>({...n,start_beat:n.start_beat-startVal}));if(!copiedNotes.length){window.showToast&&window.showToast('Không có note MIDI nào trong vùng chọn','warning');return;}const selectDurBeats=endVal-startVal;const secondsPerBeat=60/(tempo||120);const selectDurSec=selectDurBeats*secondsPerBeat;const clipObj={type:'midi',notes:copiedNotes,duration:selectDurSec,name:selected.name||'MIDI Selection',color:'#a855f7'};if(clipboardRef)clipboardRef.current=clipObj;window.globalStudioClipboard=clipObj;window.showToast&&window.showToast(`Đã sao chép ${copiedNotes.length} notes MIDI.`,'success');}else{const activeBuf=await getSelectedAudioBuffer();if(!activeBuf){window.showToast&&window.showToast('Không thể tải dữ liệu âm thanh để sao chép','error');return;}const sr=activeBuf.sampleRate;const startSample=Math.floor(startVal*sr);const endSample=Math.floor(endVal*sr);const len=Math.max(1,endSample-startSample);try{const ctx=getAudioContext();const numCh=activeBuf.numberOfChannels||1;const clipBuffer=ctx.createBuffer(numCh,len,sr);for(let ch=0;ch
{const handleGlobalClick=()=>setPreviewCtxMenu(null);window.addEventListener('click',handleGlobalClick);return()=>window.removeEventListener('click',handleGlobalClick);},[]);React.useEffect(()=>{const handleKeyDown=e=>{if(e.key===' '||e.code==='Space'){if(window.mediaExplorerActive){const target=e.target;if(target&&(target.tagName==='INPUT'||target.tagName==='TEXTAREA'||target.isContentEditable)){return;}e.preventDefault();e.stopPropagation();if(isPlayingRef.current){stopMediaPlayback();}else{const cur=selectedRef.current;if(cur){selectTokenRef.current++;playSelected(cur,selectTokenRef.current);}}}}if(e.key==='ArrowUp'||e.key==='ArrowDown'||e.key==='ArrowLeft'||e.key==='ArrowRight'){if(window.mediaExplorerActive&&folderRef.current==='computer'){const target=e.target;if(target&&(target.tagName==='INPUT'||target.tagName==='TEXTAREA'||target.isContentEditable)){return;}e.preventDefault();e.stopPropagation();// Build the flat list of visible (expanded) tree nodes.
-const paths=[];const walk=(entry,depth)=>{if(!entry||!entry.path)return;paths.push({path:entry.path,entry,depth});const n=computerTreeRef.current[entry.path];if(n&&n.expanded&&n.dirs)(n.dirs||[]).forEach(d=>walk(d,depth+1));};(computerRootsRef.current||[]).forEach(r=>walk(r,0));if(!paths.length)return;const curPath=computerPathRef.current;let idx=paths.findIndex(p=>p.path===curPath);if(e.key==='ArrowUp'){const ni=idx<0?paths.length-1:Math.max(0,idx-1);navigateTreeTo(paths[ni].path);}else if(e.key==='ArrowDown'){const ni=Math.min(paths.length-1,(idx<0?-1:idx)+1);navigateTreeTo(paths[ni].path);}else if(e.key==='ArrowRight'){const node=computerTreeRef.current[curPath];if(node&&!node.expanded){setComputerTree(prev=>({...prev,[curPath]:{...(prev[curPath]||{}),expanded:true}}));if(!node.dirs||!node.dirs.length){if(browseComputerDirRef.current)browseComputerDirRef.current({name:String(curPath).split('/').pop()||curPath,path:curPath,is_dir:true,handle:node.handle});}}else if(idx<0){const p0=paths[0];if(p0)navigateTreeTo(p0.path);}}else if(e.key==='ArrowLeft'){const node=computerTreeRef.current[curPath];if(node&&node.expanded){setComputerTree(prev=>({...prev,[curPath]:{...(prev[curPath]||{}),expanded:false}}));}else if(curPath){const i=curPath.lastIndexOf('/');if(i>0){navigateTreeTo(curPath.substring(0,i));}}}}}if(e.key==='c'&&(e.ctrlKey||e.metaKey)){if(window.mediaExplorerActive){const target=e.target;if(target&&(target.tagName==='INPUT'||target.tagName==='TEXTAREA'||target.isContentEditable)){return;}if(selStartRef.current!==null&&selEndRef.current!==null&&Math.abs(selStartRef.current-selEndRef.current)>0.01){e.preventDefault();e.stopPropagation();handleCopySelection();}}}};window.addEventListener('keydown',handleKeyDown,{capture:true});return()=>{window.removeEventListener('keydown',handleKeyDown,{capture:true});};},[]);const[computerRoots,setComputerRoots]=React.useState(null);const[computerTree,setComputerTree]=React.useState({});const[computerPath,setComputerPath]=React.useState(null);const[computerFiles,setComputerFiles]=React.useState([]);const[computerMode,setComputerMode]=React.useState('server');const[clientRoot,setClientRoot]=React.useState(null);computerPathRef.current=computerPath;computerTreeRef.current=computerTree;computerRootsRef.current=computerRoots;const[favorites,setFavorites]=React.useState(function(){try{return JSON.parse(localStorage.getItem('studio_media_explorer_favorites_v1')||'[]');}catch(e){return[];}}());const[favContext,setFavContext]=React.useState(null);const[favoritedExpanded,setFavoritedExpanded]=React.useState(true);const[colWidths,setColWidths]=React.useState({file:260,size:100,type:100});const startColResize=(colKey,e)=>{e.preventDefault();const startX=e.clientX;const startWidth=colWidths[colKey];const onMouseMove=moveEvent=>{const deltaX=moveEvent.clientX-startX;const newWidth=Math.max(50,startWidth+deltaX);setColWidths(prev=>({...prev,[colKey]:newWidth}));};const onMouseUp=()=>{document.removeEventListener('mousemove',onMouseMove);document.removeEventListener('mouseup',onMouseUp);};document.addEventListener('mousemove',onMouseMove);document.addEventListener('mouseup',onMouseUp);};const[synthInst,setSynthInst]=React.useState(function(){var saved=localStorage.getItem('studio_media_explorer_synth');return saved?JSON.parse(saved):null;}());const[synthOpen,setSynthOpen]=React.useState(false);const[synthFilter,setSynthFilter]=React.useState('');const[synthList,setSynthList]=React.useState(null);const[synthLoading,setSynthLoading]=React.useState(false);const synthListRef=React.useRef(null);synthListRef.current=synthList;const synthInstRef=React.useRef(null);synthInstRef.current=synthInst;const[treeWidth,setTreeWidth]=React.useState(function(){var saved=localStorage.getItem('studio_media_explorer_tree_width');return saved?parseInt(saved):176;}());const treeWidthRef=React.useRef(176);treeWidthRef.current=treeWidth;const startTreeResize=e=>{e.preventDefault();const startX=e.clientX;const startW=treeWidthRef.current;const onMove=ev=>{const newW=Math.max(110,Math.min(420,startW+(ev.clientX-startX)));treeWidthRef.current=newW;setTreeWidth(newW);};const onUp=()=>{document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp);localStorage.setItem('studio_media_explorer_tree_width',treeWidthRef.current.toString());};document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp);};const canvasRef=React.useRef(null);const playStateRef=React.useRef(null);const rafRef=React.useRef(null);const loopTimerRef=React.useRef(null);const selectTokenRef=React.useRef(0);React.useEffect(()=>{if(window.SonicAPI&&window.SonicAPI.listMyFiles){window.SonicAPI.listMyFiles([]).then(data=>setUserFiles(data||[])).catch(()=>{});}return()=>{stopMediaPlayback();};// eslint-disable-next-line react-hooks/exhaustive-deps
+const paths=[];const walk=(entry,depth)=>{if(!entry||!entry.path)return;paths.push({path:entry.path,entry,depth});const n=computerTreeRef.current[entry.path];if(n&&n.expanded&&n.dirs)(n.dirs||[]).forEach(d=>walk(d,depth+1));};(computerRootsRef.current||[]).forEach(r=>walk(r,0));if(!paths.length)return;const curPath=computerPathRef.current;let idx=paths.findIndex(p=>p.path===curPath);if(e.key==='ArrowUp'){const ni=idx<0?paths.length-1:Math.max(0,idx-1);navigateTreeTo(paths[ni].path);}else if(e.key==='ArrowDown'){const ni=Math.min(paths.length-1,(idx<0?-1:idx)+1);navigateTreeTo(paths[ni].path);}else if(e.key==='ArrowRight'){const node=computerTreeRef.current[curPath];if(node&&!node.expanded){setComputerTree(prev=>({...prev,[curPath]:{...(prev[curPath]||{}),expanded:true}}));if(!node.dirs||!node.dirs.length){if(browseComputerDirRef.current)browseComputerDirRef.current({name:String(curPath).split('/').pop()||curPath,path:curPath,is_dir:true,handle:node.handle});}}else if(idx<0){const p0=paths[0];if(p0)navigateTreeTo(p0.path);}}else if(e.key==='ArrowLeft'){const node=computerTreeRef.current[curPath];if(node&&node.expanded){setComputerTree(prev=>({...prev,[curPath]:{...(prev[curPath]||{}),expanded:false}}));}else if(curPath){const i=curPath.lastIndexOf('/');if(i>0){navigateTreeTo(curPath.substring(0,i));}}}}}if(e.key==='c'&&(e.ctrlKey||e.metaKey)){if(window.mediaExplorerActive){const target=e.target;if(target&&(target.tagName==='INPUT'||target.tagName==='TEXTAREA'||target.isContentEditable)){return;}if(selStartRef.current!==null&&selEndRef.current!==null&&Math.abs(selStartRef.current-selEndRef.current)>0.01){e.preventDefault();e.stopPropagation();handleCopySelection();}}}};window.addEventListener('keydown',handleKeyDown,{capture:true});return()=>{window.removeEventListener('keydown',handleKeyDown,{capture:true});};},[]);const[computerRoots,setComputerRoots]=React.useState(null);const[computerTree,setComputerTree]=React.useState({});const[computerPath,setComputerPath]=React.useState(null);const[computerFiles,setComputerFiles]=React.useState([]);const[computerMode,setComputerMode]=React.useState('server');const[clientRoot,setClientRoot]=React.useState(null);computerPathRef.current=computerPath;computerTreeRef.current=computerTree;computerRootsRef.current=computerRoots;const[favorites,setFavorites]=React.useState(function(){try{return JSON.parse(localStorage.getItem('studio_media_explorer_favorites_v1')||'[]');}catch(e){return[];}}());const[favContext,setFavContext]=React.useState(null);const[favoritedExpanded,setFavoritedExpanded]=React.useState(true);const[colWidths,setColWidths]=React.useState({file:260,size:100,type:100});const startColResize=(colKey,e)=>{e.preventDefault();const startX=e.clientX;const startWidth=colWidths[colKey];const onMouseMove=moveEvent=>{const deltaX=moveEvent.clientX-startX;const newWidth=Math.max(50,startWidth+deltaX);setColWidths(prev=>({...prev,[colKey]:newWidth}));};const onMouseUp=()=>{document.removeEventListener('mousemove',onMouseMove);document.removeEventListener('mouseup',onMouseUp);};document.addEventListener('mousemove',onMouseMove);document.addEventListener('mouseup',onMouseUp);};const[synthInst,setSynthInst]=React.useState(function(){var saved=localStorage.getItem('studio_media_explorer_synth');return saved?JSON.parse(saved):null;}());const[synthOpen,setSynthOpen]=React.useState(false);const[synthFilter,setSynthFilter]=React.useState('');const[synthList,setSynthList]=React.useState(null);const[synthLoading,setSynthLoading]=React.useState(false);const synthListRef=React.useRef(null);synthListRef.current=synthList;const synthInstRef=React.useRef(null);synthInstRef.current=synthInst;const btnSynthRef=React.useRef(null);const[treeWidth,setTreeWidth]=React.useState(function(){var saved=localStorage.getItem('studio_media_explorer_tree_width');return saved?parseInt(saved):176;}());const treeWidthRef=React.useRef(176);treeWidthRef.current=treeWidth;const startTreeResize=e=>{e.preventDefault();const startX=e.clientX;const startW=treeWidthRef.current;const onMove=ev=>{const newW=Math.max(110,Math.min(420,startW+(ev.clientX-startX)));treeWidthRef.current=newW;setTreeWidth(newW);};const onUp=()=>{document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp);localStorage.setItem('studio_media_explorer_tree_width',treeWidthRef.current.toString());};document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp);};const canvasRef=React.useRef(null);const playStateRef=React.useRef(null);const rafRef=React.useRef(null);const loopTimerRef=React.useRef(null);const selectTokenRef=React.useRef(0);React.useEffect(()=>{if(window.SonicAPI&&window.SonicAPI.listMyFiles){window.SonicAPI.listMyFiles([]).then(data=>setUserFiles(data||[])).catch(()=>{});}return()=>{stopMediaPlayback();};// eslint-disable-next-line react-hooks/exhaustive-deps
},[]);// ── Session persistence: keep loaded folder/files/tree across panel toggles & reloads ──
const SESSION_KEY='studio_media_explorer_session_v1';const saveClientRootHandle=(key='client_root',handle=clientRoot)=>{if(!handle||!window.indexedDB)return;try{const req=indexedDB.open('sonicforge_media_explorer',1);req.onupgradeneeded=e=>{const db=e.target.result;if(!db.objectStoreNames.contains('root_handle'))db.createObjectStore('root_handle');};req.onsuccess=()=>{const db=req.result;const tx=db.transaction('root_handle','readwrite');tx.objectStore('root_handle').put(handle,key);};}catch(e){}};const loadClientRootHandle=(key='client_root')=>{return new Promise(resolve=>{if(!window.indexedDB){resolve(null);return;}try{const req=indexedDB.open('sonicforge_media_explorer',1);req.onupgradeneeded=e=>{const db=e.target.result;if(!db.objectStoreNames.contains('root_handle'))db.createObjectStore('root_handle');};req.onsuccess=()=>{const db=req.result;try{const tx=db.transaction('root_handle','readonly');const g=tx.objectStore('root_handle').get(key);g.onsuccess=()=>resolve(g.result||null);g.onerror=()=>resolve(null);}catch(e2){resolve(null);}};req.onerror=()=>resolve(null);}catch(e){resolve(null);}});};const saveSession=React.useCallback(()=>{try{const stripHandle=o=>{if(Array.isArray(o))return o.map(stripHandle);if(o&&typeof o==='object'){const out={};for(const k of Object.keys(o)){if(k==='handle')continue;out[k]=stripHandle(o[k]);}return out;}return o;};const treeSnapshot={};Object.keys(computerTree).forEach(path=>{const node=computerTree[path];treeSnapshot[path]={dirs:stripHandle(node?node.dirs:[]),expanded:!!(node&&node.expanded)};});const snap={folder,computerMode,computerPath,clientRootName:clientRoot?clientRoot.name:null,computerRoots:stripHandle(computerRoots||[]),computerTree:treeSnapshot,computerFiles:stripHandle(computerFiles||[]),selected:selected?stripHandle({name:selected.name,path:selected.path,kind:selected.kind,is_dir:selected.is_dir,size_mb:selected.size_mb}):null,savedAt:Date.now()};localStorage.setItem(SESSION_KEY,JSON.stringify(snap));}catch(e){}},[folder,computerMode,computerPath,clientRoot,computerRoots,computerTree,computerFiles,selected]);React.useEffect(()=>{saveSession();if(computerMode==='client'&&clientRoot&&clientRoot.kind==='directory')saveClientRootHandle();},[saveSession,computerMode,clientRoot]);React.useEffect(()=>{(async()=>{let lastFolder='library';let lastComputerPath='favorited';try{const raw=localStorage.getItem(SESSION_KEY);if(raw){const snap=JSON.parse(raw);if(snap.folder)lastFolder=snap.folder;if(snap.computerPath)lastComputerPath=snap.computerPath;setFolder(lastFolder);}}catch(e){}// 1. Khôi phục client-side root handle từ IndexedDB
const savedHandle=await loadClientRootHandle();let restoredClientRoot=null;if(savedHandle&&savedHandle.kind==='directory'){setClientRoot(savedHandle);restoredClientRoot=savedHandle;setComputerMode('client');const rootEntry={name:savedHandle.name,path:'root',is_dir:true,handle:savedHandle};setComputerRoots([rootEntry]);// Quét đúng 1 cấp con dưới root của client
@@ -750,7 +750,10 @@ const cur=selectedRef.current;if(isPlayingRef.current&&cur&&isMidiFile(cur)&&(cu
// return im lặng → autoplay câm. Bridge load SF2 vào channel riêng rồi
// pushEvent NOTE_ON/OFF theo beat (giống scheduleMidiNoteDispatch cho track).
const _mePreview={sfId:null,ch:null};const playMediaExplorerBridgePreview=async(notes,o)=>{try{const isPerc=!!(o.bank===128);const ch=window.SonicMidiRouter.allocateChannel('media_explorer',isPerc);const sfName=String(o.sfId||'').replace(/^sf_/,'');if(!sfName)return false;const needLoad=_mePreview.sfId!==sfName||_mePreview.ch!==ch;if(needLoad){const r=await window.SonicAPI.bridgeLoad({name:sfName,instrumentType:'SF2',channel:ch});if(!r||!r.path)return false;const ok=await window.NativeBridgeService.loadInstrument(r.path,'SF2',ch);if(!ok)return false;_mePreview.sfId=sfName;_mePreview.ch=ch;}window.SonicMidiRouter.pushEvent({cmd:'CC',channel:ch,pitch:0,velocity:0,data2:(o.bank||0)>>7&0x7F,percussion:isPerc});window.SonicMidiRouter.pushEvent({cmd:'CC',channel:ch,pitch:32,velocity:0,data2:(o.bank||0)&0x7F,percussion:isPerc});window.SonicMidiRouter.pushEvent({cmd:'PROGRAM',channel:ch,pitch:0,velocity:0,data2:o.prog||0,percussion:isPerc});const ctx=getAudioContext();const beatSec=60.0/(o.bpm||120);// Load SF2 vào bridge bất đồng bộ → note đầu trễ thêm khi load mới.
-const passStart=ctx.currentTime+(needLoad?0.5:0.08);const schedulePassBridge=passStartTime=>{notes.forEach(note=>{const nStart=note.start_beat||0;if(o.hasSelection&&(nStart=o.loopEndBeats))return;const shifted=o.hasSelection?nStart-o.loopStartBeats:nStart;const startSec=shifted*beatSec;const durMs=Math.max(80,(note.duration_beats||1)*beatSec*1000);const at=passStartTime+startSec;const delayMs=Math.max(0,(at-ctx.currentTime)*1000);const pitch=note.pitch||60;const vel=note.velocity!=null?note.velocity:0.8;window.SonicMidiRouter.pushEvent({cmd:'NOTE_ON',channel:ch,pitch:pitch,velocity:vel,percussion:isPerc,live:true});setTimeout(()=>{if(selectTokenRef.current!==(o.token||selectTokenRef.current))return;window.SonicMidiRouter.pushEvent({cmd:'NOTE_OFF',channel:ch,pitch:pitch,velocity:0,percussion:isPerc,live:true});},delayMs+durMs+30);});};schedulePassBridge(passStart);if(loopTimerRef.current){clearInterval(loopTimerRef.current);loopTimerRef.current=null;}if(o.isLooping){loopTimerRef.current=setInterval(()=>{if(selectTokenRef.current!==(o.token||selectTokenRef.current)){clearInterval(loopTimerRef.current);loopTimerRef.current=null;return;}if(!isPlayingRef.current||isPausedRef.current)return;if(!isLoopingRef.current){clearInterval(loopTimerRef.current);loopTimerRef.current=null;return;}schedulePassBridge(ctx.currentTime+0.05);},Math.max(200,o.loopDurationSec*1000));}return true;}catch(e){console.warn('[MediaExplorer] bridge preview fail → WASM:',e);return false;}};const playMidiPreview=async(f,token)=>{// Play real MIDI file through selected synth instrument (SonicSF)
+const passStart=ctx.currentTime+(needLoad?0.5:0.08);const schedulePassBridge=passStartTime=>{notes.forEach(note=>{const nStart=note.start_beat||0;if(o.hasSelection&&(nStart=o.loopEndBeats))return;const shifted=o.hasSelection?nStart-o.loopStartBeats:nStart;const startSec=shifted*beatSec;const durMs=Math.max(80,(note.duration_beats||1)*beatSec*1000);const at=passStartTime+startSec;const delayMs=Math.max(0,(at-ctx.currentTime)*1000);const pitch=note.pitch||60;const vel=note.velocity!=null?note.velocity:0.8;// NOTE_ON cũng delay theo beat (giống scheduleMidiNoteDispatch) — gửi
+// ngay t=0 khi needLoad=true sẽ mất note vì SF2 chưa load xong trong
+// bridge (uiWorker async bên C++).
+setTimeout(()=>{if(selectTokenRef.current!==(o.token||selectTokenRef.current))return;window.SonicMidiRouter.pushEvent({cmd:'NOTE_ON',channel:ch,pitch:pitch,velocity:vel,percussion:isPerc,live:true});},delayMs);setTimeout(()=>{if(selectTokenRef.current!==(o.token||selectTokenRef.current))return;window.SonicMidiRouter.pushEvent({cmd:'NOTE_OFF',channel:ch,pitch:pitch,velocity:0,percussion:isPerc,live:true});},delayMs+durMs+30);});};schedulePassBridge(passStart);if(loopTimerRef.current){clearInterval(loopTimerRef.current);loopTimerRef.current=null;}if(o.isLooping){loopTimerRef.current=setInterval(()=>{if(selectTokenRef.current!==(o.token||selectTokenRef.current)){clearInterval(loopTimerRef.current);loopTimerRef.current=null;return;}if(!isPlayingRef.current||isPausedRef.current)return;if(!isLoopingRef.current){clearInterval(loopTimerRef.current);loopTimerRef.current=null;return;}schedulePassBridge(ctx.currentTime+0.05);},Math.max(200,o.loopDurationSec*1000));}return true;}catch(e){console.warn('[MediaExplorer] bridge preview fail → WASM:',e);return false;}};const playMidiPreview=async(f,token)=>{// Play real MIDI file through selected synth instrument (SonicSF)
if(!f||!window.SonicSF)return;try{const buf=await readLocalFileBuffer(f);if(!buf)return;if(selectTokenRef.current!==(token||selectTokenRef.current))return;const midiResult=(typeof parseMidiFile==='function'?parseMidiFile:window.parseMidiFile)(buf);if(!midiResult||!midiResult.length)return;// Feature: selecting/playing a MIDI file auto-sets the playback tempo to
// the file's own BPM (so the preview plays in time).
const fileBpm=midiResult[0]&&midiResult[0].bpm||120;const newTempo=Math.max(40,Math.min(300,Math.round(fileBpm)));setTempo(newTempo);setTempoText(String(newTempo));tempoRef.current=newTempo;try{localStorage.setItem('studio_media_explorer_tempo',String(newTempo));}catch(e){}const ctx=getAudioContext();// Đồng bộ mastering + routing SF trước khi preview MIDI file (âm qua
@@ -793,7 +796,10 @@ isLoopingRef.current=next;const cur=selectedRef.current;const st=playStateRef.cu
// the loop points to the current selection so it loops continuously
// over the selected region until Stop is pressed.
if(next&&st.source.buffer){if(hasSelection){st.source.loopStart=Math.min(sStart,sEnd);st.source.loopEnd=Math.max(sStart,sEnd);}else{st.source.loopStart=0;st.source.loopEnd=st.source.buffer.duration;}}}if(next&&isMidiFile(cur)){// Re-schedule loop for the currently previewing MIDI file
-if(cur&&(cur.handle||cur.path||cur.file_id||cur.fileId||cur.kind==='midi'&&cur.name)){selectTokenRef.current++;const token=selectTokenRef.current;try{if(window.SonicMidiRouter)window.SonicMidiRouter.panic();else if(window.SonicSF&&typeof window.SonicSF.stopAll==='function')window.SonicSF.stopAll();}catch(e){}stopAllNativeSfNotes();playMidiPreview(cur,token);}}return next;});};const toggleRate=dir=>setRate(prev=>Math.max(0.25,Math.min(4.0,Math.round((prev+dir*0.1)*100)/100)));const togglePitch=dir=>setPitch(prev=>Math.max(-24,Math.min(24,prev+dir*0.5)));const selIsMidi=isMidiFile(selected);const selDur=fileDuration(selected);const selBpm=selected&&selected.bpm||tempo;return/*#__PURE__*/React.createElement("div",{ref:containerRef,className:"flex flex-col w-full h-full text-slate-900 overflow-hidden select-none",style:{fontFamily:"'Inter', sans-serif"}},/*#__PURE__*/React.createElement("div",{className:"h-8 bg-[#d4d0c8] border-b border-[#808080] px-2 flex items-center justify-between text-xs shrink-0"},/*#__PURE__*/React.createElement("div",{className:"flex items-center gap-1 flex-1 mr-2"},/*#__PURE__*/React.createElement("button",{className:"w-5 h-5 bg-[#e0e0e0] hover:bg-white border border-[#707070] rounded-sm flex items-center justify-center text-[10px]",title:"Back",onClick:()=>folder==='computer'?goComputerParent():setFolder('library')},/*#__PURE__*/React.createElement("i",{className:"fa-solid fa-arrow-left"})),/*#__PURE__*/React.createElement("button",{className:"w-5 h-5 bg-[#e0e0e0] hover:bg-white border border-[#707070] rounded-sm flex items-center justify-center text-[10px]",title:"Forward",onClick:()=>setFolder('uploads')},/*#__PURE__*/React.createElement("i",{className:"fa-solid fa-arrow-right"})),/*#__PURE__*/React.createElement("button",{className:"w-5 h-5 bg-[#e0e0e0] hover:bg-white border border-[#707070] rounded-sm flex items-center justify-center text-[10px]",title:"Up Directory",onClick:()=>folder==='computer'?goComputerParent():setFolder('library')},/*#__PURE__*/React.createElement("i",{className:"fa-solid fa-arrow-up"})),/*#__PURE__*/React.createElement("button",{className:"w-5 h-5 bg-[#e0e0e0] hover:bg-white border border-[#707070] rounded-sm flex items-center justify-center text-[10px]",title:"Refresh",onClick:()=>{if(folder==='computer'){const node=computerTree[computerPath];if(node&&node.handle)browseComputerDir({name:computerPath.split('/').pop()||computerPath,path:computerPath,is_dir:true,handle:node.handle});else if(computerPath)browseComputerDir({name:computerPath.split(/[\\/]/).pop()||computerPath,path:computerPath,is_dir:true});}else if(window.SonicAPI&&window.SonicAPI.listMyFiles)window.SonicAPI.listMyFiles([]).then(d=>setUserFiles(d||[]));}},/*#__PURE__*/React.createElement("i",{className:"fa-solid fa-rotate-right"})),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex items-center bg-white border border-[#808080] h-5 px-1"},/*#__PURE__*/React.createElement("i",{className:"fa-solid fa-folder-open text-[#d9a752] text-[11px] mr-1.5"}),/*#__PURE__*/React.createElement("span",{className:"flex-1 text-xs text-slate-800 truncate"},folder==='computer'?computerPath||'My Computer':folder==='library'?'Media Library':folder==='uploads'?'Uploads':'Processed'),/*#__PURE__*/React.createElement("i",{className:"fa-solid fa-caret-down text-slate-600 text-[10px] ml-1"}))),/*#__PURE__*/React.createElement("div",{className:"flex items-center gap-2"},/*#__PURE__*/React.createElement("div",{className:"flex items-center bg-white border border-[#808080] h-5 px-1 w-40"},/*#__PURE__*/React.createElement("input",{type:"text",placeholder:"Filter/Search...",value:filterText,onChange:e=>setFilterText(e.target.value),className:"w-full text-xs outline-none bg-transparent font-sans text-slate-800"}),/*#__PURE__*/React.createElement("i",{className:"fa-solid fa-caret-down text-slate-600 text-[10px] ml-1"})),/*#__PURE__*/React.createElement("button",{className:"px-2 py-0.5 bg-[#e0e0e0] hover:bg-white border border-[#707070] rounded-sm text-[11px] flex items-center gap-1 font-semibold",onClick:()=>setViewMode(viewMode==='details'?'list':'details')},/*#__PURE__*/React.createElement("span",null,viewMode==='details'?'Details':'List')," ",/*#__PURE__*/React.createElement("i",{className:"fa-solid fa-caret-down text-[9px]"})))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex overflow-hidden min-h-0 relative"},/*#__PURE__*/React.createElement("div",{className:"flex bg-white border border-[#808080] m-1 mr-0 text-xs select-none shrink-0 overflow-hidden"},/*#__PURE__*/React.createElement("div",{ref:treePaneRef,className:"overflow-y-auto p-1",style:{width:treeWidth+'px',minWidth:treeWidth+'px',maxWidth:treeWidth+'px'}},/*#__PURE__*/React.createElement("div",{className:"space-y-0.5 font-sans"},/*#__PURE__*/React.createElement("div",{className:"flex items-center gap-1 px-1 py-0.5 text-slate-700"},/*#__PURE__*/React.createElement("span",{className:"w-3"}),"