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

Support moved progress control in markers and sprite preview

Browse Source 
Updated ChapterMarkers and SpritePreview components to locate the progress control even if it has been moved out of the control bar, using a reference stored in customComponents. Also updated VideoJSPlayer to store customComponents on the player instance for easier access by child components.
This commit is contained in:
Yiannis Christodoulou 2025-10-10 01:39:33 +03:00
parent 59f65bdd21
commit e1108a9ba6
3 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend-tools/video-js/src/components/markers/ChapterMarkers.js
View File

@ -86,7 +86,16 @@ class ChapterMarkers extends Component {
return;
}
const progressControl = this.player().getChild('controlBar').getChild('progressControl');
// Try to get progress control from control bar first, then from moved location
let progressControl = this.player().getChild('controlBar').getChild('progressControl');
// If not found in control bar, it might have been moved to a wrapper
if (!progressControl) {
// Look for moved progress control in custom components
const customComponents = this.player().customComponents || {};
progressControl = customComponents.movedProgressControl;
}
if (!progressControl) return;
const seekBar = progressControl.getChild('seekBar');
@ -375,7 +384,14 @@ class ChapterMarkers extends Component {
dispose() {
// Clean up event listeners
const progressControl = this.player().getChild('controlBar')?.getChild('progressControl');
let progressControl = this.player().getChild('controlBar')?.getChild('progressControl');
// If not found in control bar, it might have been moved to a wrapper
if (!progressControl) {
const customComponents = this.player().customComponents || {};
progressControl = customComponents.movedProgressControl;
}
if (progressControl) {
const progressControlEl = progressControl.el();
progressControlEl.removeEventListener('mouseenter', this.handleMouseEnter);

27
frontend-tools/video-js/src/components/markers/SpritePreview.js
View File

@ -36,8 +36,22 @@ class SpritePreview extends Component {
return;
}
const progressControl = this.player().getChild('controlBar').getChild('progressControl');
if (!progressControl) return;
// Try to get progress control from control bar first, then from moved location
let progressControl = this.player().getChild('controlBar').getChild('progressControl');
console.log('SpritePreview: progressControl from controlBar:', progressControl);
// If not found in control bar, it might have been moved to a wrapper
if (!progressControl) {
// Look for moved progress control in custom components
const customComponents = this.player().customComponents || {};
progressControl = customComponents.movedProgressControl;
console.log('SpritePreview: progressControl from customComponents:', progressControl);
}
if (!progressControl) {
console.log('SpritePreview: No progress control found!');
return;
}
const seekBar = progressControl.getChild('seekBar');
if (!seekBar) return;
@ -229,7 +243,14 @@ class SpritePreview extends Component {
dispose() {
// Clean up event listeners
const progressControl = this.player().getChild('controlBar')?.getChild('progressControl');
let progressControl = this.player().getChild('controlBar')?.getChild('progressControl');
// If not found in control bar, it might have been moved to a wrapper
if (!progressControl) {
const customComponents = this.player().customComponents || {};
progressControl = customComponents.movedProgressControl;
}
if (progressControl) {
const progressControlEl = progressControl.el();
progressControlEl.removeEventListener('mouseenter', this.handleMouseEnter);

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

@ -2603,6 +2603,9 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
customComponents.current.movedProgressControl = progressControl;
customComponents.current.controlsWrapper = wrapper;
// Also store on player instance for sprite preview access
playerRef.current.customComponents = customComponents.current;
// Hide/show progress bar with control bar based on user activity
const syncProgressVisibility = () => {