mirror of https://github.com/sussy-code/smov.git
Create MediaBookmark.tsx
This commit is contained in:
parent
c33efc51ee
commit
690ea3480c
|
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue