Replace Spotify show embed on /episodes with custom player; v1.1.6

LatestEpisodePlayer fetches the most recent episode from /api/episodes
(Anchor RSS) and renders it with the centered cinematic layout. The
Spotify show iframe is removed; platform buttons and HeadlinerWidget
remain below as before.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
2026-07-22 14:36:41 -04:00
parent 5d4ba7e593
commit 1e24eaa9af
2 changed files with 23 additions and 12 deletions
+22 -11
View File
@@ -1578,6 +1578,27 @@ function FinishedSeriesPage({ content }: { content: SiteContent }) {
)
}
function LatestEpisodePlayer({ content }: { content: SiteContent }) {
const [audioUrl, setAudioUrl] = useState('')
const [title, setTitle] = useState('')
useEffect(() => {
fetch('/api/episodes')
.then(r => r.ok ? r.json() : Promise.reject())
.then((data: { episodes?: { title: string; audioUrl: string }[] }) => {
const latest = data.episodes?.[0]
if (latest?.audioUrl) {
setAudioUrl(latest.audioUrl)
setTitle(latest.title)
}
})
.catch(() => {})
}, [])
if (!audioUrl) return <div className="episode-embed-skeleton" aria-label="Loading player…" style={{ height: 152 }} />
return <EpisodeAudioPlayer src={audioUrl} title={title} size="full" spotifyUrl={content.platformSpotifyUrl} />
}
function EpisodesPage({ content }: { content: SiteContent }) {
const siteTitle = content.seo?.title || DEFAULTS.seo.title
usePageMeta(
@@ -1596,17 +1617,7 @@ function EpisodesPage({ content }: { content: SiteContent }) {
{content.episodesSeoIntro || 'Verse by Verse with Nate is an expository Bible teaching podcast where we go through Scripture one verse at a time. Each episode digs into the text carefully and practically, helping you understand what the Bible says, what it means, and how to live it out. New episodes released regularly subscribe on Spotify or your favorite podcast platform.'}
</p>
<div className="embed-wrap">
<iframe
data-testid="embed-iframe"
style={{ borderRadius: '12px' }}
src={`https://open.spotify.com/embed/show/0Gq1TzoJOdReSZ1gYQi8Xl?utm_source=generator&si=fb1f6de857424592`}
width="100%"
height="352"
frameBorder="0"
allowFullScreen
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
/>
<LatestEpisodePlayer content={content} />
</div>
<PlatformButtons content={content} />
<HeadlinerWidget />