From acce3bbb01eb72348762401c521ebc23db01dcf6 Mon Sep 17 00:00:00 2001
From: Eric P <ericpp@gmail.com>
Date: Wed, 8 Oct 2025 18:16:19 -0500
Subject: [PATCH] Show Upcoming Episodes in the podcast page

---
 ui/src/components/EpisodesPlayer/index.tsx | 24 +++++++++++++++++++++-
 ui/src/pages/Podcast/PodcastInfo/index.tsx |  5 +++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/EpisodesPlayer/index.tsx b/ui/src/components/EpisodesPlayer/index.tsx
index d5b8011a..194608eb 100644
--- a/ui/src/components/EpisodesPlayer/index.tsx
+++ b/ui/src/components/EpisodesPlayer/index.tsx
@@ -7,6 +7,7 @@ interface IProps {
     episodes?: {
         items: Array<any>,
         live?: Array<any>,
+        upcoming?: Array<any>,
     }
     selectedId?: number
     podcast?: {
@@ -20,12 +21,14 @@ interface IProps {
     initialDisplay?: number
     onSelectedEpisodeChange?: (episodeId: number) => void
     liveTitle?: string
+    upcomingTitle?: string
     episodesTitle?: string
 }
 
 export default class EpisodesPlayer extends React.PureComponent<IProps> {
     static defaultProps = {
         liveTitle: "Live Now!",
+        upcomingTitle: "Upcoming Episodes",
         episodesTitle: "Episodes",
     }
     state = {
@@ -173,7 +176,8 @@ export default class EpisodesPlayer extends React.PureComponent<IProps> {
             selectedId,
             initialDisplay,
             episodesTitle,
-            liveTitle
+            liveTitle,
+            upcomingTitle
         } = this.props
         const {playingEpisode, selectedEpisodeIsLive} = this.state
         const {medium} = podcast
@@ -200,6 +204,12 @@ export default class EpisodesPlayer extends React.PureComponent<IProps> {
             return a.startTime < b.startTime ? 1 : -1
         })
 
+        let sortedUpcomingEpisodes = episodes.upcoming
+        // sort upcoming episodes with earliest first
+        sortedUpcomingEpisodes?.sort((a, b) => {
+            return a.startTime < b.startTime ? -1 : 1
+        })
+
         return (
             <>
                 {episodes.live?.length > 0 ? (
@@ -214,6 +224,18 @@ export default class EpisodesPlayer extends React.PureComponent<IProps> {
                         onEpisodePause={this.onEpisodePause}
                     />
                 ) : ''}
+                {episodes.upcoming?.length > 0 ? (
+                    <EpisodeList
+                        title={upcomingTitle}
+                        podcast={podcast}
+                        episodes={sortedUpcomingEpisodes}
+                        playingEpisode={playingEpisode}
+                        makeVisible={null}
+                        initialDisplay={initialDisplay}
+                        onEpisodePlay={this.onEpisodePlay}
+                        onEpisodePause={this.onEpisodePause}
+                    />
+                ) : ''}
                 <EpisodeList
                     title={episodesTitle}
                     podcast={podcast}
diff --git a/ui/src/pages/Podcast/PodcastInfo/index.tsx b/ui/src/pages/Podcast/PodcastInfo/index.tsx
index fb4d4912..c79e67fa 100644
--- a/ui/src/pages/Podcast/PodcastInfo/index.tsx
+++ b/ui/src/pages/Podcast/PodcastInfo/index.tsx
@@ -19,6 +19,7 @@ export default class PodcastInfo extends React.PureComponent<IProps> {
         episodes: {
             items: [],
             live: [],
+            upcoming: [],
         },
         loadingFeed: true,
         loadingEpisodes: true,
@@ -155,12 +156,16 @@ export default class PodcastInfo extends React.PureComponent<IProps> {
         })
 
         const episodes = await response.json()
+        const currentTimestamp = Math.floor(Date.now() / 1000)
 
         return {
             items: episodes.items,
             live: episodes.liveItems.filter(
                 item => item.status === 'live'
             ),
+            upcoming: episodes.liveItems.filter(
+                item => item.startTime > currentTimestamp && item.status !== 'live'
+            ),
         }
     }