From 2a12fec89ee41c61bba1834e173ba369227b4276 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Fri, 17 Oct 2025 14:05:38 +0300
Subject: [PATCH] Keep poster visible for audio embeds and update track
 handling

Ensures the poster image remains visible during playback for audio files in embed players by updating both JavaScript logic and CSS. Also updates subtitle track handling to set the default track and adjusts Video.js player configuration for better control over native and emulated tracks.
---
 .../components/video-player/VideoJSPlayer.jsx | 40 ++++++++++++++-----
 frontend-tools/video-js/src/styles/embed.css  | 10 +++++
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
index 34b2c401..3dfddf90 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -1849,7 +1849,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
             src: '/sample-subtitles.vtt',
             srclang: 'en',
             label: 'English Subtitles',
-            default: false,
+            default: true,
         },
         {
             kind: 'subtitles',
@@ -1870,7 +1870,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
               src: track.src,
               srclang: track.srclang,
               label: track.label,
-              default: false,
+              default: track.default || false,
           }))
         : [];
 
@@ -2150,16 +2150,17 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                         nativeControlsForTouch: PlayerConfig.nativeControlsForTouch,
 
                         // Use native audio tracks instead of emulated - disabled for consistency
-                        nativeAudioTracks: true,
+                        nativeAudioTracks: false,
 
-                        // Use native text tracks instead of emulated - disabled for consistency
-                        nativeTextTracks: true,
+                        // Use Video.js text tracks for full positioning control on mobile
+                        // Native tracks don't allow CSS positioning control
+                        nativeTextTracks: isTouchDevice,
 
                         // Use native video tracks instead of emulated - disabled for consistency
-                        nativeVideoTracks: true,
+                        nativeVideoTracks: false,
 
                         // Preload text tracks
-                        preloadTextTracks: true,
+                        preloadTextTracks: false,
 
                         // Play inline
                         playsinline: true,
@@ -2189,9 +2190,28 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                     userPreferences.current.setupAutoSave(playerRef.current);
 
                     // Add class for audio files to enable audio-specific styling
-                    console.log('mediaData.media_type', mediaData.data?.media_type);
                     if (mediaData.data?.media_type === 'audio') {
                         playerRef.current.addClass('vjs-audio-type');
+
+                        // For embed players, ensure poster stays visible during playback
+                        if (isEmbedPlayer) {
+                            const ensurePosterVisible = () => {
+                                const posterEl = playerRef.current.el().querySelector('.vjs-poster');
+                                if (posterEl) {
+                                    posterEl.style.display = 'block';
+                                    posterEl.style.opacity = '1';
+                                    posterEl.style.visibility = 'visible';
+                                }
+                            };
+
+                            // Keep poster visible on all play events
+                            playerRef.current.on('play', ensurePosterVisible);
+                            playerRef.current.on('playing', ensurePosterVisible);
+                            playerRef.current.on('timeupdate', ensurePosterVisible);
+
+                            // Initial call
+                            setTimeout(ensurePosterVisible, 200);
+                        }
                     }
 
                     // Enable tooltips for all standard VideoJS buttons
@@ -3939,7 +3959,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
             </p>
 
             {/* Add subtitle tracks */}
-            {/*   {subtitleTracks &&
+            {subtitleTracks &&
                 subtitleTracks.map((track, index) => (
                     <track
                         key={index}
@@ -3950,7 +3970,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                         default={track.default}
                     />
                 ))}
-
+            {/* 
             <track kind="chapters" src="/sample-chapters.vtt" /> */}
             {/* Add chapters track */}
             {/*  {chaptersData &&
diff --git a/frontend-tools/video-js/src/styles/embed.css b/frontend-tools/video-js/src/styles/embed.css
index 30a70118..0e9c8c9e 100644
--- a/frontend-tools/video-js/src/styles/embed.css
+++ b/frontend-tools/video-js/src/styles/embed.css
@@ -18,6 +18,16 @@
     background-color: #000 !important;
 }
 
+/* Keep poster visible even when playing for audio files */
+#page-embed .video-js-root-embed .video-js.vjs-audio-type .vjs-poster,
+#page-embed .video-js-root-embed .video-js.vjs-audio-poster-mode .vjs-poster,
+#page-embed .video-js-root-embed .video-js.vjs-has-started.vjs-audio-type .vjs-poster,
+#page-embed .video-js-root-embed .video-js.vjs-playing.vjs-audio-type .vjs-poster {
+    display: block !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+}
+
 /* Fullscreen video element - maintain aspect ratio */
 #page-embed .video-js-root-embed .video-js video {
     position: absolute !important;