From 85e89146b59833bad1775f4203b5c87b1441c55c Mon Sep 17 00:00:00 2001 From: JackDawson94 <100418085+JackDawson94@users.noreply.github.com> Date: Sat, 17 Feb 2024 15:35:47 +0100 Subject: [PATCH] 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> --- .../src/components/editCard/ModifyEdit.tsx | 26 ++++++------ .../src/components/editImages/editImages.tsx | 9 +--- .../imageChangeRow/ImageChangeRow.tsx | 42 ++++++------------- .../pages/performers/performerForm/schema.ts | 2 + frontend/src/pages/scenes/sceneForm/schema.ts | 2 + .../src/pages/studios/studioForm/schema.ts | 2 + frontend/src/utils/diff.ts | 15 +++++-- 7 files changed, 45 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/editCard/ModifyEdit.tsx b/frontend/src/components/editCard/ModifyEdit.tsx index 756fa70bf..2960ecc5a 100644 --- 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 extends `${K}${infer _}` ? T : never; type TargetOldDetails = 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 index 33624f9b3..2fe947b2d 100644 --- 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 = ({ diff --git a/frontend/src/components/imageChangeRow/ImageChangeRow.tsx b/frontend/src/components/imageChangeRow/ImageChangeRow.tsx index 675fc4dc4..46bb82bd8 100644 --- a/frontend/src/components/imageChangeRow/ImageChangeRow.tsx +++ b/frontend/src/components/imageChangeRow/ImageChangeRow.tsx @@ -1,34 +1,25 @@ -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 | null)[] | null; - oldImages?: (Pick | null)[] | null; + newImages?: (Image | null)[] | null; + oldImages?: (Image | null)[] | null; showDiff?: boolean; } const Images: FC<{ - images: (Pick | null)[] | null | undefined; + images: (Image | null)[] | null | undefined; }> = ({ images }) => { - const [imgDimensions, setImgDimensions] = useState<{ - [key: string]: { height: number; width: number }; - }>({}); - - const onImgLoad = (event: React.SyntheticEvent) => { - setImgDimensions({ - ...imgDimensions, - [event.currentTarget.src]: { - height: event.currentTarget.naturalHeight, - width: event.currentTarget.naturalWidth, - }, - }); - }; - return ( <> {(images ?? []).map((image, i) => @@ -36,18 +27,9 @@ const Images: FC<{ Deleted ) : (
- +
- {imgDimensions && imgDimensions[image.url] - ? `${imgDimensions[image.url].width} x ${ - imgDimensions[image.url].height - }` - : ""} + {image.width} x {image.height}
) diff --git a/frontend/src/pages/performers/performerForm/schema.ts b/frontend/src/pages/performers/performerForm/schema.ts index 54664d4f4..82a43c323 100644 --- 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 index fd8843a84..4b999062c 100644 --- 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 index 623435753..95a698eaf 100644 --- 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 index ba6377c18..db6bb5e87 100644 --- a/frontend/src/utils/diff.ts +++ b/frontend/src/utils/diff.ts @@ -15,16 +15,25 @@ export const diffValue = ( ): 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, }, ] : []