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

Add custom wrapper for volume panel

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-10-02 12:07:39 +03:00
parent 0f135e61bb
commit 73ea56c79b
2 changed files with 49 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,9 +143,26 @@ html {
background: rgba(0, 0, 0, 0.2) !important; background: rgba(0, 0, 0, 0.2) !important;
} }
/* Volume panel wrapper styling */
.video-js .vjs-volume-wrapper {
order: 2 !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-volume-wrapper:hover {
background: rgba(0, 0, 0, 0.2) !important;
}
.video-js .vjs-control { .video-js .vjs-control {
height: auto !important; height: auto !important;
} }
.video-js .vjs-next-video-control { .video-js .vjs-next-video-control {
order: 1 !important; order: 1 !important;
@ -190,7 +207,7 @@ html {
/* YouTube-style bottom gradient overlay - covers entire video bottom when controls active */ /* YouTube-style bottom gradient overlay - covers entire video bottom when controls active */
.video-js-root-main .video-js.video-js-rounded-corners::after { .video-js-root-main .video-js.video-js-rounded-corners::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -227,7 +244,7 @@ html {
/* Dark background overlay when controls are visible to improve readability on bright videos */ /* Dark background overlay when controls are visible to improve readability on bright videos */
.video-js.vjs-user-active::before, .video-js.vjs-user-active::before,
.video-js.vjs-paused::before { .video-js.vjs-paused::before {
content: ''; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -306,7 +323,6 @@ html {
} }
.vjs-progress-holder { .vjs-progress-holder {
background: rgba(255, 255, 255, 0.5) !important; background: rgba(255, 255, 255, 0.5) !important;
} }
.video-js .vjs-progress-control { .video-js .vjs-progress-control {
@ -329,7 +345,7 @@ html {
.video-js .vjs-control-bar .vjs-icon-placeholder, .video-js .vjs-control-bar .vjs-icon-placeholder,
.video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder, .video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder,
.video-js .vjs-control-bar [class*='vjs-icon-'] { .video-js .vjs-control-bar [class*="vjs-icon-"] {
font-size: 1.5em !important; font-size: 1.5em !important;
} }

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

@ -2296,7 +2296,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// BEGIN: Wrap play button in custom div container // BEGIN: Wrap play button in custom div container
const playButtonEl = playToggle.el(); const playButtonEl = playToggle.el();
const playButtonWrapper = document.createElement('div'); const playButtonWrapper = document.createElement('div');
playButtonWrapper.className = 'vjs-play-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button'; playButtonWrapper.className =
'vjs-play-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
// Insert wrapper before the play button and move play button inside // Insert wrapper before the play button and move play button inside
playButtonEl.parentNode.insertBefore(playButtonWrapper, playButtonEl); playButtonEl.parentNode.insertBefore(playButtonWrapper, playButtonEl);
@ -2332,7 +2333,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
const nextVideoButtonEl = nextVideoButton.el(); const nextVideoButtonEl = nextVideoButton.el();
if (nextVideoButtonEl) { if (nextVideoButtonEl) {
const nextVideoWrapper = document.createElement('div'); const nextVideoWrapper = document.createElement('div');
nextVideoWrapper.className = 'vjs-next-video-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button'; nextVideoWrapper.className =
'vjs-next-video-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
// Insert wrapper before the next video button and move button inside // Insert wrapper before the next video button and move button inside
nextVideoButtonEl.parentNode.insertBefore(nextVideoWrapper, nextVideoButtonEl); nextVideoButtonEl.parentNode.insertBefore(nextVideoWrapper, nextVideoButtonEl);
@ -2342,6 +2344,24 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
} }
// END: Implement custom next video button // END: Implement custom next video button
// BEGIN: Wrap volume panel in custom div container
setTimeout(() => {
const volumePanel = controlBar.getChild('volumePanel');
if (volumePanel) {
const volumePanelEl = volumePanel.el();
if (volumePanelEl) {
const volumeWrapper = document.createElement('div');
volumeWrapper.className =
'vjs-volume-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
// Insert wrapper before the volume panel and move panel inside
volumePanelEl.parentNode.insertBefore(volumeWrapper, volumePanelEl);
volumeWrapper.appendChild(volumePanelEl);
}
}
}, 100); // Small delay to ensure volume panel is fully rendered
// END: Wrap volume panel in custom div container
// BEGIN: Implement autoplay toggle button - simplified // BEGIN: Implement autoplay toggle button - simplified
if (!isEmbedPlayer) { if (!isEmbedPlayer) {
try { try {