Fix the Incorrect Image Size bug (#724)

* Fix the bug * Make image width/height required --------- Co-authored-by: InfiniteStash <117855276+InfiniteStash@users.noreply.github.com>
stashapp · Feb 17, 2024 · 85e8914 · 85e8914
1 parent c5d62a1
commit 85e8914
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 53 deletions.
diff --git a/frontend/src/components/editCard/ModifyEdit.tsx b/frontend/src/components/editCard/ModifyEdit.tsx
@@ -34,6 +34,13 @@ type Details = EditFragment["details"];
 type OldDetails = EditFragment["old_details"];
 type Options = EditFragment["options"];
 
+type Image = {
+  height: number;
+  id: string;
+  url: string;
+  width: number;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 type StartingWith<T, K extends string> = T extends `${K}${infer _}` ? T : never;
 type TargetOldDetails<T> = Omit<
@@ -95,11 +102,6 @@ type BodyMod = {
   description?: string | null;
 };
 
-type Image = {
-  id: string;
-  url: string;
-};
-
 export interface PerformerDetails {
   name?: string | null;
   gender?: GenderEnum | null;
@@ -123,8 +125,8 @@ export interface PerformerDetails {
   removed_piercings?: BodyMod[] | null;
   added_aliases?: string[] | null;
   removed_aliases?: string[] | null;
-  added_images?: NullableImage[] | null;
-  removed_images?: NullableImage[] | null;
+  added_images?: (Image | null)[] | null;
+  removed_images?: (Image | null)[] | null;
   added_urls?: URL[] | null;
   removed_urls?: URL[] | null;
   draft_id?: string | null;
@@ -303,8 +305,6 @@ type ScenePerformance = {
   >;
 };
 
-type NullableImage = Image | null;
-
 export interface SceneDetails {
   title?: string | null;
   date?: string | null;
@@ -318,8 +318,8 @@ export interface SceneDetails {
   } | null;
   added_performers?: ScenePerformance[] | null;
   removed_performers?: ScenePerformance[] | null;
-  added_images?: NullableImage[] | null;
-  removed_images?: NullableImage[] | null;
+  added_images?: (Image | null)[] | null;
+  removed_images?: (Image | null)[] | null;
   added_urls?: URL[] | null;
   removed_urls?: URL[] | null;
   added_tags?:
@@ -464,8 +464,8 @@ export interface StudioDetails {
     id: string;
     name: string;
   } | null;
-  added_images?: NullableImage[] | null;
-  removed_images?: NullableImage[] | null;
+  added_images?: (Image | null)[] | null;
+  removed_images?: (Image | null)[] | null;
   added_urls?: URL[] | null;
   removed_urls?: URL[] | null;
 }

diff --git a/frontend/src/components/editImages/editImages.tsx b/frontend/src/components/editImages/editImages.tsx
@@ -5,7 +5,7 @@ import type { Control } from "react-hook-form";
 import { faImages } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
 
-import { useAddImage } from "src/graphql";
+import { ImageFragment as Image, useAddImage } from "src/graphql";
 import { Image as ImageInput } from "src/components/form";
 import { Icon, LoadingIndicator } from "src/components/fragments";
 
@@ -18,11 +18,6 @@ const CLASSNAME_PLACEHOLDER = `${CLASSNAME}-placeholder`;
 const CLASSNAME_IMAGE = `${CLASSNAME}-image`;
 const CLASSNAME_UPLOADING = `${CLASSNAME_IMAGE}-uploading`;
 
-type Image = {
-  id: string;
-  url: string;
-};
-
 type ControlType =
   | Control<{ images?: Image[] | undefined }, "images">
   | undefined;
@@ -35,7 +30,7 @@ interface EditImagesProps {
   maxImages?: number;
   /** Whether to allow svg/png image input */
   allowLossless?: boolean;
-  original?: { id: string; url: string }[] | undefined;
+  original?: Image[] | undefined;
 }
 
 const EditImages: FC<EditImagesProps> = ({

diff --git a/frontend/src/components/imageChangeRow/ImageChangeRow.tsx b/frontend/src/components/imageChangeRow/ImageChangeRow.tsx
@@ -1,53 +1,35 @@
-import { FC, useState } from "react";
+import { FC } from "react";
 import { Col, Row } from "react-bootstrap";
 
-import { ImageFragment as Image } from "src/graphql";
+type Image = {
+  height: number;
+  id: string;
+  url: string;
+  width: number;
+};
 
 const CLASSNAME = "ImageChangeRow";
 const CLASSNAME_IMAGE = `${CLASSNAME}-image`;
 
 export interface ImageChangeRowProps {
-  newImages?: (Pick<Image, "id" | "url"> | null)[] | null;
-  oldImages?: (Pick<Image, "id" | "url"> | null)[] | null;
+  newImages?: (Image | null)[] | null;
+  oldImages?: (Image | null)[] | null;
   showDiff?: boolean;
 }
 
 const Images: FC<{
-  images: (Pick<Image, "id" | "url"> | null)[] | null | undefined;
+  images: (Image | null)[] | null | undefined;
 }> = ({ images }) => {
-  const [imgDimensions, setImgDimensions] = useState<{
-    [key: string]: { height: number; width: number };
-  }>({});
-
-  const onImgLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-    setImgDimensions({
-      ...imgDimensions,
-      [event.currentTarget.src]: {
-        height: event.currentTarget.naturalHeight,
-        width: event.currentTarget.naturalWidth,
-      },
-    });
-  };
-
   return (
     <>
       {(images ?? []).map((image, i) =>
         image === null ? (
           <img className={CLASSNAME_IMAGE} alt="Deleted" key={`deleted-${i}`} />
         ) : (
           <div key={image.id}>
-            <img
-              src={image.url}
-              className={CLASSNAME_IMAGE}
-              alt=""
-              onLoad={onImgLoad}
-            />
+            <img src={image.url} className={CLASSNAME_IMAGE} alt="" />
             <div className={"text-center"}>
-              {imgDimensions && imgDimensions[image.url]
-                ? `${imgDimensions[image.url].width} x ${
-                    imgDimensions[image.url].height
-                  }`
-                : ""}
+              {image.width} x {image.height}
             </div>
           </div>
         )

diff --git a/frontend/src/pages/performers/performerForm/schema.ts b/frontend/src/pages/performers/performerForm/schema.ts
@@ -115,6 +115,8 @@ export const PerformerSchema = yup.object({
       yup.object({
         id: yup.string().required(),
         url: yup.string().required(),
+        width: yup.number().default(0),
+        height: yup.number().default(0),
       })
     )
     .required(),

diff --git a/frontend/src/pages/scenes/sceneForm/schema.ts b/frontend/src/pages/scenes/sceneForm/schema.ts
@@ -81,6 +81,8 @@ export const SceneSchema = yup.object({
       yup.object({
         id: yup.string().required(),
         url: yup.string().required(),
+        width: yup.number().required(),
+        height: yup.number().required(),
       })
     )
     .required(),

diff --git a/frontend/src/pages/studios/studioForm/schema.ts b/frontend/src/pages/studios/studioForm/schema.ts
@@ -23,6 +23,8 @@ export const StudioSchema = yup.object({
       yup.object({
         id: yup.string().required(),
         url: yup.string().required(),
+        width: yup.number().required(),
+        height: yup.number().required(),
       })
     )
     .required(),

diff --git a/frontend/src/utils/diff.ts b/frontend/src/utils/diff.ts
@@ -15,16 +15,25 @@ export const diffValue = <T extends unknown>(
 ): T | null => (a && a !== b ? a : null);
 
 export const diffImages = (
-  newImages: { id: string | undefined; url: string | undefined }[] | undefined,
-  oldImages: { id: string; url: string }[]
+  newImages:
+    | {
+        id: string | undefined;
+        url: string | undefined;
+        width: number | undefined;
+        height: number | undefined;
+      }[]
+    | undefined,
+  oldImages: { id: string; url: string; width: number; height: number }[]
 ) =>
   diffArray(
     (newImages ?? []).flatMap((i) =>
-      i.id && i.url
+      i.id && i.url && i.height && i.width
         ? [
             {
               id: i.id,
               url: i.url,
+              width: i.width,
+              height: i.height,
             },
           ]
         : []