Disable episodes in list when episode hasn't aired yet

This commit is contained in:
Jip Fr 2024-01-01 21:55:04 +01:00
parent fa396e0183
commit de74eac008
6 changed files with 42 additions and 6 deletions

View File

@ -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",

View File

@ -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,
}));
}

View File

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

View File

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

View File

@ -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>
);
}

View File

@ -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];
}