Fit cards plugin

ui/v2.5/src/components/Galleries/GalleryCard.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import { GridCard } from "../Shared/GridCard";
@@ -17,6 +17,7 @@ import { galleryTitle } from "src/core/galleries";
 
 interface IProps {
   gallery: GQL.SlimGalleryDataFragment;
+  containerWidth?: number;
   selecting?: boolean;
   selected?: boolean | undefined;
   zoomIndex?: number;
@@ -26,6 +27,33 @@ interface IProps {
 export const GalleryCard: React.FC<IProps> = (props) => {
   const { configuration } = React.useContext(ConfigurationContext);
   const showStudioAsText = configuration?.interface.showStudioAsText ?? false;
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!props.containerWidth || props.zoomIndex === undefined) return;
+
+    let containerPadding = 30;
+    let containerWidth = props.containerWidth - containerPadding;
+    let zoomValue = props.zoomIndex;
+    let maxCardWidth: number;
+    let paddingOffset = 10;
+    switch (zoomValue) {
+      case 0:
+        maxCardWidth = 240;
+        break;
+      case 1:
+        maxCardWidth = 340;
+        break;
+      case 2:
+        maxCardWidth = 480;
+        break;
+      case 3:
+        maxCardWidth = 640;
+    }
+    let maxElementsOnRow = Math.ceil(containerWidth / maxCardWidth!);
+    let fittedCardWidth = containerWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [props, props.containerWidth, props.zoomIndex]);
 
   function maybeRenderScenePopoverButton() {
     if (props.gallery.scenes.length === 0) return;
@@ -153,6 +181,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
     <GridCard
       className={`gallery-card zoom-${props.zoomIndex}`}
       url={`/galleries/${props.gallery.id}`}
+      width={cardWidth}
       title={galleryTitle(props.gallery)}
       linkClassName="gallery-card-header"
       image={

ui/v2.5/src/components/Galleries/GalleryList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
 import { useHistory } from "react-router-dom";
@@ -18,6 +18,7 @@ import { EditGalleriesDialog } from "./EditGalleriesDialog";
 import { DeleteGalleriesDialog } from "./DeleteGalleriesDialog";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { GalleryListTable } from "./GalleryListTable";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 const GalleryItemList = makeItemList({
   filterMode: GQL.FilterMode.Galleries,
@@ -106,6 +107,9 @@ export const GalleryList: React.FC<IGalleryList> = ({
     setIsExportDialogOpen(true);
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderContent(
     result: GQL.FindGalleriesQueryResult,
     filter: ListFilterModel,
@@ -133,10 +137,11 @@ export const GalleryList: React.FC<IGalleryList> = ({
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row justify-content-center">
+          <div className="row justify-content-center" ref={componentRef}>
             {result.data.findGalleries.galleries.map((gallery) => (
               <GalleryCard
                 key={gallery.id}
+                containerWidth={width}
                 gallery={gallery}
                 zoomIndex={filter.zoomIndex}
                 selecting={selectedIds.size > 0}

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useMemo } from "react";
+import React, { MouseEvent, useEffect, useMemo, useState } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
@@ -20,6 +20,7 @@ import { TruncatedText } from "../Shared/TruncatedText";
 
 interface IImageCardProps {
   image: GQL.SlimImageDataFragment;
+  containerWidth?: number;
   selecting?: boolean;
   selected?: boolean | undefined;
   zoomIndex: number;
@@ -30,6 +31,34 @@ interface IImageCardProps {
 export const ImageCard: React.FC<IImageCardProps> = (
   props: IImageCardProps
 ) => {
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!props.containerWidth || props.zoomIndex === undefined) return;
+
+    let containerPadding = 30;
+    let containerWidth = props.containerWidth - containerPadding;
+    let zoomValue = props.zoomIndex;
+    let maxCardWidth: number;
+    let paddingOffset = 10;
+    switch (zoomValue) {
+      case 0:
+        maxCardWidth = 240;
+        break;
+      case 1:
+        maxCardWidth = 340;
+        break;
+      case 2:
+        maxCardWidth = 480;
+        break;
+      case 3:
+        maxCardWidth = 640;
+    }
+    let maxElementsOnRow = Math.ceil(containerWidth / maxCardWidth!);
+    let fittedCardWidth = containerWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [props, props.containerWidth, props.zoomIndex]);
+
   const file = useMemo(
     () =>
       props.image.visual_files.length > 0
@@ -153,6 +182,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
     <GridCard
       className={`image-card zoom-${props.zoomIndex}`}
       url={`/images/${props.image.id}`}
+      width={cardWidth}
       title={objectTitle(props.image)}
       linkClassName="image-card-link"
       image={

ui/v2.5/src/components/Images/ImageList.tsx

@@ -4,6 +4,7 @@ import React, {
   useMemo,
   MouseEvent,
   useContext,
+  useRef,
 } from "react";
 import { FormattedNumber, useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
@@ -32,6 +33,7 @@ import { objectTitle } from "src/core/files";
 import TextUtils from "src/utils/text";
 import { ConfigurationContext } from "src/hooks/Config";
 import { IUIConfig } from "src/core/config";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 interface IImageWallProps {
   images: GQL.SlimImageDataFragment[];
@@ -196,6 +198,9 @@ const ImageListImages: React.FC<IImageListImages> = ({
     ev.preventDefault();
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderImageCard(
     index: number,
     image: GQL.SlimImageDataFragment,
@@ -204,6 +209,7 @@ const ImageListImages: React.FC<IImageListImages> = ({
     return (
       <ImageCard
         key={image.id}
+        containerWidth={width}
         image={image}
         zoomIndex={zoomIndex}
         selecting={selectedIds.size > 0}
@@ -220,7 +226,7 @@ const ImageListImages: React.FC<IImageListImages> = ({
 
   if (filter.displayMode === DisplayMode.Grid) {
     return (
-      <div className="row justify-content-center">
+      <div className="row justify-content-center" ref={componentRef}>
         {images.map((image, index) =>
           renderImageCard(index, image, filter.zoomIndex)
         )}

ui/v2.5/src/components/Movies/MovieCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import * as GQL from "src/core/generated-graphql";
 import { GridCard } from "../Shared/GridCard";
@@ -12,13 +12,29 @@ import { faPlayCircle } from "@fortawesome/free-solid-svg-icons";
 
 interface IProps {
   movie: GQL.MovieDataFragment;
+  containerWidth?: number;
   sceneIndex?: number;
   selecting?: boolean;
   selected?: boolean;
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
 }
 
 export const MovieCard: React.FC<IProps> = (props: IProps) => {
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!props.containerWidth) return;
+
+    let containerPadding = 30;
+    let maxUsableWidth = props.containerWidth - containerPadding;
+    let maxCardWidth = 250;
+    let paddingOffset = 10;
+
+    let maxElementsOnRow = Math.ceil(maxUsableWidth / maxCardWidth!);
+    let fittedCardWidth = maxUsableWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [props, props.containerWidth]);
+
   function maybeRenderSceneNumber() {
     if (!props.sceneIndex) return;
 
@@ -71,6 +87,7 @@ export const MovieCard: React.FC<IProps> = (props: IProps) => {
     <GridCard
       className="movie-card"
       url={`/movies/${props.movie.id}`}
+      width={cardWidth}
       title={props.movie.name}
       linkClassName="movie-card-header"
       image={

ui/v2.5/src/components/Movies/MovieList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import cloneDeep from "lodash-es/cloneDeep";
 import Mousetrap from "mousetrap";
@@ -20,6 +20,7 @@ import { ExportDialog } from "../Shared/ExportDialog";
 import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
 import { MovieCard } from "./MovieCard";
 import { EditMoviesDialog } from "./EditMoviesDialog";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 const MovieItemList = makeItemList({
   filterMode: GQL.FilterMode.Movies,
@@ -103,6 +104,9 @@ export const MovieList: React.FC<IMovieList> = ({ filterHook, alterQuery }) => {
     setIsExportDialogOpen(true);
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderContent(
     result: GQL.FindMoviesQueryResult,
     filter: ListFilterModel,
@@ -130,10 +134,11 @@ export const MovieList: React.FC<IMovieList> = ({ filterHook, alterQuery }) => {
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row justify-content-center">
+          <div className="row justify-content-center" ref={componentRef}>
             {result.data.findMovies.movies.map((p) => (
               <MovieCard
                 key={p.id}
+                containerWidth={width}
                 movie={p}
                 selecting={selectedIds.size > 0}
                 selected={selectedIds.has(p.id)}

ui/v2.5/src/components/Performers/PerformerCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
@@ -33,6 +33,7 @@ export interface IPerformerCardExtraCriteria {
 
 interface IPerformerCardProps {
   performer: GQL.PerformerDataFragment;
+  containerWidth?: number;
   ageFromDate?: string;
   selecting?: boolean;
   selected?: boolean;
@@ -42,6 +43,7 @@ interface IPerformerCardProps {
 
 export const PerformerCard: React.FC<IPerformerCardProps> = ({
   performer,
+  containerWidth,
   ageFromDate,
   selecting,
   selected,
@@ -66,6 +68,23 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
   );
 
   const [updatePerformer] = usePerformerUpdate();
+  const [cardWidth, setCardWidth] = useState<number>();
+  const [imageHeight, setImageHeight] = useState<number>();
+
+  useEffect(() => {
+    if (!containerWidth) return;
+
+    let containerPadding = 30;
+    let maxUsableWidth = containerWidth - containerPadding;
+    let maxCardWidth = 300;
+    let paddingOffset = 10;
+
+    let maxElementsOnRow = Math.ceil(maxUsableWidth / maxCardWidth!);
+    let fittedCardWidth = maxUsableWidth / maxElementsOnRow - paddingOffset;
+    let fittedimageHeight = (fittedCardWidth / 2) * 3;
+    setCardWidth(fittedCardWidth);
+    setImageHeight(fittedimageHeight);
+  }, [containerWidth]);
 
   function renderFavoriteIcon() {
     return (
@@ -251,6 +270,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
     <GridCard
       className="performer-card"
       url={`/performers/${performer.id}`}
+      width={cardWidth}
       pretitleIcon={
         <GenderIcon className="gender-icon" gender={performer.gender} />
       }
@@ -267,6 +287,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
       image={
         <>
           <img
+            style={imageHeight ? { height: `${imageHeight}px` } : {}}
             loading="lazy"
             className="performer-card-image"
             alt={performer.name ?? ""}

ui/v2.5/src/components/Performers/PerformerList.tsx

@@ -1,5 +1,5 @@
 import cloneDeep from "lodash-es/cloneDeep";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { useHistory } from "react-router-dom";
 import Mousetrap from "mousetrap";
@@ -24,6 +24,7 @@ import { PerformerListTable } from "./PerformerListTable";
 import { EditPerformersDialog } from "./EditPerformersDialog";
 import { cmToImperial, cmToInches, kgToLbs } from "src/utils/units";
 import TextUtils from "src/utils/text";
+import { useContainerDimensions } from "../Shared/GridCard";
 
 const PerformerItemList = makeItemList({
   filterMode: GQL.FilterMode.Performers,
@@ -234,6 +235,9 @@ export const PerformerList: React.FC<IPerformerList> = ({
     setIsExportDialogOpen(true);
   }
 
+  const componentRef = useRef<HTMLDivElement>(null);
+  const { width } = useContainerDimensions(componentRef);
+
   function renderContent(
     result: GQL.FindPerformersQueryResult,
     filter: ListFilterModel,
@@ -263,10 +267,11 @@ export const PerformerList: React.FC<IPerformerList> = ({
 
       if (filter.displayMode === DisplayMode.Grid) {
         return (
-          <div className="row justify-content-center">
+          <div className="row justify-content-center" ref={componentRef}>
             {result.data.findPerformers.performers.map((p) => (
               <PerformerCard
                 key={p.id}
+                containerWidth={width}
                 performer={p}
                 selecting={selectedIds.size > 0}
                 selected={selectedIds.has(p.id)}