Podcasts are now supported.

components/episodepager.js

@@ -18,7 +18,7 @@ const EpisodePager = ({ episodedata, config, showdata }) => {
     return (
         <div className="episode_pages col-xs-12">
             <div className="show_episodes">
-                {episodedata.map((episode) => (
+                {episodedata.data.map((episode) => (
                 <div key={episode.attributes.Slug} className="episode">
                     <div className="episode_title" id ={episode.Title}>
                         <Link href={episode.attributes.podcast_sery.data.attributes.Slug + "/" + episode.attributes.Slug}>{episode.attributes.Title}</Link>
@@ -37,8 +37,8 @@ const EpisodePager = ({ episodedata, config, showdata }) => {
             previousLabel={"previous"}
             nextLabel={"next"}
             breakLabel={"..."}
-            initialPage={1} //{episodedata.curPage - 1}
+            initialPage={episodedata.page}
-            pageCount={2}
+            pageCount={episodedata.meta.pagination.pageCount}
             onPageChange={handlePagination}
         />
         </div>

components/episodesidebar.js

@@ -1,17 +1,18 @@
 import Link from 'next/link'
 
-const EpisodeSideBar = (epdata) => (
+const EpisodeSideBar = (epdata) => {
-    <div className="side_content col-md-3">
+    console.log(epdata.epdata.data[0].attributes)
+    return (<div className="side_content col-md-3">
         <h2>Latest Episodes</h2>
         <hr />
-       {epdata.map((episode) =>  (
+       {epdata.epdata.data.map((episode) =>  (
-            <div key={episode.episode_slug}>
+            <div key={episode.Slug}>
-                <h2><Link href="/podcasts/shows/[show_slug]/[slug]" as={"/podcasts/shows/" + episode.show_slug + "/" + episode.episode_slug}>{episode.title}</Link></h2>
+                <h2><Link href="/podcasts/shows/[show_slug]/[slug]" as={"/podcasts/shows/" + episode.attributes.podcast_sery.data.attributes.Slug + "/" + episode.attributes.Slug}>{episode.attributes.Title}</Link></h2>
-                <div dangerouslySetInnerHTML={{__html: episode.episode_lead}} />
+                <div dangerouslySetInnerHTML={{__html: episode.Description}} />
                 <hr />
             </div>
         ))}
-    </div>
+    </div> )
-    );
+};
     
 export default EpisodeSideBar

components/navbar.js

@@ -20,6 +20,9 @@ const NavBar = (props, sections) => {
         <NavItem className="m-auto">
           <NavLink href="/news">News and such</NavLink>
         </NavItem>
+        <NavDropdown title="Media Projects" className='m-auto'>
+          <NavDropdown.Item href="/podcasts">Podcasts</NavDropdown.Item>
+        </NavDropdown>
         <NavItem className="m-auto">
           <NavLink href="/tech-and-disability">Tech and Disability</NavLink>
         </NavItem>

components/storypager.js

@@ -4,7 +4,7 @@ import Link from 'next/link'
 
 const StoryPager = ({ storydata }) => {
     const router = useRouter()
-    console.log(storydata.meta)
+    console.log(storydata)
 
     const handlePagination = page => {
         const path = router.pathname

data/external/cms.js

@@ -70,7 +70,7 @@ export const getAllPodcastSeries = async () => {
     const query = qs.stringify({
         populate: {
             podcast_episodes: {
-                populate:['Audio']
+                populate:['Audio_MP3']
             }
         }
     }, {
@@ -112,5 +112,78 @@ export const getProjectDetails = async (projectId) => {
 }
 
 export const getPodcastEpisode = async (episodeId) => {
+    const { serverRuntimeConfig} = getConfig()
+    const qs = require('qs')
+    const query = qs.stringify({
+        filters: {
+            Slug: {
+                $eq: episodeId
+            }
+        },
+        populate: '*'
+    }, {
+        encodeValuesOnly: true,
+    })
 
+    const epres = await fetch(serverRuntimeConfig.base_path + `podcast-episodes?${query}`, {
+        headers: new Headers({
+          'Authorization':serverRuntimeConfig.strapi_token,
+          'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    return await epres.json()
+}
+
+export const getPodcastSeries = async (podcastId) => {
+    const { serverRuntimeConfig} = getConfig()
+    const qs = require('qs')
+    const query = qs.stringify({
+        filters: {
+            Slug: {
+                $eq: podcastId
+            }
+        },
+        populate: '*'
+    }, {
+        encodeValuesOnly: true,
+    })
+    const url = serverRuntimeConfig.base_path + `/api/podcast-serie?${query}`;
+    const showres = await fetch(url, {
+        headers: new Headers({
+            'Authorization': serverRuntimeConfig.strapi_token,
+            'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+    return await showres.json()
+}
+
+export const getPodcastSeriesEpisodes = async (podcastId, limit, page) => {
+    const { serverRuntimeConfig} = getConfig()
+    const qs = require('qs')
+    const query = qs.stringify({
+        filters: {
+            podcast_sery: {
+                Slug: {
+                    $eq: podcastId
+                }
+            }
+        },
+        pagination: {
+            page: page,
+            pageSize: limit
+        },
+        sort: ['publishedAt:desc'],
+        populate: '*'
+    }, {
+        encodeValuesOnly: true,
+    })
+    const epres = await fetch(serverRuntimeConfig.base_path + `podcast-episodes?${query}`, {
+        headers: new Headers({
+          'Authorization': serverRuntimeConfig.strapi_token,
+          'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    return await epres.json();
 }

data/internal/feed-generator.js

@@ -173,13 +173,13 @@ export const generatePodcastFeeds = async () => {
 
       const url = `${siteURL}/shows/${series.attributes.Slug}/${episode.attributes.Slug}`;
 
-      const media_url = `${siteURL}${episode.attributes.Audio.data.attributes.url}`
+      const media_url = `${siteURL}${episode.attributes.Audio_MP3.data.attributes.url}`
 
       const media = {
         url: media_url,
-        type: episode.attributes.Audio.data.attributes.mime,
+        type: episode.attributes.Audio_MP3.data.attributes.mime,
         length: 0,
-        title: episode.attributes.Audio.data.attributes.name,
+        title: episode.attributes.Audio_MP3.data.attributes.name,
         duration: 0,
       }
 

pages/podcasts.js

@@ -9,7 +9,7 @@ export async function getServerSideProps(context) {
     const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
     const secdata = await secres.json()
 
-    const currpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?filters[PodcastSeriesStatus][$eq]=Current`, {
+    const currpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?filters[status][$eq]=true`, {
         headers: new Headers({
           'Authorization': serverRuntimeConfig.strapi_token,
           'Content-Type': 'application/x-www-form-urlencoded'
@@ -20,7 +20,7 @@ export async function getServerSideProps(context) {
 
     console.log(currpodcastlist)
 
-    const archpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?filters[PodcastSeriesStatus][$eq]=Archived`, {
+    const archpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?filters[status][$eq]=false`, {
         headers: new Headers({
           'Authorization': serverRuntimeConfig.strapi_token,
           'Content-Type': 'application/x-www-form-urlencoded'

pages/podcasts/shows/[...episode].js

@@ -5,6 +5,7 @@ import * as gtag from "../../../lib/gtag"
 import AudioPlayer from "react-h5-audio-player";
 import 'react-h5-audio-player/lib/styles.css';
 import EpisodeSideBar from "../../../components/episodesidebar"
+import { getPodcastEpisode, getPodcastSeriesEpisodes } from '../../../data/external/cms.js';
 
 
 export async function getServerSideProps(context) {
@@ -14,32 +15,17 @@ export async function getServerSideProps(context) {
     const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
     const secdata = await secres.json()
 
-    const epres = await fetch(serverRuntimeConfig.base_path + 'podcast-episodes?filters[Slug][$eq]='+slug[1]+'&populate=*', {
+    const episode = await getPodcastEpisode(slug)
-        headers: new Headers({
-          'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
-          'Content-Type': 'application/x-www-form-urlencoded'
-        })
-    })
-    const epdata = await epres.json()
-    const episode = epdata.data[0]
-    console.log(epdata.data[0].attributes.Audio.data.attributes)
     
-    const sepres = await fetch(serverRuntimeConfig.base_path + 'podcast-episodes?filters[podcast_sery][slug][$eq]='+slug[0], {
+    const sepisodes = await getPodcastSeriesEpisodes(slug[0], 5, 0)
-        headers: new Headers({
-          'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
-          'Content-Type': 'application/x-www-form-urlencoded'
-        })
-    })
-    const sepdata = await sepres.json()
-    const sepisodes = sepdata.data
 
     const audiodata = {
         audio_path: serverRuntimeConfig.audio_path,
-        audio_mp3:  epdata.data[0].attributes.Audio.data.attributes
+        audio_mp3:  episode.data[0].attributes.Audio_MP3.data.attributes
     }
 
     const pagedata = {
-        'title': 'Angry Beanie - ' + episode.attributes.Title
+        'title': 'Angry Beanie - ' + episode.data[0].attributes.Title
     }
 
     return {
@@ -54,7 +40,7 @@ const Episode = ( props ) => {
                 episode={props.episode} 
                 audiodata={props.audiodata}
                 sepdata={props.sepisodes}>
-        <h1>{props.episode.attributes.Title}</h1>
+        <h1>{props.episode.data[0].attributes.Title}</h1>
         <div className="main_content col-md-9 col-sm-12">
             <AudioPlayer
                 src={props.audiodata.audio_path + props.audiodata.audio_mp3.url}
@@ -62,9 +48,11 @@ const Episode = ( props ) => {
                 onPause={e => gtag.event({action: "pause", category:"audio", label: "audio paused", value: props.audiodata.audio_mp3})}
                 onEnded={e => gtag.event({action: "end", category:"audio", label: "audio ended", value: props.audiodata.audio_mp3})}
                 />
-            <div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.episode_body}} />
+            <div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.data[0].attributes.Description}} />
+            <h3>Transcript</h3>
+            <div className="transcript" dangerouslySetInnerHTML={{ __html: props.episode.data[0].attributes.Transcript}}></div>
         </div>
-        {/* <EpisodeSideBar epdata={props.sepisodes}></EpisodeSideBar> */}
+        <EpisodeSideBar epdata={props.sepisodes}></EpisodeSideBar>
     </Layout>)
 }
 

pages/podcasts/shows/[podcast].js

@@ -2,31 +2,20 @@ import getConfig from 'next/config'
 import "../../../components/main.js"
 import Layout from "../../../components/main.js"
 import EpisodePager from "../../../components/episodepager.js"
+import { getPodcastSeries, getPodcastSeriesEpisodes } from '../../../data/external/cms.js'
 
 export async function getServerSideProps(context) {
     const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
     const slug = context.params.podcast
-    const url = serverRuntimeConfig.base_path + '/api/podcast-serie?filters[Slug][$eq]=' + slug
+    const showdata = await getPodcastSeries(slug)
-    const showres = await fetch(url, {
-        headers: new Headers({
-          'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
-          'Content-Type': 'application/x-www-form-urlencoded'
-        })
-    })
-    const showdata = await showres.json()
    
     if(context.query.page == null || context.query.page == '0') {
         var page = 0;
     } else {
-        var page = Number(context.query.page) - 1
+        var page = Number(context.query.page)
     }
-    const epres = await fetch(serverRuntimeConfig.base_path + "podcast-episodes?filters[podcast_sery][slug][$eq]="+slug+"&populate=*", {
+    
-        headers: new Headers({
+    const epdata = await getPodcastSeriesEpisodes(slug, 5, page)
-          'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
-          'Content-Type': 'application/x-www-form-urlencoded'
-        })
-    })
-    const epdata = await epres.json()
     console.log(epdata.data)
 
     const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
@@ -42,7 +31,7 @@ export async function getServerSideProps(context) {
 const Podcast = (props) => (
     <Layout pagedata={props.pagedata} sections={props.sections} showdata={props.showdata}>
         <h1>{props.showdata.title}</h1>
-        <EpisodePager episodedata={props.epdata.data} config={props.serverRuntimeConfig} showdata={props.showdata}/>
+        <EpisodePager episodedata={props.epdata} config={props.serverRuntimeConfig} showdata={props.showdata}/>
     </Layout>
 )