From 690ea3480cc92113df300beb8772e651fcf94673 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 28 Apr 2024 22:08:34 -0600
Subject: [PATCH] Create MediaBookmark.tsx

---
 src/components/media/MediaBookmark.tsx | 44 ++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/media/MediaBookmark.tsx

diff --git a/src/components/media/MediaBookmark.tsx b/src/components/media/MediaBookmark.tsx
new file mode 100644
index 00000000..802fd7f2
--- /dev/null
+++ b/src/components/media/MediaBookmark.tsx
@@ -0,0 +1,44 @@
+import { useCallback, useMemo } from "react";
+
+import { Icons } from "@/components/Icon";
+import { useBookmarkStore } from "@/stores/bookmarks";
+import { PlayerMeta } from "@/stores/player/slices/source";
+import { MediaItem } from "@/utils/mediaTypes";
+
+import { IconPatch } from "../buttons/IconPatch";
+
+interface MediaBookmarkProps {
+  media: MediaItem;
+}
+
+export function MediaBookmarkButton({ media }: MediaBookmarkProps) {
+  const addBookmark = useBookmarkStore((s) => s.addBookmark);
+  const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
+  const bookmarks = useBookmarkStore((s) => s.bookmarks);
+  const meta: PlayerMeta | undefined = useMemo(() => {
+    return media.year !== undefined
+      ? {
+          type: media.type,
+          title: media.title,
+          tmdbId: media.id,
+          releaseYear: media.year,
+          poster: media.poster,
+        }
+      : undefined;
+  }, [media]);
+  const isBookmarked = !!bookmarks[meta?.tmdbId ?? ""];
+
+  const toggleBookmark = useCallback(() => {
+    if (!meta) return;
+    if (isBookmarked) removeBookmark(meta.tmdbId);
+    else addBookmark(meta);
+  }, [isBookmarked, meta, addBookmark, removeBookmark]);
+
+  return (
+    <IconPatch
+      onClick={toggleBookmark}
+      icon={isBookmarked ? Icons.BOOKMARK : Icons.BOOKMARK_OUTLINE}
+      className="p-3 opacity-80 transition-opacity duration-200 hover:opacity-100"
+    />
+  );
+}