Show Upcoming Episodes in the podcast page

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}

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'
+            ),
         }
     }