Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-03 05:34:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Front: EpisodeLine: format releaseDate using current locale

Browse Source
This commit is contained in:
Arthur Jamet 2023-12-20 16:18:53 +01:00 committed by Zoe Roux
parent 9a55262856
commit 5664465df5
1 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
front/packages/ui/src/details/episode.tsx
View File

@ -62,10 +62,6 @@ export const displayRuntime = (runtime: number) => {
return `${Math.floor(runtime / 60)}h${runtime % 60}`;
};
export const displayAirDate = (airDate: Date) => {
return airDate.toLocaleDateString("en-US");
};
export const EpisodeBox = ({
slug,
showSlug,
@ -109,6 +105,9 @@ export const EpisodeBox = ({
more: {
opacity: 0,
},
less: {
display: "flex",
},
},
fover: {
self: focusReset,
@ -121,6 +120,9 @@ export const EpisodeBox = ({
more: {
opacity: 1,
},
less: {
display: "none",
},
},
},
props,
@ -306,31 +308,20 @@ export const EpisodeLine = ({
<View {...css({ flexDirection: "row", alignItems: "center" })}>
{isLoading ||
(runtime && (
<Skeleton>
<Skeleton {...css(["less"])}>
{isLoading || (
<SubP {...css({ flexShrink: 0 })}>
{[releaseDate ? displayAirDate(releaseDate) : null, displayRuntime(runtime)]
<SubP>
{/* Source https://www.i18next.com/translation-function/formatting#datetime */}
{[
releaseDate ? t("{{val, datetime}}", { val: releaseDate }) : null,
displayRuntime(runtime),
]
.filter((item) => item != null)
.join(" · ")}
</SubP>
)}
</Skeleton>
))}
</View>
</View>
<View {...css({ flexDirection: "row" })}>
<Skeleton>
{isLoading || <P numberOfLines={descriptionExpanded ? undefined : 3}>{overview}</P>}
</Skeleton>
<IconButton
{...css(["more"])}
icon={descriptionExpanded ? ExpandLess : ExpandMore}
{...tooltip(t(descriptionExpanded ? "misc.collapse" : "misc.expand"))}
onPress={(e) => {
e.preventDefault();
setDescriptionExpanded((isExpanded) => !isExpanded);
}}
/>
{slug && watchedStatus !== undefined && (
<EpisodesContext
slug={slug}
@ -347,6 +338,21 @@ export const EpisodeLine = ({
)}
</View>
</View>
<View {...css({ flexDirection: "row" })}>
<Skeleton>
{isLoading || <P numberOfLines={descriptionExpanded ? undefined : 3}>{overview}</P>}
</Skeleton>
<IconButton
{...css(["more"])}
icon={descriptionExpanded ? ExpandLess : ExpandMore}
{...tooltip(t(descriptionExpanded ? "misc.collapse" : "misc.expand"))}
onPress={(e) => {
e.preventDefault();
setDescriptionExpanded((isExpanded) => !isExpanded);
}}
/>
</View>
</View>
</Link>
);
};