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

Create a component for watch status overlay

Browse Source
This commit is contained in:
Zoe Roux 2023-12-05 01:59:34 +01:00
parent ce07cece06
commit 0294f538eb
3 changed files with 46 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
front/packages/ui/src/browse/grid.tsx
View File

@ -19,21 +19,52 @@
*/
import { KyooImage, WatchStatusV } from "@kyoo/models";
import {
Link,
Skeleton,
ts,
focusReset,
P,
SubP,
PosterBackground,
Icon,
} from "@kyoo/primitives";
import { Link, Skeleton, ts, focusReset, P, SubP, PosterBackground, Icon } from "@kyoo/primitives";
import { ImageStyle, View } from "react-native";
import { percent, px, Stylable, Theme, useYoshiki } from "yoshiki/native";
import { Layout, WithLoading } from "../fetch";
import Done from "@material-symbols/svg-400/rounded/done-fill.svg";
export const ItemWatchStatus = ({
watchStatus,
unseenEpisodesCount,
...props
}: {
watchStatus?: WatchStatusV | null;
unseenEpisodesCount?: number | null;
}) => {
const { css } = useYoshiki();
if (watchStatus !== WatchStatusV.Completed && !unseenEpisodesCount) return null;
return (
<View
{...css(
{
position: "absolute",
top: 0,
right: 0,
minWidth: ts(3.5),
aspectRatio: 1,
justifyContent: "center",
alignItems: "center",
m: ts(0.5),
pX: ts(0.5),
bg: (theme) => theme.darkOverlay,
borderRadius: 999999,
},
props,
)}
>
{watchStatus === WatchStatusV.Completed ? (
<Icon icon={Done} size={16} />
) : (
<P {...css({ m: 0, textAlign: "center" })}>{unseenEpisodesCount}</P>
)}
</View>
);
};
export const ItemGrid = ({
href,
name,
@ -90,28 +121,7 @@ export const ItemGrid = ({
layout={{ width: percent(100) }}
{...(css("poster") as { style: ImageStyle })}
>
{(watchStatus === WatchStatusV.Completed || unseenEpisodesCount) && (
<View
{...css({
position: "absolute",
top: 0,
right: 0,
minWidth: ts(3.5),
aspectRatio: 1,
justifyContent: "center",
m: ts(0.5),
pX: ts(0.5),
bg: (theme) => theme.darkOverlay,
borderRadius: 999999,
})}
>
{watchStatus === WatchStatusV.Completed ? (
<Icon icon={Done} size={16} />
) : (
<P {...css({ m: 0, textAlign: "center" })}>{unseenEpisodesCount}</P>
)}
</View>
)}
<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
</PosterBackground>
<Skeleton>
{isLoading || (

24
front/packages/ui/src/browse/list.tsx
View File

@ -35,6 +35,7 @@ import { View } from "react-native";
import { percent, px, rem, useYoshiki } from "yoshiki/native";
import { Layout, WithLoading } from "../fetch";
import Done from "@material-symbols/svg-400/rounded/done-fill.svg";
import { ItemWatchStatus } from "./grid";
export const ItemList = ({
href,
@ -130,28 +131,7 @@ export const ItemList = ({
forcedLoading={isLoading}
layout={{ height: percent(80) }}
>
{(watchStatus === WatchStatusV.Completed || unseenEpisodesCount) && (
<View
{...css({
position: "absolute",
top: 0,
left: 0,
minWidth: ts(3.5),
aspectRatio: 1,
justifyContent: "center",
m: ts(0.5),
pX: ts(0.5),
bg: (theme) => theme.darkOverlay,
borderRadius: 999999,
})}
>
{watchStatus === WatchStatusV.Completed ? (
<Icon icon={Done} size={16} />
) : (
<P {...css({ m: 0, textAlign: "center" })}>{unseenEpisodesCount}</P>
)}
</View>
)}
<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
</PosterBackground>
</ImageBackground>
);

25
front/packages/ui/src/home/recommanded.tsx
View File

@ -49,7 +49,7 @@ import { Theme, percent, px, rem, useYoshiki } from "yoshiki/native";
import { Layout, WithLoading } from "../fetch";
import { InfiniteFetch } from "../fetch-infinite";
import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
import { ItemGrid } from "../browse/grid";
import { ItemGrid, ItemWatchStatus } from "../browse/grid";
import Done from "@material-symbols/svg-400/rounded/done-fill.svg";
export const ItemDetails = ({
@ -133,28 +133,7 @@ export const ItemDetails = ({
</Skeleton>
)}
</View>
{(watchStatus === WatchStatusV.Completed || unseenEpisodesCount) && (
<View
{...css({
position: "absolute",
top: 0,
right: 0,
minWidth: ts(3.5),
aspectRatio: 1,
justifyContent: "center",
m: ts(0.5),
pX: ts(0.5),
bg: (theme) => theme.darkOverlay,
borderRadius: 999999,
})}
>
{watchStatus === WatchStatusV.Completed ? (
<Icon icon={Done} size={16} />
) : (
<P {...css({ m: 0, textAlign: "center" })}>{unseenEpisodesCount}</P>
)}
</View>
)}
<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
</PosterBackground>
<View {...css({ flexShrink: 1, flexGrow: 1, justifyContent: "flex-end" })}>
{(isLoading || tagline) && (