Replace Spotify iframe with custom centered player (layout A); v1.1.5
- EpisodeAudioPlayer full variant: centered title, large gold play button, skip-back 15s / skip-forward 30s flanking controls, full-width scrubber - Compact variant (study sections) unchanged - Episode detail page fetches direct Anchor MP3 URL from /api/episodes by title match; falls back to resolvedEmbedUrl while loading - Plays stream from Anchor CDN so stats still count Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmert
@@ -15,19 +15,21 @@ function formatTime(seconds: number): string {
|
||||
return `${m}:${String(s).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function SpotifyLinkIcon({ href }: { href: string }) {
|
||||
function SkipBackIcon() {
|
||||
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>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
function SkipForwardIcon() {
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -39,15 +41,11 @@ export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: Ep
|
||||
const [duration, setDuration] = useState(0)
|
||||
const playTrackedRef = useRef(false)
|
||||
const listenStartRef = useRef<number | null>(null)
|
||||
const totalListenSecondsRef = useRef(0)
|
||||
|
||||
function flushListenTime() {
|
||||
if (listenStartRef.current !== null && title) {
|
||||
const seconds = Math.round((Date.now() - listenStartRef.current) / 1000)
|
||||
if (seconds > 1) {
|
||||
totalListenSecondsRef.current += seconds
|
||||
sendEvent('audio_listen_time', { title, seconds })
|
||||
}
|
||||
if (seconds > 1) sendEvent('audio_listen_time', { title, seconds })
|
||||
listenStartRef.current = null
|
||||
}
|
||||
}
|
||||
@@ -107,6 +105,12 @@ export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: Ep
|
||||
}
|
||||
}
|
||||
|
||||
function skip(seconds: number) {
|
||||
const audio = audioRef.current
|
||||
if (!audio) return
|
||||
audio.currentTime = Math.max(0, Math.min(duration, audio.currentTime + seconds))
|
||||
}
|
||||
|
||||
function seek(e: React.MouseEvent<HTMLDivElement>) {
|
||||
const audio = audioRef.current
|
||||
if (!audio || !duration) return
|
||||
@@ -119,70 +123,119 @@ export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: Ep
|
||||
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${buffering ? ' episode-audio-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>
|
||||
|
||||
<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)
|
||||
}}
|
||||
// Compact variant keeps the original horizontal layout
|
||||
if (isCompact) {
|
||||
return (
|
||||
<div className="episode-audio-player episode-audio-player--compact">
|
||||
<audio ref={audioRef} src={src} preload="metadata" />
|
||||
<div className="episode-audio-player__inner">
|
||||
<div className="episode-audio-player__body">
|
||||
{title && <p className="episode-audio-player__title">{title}</p>}
|
||||
<div className="episode-audio-player__controls">
|
||||
<button
|
||||
className={`episode-audio-player__play${buffering ? ' episode-audio-player__play--buffering' : ''}`}
|
||||
onClick={togglePlay}
|
||||
aria-label={playing ? 'Pause' : 'Play'}
|
||||
>
|
||||
<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>
|
||||
{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>
|
||||
{spotifyUrl && (
|
||||
<a href={spotifyUrl} 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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isCompact && spotifyUrl && <SpotifyLinkIcon href={spotifyUrl} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Full / cinematic layout (Option A)
|
||||
return (
|
||||
<div className="episode-audio-player">
|
||||
<audio ref={audioRef} src={src} preload="metadata" />
|
||||
<p className="episode-audio-player__show-name">Verse by Verse with Nate</p>
|
||||
{title && <p className="episode-audio-player__title">{title}</p>}
|
||||
<div className="episode-audio-player__play-row">
|
||||
<button className="episode-audio-player__skip" onClick={() => skip(-15)} aria-label="Back 15 seconds">
|
||||
<SkipBackIcon />
|
||||
<span>15s</span>
|
||||
</button>
|
||||
<button
|
||||
className={`episode-audio-player__play${buffering ? ' episode-audio-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="episode-audio-player__skip" onClick={() => skip(30)} aria-label="Forward 30 seconds">
|
||||
<SkipForwardIcon />
|
||||
<span>30s</span>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
{spotifyUrl && (
|
||||
<div className="episode-audio-player__spotify-row">
|
||||
<a href={spotifyUrl} 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>
|
||||
Also on Spotify
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user