Optimise card width calculation (#5713)

* Add hook for grid card width calculation
* Move card width calculation into grid instead of card

Now calculates once instead of per card

* Debounce resize observer

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { useHistory } from "react-router-dom";
 import cx from "classnames";
@@ -13,7 +13,7 @@ import TextUtils from "src/utils/text";
 import { SceneQueue } from "src/models/sceneQueue";
 import { ConfigurationContext } from "src/hooks/Config";
 import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
-import { GridCard, calculateCardWidth } from "../Shared/GridCard/GridCard";
+import { GridCard } from "../Shared/GridCard/GridCard";
 import { RatingBanner } from "../Shared/RatingBanner";
 import { FormattedMessage } from "react-intl";
 import {
@@ -27,7 +27,6 @@ import {
 import { objectPath, objectTitle } from "src/core/files";
 import { PreviewScrubber } from "./PreviewScrubber";
 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";
@@ -94,7 +93,7 @@ export const ScenePreview: React.FC<IScenePreviewProps> = ({
 
 interface ISceneCardProps {
   scene: GQL.SlimSceneDataFragment;
-  containerWidth?: number;
+  width?: number;
   previewHeight?: number;
   index?: number;
   queue?: SceneQueue;
@@ -439,7 +438,6 @@ export const SceneCard = PatchComponent(
   "SceneCard",
   (props: ISceneCardProps) => {
     const { configuration } = React.useContext(ConfigurationContext);
-    const [cardWidth, setCardWidth] = useState<number>();
 
     const file = useMemo(
       () => (props.scene.files.length > 0 ? props.scene.files[0] : undefined),
@@ -462,36 +460,6 @@ export const SceneCard = PatchComponent(
       return "";
     }
 
-    useEffect(() => {
-      if (
-        !props.containerWidth ||
-        props.zoomIndex === undefined ||
-        ScreenUtils.isMobile()
-      )
-        return;
-
-      let zoomValue = props.zoomIndex;
-      let preferredCardWidth: number;
-      switch (zoomValue) {
-        case 0:
-          preferredCardWidth = 280;
-          break;
-        case 1:
-          preferredCardWidth = 340; // this value is intentionally higher than 320
-          break;
-        case 2:
-          preferredCardWidth = 480;
-          break;
-        case 3:
-          preferredCardWidth = 640;
-      }
-      let fittedCardWidth = calculateCardWidth(
-        props.containerWidth,
-        preferredCardWidth!
-      );
-      setCardWidth(fittedCardWidth);
-    }, [props.containerWidth, props.zoomIndex]);
-
     const cont = configuration?.interface.continuePlaylistDefault ?? false;
 
     const sceneLink = props.queue
@@ -506,7 +474,7 @@ export const SceneCard = PatchComponent(
         className={`scene-card ${zoomIndex()} ${filelessClass()}`}
         url={sceneLink}
         title={objectTitle(props.scene)}
-        width={cardWidth}
+        width={props.width}
         linkClassName="scene-card-link"
         thumbnailSectionClassName="video-section"
         resumeTime={props.scene.resume_time ?? undefined}