Root: ui|v2.5|src|components|Images: ImageCard.tsx

ImageCard.tsx

The ImageCard.tsx file contains a React component responsible for rendering a card representing an image. This component is used to display image thumbnails with various details such as rating, date, description, tags, performers, galleries, and organization status.

1. Component Props:

   • IImageCardProps interface defines the props expected by the ImageCard component.
   • Props include image (the image data), containerWidth (width of the container), selecting (flag indicating whether the card is being selected), selected (flag indicating whether the card is selected), zoomIndex (index indicating the zoom level), onSelectedChanged (callback function invoked when the selection state changes), and onPreview (callback function invoked when preview button is clicked).

2. Card Rendering:

   • Utilizes the GridCard component from "src/components/Shared/GridCard/GridCard" to render the main layout of the card.
   • Displays the image thumbnail along with a rating banner.
   • Renders additional details such as date and description using <span> and <TruncatedText> components.
   • Includes overlays and popovers for displaying studio information and various buttons for tags, performers, counters, galleries, and organization status.

3. Media Handling:

   • Determines whether the image is a video or not based on the source URL.
   • Renders the appropriate <img> or <video> element for displaying the image or video thumbnail.

4. Popover and Overlay Rendering:

   • Dynamically renders popover buttons for tags, performers, counters, galleries, and organization status based on the image data.
   • Includes overlays for displaying studio information.

5. State Management:

   • Uses useState hook to manage the card width (cardWidth) based on the container width and zoom index.
   • Updates the card width dynamically when the container width or zoom index changes using the useEffect hook.

Example Modification:

Let's say you want to add a button to download the image. Here's how you can modify the ImageCard component:

import { faDownload } from "@fortawesome/free-solid-svg-icons";

// Inside the maybeRenderPopoverButtonGroup function, add the following button:
<Button className="minimal" onClick={() => downloadImage(props.image)}>
  <Icon icon={faDownload} />
</Button>

// Add the downloadImage function:
function downloadImage(image: GQL.SlimImageDataFragment) {
  const source = image.paths.full ?? "";
  const link = document.createElement("a");
  link.href = source;
  link.download = "image.jpg";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

Explanation:

1. Download Button:

• Adds a new button with a download icon inside the maybeRenderPopoverButtonGroup function.
• The button triggers the downloadImage function when clicked, passing the image data as a parameter.

2. downloadImage Function:

• Defines a function named downloadImage that takes an image object as a parameter.
• Constructs a download link using the image source URL.
• Sets the download attribute to specify the default file name for the downloaded image.
• Appends the link to the document body, triggers a click event on the link to start the download, and removes the link from the document body afterward.

3. Integration with UI:

• When the user clicks the download button, the downloadImage function is called, initiating the download of the image associated with the card.

This modification enhances the ImageCard component by adding support for downloading the image, providing users with the ability to save the image directly from the card.