Add filesize on scene cards, invisibly (#2335)

* Add filesize on scene cards, in secret
* Add find extra copies button, also hidden

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

@@ -10,12 +10,13 @@ import {
   SweatDrops,
   TruncatedText,
 } from "src/components/Shared";
-import { TextUtils } from "src/utils";
+import { NavUtils, TextUtils } from "src/utils";
 import { SceneQueue } from "src/models/sceneQueue";
 import { ConfigurationContext } from "src/hooks/Config";
 import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
 import { GridCard } from "../Shared/GridCard";
 import { RatingBanner } from "../Shared/RatingBanner";
+import { FormattedNumber } from "react-intl";
 
 interface IScenePreviewProps {
   isPortrait: boolean;
@@ -91,8 +92,25 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     missingStudioImage || (configuration?.interface.showStudioAsText ?? false);
 
   function maybeRenderSceneSpecsOverlay() {
+    let sizeObj = null;
+    if (props.scene.file.size) {
+      sizeObj = TextUtils.fileSize(parseInt(props.scene.file.size));
+    }
     return (
       <div className="scene-specs-overlay">
+        {sizeObj != null ? (
+          <span className="overlay-filesize extra-scene-info">
+            <FormattedNumber
+              value={sizeObj.size}
+              maximumFractionDigits={TextUtils.fileSizeFractionalDigits(
+                sizeObj.unit
+              )}
+            />
+            {TextUtils.formatFileSizeUnit(sizeObj.unit)}
+          </span>
+        ) : (
+          ""
+        )}
         {props.scene.file.width && props.scene.file.height ? (
           <span className="overlay-resolution">
             {" "}
@@ -273,6 +291,21 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     }
   }
 
+  function maybeRenderDupeCopies() {
+    if (props.scene.phash) {
+      return (
+        <div className="other-copies extra-scene-info">
+          <Button
+            href={NavUtils.makeScenesPHashMatchUrl(props.scene.phash)}
+            className="minimal"
+          >
+            <Icon icon="copy" />
+          </Button>
+        </div>
+      );
+    }
+  }
+
   function maybeRenderPopoverButtonGroup() {
     if (
       !props.compact &&
@@ -295,6 +328,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
             {maybeRenderOCounter()}
             {maybeRenderGallery()}
             {maybeRenderOrganized()}
+            {maybeRenderDupeCopies()}
           </ButtonGroup>
         </>
       );

ui/v2.5/src/components/Scenes/styles.scss

@@ -160,6 +160,10 @@ textarea.scene-description {
   }
 }
 
+.extra-scene-info {
+  display: none;
+}
+
 .overlay-resolution {
   font-weight: 900;
   margin-right: 0.3rem;