UPDATE: Add mutithread download

frontend/src/hooks/useGlobalEvents.tsx

@@ -21,7 +21,7 @@ export function useGlobalEvents({
     setProgressUpdate: (v: number) => void;
     setMaxProgressUpdate: (v: number) => void;
     setProgressDownload: (v: number) => void;
-    setDownloadSpeed: (v: number) => void;
+    setDownloadSpeed: (v: string) => void;
     setMessageUpdate: (v: string) => void;
     setStageType: (v: string) => void,
 }) {
@@ -33,7 +33,7 @@ export function useGlobalEvents({
         const onDownload = (event: any) => {
             const { percent, speed } = event.data[0];
             setProgressDownload(Number(percent));
-            setDownloadSpeed(Number(speed));
+            setDownloadSpeed(speed);
         };
 
         const onUpdateProgress = (event: any) => {

frontend/src/pages/launcher/index.tsx

@@ -405,7 +405,7 @@ export default function LauncherPage() {
                         <div className="flex justify-center items-center text-sm text-white/80">
                             <span>{downloadType}</span>
                             <div className="flex items-center gap-4 ml-4">
-                                <span className="text-cyan-400 font-semibold">{downloadSpeed.toFixed(1)} MB/s</span>
+                                <span className="text-cyan-400 font-semibold">{downloadSpeed}</span>
                                 <span className="text-white font-bold">{progressDownload.toFixed(1)}%</span>
                             </div>
                         </div>
@@ -414,7 +414,7 @@ export default function LauncherPage() {
                                 className="h-full bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full"
                                 initial={{ width: 0 }}
                                 animate={{ width: `${progressDownload}%` }}
-                                transition={{ duration: 0.3 }}
+                                transition={{ type: "tween", ease: "linear", duration: 0.03 }}
                             />
                         </div>
                         <div className="text-center text-xs text-white/60">

frontend/src/stores/launcherStore.ts

@@ -11,7 +11,7 @@ interface LauncherState {
     isLoading: boolean;
     gameRunning: boolean;
     progressDownload: number;
-    downloadSpeed: number;
+    downloadSpeed: string;
     launcherVersion: string;
     updateData: Record<'server' | 'proxy' | 'launcher', { isUpdate: boolean, isExists: boolean, version: string }>;
     setDownloadType: (value: string) => void;
@@ -24,7 +24,7 @@ interface LauncherState {
     setGameRunning: (value: boolean) => void;
     setProgressDownload: (value: number) => void;
     setLauncherVersion: (value: string) => void;
-    setDownloadSpeed: (value: number) => void;
+    setDownloadSpeed: (value: string) => void;
     setUpdateData: (value: Record<'server' | 'proxy' | 'launcher', { isUpdate: boolean, isExists: boolean, version: string }>) => void;
 }
 
@@ -38,7 +38,7 @@ const useLauncherStore = create<LauncherState>((set, get) => ({
     proxyRunning: false,
     gameRunning: false,
     progressDownload: 0,
-    downloadSpeed: 0,
+    downloadSpeed: "",
     launcherVersion: "",
     updateData: {
         server: { isUpdate: false, isExists: false, version: "" },
@@ -55,7 +55,7 @@ const useLauncherStore = create<LauncherState>((set, get) => ({
     setGameRunning: (value: boolean) => set({ gameRunning: value }),
     setProgressDownload: (value: number) => set({ progressDownload: value }),
     setLauncherVersion: (value: string) => set({ launcherVersion: value }),
-    setDownloadSpeed: (value: number) => set({ downloadSpeed: value }),
+    setDownloadSpeed: (value: string) => set({ downloadSpeed: value }),
     setUpdateData: (value: Record<'server' | 'proxy' | 'launcher', { isUpdate: boolean, isExists: boolean, version: string }>) => set({ updateData: value }),
 }));