fix: Show avatar and title when video is paused/stopped in embed mode

frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js

@@ -183,51 +183,43 @@ class EmbedInfoOverlay extends Component {
         const player = this.player();
         const overlay = this.el();
 
-        // Check if device is touch-enabled
+        // Function to show overlay only when video is paused/stopped
-        const isTouchDevice =
+        const updateOverlayVisibility = () => {
-            'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+            if (player.paused() || player.ended()) {
-
+                // Show overlay when paused or ended
-        // Show/hide with controls
+                overlay.style.opacity = '1';
-        player.on('useractive', () => {
-            overlay.style.opacity = '1';
-            overlay.style.visibility = 'visible';
-        });
-
-        player.on('userinactive', () => {
-            // On touch devices, keep overlay visible longer or don't hide it as aggressively
-            if (isTouchDevice) {
-                // Keep visible on touch devices when user inactive
-                overlay.style.opacity = '0.8';
                 overlay.style.visibility = 'visible';
             } else {
+                // Hide overlay when playing
                 overlay.style.opacity = '0';
                 overlay.style.visibility = 'hidden';
             }
-        });
+        };
 
-        // Always show when paused
+        // Show overlay when video is paused
         player.on('pause', () => {
-            overlay.style.opacity = '1';
+            updateOverlayVisibility();
-            overlay.style.visibility = 'visible';
         });
 
-        // Hide during fullscreen controls fade
+        // Hide overlay when video starts playing
-        player.on('fullscreenchange', () => {
+        player.on('play', () => {
-            setTimeout(() => {
+            updateOverlayVisibility();
-                if (player.isFullscreen()) {
-                    if (player.userActive()) {
-                        overlay.style.opacity = '1';
-                        overlay.style.visibility = 'visible';
-                    } else {
-                        overlay.style.opacity = '0';
-                        overlay.style.visibility = 'hidden';
-                    }
-                } else {
-                    overlay.style.opacity = '1';
-                    overlay.style.visibility = 'visible';
-                }
-            }, 100);
         });
+
+        // Show overlay when video ends
+        player.on('ended', () => {
+            updateOverlayVisibility();
+        });
+
+        // Show overlay when player is ready (initially paused)
+        player.on('ready', () => {
+            updateOverlayVisibility();
+        });
+
+        // Initial state check
+        setTimeout(() => {
+            updateOverlayVisibility();
+        }, 100);
     }
 
     // Method to update overlay content if needed

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

@@ -43,7 +43,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                           title: 'Modi tempora est quaerat numquam',
                           author_name: 'Markos Gogoulos',
                           author_profile: '/user/markos/',
-                          author_thumbnail: '/media/userlogos/2024/10/02/markos.jpeg',
+                          author_thumbnail: '/media/userlogos/user.jpg',
                           url: 'https://demo.mediacms.io/view?m=zK2nirNLC',
                           poster_url:
                               '/media/original/thumbnails/user/thorkild/2ca18fadeef8475eae513c12cc0830d3_8hguMHx.19990812hd_1920_1080_30fps.mp4.jpg',