1
0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-10-29 23:12:39 +01:00

Fix showing sorting values, add tooltips and translations to SeriesIndexPoster

This commit is contained in:
Bogdan 2023-05-25 00:36:07 +03:00 committed by Mark McDowall
parent 12374f7f00
commit f90bef6934
3 changed files with 107 additions and 23 deletions

View File

@ -14,7 +14,9 @@ import { Statistics } from 'Series/Series';
import SeriesPoster from 'Series/SeriesPoster';
import { executeCommand } from 'Store/Actions/commandActions';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import formatDateTime from 'Utilities/Date/formatDateTime';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import translate from 'Utilities/String/translate';
import createSeriesIndexItemSelector from '../createSeriesIndexItemSelector';
import selectPosterOptions from './selectPosterOptions';
import SeriesIndexPosterInfo from './SeriesIndexPosterInfo';
@ -42,9 +44,8 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
showSearchAction,
} = useSelector(selectPosterOptions);
const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
createUISettingsSelector()
);
const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
useSelector(createUISettingsSelector());
const {
title,
@ -52,7 +53,11 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
status,
path,
titleSlug,
originalLanguage,
network,
nextAiring,
previousAiring,
added,
statistics = {} as Statistics,
images,
} = series;
@ -122,14 +127,14 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
return (
<div className={styles.content}>
<div className={styles.posterContainer}>
<div className={styles.posterContainer} title={title}>
{isSelectMode ? <SeriesIndexPosterSelect seriesId={seriesId} /> : null}
<Label className={styles.controls}>
<SpinnerIconButton
className={styles.action}
name={icons.REFRESH}
title="Refresh series"
title={translate('RefreshSeries')}
isSpinning={isRefreshingSeries}
onPress={onRefreshPress}
/>
@ -138,7 +143,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
<SpinnerIconButton
className={styles.action}
name={icons.SEARCH}
title="Search for monitored episodes"
title={translate('SearchForMonitoredEpisodes')}
isSpinning={isSearchingSeries}
onPress={onSearchPress}
/>
@ -147,13 +152,13 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
<IconButton
className={styles.action}
name={icons.EDIT}
title="Edit Series"
title={translate('EditSeries')}
onPress={onEditSeriesPress}
/>
</Label>
{status === 'ended' ? (
<div className={styles.ended} title="Ended" />
<div className={styles.ended} title={translate('Ended')} />
) : null}
<Link className={styles.link} style={elementStyle} to={link}>
@ -185,20 +190,33 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
isStandalone={false}
/>
{showTitle ? <div className={styles.title}>{title}</div> : null}
{showTitle ? (
<div className={styles.title} title={title}>
{title}
</div>
) : null}
{showMonitored ? (
<div className={styles.title}>
{monitored ? 'Monitored' : 'Unmonitored'}
{monitored ? translate('Monitored') : translate('Unmonitored')}
</div>
) : null}
{showQualityProfile ? (
<div className={styles.title}>{qualityProfile.name}</div>
<div className={styles.title} title={translate('QualityProfile')}>
{qualityProfile.name}
</div>
) : null}
{nextAiring ? (
<div className={styles.nextAiring}>
<div
className={styles.nextAiring}
title={`${translate('NextAiring')}: ${formatDateTime(
nextAiring,
longDateFormat,
timeFormat
)}`}
>
{getRelativeDate(nextAiring, shortDateFormat, showRelativeDates, {
timeFormat,
timeForToday: true,
@ -207,6 +225,10 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
) : null}
<SeriesIndexPosterInfo
originalLanguage={originalLanguage}
network={network}
previousAiring={previousAiring}
added={added}
seasonCount={seasonCount}
sizeOnDisk={sizeOnDisk}
path={path}
@ -215,6 +237,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
showRelativeDates={showRelativeDates}
sortKey={sortKey}
shortDateFormat={shortDateFormat}
longDateFormat={longDateFormat}
timeFormat={timeFormat}
/>

View File

@ -1,10 +1,14 @@
import React from 'react';
import Language from 'Language/Language';
import QualityProfile from 'typings/QualityProfile';
import formatDateTime from 'Utilities/Date/formatDateTime';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import formatBytes from 'Utilities/Number/formatBytes';
import translate from 'Utilities/String/translate';
import styles from './SeriesIndexPosterInfo.css';
interface SeriesIndexPosterInfoProps {
originalLanguage?: Language;
network?: string;
showQualityProfile: boolean;
qualityProfile: QualityProfile;
@ -16,11 +20,13 @@ interface SeriesIndexPosterInfoProps {
sortKey: string;
showRelativeDates: boolean;
shortDateFormat: string;
longDateFormat: string;
timeFormat: string;
}
function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
const {
originalLanguage,
network,
qualityProfile,
showQualityProfile,
@ -32,20 +38,44 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
sortKey,
showRelativeDates,
shortDateFormat,
longDateFormat,
timeFormat,
} = props;
if (sortKey === 'network' && network) {
return <div className={styles.info}>{network}</div>;
return (
<div className={styles.info} title={translate('Network')}>
{network}
</div>
);
}
if (sortKey === 'originalLanguage' && !!originalLanguage?.name) {
return (
<div className={styles.info} title={translate('Original Language')}>
{originalLanguage.name}
</div>
);
}
if (sortKey === 'qualityProfileId' && !showQualityProfile) {
return <div className={styles.info}>{qualityProfile.name}</div>;
return (
<div className={styles.info} title={translate('QualityProfile')}>
{qualityProfile.name}
</div>
);
}
if (sortKey === 'previousAiring' && previousAiring) {
return (
<div className={styles.info}>
<div
className={styles.info}
title={`${translate('PreviousAiring')}: ${formatDateTime(
previousAiring,
longDateFormat,
timeFormat
)}`}
>
{getRelativeDate(previousAiring, shortDateFormat, showRelativeDates, {
timeFormat,
timeForToday: true,
@ -65,27 +95,42 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
}
);
return <div className={styles.info}>{`Added ${addedDate}`}</div>;
return (
<div
className={styles.info}
title={formatDateTime(added, longDateFormat, timeFormat)}
>
{translate('Added')}: {addedDate}
</div>
);
}
if (sortKey === 'seasonCount') {
let seasons = '1 season';
let seasons = translate('OneSeason');
if (seasonCount === 0) {
seasons = 'No seasons';
seasons = translate('NoSeasons');
} else if (seasonCount > 1) {
seasons = `${seasonCount} seasons`;
seasons = translate('CountSeasons', { count: seasonCount });
}
return <div className={styles.info}>{seasons}</div>;
}
if (sortKey === 'path') {
return <div className={styles.info}>{path}</div>;
return (
<div className={styles.info} title={translate('Path')}>
{path}
</div>
);
}
if (sortKey === 'sizeOnDisk') {
return <div className={styles.info}>{formatBytes(sizeOnDisk)}</div>;
return (
<div className={styles.info} title={translate('SizeOnDisk')}>
{formatBytes(sizeOnDisk)}
</div>
);
}
return null;

View File

@ -1,24 +1,40 @@
{
"Added": "Added",
"ApplyChanges": "Apply Changes",
"AutomaticAdd": "Automatic Add",
"Browser Reload Required": "Browser Reload Required",
"CountSeasons": "{count} seasons",
"EditSelectedDownloadClients": "Edit Selected Download Clients",
"EditSelectedImportLists": "Edit Selected Import Lists",
"EditSelectedIndexers": "Edit Selected Indexers",
"EditSeries": "Edit Series",
"EnableAutomaticSearch": "Enable Automatic Search",
"Enabled": "Enabled",
"EnableInteractiveSearch": "Enable Interactive Search",
"EnableRss": "Enable Rss",
"Enabled": "Enabled",
"Ended": "Ended",
"HiddenClickToShow": "Hidden, click to show",
"HideAdvanced": "Hide Advanced",
"Language": "Language",
"Language that Sonarr will use for UI": "Language that Sonarr will use for UI",
"Monitored": "Monitored",
"Network": "Network",
"NextAiring": "Next Airing",
"NoSeasons": "No seasons",
"OneSeason": "1 season",
"OriginalLanguage": "Original Language",
"Path": "Path",
"PreviousAiring": "Previous Airing",
"Priority": "Priority",
"QualityProfile": "Quality Profile",
"RefreshSeries": "Refresh Series",
"RemoveCompletedDownloads": "Remove Completed Downloads",
"RemoveFailedDownloads": "Remove Failed Downloads",
"RootFolder": "Root Folder",
"SearchForMonitoredEpisodes": "Search for monitored episodes",
"ShowAdvanced": "Show Advanced",
"ShownClickToHide": "Shown, click to hide",
"UI Language": "UI Language"
"SizeOnDisk": "Size on disk",
"UI Language": "UI Language",
"Unmonitored": "Unmonitored"
}