Rework browse settings

front/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from "./item-grid";
-export * from "./item-list";

front/src/components/items/context-menus.tsx

@@ -1,23 +1,3 @@
-/*
- * Kyoo - A portable and vast media library solution.
- * Copyright (c) Kyoo.
- *
- * See AUTHORS.md and LICENSE file in the project root for full license information.
- *
- * Kyoo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * any later version.
- *
- * Kyoo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
- */
-
 import Refresh from "@material-symbols/svg-400/rounded/autorenew.svg";
 // import Download from "@material-symbols/svg-400/rounded/download.svg";
 import Info from "@material-symbols/svg-400/rounded/info.svg";
@@ -27,12 +7,15 @@ import type { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import { WatchStatusV } from "~/models";
+import type { Serie } from "~/models";
 import { HR, IconButton, Menu, tooltip } from "~/primitives";
 import { useAccount } from "~/providers/account-context";
 import { useMutation } from "~/query";
+import { watchListIcon } from "./watchlist-info";
 // import { useDownloader } from "../../packages/ui/src/downloadses/ui/src/downloads";
 
+type WatchStatusV = NonNullable<Serie["watchStatus"]>["status"];
+
 export const EpisodesContext = ({
 	type = "episode",
 	slug,

front/src/components/items/index.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import type { Show } from "~/models";
+import { getDisplayDate } from "~/utils";
+import { ItemGrid } from "./item-grid";
+import { ItemList } from "./item-list";
+
+export const itemMap = (
+	item: Show,
+): ComponentProps<typeof ItemGrid> & ComponentProps<typeof ItemList> => ({
+	kind: item.kind,
+	slug: item.slug,
+	name: item.name,
+	subtitle: item.kind !== "collection" ? getDisplayDate(item) : null,
+	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:
+	// 	item.kind === "serie" ? (item.watchStatus?.unseenEpisodesCount ?? item.episodesCount!) : null,
+});
+
+export { ItemGrid, ItemList };

front/src/components/items/watchlist-info.tsx

@@ -4,18 +4,21 @@ import BookmarkAdded from "@material-symbols/svg-400/rounded/bookmark_added-fill
 import BookmarkRemove from "@material-symbols/svg-400/rounded/bookmark_remove.svg";
 import type { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
-import { WatchStatusV } from "~/models";
+import type { Serie } from "~/models";
 import { IconButton, Menu, tooltip } from "~/primitives";
 import { useAccount } from "~/providers/account-context";
 import { useMutation } from "~/query";
 
-export const watchListIcon = (status: WatchStatusV | null) => {
+type WatchStatus = NonNullable<Serie["watchStatus"]>["status"];
+const WatchStatus = ["completed", "watching", "rewatching", "dropped", "planned"] as const;
+
+export const watchListIcon = (status: WatchStatus | null) => {
 	switch (status) {
 		case null:
 			return BookmarkAdd;
-		case WatchStatusV.Completed:
+		case "completed":
 			return BookmarkAdded;
-		case WatchStatusV.Droped:
+		case "dropped":
 			return BookmarkRemove;
 		default:
 			return Bookmark;
@@ -30,7 +33,7 @@ export const WatchListInfo = ({
 }: {
 	type: "movie" | "show" | "episode";
 	slug: string;
-	status: WatchStatusV | null;
+	status: WatchStatus | null;
 	color: ComponentProps<typeof IconButton>["color"];
 }) => {
 	const account = useAccount();
@@ -38,7 +41,7 @@ export const WatchListInfo = ({
 
 	const mutation = useMutation({
 		path: [type, slug, "watchStatus"],
-		compute: (newStatus: WatchStatusV | null) => ({
+		compute: (newStatus: WatchStatus | null) => ({
 			method: newStatus ? "POST" : "DELETE",
 			params: newStatus ? { status: newStatus } : undefined,
 		}),
@@ -57,12 +60,12 @@ export const WatchListInfo = ({
 			return (
 				<IconButton
 					icon={BookmarkAdd}
-					onPress={() => mutation.mutate(WatchStatusV.Planned)}
+					onPress={() => mutation.mutate("planned")}
 					{...tooltip(t("show.watchlistAdd"))}
 					{...props}
 				/>
 			);
-		case WatchStatusV.Completed:
+		case "completed":
 			return (
 				<IconButton
 					icon={BookmarkAdded}
@@ -71,9 +74,10 @@ export const WatchListInfo = ({
 					{...props}
 				/>
 			);
-		case WatchStatusV.Planned:
-		case WatchStatusV.Watching:
-		case WatchStatusV.Droped:
+		case "planned":
+		case "watching":
+		case "rewatching":
+		case "dropped":
 			return (
 				<Menu
 					Trigger={IconButton}
@@ -81,10 +85,10 @@ export const WatchListInfo = ({
 					{...tooltip(t("show.watchlistEdit"))}
 					{...props}
 				>
-					{Object.values(WatchStatusV).map((x) => (
+					{Object.values(WatchStatus).map((x) => (
 						<Menu.Item
 							key={x}
-							label={t(`show.watchlistMark.${x.toLowerCase() as Lowercase<WatchStatusV>}`)}
+							label={t(`show.watchlistMark.${x}`)}
 							onSelect={() => mutation.mutate(x)}
 							selected={x === status}
 						/>