From 9225f2cd773450b9ee95512162c34120765203c6 Mon Sep 17 00:00:00 2001 From: Unifox Date: Thu, 6 Feb 2025 01:46:52 -0700 Subject: [PATCH 1/9] Show mod file size in mods list This implements the changes made in PR #48 of the beatmods backend to add file sizes to mods. The change also allows for warning if a mod is oversized. Most mods shouldn't have a warning, but should a mod go over a limit, it'll warn the user. THIS WILL REQUIRE FURTHER TESTING ONCE THE BACKEND UPDATES --- assets/jsons/translations/en.json | 1 + .../services/mods/beat-mods-api.service.ts | 4 +-- .../slides/mods/mod-item.component.tsx | 6 ++++ .../slides/mods/mods-grid.component.tsx | 5 +-- src/renderer/index.css | 35 +++++++++++++++++++ src/shared/models/mods/mod.interface.ts | 1 + 6 files changed, 48 insertions(+), 4 deletions(-) diff --git a/assets/jsons/translations/en.json b/assets/jsons/translations/en.json index f55c837f0..f31802dfd 100644 --- a/assets/jsons/translations/en.json +++ b/assets/jsons/translations/en.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "Name", + "size": "Size", "installed": "Installed", "latest": "Latest", "description": "Description", diff --git a/src/main/services/mods/beat-mods-api.service.ts b/src/main/services/mods/beat-mods-api.service.ts index 07ba0d798..d7a799ef7 100644 --- a/src/main/services/mods/beat-mods-api.service.ts +++ b/src/main/services/mods/beat-mods-api.service.ts @@ -9,7 +9,7 @@ export class BeatModsApiService { private readonly requestService: RequestService; - public readonly MODS_REPO_URL = "https://beatmods.com"; + public readonly MODS_REPO_URL = "http://localhost:5001"; private readonly MODS_REPO_API_URL = `${this.MODS_REPO_URL}/api`; private readonly versionModsCache = new Map(); @@ -28,7 +28,7 @@ export class BeatModsApiService { private getVersionModsUrl(version: BSVersion): string { const platform: BbmPlatform = version.oculus || version.metadata?.store === BsStore.OCULUS ? BbmPlatform.OculusPC : BbmPlatform.SteamPC; - return `${this.MODS_REPO_API_URL}/mods?status=verified&gameVersion=${version.BSVersion}&gameName=BeatSaber&platform=${platform}`; + return `${this.MODS_REPO_API_URL}/mods?status=verified&gameVersion=${version.BSVersion}&gameName=BeatSaber`; } private updateModsHashCache(mods: BbmModVersion[]): void { diff --git a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx index ab8be1dd5..fd760d01f 100644 --- a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx +++ b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx @@ -65,6 +65,12 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele {mod.version.modVersion} + 100 ? "text-red-400 tooltip" : (mod.version.fileSize/1024/1024 > 50 ? "text-yellow-400 tooltip" : "") || "")}`} style={wantInfoStyle}> + {(mod.version.fileSize/1024 > 1024 ? `${Math.round(mod.version.fileSize/1024/1024)}MB` : (`${Math.round(mod.version.fileSize/1024)}KB` === `NaNKB` ? `-` : `${Math.round(mod.version.fileSize/1024)}KB`) || "-")} + 100 ? `tooltiptext w-[160px] bg-black text-red-400` : (mod.version.fileSize/1024/1024 > 50 ? `tooltiptext w-[140px] bg-black text-yellow-400` : "") || "")}> + {(mod.version.fileSize/1024/1024 > 100 ? `This is a very large mod!` : (mod.version.fileSize/1024/1024 > 50 ? `This is a large mod!` : "") || "")} + + {striptags(mod.mod?.summary ?? "", { tagReplacementText: " " })} diff --git a/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx b/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx index c5b60b3bf..d44bb4b27 100644 --- a/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx +++ b/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx @@ -58,14 +58,15 @@ export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreIn return ( modsMap && ( -
+
- {filterEnabled ? handleInput(e.target.value)} /> : {t("pages.version-viewer.mods.mods-grid.header-bar.name")}} + {filterEnabled ? handleInput(e.target.value)} /> : {t("pages.version-viewer.mods.mods-grid.header-bar.name")}} {t("pages.version-viewer.mods.mods-grid.header-bar.installed")} {t("pages.version-viewer.mods.mods-grid.header-bar.latest")} + {t("pages.version-viewer.mods.mods-grid.header-bar.size")} {t("pages.version-viewer.mods.mods-grid.header-bar.description")} Date: Thu, 6 Feb 2025 01:48:23 -0700 Subject: [PATCH 2/9] Add build_start script It's just easier to test when rebuilding is needed to have one command for build and start. It literally just calls build and start one after the other lol --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 4134377eb..280fbaae3 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "main": "./.erb/dll/main.bundle.dev.js", "version": "1.5.2", "scripts": { + "build_start": "npm run build && npm run start", "build-rust-scripts": "ts-node ./.erb/scripts/build-rust-scripts.js", "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"", "build:dll": "cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts", From 258931dddd9693e489e662559cce8af3eb4ddf4a Mon Sep 17 00:00:00 2001 From: Unifox Date: Thu, 6 Feb 2025 17:38:04 -0700 Subject: [PATCH 3/9] Revert "Add build_start script" This reverts commit 28c71be05128cfb0bc7bad6cf1eb51d4a27c4fea. --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 280fbaae3..4134377eb 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "main": "./.erb/dll/main.bundle.dev.js", "version": "1.5.2", "scripts": { - "build_start": "npm run build && npm run start", "build-rust-scripts": "ts-node ./.erb/scripts/build-rust-scripts.js", "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"", "build:dll": "cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts", From 1e7dde613ed60117349f48ac4daae9c182f920e8 Mon Sep 17 00:00:00 2001 From: Unifox Date: Thu, 6 Feb 2025 17:42:49 -0700 Subject: [PATCH 4/9] Revert testing changes Forgor to set these back before committing... oops --- src/main/services/mods/beat-mods-api.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/services/mods/beat-mods-api.service.ts b/src/main/services/mods/beat-mods-api.service.ts index d7a799ef7..07ba0d798 100644 --- a/src/main/services/mods/beat-mods-api.service.ts +++ b/src/main/services/mods/beat-mods-api.service.ts @@ -9,7 +9,7 @@ export class BeatModsApiService { private readonly requestService: RequestService; - public readonly MODS_REPO_URL = "http://localhost:5001"; + public readonly MODS_REPO_URL = "https://beatmods.com"; private readonly MODS_REPO_API_URL = `${this.MODS_REPO_URL}/api`; private readonly versionModsCache = new Map(); @@ -28,7 +28,7 @@ export class BeatModsApiService { private getVersionModsUrl(version: BSVersion): string { const platform: BbmPlatform = version.oculus || version.metadata?.store === BsStore.OCULUS ? BbmPlatform.OculusPC : BbmPlatform.SteamPC; - return `${this.MODS_REPO_API_URL}/mods?status=verified&gameVersion=${version.BSVersion}&gameName=BeatSaber`; + return `${this.MODS_REPO_API_URL}/mods?status=verified&gameVersion=${version.BSVersion}&gameName=BeatSaber&platform=${platform}`; } private updateModsHashCache(mods: BbmModVersion[]): void { From 07f2455cce4ae09fe94e9c68ada1dec52c0071fd Mon Sep 17 00:00:00 2001 From: Unifox Date: Thu, 6 Feb 2025 18:19:49 -0700 Subject: [PATCH 5/9] Add translations for Size Should probably add the other translations for size as well. I've checked that it's the right translation when talking about file size specifically --- assets/jsons/translations/de.json | 1 + assets/jsons/translations/es.json | 1 + assets/jsons/translations/fr.json | 1 + assets/jsons/translations/it.json | 1 + assets/jsons/translations/ja.json | 1 + assets/jsons/translations/ko.json | 1 + assets/jsons/translations/pt-br.json | 1 + assets/jsons/translations/ru.json | 1 + assets/jsons/translations/zh-tw.json | 1 + assets/jsons/translations/zh.json | 1 + 10 files changed, 10 insertions(+) diff --git a/assets/jsons/translations/de.json b/assets/jsons/translations/de.json index c7eadb2d0..1698a0576 100644 --- a/assets/jsons/translations/de.json +++ b/assets/jsons/translations/de.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "Name", + "size": "Größe", "installed": "Installiert", "latest": "Neueste", "description": "Beschreibung", diff --git a/assets/jsons/translations/es.json b/assets/jsons/translations/es.json index c7681628a..4d9ffc29b 100644 --- a/assets/jsons/translations/es.json +++ b/assets/jsons/translations/es.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "Nombre", + "size": "Tamaño", "installed": "Instalado", "latest": "Último", "description": "Descripción", diff --git a/assets/jsons/translations/fr.json b/assets/jsons/translations/fr.json index d065f6d5d..7ae06841e 100644 --- a/assets/jsons/translations/fr.json +++ b/assets/jsons/translations/fr.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "Nom", + "size": "Taille", "installed": "Installé", "latest": "Récent", "description": "Description", diff --git a/assets/jsons/translations/it.json b/assets/jsons/translations/it.json index 3a445fe34..d8b7ca40c 100644 --- a/assets/jsons/translations/it.json +++ b/assets/jsons/translations/it.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "Nome", + "size": "Dimensione", "installed": "Installata", "latest": "Ultima Versione", "description": "Descrizione", diff --git a/assets/jsons/translations/ja.json b/assets/jsons/translations/ja.json index 32e8c7edd..7efc5e240 100644 --- a/assets/jsons/translations/ja.json +++ b/assets/jsons/translations/ja.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "名前", + "size": "サイズ", "installed": "インストール済み", "latest": "最新", "description": "說明", diff --git a/assets/jsons/translations/ko.json b/assets/jsons/translations/ko.json index 035fefed7..f3ab1a762 100644 --- a/assets/jsons/translations/ko.json +++ b/assets/jsons/translations/ko.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "이름", + "size": "크기", "installed": "설치됨", "latest": "최신", "description": "설명", diff --git a/assets/jsons/translations/pt-br.json b/assets/jsons/translations/pt-br.json index dc21fa60b..93dc8aeb1 100644 --- a/assets/jsons/translations/pt-br.json +++ b/assets/jsons/translations/pt-br.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "Nome", + "size": "tamanho", "installed": "Instalado", "latest": "Mais recente", "description": "Descrição", diff --git a/assets/jsons/translations/ru.json b/assets/jsons/translations/ru.json index 4a4500a1e..d684964f0 100644 --- a/assets/jsons/translations/ru.json +++ b/assets/jsons/translations/ru.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "Имя", + "size": "Размер", "installed": "Установлено", "latest": "Latest", "description": "Описание", diff --git a/assets/jsons/translations/zh-tw.json b/assets/jsons/translations/zh-tw.json index cacac60a4..02fe03b6a 100644 --- a/assets/jsons/translations/zh-tw.json +++ b/assets/jsons/translations/zh-tw.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "名稱", + "size": "大小", "installed": "已安裝", "latest": "最新", "description": "描述", diff --git a/assets/jsons/translations/zh.json b/assets/jsons/translations/zh.json index da08ac9bd..764864bcf 100644 --- a/assets/jsons/translations/zh.json +++ b/assets/jsons/translations/zh.json @@ -139,6 +139,7 @@ "mods-grid": { "header-bar": { "name": "名称", + "size": "大小", "installed": "已安装", "latest": "最新", "description": "描述", From af6e2053e1ba5c3fb4f112a0e0db2023b80fb1f4 Mon Sep 17 00:00:00 2001 From: Unifox Date: Fri, 7 Feb 2025 20:24:44 -0700 Subject: [PATCH 6/9] Refactor + move css to tailwind Refactored the code for checking and showing mod size. Also redid manual css in tailwind css --- .../slides/mods/mod-item.component.tsx | 40 +++++++++++++------ src/renderer/index.css | 35 ---------------- 2 files changed, 28 insertions(+), 47 deletions(-) diff --git a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx index fd760d01f..046fe18d3 100644 --- a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx +++ b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx @@ -51,33 +51,49 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele onChange(!isChecked); }; + const {fileSize} = mod.version; + + const verifyFileSize = fileSize !== undefined; + + const isMediumMod = verifyFileSize && fileSize/1024/1024 > 50; + + const isLargeMod = verifyFileSize && fileSize/1024/1024 > 100; + + const getFormattedSize = () : string => { + if (!verifyFileSize) + return `-`; + if (fileSize/1024 > 1024) + return `${Math.round(mod.version.fileSize/1024/1024)}MB`; + return `${Math.round(mod.version.fileSize/1024)}KB`; + }; + return ( -
  • -
    +
  • +
    onChange(!isChecked)} disabled={mod.mod.category === BbmCategories.Core || isDependency || disabled} checked={isChecked} />
    - + {mod.mod.name} - + {installedVersion || "-"} - + {mod.version.modVersion} - 100 ? "text-red-400 tooltip" : (mod.version.fileSize/1024/1024 > 50 ? "text-yellow-400 tooltip" : "") || "")}`} style={wantInfoStyle}> - {(mod.version.fileSize/1024 > 1024 ? `${Math.round(mod.version.fileSize/1024/1024)}MB` : (`${Math.round(mod.version.fileSize/1024)}KB` === `NaNKB` ? `-` : `${Math.round(mod.version.fileSize/1024)}KB`) || "-")} - 100 ? `tooltiptext w-[160px] bg-black text-red-400` : (mod.version.fileSize/1024/1024 > 50 ? `tooltiptext w-[140px] bg-black text-yellow-400` : "") || "")}> - {(mod.version.fileSize/1024/1024 > 100 ? `This is a very large mod!` : (mod.version.fileSize/1024/1024 > 50 ? `This is a large mod!` : "") || "")} + + {getFormattedSize()} + + {(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")} - + {striptags(mod.mod?.summary ?? "", { tagReplacementText: " " })} -
    +
    {installedVersion && ( Date: Fri, 7 Feb 2025 21:25:29 -0700 Subject: [PATCH 7/9] A bit more refactoring --- .../components/shared/file-size-text.tsx | 32 +++++++++++++++++++ .../slides/mods/mod-item.component.tsx | 24 ++------------ src/shared/models/mods/mod.interface.ts | 2 +- 3 files changed, 35 insertions(+), 23 deletions(-) create mode 100644 src/renderer/components/shared/file-size-text.tsx diff --git a/src/renderer/components/shared/file-size-text.tsx b/src/renderer/components/shared/file-size-text.tsx new file mode 100644 index 000000000..aab0c14e3 --- /dev/null +++ b/src/renderer/components/shared/file-size-text.tsx @@ -0,0 +1,32 @@ +import { CSSProperties } from "react"; + +type Props = { + fileSize?: number; + wantInfoStyle: CSSProperties; +} + +export function FileSizeText({ fileSize, wantInfoStyle }: Props) { + + const verifyFileSize = fileSize !== undefined; + + const isMediumMod = verifyFileSize && fileSize > 1024 * 1024 * 50; // 50MB + + const isLargeMod = verifyFileSize && fileSize > 1024 * 1024 * 100; // 100MB + + const getFormattedSize = () : string => { + if (!verifyFileSize) + return `-`; + if (fileSize < 1024 * 1024) + return `${(fileSize/1024).toFixed(2)}KB`; + return `${(fileSize/1024/1024).toFixed(2)}MB`; + }; + + return ( + + {getFormattedSize()} + + {(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")} + + + ); +} diff --git a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx index 046fe18d3..f7fb108ad 100644 --- a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx +++ b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx @@ -7,6 +7,7 @@ import useDoubleClick from "use-double-click"; import { useOnUpdate } from "renderer/hooks/use-on-update.hook"; import striptags from "striptags"; import { safeGt } from "shared/helpers/semver.helpers"; +import { FileSizeText } from "renderer/components/shared/file-size-text"; type Props = { className?: string; @@ -51,22 +52,6 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele onChange(!isChecked); }; - const {fileSize} = mod.version; - - const verifyFileSize = fileSize !== undefined; - - const isMediumMod = verifyFileSize && fileSize/1024/1024 > 50; - - const isLargeMod = verifyFileSize && fileSize/1024/1024 > 100; - - const getFormattedSize = () : string => { - if (!verifyFileSize) - return `-`; - if (fileSize/1024 > 1024) - return `${Math.round(mod.version.fileSize/1024/1024)}MB`; - return `${Math.round(mod.version.fileSize/1024)}KB`; - }; - return (
  • @@ -81,12 +66,7 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele {mod.version.modVersion} - - {getFormattedSize()} - - {(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")} - - + {striptags(mod.mod?.summary ?? "", { tagReplacementText: " " })} diff --git a/src/shared/models/mods/mod.interface.ts b/src/shared/models/mods/mod.interface.ts index ae29da3fb..e58daf942 100644 --- a/src/shared/models/mods/mod.interface.ts +++ b/src/shared/models/mods/mod.interface.ts @@ -42,7 +42,7 @@ export interface BbmModVersion { downloadCount: number; lastApprovedById?: number; lastUpdatedById?: number; - fileSize: number; + fileSize?: number; createdAt?: Date; updatedAt?: Date; } From 187174aa5e7796be783101a2fd751b790d5a12e9 Mon Sep 17 00:00:00 2001 From: Unifox Date: Fri, 7 Feb 2025 22:40:15 -0700 Subject: [PATCH 8/9] Use Tippy for tooltip --- .../components/shared/file-size-text.tsx | 16 +++++++++++----- .../slides/mods/mod-item.component.tsx | 16 ++++++++-------- src/renderer/index.css | 16 ++++++++++++++++ 3 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/renderer/components/shared/file-size-text.tsx b/src/renderer/components/shared/file-size-text.tsx index aab0c14e3..29e89cb82 100644 --- a/src/renderer/components/shared/file-size-text.tsx +++ b/src/renderer/components/shared/file-size-text.tsx @@ -1,3 +1,4 @@ +import Tippy from "@tippyjs/react"; import { CSSProperties } from "react"; type Props = { @@ -22,11 +23,16 @@ export function FileSizeText({ fileSize, wantInfoStyle }: Props) { }; return ( - - {getFormattedSize()} - - {(isLargeMod ? `This is a very large mod!` : (isMediumMod ? `This is a large mod!` : "") || "")} + + + + {getFormattedSize()} - + ); } diff --git a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx index f7fb108ad..8202f0dcb 100644 --- a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx +++ b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx @@ -53,27 +53,27 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele }; return ( -
  • -
    +
  • +
    onChange(!isChecked)} disabled={mod.mod.category === BbmCategories.Core || isDependency || disabled} checked={isChecked} />
    - + {mod.mod.name} - + {installedVersion || "-"} - + {mod.version.modVersion} - + {striptags(mod.mod?.summary ?? "", { tagReplacementText: " " })} -
    +
    {installedVersion && ( .tippy-arrow::before { + @apply border-l-neutral-900; +} + +.tippy-box[data-theme~='yellow'] { + @apply bg-neutral-900; + @apply text-yellow-400; +} +.tippy-box[data-theme~='yellow'][data-placement^='left'] > .tippy-arrow::before { + @apply border-l-neutral-900; +} + .bg-theme-1 { @apply bg-light-main-color-1 dark:bg-main-color-1; } .bg-theme-2 { @apply bg-light-main-color-2 dark:bg-main-color-2; } .bg-theme-3 { @apply bg-light-main-color-3 dark:bg-main-color-3; } From 3a2c92614c83ba043f048ea54160412de6c22874 Mon Sep 17 00:00:00 2001 From: Unifox Date: Fri, 7 Feb 2025 23:14:50 -0700 Subject: [PATCH 9/9] Move file-size-text.tsx into mod-item Since FileSizeText will only ever be used on ModItems --- .../components/shared/file-size-text.tsx | 38 ------------------- .../slides/mods/mod-item.component.tsx | 38 ++++++++++++++++++- 2 files changed, 37 insertions(+), 39 deletions(-) delete mode 100644 src/renderer/components/shared/file-size-text.tsx diff --git a/src/renderer/components/shared/file-size-text.tsx b/src/renderer/components/shared/file-size-text.tsx deleted file mode 100644 index 29e89cb82..000000000 --- a/src/renderer/components/shared/file-size-text.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import Tippy from "@tippyjs/react"; -import { CSSProperties } from "react"; - -type Props = { - fileSize?: number; - wantInfoStyle: CSSProperties; -} - -export function FileSizeText({ fileSize, wantInfoStyle }: Props) { - - const verifyFileSize = fileSize !== undefined; - - const isMediumMod = verifyFileSize && fileSize > 1024 * 1024 * 50; // 50MB - - const isLargeMod = verifyFileSize && fileSize > 1024 * 1024 * 100; // 100MB - - const getFormattedSize = () : string => { - if (!verifyFileSize) - return `-`; - if (fileSize < 1024 * 1024) - return `${(fileSize/1024).toFixed(2)}KB`; - return `${(fileSize/1024/1024).toFixed(2)}MB`; - }; - - return ( - - - - {getFormattedSize()} - - - ); -} diff --git a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx index 8202f0dcb..e0088e879 100644 --- a/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx +++ b/src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx @@ -7,7 +7,7 @@ import useDoubleClick from "use-double-click"; import { useOnUpdate } from "renderer/hooks/use-on-update.hook"; import striptags from "striptags"; import { safeGt } from "shared/helpers/semver.helpers"; -import { FileSizeText } from "renderer/components/shared/file-size-text"; +import Tippy from "@tippyjs/react"; type Props = { className?: string; @@ -22,6 +22,42 @@ type Props = { onUninstall?: () => void; }; +type FileSizeProps = { + fileSize?: number; + wantInfoStyle: CSSProperties; +}; + +function FileSizeText({ fileSize, wantInfoStyle }: FileSizeProps) { + + const verifyFileSize = fileSize !== undefined; + + const isMediumMod = verifyFileSize && fileSize > 1024 * 1024 * 50; // 50MB + + const isLargeMod = verifyFileSize && fileSize > 1024 * 1024 * 100; // 100MB + + const getFormattedSize = () : string => { + if (!verifyFileSize) + return `-`; + if (fileSize < 1024 * 1024) + return `${(fileSize/1024).toFixed(2)}KB`; + return `${(fileSize/1024/1024).toFixed(2)}MB`; + }; + + return ( + + + + {getFormattedSize()} + + + ); +} + export function ModItem({ className, mod, installedVersion, isDependency, isSelected, onChange, wantInfo, onWantInfo, disabled, onUninstall }: Props) { const themeColor = useThemeColor("second-color");