Skip to content

fix: reconcile inline YouTube play/pause with real playback - #513

Draft
posthog-eu[bot] wants to merge 1 commit into
devfrom
posthog-self-driving/fixinline-youtube-player-sync-playpause-15959c
Draft

fix: reconcile inline YouTube play/pause with real playback#513
posthog-eu[bot] wants to merge 1 commit into
devfrom
posthog-self-driving/fixinline-youtube-player-sync-playpause-15959c

Conversation

@posthog-eu

@posthog-eu posthog-eu Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Problem

  • Users trying to watch VInTogether lecture videos hit a play/pause button that flips its icon but doesn't start the video, rage-click, then abandon the lecture (confirmed in two independent sessions 11 days apart).
  • InlineYouTubePlayer drove playback off a reducer-only isPlaying flag with nothing reconciling it against the real iframe:
    • createInitialPlayerState(autoplay) seeded isPlaying: true, and topic selection passes autoplay, so the overlay rendered aria-label="Pause video" before the embed loaded — but YouTube won't autoplay unmuted without a gesture, so the first click paused a video that never started and the states stayed desynced.
    • handleSeek bailed silently in three branches (not ready, no duration, currentTime throws), so dragging the scrubber could do nothing with zero feedback.

Changes

  • Stop lying about play state. Seed isPlaying: false; apply autoplay intent in onReady once the embed is actually playable.
  • Reconcile the toggle against reality. togglePlay now drives the media element (play()/pause()) and, when the browser rejects play() (autoplay policy), corrects the button from playerRef.current.paused instead of desyncing.
  • Give the scrubber feedback. handleSeek's silent-bail branches re-pin the thumb to the video's real position and surface a transient hint (Video is still loading… / Couldn't seek right now) via an aria-live status.

Testing

  • npx tsc --noEmit — no new errors in the changed file (pre-existing SVG/JSON module-declaration errors are unrelated).
  • Deps aren't runnable headless here (external data sync + OAuth) so playback wasn't exercised live; the fix is behavioral around documented react-player v3 media-element semantics and the two traced sessions.

Agent context

  • Related work: #511 reworks the stuck-load watchdog and adds captureInlineVideoLoadFailed telemetry in the same files. It doesn't touch the toggle or seek path, so this is additive and merges independently — based on dev to keep review focused.

Created with PostHog Desktop from this inbox report.

The overlay play/pause button drove playback off a reducer-only isPlaying
flag seeded from `autoplay`, so picking a topic rendered "Pause" for a video
that had never started (YouTube blocks unmuted autoplay). The first click
then paused nothing and the button stayed out of step, producing rage-clicks.

- Seed isPlaying=false; apply autoplay intent on `onReady` instead of before the embed is playable.
- Toggle now drives the media element (play()/pause()) and reconciles the button against playerRef.current.paused, so a rejected click corrects the icon instead of desyncing.
- handleSeek's silent-bail branches now re-pin the scrubber to the real position and surface a transient hint (loading / can't-seek) instead of doing nothing.

Generated-By: PostHog Code
Task-Id: c0a8023d-c3ed-4a75-961a-9d7ac8df1afa
@vercel

vercel Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
examcooker-dev Error Error Aug 2, 2026 10:50am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants