Disable episodes in list when episode hasn't aired yet

src/assets/locales/en.json

@@ -189,7 +189,8 @@
         "loadingList": "Loading...",
         "loadingError": "Error loading season",
         "emptyState": "There are no episodes in this season, check back later!",
-        "episodeBadge": "E{{episode}}"
+        "episodeBadge": "E{{episode}}",
+        "unairedEpisodes": "One or more episodes in this season are disabled because they are not out yet."
       },
       "sources": {
         "title": "Sources",

src/backend/metadata/tmdb.ts

@@ -71,7 +71,7 @@ export function formatTMDBMeta(
     type,
     seasons: seasons as any,
     seasonData: season
-      ? ({
+      ? {
           id: season.id.toString(),
           number: season.season_number,
           title: season.title,
@@ -81,8 +81,9 @@ export function formatTMDBMeta(
               id: v.id.toString(),
               number: v.episode_number,
               title: v.title,
+              air_date: v.air_date,
             })),
-        } as any)
+        }
       : (undefined as any),
   };
 }
@@ -227,6 +228,7 @@ export async function getEpisodes(
     id: e.id,
     episode_number: e.episode_number,
     title: e.name,
+    air_date: e.air_date,
   }));
 }
 

src/backend/metadata/types/mw.ts

@@ -18,6 +18,7 @@ export type MWSeasonWithEpisodeMeta = {
     id: string;
     number: number;
     title: string;
+    air_date: string;
   }[];
 };
 

src/backend/metadata/types/tmdb.ts

@@ -13,6 +13,7 @@ export type TMDBEpisodeShort = {
   title: string;
   id: number;
   episode_number: number;
+  air_date: string;
 };
 
 export type TMDBMediaResult = {

src/components/player/atoms/Episodes.tsx

@@ -19,6 +19,8 @@ import { PlayerMeta } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 import { useProgressStore } from "@/stores/progress";
 
+import { hasAired } from "../utils/aired";
+
 function CenteredText(props: { children: React.ReactNode }) {
   return (
     <div className="h-full w-full flex justify-center items-center p-8 text-center">
@@ -135,6 +137,9 @@ function EpisodesView({
       <CenteredText>{t("player.menus.episodes.loadingList")}</CenteredText>
     );
   else if (loadingState.value) {
+    const hasUnairedEpisodes = loadingState.value.season.episodes.some(
+      (ep) => !hasAired(ep.air_date),
+    );
     content = (
       <Menu.ScrollToActiveSection className="pb-6">
         {loadingState.value.season.episodes.length === 0 ? (
@@ -163,19 +168,31 @@ function EpisodesView({
           return (
             <Menu.Link
               key={ep.id}
-              onClick={() => playEpisode(ep.id)}
+              onClick={() =>
+                hasAired(ep.air_date) ? playEpisode(ep.id) : null
+              }
               active={ep.id === meta?.episode?.tmdbId}
-              clickable
+              clickable={hasAired(ep.air_date)}
               rightSide={rightSide}
             >
               <Menu.LinkTitle>
-                <div className="text-left flex items-center space-x-3">
+                <div
+                  className={classNames(
+                    "text-left flex items-center space-x-3 text-video-context-type-main",
+                    hasAired(ep.air_date) || ep.id === meta?.episode?.tmdbId
+                      ? ""
+                      : "text-opacity-25",
+                  )}
+                >
                   <span
                     className={classNames(
                       "p-0.5 px-2 rounded inline bg-video-context-hoverColor",
                       ep.id === meta?.episode?.tmdbId
                         ? "text-white bg-opacity-100"
                         : "bg-opacity-50",
+                      hasAired(ep.air_date) || ep.id === meta?.episode?.tmdbId
+                        ? ""
+                        : "!bg-opacity-25",
                     )}
                   >
                     {t("player.menus.episodes.episodeBadge", {
@@ -188,6 +205,9 @@ function EpisodesView({
             </Menu.Link>
           );
         })}
+        {hasUnairedEpisodes ? (
+          <p>{t("player.menus.episodes.unairedEpisodes")}</p>
+        ) : null}
       </Menu.ScrollToActiveSection>
     );
   }

src/components/player/utils/aired.ts

@@ -0,0 +1,11 @@
+const hasAiredCache: { [key: string]: boolean } = {};
+
+export function hasAired(date: string) {
+  if (hasAiredCache[date]) return hasAiredCache[date];
+
+  const now = new Date();
+  const airDate = new Date(date);
+
+  hasAiredCache[date] = airDate < now;
+  return hasAiredCache[date];
+}