New: External link to TMDb for Cast/Crew

Fixes #9667
Closes #9668

frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js

@@ -1,8 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, kinds, sizes } from 'Helpers/Props';
 import MovieHeadshot from 'Movie/MovieHeadshot';
 import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from '../MovieCreditPoster.css';
 
 class MovieCastPoster extends Component {
@@ -52,6 +58,7 @@ class MovieCastPoster extends Component {
 
   render() {
     const {
+      tmdbId,
       personName,
       character,
       images,
@@ -83,15 +90,35 @@ class MovieCastPoster extends Component {
         style={contentStyle}
       >
         <div className={styles.posterContainer}>
-          <div className={styles.controls}>
+          <div className={styles.toggleMonitoredContainer}>
             <MonitorToggleButton
-              className={styles.action}
+              className={styles.monitorToggleButton}
               monitored={monitored}
               size={20}
               onPress={importListId > 0 ? this.onEditImportListPress : this.onAddImportListPress}
             />
           </div>
 
+          <Label className={styles.controls}>
+            <span className={styles.externalLinks}>
+              <Popover
+                anchor={<Icon name={icons.EXTERNAL_LINK} size={12} />}
+                title={translate('Links')}
+                body={
+                  <Link to={`https://www.themoviedb.org/person/${tmdbId}`}>
+                    <Label
+                      className={styles.externalLinkLabel}
+                      kind={kinds.INFO}
+                      size={sizes.LARGE}
+                    >
+                      {translate('TMDb')}
+                    </Label>
+                  </Link>
+                }
+              />
+            </span>
+          </Label>
+
           <div
             style={elementStyle}
           >

frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js

@@ -1,8 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, kinds, sizes } from 'Helpers/Props';
 import MovieHeadshot from 'Movie/MovieHeadshot';
 import EditImportListModalConnector from 'Settings/ImportLists/ImportLists/EditImportListModalConnector';
+import translate from 'Utilities/String/translate';
 import styles from '../MovieCreditPoster.css';
 
 class MovieCrewPoster extends Component {
@@ -52,6 +58,7 @@ class MovieCrewPoster extends Component {
 
   render() {
     const {
+      tmdbId,
       personName,
       job,
       images,
@@ -83,15 +90,35 @@ class MovieCrewPoster extends Component {
         style={contentStyle}
       >
         <div className={styles.posterContainer}>
-          <div className={styles.controls}>
+          <div className={styles.toggleMonitoredContainer}>
             <MonitorToggleButton
-              className={styles.action}
+              className={styles.monitorToggleButton}
               monitored={monitored}
               size={20}
               onPress={importListId > 0 ? this.onEditImportListPress : this.onAddImportListPress}
             />
           </div>
 
+          <Label className={styles.controls}>
+            <span className={styles.externalLinks}>
+              <Popover
+                anchor={<Icon name={icons.EXTERNAL_LINK} size={12} />}
+                title={translate('Links')}
+                body={
+                  <Link to={`https://www.themoviedb.org/person/${tmdbId}`}>
+                    <Label
+                      className={styles.externalLinkLabel}
+                      kind={kinds.INFO}
+                      size={sizes.LARGE}
+                    >
+                      {translate('TMDb')}
+                    </Label>
+                  </Link>
+                }
+              />
+            </span>
+          </Label>
+
           <div
             style={elementStyle}
           >

frontend/src/Movie/Details/Credits/MovieCreditPoster.css

@@ -1,13 +1,17 @@
 $hoverScale: 1.05;
 
 .content {
-  border-radius: '5px';
   transition: all 200ms ease-in;
 
   &:hover {
     z-index: 2;
     box-shadow: 0 0 12px var(--black);
     transition: all 200ms ease-in;
+
+    .controls {
+      opacity: 0.9;
+      transition: opacity 200ms linear 150ms;
+    }
   }
 }
 
@@ -44,13 +48,13 @@ $hoverScale: 1.05;
   font-size: $smallFontSize;
 }
 
-.controls {
+.toggleMonitoredContainer {
   position: absolute;
   top: 10px;
   z-index: 3;
 }
 
-.action {
+.monitorToggleButton {
   composes: toggleButton from '~Components/MonitorToggleButton.css';
 
   width: 25px;
@@ -61,8 +65,39 @@ $hoverScale: 1.05;
   }
 }
 
+.controls {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 3;
+  border-radius: 4px;
+  background-color: #707070;
+  color: var(--white);
+  font-size: $smallFontSize;
+  opacity: 0;
+  transition: opacity 0;
+}
+
+.action {
+  composes: button from '~Components/Link/IconButton.css';
+
+  &:hover {
+    color: var(--iconButtonHoverLightColor);
+  }
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .container {
     padding: 5px;
   }
 }
+
+.externalLinks {
+  margin: 0 2px;
+}
+
+.externalLinkLabel {
+  composes: label from '~Components/Label.css';
+
+  cursor: pointer;
+}

frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts

@@ -5,10 +5,14 @@ interface CssExports {
   'container': string;
   'content': string;
   'controls': string;
+  'externalLinkLabel': string;
+  'externalLinks': string;
+  'monitorToggleButton': string;
   'overlayTitle': string;
   'poster': string;
   'posterContainer': string;
   'title': string;
+  'toggleMonitoredContainer': string;
 }
 export const cssExports: CssExports;
 export default cssExports;