CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-10 09:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor video player tooltips and remove static assets

Browse Source 
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.
This commit is contained in:
Yiannis Christodoulou 2025-10-10 10:46:31 +03:00
parent 816135266c
commit fef43efaa9
5 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-tools/video-js/src/components/controls/AutoplayToggleButton.js
View File

@ -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)

1
frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
View File

@ -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

1
frontend-tools/video-js/src/components/controls/NextVideoButton.js
View File

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

1
frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js
View File

@ -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

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

@ -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 = [