remaining pages support

cj12312021 · Jan 21, 2024 · ba3c4f3 · ba3c4f3
1 parent 2c77789
commit ba3c4f3
Show file tree

Hide file tree

Showing 13 changed files with 175 additions and 23 deletions.
diff --git a/ui/v2.5/src/components/Galleries/GalleryCard.tsx b/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={

diff --git a/ui/v2.5/src/components/Galleries/GalleryList.tsx b/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}

diff --git a/ui/v2.5/src/components/Images/ImageCard.tsx b/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={

diff --git a/ui/v2.5/src/components/Images/ImageList.tsx b/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)
         )}

diff --git a/ui/v2.5/src/components/Movies/MovieCard.tsx b/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={

diff --git a/ui/v2.5/src/components/Movies/MovieList.tsx b/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)}

diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx
@@ -34,8 +34,6 @@ export interface IPerformerCardExtraCriteria {
 interface IPerformerCardProps {
   performer: GQL.PerformerDataFragment;
   containerWidth?: number;
-  previewHeight?: number;
-  setPreviewHeight?: React.Dispatch<React.SetStateAction<number | undefined>>;
   ageFromDate?: string;
   selecting?: boolean;
   selected?: boolean;
@@ -68,22 +66,21 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
     { id: ageL10nId },
     { age, years_old: ageL10String }
   );
-  
+
   const [updatePerformer] = usePerformerUpdate();
   const [cardWidth, setCardWidth] = useState<number>();
   const [imageHeight, setImageHeight] = useState<number>();
 
   useEffect(() => {
-    if (!containerWidth)
-      return;
+    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 fittedCardWidth = maxUsableWidth / maxElementsOnRow - paddingOffset;
     let fittedimageHeight = (fittedCardWidth / 2) * 3;
     setCardWidth(fittedCardWidth);
     setImageHeight(fittedimageHeight);

diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
@@ -99,7 +99,7 @@ textarea.scene-description {
     max-height: 150px;
     object-fit: contain;
     vertical-align: middle;
-    width: 320px;
+    width: 100%;
 
     @media (max-width: 576px) {
       width: 100%;

diff --git a/ui/v2.5/src/components/Shared/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard.tsx
@@ -27,8 +27,12 @@ interface ICardProps {
 export const useContainerDimensions = (
   myRef: React.RefObject<HTMLDivElement>
 ) => {
-  // 15 pixel offset accounts for scrollbar
-  const [dimensions, setDimensions] = useState({ width: window.innerWidth-15, height: 0 });
+  const overflow = window?.visualViewport?.height! < window.innerHeight;
+  const defaultWidth = overflow ? window.innerWidth - 15 : window.innerWidth;
+  const [dimensions, setDimensions] = useState({
+    width: defaultWidth,
+    height: 0,
+  });
 
   useEffect(() => {
     const getDimensions = () => ({

diff --git a/ui/v2.5/src/components/Studios/StudioCard.tsx b/ui/v2.5/src/components/Studios/StudioCard.tsx
@@ -1,4 +1,4 @@
-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 NavUtils from "src/utils/navigation";
@@ -10,6 +10,7 @@ import { RatingBanner } from "../Shared/RatingBanner";
 
 interface IProps {
   studio: GQL.StudioDataFragment;
+  containerWidth?: number;
   hideParent?: boolean;
   selecting?: boolean;
   selected?: boolean;
@@ -59,11 +60,27 @@ function maybeRenderChildren(studio: GQL.StudioDataFragment) {
 
 export const StudioCard: React.FC<IProps> = ({
   studio,
+  containerWidth,
   hideParent,
   selecting,
   selected,
   onSelectedChanged,
 }) => {
+  const [cardWidth, setCardWidth] = useState<number>();
+
+  useEffect(() => {
+    if (!containerWidth) return;
+
+    let containerPadding = 30;
+    let maxUsableWidth = containerWidth - containerPadding;
+    let maxCardWidth = 340;
+    let paddingOffset = 10;
+
+    let maxElementsOnRow = Math.ceil(maxUsableWidth / maxCardWidth!);
+    let fittedCardWidth = maxUsableWidth / maxElementsOnRow - paddingOffset;
+    setCardWidth(fittedCardWidth);
+  }, [containerWidth]);
+
   function maybeRenderScenesPopoverButton() {
     if (!studio.scene_count) return;
 
@@ -156,6 +173,7 @@ export const StudioCard: React.FC<IProps> = ({
     <GridCard
       className="studio-card"
       url={`/studios/${studio.id}`}
+      width={cardWidth}
       title={studio.name}
       linkClassName="studio-card-header"
       image={