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

Fix browse settings & infinite list

Browse Source
This commit is contained in:
Zoe Roux 2025-06-22 19:31:21 +02:00
parent 4d96ab5451
commit 1673da0004
No known key found for this signature in database
12 changed files with 218 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
front/src/components/items/context-menus.tsx
View File

@ -15,14 +15,14 @@ import { watchListIcon } from "./watchlist-info";
// import { useDownloader } from "../../packages/ui/src/downloadses/ui/src/downloads";
export const EpisodesContext = ({
type = "episode",
kind = "episode",
slug,
showSlug,
status,
force,
...props
}: {
type?: "serie" | "movie" | "episode";
kind?: "serie" | "movie" | "episode";
showSlug?: string | null;
slug: string;
status: WatchStatusV | null;
@ -34,17 +34,17 @@ export const EpisodesContext = ({
const { t } = useTranslation();
const mutation = useMutation({
path: [type, slug, "watchStatus"],
path: [kind, slug, "watchStatus"],
compute: (newStatus: WatchStatusV | null) => ({
method: newStatus ? "POST" : "DELETE",
params: newStatus ? { status: newStatus } : undefined,
}),
invalidate: [type, slug],
invalidate: [kind, slug],
});
const metadataRefreshMutation = useMutation({
method: "POST",
path: [type, slug, "refresh"],
path: [kind, slug, "refresh"],
invalidate: null,
});
@ -54,7 +54,10 @@ export const EpisodesContext = ({
Trigger={IconButton}
icon={MoreVert}
{...tooltip(t("misc.more"))}
{...(css([Platform.OS !== "web" && !force && { display: "none" }], props) as any)}
{...(css(
[Platform.OS !== "web" && !force && { display: "none" }],
props,
) as any)}
>
{showSlug && (
<Menu.Item
@ -71,7 +74,9 @@ export const EpisodesContext = ({
{Object.values(WatchStatusV).map((x) => (
<Menu.Item
key={x}
label={t(`show.watchlistMark.${x.toLowerCase() as Lowercase<WatchStatusV>}`)}
label={t(
`show.watchlistMark.${x.toLowerCase() as Lowercase<WatchStatusV>}`,
)}
onSelect={() => mutation.mutate(x)}
selected={x === status}
/>
@ -83,7 +88,7 @@ export const EpisodesContext = ({
/>
)}
</Menu.Sub>
{type !== "serie" && (
{kind !== "serie" && (
<>
{/* <Menu.Item */}
{/* label={t("home.episodeMore.download")} */}
@ -93,7 +98,7 @@ export const EpisodesContext = ({
<Menu.Item
label={t("home.episodeMore.mediainfo")}
icon={MovieInfo}
href={`/${type}/${slug}/info`}
href={`/${kind}/${slug}/info`}
/>
</>
)}
@ -113,20 +118,20 @@ export const EpisodesContext = ({
};
export const ItemContext = ({
type,
kind,
slug,
status,
force,
...props
}: {
type: "movie" | "serie";
kind: "movie" | "serie";
slug: string;
status: WatchStatusV | null;
force?: boolean;
} & Partial<ComponentProps<typeof Menu<typeof IconButton>>>) => {
return (
<EpisodesContext
type={type}
kind={kind}
slug={slug}
status={status}
showSlug={null}

8
front/src/components/items/index.ts
View File

@ -14,9 +14,11 @@ export const itemMap = (
href: item.href,
poster: item.poster,
thumbnail: item.thumbnail,
watchStatus: item.kind !== "collection" ? (item.watchStatus?.status ?? null) : null,
watchPercent: item.kind === "movie" ? (item.watchStatus?.percent ?? null) : null,
// unseenEpisodesCount:
watchStatus:
item.kind !== "collection" ? (item.watchStatus?.status ?? null) : null,
watchPercent:
item.kind === "movie" ? (item.watchStatus?.percent ?? null) : null,
unseenEpisodesCount: 0,
// item.kind === "serie" ? (item.watchStatus?.unseenEpisodesCount ?? item.episodesCount!) : null,
});

39
front/src/components/items/item-grid.tsx
View File

@ -1,21 +1,27 @@
import { useState } from "react";
import { type ImageStyle, Platform, View } from "react-native";
import { type Stylable, type Theme, percent, px, useYoshiki } from "yoshiki/native";
import {
percent,
px,
type Stylable,
type Theme,
useYoshiki,
} from "yoshiki/native";
import type { KImage, WatchStatusV } from "~/models";
import {
focusReset,
important,
Link,
P,
Poster,
PosterBackground,
Skeleton,
SubP,
focusReset,
important,
ts,
} from "~/primitives";
import type { Layout } from "~/query";
import { ItemWatchStatus } from "./item-helpers";
import { ItemContext } from "./context-menus";
import { ItemWatchStatus } from "./item-helpers";
export const ItemProgress = ({ watchPercent }: { watchPercent: number }) => {
const { css } = useYoshiki("episodebox");
@ -48,7 +54,7 @@ export const ItemGrid = ({
href,
slug,
name,
type,
kind,
subtitle,
poster,
watchStatus,
@ -63,7 +69,7 @@ export const ItemGrid = ({
poster: KImage | null;
watchStatus: WatchStatusV | null;
watchPercent: number | null;
type: "movie" | "serie" | "collection";
kind: "movie" | "serie" | "collection";
unseenEpisodesCount: number | null;
} & Stylable<"text">) => {
const [moreOpened, setMoreOpened] = useState(false);
@ -111,11 +117,16 @@ export const ItemGrid = ({
layout={{ width: percent(100) }}
{...(css("poster") as { style: ImageStyle })}
>
<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
{type === "movie" && watchPercent && <ItemProgress watchPercent={watchPercent} />}
{type !== "collection" && (
<ItemWatchStatus
watchStatus={watchStatus}
unseenEpisodesCount={unseenEpisodesCount}
/>
{kind === "movie" && watchPercent && (
<ItemProgress watchPercent={watchPercent} />
)}
{kind !== "collection" && (
<ItemContext
type={type}
kind={kind}
slug={slug}
status={watchStatus}
isOpen={moreOpened}
@ -128,12 +139,16 @@ export const ItemGrid = ({
bg: (theme) => theme.dark.background,
},
"more",
Platform.OS === "web" && moreOpened && { display: important("flex") },
Platform.OS === "web" &&
moreOpened && { display: important("flex") },
])}
/>
)}
</PosterBackground>
<P numberOfLines={subtitle ? 1 : 2} {...css([{ marginY: 0, textAlign: "center" }, "title"])}>
<P
numberOfLines={subtitle ? 1 : 2}
{...css([{ marginY: 0, textAlign: "center" }, "title"])}
>
{name}
</P>
{subtitle && (

186
front/src/components/items/item-list.tsx
View File

@ -1,26 +1,26 @@
import { useState } from "react";
import { Platform, View } from "react-native";
import { percent, px, rem, useYoshiki } from "yoshiki/native";
import type { KyooImage, WatchStatusV } from "~/models";
import type { KImage, WatchStatusV } from "~/models";
import {
GradientImageBackground,
Heading,
important,
Link,
P,
Poster,
PosterBackground,
Skeleton,
imageBorderRadius,
important,
ts,
} from "~/primitives";
import type { Layout } from "~/query";
import { ItemContext } from "./context-menus";
import { ItemWatchStatus } from "./item-helpers";
export const ItemList = ({
href,
slug,
type,
kind,
name,
subtitle,
thumbnail,
@ -31,11 +31,11 @@ export const ItemList = ({
}: {
href: string;
slug: string;
type: "movie" | "show" | "collection";
kind: "movie" | "serie" | "collection";
name: string;
subtitle: string | null;
poster: KyooImage | null;
thumbnail: KyooImage | null;
poster: KImage | null;
thumbnail: KImage | null;
watchStatus: WatchStatusV | null;
unseenEpisodesCount: number | null;
}) => {
@ -43,98 +43,110 @@ export const ItemList = ({
const [moreOpened, setMoreOpened] = useState(false);
return (
<GradientImageBackground
src={thumbnail}
alt={name}
quality="medium"
as={Link}
<Link
href={moreOpened ? undefined : href}
onLongPress={() => setMoreOpened(true)}
{...css(
{
alignItems: "center",
justifyContent: "space-evenly",
flexDirection: "row",
height: ItemList.layout.size,
borderRadius: px(imageBorderRadius),
overflow: "hidden",
marginX: ItemList.layout.gap,
child: {
more: {
opacity: 0,
},
},
fover: {
title: {
textDecorationLine: "underline",
},
more: {
opacity: 100,
},
{...css({
child: {
more: {
opacity: 0,
},
},
props,
)}
fover: {
title: {
textDecorationLine: "underline",
},
more: {
opacity: 100,
},
},
})}
>
<View
{...css({
width: { xs: "50%", lg: "30%" },
})}
<GradientImageBackground
src={thumbnail}
alt={name}
quality="medium"
layout={{ width: percent(100), height: ItemList.layout.size }}
{...(css(
{
alignItems: "center",
justifyContent: "space-evenly",
flexDirection: "row",
borderRadius: px(10),
overflow: "hidden",
},
props,
) as any)}
>
<View
{...css({
flexDirection: "row",
justifyContent: "center",
width: { xs: "50%", lg: "30%" },
})}
>
<Heading
{...css([
"title",
{
textAlign: "center",
fontSize: rem(2),
letterSpacing: rem(0.002),
fontWeight: "900",
textTransform: "uppercase",
},
])}
>
{name}
</Heading>
{type !== "collection" && (
<ItemContext
type={type}
slug={slug}
status={watchStatus}
isOpen={moreOpened}
setOpen={(v) => setMoreOpened(v)}
{...css([
{
// I dont know why marginLeft gets overwritten by the margin: px(2) so we important
marginLeft: important(ts(2)),
bg: (theme) => theme.darkOverlay,
},
"more",
Platform.OS === "web" && moreOpened && { opacity: important(100) },
])}
/>
)}
</View>
{subtitle && (
<P
<View
{...css({
textAlign: "center",
marginRight: ts(4),
flexDirection: "row",
justifyContent: "center",
})}
>
{subtitle}
</P>
)}
</View>
<PosterBackground src={poster} alt="" quality="low" layout={{ height: percent(80) }}>
<ItemWatchStatus watchStatus={watchStatus} unseenEpisodesCount={unseenEpisodesCount} />
</PosterBackground>
</GradientImageBackground>
<Heading
{...css([
"title",
{
textAlign: "center",
fontSize: rem(2),
letterSpacing: rem(0.002),
fontWeight: "900",
textTransform: "uppercase",
},
])}
>
{name}
</Heading>
{kind !== "collection" && (
<ItemContext
kind={kind}
slug={slug}
status={watchStatus}
isOpen={moreOpened}
setOpen={(v) => setMoreOpened(v)}
{...css([
{
// I dont know why marginLeft gets overwritten by the margin: px(2) so we important
marginLeft: important(ts(2)),
bg: (theme) => theme.darkOverlay,
},
"more",
Platform.OS === "web" &&
moreOpened && { opacity: important(100) },
])}
/>
)}
</View>
{subtitle && (
<P
{...css({
textAlign: "center",
marginRight: ts(4),
})}
>
{subtitle}
</P>
)}
</View>
<PosterBackground
src={poster}
alt=""
quality="low"
layout={{ height: percent(80) }}
>
<ItemWatchStatus
watchStatus={watchStatus}
unseenEpisodesCount={unseenEpisodesCount}
/>
</PosterBackground>
</GradientImageBackground>
</Link>
);
};
@ -149,7 +161,7 @@ ItemList.Loader = (props: object) => {
justifyContent: "space-evenly",
flexDirection: "row",
height: ItemList.layout.size,
borderRadius: px(imageBorderRadius),
borderRadius: px(10),
overflow: "hidden",
bg: (theme) => theme.dark.background,
marginX: ItemList.layout.gap,

15
front/src/primitives/image-background.tsx
View File

@ -2,6 +2,7 @@ import { ImageBackground as EImageBackground } from "expo-image";
import { LinearGradient, type LinearGradientProps } from "expo-linear-gradient";
import type { ComponentProps, ReactNode } from "react";
import type { ImageStyle } from "react-native";
import { Platform } from "react-native";
import { useYoshiki } from "yoshiki/native";
import type { KImage } from "~/models";
import { useToken } from "~/providers/account-context";
@ -31,11 +32,13 @@ export const ImageBackground = ({
<EImageBackground
source={{
uri: src ? `${apiUrl}${src[quality ?? "high"]}` : null,
headers: authToken
? {
Authorization: authToken,
}
: {},
// use cookies on web to allow `img` to make the call instead of js
headers:
authToken && Platform.OS !== "web"
? {
Authorization: authToken,
}
: undefined,
}}
placeholder={{ blurhash: src?.blurhash }}
accessibilityLabel={alt}
@ -57,7 +60,7 @@ export const PosterBackground = ({
<ImageBackground
alt={alt!}
layout={{ aspectRatio: 2 / 3, ...layout }}
{...css({ borderRadius: 6 }, props)}
{...css({ borderRadius: 10, overflow: "hidden" }, props)}
/>
);
};

14
front/src/primitives/image.tsx
View File

@ -1,6 +1,6 @@
import { Image as EImage } from "expo-image";
import type { ComponentProps } from "react";
import type { ImageStyle, ViewStyle } from "react-native";
import { type ImageStyle, Platform, type ViewStyle } from "react-native";
import { useYoshiki } from "yoshiki/native";
import type { YoshikiStyle } from "yoshiki/src/type";
import type { KImage } from "~/models";
@ -41,11 +41,13 @@ export const Image = ({
<EImage
source={{
uri: src ? `${apiUrl}${src[quality ?? "high"]}` : null,
headers: authToken
? {
Authorization: authToken,
}
: {},
// use cookies on web to allow `img` to make the call instead of js
headers:
authToken && Platform.OS !== "web"
? {
Authorization: authToken,
}
: undefined,
}}
placeholder={{ blurhash: src?.blurhash }}
accessibilityLabel={alt}

6
front/src/primitives/utils/breakpoint.ts
View File

@ -1,5 +1,5 @@
import { useWindowDimensions } from "react-native";
import { type Breakpoints as YoshikiBreakpoint, breakpoints, isBreakpoints } from "yoshiki/native";
import { breakpoints, isBreakpoints, type Breakpoints as YoshikiBreakpoint } from "yoshiki/native";
type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
export type Breakpoint<T> = T | AtLeastOne<YoshikiBreakpoint<T>>;
@ -7,9 +7,9 @@ export type Breakpoint<T> = T | AtLeastOne<YoshikiBreakpoint<T>>;
// copied from yoshiki.
const useBreakpoint = () => {
const { width } = useWindowDimensions();
const idx = Object.values(breakpoints).findIndex((x) => width <= x);
const idx = Object.values(breakpoints).findLastIndex((x) => x <= width);
if (idx === -1) return 0;
return idx - 1;
return idx;
};
const getBreakpointValue = <T>(value: Breakpoint<T>, breakpoint: number): T => {

3
front/src/primitives/utils/spacing.tsx
View File

@ -1,12 +1,11 @@
import { Platform } from "react-native";
import { px } from "yoshiki/native";
export const important = <T,>(value: T): T => {
return `${value} !important` as T;
};
export const ts = (spacing: number) => {
return px(spacing * 8);
return spacing * 8;
};
export const focusReset: object =

4
front/src/query/fetch-infinite.tsx
View File

@ -80,12 +80,10 @@ export const InfiniteFetch = <Data, Props, _, Kind extends number | string>({
onEndReachedThreshold={0.5}
onRefresh={layout.layout !== "horizontal" ? refetch : undefined}
refreshing={isRefetching}
ListHeaderComponent={Header}
ItemSeparatorComponent={divider === true ? HR : (divider as any) || undefined}
ListEmptyComponent={Empty}
contentContainerStyle={{ gap, margin: gap }}
contentContainerStyle={{ gap, marginHorizontal: gap }}
{...props}
/>
);

49
front/src/ui/browse/header.tsx
View File

@ -11,10 +11,22 @@ import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
import { useTranslation } from "react-i18next";
import { type PressableProps, View } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "~/primitives";
import { type SortBy, type SortOrd, availableSorts } from "./types";
import {
HR,
Icon,
IconButton,
Menu,
P,
PressableFeedback,
tooltip,
ts,
} from "~/primitives";
import { availableSorts, type SortBy, type SortOrd } from "./types";
const SortTrigger = ({ sortBy, ...props }: { sortBy: SortBy } & PressableProps) => {
const SortTrigger = ({
sortBy,
...props
}: { sortBy: SortBy } & PressableProps) => {
const { css } = useYoshiki();
const { t } = useTranslation();
@ -48,8 +60,17 @@ const MediaTypeTrigger = ({
{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
{...tooltip(t("browse.mediatype-tt"))}
>
<Icon icon={MediaTypeIcons[mediaType] ?? FilterList} {...css({ paddingX: ts(0.5) })} />
<P>{t(mediaType !== "all" ? `browse.mediatypekey.${mediaType}` : "browse.mediatypelabel")}</P>
<Icon
icon={MediaTypeIcons[mediaType] ?? FilterList}
{...css({ paddingX: ts(0.5) })}
/>
<P>
{t(
mediaType !== "all"
? `browse.mediatypekey.${mediaType}`
: "browse.mediatypelabel",
)}
</P>
</PressableFeedback>
);
};
@ -75,8 +96,9 @@ export const BrowseSettings = ({
const { t } = useTranslation();
// TODO: have a proper filter frontend
const mediaType = /kind eq (\w+)/.exec(filter)?.groups?.[0] ?? "all";
const setMediaType = (kind: string) => setFilter(kind !== "all " ? `kind eq ${kind}` : "");
const mediaType = /kind eq (\w+)/.exec(filter)?.[1] ?? "all";
const setMediaType = (kind: string) =>
setFilter(kind !== "all" ? `kind eq ${kind}` : "");
return (
<View
@ -95,7 +117,9 @@ export const BrowseSettings = ({
label={t(`browse.sortkey.${x}`)}
selected={sortBy === x}
icon={sortOrd === "asc" ? ArrowUpward : ArrowDownward}
onSelect={() => setSort(x, sortBy === x && sortOrd === "asc" ? "desc" : "asc")}
onSelect={() =>
setSort(x, sortBy === x && sortOrd === "asc" ? "desc" : "asc")
}
/>
))}
</Menu>
@ -115,8 +139,13 @@ export const BrowseSettings = ({
{...css({ padding: ts(0.5), marginY: "auto" })}
/>
</View>
<View {...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}>
<Menu Trigger={MediaTypeTrigger} mediaType={mediaType as keyof typeof MediaTypeIcons}>
<View
{...css({ flexGrow: 1, flexDirection: "row", alignItems: "center" })}
>
<Menu
Trigger={MediaTypeTrigger}
mediaType={mediaType as keyof typeof MediaTypeIcons}
>
{Object.keys(MediaTypeIcons).map((x) => (
<Menu.Item
key={x}

17
front/src/ui/browse/index.tsx
View File

@ -1,6 +1,5 @@
import { useState } from "react";
import { ItemGrid, itemMap } from "~/components/items";
import { ItemList } from "~/components/items";
import { ItemGrid, ItemList, itemMap } from "~/components/items";
import { Show } from "~/models";
import { InfiniteFetch, type QueryIdentifier } from "~/query";
import { useQueryState } from "~/utils";
@ -9,11 +8,11 @@ import type { SortBy, SortOrd } from "./types";
export const BrowsePage = () => {
const [filter, setFilter] = useQueryState("filter", "");
const [sort, setSort] = useQueryState("sortBy", "");
const sortBy = (sort?.split(":")[0] as SortBy) || "name";
const sortOrd = (sort?.split(":")[1] as SortOrd) || "asc";
const [sort, setSort] = useQueryState("sort", "name");
const sortOrd = sort.startsWith("-") ? "desc" : "asc";
const sortBy = (sort.startsWith("-") ? sort.substring(1) : sort) as SortBy;
const [layout, setLayout] = useState<"grid" | "list">("grid");
const [layout, setLayout] = useQueryState<"grid" | "list">("layout", "grid");
const LayoutComponent = layout === "grid" ? ItemGrid : ItemList;
return (
@ -25,7 +24,7 @@ export const BrowsePage = () => {
sortBy={sortBy}
sortOrd={sortOrd}
setSort={(key, ord) => {
setSort(`${key}:${ord}`);
setSort(ord === "desc" ? `-${key}` : key);
}}
filter={filter}
setFilter={setFilter}
@ -41,7 +40,7 @@ export const BrowsePage = () => {
BrowsePage.query = (
filter?: string,
sortKey?: SortBy,
sortBy?: SortBy,
sortOrd?: SortOrd,
): QueryIdentifier<Show> => {
return {
@ -49,7 +48,7 @@ BrowsePage.query = (
path: ["shows"],
infinite: true,
params: {
sort: sortKey ? `${sortKey}:${sortOrd ?? "asc"}` : "name:asc",
sort: sortBy ? `${sortOrd === "desc" ? "-" : ""}${sortBy}` : "name",
filter,
},
};

2
front/src/utils.ts
View File

@ -1,5 +1,6 @@
import { NavigationContext, useRoute } from "@react-navigation/native";
import { useContext } from "react";
import type { Movie, Show } from "~/models";
export function setServerData(key: string, val: any) {}
export function getServerData(key: string) {
@ -35,4 +36,3 @@ export const getDisplayDate = (data: Show | Movie) => {
}
return null;
};