Replace Spotify embeds with branded custom audio player backed by RSS

- Add /api/episode-audio route returning MP3 URLs from Anchor RSS feed - Replace Spotify URL text inputs in admin with RSS episode dropdowns - New EpisodeAudioPlayer component with podcast art, show name, progress bar, and Spotify icon link — full and compact sizes - Backward-compatible: legacy Spotify embed URLs still render as iframes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-17 13:23:19 -04:00
parent 3d8f02d915
commit a1d5889711
6 changed files with 393 additions and 25 deletions
@@ -31,6 +31,7 @@ function parseRssItems(xml, limit = Infinity) {
    const episode = (/<itunes:episode>([\s\S]*?)<\/itunes:episode>/.exec(block)?.[1] ?? '').trim()
    items.push({
      title, pubDate, link,
+      audioUrl: enclosureUrl,
      description: descText.slice(0, 220) + (descText.length > 220 ? '…' : ''),
      duration, episode,
    })
@@ -174,4 +175,14 @@ export function register(app) {
      res.json({ episodes: episodesCache ?? [] })
    }
  })
+
+  app.get('/api/episode-audio', async (_req, res) => {
+    try {
+      const episodes = await fetchAllEpisodes()
+      res.json({ episodes: episodes.map(e => ({ title: e.title, audioUrl: e.audioUrl, duration: e.duration, episode: e.episode })) })
+    } catch (err) {
+      console.error('[episode-audio] RSS fetch error:', err.message)
+      res.json({ episodes: (episodesCache ?? []).map(e => ({ title: e.title, audioUrl: e.audioUrl, duration: e.duration, episode: e.episode })) })
+    }
+  })
 }
@@ -15,9 +15,10 @@ interface SortableLessonSectionProps {
  study: StudyProgram
  updateStudySection: (studyId: string, sectionId: string, field: keyof ColossiansStudySection, value: string | string[] | number) => void
  removeStudySection: (studyId: string, sectionId: string) => void
+  rssEpisodes: Array<{ title: string; audioUrl: string; duration: string; episode: string }>
 }

-function SortableLessonSection({ section, study, updateStudySection, removeStudySection }: SortableLessonSectionProps) {
+function SortableLessonSection({ section, study, updateStudySection, removeStudySection, rssEpisodes }: SortableLessonSectionProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: section.id })
  const style = {
    transform: CSS.Transform.toString(transform),
@@ -60,8 +61,16 @@ function SortableLessonSection({ section, study, updateStudySection, removeStudy
              <input id={`study-section-title-${study.id}-${section.id}`} type="text" value={section.title} placeholder="Paul's Greeting" onChange={e => updateStudySection(study.id, section.id, 'title', e.target.value)} />
            </div>
            <div className="admin-field">
-              <label htmlFor={`study-section-audio-${study.id}-${section.id}`}>Spotify Embed URL (optional)</label>
-              <input id={`study-section-audio-${study.id}-${section.id}`} type="url" value={section.audioEmbedUrl ?? ''} placeholder="https://open.spotify.com/embed/episode/..." onChange={e => updateStudySection(study.id, section.id, 'audioEmbedUrl', e.target.value)} />
+              <label htmlFor={`study-section-audio-${study.id}-${section.id}`}>Episode Audio (optional)</label>
+              <select id={`study-section-audio-${study.id}-${section.id}`} value={section.audioEmbedUrl ?? ''} onChange={e => updateStudySection(study.id, section.id, 'audioEmbedUrl', e.target.value)}>
+                <option value="">— No audio —</option>
+                {rssEpisodes.map(ep => (
+                  <option key={ep.audioUrl} value={ep.audioUrl}>{ep.title}</option>
+                ))}
+                {section.audioEmbedUrl && !rssEpisodes.some(ep => ep.audioUrl === section.audioEmbedUrl) && (
+                  <option value={section.audioEmbedUrl}>{section.audioEmbedUrl}</option>
+                )}
+              </select>
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-released-${study.id}-${section.id}`}>Release Date (optional)</label>
@@ -1102,6 +1111,8 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
  const [qrEditLabel, setQrEditLabel] = useState('')
  const [qrEditDest, setQrEditDest] = useState('')

+  const [rssEpisodes, setRssEpisodes] = useState<Array<{ title: string; audioUrl: string; duration: string; episode: string }>>([])
+
  const [podcastChecklist, setPodcastChecklist] = useState<PodcastChecklistData>({ tasks: [], episodes: [] })
  const [podcastChecklistStatus, setPodcastChecklistStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
  const [podcastChecklistMsg, setPodcastChecklistMsg] = useState('')
@@ -1237,6 +1248,15 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
  }, [isDirty])

+  useEffect(() => {
+    fetch('/api/episode-audio')
+      .then(r => r.ok ? r.json() : Promise.reject())
+      .then((data: { episodes: Array<{ title: string; audioUrl: string; duration: string; episode: string }> }) => {
+        setRssEpisodes(data.episodes ?? [])
+      })
+      .catch(() => {})
+  }, [])
+
  useEffect(() => {
    fetch('/api/admin-auth/status')
      .then(r => r.ok ? r.json() : Promise.reject())
@@ -3913,8 +3933,16 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
                          <input id={`podcast-url-${item.id}`} type="text" placeholder="https://open.spotify.com/..." value={item.url} onChange={e => updatePodcastLink(item.id, 'url', e.target.value)} />
                        </div>
                        <div className="admin-field">
-                          <label htmlFor={`podcast-embed-${item.id}`}>Embed URL (optional — enables in-page player)</label>
-                          <input id={`podcast-embed-${item.id}`} type="text" placeholder="https://open.spotify.com/embed/episode/..." value={item.embedUrl ?? ''} onChange={e => updatePodcastLink(item.id, 'embedUrl', e.target.value)} />
+                          <label htmlFor={`podcast-embed-${item.id}`}>Episode Audio (optional — enables in-page player)</label>
+                          <select id={`podcast-embed-${item.id}`} value={item.embedUrl ?? ''} onChange={e => updatePodcastLink(item.id, 'embedUrl', e.target.value)}>
+                            <option value="">— No audio —</option>
+                            {rssEpisodes.map(ep => (
+                              <option key={ep.audioUrl} value={ep.audioUrl}>{ep.title}</option>
+                            ))}
+                            {item.embedUrl && !rssEpisodes.some(ep => ep.audioUrl === item.embedUrl) && (
+                              <option value={item.embedUrl}>{item.embedUrl}</option>
+                            )}
+                          </select>
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`podcast-notes-${item.id}`}>Show Notes</label>
@@ -4775,6 +4803,7 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
                            study={study}
                            updateStudySection={updateStudySection}
                            removeStudySection={removeStudySection}
+                            rssEpisodes={rssEpisodes}
                          />
                        ))}
                      </SortableContext>
@@ -2702,6 +2702,178 @@
  margin: 0 0 2.5rem;
 }

+/* Custom audio player */
+.episode-audio-player {
+  background: var(--brand-black-2, #0f0f0c);
+  border: 1px solid rgba(201, 168, 76, 0.2);
+  border-radius: 10px;
+  padding: 1rem 1.1rem;
+}
+
+.episode-audio-player__inner {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.episode-audio-player__art {
+  width: 56px;
+  height: 56px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.episode-audio-player__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.episode-audio-player__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.episode-audio-player__show-name {
+  font-size: 0.7rem;
+  color: var(--brand-gold, #c9a84c);
+  font-family: var(--brand-font-body, Georgia, serif);
+  letter-spacing: 0.02em;
+}
+
+.episode-audio-player__spotify-link {
+  color: rgba(176, 164, 140, 0.5);
+  display: flex;
+  align-items: center;
+  transition: color 0.15s;
+  flex-shrink: 0;
+}
+
+.episode-audio-player__spotify-link:hover {
+  color: #1DB954;
+}
+
+.episode-audio-player__spotify-link svg {
+  width: 16px;
+  height: 16px;
+}
+
+.episode-audio-player__title {
+  font-size: 0.88rem;
+  color: var(--brand-warm-white, #f0ead8);
+  margin: 0;
+  font-family: var(--brand-font-heading, Georgia, serif);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.episode-audio-player__controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 2px;
+}
+
+.episode-audio-player__play {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--brand-gold, #c9a84c);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--brand-black, #0a0a08);
+  transition: background 0.15s;
+}
+
+.episode-audio-player__play:hover {
+  background: var(--brand-gold-light, #e0c070);
+}
+
+.episode-audio-player__play svg {
+  width: 14px;
+  height: 14px;
+}
+
+.episode-audio-player__track {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.episode-audio-player__bar {
+  position: relative;
+  height: 3px;
+  background: rgba(42, 37, 24, 0.9);
+  border-radius: 2px;
+  cursor: pointer;
+  outline: none;
+}
+
+.episode-audio-player__bar:focus-visible {
+  box-shadow: 0 0 0 2px var(--brand-gold, #c9a84c);
+}
+
+.episode-audio-player__fill {
+  height: 100%;
+  background: var(--brand-gold, #c9a84c);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.episode-audio-player__thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--brand-gold-light, #e0c070);
+  pointer-events: none;
+}
+
+.episode-audio-player__times {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.68rem;
+  color: var(--brand-muted, #b0a48c);
+  font-family: var(--brand-font-body, Georgia, serif);
+}
+
+/* Compact variant (study sections) */
+.episode-audio-player--compact .episode-audio-player__art {
+  width: 42px;
+  height: 42px;
+}
+
+.episode-audio-player--compact .episode-audio-player__play {
+  width: 28px;
+  height: 28px;
+}
+
+.episode-audio-player--compact .episode-audio-player__play svg {
+  width: 11px;
+  height: 11px;
+}
+
+.episode-audio-player--compact .episode-audio-player__bar {
+  height: 2px;
+}
+
+.episode-audio-player--compact .episode-audio-player__title {
+  font-size: 0.8rem;
+}
+
 .episode-detail-show-notes,
 .episode-detail-questions {
  margin-top: 2.5rem;
@@ -11,6 +11,7 @@ import { DEFAULTS } from './content'
 import { usePageMeta } from './hooks/usePageMeta'
 import { useGlobalSearch } from './hooks/useGlobalSearch'
 import { GlobalSearch } from './components/GlobalSearch'
+import { EpisodeAudioPlayer } from './components/EpisodeAudioPlayer'
 import './App.css'

 const SPOTIFY_EMBED_URL =
@@ -1564,15 +1565,19 @@ function EpisodeDetailPage({ content }: { content: SiteContent }) {

          {resolvedEmbedUrl && (
            <div className="episode-detail-embed">
-              <iframe
-                src={resolvedEmbedUrl}
-                title={episode.title}
-                width="100%"
-                height="152"
-                frameBorder="0"
-                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-                loading="lazy"
-              />
+              {resolvedEmbedUrl.includes('spotify.com') ? (
+                <iframe
+                  src={resolvedEmbedUrl}
+                  title={episode.title}
+                  width="100%"
+                  height="152"
+                  frameBorder="0"
+                  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+                  loading="lazy"
+                />
+              ) : (
+                <EpisodeAudioPlayer src={resolvedEmbedUrl} title={episode.title} size="full" spotifyUrl={episode.url || content.platformSpotifyUrl} />
+              )}
            </div>
          )}

@@ -5,6 +5,7 @@ import { DEFAULT_COLOSSIANS_STUDY_SECTIONS } from './colossiansStudyData'
 import { usePageMeta } from './hooks/usePageMeta'
 import { Breadcrumbs } from './components/Breadcrumbs'
 import { StudyCertificate } from './components/StudyCertificate'
+import { EpisodeAudioPlayer } from './components/EpisodeAudioPlayer'

 type Props = { content: SiteContent }

@@ -1686,17 +1687,21 @@ export function ColossiansStudySectionPage({ content }: Props) {
            {lessonAudioEmbedUrl && (
              <article className="study-class-block">
                <h2>Lesson Audio</h2>
-                <div className="study-audio-embed-wrap">
-                  <iframe
-                    src={lessonAudioEmbedUrl}
-                    title={`${section.title} audio`}
-                    width="100%"
-                    height="152"
-                    frameBorder="0"
-                    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-                    loading="lazy"
-                  />
-                </div>
+                {lessonAudioEmbedUrl.includes('spotify.com') ? (
+                  <div className="study-audio-embed-wrap">
+                    <iframe
+                      src={lessonAudioEmbedUrl}
+                      title={`${section.title} audio`}
+                      width="100%"
+                      height="152"
+                      frameBorder="0"
+                      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+                      loading="lazy"
+                    />
+                  </div>
+                ) : (
+                  <EpisodeAudioPlayer src={lessonAudioEmbedUrl} title={section.title} size="compact" spotifyUrl={content.platformSpotifyUrl} />
+                )}
              </article>
            )}

@@ -0,0 +1,146 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface EpisodeAudioPlayerProps {
+  src: string
+  title?: string
+  size?: 'full' | 'compact'
+  spotifyUrl?: string
+}
+
+function formatTime(seconds: number): string {
+  if (!isFinite(seconds) || seconds < 0) return '0:00'
+  const m = Math.floor(seconds / 60)
+  const s = Math.floor(seconds % 60)
+  return `${m}:${String(s).padStart(2, '0')}`
+}
+
+function SpotifyLinkIcon({ href }: { href: string }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="episode-audio-player__spotify-link"
+      aria-label="Listen on Spotify"
+    >
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.623.623 0 01-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 11-.277-1.215c3.809-.87 7.076-.496 9.712 1.115a.623.623 0 01.207.857zm1.223-2.722a.779.779 0 01-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.78.78 0 01-.973-.519.779.779 0 01.519-.972c3.632-1.102 8.147-.568 11.234 1.328a.779.779 0 01.257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.935.935 0 11-.543-1.79c3.532-1.072 9.404-.865 13.115 1.338a.935.935 0 01-.955 1.609z"/>
+      </svg>
+    </a>
+  )
+}
+
+export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: EpisodeAudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [playing, setPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+    const onTimeUpdate = () => setCurrentTime(audio.currentTime)
+    const onDurationChange = () => setDuration(audio.duration)
+    const onEnded = () => setPlaying(false)
+    audio.addEventListener('timeupdate', onTimeUpdate)
+    audio.addEventListener('durationchange', onDurationChange)
+    audio.addEventListener('loadedmetadata', onDurationChange)
+    audio.addEventListener('ended', onEnded)
+    return () => {
+      audio.removeEventListener('timeupdate', onTimeUpdate)
+      audio.removeEventListener('durationchange', onDurationChange)
+      audio.removeEventListener('loadedmetadata', onDurationChange)
+      audio.removeEventListener('ended', onEnded)
+    }
+  }, [src])
+
+  function togglePlay() {
+    const audio = audioRef.current
+    if (!audio) return
+    if (playing) {
+      audio.pause()
+      setPlaying(false)
+    } else {
+      audio.play().then(() => setPlaying(true)).catch(() => {})
+    }
+  }
+
+  function seek(e: React.MouseEvent<HTMLDivElement>) {
+    const audio = audioRef.current
+    if (!audio || !duration) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+    audio.currentTime = pct * duration
+    setCurrentTime(pct * duration)
+  }
+
+  const pct = duration > 0 ? (currentTime / duration) * 100 : 0
+  const isCompact = size === 'compact'
+
+  return (
+    <div className={`episode-audio-player ${isCompact ? 'episode-audio-player--compact' : ''}`}>
+      <audio ref={audioRef} src={src} preload="metadata" />
+
+      <div className="episode-audio-player__inner">
+        <img
+          src="/images/podcast-art.jpeg"
+          alt="Verse by Verse with Nate"
+          className="episode-audio-player__art"
+        />
+
+        <div className="episode-audio-player__body">
+          {!isCompact && (
+            <div className="episode-audio-player__meta">
+              <span className="episode-audio-player__show-name">Verse by Verse with Nate</span>
+              {spotifyUrl && <SpotifyLinkIcon href={spotifyUrl} />}
+            </div>
+          )}
+          {title && (
+            <p className="episode-audio-player__title">{title}</p>
+          )}
+
+          <div className="episode-audio-player__controls">
+            <button
+              className="episode-audio-player__play"
+              onClick={togglePlay}
+              aria-label={playing ? 'Pause' : 'Play'}
+            >
+              {playing
+                ? <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+                : <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="5,3 19,12 5,21"/></svg>
+              }
+            </button>
+
+            <div className="episode-audio-player__track">
+              <div
+                className="episode-audio-player__bar"
+                onClick={seek}
+                role="slider"
+                aria-label="Seek"
+                aria-valuenow={Math.round(currentTime)}
+                aria-valuemin={0}
+                aria-valuemax={Math.round(duration)}
+                tabIndex={0}
+                onKeyDown={e => {
+                  const audio = audioRef.current
+                  if (!audio) return
+                  if (e.key === 'ArrowRight') audio.currentTime = Math.min(duration, audio.currentTime + 10)
+                  if (e.key === 'ArrowLeft') audio.currentTime = Math.max(0, audio.currentTime - 10)
+                }}
+              >
+                <div className="episode-audio-player__fill" style={{ width: `${pct}%` }} />
+                <div className="episode-audio-player__thumb" style={{ left: `${pct}%` }} />
+              </div>
+              <div className="episode-audio-player__times">
+                <span>{formatTime(currentTime)}</span>
+                <span>{formatTime(duration)}</span>
+              </div>
+            </div>
+
+            {isCompact && spotifyUrl && <SpotifyLinkIcon href={spotifyUrl} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}