Add zoom slider to other grid views (#4674)

* bring zoom slider to other list views
* updated 0 index to scale more proportionally

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

@@ -79,7 +79,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
     let preferredCardWidth: number;
     switch (zoomValue) {
       case 0:
-        preferredCardWidth = 240;
+        preferredCardWidth = 280;
         break;
       case 1:
         preferredCardWidth = 340;
@@ -95,7 +95,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
       preferredCardWidth!
     );
     setCardWidth(fittedCardWidth);
-  }, [props, props.containerWidth, props.zoomIndex]);
+  }, [props.containerWidth, props.zoomIndex]);
 
   function maybeRenderScenePopoverButton() {
     if (props.gallery.scenes.length === 0) return;

ui/v2.5/src/components/Groups/GroupCard.tsx

@@ -41,6 +41,7 @@ interface IProps {
   sceneNumber?: number;
   selecting?: boolean;
   selected?: boolean;
+  zoomIndex?: number;
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
   fromGroupId?: string;
   onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
@@ -52,6 +53,7 @@ export const GroupCard: React.FC<IProps> = ({
   containerWidth,
   selecting,
   selected,
+  zoomIndex,
   onSelectedChanged,
   fromGroupId,
   onMove,
@@ -71,15 +73,30 @@ export const GroupCard: React.FC<IProps> = ({
   }, [fromGroupId, group.containing_groups]);
 
   useEffect(() => {
-    if (!containerWidth || ScreenUtils.isMobile()) return;
+    if (!containerWidth || zoomIndex === undefined || ScreenUtils.isMobile())
+      return;
 
-    let preferredCardWidth = 250;
+    let zoomValue = zoomIndex;
+    let preferredCardWidth: number;
+    switch (zoomValue) {
+      case 0:
+        preferredCardWidth = 210;
+        break;
+      case 1:
+        preferredCardWidth = 250;
+        break;
+      case 2:
+        preferredCardWidth = 300;
+        break;
+      case 3:
+        preferredCardWidth = 375;
+    }
     let fittedCardWidth = calculateCardWidth(
       containerWidth,
       preferredCardWidth!
     );
     setCardWidth(fittedCardWidth);
-  }, [containerWidth]);
+  }, [containerWidth, zoomIndex]);
 
   function maybeRenderScenesPopoverButton() {
     if (group.scenes.length === 0) return;
@@ -150,7 +167,7 @@ export const GroupCard: React.FC<IProps> = ({
 
   return (
     <GridCard
-      className="group-card"
+      className={`group-card zoom-${zoomIndex}`}
       objectId={group.id}
       onMove={onMove}
       url={`/groups/${group.id}`}

ui/v2.5/src/components/Groups/GroupCardGrid.tsx

@@ -6,6 +6,7 @@ import { useContainerDimensions } from "../Shared/GridCard/GridCard";
 interface IGroupCardGrid {
   groups: GQL.GroupDataFragment[];
   selectedIds: Set<string>;
+  zoomIndex: number;
   onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
   fromGroupId?: string;
   onMove?: (srcIds: string[], targetId: string, after: boolean) => void;
@@ -14,6 +15,7 @@ interface IGroupCardGrid {
 export const GroupCardGrid: React.FC<IGroupCardGrid> = ({
   groups,
   selectedIds,
+  zoomIndex,
   onSelectChange,
   fromGroupId,
   onMove,
@@ -26,6 +28,7 @@ export const GroupCardGrid: React.FC<IGroupCardGrid> = ({
           key={p.id}
           containerWidth={width}
           group={p}
+          zoomIndex={zoomIndex}
           selecting={selectedIds.size > 0}
           selected={selectedIds.has(p.id)}
           onSelectedChanged={(selected: boolean, shiftKey: boolean) =>

ui/v2.5/src/components/Groups/GroupList.tsx

@@ -184,6 +184,7 @@ export const GroupList: React.FC<IGroupList> = ({
         {filter.displayMode === DisplayMode.Grid && (
           <GroupCardGrid
             groups={result.data?.findGroups.groups ?? []}
+            zoomIndex={filter.zoomIndex}
             selectedIds={selectedIds}
             onSelectChange={onSelectChange}
             fromGroupId={fromGroupId}
@@ -225,6 +226,7 @@ export const GroupList: React.FC<IGroupList> = ({
       selectable={selectable}
     >
       <ItemList
+        zoomable
         view={view}
         otherOperations={otherOperations}
         addKeybinds={addKeybinds}

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

@@ -50,7 +50,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
     let preferredCardWidth: number;
     switch (zoomValue) {
       case 0:
-        preferredCardWidth = 240;
+        preferredCardWidth = 280;
         break;
       case 1:
         preferredCardWidth = 340;
@@ -66,7 +66,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
       preferredCardWidth!
     );
     setCardWidth(fittedCardWidth);
-  }, [props, props.containerWidth, props.zoomIndex]);
+  }, [props.containerWidth, props.zoomIndex]);
 
   const file = useMemo(
     () =>

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

@@ -38,6 +38,7 @@ interface IPerformerCardProps {
   ageFromDate?: string;
   selecting?: boolean;
   selected?: boolean;
+  zoomIndex?: number;
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
   extraCriteria?: IPerformerCardExtraCriteria;
 }
@@ -48,6 +49,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
   ageFromDate,
   selecting,
   selected,
+  zoomIndex,
   onSelectedChanged,
   extraCriteria,
 }) => {
@@ -72,15 +74,30 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
   const [cardWidth, setCardWidth] = useState<number>();
 
   useEffect(() => {
-    if (!containerWidth || ScreenUtils.isMobile()) return;
+    if (!containerWidth || zoomIndex === undefined || ScreenUtils.isMobile())
+      return;
 
-    let preferredCardWidth = 300;
+    let zoomValue = zoomIndex;
+    let preferredCardWidth: number;
+    switch (zoomValue) {
+      case 0:
+        preferredCardWidth = 240;
+        break;
+      case 1:
+        preferredCardWidth = 300;
+        break;
+      case 2:
+        preferredCardWidth = 375;
+        break;
+      case 3:
+        preferredCardWidth = 470;
+    }
     let fittedCardWidth = calculateCardWidth(
       containerWidth,
       preferredCardWidth!
     );
     setCardWidth(fittedCardWidth);
-  }, [containerWidth]);
+  }, [containerWidth, zoomIndex]);
 
   function onToggleFavorite(v: boolean) {
     if (performer.id) {
@@ -246,7 +263,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
 
   return (
     <GridCard
-      className="performer-card"
+      className={`performer-card zoom-${zoomIndex}`}
       url={`/performers/${performer.id}`}
       width={cardWidth}
       pretitleIcon={

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

@@ -14,6 +14,7 @@ interface IPerformerCardGrid {
 export const PerformerCardGrid: React.FC<IPerformerCardGrid> = ({
   performers,
   selectedIds,
+  zoomIndex,
   onSelectChange,
   extraCriteria,
 }) => {
@@ -25,6 +26,7 @@ export const PerformerCardGrid: React.FC<IPerformerCardGrid> = ({
           key={p.id}
           containerWidth={width}
           performer={p}
+          zoomIndex={zoomIndex}
           selecting={selectedIds.size > 0}
           selected={selectedIds.has(p.id)}
           onSelectedChanged={(selected: boolean, shiftKey: boolean) =>

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

@@ -329,6 +329,7 @@ export const PerformerList: React.FC<IPerformerList> = ({
       selectable
     >
       <ItemList
+        zoomable
         view={view}
         otherOperations={otherOperations}
         addKeybinds={addKeybinds}

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

@@ -474,7 +474,7 @@ export const SceneCard = PatchComponent(
       let preferredCardWidth: number;
       switch (zoomValue) {
         case 0:
-          preferredCardWidth = 240;
+          preferredCardWidth = 280;
           break;
         case 1:
           preferredCardWidth = 340; // this value is intentionally higher than 320
@@ -490,7 +490,7 @@ export const SceneCard = PatchComponent(
         preferredCardWidth!
       );
       setCardWidth(fittedCardWidth);
-    }, [props, props.containerWidth, props.zoomIndex]);
+    }, [props.containerWidth, props.zoomIndex]);
 
     const cont = configuration?.interface.continuePlaylistDefault ?? false;
 

ui/v2.5/src/components/Studios/StudioCard.tsx

@@ -24,6 +24,7 @@ interface IProps {
   hideParent?: boolean;
   selecting?: boolean;
   selected?: boolean;
+  zoomIndex?: number;
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
 }
 
@@ -78,21 +79,38 @@ export const StudioCard: React.FC<IProps> = ({
   hideParent,
   selecting,
   selected,
+  zoomIndex,
   onSelectedChanged,
 }) => {
   const [updateStudio] = useStudioUpdate();
   const [cardWidth, setCardWidth] = useState<number>();
 
   useEffect(() => {
-    if (!containerWidth || ScreenUtils.isMobile()) return;
+    if (!containerWidth || zoomIndex === undefined || ScreenUtils.isMobile())
+      return;
 
-    let preferredCardWidth = 340;
+    let zoomValue = zoomIndex;
+    console.log(zoomValue);
+    let preferredCardWidth: number;
+    switch (zoomValue) {
+      case 0:
+        preferredCardWidth = 280;
+        break;
+      case 1:
+        preferredCardWidth = 340;
+        break;
+      case 2:
+        preferredCardWidth = 420;
+        break;
+      case 3:
+        preferredCardWidth = 560;
+    }
     let fittedCardWidth = calculateCardWidth(
       containerWidth,
       preferredCardWidth!
     );
     setCardWidth(fittedCardWidth);
-  }, [containerWidth]);
+  }, [containerWidth, zoomIndex]);
 
   function onToggleFavorite(v: boolean) {
     if (studio.id) {
@@ -216,7 +234,7 @@ export const StudioCard: React.FC<IProps> = ({
 
   return (
     <GridCard
-      className="studio-card"
+      className={`studio-card zoom-${zoomIndex}`}
       url={`/studios/${studio.id}`}
       width={cardWidth}
       title={studio.name}

ui/v2.5/src/components/Studios/StudioCardGrid.tsx

@@ -7,6 +7,7 @@ interface IStudioCardGrid {
   studios: GQL.StudioDataFragment[];
   fromParent: boolean | undefined;
   selectedIds: Set<string>;
+  zoomIndex: number;
   onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
 }
 
@@ -14,6 +15,7 @@ export const StudioCardGrid: React.FC<IStudioCardGrid> = ({
   studios,
   fromParent,
   selectedIds,
+  zoomIndex,
   onSelectChange,
 }) => {
   const [componentRef, { width }] = useContainerDimensions();
@@ -24,6 +26,7 @@ export const StudioCardGrid: React.FC<IStudioCardGrid> = ({
           key={studio.id}
           containerWidth={width}
           studio={studio}
+          zoomIndex={zoomIndex}
           hideParent={fromParent}
           selecting={selectedIds.size > 0}
           selected={selectedIds.has(studio.id)}

ui/v2.5/src/components/Studios/StudioList.tsx

@@ -135,6 +135,7 @@ export const StudioList: React.FC<IStudioList> = ({
         return (
           <StudioCardGrid
             studios={result.data.findStudios.studios}
+            zoomIndex={filter.zoomIndex}
             fromParent={fromParent}
             selectedIds={selectedIds}
             onSelectChange={onSelectChange}
@@ -187,6 +188,7 @@ export const StudioList: React.FC<IStudioList> = ({
       selectable
     >
       <ItemList
+        zoomable
         view={view}
         otherOperations={otherOperations}
         addKeybinds={addKeybinds}

ui/v2.5/src/components/Tags/TagCard.tsx

@@ -39,7 +39,7 @@ export const TagCard: React.FC<IProps> = ({
     let preferredCardWidth: number;
     switch (zoomValue) {
       case 0:
-        preferredCardWidth = 240;
+        preferredCardWidth = 280;
         break;
       case 1:
         preferredCardWidth = 340;