2

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({
                       */
                     <SizeAndCountContainer span={columns}>
                         {listItem.fileCount} {t("FILES")},{" "}
-                        {convertBytesToHumanReadable(listItem.fileSize || 0)}{" "}
-                        {t("EACH")}
+                        {formattedBytes(listItem.fileSize || 0)} {t("EACH")}
                     </SizeAndCountContainer>
                 );
             case ITEM_TYPE.FILE: {

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 (
                     <SizeAndCountContainer span={columns}>
                         {listItem.fileCount} {t("FILES")},{" "}
-                        {convertBytesToHumanReadable(listItem.fileSize || 0)}{" "}
-                        {t("EACH")}
+                        {formattedBytes(listItem.fileSize || 0)} {t("EACH")}
                     </SizeAndCountContainer>
                 );
             case ITEM_TYPE.FILE: {

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 (
         <FlexWrapper gap={1}>

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";
     }