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
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "siteforge",
|
||||
"private": true,
|
||||
"version": "1.1.4",
|
||||
"version": "1.1.5",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
+154
-84
@@ -3155,85 +3155,73 @@
|
||||
}
|
||||
|
||||
/* Custom audio player */
|
||||
/* ── Full / cinematic layout (Option A) ── */
|
||||
.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;
|
||||
border-radius: 12px;
|
||||
padding: 1.75rem 1.5rem 1.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.episode-audio-player__show-name {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
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;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.episode-audio-player__title {
|
||||
font-size: 0.88rem;
|
||||
font-size: 1rem;
|
||||
color: var(--brand-warm-white, #f0ead8);
|
||||
margin: 0;
|
||||
margin: 0 0 1.4rem;
|
||||
font-family: var(--brand-font-heading, Georgia, serif);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.35;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.episode-audio-player__controls {
|
||||
.episode-audio-player__play-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 2px;
|
||||
justify-content: center;
|
||||
gap: 1.1rem;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
|
||||
.episode-audio-player__skip {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: rgba(240, 234, 216, 0.45);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
transition: color 0.15s;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.episode-audio-player__skip:hover {
|
||||
color: var(--brand-warm-white, #f0ead8);
|
||||
}
|
||||
|
||||
.episode-audio-player__skip svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.episode-audio-player__skip span {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.episode-audio-player__play {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 50%;
|
||||
background: var(--brand-gold, #c9a84c);
|
||||
border: none;
|
||||
@@ -3243,11 +3231,17 @@
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--brand-black, #0a0a08);
|
||||
transition: background 0.15s;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.episode-audio-player__play:hover {
|
||||
background: var(--brand-gold-light, #e0c070);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.episode-audio-player__play:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.45);
|
||||
}
|
||||
|
||||
@keyframes buffering-pulse {
|
||||
@@ -3260,25 +3254,18 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.episode-audio-player__bar {
|
||||
position: relative;
|
||||
height: 3px;
|
||||
background: rgba(42, 37, 24, 0.9);
|
||||
background: rgba(201, 168, 76, 0.12);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.episode-audio-player__bar:focus-visible {
|
||||
@@ -3286,6 +3273,9 @@
|
||||
}
|
||||
|
||||
.episode-audio-player__fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: var(--brand-gold, #c9a84c);
|
||||
border-radius: 2px;
|
||||
@@ -3296,30 +3286,96 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
background: var(--brand-gold-light, #e0c070);
|
||||
background: var(--brand-gold, #c9a84c);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.episode-audio-player__times {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.68rem;
|
||||
font-size: 0.62rem;
|
||||
color: var(--brand-muted, #b0a48c);
|
||||
font-family: var(--brand-font-body, Georgia, serif);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Compact variant (study sections) */
|
||||
.episode-audio-player--compact .episode-audio-player__art {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
.episode-audio-player__spotify-row {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.episode-audio-player__spotify-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: rgba(240, 234, 216, 0.4);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-size: 0.73rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.episode-audio-player__spotify-link:hover {
|
||||
color: #1DB954;
|
||||
}
|
||||
|
||||
.episode-audio-player__spotify-link svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Compact variant (study sections) ── */
|
||||
.episode-audio-player--compact {
|
||||
background: var(--brand-black-2, #0f0f0c);
|
||||
border: 1px solid rgba(201, 168, 76, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__title {
|
||||
font-size: 0.8rem;
|
||||
text-wrap: unset;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__play {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__play:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__play svg {
|
||||
@@ -3327,12 +3383,26 @@
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__bar {
|
||||
height: 2px;
|
||||
.episode-audio-player--compact .episode-audio-player__track {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__title {
|
||||
font-size: 0.8rem;
|
||||
.episode-audio-player--compact .episode-audio-player__bar {
|
||||
height: 2px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__spotify-link {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.episode-audio-player--compact .episode-audio-player__spotify-link svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.episode-detail-show-notes,
|
||||
|
||||
+20
-15
@@ -1282,6 +1282,21 @@ function EpisodeDetailPage({ content }: { content: SiteContent }) {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const episode = (content.podcastFeaturedLinks ?? []).find(e => e.id === id)
|
||||
const [resolvedEmbedUrl, setResolvedEmbedUrl] = useState('')
|
||||
const [audioUrl, setAudioUrl] = useState('')
|
||||
|
||||
// Fetch the direct MP3 URL from the RSS-backed episodes list, matching by title
|
||||
useEffect(() => {
|
||||
if (!episode) return
|
||||
fetch('/api/episodes')
|
||||
.then(r => r.ok ? r.json() : Promise.reject())
|
||||
.then((data: { episodes?: { title: string; audioUrl: string }[] }) => {
|
||||
const match = (data.episodes ?? []).find(e =>
|
||||
e.title?.trim().toLowerCase() === episode.title?.trim().toLowerCase()
|
||||
)
|
||||
if (match?.audioUrl) setAudioUrl(match.audioUrl)
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [episode])
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
@@ -1383,22 +1398,12 @@ function EpisodeDetailPage({ content }: { content: SiteContent }) {
|
||||
<h1 className="episode-detail-title">{episode.title}</h1>
|
||||
{episode.summary && <p className="episode-detail-summary">{episode.summary}</p>}
|
||||
|
||||
{(episode.embedUrl || episode.url) && (
|
||||
{(episode.embedUrl || episode.url || audioUrl) && (
|
||||
<div className="episode-detail-embed">
|
||||
{resolvedEmbedUrl ? (
|
||||
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} />
|
||||
)
|
||||
{audioUrl ? (
|
||||
<EpisodeAudioPlayer src={audioUrl} title={episode.title} size="full" spotifyUrl={episode.url || content.platformSpotifyUrl} />
|
||||
) : resolvedEmbedUrl ? (
|
||||
<EpisodeAudioPlayer src={resolvedEmbedUrl} title={episode.title} size="full" spotifyUrl={episode.url || content.platformSpotifyUrl} />
|
||||
) : (
|
||||
<div className="episode-embed-skeleton" aria-label="Loading player…" />
|
||||
)}
|
||||
|
||||
@@ -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