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>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.1.4",
+  "version": "1.1.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -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;
+  border-radius: 12px;
-  padding: 1rem 1.1rem;
+  padding: 1.75rem 1.5rem 1.4rem;
-}
+  text-align: center;
-
-.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;
+  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;
+  margin-bottom: 0.4rem;
-}
-
-.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;
+  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;
+  line-height: 1.35;
-  overflow: hidden;
+  text-wrap: balance;
-  text-overflow: ellipsis;
 }
 
-.episode-audio-player__controls {
+.episode-audio-player__play-row {
   display: flex;
   align-items: center;
-  gap: 10px;
+  justify-content: center;
-  margin-top: 2px;
+  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;
+  width: 58px;
-  height: 34px;
+  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;
+  width: 20px;
-  height: 14px;
+  height: 20px;
-}
-
-.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);
+  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;
+  width: 11px;
-  height: 10px;
+  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__spotify-row {
-.episode-audio-player--compact .episode-audio-player__art {
+  margin-top: 1rem;
-  width: 42px;
+  display: flex;
-  height: 42px;
+  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 {
+.episode-audio-player--compact .episode-audio-player__track {
-  height: 2px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
 }
 
-.episode-audio-player--compact .episode-audio-player__title {
+.episode-audio-player--compact .episode-audio-player__bar {
-  font-size: 0.8rem;
+  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,

src/App.tsx

@@ -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 ? (
+              {audioUrl ? (
-                resolvedEmbedUrl.includes('spotify.com') ? (
+                <EpisodeAudioPlayer src={audioUrl} title={episode.title} size="full" spotifyUrl={episode.url || content.platformSpotifyUrl} />
-                  <iframe
+              ) : resolvedEmbedUrl ? (
-                    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 className="episode-embed-skeleton" aria-label="Loading player…" />
               )}

src/components/EpisodeAudioPlayer.tsx

@@ -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"/>
+      <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>
-    </a>
   )
 }
 
@@ -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) {
+      if (seconds > 1) sendEvent('audio_listen_time', { title, seconds })
-        totalListenSecondsRef.current += seconds
-        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,28 +123,14 @@ export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: Ep
   const pct = duration > 0 ? (currentTime / duration) * 100 : 0
   const isCompact = size === 'compact'
 
+  // Compact variant keeps the original horizontal layout
+  if (isCompact) {
     return (
-    <div className={`episode-audio-player ${isCompact ? 'episode-audio-player--compact' : ''}`}>
+      <div className="episode-audio-player 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 && (
+            {title && <p className="episode-audio-player__title">{title}</p>}
-            <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' : ''}`}
@@ -152,7 +142,6 @@ export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: Ep
                   : <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"
@@ -178,11 +167,75 @@ export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: Ep
                   <span>{formatTime(duration)}</span>
                 </div>
               </div>
-
+              {spotifyUrl && (
-            {isCompact && spotifyUrl && <SpotifyLinkIcon href={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>
           </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>
+  )
 }