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>
This commit is contained in:
nmemmert
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user