Use primary tag name as marker title where title is empty (#2994)

* Fix display of marker popovers
* Use primary tag as title where marker title empty

graphql/documents/data/scene-slim.graphql

@@ -31,6 +31,10 @@ fragment SlimSceneData on Scene {
     id
     title
     seconds
+    primary_tag {
+      id
+      name
+    }
   }
 
   galleries {

ui/v2.5/src/components/Scenes/SceneDetails/PrimaryTags.tsx

@@ -3,6 +3,7 @@ import { FormattedMessage } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { Button, Badge, Card } from "react-bootstrap";
 import TextUtils from "src/utils/text";
+import { markerTitle } from "src/core/markers";
 
 interface IPrimaryTags {
   sceneMarkers: GQL.SceneMarkerDataFragment[];
@@ -40,7 +41,7 @@ export const PrimaryTags: React.FC<IPrimaryTags> = ({
           <hr />
           <div className="row">
             <Button variant="link" onClick={() => onClickMarker(marker)}>
-              {marker.title}
+              {markerTitle(marker)}
             </Button>
             <Button
               variant="link"

ui/v2.5/src/components/Shared/TagLink.tsx

@@ -4,7 +4,6 @@ import { Link } from "react-router-dom";
 import cx from "classnames";
 import {
   PerformerDataFragment,
-  SceneMarkerDataFragment,
   TagDataFragment,
   MovieDataFragment,
   SceneDataFragment,
@@ -15,6 +14,7 @@ import { objectTitle } from "src/core/files";
 import { galleryTitle } from "src/core/galleries";
 import * as GQL from "src/core/generated-graphql";
 import { TagPopover } from "../Tags/TagPopover";
+import { markerTitle } from "src/core/markers";
 
 interface IFile {
   path: string;
@@ -26,11 +26,16 @@ interface IGallery {
   title: GQL.Maybe<string>;
 }
 
+type SceneMarkerFragment = Pick<GQL.SceneMarker, "id" | "title" | "seconds"> & {
+  scene: Pick<GQL.Scene, "id">;
+  primary_tag: Pick<GQL.Tag, "id" | "name">;
+};
+
 interface IProps {
   tag?: Partial<TagDataFragment>;
   tagType?: "performer" | "scene" | "gallery" | "image";
   performer?: Partial<PerformerDataFragment>;
-  marker?: Partial<SceneMarkerDataFragment>;
+  marker?: SceneMarkerFragment;
   movie?: Partial<MovieDataFragment>;
   scene?: Partial<Pick<SceneDataFragment, "id" | "title" | "files">>;
   gallery?: Partial<IGallery>;
@@ -67,9 +72,9 @@ export const TagLink: React.FC<IProps> = (props: IProps) => {
     title = props.movie.name || "";
   } else if (props.marker) {
     link = NavUtils.makeSceneMarkerUrl(props.marker);
-    title = `${
+    title = `${markerTitle(props.marker)} - ${TextUtils.secondsToTimestamp(
-      props.marker.title || props.marker.primary_tag?.name || ""
+      props.marker.seconds || 0
-    } - ${TextUtils.secondsToTimestamp(props.marker.seconds || 0)}`;
+    )}`;
   } else if (props.gallery) {
     link = `/galleries/${props.gallery.id}`;
     title = galleryTitle(props.gallery);

ui/v2.5/src/components/Wall/WallItem.tsx

@@ -5,6 +5,7 @@ import { TextUtils, NavUtils } from "src/utils";
 import cx from "classnames";
 import { SceneQueue } from "src/models/sceneQueue";
 import { ConfigurationContext } from "src/hooks/Config";
+import { markerTitle } from "src/core/markers";
 
 interface IWallItemProps {
   index?: number;
@@ -182,12 +183,10 @@ export const WallItem: React.FC<IWallItemProps> = (props: IWallItemProps) => {
   const renderText = () => {
     if (!showTextContainer) return;
 
-    const markerTitle = props.sceneMarker?.title;
-
     const title = props.sceneMarker
-      ? `${
+      ? `${markerTitle(props.sceneMarker)} - ${TextUtils.secondsToTimestamp(
-          markerTitle ? `${markerTitle} - ` : ""
+          props.sceneMarker.seconds
-        }${TextUtils.secondsToTimestamp(props.sceneMarker.seconds)}`
+        )}`
       : props.scene?.title ?? "";
     const tags = props.sceneMarker
       ? [props.sceneMarker.primary_tag, ...props.sceneMarker.tags]

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

@@ -0,0 +1,17 @@
+import { SceneMarker, Tag } from "./generated-graphql";
+
+type SceneMarkerFragment = Pick<SceneMarker, "id" | "title"> & {
+  primary_tag: Pick<Tag, "id" | "name">;
+};
+
+export function markerTitle(s: SceneMarkerFragment) {
+  if (s.title) {
+    return s.title;
+  }
+
+  if (s.primary_tag?.name) {
+    return s.primary_tag?.name;
+  }
+
+  return "";
+}

ui/v2.5/src/utils/navigation.ts

@@ -264,9 +264,11 @@ const makeTagImagesUrl = (tag: Partial<GQL.TagDataFragment>) => {
   return `/images?${filter.makeQueryParameters()}`;
 };
 
-const makeSceneMarkerUrl = (
+type SceneMarkerDataFragment = Pick<GQL.SceneMarker, "id" | "seconds"> & {
-  sceneMarker: Partial<GQL.SceneMarkerDataFragment>
+  scene: Pick<GQL.Scene, "id">;
-) => {
+};
+
+const makeSceneMarkerUrl = (sceneMarker: SceneMarkerDataFragment) => {
   if (!sceneMarker.id || !sceneMarker.scene) return "#";
   return `/scenes/${sceneMarker.scene.id}?t=${sceneMarker.seconds}`;
 };