dont show watched toggle button on unreleased episodes

This commit is contained in:
Pas 2025-07-07 22:03:34 -06:00
parent fedcb4d2b6
commit 30f0d4ac52
2 changed files with 76 additions and 68 deletions

View file

@ -423,23 +423,25 @@ export function EpisodeCarousel({
</div> </div>
{/* Mark as watched button */} {/* Mark as watched button */}
<div className="absolute top-2 right-2"> {isAired && (
<button <div className="absolute top-2 right-2">
type="button" <button
onClick={(e) => toggleWatchStatus(episode.id, e)} type="button"
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors" onClick={(e) => toggleWatchStatus(episode.id, e)}
title={ className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
isWatched title={
? t("player.menus.episodes.markAsUnwatched") isWatched
: t("player.menus.episodes.markAsWatched") ? t("player.menus.episodes.markAsUnwatched")
} : t("player.menus.episodes.markAsWatched")
> }
<Icon >
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE} <Icon
className="h-4 w-4 text-white/80" icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
/> className="h-4 w-4 text-white/80"
</button> />
</div> </button>
</div>
)}
</div> </div>
)} )}
@ -454,7 +456,7 @@ export function EpisodeCarousel({
<h3 className="font-bold text-white line-clamp-1"> <h3 className="font-bold text-white line-clamp-1">
{episode.name} {episode.name}
</h3> </h3>
{isExpanded && ( {isExpanded && isAired && (
<button <button
type="button" type="button"
onClick={(e) => toggleWatchStatus(episode.id, e)} onClick={(e) => toggleWatchStatus(episode.id, e)}

View file

@ -367,21 +367,23 @@ export function EpisodesView({
clickable={isAired} clickable={isAired}
rightSide={ rightSide={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button {isAired && (
type="button" <button
onClick={(e) => toggleWatchStatus(ep.id, e)} type="button"
className="p-1.5 rounded-full hover:bg-white/20 transition-colors" onClick={(e) => toggleWatchStatus(ep.id, e)}
title={ className="p-1.5 rounded-full hover:bg-white/20 transition-colors"
isWatched title={
? t("player.menus.episodes.markAsUnwatched") isWatched
: t("player.menus.episodes.markAsWatched") ? t("player.menus.episodes.markAsUnwatched")
} : t("player.menus.episodes.markAsWatched")
> }
<Icon >
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE} <Icon
className="h-4 w-4 text-white/80" icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
/> className="h-4 w-4 text-white/80"
</button> />
</button>
)}
{episodeProgress && ( {episodeProgress && (
<ProgressRing <ProgressRing
className="h-[18px] w-[18px] text-white" className="h-[18px] w-[18px] text-white"
@ -454,23 +456,25 @@ export function EpisodesView({
</div> </div>
{/* Mark as watched button */} {/* Mark as watched button */}
<div className="absolute top-2 right-2"> {isAired && (
<button <div className="absolute top-2 right-2">
type="button" <button
onClick={(e) => toggleWatchStatus(ep.id, e)} type="button"
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors" onClick={(e) => toggleWatchStatus(ep.id, e)}
title={ className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
isWatched title={
? t("player.menus.episodes.markAsUnwatched") isWatched
: t("player.menus.episodes.markAsWatched") ? t("player.menus.episodes.markAsUnwatched")
} : t("player.menus.episodes.markAsWatched")
> }
<Icon >
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE} <Icon
className="h-4 w-4 text-white/80" icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
/> className="h-4 w-4 text-white/80"
</button> />
</div> </button>
</div>
)}
</div> </div>
{/* Content */} {/* Content */}
@ -580,23 +584,25 @@ export function EpisodesView({
</div> </div>
{/* Mark as watched button */} {/* Mark as watched button */}
<div className="absolute top-2 right-2"> {isAired && (
<button <div className="absolute top-2 right-2">
type="button" <button
onClick={(e) => toggleWatchStatus(ep.id, e)} type="button"
className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors" onClick={(e) => toggleWatchStatus(ep.id, e)}
title={ className="p-1.5 bg-black/50 rounded-full hover:bg-black/80 transition-colors"
isWatched title={
? t("player.menus.episodes.markAsUnwatched") isWatched
: t("player.menus.episodes.markAsWatched") ? t("player.menus.episodes.markAsUnwatched")
} : t("player.menus.episodes.markAsWatched")
> }
<Icon >
icon={isWatched ? Icons.EYE_SLASH : Icons.EYE} <Icon
className="h-4 w-4 text-white/80" icon={isWatched ? Icons.EYE_SLASH : Icons.EYE}
/> className="h-4 w-4 text-white/80"
</button> />
</div> </button>
</div>
)}
</div> </div>
)} )}
@ -613,7 +619,7 @@ export function EpisodesView({
<h3 className="font-bold text-white line-clamp-1"> <h3 className="font-bold text-white line-clamp-1">
{ep.title} {ep.title}
</h3> </h3>
{expandedEpisodes[`large-${ep.id}`] && ( {expandedEpisodes[`large-${ep.id}`] && isAired && (
<button <button
type="button" type="button"
onClick={(e) => toggleWatchStatus(ep.id, e)} onClick={(e) => toggleWatchStatus(ep.id, e)}