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

Add custom wrapper for autoplay toggle button

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-10-02 12:10:59 +03:00
parent 73ea56c79b
commit 9e689c88ba
2 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,6 +161,24 @@ html {
background: rgba(0, 0, 0, 0.2) !important; background: rgba(0, 0, 0, 0.2) !important;
} }
/* Autoplay toggle wrapper styling */
.video-js .vjs-autoplay-wrapper {
order: 5 !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-autoplay-wrapper:hover {
background: rgba(0, 0, 0, 0.2) !important;
}
.video-js .vjs-control { .video-js .vjs-control {
height: auto !important; height: auto !important;
} }
@ -372,7 +390,7 @@ html {
} }
.video-js .vjs-autoplay-toggle { .video-js .vjs-autoplay-toggle {
margin-right: 10px !important; margin-right: 0px !important;
} }
.video-js .vjs-picture-in-picture-control { .video-js .vjs-picture-in-picture-control {
margin-left: 6px !important; margin-left: 6px !important;
@ -657,7 +675,7 @@ button.vjs-button > .vjs-icon-placeholder:before {
} }
.video-js .vjs-autoplay-toggle { .video-js .vjs-autoplay-toggle {
margin-right: 6px !important; margin-right: 0px !important;
} }
.video-js .vjs-picture-in-picture-control { .video-js .vjs-picture-in-picture-control {
margin-left: 6px !important; margin-left: 6px !important;
@ -752,7 +770,7 @@ button.vjs-button > .vjs-icon-placeholder:before {
} }
.video-js .vjs-autoplay-toggle { .video-js .vjs-autoplay-toggle {
margin-right: 2px !important; margin-right: 0px !important;
} }
/* Move seekbar very close to controls - minimal gap */ /* Move seekbar very close to controls - minimal gap */
@ -886,7 +904,7 @@ button.vjs-button > .vjs-icon-placeholder:before {
} }
.video-js .vjs-autoplay-toggle { .video-js .vjs-autoplay-toggle {
margin-right: 4px !important; margin-right: 0px !important;
} }
.video-js .vjs-picture-in-picture-control { .video-js .vjs-picture-in-picture-control {
margin-left: 4px !important; margin-left: 4px !important;
@ -925,7 +943,7 @@ button.vjs-button > .vjs-icon-placeholder:before {
bottom: 6em !important; bottom: 6em !important;
} }
.video-js .vjs-autoplay-toggle { .video-js .vjs-autoplay-toggle {
margin-right: 12px !important; margin-right: 0px !important;
} }
.video-js .vjs-picture-in-picture-control { .video-js .vjs-picture-in-picture-control {
margin-left: 12px !important; margin-left: 12px !important;

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

@ -2384,6 +2384,20 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
setTimeout(() => { setTimeout(() => {
autoplayToggleButton.updateIcon(); autoplayToggleButton.updateIcon();
}, 100); }, 100);
// Wrap autoplay toggle button in custom div container
setTimeout(() => {
const autoplayButtonEl = autoplayToggleButton.el();
if (autoplayButtonEl) {
const autoplayWrapper = document.createElement('div');
autoplayWrapper.className =
'vjs-autoplay-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
// Insert wrapper before the autoplay button and move button inside
autoplayButtonEl.parentNode.insertBefore(autoplayWrapper, autoplayButtonEl);
autoplayWrapper.appendChild(autoplayButtonEl);
}
}, 150); // Slightly longer delay to ensure button is fully rendered and updated
} catch (error) { } catch (error) {
console.error('✗ Failed to add autoplay toggle button:', error); console.error('✗ Failed to add autoplay toggle button:', error);
} }