Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-21 14:30:34 -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}`; return `${Math.floor(runtime / 60)}h${runtime % 60}`;
}; };
export const displayAirDate = (airDate: Date) => {
return airDate.toLocaleDateString("en-US");
};
export const EpisodeBox = ({ export const EpisodeBox = ({
slug, slug,
showSlug, showSlug,
@ -109,6 +105,9 @@ export const EpisodeBox = ({
more: { more: {
opacity: 0, opacity: 0,
}, },
less: {
display: "flex",
},
}, },
fover: { fover: {
self: focusReset, self: focusReset,
@ -121,6 +120,9 @@ export const EpisodeBox = ({
more: { more: {
opacity: 1, opacity: 1,
}, },
less: {
display: "none",
},
}, },
}, },
props, props,
@ -306,31 +308,20 @@ export const EpisodeLine = ({
<View {...css({ flexDirection: "row", alignItems: "center" })}> <View {...css({ flexDirection: "row", alignItems: "center" })}>
{isLoading || {isLoading ||
(runtime && ( (runtime && (
<Skeleton> <Skeleton {...css(["less"])}>
{isLoading || ( {isLoading || (
<SubP {...css({ flexShrink: 0 })}> <SubP>
{[releaseDate ? displayAirDate(releaseDate) : null, displayRuntime(runtime)] {/* Source https://www.i18next.com/translation-function/formatting#datetime */}
{[
releaseDate ? t("{{val, datetime}}", { val: releaseDate }) : null,
displayRuntime(runtime),
]
.filter((item) => item != null) .filter((item) => item != null)
.join(" · ")} .join(" · ")}
</SubP> </SubP>
)} )}
</Skeleton> </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 && ( {slug && watchedStatus !== undefined && (
<EpisodesContext <EpisodesContext
slug={slug} slug={slug}
@ -347,6 +338,21 @@ export const EpisodeLine = ({
)} )}
</View> </View>
</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> </Link>
); );
}; };