Separate /episodes player from per-episode player; v1.1.8
- EpisodeAudioPlayer restored to original horizontal layout (unchanged for individual episode detail pages chosen in /admin) - LatestEpisodePlayer on /episodes page gets its own markup + CSS (.latest-episode-player__*) with the centered layout A — large gold play button, skip-back 15s / skip-forward 30s, full-width scrubber Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
+112
-5
@@ -1574,24 +1574,131 @@ function FinishedSeriesPage({ content }: { content: SiteContent }) {
|
||||
}
|
||||
|
||||
function LatestEpisodePlayer({ content }: { content: SiteContent }) {
|
||||
const audioRef = useRef<HTMLAudioElement>(null)
|
||||
const [audioUrl, setAudioUrl] = useState('')
|
||||
const [title, setTitle] = useState('')
|
||||
const [playing, setPlaying] = useState(false)
|
||||
const [buffering, setBuffering] = useState(false)
|
||||
const [currentTime, setCurrentTime] = useState(0)
|
||||
const [duration, setDuration] = useState(0)
|
||||
const playTrackedRef = useRef(false)
|
||||
const listenStartRef = useRef<number | null>(null)
|
||||
|
||||
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)
|
||||
}
|
||||
if (latest?.audioUrl) { setAudioUrl(latest.audioUrl); setTitle(latest.title) }
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current
|
||||
if (!audio) return
|
||||
const onTime = () => setCurrentTime(audio.currentTime)
|
||||
const onDur = () => setDuration(audio.duration)
|
||||
const onEnded = () => { setPlaying(false); setBuffering(false) }
|
||||
const onWait = () => setBuffering(true)
|
||||
const onCan = () => setBuffering(false)
|
||||
audio.addEventListener('timeupdate', onTime)
|
||||
audio.addEventListener('durationchange', onDur)
|
||||
audio.addEventListener('loadedmetadata', onDur)
|
||||
audio.addEventListener('ended', onEnded)
|
||||
audio.addEventListener('waiting', onWait)
|
||||
audio.addEventListener('canplay', onCan)
|
||||
return () => {
|
||||
audio.removeEventListener('timeupdate', onTime)
|
||||
audio.removeEventListener('durationchange', onDur)
|
||||
audio.removeEventListener('loadedmetadata', onDur)
|
||||
audio.removeEventListener('ended', onEnded)
|
||||
audio.removeEventListener('waiting', onWait)
|
||||
audio.removeEventListener('canplay', onCan)
|
||||
}
|
||||
}, [audioUrl])
|
||||
|
||||
function togglePlay() {
|
||||
const audio = audioRef.current
|
||||
if (!audio) return
|
||||
if (playing) {
|
||||
audio.pause(); setPlaying(false)
|
||||
if (listenStartRef.current !== null) listenStartRef.current = null
|
||||
} else {
|
||||
audio.play().then(() => {
|
||||
setPlaying(true)
|
||||
listenStartRef.current = Date.now()
|
||||
if (!playTrackedRef.current && title) {
|
||||
playTrackedRef.current = true
|
||||
fetch('/api/analytics/play', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title }) }).catch(() => {})
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
function skip(sec: number) {
|
||||
const audio = audioRef.current
|
||||
if (!audio) return
|
||||
audio.currentTime = Math.max(0, Math.min(duration, audio.currentTime + sec))
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
function fmt(s: number) {
|
||||
if (!isFinite(s) || s < 0) return '0:00'
|
||||
return `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const pct = duration > 0 ? (currentTime / duration) * 100 : 0
|
||||
|
||||
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} />
|
||||
|
||||
return (
|
||||
<div className="latest-episode-player">
|
||||
<audio ref={audioRef} src={audioUrl} preload="metadata" />
|
||||
<p className="latest-episode-player__show">Verse by Verse with Nate</p>
|
||||
{title && <p className="latest-episode-player__title">{title}</p>}
|
||||
<div className="latest-episode-player__play-row">
|
||||
<button className="latest-episode-player__skip" onClick={() => skip(-15)} aria-label="Back 15 seconds">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/><text x="12" y="15" textAnchor="middle" fontSize="5.5" fontFamily="sans-serif" fill="currentColor">15</text></svg>
|
||||
<span>back</span>
|
||||
</button>
|
||||
<button className={`latest-episode-player__play${buffering ? ' latest-episode-player__play--buffering' : ''}`} 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>
|
||||
<button className="latest-episode-player__skip" onClick={() => skip(30)} aria-label="Forward 30 seconds">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.01 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/><text x="12" y="15" textAnchor="middle" fontSize="5.5" fontFamily="sans-serif" fill="currentColor">30</text></svg>
|
||||
<span>fwd</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="latest-episode-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 a = audioRef.current; if (!a) return; if (e.key === 'ArrowRight') a.currentTime = Math.min(duration, a.currentTime + 10); if (e.key === 'ArrowLeft') a.currentTime = Math.max(0, a.currentTime - 10) }}>
|
||||
<div className="latest-episode-player__fill" style={{ width: `${pct}%` }} />
|
||||
<div className="latest-episode-player__thumb" style={{ left: `${pct}%` }} />
|
||||
</div>
|
||||
<div className="latest-episode-player__times">
|
||||
<span>{fmt(currentTime)}</span>
|
||||
<span>{fmt(duration)}</span>
|
||||
</div>
|
||||
{content.platformSpotifyUrl && (
|
||||
<div className="latest-episode-player__spotify-row">
|
||||
<a href={content.platformSpotifyUrl} target="_blank" rel="noreferrer" className="latest-episode-player__spotify-link">
|
||||
<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>
|
||||
Also on Spotify
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EpisodesPage({ content }: { content: SiteContent }) {
|
||||
|
||||
Reference in New Issue
Block a user