From d5d1e2496ffdc655a51567a35f26353c7b913c7b Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Tue, 30 Sep 2025 10:11:54 +0300 Subject: [PATCH] feat: Show overlay (avatar & title) in embed, when controls are visible or video is paused/stopped --- frontend-tools/video-js/index-embed.html | 2 +- .../components/overlays/EmbedInfoOverlay.js | 19 ++++++++++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/frontend-tools/video-js/index-embed.html b/frontend-tools/video-js/index-embed.html index f5e9c3b5..41775072 100644 --- a/frontend-tools/video-js/index-embed.html +++ b/frontend-tools/video-js/index-embed.html @@ -6,7 +6,7 @@ VideoJS - +
diff --git a/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js b/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js index 3dcc2eb7..5ac9eec1 100644 --- a/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js +++ b/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js @@ -184,14 +184,14 @@ class EmbedInfoOverlay extends Component { const player = this.player(); const overlay = this.el(); - // Function to show overlay only when video is paused/stopped + // Function to show overlay when controls are visible or video is paused/stopped const updateOverlayVisibility = () => { - if (player.paused() || player.ended()) { - // Show overlay when paused or ended + if (player.paused() || player.ended() || player.userActive()) { + // Show overlay when paused, ended, or when user is active (controls visible) overlay.style.opacity = '1'; overlay.style.visibility = 'visible'; } else { - // Hide overlay when playing + // Hide overlay when playing and user is inactive (controls hidden) overlay.style.opacity = '0'; overlay.style.visibility = 'hidden'; } @@ -202,7 +202,7 @@ class EmbedInfoOverlay extends Component { updateOverlayVisibility(); }); - // Hide overlay when video starts playing + // Update overlay visibility when video starts/stops playing player.on('play', () => { updateOverlayVisibility(); }); @@ -217,6 +217,15 @@ class EmbedInfoOverlay extends Component { updateOverlayVisibility(); }); + // Show/hide overlay based on user activity (controls visibility) + player.on('useractive', () => { + updateOverlayVisibility(); + }); + + player.on('userinactive', () => { + updateOverlayVisibility(); + }); + // Initial state check setTimeout(() => { updateOverlayVisibility();