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

Add login button instead of watchlist when user is not login

Browse Source
This commit is contained in:
Zoe Roux 2023-12-06 23:36:32 +01:00
parent 38cb4c4f28
commit f438e80d3a
3 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
front/packages/ui/src/home/watchlist.tsx
View File

@ -24,6 +24,7 @@ import {
WatchlistKind, WatchlistKind,
WatchlistP, WatchlistP,
getDisplayDate, getDisplayDate,
useAccount,
} from "@kyoo/models"; } from "@kyoo/models";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { ItemGrid } from "../browse/grid"; import { ItemGrid } from "../browse/grid";
@ -31,56 +32,66 @@ import { InfiniteFetch } from "../fetch-infinite";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Header } from "./genre"; import { Header } from "./genre";
import { EpisodeBox, episodeDisplayNumber } from "../details/episode"; import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
import { View } from "react-native";
import { Button, P, ts } from "@kyoo/primitives";
export const WatchlistList = () => { export const WatchlistList = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { css } = useYoshiki(); const { css } = useYoshiki();
const account = useAccount();
return ( return (
<> <>
<Header title={t("home.watchlist")} /> <Header title={t("home.watchlist")} />
<InfiniteFetch {account ? (
query={WatchlistList.query()} <InfiniteFetch
layout={{ ...ItemGrid.layout, layout: "horizontal" }} query={WatchlistList.query()}
getItemType={(x, i) => layout={{ ...ItemGrid.layout, layout: "horizontal" }}
(x.kind === WatchlistKind.Show && x.watchStatus?.nextEpisode) || (x.isLoading && i % 2) getItemType={(x, i) =>
? "episode" (x.kind === WatchlistKind.Show && x.watchStatus?.nextEpisode) || (x.isLoading && i % 2)
: "item" ? "episode"
} : "item"
empty={t("home.none")} }
> empty={t("home.none")}
{(x, i) => { >
const episode = x.kind === WatchlistKind.Show ? x.watchStatus?.nextEpisode : null; {(x, i) => {
return (x.kind === WatchlistKind.Show && x.watchStatus?.nextEpisode) || const episode = x.kind === WatchlistKind.Show ? x.watchStatus?.nextEpisode : null;
(x.isLoading && i % 2) ? ( return (x.kind === WatchlistKind.Show && x.watchStatus?.nextEpisode) ||
<EpisodeBox (x.isLoading && i % 2) ? (
isLoading={x.isLoading as any} <EpisodeBox
name={episode ? `${x.name} ${episodeDisplayNumber(episode)}` : undefined} isLoading={x.isLoading as any}
overview={episode?.name} name={episode ? `${x.name} ${episodeDisplayNumber(episode)}` : undefined}
thumbnail={episode?.thumbnail ?? x.thumbnail} overview={episode?.name}
href={episode?.href} thumbnail={episode?.thumbnail ?? x.thumbnail}
watchedPercent={x.watchStatus?.watchedPercent || null} href={episode?.href}
// TODO: support this on mobile too watchedPercent={x.watchStatus?.watchedPercent || null}
// @ts-expect-error This is a web only property // TODO: support this on mobile too
{...css({ gridColumnEnd: "span 2" })} // @ts-expect-error This is a web only property
/> {...css({ gridColumnEnd: "span 2" })}
) : ( />
<ItemGrid ) : (
isLoading={x.isLoading as any} <ItemGrid
href={x.href} isLoading={x.isLoading as any}
name={x.name!} href={x.href}
subtitle={!x.isLoading ? getDisplayDate(x) : undefined} name={x.name!}
poster={x.poster} subtitle={!x.isLoading ? getDisplayDate(x) : undefined}
watchStatus={x.watchStatus?.status || null} poster={x.poster}
watchPercent={x.watchStatus?.watchedPercent || null} watchStatus={x.watchStatus?.status || null}
unseenEpisodesCount={ watchPercent={x.watchStatus?.watchedPercent || null}
x.kind === WatchlistKind.Show ? x.watchStatus?.unseenEpisodesCount : null unseenEpisodesCount={
} x.kind === WatchlistKind.Show ? x.watchStatus?.unseenEpisodesCount : null
type={x.kind === WatchlistKind.Movie ? "movie" : "show"} }
/> type={x.kind === WatchlistKind.Movie ? "movie" : "show"}
); />
}} );
</InfiniteFetch> }}
</InfiniteFetch>
) : (
<View {...css({ justifyContent: "center", alignItems: "center" })}>
<P>{t("home.watchlistLogin")}</P>
<Button text={t("login.login")} href={"/login"} {...css({ minWidth: ts(24), margin: ts(2) })}/>
</View>
)}
</> </>
); );
}; };

3
front/translations/en.json
View File

@ -4,7 +4,8 @@
"news": "News", "news": "News",
"watchlist": "Continue watching", "watchlist": "Continue watching",
"info": "See more", "info": "See more",
"none": "No episodes" "none": "No episodes",
"watchlistLogin": "To keep track of what you watched or plan to watch, you need to login."
}, },
"show": { "show": {
"play": "Play", "play": "Play",

3
front/translations/fr.json
View File

@ -4,7 +4,8 @@
"news": "Nouveautés", "news": "Nouveautés",
"watchlist": "Continuer de regarder", "watchlist": "Continuer de regarder",
"info": "Voir plus", "info": "Voir plus",
"none": "Aucun episode" "none": "Aucun episode",
"watchlistLogin": "Pour suivre ce que vous avez regardé ou prévoyez de regarder, vous devez vous connecter."
}, },
"show": { "show": {
"play": "Lecture", "play": "Lecture",