From e1108a9ba66881f6e12b939388725eb69062aa25 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Fri, 10 Oct 2025 01:39:33 +0300
Subject: [PATCH] Support moved progress control in markers and sprite preview

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.
---
 .../src/components/markers/ChapterMarkers.js  | 20 ++++++++++++--
 .../src/components/markers/SpritePreview.js   | 27 ++++++++++++++++---
 .../components/video-player/VideoJSPlayer.jsx |  3 +++
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend-tools/video-js/src/components/markers/ChapterMarkers.js b/frontend-tools/video-js/src/components/markers/ChapterMarkers.js
index 785a13dd..2f4691d6 100644
--- a/frontend-tools/video-js/src/components/markers/ChapterMarkers.js
+++ b/frontend-tools/video-js/src/components/markers/ChapterMarkers.js
@@ -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);
diff --git a/frontend-tools/video-js/src/components/markers/SpritePreview.js b/frontend-tools/video-js/src/components/markers/SpritePreview.js
index 65ec8d60..66a7f80c 100644
--- a/frontend-tools/video-js/src/components/markers/SpritePreview.js
+++ b/frontend-tools/video-js/src/components/markers/SpritePreview.js
@@ -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);
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 9399a30d..dbd3ede6 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -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 = () => {