Skip empty tooltips

frontend-tools/video-js/src/components/controls/ButtonTooltips.css

@@ -6,8 +6,8 @@
     position: relative;
 }
 
-/* Universal tooltip styling for all buttons */
+/* Universal tooltip styling for all buttons - only show when title is not empty */
-.video-js .vjs-control-bar .vjs-control::after {
+.video-js .vjs-control-bar .vjs-control[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
     position: absolute;
     bottom: 100%;
@@ -40,8 +40,8 @@
 
 /* Show tooltip on hover and focus for desktop */
 @media (hover: hover) and (pointer: fine) {
-    .video-js .vjs-control-bar .vjs-control:hover::after,
+    .video-js .vjs-control-bar .vjs-control[title]:not([title=""]):not([title=" "]):hover::after,
-    .video-js .vjs-control-bar .vjs-control:focus::after {
+    .video-js .vjs-control-bar .vjs-control[title]:not([title=""]):not([title=" "]):focus::after {
         opacity: 1;
         visibility: visible;
         transform: translateX(-50%) translateY(-2px);
@@ -49,47 +49,50 @@
 }
 
 /* Specific button tooltips - override content when needed */
-.video-js .vjs-play-control::after {
+.video-js .vjs-play-control[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
-.video-js .vjs-mute-control::after {
+.video-js .vjs-mute-control[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
-.video-js .vjs-fullscreen-control::after {
+.video-js .vjs-fullscreen-control[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
-.video-js .vjs-picture-in-picture-toggle::after {
+.video-js .vjs-picture-in-picture-toggle[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
-.video-js .vjs-subtitles-button::after {
+.video-js .vjs-subtitles-button[title]:not([title=""]):not([title=" "])::after {
+    content: attr(title);
+}
+.video-js .vjs-subs-caps-button[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
-.video-js .vjs-chapters-button::after {
+.video-js .vjs-chapters-button[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
 /* Custom button tooltips */
-.video-js .vjs-autoplay-toggle::after {
+.video-js .vjs-autoplay-toggle[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
-.video-js .vjs-next-video-button::after {
+.video-js .vjs-next-video-button[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
-.video-js .vjs-settings-button::after {
+.video-js .vjs-settings-button[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
     left: auto !important;
     right: 0 !important;
     transform: translateX(-10px) !important;
 }
 
-.video-js .vjs-remaining-time::after {
+.video-js .vjs-remaining-time[title]:not([title=""]):not([title=" "])::after {
     content: attr(title);
 }
 
@@ -101,7 +104,7 @@
     }
 
     /* Show tooltip when touch-active class is added */
-    .video-js .vjs-control-bar .vjs-control.touch-tooltip-active::after {
+    .video-js .vjs-control-bar .vjs-control[title]:not([title=""]):not([title=" "]).touch-tooltip-active::after {
         display: block;
         opacity: 1;
         visibility: visible;
@@ -111,7 +114,7 @@
 
 /* Tablet-specific adjustments */
 @media (min-width: 768px) and (max-width: 1024px) and (hover: none) {
-    .video-js .vjs-control-bar .vjs-control.touch-tooltip-active::after {
+    .video-js .vjs-control-bar .vjs-control[title]:not([title=""]):not([title=" "]).touch-tooltip-active::after {
         font-size: 14px;
         padding: 10px 14px;
     }
@@ -119,7 +122,7 @@
 
 /* Mobile-specific adjustments */
 @media (max-width: 767px) {
-    .video-js .vjs-control-bar .vjs-control.touch-tooltip-active::after {
+    .video-js .vjs-control-bar .vjs-control[title]:not([title=""]):not([title=" "]).touch-tooltip-active::after {
         font-size: 12px;
         padding: 6px 10px;
         margin-bottom: 8px;

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

@@ -19,7 +19,6 @@ class EndScreenOverlay extends Component {
     // Method to update related videos after initialization
     setRelatedVideos(videos) {
         this.relatedVideos = videos || [];
-        console.log('Updated relatedVideos:', this.relatedVideos);
     }
 
     createEl() {
@@ -62,7 +61,6 @@ class EndScreenOverlay extends Component {
 
         // Get videos to show - access directly from options during createEl
         const relatedVideos = this.options_?.relatedVideos || this.relatedVideos || [];
-        console.log('createGrid relatedVideos:', relatedVideos);
 
         const videosToShow =
             relatedVideos.length > 0

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

@@ -43,6 +43,8 @@ const enableStandardButtonTooltips = (player) => {
             fullscreenToggle: () => (player.isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'),
             pictureInPictureToggle: 'Picture-in-picture',
             subtitlesButton: 'Subtitles/CC',
+            captionsButton: 'Captions',
+            subsCapsButton: 'Subtitles/CC',
             chaptersButton: 'Chapters',
             audioTrackButton: 'Audio tracks',
             playbackRateMenuButton: 'Playback speed',
@@ -60,6 +62,12 @@ const enableStandardButtonTooltips = (player) => {
                         ? buttonTooltips[buttonName]()
                         : buttonTooltips[buttonName];
 
+                // Skip empty tooltips
+                if (!tooltipText || tooltipText.trim() === '') {
+                    console.log('Empty tooltip for button:', buttonName, tooltipText);
+                    return;
+                }
+
                 buttonEl.setAttribute('title', tooltipText);
                 buttonEl.setAttribute('aria-label', tooltipText);
 
@@ -2061,11 +2069,11 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                         descriptionsButton: false,
 
                         // Subtitles (CC) button should be visible
-                        subtitlesButton: hasSubtitles && !isTouchDevice ? true : false,
+                        subtitlesButton: false, // hasSubtitles && !isTouchDevice ? true : false,
 
                         // Captions button (keep disabled to avoid duplicate with subtitles)
-                        captionsButton: false,
+                        captionsButton: hasSubtitles ? true : false,
-                        subsCapsButton: false,
+                        subsCapsButton: hasSubtitles ? true : false,
 
                         // Audio track button
                         audioTrackButton: true,