diff --git a/src/components/overlays/detailsModal/components/layout/DetailsContent.tsx b/src/components/overlays/detailsModal/components/layout/DetailsContent.tsx index 709655af..52ff59c2 100644 --- a/src/components/overlays/detailsModal/components/layout/DetailsContent.tsx +++ b/src/components/overlays/detailsModal/components/layout/DetailsContent.tsx @@ -7,7 +7,7 @@ import { TMDBContentTypes } from "@/backend/metadata/types/tmdb"; import { Icon, Icons } from "@/components/Icon"; import { useLanguageStore } from "@/stores/language"; import { usePreferencesStore } from "@/stores/preferences"; -import { useProgressStore } from "@/stores/progress"; +import { getProgressPercentage, useProgressStore } from "@/stores/progress"; import { shouldShowProgress } from "@/stores/progress/utils"; import { scrapeIMDb } from "@/utils/imdbScraper"; import { getTmdbLanguageCode } from "@/utils/language"; @@ -38,10 +38,23 @@ export function DetailsContent({ data, minimal = false }: DetailsContentProps) { const [logoHeight, setLogoHeight] = useState(0); const logoRef = useRef(null); const progress = useProgressStore((s) => s.items); + const updateItem = useProgressStore((s) => s.updateItem); const enableImageLogos = usePreferencesStore( (state) => state.enableImageLogos, ); + // Check if movie is watched (>90% progress) + const isMovieWatched = useMemo(() => { + if (data.type !== "movie" || !data.id) return false; + const movieProgress = progress[data.id.toString()]?.progress; + if (!movieProgress) return false; + const percentage = getProgressPercentage( + movieProgress.watched, + movieProgress.duration, + ); + return percentage > 90; + }, [data.type, data.id, progress]); + const showProgress = useMemo(() => { if (!data.id) return null; const item = progress[data.id.toString()]; @@ -189,6 +202,30 @@ export function DetailsContent({ data, minimal = false }: DetailsContentProps) { } }; + const toggleMovieWatchStatus = () => { + if (data.type !== "movie" || !data.id) return; + + // Get the poster URL from the data + const posterUrl = data.posterUrl; + + // Update progress - if watched, set to 0%, otherwise set to 100% + updateItem({ + meta: { + tmdbId: data.id.toString(), + title: data.title || "", + type: "movie", + releaseYear: data.releaseDate + ? new Date(data.releaseDate).getFullYear() + : new Date().getFullYear(), + poster: posterUrl, + }, + progress: { + watched: isMovieWatched ? 0 : 60, // 60 seconds for "watched" + duration: 60, + }, + }); + }; + return (
{/* Share notification popup */} @@ -290,20 +327,40 @@ export function DetailsContent({ data, minimal = false }: DetailsContentProps) { {/* Genres */} {data.genres && data.genres.length > 0 && ( -
- {data.genres.map((genre, index) => ( - +
+ {data.genres.map((genre, index) => ( + + {genre.name} + + ))} +
+ {/* Movie Watch Toggle Button - Only show for movies and not in minimal modal */} + {data.type === "movie" && !minimal && ( + + )}
)} diff --git a/src/components/overlays/detailsModal/components/layout/DetailsModal.tsx b/src/components/overlays/detailsModal/components/layout/DetailsModal.tsx index ac91ea3e..6d090f4e 100644 --- a/src/components/overlays/detailsModal/components/layout/DetailsModal.tsx +++ b/src/components/overlays/detailsModal/components/layout/DetailsModal.tsx @@ -23,7 +23,13 @@ import { DetailsSkeleton } from "./DetailsSkeleton"; import { OverlayPortal } from "../../../OverlayDisplay"; import { DetailsModalProps } from "../../types"; -export function DetailsModal({ id, data: _data, minimal }: DetailsModalProps) { +export function DetailsModal({ + id, + data: _data, + minimal: _minimal, +}: DetailsModalProps) { + // Player details modal should always be minimal (hide episode carousel and movie watch button) + const minimal = _minimal || id === "player-details"; const { hideModal, isModalVisible, modalStack, getModalData } = useOverlayStack(); const [detailsData, setDetailsData] = useState(null);