fix: My Computer auto-scan không mở picker, playhead chạy tới cuối canvas

app/static/js/app.jsx

@@ -9353,31 +9353,8 @@ const MediaExplorerPanel = ({ height }) => {
         }
       }
     } catch (e) {}
-    if (window.showDirectoryPicker) {
-      try {
-        const handle = await window.showDirectoryPicker({ mode: 'read' });
-        setComputerMode('client');
-        setClientRoot(handle);
-        const rootEntry = { name: handle.name, path: 'root', is_dir: true, handle };
-        setComputerRoots([rootEntry]);
-        setComputerPath('root');
-        setComputerFiles([]);
-        setComputerTree({ root: { handle, parent: null, dirs: [], expanded: true } });
-        const browsed = await browseComputerDir(rootEntry);
-        // Tự động load cấu trúc: expand từng thư mục con cấp 1 để hiển thị cây
-        if (browsed && browsed.dirs) {
-          browsed.dirs.slice(0, 10).forEach(d => browseComputerDir(d));
-        }
-        return;
-      } catch (e) {
-        if (e && e.name === 'AbortError') return;
-        window.showToast && window.showToast('Không thể mở thư mục: ' + e.message, 'error');
-        return;
-      }
-    }
-    // Fallback: server API (trình duyệt không hỗ trợ File System Access API)
+    // Auto-scan ổ đĩa/thư mục hệ thống (server API = máy local), không mở hộp thoại picker
     setComputerMode('server');
-    if (computerRoots) return;
     setComputerRoots(null);
     try {
       const resp = await fetch(`${API_BASE_URL}/api/v1/media/computer`);
@@ -9386,6 +9363,23 @@ const MediaExplorerPanel = ({ height }) => {
       const roots = data.roots || [];
       setComputerRoots(roots.length ? roots : [{ path: '/', name: 'Root (/)', is_dir: true }]);
       if (!roots.length) window.showToast && window.showToast('Không tìm thấy ổ đĩa nào', 'warning');
+      // Tự động quét: expand từng ổ đĩa để hiển thị cây thư mục
+      const rootList = roots.length ? roots : [{ path: '/', name: 'Root (/)', is_dir: true }];
+      rootList.slice(0, 10).forEach(async (root) => {
+        const res = await browseComputerDir(root);
+        if (res && res.dirs) {
+          res.dirs.slice(0, 8).forEach(d => browseComputerDir(d));
+        }
+      });
+      // Nếu có root handle đã lưu (File System Access API), cũng tự động quét client tree
+      const savedHandle = await loadClientRootHandle();
+      if (savedHandle && savedHandle.kind === 'directory' && !computerRoots) {
+        setClientRoot(savedHandle);
+        setComputerRoots([{ name: savedHandle.name, path: 'root', is_dir: true, handle: savedHandle }]);
+        setComputerMode('client');
+        const browsed = await browseComputerDir({ name: savedHandle.name, path: 'root', is_dir: true, handle: savedHandle });
+        if (browsed && browsed.dirs) browsed.dirs.slice(0, 10).forEach(d => browseComputerDir(d));
+      }
     } catch (e) {
       setComputerRoots([{ path: '/', name: 'Root (/)', is_dir: true }]);
       window.showToast && window.showToast('Không thể truy cập My Computer: ' + e.message, 'error');
@@ -9810,8 +9804,9 @@ const MediaExplorerPanel = ({ height }) => {
           ctx.fillRect(nx, ny, Math.max(8, (i % 5 + 1) * 10), 3);
         }
       }
-      // playhead (drawn over MIDI): moves to frame center, then stops there & content scrolls
-      const midiPlayheadX = contentW > w ? Math.min(w / 2, t * pxPerSec) : Math.min(w, t * pxPerSec);
+      // playhead (drawn over MIDI): moves to frame center, then stops there & content scrolls.
+      // Khi content không scroll được nữa (offset đạt max) thì playhead tiếp tục chạy tới cuối canvas.
+      const midiPlayheadX = contentW > w ? Math.max(0, Math.min(w, t * pxPerSec - offset)) : Math.min(w, t * pxPerSec);
       if (playing && dur > 0) {
         ctx.fillStyle = '#ef4444';
         ctx.fillRect(midiPlayheadX - 1, 0, 2, h - 14);
@@ -9837,8 +9832,9 @@ const MediaExplorerPanel = ({ height }) => {
           const ph = Math.max(2, pk[i] * (h / 2 - 4));
           ctx.fillRect(x, mid - ph, barW, ph * 2);
         }
-        // Playhead theo tỉ lệ tempo; khi content rộng hơn frame thì khóa giữa + scroll
-        const audioPlayheadX = contentW > w ? Math.min(w / 2, t * pxPerSec) : (t * pxPerSec);
+        // Playhead theo tỉ lệ tempo; khi content rộng hơn frame thì khóa giữa + scroll.
+        // Khi content không scroll được nữa (offset đạt max) thì playhead tiếp tục chạy tới cuối canvas.
+        const audioPlayheadX = contentW > w ? Math.max(0, Math.min(w, t * pxPerSec - offset)) : (t * pxPerSec);
         if (playing && dur > 0) {
           ctx.fillStyle = '#ef4444';
           ctx.fillRect(audioPlayheadX - 1, 0, 2, h - 14);