fix(shuffle): tiến độ upload theo TỪNG khúc, không còn nhảy loạn xạ

Trước đây dùng CHUNG 1 state `uploading` cho mọi khúc; up nhiều khúc cùng lúc
thì mỗi lần paint() ghi đè seg của nhau -> thanh % nhảy qua lại giữa các khúc.
Đổi sang map { [segKey]: {done,total,pct,name} }: mỗi khúc (và ô audio) có tiến
độ riêng, xoá key của riêng mình khi tải xong.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/ShuffleVideo.jsx

@@ -42,7 +42,7 @@ export default function ShuffleVideo() {
   const [showNote, setShowNote] = useState(true);
   // Loader tải lên: {seg, done, total, pct, name} — pct tính theo BYTE (chuẩn),
   // upload SONG SONG nên nhanh; seg = index khúc hoặc "audio".
-  const [uploading, setUploading] = useState(null);
+  const [uploading, setUploading] = useState({});   // { [segKey]: {done,total,pct,name} }
   // Huỷ vòng poll job khi rời trang.
   const pollAbort = useRef(new AbortController());
   useEffect(() => () => pollAbort.current.abort(), []);
@@ -99,13 +99,18 @@ export default function ShuffleVideo() {
     const loaded = new Array(arr.length).fill(0);
     const added = new Array(arr.length);
     let done = 0;
+    // Tiến độ lưu THEO TỪNG KHÚC (map) — up nhiều khúc cùng lúc thì mỗi khúc có
+    // thanh riêng, không ghi đè nhau (trước đây dùng chung 1 state -> nhảy loạn xạ).
     const paint = () => {
       const lb = loaded.reduce((a, b) => a + b, 0);
-      setUploading({
-        seg: segKey, done, total: arr.length,
-        pct: Math.min(100, Math.round((lb / totalBytes) * 100)),
-        name: arr[Math.min(done, arr.length - 1)]?.name || "",
-      });
+      setUploading((prev) => ({
+        ...prev,
+        [segKey]: {
+          done, total: arr.length,
+          pct: Math.min(100, Math.round((lb / totalBytes) * 100)),
+          name: arr[Math.min(done, arr.length - 1)]?.name || "",
+        },
+      }));
     };
     const one = async (i) => {
       try {
@@ -121,7 +126,12 @@ export default function ShuffleVideo() {
     if (!sid) { await one(0); start = 1; }
     const limit = sid ? 4 : 1;   // nếu file đầu lỗi (chưa có session) -> tuần tự cho an toàn
     await runPool(arr.length - start, (k) => one(start + k), limit);
-    setUploading(null);
+    // xoá tiến độ CỦA RIÊNG khúc này (khúc khác có thể vẫn đang tải)
+    setUploading((prev) => {
+      const n = { ...prev };
+      delete n[segKey];
+      return n;
+    });
     const ok = added.filter(Boolean);
     const failed = arr.length - ok.length;
     if (failed) alert(`Có ${failed}/${arr.length} tệp tải lỗi (đã bỏ qua).`);
@@ -277,15 +287,15 @@ export default function ShuffleVideo() {
                   <div className="small muted">Khúc này bị bỏ khỏi video — không cần clip.</div>
                 ) : (
                   <>
-                  {uploading?.seg === si && (
+                  {uploading[si] && (
                     <div className="upload-loader" style={{ marginBottom: 8 }}>
                       <div className="small flex between" style={{ marginBottom: 4 }}>
                         <span style={{ color: "var(--orange-700)" }}>
-                          ⏳ Đang tải {uploading.done}/{uploading.total} clip · {uploading.pct}%
+                          ⏳ Đang tải {uploading[si].done}/{uploading[si].total} clip · {uploading[si].pct}%
                         </span>
-                        <span className="muted" style={{ maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{uploading.name}</span>
+                        <span className="muted" style={{ maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{uploading[si].name}</span>
                       </div>
-                      <div className="progress"><i style={{ width: uploading.pct + "%" }} /></div>
+                      <div className="progress"><i style={{ width: uploading[si].pct + "%" }} /></div>
                     </div>
                   )}
                   <div className="clip-row">
@@ -315,12 +325,12 @@ export default function ShuffleVideo() {
               <div style={{ width: 150 }}>
                 <FileDrop compact accept="audio/*" onFiles={addAudio} title="Thả âm thanh" hint="MP3, WAV, M4A" />
               </div>
-              {uploading?.seg === "audio" && (
+              {uploading["audio"] && (
                 <div className="upload-loader" style={{ alignSelf: "center", minWidth: 220 }}>
                   <div className="small" style={{ color: "var(--orange-700)", marginBottom: 4 }}>
-                    ⏳ Đang tải {uploading.done}/{uploading.total} · {uploading.pct}%
+                    ⏳ Đang tải {uploading["audio"].done}/{uploading["audio"].total} · {uploading["audio"].pct}%
                   </div>
-                  <div className="progress"><i style={{ width: uploading.pct + "%" }} /></div>
+                  <div className="progress"><i style={{ width: uploading["audio"].pct + "%" }} /></div>
                 </div>
               )}
               {st.audio.map((a, ai) => (