Gallery card patched component (#5880)

* Gallery card patched component
* Define in pluginApi.d.ts

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

@@ -16,6 +16,7 @@ import { StudioOverlay } from "../Shared/GridCard/StudioOverlay";
 import { GalleryPreviewScrubber } from "./GalleryPreviewScrubber";
 import cx from "classnames";
 import { useHistory } from "react-router-dom";
+import { PatchComponent } from "src/patch";
 
 interface IGalleryPreviewProps {
   gallery: GQL.SlimGalleryDataFragment;
@@ -53,7 +54,7 @@ export const GalleryPreview: React.FC<IGalleryPreviewProps> = ({
   );
 };
 
-interface IProps {
+interface IGalleryCardProps {
   gallery: GQL.SlimGalleryDataFragment;
   cardWidth?: number;
   selecting?: boolean;
@@ -62,9 +63,9 @@ interface IProps {
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
 }
 
-export const GalleryCard: React.FC<IProps> = (props) => {
-  const history = useHistory();
-
+const GalleryCardPopovers = PatchComponent(
+  "GalleryCard.Popovers",
+  (props: IGalleryCardProps) => {
     function maybeRenderScenePopoverButton() {
       if (props.gallery.scenes.length === 0) return;
 
@@ -171,14 +172,39 @@ export const GalleryCard: React.FC<IProps> = (props) => {
       }
     }
 
+    return <>{maybeRenderPopoverButtonGroup()}</>;
+  }
+);
+
+const GalleryCardDetails = PatchComponent(
+  "GalleryCard.Details",
+  (props: IGalleryCardProps) => {
+    return (
+      <div className="gallery-card__details">
+        <span className="gallery-card__date">{props.gallery.date}</span>
+        <TruncatedText
+          className="gallery-card__description"
+          text={props.gallery.details}
+          lineCount={3}
+        />
+      </div>
+    );
+  }
+);
+
+const GalleryCardOverlays = PatchComponent(
+  "GalleryCard.Overlays",
+  (props: IGalleryCardProps) => {
+    return <StudioOverlay studio={props.gallery.studio} />;
+  }
+);
+
+const GalleryCardImage = PatchComponent(
+  "GalleryCard.Image",
+  (props: IGalleryCardProps) => {
+    const history = useHistory();
+
     return (
-    <GridCard
-      className={`gallery-card zoom-${props.zoomIndex}`}
-      url={`/galleries/${props.gallery.id}`}
-      width={props.cardWidth}
-      title={galleryTitle(props.gallery)}
-      linkClassName="gallery-card-header"
-      image={
       <>
         <GalleryPreview
           gallery={props.gallery}
@@ -188,22 +214,28 @@ export const GalleryCard: React.FC<IProps> = (props) => {
         />
         <RatingBanner rating={props.gallery.rating100} />
       </>
+    );
   }
-      overlays={<StudioOverlay studio={props.gallery.studio} />}
-      details={
-        <div className="gallery-card__details">
-          <span className="gallery-card__date">{props.gallery.date}</span>
-          <TruncatedText
-            className="gallery-card__description"
-            text={props.gallery.details}
-            lineCount={3}
-          />
-        </div>
-      }
-      popovers={maybeRenderPopoverButtonGroup()}
+);
+
+export const GalleryCard = PatchComponent(
+  "GalleryCard",
+  (props: IGalleryCardProps) => {
+    return (
+      <GridCard
+        className={`gallery-card zoom-${props.zoomIndex}`}
+        url={`/galleries/${props.gallery.id}`}
+        width={props.cardWidth}
+        title={galleryTitle(props.gallery)}
+        linkClassName="gallery-card-header"
+        image={<GalleryCardImage {...props} />}
+        overlays={<GalleryCardOverlays {...props} />}
+        details={<GalleryCardDetails {...props} />}
+        popovers={<GalleryCardPopovers {...props} />}
         selected={props.selected}
         selecting={props.selecting}
         onSelectedChanged={props.onSelectedChanged}
       />
     );
-};
+  }
+);

ui/v2.5/src/docs/en/Manual/UIPluginApi.md

@@ -154,6 +154,11 @@ Returns `void`.
 - `ExternalLinksButton`
 - `FolderSelect`
 - `FrontPage`
+- `GalleryCard`
+- `GalleryCard.Details`
+- `GalleryCard.Image`
+- `GalleryCard.Overlays`
+- `GalleryCard.Popovers`
 - `GalleryIDSelect`
 - `GallerySelect`
 - `GallerySelect.sort`

ui/v2.5/src/pluginApi.d.ts

@@ -715,6 +715,11 @@ declare namespace PluginApi {
     "ScenePage.TabContent": React.FC<any>;
     ScenePlayer: React.FC<any>;
     FrontPage: React.FC<any>;
+    GalleryCard: React.FC<any>;
+    "GalleryCard.Details": React.FC<any>;
+    "GalleryCard.Image": React.FC<any>;
+    "GalleryCard.Overlays": React.FC<any>;
+    "GalleryCard.Popovers": React.FC<any>;
   };
   type PatchableComponentNames = keyof typeof components | string;
   namespace utils {