3dtours/SonicForgeStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Media Explorer duyệt toàn bộ folder và files (tree đệ quy)

Browse Source
This commit is contained in:
3dtours
2026-08-02 14:31:42 +07:00
parent 1989bfb105
commit 4db777eb5d
5 changed files with 55 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/app.jsx
+35 -31
View File
@@ -9051,9 +9051,12 @@ const MediaExplorerPanel = ({ height }) => {
const folderFiles = React.useMemo(() => {
if (folder === 'library') return MEDIA_LIBRARY_SAMPLES;
if (folder === 'computer') return computerFiles;
if (folder === 'computer') {
const node = computerTree[computerPath] || { dirs: [] };
return [...(node.dirs || []), ...computerFiles];
}
return userFiles.filter(f => (folder === 'uploads' ? (f.type || 'Upload') === 'Upload' : (f.type || 'Processed') === 'Processed'));
}, [folder, userFiles, computerFiles]);
}, [folder, userFiles, computerFiles, computerTree, computerPath]);
const visibleFiles = React.useMemo(() => {
const q = filterText.toLowerCase().trim();
@@ -9302,12 +9305,34 @@ const MediaExplorerPanel = ({ height }) => {
React.useEffect(() => () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }, []);
const handleSelect = (f) => {
if (!f || f.is_dir) return;
setSelected(f);
setCurrentTime(0);
if (f.kind === 'other') { stopMediaPlayback(); return; }
if (autoPlay) { playSelected(f); } else { stopMediaPlayback(); }
if (!isMidiFile(f) && (f.path || f.file_id || f.fileId)) loadWaveform(f);
};
const renderComputerNode = (nodePath, name, depth, isRoot) => {
const node = computerTree[nodePath];
const expanded = node && node.expanded;
const dirs = node ? node.dirs : [];
const pad = 12 + depth * 12;
return (
<React.Fragment key={nodePath}>
<div className={`flex items-center gap-1 px-1 py-0.5 cursor-pointer rounded-sm ${computerPath === nodePath ? 'bg-slate-300 text-slate-900' : 'hover:bg-slate-200 text-slate-800'}`}
style={{ paddingLeft: pad }}
onClick={() => browseComputerDir(nodePath)}
onDoubleClick={e => { e.stopPropagation(); toggleComputerDir(nodePath); }}>
<i className={`fa-solid ${expanded ? 'fa-minus' : 'fa-plus'} text-[9px] text-slate-500 w-3 text-center shrink-0`} onClick={e => { e.stopPropagation(); toggleComputerDir(nodePath); }}></i>
<i className={`fa-solid ${isRoot ? 'fa-hard-drive text-[#6ea8dc]' : 'fa-folder text-[#d9a752]'} shrink-0`}></i>
<span className="truncate">{name}</span>
</div>
{expanded && dirs.map(d => renderComputerNode(d.path, d.name, depth + 1, false))}
</React.Fragment>
);
};
const toggleLoop = () => {
setIsLooping(prev => {
const next = !prev;
@@ -9369,32 +9394,7 @@ const MediaExplorerPanel = ({ height }) => {
</div>
{folder === 'computer' && computerRoots && (
<div className="pl-3 space-y-0.5">
{computerRoots.map((root, ri) => {
const node = computerTree[root.path];
const expanded = node && node.expanded;
const dirs = node ? node.dirs : [];
return (
<React.Fragment key={root.path + ri}>
<div className={`flex items-center gap-1 px-1 py-0.5 cursor-pointer rounded-sm pl-4 ${computerPath === root.path ? 'bg-slate-300 text-slate-900' : 'hover:bg-slate-200 text-slate-800'}`} onClick={() => browseComputerDir(root.path)}>
<i className={`fa-solid ${expanded ? 'fa-minus' : 'fa-plus'} text-[9px] text-slate-500 w-3 text-center`} onClick={e => { e.stopPropagation(); toggleComputerDir(root.path); }}></i>
<i className="fa-solid fa-hard-drive text-[#6ea8dc]"></i> {root.name}
</div>
{expanded && dirs.map((d, di) => (
<React.Fragment key={d.path + di}>
<div className={`flex items-center gap-1 px-1 py-0.5 cursor-pointer rounded-sm pl-8 ${computerPath === d.path ? 'bg-slate-300 text-slate-900' : 'hover:bg-slate-200 text-slate-800'}`} onClick={() => browseComputerDir(d.path)}>
<i className={`fa-solid ${computerTree[d.path] && computerTree[d.path].expanded ? 'fa-minus' : 'fa-plus'} text-[9px] text-slate-500 w-3 text-center`} onClick={e => { e.stopPropagation(); toggleComputerDir(d.path); }}></i>
<i className="fa-solid fa-folder text-[#d9a752]"></i> {d.name}
</div>
{computerTree[d.path] && computerTree[d.path].expanded && computerTree[d.path].dirs.map((dd, ddi) => (
<div key={dd.path + ddi} className={`flex items-center gap-1 px-1 py-0.5 cursor-pointer rounded-sm pl-12 ${computerPath === dd.path ? 'bg-slate-300 text-slate-900' : 'hover:bg-slate-200 text-slate-800'}`} onClick={() => browseComputerDir(dd.path)}>
<i className="fa-solid fa-folder text-[#d9a752]"></i> {dd.name}
</div>
))}
</React.Fragment>
))}
</React.Fragment>
);
})}
{computerRoots.map(root => renderComputerNode(root.path, root.name, 0, true))}
</div>
)}
<div className={`flex items-center gap-1 px-1 py-0.5 cursor-pointer font-semibold rounded-sm ${folder === 'library' ? 'bg-slate-300 text-slate-900' : 'hover:bg-slate-200 text-slate-800'}`} onClick={() => setFolder('library')}>
@@ -9426,9 +9426,13 @@ const MediaExplorerPanel = ({ height }) => {
{visibleFiles.map((f, i) => {
const isSel = selected && (selected.name || selected.file_id) === (f.name || f.file_id);
const isMidi = isMidiFile(f);
const icon = f.is_dir ? 'fa-folder text-[#d9a752]' : (isMidi ? 'fa-music text-purple-600' : (f.kind === 'audio' ? 'fa-file-audio text-emerald-600' : 'fa-file text-zinc-500'));
return (
<tr key={(f.file_id || f.name) + i} className={`cursor-pointer hover:bg-blue-100 ${isSel ? 'file-row-selected' : ''}`} onClick={() => handleSelect(f)}>
<td className="py-1 px-2"><i className={`fa-solid ${isMidi ? 'fa-music text-purple-600' : 'fa-file-audio text-emerald-600'} mr-2`}></i>{f.name || f.original_name}</td>
<tr key={(f.path || f.file_id || f.name) + i}
className={`cursor-pointer hover:bg-blue-100 ${isSel ? 'file-row-selected' : ''}`}
onClick={() => f.is_dir ? browseComputerDir(f.path) : handleSelect(f)}
onDoubleClick={() => f.is_dir && browseComputerDir(f.path)}>
<td className="py-1 px-2"><i className={`fa-solid ${icon} mr-2`}></i>{f.name || f.original_name}</td>
{viewMode === 'details' && <td className="py-1 px-2">{f.size_mb != null ? f.size_mb.toFixed(2) + ' MB' : (isMidi ? (f.tpqn || 'MIDI') + ' TPQN' : '-')}</td>}
</tr>
);
@@ -9505,7 +9509,7 @@ const MediaExplorerPanel = ({ height }) => {
<div>Size: {selected.size_mb != null ? selected.size_mb.toFixed(2) + ' MB' : '-'}</div>
<div>Duration: {selDur.toFixed(2)}s</div>
<div>Sample Rate: 44100 Hz</div>
<div>Type: {selected.path ? (selIsMidi ? 'Local MIDI' : 'Local Audio') : (selected.type || 'Audio')}</div>
<div>Type: {selected.path ? (selIsMidi ? 'Local MIDI' : (selected.kind === 'other' ? 'Local File' : 'Local Audio')) : (selected.type || 'Audio')}</div>
</React.Fragment>
)
) : <div>No file selected</div>}
app/static/js/app.precompiled.js
+2 -2
View File
File diff suppressed because one or more lines are too long