zzstoatzz.io / plyr.fm
music on atproto plyr.fm
fork atom

refactor(ui): unify play button behavior across detail pages (#671)

adopts the track detail page pattern for playlist and album pages:
- show "play" / "pause" text (not "play now" / icon-only)
- consistent pause icon path across all pages
- add ethereal-glow animation to track page for consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

authored by zzstoatzz.io Claude Opus 4.5 and committed by GitHub 613ed9ee 9ce66955

options
unified split
Changed files
+7 -7
frontend
src
routes
playlist
[id]
+page.svelte
track
[id]
+page.svelte
u
[handle]
album
[slug]
+page.svelte
+3 -3
frontend/src/routes/playlist/[id]/+page.svelte
··· 881 > 882 {#if isPlaylistPlaying} 883 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 884 - <rect x="6" y="4" width="4" height="16" /> 885 - <rect x="14" y="4" width="4" height="16" /> 886 </svg> 887 {:else} 888 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 889 <path d="M8 5v14l11-7z" /> 890 </svg> 891 - play now 892 {/if} 893 </button> 894 <button class="queue-button" onclick={addToQueue}>
··· 881 > 882 {#if isPlaylistPlaying} 883 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 884 + <path d="M6 4h4v16H6zM14 4h4v16h-4z"/> 885 </svg> 886 + pause 887 {:else} 888 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 889 <path d="M8 5v14l11-7z" /> 890 </svg> 891 + play 892 {/if} 893 </button> 894 <button class="queue-button" onclick={addToQueue}>
+1 -1
frontend/src/routes/track/[id]/+page.svelte
··· 928 } 929 930 .btn-play.playing { 931 - opacity: 0.8; 932 } 933 934 .btn-queue {
··· 928 } 929 930 .btn-play.playing { 931 + animation: ethereal-glow 3s ease-in-out infinite; 932 } 933 934 .btn-queue {
+3 -3
frontend/src/routes/u/[handle]/album/[slug]/+page.svelte
··· 561 > 562 {#if isAlbumPlaying} 563 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 564 - <rect x="6" y="4" width="4" height="16" /> 565 - <rect x="14" y="4" width="4" height="16" /> 566 </svg> 567 {:else} 568 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 569 <path d="M8 5v14l11-7z"/> 570 </svg> 571 - play now 572 {/if} 573 </button> 574 <button class="queue-button" onclick={addToQueue}>
··· 561 > 562 {#if isAlbumPlaying} 563 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 564 + <path d="M6 4h4v16H6zM14 4h4v16h-4z"/> 565 </svg> 566 + pause 567 {:else} 568 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> 569 <path d="M8 5v14l11-7z"/> 570 </svg> 571 + play 572 {/if} 573 </button> 574 <button class="queue-button" onclick={addToQueue}>