github-mirrors/radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2025-04-24 06:27:08 -04:00
Code Issues Projects Releases Packages Wiki Activity

Display long date tooltips for release dates

Browse source
This commit is contained in:
Bogdan 2024-10-02 10:12:07 +03:00
parent 68dfa55b35
commit c43bd77dae
4 changed files with 101 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/Movie/Details/MovieDetails.js
View file

@ -422,14 +422,15 @@ class MovieDetails extends Component {
<div className={styles.details}>
<div>
{
!!certification &&
certification ?
<span className={styles.certification}>
{certification}
</span>
</span> :
null
}
{
year > 0 &&
year > 0 ?
<span className={styles.year}>
<Popover
anchor={
@ -445,14 +446,16 @@ class MovieDetails extends Component {
}
position={tooltipPositions.BOTTOM}
/>
</span>
</span> :
null
}
{
!!runtime &&
runtime ?
<span className={styles.runtime}>
{formatRuntime(runtime, movieRuntimeFormat)}
</span>
</span> :
null
}
{

48
frontend/src/Movie/Details/MovieReleaseDates.tsx
View file

@ -2,23 +2,25 @@ import React from 'react';
import { useSelector } from 'react-redux';
import Icon from 'Components/Icon';
import { icons } from 'Helpers/Props';
import Movie from 'Movie/Movie';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import formatDate from 'Utilities/Date/formatDate';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import translate from 'Utilities/String/translate';
import styles from './MovieReleaseDates.css';
interface MovieReleaseDatesProps {
inCinemas?: string;
digitalRelease?: string;
physicalRelease?: string;
}
type MovieReleaseDatesProps = Pick<
Movie,
'inCinemas' | 'digitalRelease' | 'physicalRelease'
>;
function MovieReleaseDates(props: MovieReleaseDatesProps) {
const { inCinemas, digitalRelease, physicalRelease } = props;
const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
createUISettingsSelector()
);
function MovieReleaseDates({
inCinemas,
digitalRelease,
physicalRelease,
}: MovieReleaseDatesProps) {
const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } =
useSelector(createUISettingsSelector());
if (!inCinemas && !physicalRelease && !digitalRelease) {
return (
@ -34,10 +36,16 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
return (
<>
{inCinemas ? (
<div title={translate('InCinemas')}>
<div
title={`${translate('InCinemas')}: ${formatDate(
inCinemas,
longDateFormat
)}`}
>
<div className={styles.dateIcon}>
<Icon name={icons.IN_CINEMAS} />
</div>
{getRelativeDate({
date: inCinemas,
shortDateFormat,
@ -49,10 +57,16 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
) : null}
{digitalRelease ? (
<div title={translate('DigitalRelease')}>
<div
title={`${translate('DigitalRelease')}: ${formatDate(
digitalRelease,
longDateFormat
)}`}
>
<div className={styles.dateIcon}>
<Icon name={icons.MOVIE_FILE} />
</div>
{getRelativeDate({
date: digitalRelease,
shortDateFormat,
@ -64,10 +78,16 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
) : null}
{physicalRelease ? (
<div title={translate('PhysicalRelease')}>
<div
title={`${translate('PhysicalRelease')}: ${formatDate(
physicalRelease,
longDateFormat
)}`}
>
<div className={styles.dateIcon}>
<Icon name={icons.DISC} />
</div>
{getRelativeDate({
date: physicalRelease,
shortDateFormat,

33
frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
View file

@ -22,6 +22,7 @@ import { Statistics } from 'Movie/Movie';
import MoviePoster from 'Movie/MoviePoster';
import { executeCommand } from 'Store/Actions/commandActions';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import formatDate from 'Utilities/Date/formatDate';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import translate from 'Utilities/String/translate';
import createMovieIndexItemSelector from '../createMovieIndexItemSelector';
@ -243,7 +244,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
) : null}
{showCinemaRelease && inCinemas ? (
<div className={styles.title} title={translate('InCinemas')}>
<div
className={styles.title}
title={`${translate('InCinemas')}: ${formatDate(
inCinemas,
longDateFormat
)}`}
>
<Icon name={icons.IN_CINEMAS} />{' '}
{getRelativeDate({
date: inCinemas,
@ -256,7 +263,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
) : null}
{showDigitalRelease && digitalRelease ? (
<div className={styles.title} title={translate('DigitalRelease')}>
<div
className={styles.title}
title={`${translate('DigitalRelease')}: ${formatDate(
digitalRelease,
longDateFormat
)}`}
>
<Icon name={icons.MOVIE_FILE} />{' '}
{getRelativeDate({
date: digitalRelease,
@ -269,7 +282,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
) : null}
{showPhysicalRelease && physicalRelease ? (
<div className={styles.title} title={translate('PhysicalRelease')}>
<div
className={styles.title}
title={`${translate('PhysicalRelease')}: ${formatDate(
physicalRelease,
longDateFormat
)}`}
>
<Icon name={icons.DISC} />{' '}
{getRelativeDate({
date: physicalRelease,
@ -282,7 +301,13 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
) : null}
{showReleaseDate && releaseDate ? (
<div className={styles.title} title={translate('ReleaseDate')}>
<div
className={styles.title}
title={`${translate('ReleaseDate')}: ${formatDate(
releaseDate,
longDateFormat
)}`}
>
<Icon name={icons.CALENDAR} />{' '}
{getRelativeDate({
date: releaseDate,

33
frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
View file

@ -9,6 +9,7 @@ import { icons } from 'Helpers/Props';
import Language from 'Language/Language';
import { Ratings } from 'Movie/Movie';
import QualityProfile from 'typings/QualityProfile';
import formatDate from 'Utilities/Date/formatDate';
import formatDateTime from 'Utilities/Date/formatDateTime';
import getRelativeDate from 'Utilities/Date/getRelativeDate';
import formatBytes from 'Utilities/Number/formatBytes';
@ -139,7 +140,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
});
return (
<div className={styles.info} title={translate('InCinemas')}>
<div
className={styles.info}
title={`${translate('InCinemas')}: ${formatDate(
inCinemas,
longDateFormat
)}`}
>
<Icon name={icons.IN_CINEMAS} /> {inCinemasDate}
</div>
);
@ -155,7 +162,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
});
return (
<div className={styles.info} title={translate('DigitalRelease')}>
<div
className={styles.info}
title={`${translate('DigitalRelease')}: ${formatDate(
digitalRelease,
longDateFormat
)}`}
>
<Icon name={icons.MOVIE_FILE} /> {digitalReleaseDate}
</div>
);
@ -175,7 +188,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
});
return (
<div className={styles.info} title={translate('PhysicalRelease')}>
<div
className={styles.info}
title={`${translate('PhysicalRelease')}: ${formatDate(
physicalRelease,
longDateFormat
)}`}
>
<Icon name={icons.DISC} /> {physicalReleaseDate}
</div>
);
@ -183,7 +202,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
if (sortKey === 'releaseDate' && releaseDate && !showReleaseDate) {
return (
<div className={styles.info} title={translate('ReleaseDate')}>
<div
className={styles.info}
title={`${translate('ReleaseDate')}: ${formatDate(
releaseDate,
longDateFormat
)}`}
>
<Icon name={icons.CALENDAR} />{' '}
{getRelativeDate({
date: releaseDate,