読み込み中...
}
@@ -109,7 +178,7 @@ function EpisodeList() {
|
- {episode.title}
+
+
+ {episode.title}
+
+
- {episode.link && (
+ {episode.feedTitle && (
+
+ フィード: {episode.feedTitle}
+
+ )}
+ {episode.articleTitle && episode.articleTitle !== episode.title && (
+
+ 元記事: {episode.articleTitle}
+
+ )}
+ {episode.articleLink && (
{episode.description || 'No description'}
+ {episode.fileSize && (
+
+ {formatFileSize(episode.fileSize)}
+
+ )}
|
- {formatDate(episode.pubDate)} |
+ {formatDate(episode.createdAt)} |
@@ -159,13 +250,13 @@ function EpisodeList() {
共有
- {currentAudio === episode.audioUrl && (
+ {currentAudio === episode.audioPath && (
diff --git a/frontend/src/components/FeedDetail.tsx b/frontend/src/components/FeedDetail.tsx
new file mode 100644
index 0000000..adc9ea2
--- /dev/null
+++ b/frontend/src/components/FeedDetail.tsx
@@ -0,0 +1,282 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+
+interface Feed {
+ id: string
+ url: string
+ title?: string
+ description?: string
+ lastUpdated?: string
+ createdAt: string
+ active: boolean
+}
+
+interface EpisodeWithFeedInfo {
+ id: string
+ title: string
+ description?: string
+ audioPath: string
+ duration?: number
+ fileSize?: number
+ createdAt: string
+ articleId: string
+ articleTitle: string
+ articleLink: string
+ articlePubDate: string
+ feedId: string
+ feedTitle?: string
+ feedUrl: string
+}
+
+function FeedDetail() {
+ const { feedId } = useParams<{ feedId: string }>()
+ const [feed, setFeed] = useState (null)
+ const [episodes, setEpisodes] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [currentAudio, setCurrentAudio] = useState(null)
+
+ useEffect(() => {
+ if (feedId) {
+ fetchFeedAndEpisodes()
+ }
+ }, [feedId])
+
+ const fetchFeedAndEpisodes = async () => {
+ try {
+ setLoading(true)
+
+ // Fetch feed info and episodes in parallel
+ const [feedResponse, episodesResponse] = await Promise.all([
+ fetch(`/api/feeds/${feedId}`),
+ fetch(`/api/feeds/${feedId}/episodes`)
+ ])
+
+ if (!feedResponse.ok) {
+ const errorData = await feedResponse.json()
+ throw new Error(errorData.error || 'フィード情報の取得に失敗しました')
+ }
+
+ if (!episodesResponse.ok) {
+ const errorData = await episodesResponse.json()
+ throw new Error(errorData.error || 'エピソードの取得に失敗しました')
+ }
+
+ const feedData = await feedResponse.json()
+ const episodesData = await episodesResponse.json()
+
+ setFeed(feedData.feed)
+ setEpisodes(episodesData.episodes || [])
+ } catch (err) {
+ console.error('Feed detail fetch error:', err)
+ setError(err instanceof Error ? err.message : 'エラーが発生しました')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const formatDate = (dateString: string) => {
+ return new Date(dateString).toLocaleString('ja-JP')
+ }
+
+ const formatFileSize = (bytes?: number) => {
+ if (!bytes) return ''
+
+ const units = ['B', 'KB', 'MB', 'GB']
+ let unitIndex = 0
+ let fileSize = bytes
+
+ while (fileSize >= 1024 && unitIndex < units.length - 1) {
+ fileSize /= 1024
+ unitIndex++
+ }
+
+ return `${fileSize.toFixed(1)} ${units[unitIndex]}`
+ }
+
+ const playAudio = (audioPath: string) => {
+ if (currentAudio) {
+ const currentPlayer = document.getElementById(currentAudio) as HTMLAudioElement
+ if (currentPlayer) {
+ currentPlayer.pause()
+ currentPlayer.currentTime = 0
+ }
+ }
+ setCurrentAudio(audioPath)
+ }
+
+ const shareEpisode = (episode: EpisodeWithFeedInfo) => {
+ const shareUrl = `${window.location.origin}/episode/${episode.id}`
+ navigator.clipboard.writeText(shareUrl).then(() => {
+ alert('エピソードリンクをクリップボードにコピーしました')
+ }).catch(() => {
+ const textArea = document.createElement('textarea')
+ textArea.value = shareUrl
+ document.body.appendChild(textArea)
+ textArea.select()
+ document.execCommand('copy')
+ document.body.removeChild(textArea)
+ alert('エピソードリンクをクリップボードにコピーしました')
+ })
+ }
+
+ if (loading) {
+ return 読み込み中...
+ }
+
+ if (error) {
+ return (
+
+ {error}
+
+ フィード一覧に戻る
+
+
+ )
+ }
+
+ if (!feed) {
+ return (
+
+ フィードが見つかりません
+
+ フィード一覧に戻る
+
+
+ )
+ }
+
+ return (
+
+
+
+ ← フィード一覧に戻る
+
+
+
+
+
+ {feed.title || feed.url}
+
+
+ {feed.description && (
+
+ {feed.description}
+
+ )}
+
+ 作成日: {formatDate(feed.createdAt)}
+ {feed.lastUpdated && ` | 最終更新: ${formatDate(feed.lastUpdated)}`}
+
+
+
+
+ エピソード一覧 ({episodes.length}件)
+
+
+
+ {episodes.length === 0 ? (
+
+ このフィードにはまだエピソードがありません
+ 管理者にバッチ処理の実行を依頼してください
+
+ ) : (
+
+
+
+ | タイトル |
+ 説明 |
+ 作成日 |
+ 操作 |
+
+
+
+ {episodes.map((episode) => (
+
+ |
+
+
+
+ {episode.title}
+
+
+
+
+ 元記事: {episode.articleTitle}
+
+ {episode.articleLink && (
+
+ 元記事を見る
+
+ )}
+ |
+
+
+ {episode.description || 'No description'}
+
+ {episode.fileSize && (
+
+ {formatFileSize(episode.fileSize)}
+
+ )}
+ |
+ {formatDate(episode.createdAt)} |
+
+
+
+
+
+
+ {currentAudio === episode.audioPath && (
+
+
+ )}
+ |
+
+ ))}
+
+
+ )}
+ 読み込み中...
+ }
+
+ if (error) {
+ return {error}
+ }
+
+ if (feeds.length === 0) {
+ return (
+
+ アクティブなフィードがありません
+ フィードリクエストでRSSフィードをリクエストするか、管理者にフィード追加を依頼してください
+
+
+
+ フィード一覧 ({feeds.length}件)
+
+
+
+
+ {feeds.map((feed) => (
+
+
+
+
+ {feed.title || feed.url}
+
+
+
+
+
+ {feed.description && (
+
+ {feed.description}
+
+ )}
+
+
+ 作成日: {formatDate(feed.createdAt)}
+ {feed.lastUpdated && (
+ 最終更新: {formatDate(feed.lastUpdated)}
+ )}
+
+
+
+
+ エピソード一覧を見る
+
+
+
+ ))}
+
+
+
+ |