123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
/**
|
|
* FeedPage - Shows latest episodes across all subscribed shows
|
|
* Reverse chronological order, like an inbox/timeline
|
|
*/
|
|
|
|
import { createSignal, For, Show } from "solid-js";
|
|
import { useFeedStore } from "@/stores/feed";
|
|
import { format } from "date-fns";
|
|
import type { Episode } from "@/types/episode";
|
|
import type { Feed } from "@/types/feed";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
import { PageProps } from "@/App";
|
|
import { SelectableBox, SelectableText } from "@/components/Selectable";
|
|
|
|
enum FeedPaneType {
|
|
FEED = 1,
|
|
}
|
|
export const FeedPaneCount = 1;
|
|
|
|
export function FeedPage(props: PageProps) {
|
|
const feedStore = useFeedStore();
|
|
const [selectedIndex, setSelectedIndex] = createSignal(0);
|
|
const [isRefreshing, setIsRefreshing] = createSignal(false);
|
|
|
|
const allEpisodes = () => feedStore.getAllEpisodesChronological();
|
|
|
|
const formatDate = (date: Date): string => {
|
|
return format(date, "MMM d, yyyy");
|
|
};
|
|
|
|
const episodesByDate = () => {
|
|
const groups: Record<string, { episode: Episode; feed: Feed }> = {};
|
|
const sortedEpisodes = allEpisodes();
|
|
|
|
for (const episode of sortedEpisodes) {
|
|
const dateKey = formatDate(new Date(episode.episode.pubDate));
|
|
groups[dateKey] = episode;
|
|
}
|
|
|
|
return groups;
|
|
};
|
|
|
|
const formatDuration = (seconds: number): string => {
|
|
const mins = Math.floor(seconds / 60);
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs > 0) return `${hrs}h ${mins % 60}m`;
|
|
return `${mins}m`;
|
|
};
|
|
|
|
const handleRefresh = async () => {
|
|
setIsRefreshing(true);
|
|
await feedStore.refreshAllFeeds();
|
|
setIsRefreshing(false);
|
|
};
|
|
|
|
const { theme } = useTheme();
|
|
return (
|
|
<box
|
|
backgroundColor={theme.background}
|
|
flexDirection="column"
|
|
height="100%"
|
|
width="100%"
|
|
>
|
|
{/* Status line */}
|
|
<Show when={isRefreshing()}>
|
|
<text fg={theme.warning}>Refreshing feeds...</text>
|
|
</Show>
|
|
|
|
<Show
|
|
when={allEpisodes().length > 0}
|
|
fallback={
|
|
<box padding={2}>
|
|
<text fg={theme.textMuted}>
|
|
No episodes yet. Subscribe to shows from Discover or Search.
|
|
</text>
|
|
</box>
|
|
}
|
|
>
|
|
<scrollbox height="100%" focused={props.depth() == FeedPaneType.FEED}>
|
|
<For each={Object.entries(episodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
|
|
{([date, episode], groupIndex) => (
|
|
<>
|
|
<box flexDirection="column" gap={0} paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
|
|
<text fg={theme.primary}>{date}</text>
|
|
</box>
|
|
<SelectableBox
|
|
selected={() => groupIndex() === selectedIndex()}
|
|
flexDirection="column"
|
|
gap={0}
|
|
paddingLeft={1}
|
|
paddingRight={1}
|
|
paddingTop={0}
|
|
paddingBottom={0}
|
|
onMouseDown={() => setSelectedIndex(groupIndex())}
|
|
>
|
|
<SelectableText selected={() => groupIndex() === selectedIndex()}>
|
|
{groupIndex() === selectedIndex() ? ">" : " "}
|
|
</SelectableText>
|
|
<SelectableText
|
|
selected={() => groupIndex() === selectedIndex()}
|
|
fg={theme.text}
|
|
>
|
|
{episode.episode.title}
|
|
</SelectableText>
|
|
<box flexDirection="row" gap={2} paddingLeft={2}>
|
|
<text fg={theme.primary}>{episode.feed.podcast.title}</text>
|
|
<text fg={theme.textMuted}>
|
|
{formatDate(episode.episode.pubDate)}
|
|
</text>
|
|
<text fg={theme.textMuted}>
|
|
{formatDuration(episode.episode.duration)}
|
|
</text>
|
|
</box>
|
|
</SelectableBox>
|
|
</>
|
|
)}
|
|
</For>
|
|
</scrollbox>
|
|
</Show>
|
|
</box>
|
|
);
|
|
}
|