diff --git a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
index 381d3b2fb..e1cebf9f7 100644
--- a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
+++ b/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}
>
-
+
0 ? this.onEditImportListPress : this.onAddImportListPress}
/>
+
+
diff --git a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js b/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js
index 2cb5d9185..284d30637 100644
--- a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js
+++ b/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}
>
-
+
0 ? this.onEditImportListPress : this.onAddImportListPress}
/>
+
+
+ }
+ title={translate('Links')}
+ body={
+
+
+ {translate('TMDb')}
+
+
+ }
+ />
+
+
+
diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css
index 0b9bfeea9..4b9587427 100644
--- a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css
+++ b/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;
+}
diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts b/frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts
index d23790117..4a2587043 100644
--- a/frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts
+++ b/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;