CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-05 23:18:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Keep player controls visible when settings menu is open

Browse Source 
Introduces methods to keep the video player controls visible while the custom settings menu is open by periodically setting the player to active. Ensures the interval is cleared when the menu is closed or the component is disposed to prevent unintended behavior.
This commit is contained in:
Yiannis Christodoulou 2025-10-20 00:29:58 +03:00
parent 41b0bdcb50
commit c33b4a6a17
1 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
View File

@ -562,16 +562,6 @@ class CustomSettingsMenu extends Component {
} }
} }
// Cleanup method
dispose() {
this.stopSubtitleSync();
// Remove event listeners
document.removeEventListener('click', this.handleClickOutside);
// Remove text track change listener
if (this.player()) {
this.player().off('texttrackchange');
}
}
getAvailableQualities() { getAvailableQualities() {
// Priority: provided options -> MEDIA_DATA JSON -> player sources -> default // Priority: provided options -> MEDIA_DATA JSON -> player sources -> default
@ -960,6 +950,9 @@ class CustomSettingsMenu extends Component {
this.settingsOverlay.classList.remove('show'); this.settingsOverlay.classList.remove('show');
this.settingsOverlay.style.display = 'none'; this.settingsOverlay.style.display = 'none';
// Stop keeping controls visible
this.stopKeepingControlsVisible();
// Restore body scroll on mobile when closing // Restore body scroll on mobile when closing
if (this.isMobile) { if (this.isMobile) {
document.body.style.overflow = ''; document.body.style.overflow = '';
@ -970,6 +963,9 @@ class CustomSettingsMenu extends Component {
this.settingsOverlay.classList.add('show'); this.settingsOverlay.classList.add('show');
this.settingsOverlay.style.display = 'block'; this.settingsOverlay.style.display = 'block';
// Keep controls visible while settings menu is open
this.keepControlsVisible();
// Add haptic feedback on mobile when opening // Add haptic feedback on mobile when opening
if (this.isMobile && navigator.vibrate) { if (this.isMobile && navigator.vibrate) {
navigator.vibrate(30); navigator.vibrate(30);
@ -1029,11 +1025,40 @@ class CustomSettingsMenu extends Component {
return this.settingsOverlay && this.settingsOverlay.classList.contains('show'); return this.settingsOverlay && this.settingsOverlay.classList.contains('show');
} }
// Keep controls visible while settings menu is open
keepControlsVisible() {
const player = this.player();
if (!player) return;
// Keep player in active state
player.userActive(true);
// Set up interval to periodically keep player active
this.controlsVisibilityInterval = setInterval(() => {
if (this.isMenuOpen()) {
player.userActive(true);
} else {
this.stopKeepingControlsVisible();
}
}, 1000); // Check every second
}
// Stop keeping controls visible
stopKeepingControlsVisible() {
if (this.controlsVisibilityInterval) {
clearInterval(this.controlsVisibilityInterval);
this.controlsVisibilityInterval = null;
}
}
// Close the settings menu // Close the settings menu
closeMenu() { closeMenu() {
if (this.settingsOverlay) { if (this.settingsOverlay) {
this.settingsOverlay.classList.remove('show'); this.settingsOverlay.classList.remove('show');
this.settingsOverlay.style.display = 'none'; this.settingsOverlay.style.display = 'none';
// Stop keeping controls visible
this.stopKeepingControlsVisible();
this.speedSubmenu.style.display = 'none'; this.speedSubmenu.style.display = 'none';
if (this.qualitySubmenu) this.qualitySubmenu.style.display = 'none'; if (this.qualitySubmenu) this.qualitySubmenu.style.display = 'none';
if (this.subtitlesSubmenu) this.subtitlesSubmenu.style.display = 'none'; if (this.subtitlesSubmenu) this.subtitlesSubmenu.style.display = 'none';
@ -1447,6 +1472,17 @@ class CustomSettingsMenu extends Component {
} }
dispose() { dispose() {
// Stop subtitle sync and clear interval
this.stopSubtitleSync();
// Stop keeping controls visible
this.stopKeepingControlsVisible();
// Remove text track change listener
if (this.player()) {
this.player().off('texttrackchange');
}
// Remove event listeners // Remove event listeners
document.removeEventListener('click', this.handleClickOutside); document.removeEventListener('click', this.handleClickOutside);