Chapters button does not open custom chapters overlay #1453
Description
Describe the issue
The custom chapters overlay feature in MediaCMS video player does not work when clicking the chapters button. The button is visible in the player control bar and populated with chapter markers, but clicking it does nothing. The custom overlay (CustomChaptersOverlay component) that should display chapter navigation does not appear.
The chapters button is present, chapters data is loaded (confirmed in console), and the CustomChaptersOverlay component is instantiated, but the overlay never opens on click.
To Reproduce
Steps to reproduce the issue:
- Upload a video with chapters (WebVTT chapters track)
- Navigate to the video page
- Observe that the chapters button is visible in the player controls
- Click the chapters button
- Nothing happens - overlay does not appear
Expected behavior
When clicking the chapters button, the custom chapters overlay should:
- Open and display over the video player
- Show a list of all chapters with thumbnails and timestamps
- Allow users to click on chapters to navigate to different parts of the video
- Close when clicking the button again or clicking outside the overlay
Screenshots
Console logs showing the issue:
- ✅ Chapters data loaded: 15 chapters detected
- ✅ CustomChaptersOverlay component instantiated
- ✅ Chapters button found and click handler attached
- ✅ DOM click events fire on button
- ❌ Video.js
.on('click')events do NOT fire - ❌
toggleOverlay()is never called
Environment (please complete the following information):
- OS: Linux (Docker container)
- Installation method: Docker Compose
- MediaCMS Version: 7.3
- Browser: Chrome and Firefox (tested on both)
- Video.js: Custom build with CustomChaptersOverlay component
Additional context
Root Cause Analysis
After extensive debugging, I think the issue is in the event handler setup in frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.js (around line 348).
Current Implementation (Broken):
setupChaptersButton() {
const controlBar = this.player().getChild('controlBar');
const chaptersButton = controlBar.getChild('chaptersButton');
if (chaptersButton) {
// Remove existing event listeners first
chaptersButton.off('click');
chaptersButton.off('touchstart');
if (this.isMobile) {
chaptersButton.on('touchstart', (e) => {
e.preventDefault();
this.toggleOverlay();
});
} else {
chaptersButton.on('click', this.toggleOverlay); // ← DOESN'T FIRE
}
}
}Problem: The Video.js event system (.on('click')) does not trigger for the chapters button. The chapters button has a built-in menu system that intercepts click events, preventing custom handlers from firing.
Debugging Evidence:
- Console logs confirm the handler is attached with
chaptersButton.on('click', handler) - Browser DevTools shows the button element exists in the DOM
- DOM-level click events DO fire on the button element (tested with
addEventListener) - Video.js
.on('click')events do NOT fire -toggleOverlay()is never called
This appears to be a conflict between Video.js's built-in chapters menu system and the custom overlay implementation. The Video.js chapters button component has its own click handlers that prevent custom Video.js event handlers from triggering properly.
NOTE - The chapters button works fine in mobile views on tapping. So it seems to be something related to the desktop view.