purserj/angrybeanie-front-end
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Podcasts are now supported.

Browse source
This commit is contained in:
James Purser 2022-06-22 21:37:22 +10:00
parent 87ad2bd12b
commit ad85231444
9 changed files with 112 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/episodepager.js
View file

@ -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}
pageCount={2}
initialPage={episodedata.page}
pageCount={episodedata.meta.pagination.pageCount}
onPageChange={handlePagination}
/>
</div>

17
components/episodesidebar.js
View file

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

3
components/navbar.js
View file

@ -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>

2
components/storypager.js
View file

@ -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

77
data/external/cms.js vendored
View file

@ -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();
}

6
data/internal/feed-generator.js
View file

@ -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,
}

4
pages/podcasts.js
View file

@ -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'

32
pages/podcasts/shows/[...episode].js
View file

@ -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=*', {
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 episode = await getPodcastEpisode(slug)
const sepres = await fetch(serverRuntimeConfig.base_path + 'podcast-episodes?filters[podcast_sery][slug][$eq]='+slug[0], {
headers: new Headers({
'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
'Content-Type': 'application/x-www-form-urlencoded'
})
})
const sepdata = await sepres.json()
const sepisodes = sepdata.data
const sepisodes = await getPodcastSeriesEpisodes(slug[0], 5, 0)
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>)
}

23
pages/podcasts/shows/[podcast].js
View file

@ -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 showres = await fetch(url, {
headers: new Headers({
'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
'Content-Type': 'application/x-www-form-urlencoded'
})
})
const showdata = await showres.json()
const showdata = await getPodcastSeries(slug)
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({
'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
'Content-Type': 'application/x-www-form-urlencoded'
})
})
const epdata = await epres.json()
const epdata = await getPodcastSeriesEpisodes(slug, 5, page)
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>
)