From 723091509414465e98d870b3dc943f41b9ac590d Mon Sep 17 00:00:00 2001 From: TheCatLady <52870424+TheCatLady@users.noreply.github.com> Date: Wed, 24 Mar 2021 12:34:17 -0400 Subject: [PATCH] feat(ui): display movie/series original title (#1240) * feat(ui): display movie/series original title * fix(ui): remove extra margin when tagline is missing * fix(ui): simply don't show overview when unavailable * fix(ui): overview heading color should match that of sliders * fix: revert overview removal on movie/series detail pages --- src/components/CollectionDetails/index.tsx | 17 ++-- src/components/MovieDetails/index.tsx | 74 ++++++++------- src/components/TvDetails/index.tsx | 101 +++++++++++---------- src/i18n/locale/en.json | 3 +- src/styles/globals.css | 4 +- 5 files changed, 108 insertions(+), 91 deletions(-) diff --git a/src/components/CollectionDetails/index.tsx b/src/components/CollectionDetails/index.tsx index 5f33c1c2d..93447749e 100644 --- a/src/components/CollectionDetails/index.tsx +++ b/src/components/CollectionDetails/index.tsx @@ -25,7 +25,6 @@ import TitleCard from '../TitleCard'; import Transition from '../Transition'; const messages = defineMessages({ - overviewunavailable: 'Overview unavailable.', overview: 'Overview', numberofmovies: '{count} Movies', requestcollection: 'Request Collection', @@ -417,16 +416,14 @@ const CollectionDetails: React.FC = ({ )} -
-
-

{intl.formatMessage(messages.overview)}

-

- {data.overview - ? data.overview - : intl.formatMessage(messages.overviewunavailable)} -

+ {data.overview && ( +
+
+

{intl.formatMessage(messages.overview)}

+

{data.overview}

+
-
+ )}
{intl.formatMessage(globalMessages.movies)} diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index 9f57d3a98..a865f1ab1 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -35,6 +35,7 @@ import Slider from '../Slider'; import StatusBadge from '../StatusBadge'; const messages = defineMessages({ + originaltitle: 'Original Title', releasedate: 'Release Date', revenue: 'Revenue', budget: 'Budget', @@ -489,45 +490,47 @@ const MovieDetails: React.FC = ({ movie }) => {
-
{data.tagline}
+ {data.tagline &&
{data.tagline}
}

{intl.formatMessage(messages.overview)}

{data.overview ? data.overview : intl.formatMessage(messages.overviewunavailable)}

-
    - {sortedCrew.slice(0, 6).map((person) => ( -
  • - {person.job} - - {person.name} - -
    • - ))} -
{sortedCrew.length > 0 && ( - + <> +
    + {sortedCrew.slice(0, 6).map((person) => ( +
  • + {person.job} + + {person.name} + +
    • + ))} +
+ + )}
@@ -601,6 +604,13 @@ const MovieDetails: React.FC = ({ movie }) => { )}
)} + {data.originalTitle && + data.originalLanguage !== locale.slice(0, 2) && ( +
+ {intl.formatMessage(messages.originaltitle)} + {data.originalTitle} +
+ )}
{intl.formatMessage(globalMessages.status)} {data.status} diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx index 2d23edd33..223be18ac 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -53,6 +53,7 @@ const messages = defineMessages({ manageModalClearMedia: 'Clear All Media Data', manageModalClearMediaWarning: '* This will irreversibly remove all data for this TV series, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.', + originaltitle: 'Original Title', showtype: 'Series Type', anime: 'Anime', network: '{networkCount, plural, one {Network} other {Networks}}', @@ -526,59 +527,61 @@ const TvDetails: React.FC = ({ tv }) => {
-
{data.tagline}
+ {data.tagline &&
{data.tagline}
}

{intl.formatMessage(messages.overview)}

{data.overview ? data.overview : intl.formatMessage(messages.overviewunavailable)}

-
    - {(data.createdBy.length > 0 - ? [ - ...data.createdBy.map( - (person): Partial => ({ - id: person.id, - job: 'Creator', - name: person.name, - }) - ), - ...sortedCrew, - ] - : sortedCrew - ) - .slice(0, 6) - .map((person) => ( -
  • - {person.job} - - {person.name} - -
    • - ))} -
{sortedCrew.length > 0 && ( - + <> +
    + {(data.createdBy.length > 0 + ? [ + ...data.createdBy.map( + (person): Partial => ({ + id: person.id, + job: 'Creator', + name: person.name, + }) + ), + ...sortedCrew, + ] + : sortedCrew + ) + .slice(0, 6) + .map((person) => ( +
  • + {person.job} + + {person.name} + +
    • + ))} +
+ + )}
@@ -615,6 +618,12 @@ const TvDetails: React.FC = ({ tv }) => { )}
)} + {data.originalName && data.originalLanguage !== locale.slice(0, 2) && ( +
+ {intl.formatMessage(messages.originaltitle)} + {data.originalName} +
+ )} {data.keywords.some( (keyword) => keyword.id === ANIME_KEYWORD_ID ) && ( diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index 5bb2bd309..e283f5e23 100644 --- a/src/i18n/locale/en.json +++ b/src/i18n/locale/en.json @@ -3,7 +3,6 @@ "components.AppDataWarning.dockerVolumeMissingDescription": "The {appDataPath} volume mount was not configured properly. All data will be cleared when the container is stopped or restarted.", "components.CollectionDetails.numberofmovies": "{count} Movies", "components.CollectionDetails.overview": "Overview", - "components.CollectionDetails.overviewunavailable": "Overview unavailable.", "components.CollectionDetails.requestSuccess": "{title} requested successfully!", "components.CollectionDetails.requestcollection": "Request Collection", "components.CollectionDetails.requestcollection4k": "Request Collection in 4K", @@ -70,6 +69,7 @@ "components.MovieDetails.openradarr": "Open Movie in Radarr", "components.MovieDetails.openradarr4k": "Open Movie in 4K Radarr", "components.MovieDetails.originallanguage": "Original Language", + "components.MovieDetails.originaltitle": "Original Title", "components.MovieDetails.overview": "Overview", "components.MovieDetails.overviewunavailable": "Overview unavailable.", "components.MovieDetails.play4konplex": "Play 4K on Plex", @@ -614,6 +614,7 @@ "components.TvDetails.opensonarr": "Open Series in Sonarr", "components.TvDetails.opensonarr4k": "Open Series in 4K Sonarr", "components.TvDetails.originallanguage": "Original Language", + "components.TvDetails.originaltitle": "Original Title", "components.TvDetails.overview": "Overview", "components.TvDetails.overviewunavailable": "Overview unavailable.", "components.TvDetails.play4konplex": "Play 4K on Plex", diff --git a/src/styles/globals.css b/src/styles/globals.css index 4bf04fa77..22e488470 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -134,11 +134,11 @@ h1 > .media-year { } .media-overview h2 { - @apply text-xl sm:text-2xl; + @apply text-xl text-gray-300 sm:text-2xl; } .media-overview p { - @apply pt-2 text-sm text-gray-400 lg:text-base; + @apply pt-2 text-sm text-gray-400 sm:text-base; } ul.media-crew {