New: Add The TVDB link to library import search results

Closes #4996
This commit is contained in:
Mark McDowall 2022-04-24 12:30:20 -07:00
parent fa4b80b86f
commit 893a6744ac
4 changed files with 60 additions and 32 deletions

View File

@ -1,4 +1,5 @@
.series {
.container {
display: flex;
padding: 10px 20px;
width: 100%;
@ -6,3 +7,19 @@
background-color: $menuItemHoverBackgroundColor;
}
}
.series {
flex: 1 0 0;
overflow: hidden;
}
.tvdbLink {
composes: link from '~Components/Link/Link.css';
margin-left: auto;
color: $textColor;
}
.tvdbLinkIcon {
margin-left: 10px;
}

View File

@ -1,33 +1,28 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import React, { useCallback } from 'react';
import { icons } from 'Helpers/Props';
import Link from 'Components/Link/Link';
import Icon from 'Components/Icon';
import ImportSeriesTitle from './ImportSeriesTitle';
import styles from './ImportSeriesSearchResult.css';
class ImportSeriesSearchResult extends Component {
function ImportSeriesSearchResult(props) {
const {
tvdbId,
title,
year,
network,
isExistingSeries,
onPress
} = props;
//
// Listeners
const onPressCallback = useCallback(() => onPress(tvdbId), [tvdbId, onPress]);
onPress = () => {
this.props.onPress(this.props.tvdbId);
}
//
// Render
render() {
const {
title,
year,
network,
isExistingSeries
} = this.props;
return (
return (
<div className={styles.container}>
<Link
className={styles.series}
onPress={this.onPress}
onPress={onPressCallback}
>
<ImportSeriesTitle
title={title}
@ -36,8 +31,19 @@ class ImportSeriesSearchResult extends Component {
isExistingSeries={isExistingSeries}
/>
</Link>
);
}
<Link
className={styles.tvdbLink}
to={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
>
<Icon
className={styles.tvdbLinkIcon}
name={icons.EXTERNAL_LINK}
size={16}
/>
</Link>
</div>
);
}
ImportSeriesSearchResult.propTypes = {

View File

@ -20,24 +20,27 @@ function ImportSeriesTitle(props) {
{
!title.contains(year) &&
year > 0 &&
year > 0 ?
<span className={styles.year}>
({year})
</span>
</span> :
null
}
{
!!network &&
<Label>{network}</Label>
network ?
<Label>{network}</Label> :
null
}
{
isExistingSeries &&
isExistingSeries ?
<Label
kind={kinds.WARNING}
>
Existing
</Label>
</Label> :
null
}
</div>
);

View File

@ -103,6 +103,7 @@ class VirtualTable extends Component {
scroller,
header,
headerHeight,
rowHeight,
rowRenderer,
...otherProps
} = this.props;
@ -153,7 +154,7 @@ class VirtualTable extends Component {
width={width}
height={height}
headerHeight={height - headerHeight}
rowHeight={ROW_HEIGHT}
rowHeight={rowHeight}
rowCount={items.length}
columnCount={1}
columnWidth={width}
@ -194,7 +195,8 @@ VirtualTable.propTypes = {
VirtualTable.defaultProps = {
className: styles.tableContainer,
headerHeight: 38
headerHeight: 38,
rowHeight: ROW_HEIGHT
};
export default VirtualTable;