From 816135266c7310358e9d902a9e360ef69cec61b8 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Fri, 10 Oct 2025 10:30:29 +0300 Subject: [PATCH] Skip empty tooltips --- .../components/controls/ButtonTooltips.css | 37 ++++++++++--------- .../components/overlays/EndScreenOverlay.js | 2 - .../components/video-player/VideoJSPlayer.jsx | 14 +++++-- 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/frontend-tools/video-js/src/components/controls/ButtonTooltips.css b/frontend-tools/video-js/src/components/controls/ButtonTooltips.css index 84aca52c..0e3df0be 100644 --- a/frontend-tools/video-js/src/components/controls/ButtonTooltips.css +++ b/frontend-tools/video-js/src/components/controls/ButtonTooltips.css @@ -6,8 +6,8 @@ position: relative; } -/* Universal tooltip styling for all buttons */ -.video-js .vjs-control-bar .vjs-control::after { +/* Universal tooltip styling for all buttons - only show when title is not empty */ +.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:focus::after { + .video-js .vjs-control-bar .vjs-control[title]:not([title=""]):not([title=" "]):hover::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; diff --git a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js index 71ab0fce..7f43bc1e 100644 --- a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js +++ b/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 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 ef3bbd71..2336ead0 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/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, - subsCapsButton: false, + captionsButton: hasSubtitles ? true : false, + subsCapsButton: hasSubtitles ? true : false, // Audio track button audioTrackButton: true,