feat: fix event support on the demo

[ibrahimcesar]

Summary

Fixes a critical infinite rendering loop in the Events Demo component that was causing:

• Infinite "onIframeAdded" events flooding the event log
• Player state not updating correctly
• Poor demo performance and user experience

Problem

The Events Demo was experiencing an infinite rendering loop caused by inline event handler functions being recreated on every render:

1. Inline arrow functions like onIframeAdded={() => addEvent('onIframeAdded')} created new function references on each render
2. React's useCallback in the library component detected these as prop changes
3. This triggered the useEffect dependency to re-run, calling onIframeAdded()
4. Which called addEvent() → updated state via setEvents() → re-rendered the component
5. Back to step 1 → infinite loop!

User Impact:

• Event log showed endless stream of onIframeAdded events instead of single event
• Player State box remained stuck on "Not Started" and never updated
• Confusing demonstration of the events feature
• Poor performance due to constant re-rendering

Solution

Wrapped all event handlers and helper functions in useCallback to maintain stable function references across renders:

• ✅ Memoized addEvent helper function
• ✅ Memoized clearEvents helper function
• ✅ Memoized all 10 event handlers:
  • handleIframeAdded
  • handleReady
  • handleStateChange
  • handlePlay
  • handlePause
  • handleEnd
  • handleBuffering
  • handleError
  • handlePlaybackRateChange
  • handlePlaybackQualityChange

Additional Improvements:

• Moved PLAYER_STATE_NAMES constant outside component (performance optimization)
• Updated demo description to clarify events are scoped to specific video embed
• Updated demo to use local library build (file:..) for consistency

Changes

Modified Files

• demo/pages/index.js

  • Added useCallback import from React
  • Wrapped all event handlers in useCallback hooks
  • Moved state names constant outside component
  • Improved demo description text

• demo/package.json & demo/package-lock.json

  • Updated to use local library build for consistency with PR fix: update demo deployment to use local library build #195

Testing

✅ All 51 unit tests pass

npm test
# Test Files  1 passed (1)
# Tests  51 passed (51)
✅ Library builds successfully

npm run build
# ✓ built in 2.37s
✅ Demo builds successfully

cd demo && npm run build  
# ✓ Compiled successfully
# ✓ Generating static pages (3/3)

Breaking Changes
None. This is a demo-only fix with no changes to the library API.

[github-actions]

size-limit report 📦

Path	Size
ES Module	2.88 KB (0%)
CommonJS	2.84 KB (0%)
CSS	1.05 KB (0%)