2021-02-04 14:27:14 +11:00
|
|
|
import { useRouter } from 'next/router'
|
|
|
|
|
import getConfig from 'next/config'
|
|
|
|
|
import Layout from "../../../components/main.js"
|
|
|
|
|
import * as gtag from "../../../lib/gtag"
|
|
|
|
|
import AudioPlayer from "react-h5-audio-player";
|
|
|
|
|
import 'react-h5-audio-player/lib/styles.css';
|
2021-09-29 21:25:05 +10:00
|
|
|
import EpisodeSideBar from "../../../components/episodesidebar"
|
2022-06-22 21:37:22 +10:00
|
|
|
import { getPodcastEpisode, getPodcastSeriesEpisodes } from '../../../data/external/cms.js';
|
2022-07-01 16:43:50 +10:00
|
|
|
import Head from "next/head"
|
|
|
|
|
import config from "../../../data/internal/config"
|
2021-09-29 21:25:05 +10:00
|
|
|
|
2021-02-04 14:27:14 +11:00
|
|
|
|
|
|
|
|
export async function getServerSideProps(context) {
|
|
|
|
|
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
|
|
|
|
|
const slug = context.params.episode
|
|
|
|
|
|
|
|
|
|
const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
|
|
|
|
|
const secdata = await secres.json()
|
|
|
|
|
|
2022-06-22 21:37:22 +10:00
|
|
|
const episode = await getPodcastEpisode(slug)
|
|
|
|
|
|
2022-06-26 14:59:45 +10:00
|
|
|
const sepisodes = await getPodcastSeriesEpisodes(episode.data[0].attributes.podcast_sery.data.attributes.Slug, 5, 0)
|
|
|
|
|
|
2021-02-04 14:27:14 +11:00
|
|
|
const audiodata = {
|
|
|
|
|
audio_path: serverRuntimeConfig.audio_path,
|
2022-06-22 21:37:22 +10:00
|
|
|
audio_mp3: episode.data[0].attributes.Audio_MP3.data.attributes
|
2021-02-04 14:27:14 +11:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const pagedata = {
|
2022-06-22 21:37:22 +10:00
|
|
|
'title': 'Angry Beanie - ' + episode.data[0].attributes.Title
|
2021-02-04 14:27:14 +11:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
2022-07-01 16:43:50 +10:00
|
|
|
props: { pagedata, sections: secdata, episode, audiodata, sepisodes, config }
|
2021-02-04 14:27:14 +11:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const Episode = ( props ) => {
|
2021-09-05 16:12:45 +10:00
|
|
|
return (<Layout
|
|
|
|
|
pagedata={props.pagedata}
|
|
|
|
|
sections={props.sections}
|
|
|
|
|
episode={props.episode}
|
|
|
|
|
audiodata={props.audiodata}
|
2022-06-12 15:12:28 +10:00
|
|
|
sepdata={props.sepisodes}>
|
2022-07-01 16:43:50 +10:00
|
|
|
<Head>
|
|
|
|
|
<meta name="twitter:card" content={ props.episode.Description } key="twcard" />
|
|
|
|
|
<meta name="twitter:creator" content="angrybeanie" key="twhandle" />
|
|
|
|
|
<meta name="og:url" content={props.config.siteURL + "/podcasts/shows/" + props.episode.data[0].attributes.podcast_sery.data.attributes.Slug + "/" + props.episode.data[0].attributes.Slug}></meta>
|
|
|
|
|
<meta name="og:type" content="podcast"></meta>
|
|
|
|
|
<meta name="og:title" content={ props.episode.data[0].attributes.Title } key="title"></meta>
|
|
|
|
|
<meta name="og:description" content={ props.episode.data[0].attributes.Body } key="description"></meta>
|
|
|
|
|
</Head>
|
2021-09-05 16:12:45 +10:00
|
|
|
<div className="main_content col-md-9 col-sm-12">
|
2022-08-23 14:25:38 +10:00
|
|
|
<h1>{props.episode.data[0].attributes.Title}</h1>
|
2021-09-05 16:12:45 +10:00
|
|
|
<AudioPlayer
|
2022-06-26 21:39:20 +10:00
|
|
|
src={props.audiodata.audio_mp3.url}
|
2021-09-05 16:12:45 +10:00
|
|
|
onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: props.audiodata.audio_mp3})}
|
|
|
|
|
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})}
|
|
|
|
|
/>
|
2022-06-22 21:37:22 +10:00
|
|
|
<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>
|
2021-09-05 16:12:45 +10:00
|
|
|
</div>
|
2022-06-22 21:37:22 +10:00
|
|
|
<EpisodeSideBar epdata={props.sepisodes}></EpisodeSideBar>
|
2021-02-04 14:27:14 +11:00
|
|
|
</Layout>)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Episode
|
