bookmark entire collection as a group

This commit is contained in:
Pas 2025-11-05 22:54:19 -07:00
parent c3d653ce8d
commit abd661e8a2

View file

@ -9,6 +9,7 @@ import { MediaCard } from "@/components/media/MediaCard";
import { Flare } from "@/components/utils/Flare";
import { useIsMobile } from "@/hooks/useIsMobile";
import { CarouselNavButtons } from "@/pages/discover/components/CarouselNavButtons";
import { useBookmarkStore } from "@/stores/bookmarks";
import { useOverlayStack } from "@/stores/interface/overlayStack";
import { MediaItem } from "@/utils/mediaTypes";
@ -109,6 +110,9 @@ export function CollectionOverlay({
}: CollectionOverlayProps) {
const { t } = useTranslation();
const { showModal } = useOverlayStack();
const addBookmarkWithGroups = useBookmarkStore(
(s) => s.addBookmarkWithGroups,
);
const [collection, setCollection] = useState<CollectionData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@ -161,6 +165,29 @@ export function CollectionOverlay({
};
};
const handleBookmarkCollection = () => {
if (!collection?.parts) return;
collection.parts.forEach((movie) => {
const year = movie.release_date
? new Date(movie.release_date).getFullYear()
: undefined;
// Skip movies without a release year
if (year === undefined) return;
const meta = {
tmdbId: movie.id.toString(),
type: "movie" as const,
title: movie.title,
releaseYear: year,
poster: getMediaPoster(movie.poster_path) || "/placeholder.png",
};
addBookmarkWithGroups(meta, [collectionName]);
});
};
const handleShowDetails = (media: MediaItem) => {
// Show details modal and close collection overlay
showModal("details", {
@ -203,14 +230,28 @@ export function CollectionOverlay({
</h2>
<div className="flex items-center gap-4 flex-wrap">
{collection && (
<p className="text-sm text-white/80">
<span className="text-white font-semibold">
{collection.parts.length}
</span>{" "}
{collection.parts.length > 1
? t("details.collection.movies")
: t("details.collection.movie")}
</p>
<>
<p className="text-sm text-white/80">
<span className="text-white font-semibold">
{collection.parts.length}
</span>{" "}
{collection.parts.length > 1
? t("details.collection.movies")
: t("details.collection.movie")}
</p>
<button
type="button"
onClick={handleBookmarkCollection}
className="flex items-center gap-2 px-3 py-1 rounded-md text-xs font-medium bg-white/10 hover:bg-white/20 text-white/70 transition-colors"
title={`Bookmark entire ${collectionName} collection`}
>
<Icon
icon={Icons.BOOKMARK_OUTLINE}
className="text-xs"
/>
<span>Bookmark All</span>
</button>
</>
)}
{!loading && !error && sortedMovies.length > 1 && (
<div className="flex items-center gap-2">