diff --git a/apps/frontend/app/components/common/entity-display.tsx b/apps/frontend/app/components/common/entity-display.tsx index 203296dcbc..a708f9feec 100644 --- a/apps/frontend/app/components/common/entity-display.tsx +++ b/apps/frontend/app/components/common/entity-display.tsx @@ -274,6 +274,7 @@ type BaseEntityDisplayItemCard = { isDetailsLoading: boolean; wasRecentlyConsumed?: boolean; isPartialStatusActive?: boolean; + isCalendarEventWatched?: boolean; consumeButtonIndicatorLabel?: string; userToMediaReasons?: UserToMediaReason[]; onImageClickBehavior: [string, (() => Promise)?]; @@ -328,13 +329,17 @@ const BaseEntityDisplayItemComponent = forwardRef< () => ({ overflow: "hidden", transition: "box-shadow 200ms ease", - boxShadow: shouldHighlightImage + boxShadow: props.isCalendarEventWatched ? mode === "dark" - ? "0px 0px 4px 1px rgba(242, 183, 22, 1)" - : "0px 0px 8px 3px rgba(24, 142, 245, 1)" - : undefined, + ? "0px 0px 4px 1px rgba(64, 192, 87, 1)" + : "0px 0px 8px 3px rgba(47, 158, 68, 1)" + : shouldHighlightImage + ? mode === "dark" + ? "0px 0px 4px 1px rgba(242, 183, 22, 1)" + : "0px 0px 8px 3px rgba(24, 142, 245, 1)" + : undefined, }), - [mode, shouldHighlightImage], + [mode, shouldHighlightImage, props.isCalendarEventWatched], ); const gradientBackgroundStyle = useMemo( () => ({ @@ -432,7 +437,7 @@ const BaseEntityDisplayItemComponent = forwardRef< style={cardStyle} ref={viewportRef} className={props.imageClassName} - withBorder={!shouldHighlightImage} + withBorder={!shouldHighlightImage && !props.isCalendarEventWatched} > {props.centerElement ? ( <> diff --git a/apps/frontend/app/components/media/display-items.tsx b/apps/frontend/app/components/media/display-items.tsx index ef3039f6e7..2ceddb0243 100644 --- a/apps/frontend/app/components/media/display-items.tsx +++ b/apps/frontend/app/components/media/display-items.tsx @@ -4,6 +4,8 @@ import { EntityTranslationVariant, MediaLot, SeenState, + type SeenShowExtraInformationPartFragment, + type SeenPodcastExtraInformationPartFragment, UserToMediaReason, } from "@ryot/generated/graphql/backend/graphql"; import { changeCase, snakeCase } from "@ryot/ts-utils"; @@ -32,6 +34,8 @@ export const MetadataDisplayItem = (props: { additionalInformation?: string; shouldHighlightNameIfInteracted?: boolean; onImageClickBehavior?: () => Promise; + calendarEventShowInfo?: SeenShowExtraInformationPartFragment; + calendarEventPodcastInfo?: SeenPodcastExtraInformationPartFragment; }) => { const { ref, inViewport } = useInViewport(); @@ -72,6 +76,31 @@ export const MetadataDisplayItem = (props: { [UserToMediaReason.Finished, UserToMediaReason.Owned].includes(r), ); + const isCalendarEventWatched = useMemo(() => { + if (!userMetadataDetails) return false; + if (props.calendarEventShowInfo) { + const seasonProgress = userMetadataDetails.showProgress?.find( + (s) => s.seasonNumber === props.calendarEventShowInfo?.season, + ); + if (!seasonProgress) return false; + const episodeProgress = seasonProgress.episodes.find( + (e) => e.episodeNumber === props.calendarEventShowInfo?.episode, + ); + return (episodeProgress?.timesSeen ?? 0) > 0; + } + if (props.calendarEventPodcastInfo) { + const episodeProgress = userMetadataDetails.podcastProgress?.find( + (e) => e.episodeNumber === props.calendarEventPodcastInfo?.episode, + ); + return (episodeProgress?.timesSeen ?? 0) > 0; + } + return false; + }, [ + userMetadataDetails, + props.calendarEventShowInfo, + props.calendarEventPodcastInfo, + ]); + const extraInformation = useMemo(() => { if (!metadataDetails || !userMetadataDetails) return ""; @@ -113,6 +142,7 @@ export const MetadataDisplayItem = (props: { centerElement={props.centerElement} imageClassName={props.imageClassName} isDetailsLoading={isMetadataDetailsLoading} + isCalendarEventWatched={isCalendarEventWatched} wasRecentlyConsumed={isMetadataRecentlyConsumed} isPartialStatusActive={isMetadataPartialStatusActive} image={metadataImageTranslation || images.at(0)} diff --git a/apps/frontend/app/routes/_dashboard.calendar.tsx b/apps/frontend/app/routes/_dashboard.calendar.tsx index 860381775a..43c232e52e 100644 --- a/apps/frontend/app/routes/_dashboard.calendar.tsx +++ b/apps/frontend/app/routes/_dashboard.calendar.tsx @@ -120,6 +120,8 @@ const CalendarEventMetadata = (props: { ); };