From 30f0d4ac522a2a1dadc33b4a9079d424c7f21e03 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 7 Jul 2025 22:03:34 -0600
Subject: [PATCH] dont show watched toggle button on unreleased episodes

---
 .../overlays/details/EpisodeCarousel.tsx      |  38 ++++---
 src/components/player/atoms/Episodes.tsx      | 106 +++++++++---------
 2 files changed, 76 insertions(+), 68 deletions(-)

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