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

Style and wrap picture-in-picture button in VideoJS

Browse Source 
Added custom CSS for the picture-in-picture button wrapper to ensure consistent sizing and alignment with other controls. Updated VideoJSPlayer.jsx to wrap the PiP button in a styled container for improved UI consistency.
This commit is contained in:
Yiannis Christodoulou 2025-10-02 12:20:36 +03:00
parent 37464e5a86
commit 09bd4d59b1
2 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -119,6 +119,9 @@ html {
padding: 2px !important; padding: 2px !important;
margin: 0 2px !important; margin: 0 2px !important;
transition: background-color 0.3s ease !important; transition: background-color 0.3s ease !important;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
} }
.video-js .vjs-play-wrapper:hover { .video-js .vjs-play-wrapper:hover {
@ -137,6 +140,9 @@ html {
padding: 2px !important; padding: 2px !important;
margin: 0 2px !important; margin: 0 2px !important;
transition: background-color 0.3s ease !important; transition: background-color 0.3s ease !important;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
} }
.video-js .vjs-next-video-wrapper:hover { .video-js .vjs-next-video-wrapper:hover {
@ -155,6 +161,9 @@ html {
padding: 2px !important; padding: 2px !important;
margin: 0 2px !important; margin: 0 2px !important;
transition: background-color 0.3s ease !important; transition: background-color 0.3s ease !important;
width: auto !important;
height: 40px !important;
flex-shrink: 0 !important;
} }
.video-js .vjs-volume-wrapper:hover { .video-js .vjs-volume-wrapper:hover {
@ -173,6 +182,9 @@ html {
padding: 2px !important; padding: 2px !important;
margin: 0 2px !important; margin: 0 2px !important;
transition: background-color 0.3s ease !important; transition: background-color 0.3s ease !important;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
} }
.video-js .vjs-autoplay-wrapper:hover { .video-js .vjs-autoplay-wrapper:hover {
@ -191,6 +203,9 @@ html {
padding: 2px !important; padding: 2px !important;
margin: 0 2px !important; margin: 0 2px !important;
transition: background-color 0.3s ease !important; transition: background-color 0.3s ease !important;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
} }
.video-js .vjs-chapters-button.vjs-menu-button:hover { .video-js .vjs-chapters-button.vjs-menu-button:hover {
@ -209,6 +224,9 @@ html {
padding: 2px !important; padding: 2px !important;
margin: 0 2px !important; margin: 0 2px !important;
transition: background-color 0.3s ease !important; transition: background-color 0.3s ease !important;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
} }
.video-js .vjs-subtitles-button.vjs-menu-button:hover { .video-js .vjs-subtitles-button.vjs-menu-button:hover {
@ -227,12 +245,48 @@ html {
padding: 2px !important; padding: 2px !important;
margin: 0 2px !important; margin: 0 2px !important;
transition: background-color 0.3s ease !important; transition: background-color 0.3s ease !important;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
} }
.video-js .vjs-settings-wrapper:hover { .video-js .vjs-settings-wrapper:hover {
background: rgba(0, 0, 0, 0.2) !important; background: rgba(0, 0, 0, 0.2) !important;
} }
/* Picture-in-picture button wrapper styling */
.video-js .vjs-pip-wrapper {
order: 9 !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;
width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
}
.video-js .vjs-pip-wrapper:hover {
background: rgba(0, 0, 0, 0.2) !important;
}
/* Center the pip button inside its wrapper */
.video-js .vjs-pip-wrapper .vjs-picture-in-picture-control {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
.video-js .vjs-control { .video-js .vjs-control {
height: auto !important; height: auto !important;
} }

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

@ -2737,6 +2737,24 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
} }
}, 200); // Longer delay to ensure settings button is fully created }, 200); // Longer delay to ensure settings button is fully created
// Wrap picture-in-picture button in custom div container
setTimeout(() => {
const controlBar = playerRef.current.getChild('controlBar');
const pipControl = controlBar?.getChild('pictureInPictureToggle');
if (pipControl) {
const pipButtonEl = pipControl.el();
if (pipButtonEl) {
const pipWrapper = document.createElement('div');
pipWrapper.className =
'vjs-pip-wrapper vjs-menu-button vjs-menu-button-popup vjs-control vjs-button';
// Insert wrapper before the pip button and move button inside
pipButtonEl.parentNode.insertBefore(pipWrapper, pipButtonEl);
pipWrapper.appendChild(pipButtonEl);
}
}
}, 100); // Small delay to ensure pip button is available
// END: Add Settings Menu Component // END: Add Settings Menu Component
// BEGIN: Add Seek Indicator Component // BEGIN: Add Seek Indicator Component