From fef43efaa9c568345378cb298014a5f8dd81f4a0 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Fri, 10 Oct 2025 10:46:31 +0300 Subject: [PATCH] Refactor video player tooltips and remove static assets Moved tooltip logic for custom video player controls (autoplay, next video, settings) into VideoJSPlayer.jsx, removing direct 'title' attributes from button components. Improved dynamic tooltip updates for the autoplay toggle. Removed unused static video_js CSS and JS assets. --- .../controls/AutoplayToggleButton.js | 2 - .../components/controls/CustomSettingsMenu.js | 1 - .../components/controls/NextVideoButton.js | 1 - .../components/overlays/EndScreenOverlay.js | 1 - .../components/video-player/VideoJSPlayer.jsx | 51 ++++++++++++++++++- 5 files changed, 49 insertions(+), 7 deletions(-) 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 = [