Culture Feed video: second tap on the volume control pauses playback instead of re-muting

Surface: Consumer PWA · Culture Feed · video card. Environment: Production. Severity: P1.

What is happening. Culture Feed videos begin playing with audio off. Tapping the volume control turns audio on and the video keeps playing, as intended. Tapping the volume control a second time — the associate’s attempt to turn audio back off — pauses playback rather than re-muting. Mute state and playback state are being changed by the same gesture.

Why it happens. The volume control is nested inside the video card, and the card carries its own tap-to-play/pause handler, so a tap on the volume icon runs both the mute toggle and the playback toggle. The first tap looks correct only because the unmute path calls play() explicitly (browsers block unmuted autoplay, so unmute has to re-kick playback), which immediately undoes the pause the card handler just applied. The mute path has no equivalent play() call, so on the second tap the pause is the only change the associate sees.

Steps to reproduce.

1. Open the Culture Feed in the Consumer PWA and scroll to a video post.
2. Video autoplays muted. Tap the volume control — audio turns on, playback continues.
3. Tap the volume control again to turn audio off — the video pauses instead of muting.

Proposed fix. Stop the volume control’s event from reaching the card: call stopPropagation() and preventDefault() in the mute toggle handler, and add nativeEvent.stopImmediatePropagation() if the card’s play/pause listener is attached natively rather than through React (React 17+ delegates at the root, so a native ancestor listener fires first and is not stopped by React’s stopPropagation alone). In the same pass, remove the play() call from the unmute path so mute state and playback state are fully independent.

To confirm during the fix.

• Whether the card’s play/pause listener is a React onClick or a native addEventListener — that determines whether stopImmediatePropagation is also required.
• That the volume control is not nested inside a card-level link or anchor wrapper, which would introduce a third handler on the same tap.
• Verification on a physical iPhone in the installed PWA — iOS Safari can dispatch pointer and click events separately on some button configurations and reproduce the double-toggle even after propagation is handled.

Reference: CoachPulse_CultureFeed_VideoAudio_QA_Findings_v1, finding F1.