Add a watch observer to register watch status when playing

front/packages/ui/src/components/watchlist-info.tsx

@@ -82,7 +82,12 @@ export const WatchListInfo = ({
 		case WatchStatusV.Watching:
 		case WatchStatusV.Droped:
 			return (
-				<Menu Trigger={IconButton} icon={Bookmark} {...tooltip(t("show.watchlistEdit"))} {...props}>
+				<Menu
+					Trigger={IconButton}
+					icon={status === WatchStatusV.Droped ? BookmarkRemove : Bookmark}
+					{...tooltip(t("show.watchlistEdit"))}
+					{...props}
+				>
 					{Object.values(WatchStatusV).map((x) => (
 						<Menu.Item
 							key={x}

front/packages/ui/src/player/index.tsx

@@ -42,6 +42,7 @@ import { episodeDisplayNumber } from "../details/episode";
 import { useVideoKeyboard } from "./keyboard";
 import { MediaSessionManager } from "./media-session";
 import { ErrorView } from "../fetch";
+import { WatchStatusObserver } from "./watch-status-observer";
 
 type Item = (Movie & { type: "movie" }) | (Episode & { type: "episode" });
 
@@ -203,6 +204,7 @@ export const Player: QueryPage<{ slug: string; type: "episode" | "movie" }> = ({
 				next={next}
 				previous={previous}
 			/>
+			{data && <WatchStatusObserver type={type} slug={data.slug} />}
 			<View
 				onPointerLeave={(e) => {
 					if (e.nativeEvent.pointerType === "mouse") setMouseMoved(false);

front/packages/ui/src/player/watch-status-observer.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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 { WatchStatusV, queryFn } from "@kyoo/models";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { useAtomValue } from "jotai";
+import { playAtom, progressAtom } from "./state";
+
+export const WatchStatusObserver = ({
+	type,
+	slug,
+}: {
+	type: "episode" | "movie";
+	slug: string;
+}) => {
+	const queryClient = useQueryClient();
+	const mutation = useMutation({
+		mutationFn: (seconds: number) =>
+			queryFn({
+				path: [
+					type,
+					slug,
+					"watchStatus",
+					`?status=${WatchStatusV.Watching}&watchedTime=${Math.round(seconds)}`,
+				],
+				method: "POST",
+			}),
+		onSettled: async () =>
+			await queryClient.invalidateQueries({ queryKey: [type === "episode" ? "show" : type, slug] }),
+	});
+
+	const isPlaying = useAtomValue(playAtom);
+	const progress = useAtomValue(progressAtom);
+	useEffect(() => {
+		mutation.mutate(progress);
+		// Do not make a request every seconds.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [type, slug, isPlaying]);
+	return null;
+};