From 6dae2e616e8bf33a55e672520cfca459596b9495 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Mon, 6 Oct 2025 18:17:37 +0300
Subject: [PATCH] Sync EmbedInfoOverlay visibility with control bar

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.
---
 .../components/overlays/EmbedInfoOverlay.js   | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

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