Support markers on the front page (#6065)

ui/v2.5/src/components/FrontPage/Control.tsx

@@ -12,6 +12,7 @@ import { PerformerRecommendationRow } from "../Performers/PerformerRecommendatio
 import { SceneRecommendationRow } from "../Scenes/SceneRecommendationRow";
 import { StudioRecommendationRow } from "../Studios/StudioRecommendationRow";
 import { TagRecommendationRow } from "../Tags/TagRecommendationRow";
+import { SceneMarkerRecommendationRow } from "../Scenes/SceneMarkerRecommendationRow";
 
 interface IFilter {
   mode: GQL.FilterMode;
@@ -84,6 +85,14 @@ const RecommendationRow: React.FC<IFilter> = ({ mode, filter, header }) => {
           header={header}
         />
       );
+    case GQL.FilterMode.SceneMarkers:
+      return (
+        <SceneMarkerRecommendationRow
+          isTouch={isTouch}
+          filter={filter}
+          header={header}
+        />
+      );
     default:
       return <></>;
   }

ui/v2.5/src/components/FrontPage/FrontPageConfig.tsx

@@ -93,11 +93,7 @@ const AddContentModal: React.FC<IAddSavedFilterModalProps> = ({
     ].concat(
       candidates.findSavedFilters
         .filter((f) => {
-          // markers not currently supported
-          return (
-            f.mode !== GQL.FilterMode.SceneMarkers &&
-            !existingSavedFilterIDs.includes(f.id)
-          );
+          return !existingSavedFilterIDs.includes(f.id);
         })
         .map((f) => {
           return {

ui/v2.5/src/components/Scenes/SceneMarkerRecommendationRow.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { useFindSceneMarkers } from "src/core/StashService";
+import Slider from "@ant-design/react-slick";
+import { ListFilterModel } from "src/models/list-filter/filter";
+import { getSlickSliderSettings } from "src/core/recommendations";
+import { RecommendationRow } from "../FrontPage/RecommendationRow";
+import { FormattedMessage } from "react-intl";
+import { SceneMarkerCard } from "./SceneMarkerCard";
+
+interface IProps {
+  isTouch: boolean;
+  filter: ListFilterModel;
+  header: string;
+}
+
+export const SceneMarkerRecommendationRow: React.FC<IProps> = (props) => {
+  const result = useFindSceneMarkers(props.filter);
+  const cardCount = result.data?.findSceneMarkers.count;
+
+  if (!result.loading && !cardCount) {
+    return null;
+  }
+
+  return (
+    <RecommendationRow
+      className="scene-marker-recommendations"
+      header={props.header}
+      link={
+        <Link to={`/scenes/markers?${props.filter.makeQueryParameters()}`}>
+          <FormattedMessage id="view_all" />
+        </Link>
+      }
+    >
+      <Slider
+        {...getSlickSliderSettings(
+          cardCount ? cardCount : props.filter.itemsPerPage,
+          props.isTouch
+        )}
+      >
+        {result.loading
+          ? [...Array(props.filter.itemsPerPage)].map((i) => (
+              <div
+                key={`_${i}`}
+                className="scene-marker-skeleton skeleton-card"
+              ></div>
+            ))
+          : result.data?.findSceneMarkers.scene_markers.map((marker, index) => (
+              <SceneMarkerCard
+                key={marker.id}
+                marker={marker}
+                index={index}
+                zoomIndex={1}
+              />
+            ))}
+      </Slider>
+    </RecommendationRow>
+  );
+};

ui/v2.5/src/core/config.ts

@@ -165,5 +165,6 @@ export function generatePremadeFrontPageContent(intl: IntlShape) {
     recentlyAdded(intl, FilterMode.Groups, "groups"),
     recentlyAdded(intl, FilterMode.Studios, "studios"),
     recentlyAdded(intl, FilterMode.Performers, "performers"),
+    recentlyAdded(intl, FilterMode.SceneMarkers, "markers"),
   ];
 }