Show scene resolution and duration in tagger (#6663)

* Show scene resolution and duration in tagger

A scene's duration and resolution is often useful to ensure you have
found the right scene. This PR adds the same resolution/duration
overlay from the grid view to the tagger view.

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

@@ -352,6 +352,37 @@ const SceneCardOverlays = PatchComponent(
   }
 );
 
+interface ISceneSpecsOverlay {
+  scene: GQL.SlimSceneDataFragment;
+}
+
+export const SceneSpecsOverlay: React.FC<ISceneSpecsOverlay> = ({ scene }) => {
+  if (!scene.files.length) return null;
+  let file = scene.files[0];
+  return (
+    <div className="scene-specs-overlay">
+      <span className="overlay-filesize extra-scene-info">
+        <FileSize size={file.size} />
+      </span>
+      {file.width && file.height ? (
+        <span className="overlay-resolution">
+          {" "}
+          {TextUtils.resolution(file.width, file.height)}
+        </span>
+      ) : (
+        ""
+      )}
+      {(file.duration ?? 0) >= 1 ? (
+        <span className="overlay-duration">
+          {TextUtils.secondsToTimestamp(file.duration)}
+        </span>
+      ) : (
+        ""
+      )}
+    </div>
+  );
+};
+
 const SceneCardImage = PatchComponent(
   "SceneCard.Image",
   (props: ISceneCardProps) => {
@@ -364,35 +395,6 @@ const SceneCardImage = PatchComponent(
       [props.scene]
     );
 
-    function maybeRenderSceneSpecsOverlay() {
-      return (
-        <div className="scene-specs-overlay">
-          {file?.size !== undefined ? (
-            <span className="overlay-filesize extra-scene-info">
-              <FileSize size={file.size} />
-            </span>
-          ) : (
-            ""
-          )}
-          {file?.width && file?.height ? (
-            <span className="overlay-resolution">
-              {" "}
-              {TextUtils.resolution(file?.width, file?.height)}
-            </span>
-          ) : (
-            ""
-          )}
-          {(file?.duration ?? 0) >= 1 ? (
-            <span className="overlay-duration">
-              {TextUtils.secondsToTimestamp(file?.duration ?? 0)}
-            </span>
-          ) : (
-            ""
-          )}
-        </div>
-      );
-    }
-
     function maybeRenderInteractiveSpeedOverlay() {
       return (
         <div className="scene-interactive-speed-overlay">
@@ -432,7 +434,7 @@ const SceneCardImage = PatchComponent(
           disabled={props.selecting}
         />
         <RatingBanner rating={props.scene.rating100} />
-        {maybeRenderSceneSpecsOverlay()}
+        <SceneSpecsOverlay scene={props.scene} />
         {maybeRenderInteractiveSpeedOverlay()}
       </>
     );

ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx

@@ -11,7 +11,10 @@ import { StashIDPill } from "src/components/Shared/StashID";
 import { PerformerLink, TagLink } from "src/components/Shared/TagLink";
 import { TruncatedText } from "src/components/Shared/TruncatedText";
 import { parsePath, prepareQueryString } from "src/components/Tagger/utils";
-import { ScenePreview } from "src/components/Scenes/SceneCard";
+import {
+  ScenePreview,
+  SceneSpecsOverlay,
+} from "src/components/Scenes/SceneCard";
 import { TaggerStateContext } from "../context";
 import {
   faChevronDown,
@@ -271,6 +274,7 @@ export const TaggerScene: React.FC<PropsWithChildren<ITaggerScene>> = ({
                 vttPath={scene.paths.vtt ?? undefined}
                 onScrubberClick={onScrubberClick}
               />
+              <SceneSpecsOverlay scene={scene} />
               {maybeRenderSpriteIcon()}
             </Link>
           </div>

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

@@ -8,6 +8,11 @@
 
   .scene-card {
     position: relative;
+
+    .scene-specs-overlay {
+      bottom: 5px;
+      right: 5px;
+    }
   }
 
   .scene-card-preview {