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 5f33c1c2..93447749 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 9f57d3a9..a865f1ab 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 2d23edd3..223be18a 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 5bb2bd30..e283f5e2 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 4bf04fa7..22e48847 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 {