diff --git a/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js b/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js index 54f2b43e..a7525051 100644 --- a/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js +++ b/frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js @@ -43,7 +43,6 @@ class AutoplayToggleButton extends Button { const button = super.createEl('button', { className: 'vjs-autoplay-toggle vjs-control vjs-button', type: 'button', - title: this.isAutoplayEnabled ? 'Autoplay is on' : 'Autoplay is off', 'aria-label': this.isAutoplayEnabled ? 'Autoplay is on' : 'Autoplay is off', }); @@ -115,7 +114,6 @@ class AutoplayToggleButton extends Button { this.updateIconClass(); if (this.el()) { - this.el().title = this.isAutoplayEnabled ? 'Autoplay is on' : 'Autoplay is off'; this.el().setAttribute('aria-label', this.isAutoplayEnabled ? 'Autoplay is on' : 'Autoplay is off'); const controlText = this.el().querySelector('.vjs-control-text'); if (controlText) diff --git a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js index 80082c6d..d9946841 100644 --- a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js +++ b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js @@ -64,7 +64,6 @@ class CustomSettingsMenu extends Component { `; // Add tooltip attributes - settingsButtonEl.setAttribute('title', 'Settings'); settingsButtonEl.setAttribute('aria-label', 'Settings'); // Position the settings button at the end of the control bar diff --git a/frontend-tools/video-js/src/components/controls/NextVideoButton.js b/frontend-tools/video-js/src/components/controls/NextVideoButton.js index 28f40b54..96cb85d0 100644 --- a/frontend-tools/video-js/src/components/controls/NextVideoButton.js +++ b/frontend-tools/video-js/src/components/controls/NextVideoButton.js @@ -25,7 +25,6 @@ class NextVideoButton extends Button { const button = videojs.dom.createEl('button', { className: 'vjs-next-video-button vjs-control vjs-button', type: 'button', - title: 'Next Video', 'aria-label': 'Next Video', 'aria-disabled': 'false', }); diff --git a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js index 7f43bc1e..038e51b6 100644 --- a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js +++ b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js @@ -7,7 +7,6 @@ class EndScreenOverlay extends Component { super(player, options); // Safely initialize relatedVideos with multiple fallbacks this.relatedVideos = options?.relatedVideos || options?._relatedVideos || this.options_?.relatedVideos || []; - console.log('relatedVideos1', this.relatedVideos); this.isTouchDevice = this.detectTouchDevice(); // Bind methods to preserve 'this' context 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 2336ead0..a36dd3fc 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -43,8 +43,8 @@ const enableStandardButtonTooltips = (player) => { fullscreenToggle: () => (player.isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'), pictureInPictureToggle: 'Picture-in-picture', subtitlesButton: 'Subtitles/CC', - captionsButton: 'Captions', - subsCapsButton: 'Subtitles/CC', + captionsButton: '', + subsCapsButton: '', chaptersButton: 'Chapters', audioTrackButton: 'Audio tracks', playbackRateMenuButton: 'Playback speed', @@ -52,6 +52,17 @@ const enableStandardButtonTooltips = (player) => { // durationDisplay: 'Duration', // Removed - no tooltip for duration }; + // Define tooltip mappings for custom buttons (by CSS class) + const customButtonTooltips = { + 'vjs-next-video-button': 'Next Video', + 'vjs-autoplay-toggle': (el) => { + // Check if autoplay is enabled by looking at the aria-label + const ariaLabel = el.getAttribute('aria-label') || ''; + return ariaLabel.includes('on') ? 'Autoplay is on' : 'Autoplay is off'; + }, + 'vjs-settings-button': 'Settings', + }; + // Apply tooltips to each button Object.keys(buttonTooltips).forEach((buttonName) => { const button = controlBar.getChild(buttonName); @@ -94,6 +105,42 @@ const enableStandardButtonTooltips = (player) => { } }); + // Apply tooltips to custom buttons (by CSS class) + Object.keys(customButtonTooltips).forEach((className) => { + const buttonEl = controlBar.el().querySelector(`.${className}`); + if (buttonEl) { + const tooltipText = + typeof customButtonTooltips[className] === 'function' + ? customButtonTooltips[className](buttonEl) + : customButtonTooltips[className]; + + // Skip empty tooltips + if (!tooltipText || tooltipText.trim() === '') { + console.log('Empty tooltip for custom button:', className, tooltipText); + return; + } + + buttonEl.setAttribute('title', tooltipText); + buttonEl.setAttribute('aria-label', tooltipText); + + // For autoplay button, update tooltip when state changes + if (className === 'vjs-autoplay-toggle') { + // Listen for aria-label changes to update tooltip + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'attributes' && mutation.attributeName === 'aria-label') { + const newTooltip = customButtonTooltips[className](buttonEl); + if (newTooltip && newTooltip.trim() !== '') { + buttonEl.setAttribute('title', newTooltip); + } + } + }); + }); + observer.observe(buttonEl, { attributes: true, attributeFilter: ['aria-label'] }); + } + } + }); + // Remove title attributes from volume-related elements to prevent blank tooltips const removeVolumeTooltips = () => { const volumeElements = [