Merge pull request #2163 from AletheiaFact/feature/show-report-button-and-image-display

feat: add review button for images and fix SVG centralization

Author: caneppelevitor

public/locales/en/claim.json

@@ -38,5 +38,7 @@
     "hideSuccess": "Claim hidden succesfully",
     "hideError": "Error while hidden claim",
     "unhideSuccess": "Claim unhide succesfully",
-    "unhideError": "Error while unhide claim"
+    "unhideError": "Error while unhide claim",
+    "reviewImageButton": "Review Image",
+    "openReportButton": "View Report"
 }

public/locales/pt/claim.json

@@ -38,5 +38,7 @@
     "hideSuccess": "Afirmação escondida com sucesso",
     "hideError": "Erro ao esconder a afirmação",
     "unhideSuccess": "Afirmação pública com sucesso",
-    "unhideError": "Erro ao mostrar a afirmação"
+    "unhideError": "Erro ao mostrar a afirmação",
+    "reviewImageButton": "Revisar Imagem",
+    "openReportButton": "Ver Relatório"
 }

src/components/Claim/ClaimContentDisplay.tsx

@@ -1,10 +1,6 @@
 import React from "react";
-import { useDispatch } from "react-redux";
 
-import ImageApi from "../../api/image";
-import actions from "../../store/actions";
-import { useAppSelector } from "../../store/store";
-import ReviewedImage from "../ReviewedImage";
+import ClaimImageBody from "./ClaimImageBody";
 import ClaimSpeechBody from "./ClaimSpeechBody";
 
 interface ClaimContentDisplayProps {
@@ -22,35 +18,20 @@ const ClaimContentDisplay: React.FC<ClaimContentDisplayProps> = ({
     showHighlights,
     dispatchPersonalityAndClaim,
 }) => {
-    const { selectedContent } = useAppSelector((state) => state);
-    const dispatch = useDispatch();
     const imageUrl = claimContent.content;
     const paragraphs = Array.isArray(claimContent)
         ? claimContent
         : [claimContent];
 
-    const handleClickOnImage = () => {
-        ImageApi.getImageTopicsByDatahash(selectedContent?.data_hash)
-            .then((image) => {
-                dispatch(actions.setSelectContent(image));
-            })
-            .catch((e) => e);
-        dispatch(actions.openReviewDrawer());
-    };
-
     return (
         <>
             {isImage ? (
-                <div
-                    style={{ paddingBottom: "20px", cursor: "pointer" }}
-                    onClick={handleClickOnImage}
-                >
-                    <ReviewedImage
-                        imageUrl={imageUrl}
-                        title={title}
-                        classification={claimContent?.props?.classification}
-                    />
-                </div>
+                <ClaimImageBody
+                    imageUrl={imageUrl}
+                    title={title}
+                    classification={claimContent?.props?.classification}
+                    dataHash={claimContent?.data_hash}
+                />
             ) : (
                 <cite style={{ fontStyle: "normal" }}>
                     <ClaimSpeechBody

src/components/Claim/ClaimImageBody.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { useTranslation } from "next-i18next";
+import { useDispatch } from "react-redux";
+
+import ImageApi from "../../api/image";
+import actions from "../../store/actions";
+import { useAppSelector } from "../../store/store";
+import ReviewedImage from "../ReviewedImage";
+import { ClassificationEnum } from "../../types/enums";
+import AletheiaButton from "../Button";
+
+interface ClaimImageBodyProps {
+    imageUrl: string;
+    title: string;
+    classification?: keyof typeof ClassificationEnum;
+    dataHash: string;
+}
+
+const ClaimImageBody: React.FC<ClaimImageBodyProps> = ({
+    imageUrl,
+    title,
+    classification,
+    dataHash,
+}) => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const { selectedContent } = useAppSelector((state) => state);
+
+    const handleClickOnButton = (): void => {
+        ImageApi.getImageTopicsByDatahash(
+            dataHash || selectedContent?.data_hash
+        )
+            .then((image) => {
+                dispatch(actions.setSelectContent(image));
+            })
+            .catch((error) => {
+                console.error("Failed to fetch image topics:", error);
+            });
+        dispatch(actions.openReviewDrawer());
+    };
+
+    const getButtonText = (): string => {
+        if (classification) {
+            return t("claim:openReportButton");
+        }
+        return t("claim:reviewImageButton");
+    };
+
+    return (
+        <Box
+            sx={{
+                paddingBottom: "20px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "100%",
+                }}
+            >
+                <ReviewedImage
+                    imageUrl={imageUrl}
+                    title={title}
+                    classification={classification}
+                />
+            </Box>
+            <Box
+                sx={{ display: "flex", justifyContent: "center", marginTop: 2 }}
+            >
+                <AletheiaButton
+                    onClick={handleClickOnButton}
+                    style={{
+                        textTransform: "none",
+                        fontWeight: 600,
+                        padding: "10px 24px",
+                    }}
+                >
+                    {getButtonText()}
+                </AletheiaButton>
+            </Box>
+        </Box>
+    );
+};
+
+export default ClaimImageBody;

src/components/Claim/ClaimView.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material"
+import { Grid, Typography } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
 import { ContentModelEnum, Roles, TargetModel } from "../../types/enums";
@@ -67,7 +67,8 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => {
                         )}
                         <section>
                             <ClaimInfo isImage={isImage} date={claim?.date} />
-                            <Grid container
+                            <Grid
+                                container
                                 style={{ paddingBottom: "15px" }}
                                 justifyContent="center"
                             >
@@ -94,22 +95,37 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => {
                                         }
                                     />
                                 </Grid>
-                                <AffixButtonV2
-                                    Children={
-                                        <ToggleSection
-                                            defaultValue={showHighlights}
-                                            onChange={(e) => {
-                                                setShowHighlights(e.target.value);
-                                            }}
-                                            labelTrue={t("claim:showHighlightsButton")}
-                                            labelFalse={t("claim:hideHighlightsButton")}
-                                        />
-                                    }
-                                />
+                                {!isImage && (
+                                    <AffixButtonV2
+                                        Children={
+                                            <ToggleSection
+                                                defaultValue={showHighlights}
+                                                onChange={(e) => {
+                                                    setShowHighlights(
+                                                        e.target.value
+                                                    );
+                                                }}
+                                                labelTrue={t(
+                                                    "claim:showHighlightsButton"
+                                                )}
+                                                labelFalse={t(
+                                                    "claim:hideHighlightsButton"
+                                                )}
+                                            />
+                                        }
+                                    />
+                                )}
                             </Grid>
                             {sources.length > 0 && (
                                 <>
-                                    <Typography variant="h4" style={{ fontSize: 24, fontFamily: "initial", fontWeight: 700 }}>
+                                    <Typography
+                                        variant="h4"
+                                        style={{
+                                            fontSize: 24,
+                                            fontFamily: "initial",
+                                            fontWeight: 700,
+                                        }}
+                                    >
                                         {t("claim:sourceSectionTitle")}
                                     </Typography>
                                     <ClaimSourceList

src/components/ReviewedImage.tsx

@@ -1,9 +1,35 @@
 /* eslint-disable @next/next/no-img-element */
 import React, { useEffect, useRef, useState } from "react";
 import lottie from "lottie-web";
-import { generateLottie } from "../lottiefiles/generateLottie";
+import { generateLottie, LottieAnimation } from "../lottiefiles/generateLottie";
 import { ClassificationEnum } from "../types/enums";
 
+interface ImageDimensions {
+    width: number;
+    height: number;
+}
+
+const getImageMeta = (url: string): Promise<HTMLImageElement> =>
+    new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
+        img.src = url;
+    });
+
+const getDimensions = async (imageData: string): Promise<ImageDimensions> => {
+    try {
+        const image = await getImageMeta(imageData);
+        const width = image.naturalWidth;
+        const height = image.naturalHeight;
+
+        return { width, height };
+    } catch (error) {
+        console.error("Failed to load image dimensions:", error);
+        return { width: 500, height: 500 };
+    }
+};
+
 const ReviewedImage = ({
     imageUrl,
     title = "",
@@ -13,49 +39,12 @@ const ReviewedImage = ({
     title: string;
     classification?: keyof typeof ClassificationEnum;
 }) => {
-    const [animation, setAnimation] = useState<any>(null);
-    const container = useRef(null);
-    const getImageMeta = (url) =>
-        new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => resolve(img);
-            img.onerror = (err) => reject(err);
-            img.src = url;
-        });
+    const [animation, setAnimation] = useState<LottieAnimation | null>(null);
+    const container = useRef<HTMLDivElement>(null);
 
-    // get the natural width and height of the image or fit it to the window
-    const getDimensions = async (imageData: any) => {
-        try {
-            const image = await getImageMeta(imageData);
-
-            // @ts-ignore
-            let { naturalWidth: width, naturalHeight: height } = image;
-            const windowHeight = window.innerHeight;
-            // Responsive width calculation
-            // Mobile: use 90% of viewport for better display
-            // Desktop: use 1.5 ratio (was 2.25, now larger images)
-            const isMobile = window.innerWidth < 768;
-            const windowWidth = isMobile
-                ? window.innerWidth * 0.9
-                : window.innerWidth / 1.5;
-
-            const aspectRatio = width / height;
-
-            if (height > windowHeight) {
-                height = windowHeight;
-                width = height * aspectRatio;
-            }
-            if (width > windowWidth) {
-                width = windowWidth;
-                height = width / aspectRatio;
-            }
-            return { width, height };
-        } catch (error) {
-            console.log(error);
-            return { width: 500, height: 500 };
-        }
-    };
     useEffect(() => {
+        if (!classification) return;
+
         getDimensions(imageUrl).then(({ width, height }) => {
             const newAnimation = generateLottie(
                 classification,
@@ -65,7 +54,7 @@ const ReviewedImage = ({
             );
             setAnimation(newAnimation);
         });
-    }, []);
+    }, [imageUrl, classification]);
 
     useEffect(() => {
         if (classification) {
@@ -76,8 +65,7 @@ const ReviewedImage = ({
                 autoplay: false,
                 animationData: animation,
                 rendererSettings: {
-                    preserveAspectRatio: "xMinYMin meet",
-                    viewBoxSize: "10 10",
+                    preserveAspectRatio: "xMidYMid meet",
                 },
             });
             lottie.setSpeed(1.5);
@@ -105,9 +93,13 @@ const ReviewedImage = ({
                             onMouseEnter={handleMouseEnter}
                             onMouseLeave={handleMouseLeave}
                             ref={container}
+                            aria-hidden="true"
                             style={{
                                 maxWidth: "100%",
                                 maxHeight: "100vh",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
                             }}
                         />
                     )}
@@ -119,6 +111,8 @@ const ReviewedImage = ({
                     style={{
                         maxWidth: "100%",
                         maxHeight: "100vh",
+                        display: "block",
+                        margin: "0 auto",
                     }}
                 />
             )}