47 lines
No EOL
1.8 KiB
JavaScript
47 lines
No EOL
1.8 KiB
JavaScript
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';
|
|
|
|
export async function getServerSideProps(context) {
|
|
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
|
|
const slug = context.params.episode
|
|
|
|
console.log(serverRuntimeConfig.base_path)
|
|
|
|
const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
|
|
const secdata = await secres.json()
|
|
|
|
const epres = await fetch(serverRuntimeConfig.base_path + "/api/podcast/episode/"+slug[1])
|
|
const epdata = await epres.json()
|
|
|
|
const audiodata = {
|
|
audio_path: serverRuntimeConfig.audio_path,
|
|
audio_mp3: epdata.audio_mp3
|
|
}
|
|
|
|
const pagedata = {
|
|
'title': 'Angry Beanie - ' + epdata.episode_title
|
|
}
|
|
|
|
return {
|
|
props: { pagedata, sections: secdata, episode: epdata, audiodata }
|
|
}
|
|
}
|
|
|
|
const Episode = ( props ) => {
|
|
return (<Layout pagedata={props.pagedata} sections={props.sections} episode={props.episode} audiodata={props.audiodata}>
|
|
<h1>{props.episode.episode_title}</h1>
|
|
<AudioPlayer
|
|
src={props.audiodata.audio_path + props.audiodata.audio_mp3}
|
|
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})}
|
|
/>
|
|
<div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.episode_body}} />
|
|
</Layout>)
|
|
}
|
|
|
|
export default Episode |