feat: implement playback rate and quality change events #213
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes onPlaybackRateChange and onPlaybackQualityChange events by handling additional properties in YouTube's infoDelivery postMessage events. ## What Changed ### Core Implementation (src/lib/index.tsx) - Added handlers for `playbackRate` and `playbackQuality` in infoDelivery event - YouTube sends these properties via the same infoDelivery events as state changes - Events now fire when user changes speed or quality via ⚙️ settings button ### Documentation (README.md) - Updated Event Compatibility Status table - both events now ✅ Verified Working - Added testing instructions for ⚙️ settings button usage - Enhanced Advanced Events section with practical examples - Added new "Event Status Tracker Demo" section - Updated Quick Start example to showcase new events - Updated Core Features section to highlight all events verified ### Demo Updates (demo/pages/index.js) - Event Status Tracker now properly marks playback rate/quality as fired - Added testing instructions in UI - Enhanced event handler logging ## Technical Details YouTube's iframe postMessage API sends multiple event types via `infoDelivery`: - `info.playerState` - player state changes (already handled) - `info.playbackRate` - playback speed changes (NEW) - `info.playbackQuality` - video quality changes (NEW) The infoDelivery handler now checks for all three properties and calls the appropriate callback handlers. ## Testing 1. Play video in Events demo 2. Click ⚙️ settings button in YouTube player 3. Change "Playback speed" → onPlaybackRateChange fires 4. Change "Quality" → onPlaybackQualityChange fires 5. Event Status Tracker shows ✅ for both events ## Event Status All core events now fully tested and verified: ✅ onIframeAdded ✅ onReady ✅ onStateChange ✅ onPlay ✅ onPause ✅ onEnd ✅ onBuffering ✅ onPlaybackRateChange (NEW - now working) ✅ onPlaybackQualityChange (NEW - now working)⚠️ onError (untested - requires invalid video) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Contributor
size-limit report 📦
|
ibrahimcesar
pushed a commit
that referenced
this pull request
Nov 15, 2025
Fixes code style issues in src/lib/index.tsx that were causing the format:check CI step to fail on PR #213 (feat/playback-rate-quality-events). This commit applies Prettier formatting rules to ensure consistent code style across the codebase.
ibrahimcesar
added a commit
that referenced
this pull request
Nov 15, 2025
* feat: implement playback rate and quality change events Fixes onPlaybackRateChange and onPlaybackQualityChange events by handling additional properties in YouTube's infoDelivery postMessage events. ## What Changed ### Core Implementation (src/lib/index.tsx) - Added handlers for `playbackRate` and `playbackQuality` in infoDelivery event - YouTube sends these properties via the same infoDelivery events as state changes - Events now fire when user changes speed or quality via ⚙️ settings button ### Documentation (README.md) - Updated Event Compatibility Status table - both events now ✅ Verified Working - Added testing instructions for ⚙️ settings button usage - Enhanced Advanced Events section with practical examples - Added new "Event Status Tracker Demo" section - Updated Quick Start example to showcase new events - Updated Core Features section to highlight all events verified ### Demo Updates (demo/pages/index.js) - Event Status Tracker now properly marks playback rate/quality as fired - Added testing instructions in UI - Enhanced event handler logging ## Technical Details YouTube's iframe postMessage API sends multiple event types via `infoDelivery`: - `info.playerState` - player state changes (already handled) - `info.playbackRate` - playback speed changes (NEW) - `info.playbackQuality` - video quality changes (NEW) The infoDelivery handler now checks for all three properties and calls the appropriate callback handlers. ## Testing 1. Play video in Events demo 2. Click ⚙️ settings button in YouTube player 3. Change "Playback speed" → onPlaybackRateChange fires 4. Change "Quality" → onPlaybackQualityChange fires 5. Event Status Tracker shows ✅ for both events ## Event Status All core events now fully tested and verified: ✅ onIframeAdded ✅ onReady ✅ onStateChange ✅ onPlay ✅ onPause ✅ onEnd ✅ onBuffering ✅ onPlaybackRateChange (NEW - now working) ✅ onPlaybackQualityChange (NEW - now working)⚠️ onError (untested - requires invalid video) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]> * fix: Apply Prettier formatting to resolve PR #213 CI failure Fixes code style issues in src/lib/index.tsx that were causing the format:check CI step to fail on PR #213 (feat/playback-rate-quality-events). This commit applies Prettier formatting rules to ensure consistent code style across the codebase. --------- Co-authored-by: Ibrahim Cesar Nogueira Bevilacqua <[email protected]> Co-authored-by: Claude <[email protected]>
ibrahimcesar
pushed a commit
that referenced
this pull request
Nov 15, 2025
Merged PR #213 which implements playback rate and quality change events. Conflict resolution: - src/lib/index.tsx: Resolved formatting conflict in iframe parameters - Kept double quotes for string literals (consistent with codebase style) - Kept multi-line formatting for better readability - Preserved origin parameter logic from both branches All 51 tests passing ✅
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes onPlaybackRateChange and onPlaybackQualityChange events by handling additional properties in YouTube's infoDelivery postMessage events.
What Changed
Core Implementation (src/lib/index.tsx)
playbackRateandplaybackQualityin infoDelivery eventDocumentation (README.md)
Demo Updates (demo/pages/index.js)
Technical Details
YouTube's iframe postMessage API sends multiple event types via
infoDelivery:info.playerState- player state changes (already handled)info.playbackRate- playback speed changes (NEW)info.playbackQuality- video quality changes (NEW)The infoDelivery handler now checks for all three properties and calls the appropriate callback handlers.
Testing
Event Status
All core events now fully tested and verified:
⚠️ onError (untested - requires invalid video)
✅ onIframeAdded
✅ onReady
✅ onStateChange
✅ onPlay
✅ onPause
✅ onEnd
✅ onBuffering
✅ onPlaybackRateChange (NEW - now working)
✅ onPlaybackQualityChange (NEW - now working)
🤖 Generated with Claude Code