mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-07-09 03:04:20 -04:00
Style episodes in the news list
This commit is contained in:
parent
56a96540b4
commit
42869cb28f
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
import { KyooImage } from "@kyoo/models";
|
import { KyooImage } from "@kyoo/models";
|
||||||
import { Link, Skeleton, Poster, ts, focusReset, P, SubP } from "@kyoo/primitives";
|
import { Link, Skeleton, Poster, ts, focusReset, P, SubP } from "@kyoo/primitives";
|
||||||
import { ImageStyle, Platform } from "react-native";
|
import { ImageStyle } from "react-native";
|
||||||
import { percent, px, Stylable, Theme, useYoshiki } from "yoshiki/native";
|
import { percent, px, Stylable, Theme, useYoshiki } from "yoshiki/native";
|
||||||
import { Layout, WithLoading } from "../fetch";
|
import { Layout, WithLoading } from "../fetch";
|
||||||
|
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { focusReset, H6, Image, ImageProps, Link, P, Skeleton, ts } from "@kyoo/primitives";
|
import { focusReset, H6, Image, ImageProps, Link, P, Skeleton, SubP, ts } from "@kyoo/primitives";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { ImageStyle, View } from "react-native";
|
import { ImageStyle, View } from "react-native";
|
||||||
import { Layout, WithLoading } from "../fetch";
|
import { Layout, WithLoading } from "../fetch";
|
||||||
@ -44,26 +44,71 @@ export const EpisodeBox = ({
|
|||||||
overview,
|
overview,
|
||||||
thumbnail,
|
thumbnail,
|
||||||
isLoading,
|
isLoading,
|
||||||
|
href,
|
||||||
...props
|
...props
|
||||||
}: Stylable &
|
}: Stylable &
|
||||||
WithLoading<{
|
WithLoading<{
|
||||||
name: string | null;
|
name: string | null;
|
||||||
overview: string;
|
overview: string | null;
|
||||||
|
href: string;
|
||||||
thumbnail?: ImageProps["src"] | null;
|
thumbnail?: ImageProps["src"] | null;
|
||||||
}>) => {
|
}>) => {
|
||||||
|
const { css } = useYoshiki("episodebox");
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View {...props}>
|
<Link
|
||||||
|
href={href}
|
||||||
|
{...css(
|
||||||
|
{
|
||||||
|
child: {
|
||||||
|
poster: {
|
||||||
|
borderColor: (theme) => theme.background,
|
||||||
|
borderWidth: ts(0.5),
|
||||||
|
borderStyle: "solid",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fover: {
|
||||||
|
self: focusReset,
|
||||||
|
poster: {
|
||||||
|
borderColor: (theme: Theme) => theme.accent,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
textDecorationLine: "underline",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
props,
|
||||||
|
)}
|
||||||
|
>
|
||||||
<Image
|
<Image
|
||||||
src={thumbnail}
|
src={thumbnail}
|
||||||
quality="low"
|
quality="low"
|
||||||
alt=""
|
alt=""
|
||||||
layout={{ width: percent(100), aspectRatio: 16 / 9 }}
|
layout={{ width: percent(100), aspectRatio: 16 / 9 }}
|
||||||
|
{...(css("poster") as any)}
|
||||||
/>
|
/>
|
||||||
<Skeleton>{isLoading || <P>{name ?? t("show.episodeNoMetadata")}</P>}</Skeleton>
|
<Skeleton>
|
||||||
<Skeleton>{isLoading || <P>{overview}</P>}</Skeleton>
|
{isLoading || (
|
||||||
</View>
|
<P {...css([{ marginY: 0, textAlign: "center" }, "title"])}>
|
||||||
|
{name ?? t("show.episodeNoMetadata")}
|
||||||
|
</P>
|
||||||
|
)}
|
||||||
|
</Skeleton>
|
||||||
|
<Skeleton>
|
||||||
|
{isLoading || (
|
||||||
|
<SubP
|
||||||
|
numberOfLines={3}
|
||||||
|
{...css({
|
||||||
|
marginTop: 0,
|
||||||
|
textAlign: "center",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{overview}
|
||||||
|
</SubP>
|
||||||
|
)}
|
||||||
|
</Skeleton>
|
||||||
|
</Link>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@ import ChevronRight from "@material-symbols/svg-400/rounded/chevron_right-fill.s
|
|||||||
import { InfiniteFetch, InfiniteFetchList } from "../fetch-infinite";
|
import { InfiniteFetch, InfiniteFetchList } from "../fetch-infinite";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Header } from "./genre";
|
import { Header } from "./genre";
|
||||||
import { EpisodeBox } from "../details/episode";
|
import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
|
||||||
|
|
||||||
export const NewsList = () => {
|
export const NewsList = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@ -62,8 +62,12 @@ export const NewsList = () => {
|
|||||||
) : (
|
) : (
|
||||||
<EpisodeBox
|
<EpisodeBox
|
||||||
isLoading={x.isLoading as any}
|
isLoading={x.isLoading as any}
|
||||||
name={x.name}
|
name={
|
||||||
overview={x.overview!}
|
x.kind === NewsKind.Episode
|
||||||
|
? `${x.show!.name} ${episodeDisplayNumber(x)}`
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
overview={x.name}
|
||||||
thumbnail={x.thumbnail}
|
thumbnail={x.thumbnail}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user