Add direct bookmarking from movie thumbnails

src/components/buttons/IconPatch.tsx

@@ -2,7 +2,7 @@ import { Icon, Icons } from "@/components/Icon";
 
 export interface IconPatchProps {
   active?: boolean;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   clickable?: boolean;
   className?: string;
   icon: Icons;

src/components/media/MediaCard.tsx

@@ -10,6 +10,7 @@ import { MediaItem } from "@/utils/mediaTypes";
 
 import { IconPatch } from "../buttons/IconPatch";
 import { Icons } from "../Icon";
+import { MediaCardBookmarkButton } from "../player/Player";
 
 export interface MediaCardProps {
   media: MediaItem;
@@ -22,6 +23,7 @@ export interface MediaCardProps {
   };
   percentage?: number;
   closable?: boolean;
+  shouldShowBookMark?: boolean;
   onClose?: () => void;
 }
 
@@ -45,6 +47,7 @@ function MediaCardContent({
   series,
   percentage,
   closable,
+  shouldShowBookMark = true,
   onClose,
 }: MediaCardProps) {
   const { t } = useTranslation();
@@ -153,6 +156,19 @@ function MediaCardContent({
               icon={Icons.X}
             />
           </div>
+
+          {shouldShowBookMark && (
+            <div
+              className={classNames(
+                `absolute left-2 top-2 rounded-md transition-opacity opacity-0 group-hover:opacity-100 duration-300`,
+                {
+                  "opacity-100": closable,
+                },
+              )}
+            >
+              <MediaCardBookmarkButton media={media} />
+            </div>
+          )}
         </div>
         <h1 className="mb-1 line-clamp-3 max-h-[4.5rem] text-ellipsis break-words font-bold text-white">
           <span>{media.title}</span>

src/components/media/WatchedMediaCard.tsx

@@ -22,6 +22,7 @@ function formatSeries(series?: ShowProgressResult | null) {
 export interface WatchedMediaCardProps {
   media: MediaItem;
   closable?: boolean;
+  shouldShowBookMark?: boolean;
   onClose?: () => void;
 }
 
@@ -46,6 +47,7 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
       percentage={percentage}
       onClose={props.onClose}
       closable={props.closable}
+      shouldShowBookMark={props.shouldShowBookMark}
     />
   );
 }

src/components/player/internals/BookmarkButton.tsx

@@ -1,8 +1,10 @@
 import { useCallback } from "react";
 
+import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { useBookmarkStore } from "@/stores/bookmarks";
 import { usePlayerStore } from "@/stores/player/store";
+import { MediaItem } from "@/utils/mediaTypes";
 
 import { VideoPlayerButton } from "./Button";
 
@@ -28,3 +30,39 @@ export function BookmarkButton() {
     />
   );
 }
+
+export function MediaCardBookmarkButton(props: { media: MediaItem }) {
+  const addBookmark = useBookmarkStore((s) => s.addBookmark);
+  const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
+  const bookmarks = useBookmarkStore((s) => s.bookmarks);
+  const isBookmarked = !!bookmarks[props.media.id];
+
+  const toggleBookmark = useCallback(
+    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      event.preventDefault();
+      if (!props.media.year) return;
+      if (isBookmarked) {
+        removeBookmark(props.media.id);
+      } else {
+        addBookmark({
+          tmdbId: props.media.id,
+          title: props.media.title,
+          releaseYear: props.media.year,
+          type: props.media.type,
+          poster: props.media.poster,
+        });
+      }
+    },
+    [isBookmarked, props.media, addBookmark, removeBookmark],
+  );
+
+  if (!props.media.year) return null;
+
+  return (
+    <IconPatch
+      clickable
+      onClick={toggleBookmark}
+      icon={isBookmarked ? Icons.BOOKMARK : Icons.BOOKMARK_OUTLINE}
+    />
+  );
+}

src/pages/parts/home/BookmarksPart.tsx

@@ -58,6 +58,7 @@ export function BookmarksPart() {
             media={v}
             closable={editing}
             onClose={() => removeBookmark(v.id)}
+            shouldShowBookMark={false}
           />
         ))}
       </MediaGrid>