Merge pull request #223 from Zagrios/hotfix/double-click-on-model-to-download

[hotfix] add double click to download model

package-lock.json

@@ -24,6 +24,7 @@
         "fs-extra": "^11.1.1",
         "history": "^5.3.0",
         "is-online": "^9.0.1",
+        "jszip": "^3.10.1",
         "md5-file": "^5.0.0",
         "node-fetch": "^2.6.7",
         "node-stream-zip": "^1.15.0",
@@ -9872,8 +9873,7 @@
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "dev": true
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "node_modules/immutable": {
       "version": "4.1.0",
@@ -12158,7 +12158,6 @@
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
       "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-      "dev": true,
       "dependencies": {
         "lie": "~3.3.0",
         "pako": "~1.0.2",
@@ -12170,7 +12169,6 @@
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
       "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "dev": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -12297,7 +12295,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
       "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "dev": true,
       "dependencies": {
         "immediate": "~3.0.5"
       }
@@ -13831,8 +13828,7 @@
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
     "node_modules/param-case": {
       "version": "3.0.4",
@@ -16213,8 +16209,7 @@
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
     },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
@@ -26235,8 +26230,7 @@
     "immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "dev": true
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "immutable": {
       "version": "4.1.0",
@@ -28053,7 +28047,6 @@
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
       "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-      "dev": true,
       "requires": {
         "lie": "~3.3.0",
         "pako": "~1.0.2",
@@ -28065,7 +28058,6 @@
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
           "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-          "dev": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -28178,7 +28170,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
       "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "dev": true,
       "requires": {
         "immediate": "~3.0.5"
       }
@@ -29308,8 +29299,7 @@
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
     "param-case": {
       "version": "3.0.4",
@@ -31014,8 +31004,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
     },
     "setprototypeof": {
       "version": "1.2.0",

package.json

@@ -244,6 +244,7 @@
     "fs-extra": "^11.1.1",
     "history": "^5.3.0",
     "is-online": "^9.0.1",
+    "jszip": "^3.10.1",
     "md5-file": "^5.0.0",
     "node-fetch": "^2.6.7",
     "node-stream-zip": "^1.15.0",

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bs-manager",
-  "version": "1.1.1",
+  "version": "1.2.0-alpha.1",
   "description": "A foundation for scalable desktop apps",
   "main": "./dist/main/main.js",
   "author": {

src/main/helpers/zip.helpers.ts

@@ -0,0 +1,24 @@
+import JSZip from 'jszip';
+import { pathExist } from './fs.helpers';
+import path from 'path';
+import { mkdir, writeFile } from 'fs/promises';
+
+export async function extractZip(zip: JSZip, dest: string): Promise<string[]>{
+    if(!await pathExist(dest)){ throw new Error(`Path ${dest} does not exist`); }
+    const files: string[] = [];
+
+    for(const [relativePath, entry] of Object.entries(zip.files)){
+        if(entry.dir){ continue; }
+
+        const content = await entry.async("nodebuffer");
+        const outPath = path.join(dest, relativePath);
+        const outDir = path.dirname(outPath);
+
+        await mkdir(outDir, { recursive: true });
+        await writeFile(outPath, content);
+
+        files.push(outPath);
+    }
+
+    return files;
+}

src/main/services/mods/bs-mods-manager.service.ts

@@ -6,13 +6,15 @@ import path from "path";
 import { UtilsService } from "../utils.service";
 import md5File from "md5-file";
 import fs from "fs"
-import StreamZip from "node-stream-zip";
 import { RequestService } from "../request.service";
 import { spawn } from "child_process";
 import { BS_EXECUTABLE } from "../../constants";
 import log from "electron-log";
-import { deleteFolder, ensureFolderExist, pathExist, unlinkPath } from "../../helpers/fs.helpers";
+import { deleteFolder, pathExist, unlinkPath } from "../../helpers/fs.helpers";
 import { lastValueFrom } from "rxjs";
+import JSZip from "jszip"
+import { extractZip } from "../../helpers/zip.helpers";
+import { ensureFolderExist } from "../../helpers/fs.helpers";
 
 export class BsModsManagerService {
 
@@ -96,17 +98,20 @@ export class BsModsManagerService {
         return this.getIpaFromHash(injectorMd5);
     }
 
-    private async downloadZip(zipUrl: string): Promise<{zip: StreamZip.StreamZipAsync, zipPath: string}>{
+    private async downloadZip(zipUrl: string): Promise<JSZip>{
         zipUrl = path.join(this.beatModsApi.BEAT_MODS_URL, zipUrl);
-        const fileName = path.basename(zipUrl);
-        const tempPath = this.utilsService.getTempPath();
-        await ensureFolderExist(this.utilsService.getTempPath());
-        const dest = path.join(tempPath, fileName);
 
-        const zipPath = (await lastValueFrom(this.requestService.downloadFile(zipUrl, dest))).data;
-        const zip = new StreamZip.async({file : zipPath});
+        const buffer = await lastValueFrom(this.requestService.downloadBuffer(zipUrl)).then(progress => progress.data).catch(e => {
+            log.error("ZIP", "Error while downloading zip", e);
+            return undefined
+        });
 
-        return {zip, zipPath};
+        if(!buffer){ return null; }
+
+        return JSZip.loadAsync(buffer).catch(e => {
+            log.error("ZIP", "Error while loading zip", e);
+            return null
+        });
     }
 
     private async executeBSIPA(version: BSVersion, args: string[]): Promise<boolean>{
@@ -135,23 +140,22 @@ export class BsModsManagerService {
     }
 
     private async installMod(mod: Mod, version: BSVersion): Promise<boolean>{
-    
+
         this.utilsService.ipcSend<ModInstallProgression>("mod-installed", {success: true, data: {name: mod.name, progression: ((this.nbInstalledMods + 1) / this.nbModsToInstall) * 100}}) 
 
         const download = this.getModDownload(mod, version);
 
         if(!download){ return false; }
 
-        const {zip, zipPath} = await this.downloadZip(download.url);
+        const zip = await this.downloadZip(download.url);
 
         if(!zip){ return false; }
 
         const crypto = require('crypto');
-        const entries = await zip.entries();
+        const files = await zip.files;
 
-        const checkedEntries = (await Promise.all(Object.values(entries).map(async (entry) => {
-            if(!entry.isFile){ return undefined; }
-            const data = await zip.entryData(entry);
+        const checkedEntries = (await Promise.all(Object.values(files).map(async (entry) => {
+            const data = await entry.async("nodebuffer");
             const entryMd5 = crypto.createHash('md5').update(data).digest('hex')
             return download.hashMd5.some(md5 => md5.hash === entryMd5) ? entry : undefined;
         }))).filter(entry => !!entry);
@@ -162,12 +166,16 @@ export class BsModsManagerService {
         const isBSIPA = mod.name.toLowerCase() === "bsipa";
         const destDir = isBSIPA ? verionPath : path.join(verionPath, ModsInstallFolder.PENDING);
 
-        const extracted = await zip.extract(null, destDir).then(() => true).catch(err => {log.error(err); return false});
+        await ensureFolderExist(destDir);
+        const extracted = await extractZip(zip, destDir).then(() => true).catch(e => {
+            log.error("EXTRACT MOD ZIP", e);
+            return false;
+        })
 
-        await zip.close();
-        await unlinkPath(zipPath);
-
-        const res = isBSIPA ? (extracted && (await this.executeBSIPA(version, ["-n"]))) : extracted;
+        const res = isBSIPA ? (extracted && (await this.executeBSIPA(version, ["-n"]).catch(e => {
+            log.error(e);
+            return false;
+        }))) : extracted;
 
         res && this.nbInstalledMods++;
 

src/main/services/request.service.ts

@@ -61,17 +61,30 @@ export class RequestService {
         
     }
 
-    public downloadBuffer(url: string): Observable<Buffer>{
+    public downloadBuffer(url: string): Observable<Progression<Buffer>>{
+
+        return new Observable<Progression<Buffer>>(subscriber => {
+            
+            const progress: Progression<Buffer> = {
+                current: 0,
+                total: 0,
+                data: null
+            };
 
-        return new Observable<Buffer>(subscriber => {
             const allChunks: Buffer[] = [];
 
             const req = get(url, res => {
+
+                progress.total = parseInt(res.headers?.["content-length"] || "0", 10);
+
                 res.on("data", chunk => {
                     allChunks.push(chunk);
+                    progress.current += chunk.length;
+                    subscriber.next(progress);
                 });
                 res.on('end', () => {
-                    subscriber.next(Buffer.concat(allChunks));
+                    progress.data = Buffer.concat(allChunks);
+                    subscriber.next(progress);
                     subscriber.complete();
                 });
                 res.on('error', (err) => subscriber.error(err))

src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx

@@ -9,7 +9,7 @@ import { MapsDownloaderService } from "renderer/services/maps-downloader.service
 import { VariableSizeList } from "react-window"
 import { MapsRow } from "./maps-row.component"
 import { BehaviorSubject } from "rxjs"
-import { debounceTime, last, map, mergeMap } from "rxjs/operators"
+import { debounceTime, last, mergeMap, tap } from "rxjs/operators"
 import { BeatSaverService } from "renderer/services/thrird-partys/beat-saver.service"
 import { OsDiagnosticService } from "renderer/services/os-diagnostic.service"
 import { useTranslation } from "renderer/hooks/use-translation.hook"
@@ -115,11 +115,8 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
 
         const loadMapsObs$ = mapsManager.getMaps(version);
 
-        loadMapsObs$.pipe(map(progess => {
-            return Math.floor(((progess.loaded / progess.total) * 100));
-        })).subscribe(percent => loadPercent$.next(percent));
-
         subs.push(loadMapsObs$.pipe(
+            tap(progress => loadPercent$.next(Math.floor(((progress.loaded / progress.total) * 100)))),
             last(),
             mergeMap(async progress => {
                 if(os.isOffline){ return progress.maps; }

src/renderer/components/modal/modal-types/models/download-models-modal.component.tsx

@@ -182,6 +182,7 @@ export const DownloadModelsModal: ModalComponent<void, {version: BSVersion, type
                                 callbackValue={model}
                                 isDownloading={equal(currentDownload, {model, version} as ModelDownload)}
                                 onDownload={!isModelOwned(model) ? handleDownloadModel: undefined}
+                                onDoubleClick={(!isModelOwned(model)) ? handleDownloadModel: undefined}
                                 onCancelDownload={modelPendingDownload(model) ? handleCancelDownload : undefined}
                             />
                         ))}

src/renderer/components/models-management/model-item.component.tsx

@@ -1,5 +1,5 @@
 import equal from "fast-deep-equal";
-import { memo, useState } from "react";
+import { memo, useRef, useState } from "react";
 import { MSModel, MSModelType } from "shared/models/models/model-saber.model";
 import { BsmImage } from "../shared/bsm-image.component";
 import { motion } from "framer-motion";
@@ -11,11 +11,12 @@ import Tippy from "@tippyjs/react";
 import { followCursor } from "tippy.js"
 import defaultImage from '../../../../assets/images/default-version-img.jpg'
 import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
-import { BsmIconType } from "../svgs/bsm-icon.component";
+import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component";
 import { BsmButton } from "../shared/bsm-button.component";
 import { BsmBasicSpinner } from "../shared/bsm-basic-spinner/bsm-basic-spinner.component";
 import { isValidUrl } from "shared/helpers/url.helpers";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
+import useDoubleClick from "use-double-click";
 
 type Props<T> = {
     selected?: boolean,
@@ -26,7 +27,8 @@ type Props<T> = {
     onDelete?: (value: T) => void,
     onDownload?: (value: T) => void,
     onCancelDownload?: (value: T) => void
-} & Partial<MSModel> & Partial<BsmLocalModel> & Omit<React.ComponentProps<"li">, "id">
+    onDoubleClick?: (value: T) => void
+} & Partial<MSModel> & Partial<BsmLocalModel> & Omit<React.ComponentProps<"li">, "id" | "onDoubleClick">
 
 function modelItem<T = unknown>(props: Props<T>) {
 
@@ -34,6 +36,14 @@ function modelItem<T = unknown>(props: Props<T>) {
     const color = useThemeColor("first-color");
     const [hovered, setHovered] = useState(false);
     const [idContentCopied, setIdContentCopied] = useState<string>(null);
+    const ref = useRef();
+
+    useDoubleClick({
+        ref,
+        latency: props.onDoubleClick ? 200 : 0,
+        onSingleClick: (e) => props?.onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>),
+        onDoubleClick: () => props?.onDoubleClick?.(props.callbackValue)
+    });
 
     const modelPageUrl = (() => {
         if(!props.id){ return null; }
@@ -88,21 +98,26 @@ function modelItem<T = unknown>(props: Props<T>) {
     }
 
     return (
-        <motion.li className={`relative flex-grow min-w-[14rem] h-56 cursor-pointer ${props.className ?? ""}`} onHoverStart={() => setHovered(() => true)} onHoverEnd={() => setHovered(() => false)} onClick={props.onClick}>
+        <motion.li className={`relative flex-grow min-w-[16rem] h-64 cursor-pointer ${props.className ?? ""}`} onHoverStart={() => setHovered(() => true)} onHoverEnd={() => setHovered(() => false)}>
             <GlowEffect visible={props.selected || hovered}/>
             <div className="absolute top-0 left-0 w-full h-full rounded-lg overflow-hidden blur-none bg-black shadow-sm shadow-black">
-                <BsmImage className={`absolute top-0 left-0 w-full h-full object-cover ${props.type === MSModelType.Avatar ? "object-top" : ""}`} image={thumbnailUrl} placeholder={defaultImage} loading="lazy"/>
-                <div className="absolute top-0 right-0 h-full w-0 flex flex-col items-end gap-1 pt-1.5 pr-1.5">
-                    {!props.isDownloading ? (
-                        actionButtons().map((button, index) => (
-                            <BsmButton key={index} className="w-7 h-7 p-1 rounded-md transition-transform duration-150 shadow-black shadow-sm" style={{transitionDelay: `${index * 50}ms`, transform: hovered ? "translate(0%)" : "translate(150%)"}} icon={button.icon} iconColor={button.iconColor} onClick={e => {e.stopPropagation(); e.preventDefault(); button.action();}} withBar={false}/>
-                        ))
-                    ): (
-                        <BsmBasicSpinner className="w-7 h-7 p-1 rounded-md bg-main-color-2 flex items-center justify-center shadow-black shadow-sm" spinnerClassName="brightness-200" thikness="3.5px" style={{color}}/>
-                    )}
+                <div ref={ref} className="contents">
+                    <BsmImage className={`absolute top-0 left-0 w-full h-full object-cover ${props.type === MSModelType.Avatar ? "object-top" : ""}`} image={thumbnailUrl} placeholder={defaultImage} loading="lazy"/>
+                    <div className="absolute top-0 right-0 h-full w-0 flex flex-col items-end gap-1 pt-1.5 pr-1.5">
+                        {!props.isDownloading ? (
+                            actionButtons().map((button, index) => (
+                                <BsmButton key={index} className="w-8 h-8 p-1 rounded-md transition-transform duration-150 shadow-black shadow-sm" style={{transitionDelay: `${index * 50}ms`, transform: hovered ? "translate(0%)" : "translate(150%)"}} icon={button.icon} iconColor={button.iconColor} onClick={e => {e.stopPropagation(); e.preventDefault(); button.action();}} withBar={false}/>
+                            ))
+                        ): (
+                            <BsmBasicSpinner className="w-7 h-7 p-1 rounded-md bg-main-color-2 flex items-center justify-center shadow-black shadow-sm" spinnerClassName="brightness-200" thikness="3.5px" style={{color}}/>
+                        )}
+                    </div>
                 </div>
-                <motion.div className="absolute cursor-default top-[80%] left-0 w-full h-full px-2 pt-2.5 flex flex-col gap-1.5 bg-main-color-3 bg-opacity-60 backdrop-blur-md transition-all delay-150 hover:top-0" onClick={e =>{e.stopPropagation(); e.preventDefault()}}>
-                    <BsmLink className={`block w-fit max-w-full overflow-hidden font-bold whitespace-nowrap text-ellipsis ${props.id ? "cursor-pointer hover:underline" : ""}`} href={modelPageUrl}>{props.name}</BsmLink>
+                <motion.div className="absolute top-[83%] left-0 w-full h-full px-2 flex flex-col gap-1.5 bg-main-color-3 bg-opacity-60 backdrop-blur-md transition-all delay-150 hover:top-0 group" onClick={e =>{e.stopPropagation(); e.preventDefault()}}>
+                    <div className="w-full flex justify-center items-center mt-1.5">
+                        <BsmLink className={`block grow overflow-hidden font-bold whitespace-nowrap text-ellipsis ${props.id ? "cursor-pointer hover:underline" : ""}`} href={modelPageUrl}>{props.name}</BsmLink>
+                        <BsmIcon className="shrink-0 h-8 group-hover:rotate-180 transition-transform w-fit" icon="chevron-top"/>
+                    </div>
                     <BsmLink className={`block w-fit max-w-full overflow-hidden whitespace-nowrap text-ellipsis brightness-200 ${authorPageUrl ? "cursor-pointer hover:underline" : ""}`} style={{color}} href={authorPageUrl}>{props.author ?? ''}</BsmLink>
                     <ul className="flex flex-row flex-wrap gap-1">
                         {modelTags?.map(tag => (

src/renderer/components/svgs/bsm-icon.component.tsx

@@ -57,10 +57,11 @@ import { ModelTypeAvatarIcon } from "./icons/model-type-avatar-icon.component";
 import { ModelTypeSaberIcon } from "./icons/model-type-saber-icon.component";
 import { ModelTypePlatformIcon } from "./icons/model-type-platform-icon.component";
 import { ModelTypeBloqIcon } from "./icons/model-type-bloq-icon.component";
+import { ChevronTopIcon } from "./icons/chevron-top-icon.component";
 
 export type BsmIconType = BsvMapCharacteristic | MSModelType | (
    "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"|"discord"|"info"|
-   "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|"twitter"|"sync"|
+   "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|"twitter"|"sync"|"chevron-top"|
    "copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|"filter"|"mee6"|"volume-up"|"volume-off"|"volume-down"|
    "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"|"de-DE-flag"
 );
@@ -122,6 +123,8 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
         if(icon === "volume-up"){ return <VolumeUpIcon className={className} style={style}/> }
         if(icon === "volume-down"){ return <VolumeDownIcon className={className} style={style}/> }
         if(icon === "volume-off"){ return <VolumeOffIcon className={className} style={style}/> }
+        if(icon === "chevron-top"){ return <ChevronTopIcon className={className} style={style}/> }
+
         if(icon === MSModelType.Avatar){ return <ModelTypeAvatarIcon className={className} style={style}/> }
         if(icon === MSModelType.Saber){ return <ModelTypeSaberIcon className={className} style={style}/> }
         if(icon === MSModelType.Platfrom){ return <ModelTypePlatformIcon className={className} style={style}/> }

src/renderer/components/svgs/icons/chevron-top-icon.component.tsx

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export function ChevronTopIcon(props: {className?: string, style?: CSSProperties}) {
+  return (
+    <svg className={props.className} style={props.style} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+        <path d="M260.811-366.051q-11.021-11.021-11.355-26.521-.333-15.5 10.689-26.522l193.333-193.333q5.892-5.892 12.475-8.457 6.583-2.565 14.047-2.565t14.047 2.565q6.583 2.565 12.475 8.457l193.667 193q11.021 10.514 10.981 26.054-.039 15.54-11.315 26.656-11.021 11.021-26.855 11.021-15.833 0-26.855-11.021L480-532.196 313.521-365.051q-10.355 11.022-25.894 10.649-15.54-.373-26.816-11.649Z"/>
+    </svg>
+  )
+}

src/renderer/services/models-management/models-downloader.service.ts

@@ -8,6 +8,7 @@ import { DownloadModelsModal } from "renderer/components/modal/modal-types/model
 import { ProgressBarService } from "../progress-bar.service";
 import { Progression } from "main/helpers/fs.helpers";
 import { ProgressionInterface } from "shared/models/progress-bar";
+import equal from "fast-deep-equal";
 
 export class ModelsDownloaderService {
 
@@ -59,11 +60,11 @@ export class ModelsDownloaderService {
 
     }
 
-    public addModelToDownload(model: ModelDownload): ModelDownload{
+    public addModelToDownload(model: ModelDownload): void{
+        if(this.queue$.value.some(m => equal(m, model))){ return null; }
         const queue = this.queue$.value;
         queue.push(model);
         this.queue$.next([...queue]);
-        return model;
     }
 
     public removeFromDownloadQueue(download: ModelDownload){