From a0f58a3218bd4b3c98a57007dfaf5e7b57cf55b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Ventura?= Date: Sat, 17 Dec 2022 21:57:32 +0000 Subject: [PATCH] Media item title: show the original title + translated title, if they are different --- client/src/components/AddToListModal.tsx | 7 ++++--- client/src/components/GridItem.tsx | 5 +++-- client/src/components/SelectSeenDate.tsx | 9 +++++---- client/src/components/StarRating.tsx | 3 ++- client/src/mediaItem.ts | 7 +++++++ client/src/pages/Details.tsx | 3 ++- client/src/pages/EpisodePage.tsx | 3 ++- client/src/pages/SeasonsPage.tsx | 4 ++-- 8 files changed, 27 insertions(+), 14 deletions(-) diff --git a/client/src/components/AddToListModal.tsx b/client/src/components/AddToListModal.tsx index cc3fced8..e3e0bc87 100644 --- a/client/src/components/AddToListModal.tsx +++ b/client/src/components/AddToListModal.tsx @@ -8,6 +8,7 @@ import { useUser } from 'src/api/user'; import { Modal } from 'src/components/Modal'; import { formatEpisodeNumber, formatSeasonNumber, listName } from 'src/utils'; import { AddListButton } from 'src/components/AddOrEditListButton'; +import { originalAndTranslatedTitle } from 'src/mediaItem'; export const AddToListModal: FunctionComponent<{ mediaItemId: number; @@ -54,10 +55,10 @@ export const AddToListModal: FunctionComponent<{ Add " {episode - ? `${mediaItem.title} ${formatEpisodeNumber(episode)}` + ? `${originalAndTranslatedTitle(mediaItem)} ${formatEpisodeNumber(episode)}` : season - ? `${mediaItem.title} ${formatSeasonNumber(season)}` - : mediaItem.title} + ? `${originalAndTranslatedTitle(mediaItem)} ${formatSeasonNumber(season)}` + : originalAndTranslatedTitle(mediaItem)} " to list diff --git a/client/src/components/GridItem.tsx b/client/src/components/GridItem.tsx index 4910af23..c18c3212 100644 --- a/client/src/components/GridItem.tsx +++ b/client/src/components/GridItem.tsx @@ -5,6 +5,7 @@ import { parseISO } from 'date-fns'; import { removeFromWatchlist } from 'src/api/details'; import { BadgeRating } from 'src/components/StarRating'; +import { originalAndTranslatedTitle } from 'src/mediaItem'; import { formatEpisodeNumber, @@ -121,7 +122,7 @@ export const GridItem: FunctionComponent<{ if ( await Confirm( - t`Remove "${mediaItem.title}${ + t`Remove "${originalAndTranslatedTitle(mediaItem)}${ season ? ' ' + formatSeasonNumber(season) : episode @@ -205,7 +206,7 @@ export const GridItem: FunctionComponent<{
{season && formatSeasonNumber(season) + ' '} {episode && formatEpisodeNumber(episode) + ' '} - {mediaItem.title} + {originalAndTranslatedTitle(mediaItem)}
{hasProgress(mediaItem) && ( diff --git a/client/src/components/SelectSeenDate.tsx b/client/src/components/SelectSeenDate.tsx index 1221d87a..4ee31b63 100644 --- a/client/src/components/SelectSeenDate.tsx +++ b/client/src/components/SelectSeenDate.tsx @@ -6,6 +6,7 @@ import { Trans } from '@lingui/macro'; import { markAsSeen } from 'src/api/details'; import { SelectLastSeenEpisode } from 'src/components/SelectLastSeenEpisode'; +import { originalAndTranslatedTitle } from 'src/mediaItem'; import { LastSeenAt, @@ -73,15 +74,15 @@ export const SelectSeenDateComponent: FunctionComponent<{ <>
{isAudiobook(mediaItem) && ( - When did you listen to "{mediaItem.title}"? + When did you listen to "{originalAndTranslatedTitle(mediaItem)}"? )} {isBook(mediaItem) && ( - When did you read "{mediaItem.title}"? + When did you read "{originalAndTranslatedTitle(mediaItem)}"? )} {isMovie(mediaItem) && ( - When did you see "{mediaItem.title}"? + When did you see "{originalAndTranslatedTitle(mediaItem)}"? )} {isTvShow(mediaItem) && ( @@ -95,7 +96,7 @@ export const SelectSeenDateComponent: FunctionComponent<{ )} {isVideoGame(mediaItem) && ( - When did you play "{mediaItem.title}"? + When did you play "{originalAndTranslatedTitle(mediaItem)}"? )}
diff --git a/client/src/components/StarRating.tsx b/client/src/components/StarRating.tsx index 8e7d1765..001249df 100644 --- a/client/src/components/StarRating.tsx +++ b/client/src/components/StarRating.tsx @@ -8,6 +8,7 @@ import { Modal, useOpenModalRef } from 'src/components/Modal'; import { SelectSeenDate } from 'src/components/SelectSeenDate'; import { formatEpisodeNumber, formatSeasonNumber } from 'src/utils'; import { queryClient } from 'src/App'; +import { originalAndTranslatedTitle } from 'src/mediaItem'; export const StarRating: FunctionComponent< | { mediaItem: MediaItemItemsResponse } @@ -110,7 +111,7 @@ const StarRatingModal: FunctionComponent< return (
- {mediaItem.title} + {originalAndTranslatedTitle(mediaItem)} {season && <> {formatSeasonNumber(season)}} {episode && <> {formatEpisodeNumber(episode)}}
diff --git a/client/src/mediaItem.ts b/client/src/mediaItem.ts index 3b11ed36..33bb6903 100644 --- a/client/src/mediaItem.ts +++ b/client/src/mediaItem.ts @@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'; import { MediaItemDetailsResponse, + MediaItemItemsResponse, TvEpisode, TvSeason, } from 'mediatracker-api'; @@ -71,3 +72,9 @@ export const hasBeenSeenAtLeastOnce = ( ?.length > 0 : value.seenHistory?.length > 0; }; + +export const originalAndTranslatedTitle = (mediaItem: MediaItemDetailsResponse | MediaItemItemsResponse) => { + return (mediaItem.originalTitle && mediaItem.originalTitle !== mediaItem.title) + ? `${mediaItem.originalTitle} (${mediaItem.title})` + : mediaItem.title; +}; diff --git a/client/src/pages/Details.tsx b/client/src/pages/Details.tsx index 49ca74e7..db4fc1e3 100644 --- a/client/src/pages/Details.tsx +++ b/client/src/pages/Details.tsx @@ -3,6 +3,7 @@ import { Link, useParams } from 'react-router-dom'; import clsx from 'clsx'; import { Plural, Trans } from '@lingui/macro'; import { parseISO } from 'date-fns'; +import { originalAndTranslatedTitle } from 'src/mediaItem'; import { AudibleLang, @@ -222,7 +223,7 @@ export const DetailsPage: FunctionComponent = () => {
- {mediaItem.title} + {originalAndTranslatedTitle(mediaItem)}
{mediaItem.releaseDate && ( diff --git a/client/src/pages/EpisodePage.tsx b/client/src/pages/EpisodePage.tsx index 588dbb42..7c998b71 100644 --- a/client/src/pages/EpisodePage.tsx +++ b/client/src/pages/EpisodePage.tsx @@ -5,6 +5,7 @@ import { useDetails } from 'src/api/details'; import { findEpisodeBySeasonAndEpisodeNumber, hasBeenSeenAtLeastOnce, + originalAndTranslatedTitle, } from 'src/mediaItem'; import { formatEpisodeNumber, @@ -45,7 +46,7 @@ export const EpisodePage: FunctionComponent = () => { return (
- {mediaItem.title} {formatEpisodeNumber(episode)} + {originalAndTranslatedTitle(mediaItem)} {formatEpisodeNumber(episode)} {episode.description && (
diff --git a/client/src/pages/SeasonsPage.tsx b/client/src/pages/SeasonsPage.tsx index 6121800a..f16d7b09 100644 --- a/client/src/pages/SeasonsPage.tsx +++ b/client/src/pages/SeasonsPage.tsx @@ -8,7 +8,7 @@ import { parseISO } from 'date-fns'; import { useDetails } from 'src/api/details'; import { Poster } from 'src/components/Poster'; import { BadgeRating } from 'src/components/StarRating'; -import { hasBeenSeenAtLeastOnce, useSelectedSeason } from 'src/mediaItem'; +import { hasBeenSeenAtLeastOnce, useSelectedSeason, originalAndTranslatedTitle } from 'src/mediaItem'; import { hasBeenReleased, hasReleaseDate, @@ -157,7 +157,7 @@ export const SeasonsPage: FunctionComponent = () => {
- {mediaItem.title} + {originalAndTranslatedTitle(mediaItem)}