mirror
/
Radarr
mirror of https://github.com/Radarr/Radarr
1
0
Fork 0
Code Issues Releases Wiki Activity

New: External link to TMDb for Cast/Crew 

Fixes #9667
Closes #9668
This commit is contained in:
Bogdan 2024-01-24 14:03:56 +02:00
parent 83d437cbb3
commit 82fb355930
4 changed files with 100 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
View File

@ -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}
>

31
frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js
View File

@ -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}
>

41
frontend/src/Movie/Details/Credits/MovieCreditPoster.css
View File

@ -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;
}

4
frontend/src/Movie/Details/Credits/MovieCreditPoster.css.d.ts vendored
View File

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