CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-08 00:18: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

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

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

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 // BEGIN: Add Seek Indicator Component
customComponents.current.seekIndicator = new SeekIndicator(playerRef.current, { customComponents.current.seekIndicator = new SeekIndicator(playerRef.current, {
seekAmount: 5, // 5 seconds seek amount seekAmount: 5, // 5 seconds seek amount
isEmbedPlayer: isEmbedPlayer, // Pass embed mode flag
}); });
// Add the component but ensure it's hidden initially // Add the component but ensure it's hidden initially
playerRef.current.addChild(customComponents.current.seekIndicator); 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 { #page-embed .video-js-root-embed .video-js.vjs-user-inactive:not(.vjs-paused):not(.vjs-ended) .vjs-progress-control {
opacity: 0 !important; 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;
}