+ {selection?.noneLabel && (
+
+ )}
{map(keys(languageDescription), (key: keyof typeof languageDescription) => (
{
className="px-5 py-2"
// An empty image language order is meaningful on the server: TMDB images are
// downloaded in all languages when the order is empty. Other language orders
- // have no such fallback, so an empty list is invalid there.
- disabled={languages.length === 0 && type !== 'Image'}
+ // have no such fallback, so an empty list is invalid there, unless the caller
+ // offers an explicit "no language" choice.
+ disabled={languages.length === 0 && !allowEmpty}
>
Save
diff --git a/src/components/Input/MultiStateButton.tsx b/src/components/Input/MultiStateButton.tsx
index 2e0aa7a5f..d383ff1e6 100644
--- a/src/components/Input/MultiStateButton.tsx
+++ b/src/components/Input/MultiStateButton.tsx
@@ -6,16 +6,19 @@ type Props = {
states: readonly { label?: string, value: string }[];
className?: string;
alternateColor?: boolean;
+ /** Narrower, lower buttons sized to their labels, for a toolbar. */
+ compact?: boolean;
activeState: string;
onStateChange: (state: string) => void;
};
-const MultiStateButton = ({ activeState, alternateColor, className, onStateChange, states }: Props) => (
+const MultiStateButton = ({ activeState, alternateColor, className, compact, onStateChange, states }: Props) => (
{states.map(option => (
diff --git a/src/components/Utilities/AiringSchedule/AiringEntry.tsx b/src/components/Utilities/AiringSchedule/AiringEntry.tsx
new file mode 100644
index 000000000..ab8a06c4a
--- /dev/null
+++ b/src/components/Utilities/AiringSchedule/AiringEntry.tsx
@@ -0,0 +1,481 @@
+import { useState } from 'react';
+import { Link } from 'react-router';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
+import { mdiChevronDown, mdiChevronUp, mdiEyeOffOutline, mdiFileDocumentMultipleOutline } from '@mdi/js';
+import { Icon } from '@mdi/react';
+import cx from 'classnames';
+
+import AiringProviderIcon from '@/components/AiringProviderIcon';
+import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
+import { Badge } from '@/components/Badge';
+import { dayjs, getAnidbAnimeLink } from '@/core/util';
+import {
+ UNRESOLVED_AIRING_HINT,
+ getAiringAnidbAnimeId,
+ getAiringEpisodeLabel,
+ getAiringShokoSeriesId,
+ getAiringVideoCount,
+ isAiringNow,
+} from '@/core/utilities/airingSchedule';
+import useAiringProviderContext from '@/hooks/useAiringProviderContext';
+import useNow from '@/hooks/useNow';
+
+import type { AiringChannelReferenceType, AiringKindType, EpisodeAiringType } from '@/core/types/api/airing-schedule';
+import type { CalendarEntryType } from '@/core/utilities/airingSchedule';
+
+/** Switches a channel off in the airing schedule's channel filter. */
+export type HideChannelHandler = (channel: AiringChannelReferenceType) => void;
+
+type Props = {
+ entry: CalendarEntryType;
+ onHideChannel?: HideChannelHandler;
+ /** Show a badge for each kind of the airing, when every kind is shown together. */
+ showKinds?: boolean;
+ /** Fill the `row` variant's background, for every other row of a day. */
+ striped?: boolean;
+ variant: 'compact' | 'card' | 'row';
+};
+
+const SeriesLink = (
+ { className, entry, showTooltip = true }: { className?: string, entry: CalendarEntryType, showTooltip?: boolean },
+) => {
+ const { airing } = entry;
+ const title = airing.Series?.Title ?? 'Unknown Series';
+ const shokoId = getAiringShokoSeriesId(airing);
+ const anidbId = getAiringAnidbAnimeId(airing);
+
+ if (shokoId) {
+ return (
+
+ {title}
+
+ );
+ }
+
+ if (anidbId) {
+ return (
+
+ {title}
+
+ );
+ }
+
+ return
{title};
+};
+
+/** The series poster, from `include=Poster`, linked like the title. */
+const Poster = ({ className, entry }: { className: string, entry: CalendarEntryType }) => {
+ const { airing } = entry;
+ const shokoId = getAiringShokoSeriesId(airing);
+ const frameClassName = cx('shrink-0 rounded-lg border border-panel-border drop-shadow-md', className);
+ // Too small for the "not available" notice, so a missing poster is an empty frame.
+ const poster = airing.Poster?.Available
+ ?
+ :
;
+ if (!shokoId) return poster;
+ return (
+
+ {poster}
+
+ );
+};
+
+const getBadges = (entry: CalendarEntryType) => {
+ const { airing, movedFrom, movedTo } = entry;
+ const badges: { text: string, tooltip?: string, warning?: boolean }[] = [];
+ if (movedTo) {
+ badges.push({ text: 'Moved', tooltip: `Moved to ${movedTo.format('ddd, MMM D, HH:mm')}`, warning: true });
+ }
+ if (movedFrom) {
+ badges.push({ text: 'Delayed', tooltip: `Delayed from ${movedFrom.format('ddd, MMM D, HH:mm')}`, warning: true });
+ }
+ if (airing.Kind === 'Advance') badges.push({ text: 'Advance', tooltip: 'An advance screening' });
+ if (airing.Kind === 'Rerun') badges.push({ text: 'Rerun', tooltip: 'A rerun, as the provider marked it' });
+ if (airing.Kind === 'DetectedRerun') badges.push({ text: 'Rerun', tooltip: 'A rerun, as Shoko detected it' });
+ if (airing.IsEstimated) badges.push({ text: 'Estimated', tooltip: 'Estimated from the schedule' });
+ return badges;
+};
+
+const kindOrder: AiringKindType[] = ['Original', 'Subtitled', 'Dubbed'];
+const kindLabels: Record
= { Original: 'Original', Subtitled: 'Sub', Dubbed: 'Dub' };
+
+/** The kinds of the airing's tracks, in a fixed order. */
+const getKinds = (entry: CalendarEntryType) => {
+ const kinds = new Set(entry.airing.Tracks.map(track => track.Kind));
+ return kindOrder.filter(kind => kinds.has(kind));
+};
+
+const KindBadges = ({ entry }: { entry: CalendarEntryType }) => (
+ <>
+ {getKinds(entry).map(kind => (
+
+ {kindLabels[kind]}
+
+ ))}
+
+);
+
+const Badges = ({ entry }: { entry: CalendarEntryType }) => (
+ <>
+ {getBadges(entry).map(badge => (
+
+ {badge.text}
+
+ ))}
+
+);
+
+/** `Now` while the airing is on air, though not at the slot it was moved out of. */
+const NowBadge = (
+ { className, entry, showTooltip = true }: { className?: string, entry: CalendarEntryType, showTooltip?: boolean },
+) => {
+ const now = useNow();
+ if (entry.movedTo || !isAiringNow(entry.airing, now)) return null;
+ return (
+
+ Now
+
+ );
+};
+
+const formatLocalFiles = (count: number) => `${count} local ${count === 1 ? 'file' : 'files'}`;
+
+/** The collection's files icon, muted, when the airing's episode has local files. */
+export const LocalFilesIcon = ({ count, showTooltip = true }: { count: number, showTooltip?: boolean }) => {
+ if (count <= 0) return null;
+ return (
+
+
+
+ );
+};
+
+/** `Not on AniDB yet`, muted, after the label of an unresolved airing, whose episode AniDB does not list yet. */
+export const UnresolvedHint = ({ airing, className }: { airing: EpisodeAiringType, className?: string }) => {
+ if (airing.IsResolved) return null;
+ return (
+
+ {UNRESOLVED_AIRING_HINT}
+
+ );
+};
+
+const getWhere = (entry: CalendarEntryType) => {
+ const { Channel, IsDateOnly, Source } = entry.airing;
+ if (IsDateOnly) return 'AniDB air date';
+ return [Channel?.Name, Source?.Name].filter(Boolean).join(' · ');
+};
+
+/** The entry's time, or `All Day` for a date-only airing. */
+const formatEntryTime = (entry: CalendarEntryType, showDay = false) => {
+ if (showDay) return entry.time.format(entry.isAllDay ? 'ddd, MMM D' : 'ddd HH:mm');
+ return entry.isAllDay ? 'All Day' : entry.time.format('HH:mm');
+};
+
+/** The channel, then the provider's icon standing in for its name, and a shortcut to switch the channel off. */
+const Where = (
+ { className, entry, onHideChannel }: {
+ className?: string;
+ entry: CalendarEntryType;
+ onHideChannel?: HideChannelHandler;
+ },
+) => {
+ const { Channel, IsDateOnly, Source } = entry.airing;
+ const provider = useAiringProviderContext(Source?.ID);
+ // A date-only airing comes from the AniDB air date, not from a provider.
+ if (IsDateOnly) return AniDB Air Date;
+ return (
+
+ {Channel && {Channel.Name}}
+ {Source && (
+
+
+
+ )}
+ {Channel && onHideChannel && (
+
+ )}
+
+ );
+};
+
+// In the link color, so the count reads as something to click.
+const moreButtonClassName = cx(
+ 'flex shrink-0 items-center gap-x-0.5 rounded-sm border border-panel-border px-1 text-xs font-semibold',
+ 'text-panel-text-primary transition-colors hover:border-panel-text-primary focus:outline-none',
+ 'focus-visible:ring-2 focus-visible:ring-panel-icon-action',
+);
+
+/** One line of text per other airing of the episode that day, for tooltips. */
+const getOthersSummary = (entry: CalendarEntryType, showDay = false) =>
+ entry.others.map(other =>
+ [
+ formatEntryTime(other, showDay),
+ getWhere(other),
+ ...getBadges(other).filter(badge => badge.text !== 'Estimated').map(badge => badge.text),
+ ].filter(Boolean).join(' · ')
+ );
+
+/**
+ * The always visible count of the episode's other airings; clicking it lists them in place. `showDay` names their
+ * days, for airings beyond the entry's own day.
+ */
+export const MoreButton = (
+ { entry, expanded, onToggle, showDay = false }: {
+ entry: CalendarEntryType;
+ expanded: boolean;
+ onToggle: () => void;
+ showDay?: boolean;
+ },
+) => {
+ if (entry.others.length === 0) return null;
+ return (
+
+ );
+};
+
+/** The episode's other airings, one line each, with the shortcut to switch a channel off. */
+export const OtherAiringsList = (
+ { className, onHideChannel, others, showDay = false }: {
+ className?: string;
+ onHideChannel?: HideChannelHandler;
+ others: CalendarEntryType[];
+ showDay?: boolean;
+ },
+) => (
+
+ {others.map(other => (
+
+
+ {formatEntryTime(other, showDay)}
+
+
+
+
+ ))}
+
badge.tooltip ?? badge.text),
+ ...(showKinds ? getKinds(entry) : []),
+ videoCount > 0 ? formatLocalFiles(videoCount) : null,
+ ...getOthersSummary(entry).map(other => `Also ${other}`),
+ ].filter(Boolean).join(' | ')}
+ data-tooltip-delay-show={500}
+ >
+ {!entry.isAllDay && (
+
+ {formatEntryTime(entry)}
+
+ )}
+
+ {/* The month's rows have no room for the list, so it opens in a popover. */}
+
+
+
+
+ );
+ }
+
+ if (variant === 'row') {
+ return (
+
+
+ {!entry.isAllDay && formatEntryTime(entry)}
+
+
+
+
+
+ {episodeLabel && {episodeLabel}}
+
+
+
+
+
+
+ {showKinds && }
+
+
+
+
+
+ {showOthers && (
+
+ )}
+
+
+ {/* The week's columns only fit a poster on wide screens. */}
+
+
+
+
+
+ {formatEntryTime(entry)}
+
+
+
+
+
+ {showKinds && }
+
+
+
+
+ {(episodeLabel || videoCount > 0) && (
+
+ {episodeLabel && (
+
+ {episodeLabel}
+
+ )}
+
+
+
+ )}
+
+ {showOthers && (
+
+ )}
+
+
+ }
+ >
+