diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json index dbe20da7379..ab9f6ac16c2 100644 --- a/ui/v2.5/package.json +++ b/ui/v2.5/package.json @@ -39,9 +39,11 @@ "axios": "0.18.1", "bootstrap": "^4.4.1", "classnames": "^2.2.6", + "flag-icon-css": "^3.4.6", "formik": "^2.1.2", "graphql": "^14.5.8", "graphql-tag": "^2.10.1", + "i18n-iso-countries": "^5.2.0", "localforage": "1.7.3", "lodash": "^4.17.15", "query-string": "6.10.1", diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx index 811ae2fbd9e..d774736d8f9 100644 --- a/ui/v2.5/src/components/Performers/PerformerCard.tsx +++ b/ui/v2.5/src/components/Performers/PerformerCard.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Card } from "react-bootstrap"; import { Link } from "react-router-dom"; import * as GQL from "src/core/generated-graphql"; -import { NavUtils, TextUtils } from "src/utils"; +import { getCountryISO, NavUtils, TextUtils } from "src/utils"; interface IPerformerCardProps { performer: GQL.PerformerDataFragment; @@ -16,6 +16,8 @@ export const PerformerCard: React.FC = ({ const age = TextUtils.age(performer.birthdate, ageFromDate); const ageString = `${age} years old${ageFromDate ? " in this scene." : "."}`; + const countryISO = getCountryISO(performer.country); + function maybeRenderFavoriteBanner() { if (performer.favorite === false) { return; @@ -36,6 +38,9 @@ export const PerformerCard: React.FC = ({
{performer.name}
{age !== 0 ?
{ageString}
: ""} + {countryISO && ( + + )}
Stars in {performer.scene_count}{" "} scenes. diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index f737ad1c898..36da7e586c2 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx @@ -8,7 +8,7 @@ import * as GQL from "src/core/generated-graphql"; import { StashService } from "src/core/StashService"; import { Icon, LoadingIndicator } from "src/components/Shared"; import { useToast } from "src/hooks"; -import { TextUtils } from "src/utils"; +import { getCountryISO, TextUtils } from "src/utils"; import Lightbox from "react-images"; import { PerformerDetailsPanel } from "./PerformerDetailsPanel"; import { PerformerOperationsPanel } from "./PerformerOperationsPanel"; @@ -94,6 +94,17 @@ export const Performer: React.FC = () => { history.push("/performers"); } + const maybeRenderFlag = () => { + const countryISO = getCountryISO(performer.country); + if (countryISO) + return ( + + ); + return undefined; + }; + function renderTabs() { function renderEditPanel() { return ( @@ -254,6 +265,7 @@ export const Performer: React.FC = () => {

+ {maybeRenderFlag()} {performer.name} {renderIcons()}

diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss index 7575b926ad6..cbdbb8ea0b0 100644 --- a/ui/v2.5/src/components/Performers/styles.scss +++ b/ui/v2.5/src/components/Performers/styles.scss @@ -56,6 +56,16 @@ } } +.performer-card { + .flag-icon { + bottom: 1rem; + height: 2rem; + position: absolute; + right: 1rem; + width: 3rem; + } +} + .card { &.performer-card { padding: 0 0 1rem 0; diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss index 0a3b2c7e729..bacd626aaef 100755 --- a/ui/v2.5/src/index.scss +++ b/ui/v2.5/src/index.scss @@ -13,6 +13,7 @@ @import "src/components/Shared/styles.scss"; @import "src/components/Tags/styles.scss"; @import "src/components/Wall/styles.scss"; +@import "../node_modules/flag-icon-css/css/flag-icon.min.css"; html { font-size: 14px; diff --git a/ui/v2.5/src/utils/country.ts b/ui/v2.5/src/utils/country.ts new file mode 100644 index 00000000000..f19d4fb03bc --- /dev/null +++ b/ui/v2.5/src/utils/country.ts @@ -0,0 +1,25 @@ +import Countries from "i18n-iso-countries"; +import english from "i18n-iso-countries/langs/en.json"; + +Countries.registerLocale(english); + +const fuzzyDict: Record = { + USA: "US", + "United States": "US", + America: "US", + American: "US", + Czechia: "CZ", + England: "GB", + "United Kingdom": "GB", + Russia: "RU", +}; + +const getISOCode = (country: string | null | undefined) => { + if (!country) return null; + + if (fuzzyDict[country]) return fuzzyDict[country]; + + return Countries.getAlpha2Code(country, "en"); +}; + +export default getISOCode; diff --git a/ui/v2.5/src/utils/index.ts b/ui/v2.5/src/utils/index.ts index 5fc853d12b9..9afad2b57be 100644 --- a/ui/v2.5/src/utils/index.ts +++ b/ui/v2.5/src/utils/index.ts @@ -7,3 +7,4 @@ export { default as DurationUtils } from "./duration"; export { default as JWUtils } from "./jwplayer"; export { default as SessionUtils } from "./session"; export { default as flattenMessages } from "./flattenMessages"; +export { default as getCountryISO } from "./country"; diff --git a/ui/v2.5/yarn.lock b/ui/v2.5/yarn.lock index 0e3d5bf9c65..08f033e222c 100644 --- a/ui/v2.5/yarn.lock +++ b/ui/v2.5/yarn.lock @@ -5002,6 +5002,11 @@ detect-port-alt@1.1.6: address "^1.0.1" debug "^2.6.0" +diacritics@1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/diacritics/-/diacritics-1.3.0.tgz#3efa87323ebb863e6696cebb0082d48ff3d6f7a1" + integrity sha1-PvqHMj67hj5mls67AILUj/PW96E= + diff-sequences@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5" @@ -6109,6 +6114,11 @@ find-up@^3.0.0: dependencies: locate-path "^3.0.0" +flag-icon-css@^3.4.6: + version "3.4.6" + resolved "https://registry.yarnpkg.com/flag-icon-css/-/flag-icon-css-3.4.6.tgz#7e51099c85648c65f86d9ebb9c0ec6f5d8826714" + integrity sha512-rF69rt19Hr63SRQTiPBzQABaYB20LAgZhDkr/AxqSdgmCIN+tC5PRMz56Y0gxehFXJmdRwv55+GMi7R1fCRTwg== + flat-cache@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0" @@ -6970,6 +6980,13 @@ hyphenate-style-name@^1.0.1: resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== +i18n-iso-countries@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/i18n-iso-countries/-/i18n-iso-countries-5.2.0.tgz#3384c5b91c09b76035c7726e54fd941f9b61e9e1" + integrity sha512-U14vanOZJrNNm6yAL26qyZcOhlyJLmondS4rSWzT+JQzotkyTAkRv8mrJzzJf4EewqrRBVtzqFAH0PnSJm2AQw== + dependencies: + diacritics "1.3.0" + iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -11154,7 +11171,7 @@ prop-types-extra@^1.1.0: react-is "^16.3.2" warning "^3.0.0" -prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2: +prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -11426,13 +11443,6 @@ react-fast-compare@^2.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== -react-hotkeys@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f" - integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q== - dependencies: - prop-types "^15.6.1" - react-images@0.5.19: version "0.5.19" resolved "https://registry.yarnpkg.com/react-images/-/react-images-0.5.19.tgz#9339570029e065f9f28a19f03fdb5d9d5aa109d3"