Added live episodes to the front page

server/index.js

@@ -112,6 +112,53 @@ app.use('/api/episodes/byfeedid', async (req, res) => {
     res.send(response)
 })
 
+app.use('/api/episodes/live', async (req, res) => {
+    const max = req.query.max
+
+    // grab live items from recently updated feeds
+    // (large max value to work around sorting issue `docs-api#96`)
+    const updatedLiveItems = await api.custom('episodes/live', {max: 100})
+
+    // re-sort to put recently updated live items first
+    updatedLiveItems.items.sort((a, b) => {
+        return (b.datePublished - a.datePublished)
+    });
+
+    const feedIds = new Set(updatedLiveItems.items.map(feed => feed.feedId))
+    const feedTitles = updatedLiveItems.items.reduce((result, item) => {
+        result[item.feedId] = item.feedTitle
+        return result
+    }, {})
+
+    const liveItems = []
+    const liveCutoff = 3600 // cut off perpetually live shows after an hour
+
+    const now = Math.floor(new Date().getTime() / 1000)
+
+    // check each individual feed and collect live items that are actually live (status = live)
+    for (const feedId of feedIds) {
+        const feed = await api.episodesByFeedId(feedId)
+
+        for (const item of feed.liveItems) {
+            if (item.status === 'live' && now < (item.startTime + liveCutoff) && liveItems.length < max) {
+                item.feedTitle = feedTitles[item.feedId];
+                liveItems.push(item);
+            }
+        }
+
+        if (liveItems.length >= max) {
+            break;
+        }
+    }
+
+    // sort and put newly started items first
+    liveItems.sort((a, b) => {
+        return (b.startTime - a.startTime)
+    });
+
+    res.send(liveItems)
+})
+
 app.use('/api/add/byfeedurl', async (req, res) => {
     let feedUrl = req.query.url
     const response = await apiAdd.addByFeedUrl(feedUrl)

ui/src/components/RecentPodcasts/index.tsx

@@ -11,6 +11,7 @@ import {Link} from "react-router-dom";
 
 interface IProps {
     title?: string
+    liveTitle?: string
     podcasts?: Array<any>
     loading?: boolean
 }
@@ -60,7 +61,7 @@ export default class RecentPodcasts extends React.Component<IProps, IState> {
     }
 
     render() {
-        const {loading, title, podcasts} = this.props
+        const {loading, title, liveTitle, podcasts} = this.props
         const {index} = this.state
         const selectedPodcast = podcasts[index]
         return (
@@ -87,7 +88,7 @@ export default class RecentPodcasts extends React.Component<IProps, IState> {
                         </div>
                         {title && (
                             <div className="player-title">
-                                <b>{title}</b>
+                                <b>{selectedPodcast.live ? liveTitle : title}</b>
                             </div>
                         )}
                         <div className="player-cover-art">

ui/src/pages/landing.tsx

@@ -11,14 +11,14 @@ import './styles.scss'
 interface IProps {}
 interface IState {
     loading?: boolean
-    recentPodcasts?: Array<any>
+    podcasts?: Array<any>
     stats?: {}
 }
 
 export default class Landing extends React.Component<IProps, IState> {
     state = {
         loading: true,
-        recentPodcasts: [],
+        podcasts: [],
         stats: {
             feedCountTotal: '1,318,328',
             feedCount3days: '81,919',
@@ -36,13 +36,13 @@ export default class Landing extends React.Component<IProps, IState> {
 
     async componentDidMount(): Promise<void> {
         this._isMounted = true
-        const recentPodcasts = (await this.getRecentEpisodes()).items
+        const podcasts = await this.getEpisodes()
         const stats = await this.getStats()
 
         if (this._isMounted) {
             this.setState({
                 loading: false,
-                recentPodcasts,
+                podcasts,
                 stats,
             })
         }
@@ -68,8 +68,29 @@ export default class Landing extends React.Component<IProps, IState> {
         return await response.json()
     }
 
+    async getLiveEpisodes() {
+        let response = await fetch(`/api/episodes/live?max=3`, {
+            credentials: 'same-origin',
+            method: 'GET',
+        })
+        return await response.json()
+    }
+
+    async getEpisodes() {
+        let liveResponse = await this.getLiveEpisodes()
+        let episodes = liveResponse.map(ep => {
+            ep.live = true
+            return ep
+        })
+
+        let recentResponse = await this.getRecentEpisodes()
+        episodes = episodes.concat(recentResponse.items)
+
+        return episodes;
+    }
+
     render() {
-        const { loading, recentPodcasts, stats } = this.state
+        const { loading, podcasts, stats } = this.state
         updateTitle('Home')
         return (
             <div className="landing-content">
@@ -108,8 +129,9 @@ export default class Landing extends React.Component<IProps, IState> {
                     <div className="hero-pitch-right">
                         <RecentPodcasts
                             title="Recent Podcasts"
+                            liveTitle="⬤ Live Podcasts"
                             loading={loading}
-                            podcasts={recentPodcasts}
+                            podcasts={podcasts}
                         />
                     </div>
                 </div>