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

fix: Ensure play icon (SeekIndicator) stays centered in embed view regardless of window size

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-30 09:59:24 +03:00
parent 71ad76285f
commit b228527924
3 changed files with 53 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend-tools/video-js/src/components/controls/SeekIndicator.js
View File

@ -8,6 +8,7 @@ class SeekIndicator extends Component {
constructor(player, options) {
super(player, options);
this.seekAmount = options.seekAmount || 5; // Default seek amount in seconds
this.isEmbedPlayer = options.isEmbedPlayer || false; // Store embed mode flag
this.showTimeout = null;
}
@ -173,22 +174,24 @@ class SeekIndicator extends Component {
// Clear any text content in the text element
textEl.textContent = '';
// Force show the element with YouTube-style positioning
// Use fixed positioning relative to viewport
el.style.cssText = `
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none !important;
width: auto !important;
height: auto !important;
`;
position: fixed !important;
top: 50vh !important;
left: 50vw !important;
transform: translate(-50%, -50%) !important;
z-index: 10000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
`;
// Auto-hide after 1 second
this.showTimeout = setTimeout(() => {

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

@ -2624,6 +2624,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// BEGIN: Add Seek Indicator Component
customComponents.current.seekIndicator = new SeekIndicator(playerRef.current, {
seekAmount: 5, // 5 seconds seek amount
isEmbedPlayer: isEmbedPlayer, // Pass embed mode flag
});
// Add the component but ensure it's hidden initially
playerRef.current.addChild(customComponents.current.seekIndicator);

34
frontend-tools/video-js/src/styles/embed.css
View File

@ -142,3 +142,37 @@
#page-embed .video-js-root-embed .video-js.vjs-user-inactive:not(.vjs-paused):not(.vjs-ended) .vjs-progress-control {
opacity: 0 !important;
}
/* ===== EMBED-SPECIFIC SEEK INDICATOR POSITIONING ===== */
/* Ensure play icon (SeekIndicator) stays centered in embed view regardless of window size */
#page-embed .video-js-root-embed .video-js .vjs-seek-indicator {
position: fixed !important;
top: 50vh !important;
left: 50vw !important;
transform: translate(-50%, -50%) !important;
z-index: 10000 !important;
pointer-events: none !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.2s ease-in-out !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ===== EMBED-SPECIFIC BIG PLAY BUTTON POSITIONING ===== */
/* Ensure big play button stays centered in embed view regardless of window size */
#page-embed .video-js-root-embed .video-js .vjs-big-play-button {
position: fixed !important;
top: 50vh !important;
left: 50vw !important;
transform: translate(-50%, -50%) !important;
z-index: 1000 !important;
pointer-events: auto !important;
margin: 0 !important;
padding: 0 !important;
}