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

Add custom wrapper for settings button in VideoJS

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-10-02 12:15:06 +03:00
parent b70e8267ac
commit 37464e5a86
2 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend-tools/video-js/src/VideoJS.css
View File

@ -215,6 +215,24 @@ html {
background: rgba(0, 0, 0, 0.2) !important;
}
/* Settings button wrapper styling */
.video-js .vjs-settings-wrapper {
order: 8 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
background: rgba(0, 0, 0, 0.1) !important;
border-radius: 6px !important;
padding: 2px !important;
margin: 0 2px !important;
transition: background-color 0.3s ease !important;
}
.video-js .vjs-settings-wrapper:hover {
background: rgba(0, 0, 0, 0.2) !important;
}
.video-js .vjs-control {
height: auto !important;
}

21
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
View File

@ -2716,6 +2716,27 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
});
} catch (e) {}
// Wrap settings button in custom div container
setTimeout(() => {
const controlBar = playerRef.current.getChild('controlBar');
if (
controlBar &&
customComponents.current.settingsMenu &&
customComponents.current.settingsMenu.settingsButton
) {
const settingsButtonEl = customComponents.current.settingsMenu.settingsButton.el();
if (settingsButtonEl) {
const settingsWrapper = document.createElement('div');
settingsWrapper.className =
'vjs-settings-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
// Insert wrapper before the settings button and move button inside
settingsButtonEl.parentNode.insertBefore(settingsWrapper, settingsButtonEl);
settingsWrapper.appendChild(settingsButtonEl);
}
}
}, 200); // Longer delay to ensure settings button is fully created
// END: Add Settings Menu Component
// BEGIN: Add Seek Indicator Component