diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerStashBoxModal.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerStashBoxModal.tsx index 5b508ea1f95..b171e00f663 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerStashBoxModal.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerStashBoxModal.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from "react"; -import { Button, Form } from "react-bootstrap"; -import { useIntl } from "react-intl"; +import { Form, Row, Col, Badge } from "react-bootstrap"; +import { FormattedMessage, useIntl } from "react-intl"; import * as GQL from "src/core/generated-graphql"; import { ModalComponent } from "src/components/Shared/Modal"; @@ -8,8 +8,135 @@ import { LoadingIndicator } from "src/components/Shared/LoadingIndicator"; import { stashboxDisplayName } from "src/utils/stashbox"; import { useDebouncedSetState } from "src/hooks/debounce"; +import { TruncatedText } from "src/components/Shared/TruncatedText"; +import { stringToGender } from "src/utils/gender"; +import TextUtils from "src/utils/text"; +import GenderIcon from "src/components/Performers/GenderIcon"; +import { CountryFlag } from "src/components/Shared/CountryFlag"; + const CLASSNAME = "PerformerScrapeModal"; const CLASSNAME_LIST = `${CLASSNAME}-list`; +const CLASSNAME_LIST_CONTAINER = `${CLASSNAME_LIST}-container`; + +interface IPerformerSearchResultDetailsProps { + performer: GQL.ScrapedPerformerDataFragment; +} + +const PerformerSearchResultDetails: React.FC< + IPerformerSearchResultDetailsProps +> = ({ performer }) => { + function renderImage() { + if (performer.images && performer.images.length > 0) { + return ( +
+ +
+ ); + } + } + + function calculateAge() { + if (performer?.birthdate) { + // calculate the age from birthdate. In future, this should probably be + // provided by the server + return TextUtils.age(performer.birthdate, performer.death_date); + } + } + + function renderTags() { + if (performer.tags) { + return ( + + + {performer.tags?.map((tag) => ( + + {tag.name} + + ))} + + + ); + } + } + + function renderCountry() { + if (performer.country) { + return ( + + + + ); + } + } + + let age = calculateAge(); + + return ( +
+ + {renderImage()} +
+

+ {performer.name} + {performer.disambiguation && ( + + {` (${performer.disambiguation})`} + + )} +

+
+ {performer.gender && ( + + + + )} + {age && ( + + {`${age} `} + + + )} +
+ {renderCountry()} +
+
+ + + + + + {renderTags()} +
+ ); +}; + +export interface IPerformerSearchResult { + performer: GQL.ScrapedPerformerDataFragment; +} + +export const PerformerSearchResult: React.FC = ({ + performer, +}) => { + return ( +
+ +
+ ); +}; export interface IStashBox extends GQL.StashBox { index: number; @@ -48,6 +175,31 @@ const PerformerStashBoxModal: React.FC = ({ useEffect(() => inputRef.current?.focus(), []); + function renderResults() { + if (!performers) { + return; + } + + return ( +
+
+ +
+
    + {performers.map((p, i) => ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions, react/no-array-index-key +
  • onSelectPerformer(p)}> + +
  • + ))} +
+
+ ); + } + return ( = ({ ) : performers.length > 0 ? ( -
    - {performers.map((p) => ( -
  • - -
  • - ))} -
+ renderResults() ) : ( query !== "" &&
No results found.
)} diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss index cf356fd3c1d..4a0ec524ac2 100644 --- a/ui/v2.5/src/components/Performers/styles.scss +++ b/ui/v2.5/src/components/Performers/styles.scss @@ -158,13 +158,14 @@ .PerformerScrapeModal { &-list { - list-style-type: none; + list-style: none; max-height: 50vh; - overflow-x: auto; - padding-left: 1rem; + overflow-x: hidden; + overflow-y: auto; + padding-inline-start: 0; - .btn { - font-size: 1.2rem; + li { + cursor: pointer; } } } @@ -212,3 +213,13 @@ /* stylelint-enable */ padding-right: 0.5rem; } + +.performer-result .performer-details > span { + &::after { + content: " • "; + } + + &:last-child::after { + content: ""; + } +} diff --git a/ui/v2.5/src/locales/en-GB.json b/ui/v2.5/src/locales/en-GB.json index 30b12fee8e5..8e5263ea9d7 100644 --- a/ui/v2.5/src/locales/en-GB.json +++ b/ui/v2.5/src/locales/en-GB.json @@ -888,6 +888,7 @@ "video_previews_tooltip": "Video previews which play when hovering over a scene" }, "scenes_found": "{count} scenes found", + "performers_found": "{count} performers found", "scrape_entity_query": "{entity_type} Scrape Query", "scrape_entity_title": "{entity_type} Scrape Results", "scrape_results_existing": "Existing",