Add FileSize component and refactor file size rendering in various components (#5695)

ui/v2.5/src/components/Scenes/SceneCard.tsx

@@ -15,7 +15,7 @@ import { ConfigurationContext } from "src/hooks/Config";
 import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
 import { GridCard, calculateCardWidth } from "../Shared/GridCard/GridCard";
 import { RatingBanner } from "../Shared/RatingBanner";
-import { FormattedMessage, FormattedNumber } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import {
   faBox,
   faCopy,
@@ -30,6 +30,7 @@ import { PatchComponent } from "src/patch";
 import ScreenUtils from "src/utils/screen";
 import { StudioOverlay } from "../Shared/GridCard/StudioOverlay";
 import { GroupTag } from "../Groups/GroupTag";
+import { FileSize } from "../Shared/FileSize";
 
 interface IScenePreviewProps {
   isPortrait: boolean;
@@ -362,21 +363,11 @@ const SceneCardImage = PatchComponent(
     );
 
     function maybeRenderSceneSpecsOverlay() {
-      let sizeObj = null;
-      if (file?.size) {
-        sizeObj = TextUtils.fileSize(file.size);
-      }
       return (
         <div className="scene-specs-overlay">
-          {sizeObj != null ? (
+          {file?.size !== undefined ? (
             <span className="overlay-filesize extra-scene-info">
-              <FormattedNumber
-                value={sizeObj.size}
-                maximumFractionDigits={TextUtils.fileSizeFractionalDigits(
-                  sizeObj.unit
-                )}
-              />
-              {TextUtils.formatFileSizeUnit(sizeObj.unit)}
+              <FileSize size={file.size} />
             </span>
           ) : (
             ""