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

Sync EmbedInfoOverlay visibility with control bar

Browse Source 
Updated the overlay's visibility logic to match the control bar's visibility, showing the overlay when the user is active, video is paused, ended, or hasn't started. Adjusted CSS transition to include visibility for smoother appearance changes.
This commit is contained in:
Yiannis Christodoulou 2025-10-06 18:17:37 +03:00
parent b70c938d83
commit 6dae2e616e
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js
View File

@ -43,7 +43,7 @@ class EmbedInfoOverlay extends Component {
padding: 8px 12px; padding: 8px 12px;
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
box-sizing: border-box; box-sizing: border-box;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease, visibility 0.3s ease;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
`; `;
@ -186,14 +186,24 @@ class EmbedInfoOverlay extends Component {
const player = this.player(); const player = this.player();
const overlay = this.el(); const overlay = this.el();
// YouTube-style behavior: show only on initial state and when paused // Sync overlay visibility with control bar visibility
const updateOverlayVisibility = () => { const updateOverlayVisibility = () => {
if (!player.hasStarted() || player.paused() || player.ended()) { const controlBar = player.getChild('controlBar');
// Show overlay when not started, paused, or ended
if (!player.hasStarted()) {
// Show overlay when video hasn't started (poster is showing) - like before
overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
} else if (player.paused() || player.ended()) {
// Always show overlay when paused or ended
overlay.style.opacity = '1';
overlay.style.visibility = 'visible';
} else if (player.userActive()) {
// Show overlay when user is active (controls are visible)
overlay.style.opacity = '1'; overlay.style.opacity = '1';
overlay.style.visibility = 'visible'; overlay.style.visibility = 'visible';
} else { } else {
// Hide overlay when playing (YouTube behavior) // Hide overlay when user is inactive (controls are hidden)
overlay.style.opacity = '0'; overlay.style.opacity = '0';
overlay.style.visibility = 'hidden'; overlay.style.visibility = 'hidden';
} }
@ -204,12 +214,12 @@ class EmbedInfoOverlay extends Component {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
// Hide overlay when video starts playing (YouTube behavior) // Update overlay when video starts playing
player.on('play', () => { player.on('play', () => {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
// Hide overlay when video actually starts (first play) // Update overlay when video actually starts (first play)
player.on('playing', () => { player.on('playing', () => {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
@ -219,16 +229,17 @@ class EmbedInfoOverlay extends Component {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
// Show overlay when player is ready (initially paused) // Show overlay when player is ready
player.on('ready', () => { player.on('ready', () => {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
// Show/hide overlay based on user activity (controls visibility) // Show overlay when user becomes active (controls show)
player.on('useractive', () => { player.on('useractive', () => {
updateOverlayVisibility(); updateOverlayVisibility();
}); });
// Hide overlay when user becomes inactive (controls hide)
player.on('userinactive', () => { player.on('userinactive', () => {
updateOverlayVisibility(); updateOverlayVisibility();
}); });