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.

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)

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

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',
         });

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

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',
+            captionsButton: '',
-            subsCapsButton: 'Subtitles/CC',
+            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 = [