👁 Visual timeline debugger for developers #34

🌟 Goal

Build a visual timeline debugger that allows developers to inspect cue points, segment switches, interaction triggers, and playback state transitions during video playback.

✅ Why This Matters

• Helps debug cue placement and behavior visually during playback
• Useful for QA testing and developer insight into cue/interactivity flow
• Accelerates iteration cycles for lesson creators and player devs
• Enables real-time validation of dynamic segment switching or interaction responses

📦 Scope

• Overlay or side panel UI showing:
  • Current playback time
  • Upcoming cue points
  • Interaction trigger times
  • Segment transitions
  • Player state changes (idle, playing, waitingForInteraction, etc.)
• Color-coded or icon-based visual markers on a timeline bar
• Toggle to enable/disable debugger view
• Export logs for deeper review or bug reports

🔧 Implementation Ideas

• Use an HTML5 <canvas> or custom DOM elements above the video
• Leverage existing analytics/state hooks to populate the debugger
• Consider enabling hover to inspect cue metadata
• May reuse or extend the existing Analytics and CueHandler modules

📅 Developer Use Cases

• Validate that cue triggers appear at expected times
• Verify that user responses are correctly captured and routed
• Diagnose unexpected playback behavior across branches

💬 Feedback Requested

What would make this tool more helpful for your dev workflow?
Should this be part of the player core or an opt-in debug plugin?
Would you prefer an overlay, sidebar, or separate panel?

🧰 Contribute

If you’re interested in building part of this, leave a comment or propose an initial PR!