zzstoatzz.io / plyr.fm
audio streaming app plyr.fm
38
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: don't eat anchor clicks in liker strip — it was nuking playback (#1307)

Previous fix slapped onclick={(e) => e.stopPropagation()} on the
LikersStrip root to prevent +N/× clicks from bubbling to the outer
play button. That also ate anchor clicks on individual avatars
before they could reach document, where SvelteKit's client-side
nav hijacker lives. With that listener never firing, the browser
fell back to a full page reload — which tears down the audio
element mid-playback.

Scope the stopPropagation to just the non-anchor interactive bits:
- +N handler in LikersStrip now stopPropagation's its own event
- × collapse button already stopPropagation'd
- root span no longer stops anything

Avatar links now reach document → SvelteKit intercepts → client-side
nav → player persists → audio keeps playing. The outer play button's
existing anchor guard (closest('a')) still prevents playback on
anchor clicks, so no regression on that front either.

Co-authored-by: Claude Opus 4 (1M context) <noreply@anthropic.com>

authored by

nate nowack
Claude Opus 4 (1M context) and committed by
GitHub 99e145fd ed7a9487

+16 -9
+16 -9
frontend/src/lib/components/LikersStrip.svelte
··· 50 50 return users; 51 51 } 52 52 53 - async function handleMoreClick() { 53 + async function handleMoreClick(e: MouseEvent | KeyboardEvent) { 54 + // stop the click on +N from bubbling to an enclosing play button, 55 + // but only on this non-anchor element — anchor clicks (individual 56 + // avatars) must still reach document for SvelteKit's client-side 57 + // nav to hijack them, otherwise the browser does a full page reload 58 + // and tears down the audio element mid-playback. 59 + e.stopPropagation(); 54 60 if (loading) return; 55 61 if (allLikers) { 56 62 // already loaded — just toggle. second click collapses. ··· 61 67 try { 62 68 allLikers = await fetchAllLikers(); 63 69 expanded = true; 64 - } catch (e) { 65 - console.error('error expanding likers:', e); 70 + } catch (err) { 71 + console.error('error expanding likers:', err); 66 72 } finally { 67 73 loading = false; 68 74 } ··· 110 116 } 111 117 </script> 112 118 113 - <!-- stop clicks and keyboard activations from bubbling to an enclosing 114 - interactive surface (e.g. the TrackItem play button). otherwise clicking 115 - +N or × would also trigger track playback. --> 116 - <!-- svelte-ignore a11y_no_static_element_interactions --> 119 + <!-- NOTE: we deliberately do NOT stopPropagation at this root. avatar clicks 120 + are anchor links and must reach document so SvelteKit's client-side nav 121 + can hijack them — otherwise the browser falls back to a full page 122 + reload which tears down the audio element and stops playback. 123 + The outer play button in TrackItem already has an anchor guard that 124 + prevents playback when the click target is (or is inside) an <a>. 125 + The non-anchor interactive bits (+N, ×) stop propagation individually. --> 117 126 <span 118 127 class="likers-strip" 119 128 class:expanded 120 129 class:loading 121 130 bind:this={container} 122 131 aria-live="polite" 123 - onclick={(e) => e.stopPropagation()} 124 - onkeydown={(e) => e.stopPropagation()} 125 132 > 126 133 <span class="label">liked by</span> 127 134 <AvatarStack