diff --git a/web/apps/photos/src/components/PhotoList/dedupe.tsx b/web/apps/photos/src/components/PhotoList/dedupe.tsx index be412ad78..b911fad37 100644 --- a/web/apps/photos/src/components/PhotoList/dedupe.tsx +++ b/web/apps/photos/src/components/PhotoList/dedupe.tsx @@ -19,7 +19,7 @@ import { } from "react-window"; import { Duplicate } from "services/deduplicationService"; import { EnteFile } from "types/file"; -import { convertBytesToHumanReadable } from "utils/units"; +import { formattedBytes } from "utils/units"; export enum ITEM_TYPE { TIME = "TIME", @@ -310,8 +310,7 @@ export function DedupePhotoList({ */ {listItem.fileCount} {t("FILES")},{" "} - {convertBytesToHumanReadable(listItem.fileSize || 0)}{" "} - {t("EACH")} + {formattedBytes(listItem.fileSize || 0)} {t("EACH")} ); case ITEM_TYPE.FILE: { diff --git a/web/apps/photos/src/components/PhotoList/index.tsx b/web/apps/photos/src/components/PhotoList/index.tsx index 508e9eab5..f052e4b35 100644 --- a/web/apps/photos/src/components/PhotoList/index.tsx +++ b/web/apps/photos/src/components/PhotoList/index.tsx @@ -24,7 +24,7 @@ import { import { EnteFile } from "types/file"; import { handleSelectCreator } from "utils/photoFrame"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; -import { convertBytesToHumanReadable } from "utils/units"; +import { formattedBytes } from "utils/units"; const A_DAY = 24 * 60 * 60 * 1000; const FOOTER_HEIGHT = 90; @@ -829,8 +829,7 @@ export function PhotoList({ return ( {listItem.fileCount} {t("FILES")},{" "} - {convertBytesToHumanReadable(listItem.fileSize || 0)}{" "} - {t("EACH")} + {formattedBytes(listItem.fileSize || 0)} {t("EACH")} ); case ITEM_TYPE.FILE: { diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx index 7e2786c42..e05eacc07 100644 --- a/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx +++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderFileName.tsx @@ -7,8 +7,8 @@ import VideocamOutlined from "@mui/icons-material/VideocamOutlined"; import Box from "@mui/material/Box"; import { useEffect, useState } from "react"; import { EnteFile } from "types/file"; -import { makeHumanReadableStorage } from "utils/units"; import { changeFileName, updateExistingFilePubMetadata } from "utils/file"; +import { formattedBytes } from "utils/units"; import { FileNameEditDialog } from "./FileNameEditDialog"; import InfoItem from "./InfoItem"; @@ -33,7 +33,7 @@ const getCaption = (file: EnteFile, parsedExifData) => { captionParts.push(resolution); } if (fileSize) { - captionParts.push(makeHumanReadableStorage(fileSize)); + captionParts.push(formattedBytes(fileSize)); } return ( diff --git a/web/apps/photos/src/utils/units.ts b/web/apps/photos/src/utils/units.ts index 20a90e4c2..79add3b82 100644 --- a/web/apps/photos/src/utils/units.ts +++ b/web/apps/photos/src/utils/units.ts @@ -13,10 +13,16 @@ const ONE_GB = 1024 * 1024 * 1024; export const bytesInGB = (bytes: number, precision = 0): string => (bytes / (1024 * 1024 * 1024)).toFixed(precision); -export function convertBytesToHumanReadable( - bytes: number, - precision = 2, -): string { +/** + * Convert the given number of {@link bytes} to a user visible string in an + * appropriately sized unit. + * + * The returned string includes the (localized) unit suffix, e.g. "TB". + * + * @param precision Modify the number of digits after the decimal point. + * Defaults to 2. + */ +export function formattedBytes(bytes: number, precision = 2): string { if (bytes === 0 || isNaN(bytes)) { return "0 MB"; }