Fix chapters button not opening overlay on desktop clicks

[mrjoshuap]

Fix chapters button not opening overlay on desktop clicks

Fixes #1453

Problem

The chapters button in the MediaCMS video player was not opening the custom chapters overlay on desktop clicks. The button was visible and populated with chapter markers, but clicking it did nothing. Mobile touch events worked correctly.

Root Cause

Video.js chapters button is a MenuButton component with built-in menu handling. The MenuButton's internal click handler intercepts events before custom Video.js event handlers (.on('click')) can fire, preventing the custom overlay from opening.

Solution

• Replaced Video.js event system (.on('click')) with native DOM event listeners (addEventListener) for desktop clicks
• This bypasses MenuButton's built-in handler interception
• Added proper cleanup to prevent memory leaks when switching between mobile/desktop modes
• Mobile touchstart handler remains unchanged (already working)

Changes

• Modified setupChaptersButton() to use native DOM event listeners for desktop
• Added cleanup in dispose() method to remove event listeners
• Added reference nullification to prevent memory leaks

Testing Needed

⚠️ This is an initial implementation and requires testing

I don't have access to videos with chapters to test this fix. Testing is needed to verify:

• Desktop click on chapters button opens the custom overlay
• Mobile touch still works correctly (regression test)
• Overlay closes properly when clicking button again or clicking outside
• No conflicts with other Video.js menu buttons
• No memory leaks (event listeners properly cleaned up)
• Works correctly when switching between mobile/desktop modes (e.g., browser resize)

Technical Details

• Uses native JavaScript addEventListener (no new dependencies)
• Minimal code changes (~15 lines)
• Backward compatible (mobile behavior unchanged)
• Follows same pattern used for other menu buttons in VideoJSPlayer.jsx

[Yiannistaos]

@mrjoshuap Thanks for the detailed explanation.

I’m currently unable to reproduce the issue on my side. Could you please share a video URL that has chapters enabled so I can test this properly?

Also, it would be helpful to know which device and browser you were using when you encountered the problem (e.g. desktop Chrome, Safari, etc.).