fix keyboard, finish 05
This commit is contained in:
204
src/components/FeedDetail.tsx
Normal file
204
src/components/FeedDetail.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
/**
|
||||
* Feed detail view component for PodTUI
|
||||
* Shows podcast info and episode list
|
||||
*/
|
||||
|
||||
import { createSignal, For, Show } from "solid-js"
|
||||
import type { Feed } from "../types/feed"
|
||||
import type { Episode } from "../types/episode"
|
||||
import { format } from "date-fns"
|
||||
|
||||
interface FeedDetailProps {
|
||||
feed: Feed
|
||||
focused?: boolean
|
||||
onBack?: () => void
|
||||
onPlayEpisode?: (episode: Episode) => void
|
||||
}
|
||||
|
||||
export function FeedDetail(props: FeedDetailProps) {
|
||||
const [selectedIndex, setSelectedIndex] = createSignal(0)
|
||||
const [showInfo, setShowInfo] = createSignal(true)
|
||||
|
||||
const episodes = () => {
|
||||
// Sort episodes by publication date (newest first)
|
||||
return [...props.feed.episodes].sort(
|
||||
(a, b) => b.pubDate.getTime() - a.pubDate.getTime()
|
||||
)
|
||||
}
|
||||
|
||||
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 formatDate = (date: Date): string => {
|
||||
return format(date, "MMM d, yyyy")
|
||||
}
|
||||
|
||||
const handleKeyPress = (key: { name: string }) => {
|
||||
const eps = episodes()
|
||||
|
||||
if (key.name === "escape" && props.onBack) {
|
||||
props.onBack()
|
||||
return
|
||||
}
|
||||
|
||||
if (key.name === "i") {
|
||||
setShowInfo((v) => !v)
|
||||
return
|
||||
}
|
||||
|
||||
if (key.name === "up" || key.name === "k") {
|
||||
setSelectedIndex((i) => Math.max(0, i - 1))
|
||||
} else if (key.name === "down" || key.name === "j") {
|
||||
setSelectedIndex((i) => Math.min(eps.length - 1, i + 1))
|
||||
} else if (key.name === "return" || key.name === "enter") {
|
||||
const episode = eps[selectedIndex()]
|
||||
if (episode && props.onPlayEpisode) {
|
||||
props.onPlayEpisode(episode)
|
||||
}
|
||||
} else if (key.name === "home" || key.name === "g") {
|
||||
setSelectedIndex(0)
|
||||
} else if (key.name === "end") {
|
||||
setSelectedIndex(eps.length - 1)
|
||||
} else if (key.name === "pageup") {
|
||||
setSelectedIndex((i) => Math.max(0, i - 10))
|
||||
} else if (key.name === "pagedown") {
|
||||
setSelectedIndex((i) => Math.min(eps.length - 1, i + 10))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<box
|
||||
flexDirection="column"
|
||||
gap={1}
|
||||
onKeyPress={props.focused ? handleKeyPress : undefined}
|
||||
>
|
||||
{/* Header with back button */}
|
||||
<box flexDirection="row" justifyContent="space-between">
|
||||
<box
|
||||
border
|
||||
padding={0}
|
||||
onMouseDown={props.onBack}
|
||||
>
|
||||
<text>
|
||||
<span fg="cyan">[Esc] Back</span>
|
||||
</text>
|
||||
</box>
|
||||
<box
|
||||
border
|
||||
padding={0}
|
||||
onMouseDown={() => setShowInfo((v) => !v)}
|
||||
>
|
||||
<text>
|
||||
<span fg="cyan">[i] {showInfo() ? "Hide" : "Show"} Info</span>
|
||||
</text>
|
||||
</box>
|
||||
</box>
|
||||
|
||||
{/* Podcast info section */}
|
||||
<Show when={showInfo()}>
|
||||
<box border padding={1} flexDirection="column" gap={0}>
|
||||
<text>
|
||||
<strong>{props.feed.customName || props.feed.podcast.title}</strong>
|
||||
</text>
|
||||
{props.feed.podcast.author && (
|
||||
<text>
|
||||
<span fg="gray">by </span>
|
||||
<span fg="cyan">{props.feed.podcast.author}</span>
|
||||
</text>
|
||||
)}
|
||||
<box height={1} />
|
||||
<text>
|
||||
<span fg="gray">
|
||||
{props.feed.podcast.description?.slice(0, 200)}
|
||||
{(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
|
||||
</span>
|
||||
</text>
|
||||
<box height={1} />
|
||||
<box flexDirection="row" gap={2}>
|
||||
<text>
|
||||
<span fg="gray">Episodes: </span>
|
||||
<span fg="white">{props.feed.episodes.length}</span>
|
||||
</text>
|
||||
<text>
|
||||
<span fg="gray">Updated: </span>
|
||||
<span fg="white">{formatDate(props.feed.lastUpdated)}</span>
|
||||
</text>
|
||||
<text>
|
||||
<span fg={props.feed.visibility === "public" ? "green" : "yellow"}>
|
||||
{props.feed.visibility === "public" ? "[Public]" : "[Private]"}
|
||||
</span>
|
||||
</text>
|
||||
{props.feed.isPinned && (
|
||||
<text>
|
||||
<span fg="yellow">[Pinned]</span>
|
||||
</text>
|
||||
)}
|
||||
</box>
|
||||
</box>
|
||||
</Show>
|
||||
|
||||
{/* Episodes header */}
|
||||
<box flexDirection="row" justifyContent="space-between">
|
||||
<text>
|
||||
<strong>Episodes</strong>
|
||||
<span fg="gray"> ({episodes().length} total)</span>
|
||||
</text>
|
||||
</box>
|
||||
|
||||
{/* Episode list */}
|
||||
<scrollbox height={showInfo() ? 10 : 15} focused={props.focused}>
|
||||
<For each={episodes()}>
|
||||
{(episode, index) => (
|
||||
<box
|
||||
flexDirection="column"
|
||||
gap={0}
|
||||
padding={1}
|
||||
backgroundColor={index() === selectedIndex() ? "#333" : undefined}
|
||||
onMouseDown={() => {
|
||||
setSelectedIndex(index())
|
||||
if (props.onPlayEpisode) {
|
||||
props.onPlayEpisode(episode)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<box flexDirection="row" gap={1}>
|
||||
<text>
|
||||
<span fg={index() === selectedIndex() ? "cyan" : "gray"}>
|
||||
{index() === selectedIndex() ? ">" : " "}
|
||||
</span>
|
||||
</text>
|
||||
<text>
|
||||
<span fg={index() === selectedIndex() ? "white" : undefined}>
|
||||
{episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
|
||||
{episode.title}
|
||||
</span>
|
||||
</text>
|
||||
</box>
|
||||
<box flexDirection="row" gap={2} paddingLeft={2}>
|
||||
<text>
|
||||
<span fg="gray">{formatDate(episode.pubDate)}</span>
|
||||
</text>
|
||||
<text>
|
||||
<span fg="gray">{formatDuration(episode.duration)}</span>
|
||||
</text>
|
||||
</box>
|
||||
</box>
|
||||
)}
|
||||
</For>
|
||||
</scrollbox>
|
||||
|
||||
{/* Help text */}
|
||||
<text>
|
||||
<span fg="gray">
|
||||
j/k to navigate, Enter to play, i to toggle info, Esc to go back
|
||||
</span>
|
||||
</text>
|
||||
</box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user