Add flags for performer countries (#508)

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",

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<IPerformerCardProps> = ({
   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<IPerformerCardProps> = ({
       <div className="card-section">
         <h5 className="text-truncate">{performer.name}</h5>
         {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
+        {countryISO && (
+          <span className={`flag-icon flag-icon-${countryISO.toLowerCase()}`} />
+        )}
         <div className="text-muted">
           Stars in {performer.scene_count}{" "}
           <Link to={NavUtils.makePerformerScenesUrl(performer)}>scenes</Link>.

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 (
+        <span
+          className={`mr-2 flag-icon flag-icon-${countryISO.toLowerCase()}`}
+        />
+      );
+    return undefined;
+  };
+
   function renderTabs() {
     function renderEditPanel() {
       return (
@@ -254,6 +265,7 @@ export const Performer: React.FC = () => {
         <div className="row">
           <div className="performer-head col-6 col-sm-12">
             <h2>
+              {maybeRenderFlag()}
               {performer.name}
               {renderIcons()}
             </h2>

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;

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;

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<string, string> = {
+  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;

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";

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"