From 6d4f6a93a62962b8a982029ca2b8aa0e398b33c1 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Sun, 13 Jul 2025 16:04:41 +0300
Subject: [PATCH] feat: Implement the next video functionality

---
 .../components/video-player/VideoJSPlayer.jsx | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

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 4f3e54e0..a416de17 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -20,10 +20,10 @@ function VideoJSPlayer() {
                 : {
                       data: {},
                       siteUrl: '',
+                      hasNextLink: true,
                   },
         []
     );
-    console.log('window.MEDIA_DATA hasNextLink', mediaData.hasNextLink);
 
     // Define chapters as JSON object
     // Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON
@@ -138,9 +138,13 @@ function VideoJSPlayer() {
         },
     ]);
 
-    // Function to navigate to next video (disabled for single video)
+    // Function to navigate to next video
     const goToNextVideo = () => {
-        // console.log('Next video functionality disabled for single video mode');
+        console.log('Next video functionality disabled for single video mode');
+
+        if (mediaData.onClickNextCallback && typeof mediaData.onClickNextCallback === 'function') {
+            mediaData.onClickNextCallback();
+        }
     };
 
     useEffect(() => {
@@ -494,7 +498,7 @@ function VideoJSPlayer() {
                         const playToggle = controlBar.getChild('playToggle');
                         const currentTimeDisplay = controlBar.getChild('currentTimeDisplay');
 
-                        // Implement custom time display component
+                        // BEGIN: Implement custom time display component
                         const customRemainingTime = new CustomRemainingTime(playerRef.current, {
                             displayNegative: false,
                             customPrefix: '',
@@ -508,12 +512,15 @@ function VideoJSPlayer() {
                         } else {
                             controlBar.addChild(customRemainingTime, {}, 2);
                         }
+                        // END: Implement custom time display component
 
-                        // Implement custom next video button
-                        const nextVideoButton = new NextVideoButton(playerRef.current);
-
-                        const playToggleIndex = controlBar.children().indexOf(playToggle); // Insert it after play button
-                        controlBar.addChild(nextVideoButton, {}, playToggleIndex + 1);
+                        // BEGIN: Implement custom next video button
+                        if (mediaData.hasNextLink) {
+                            const nextVideoButton = new NextVideoButton(playerRef.current);
+                            const playToggleIndex = controlBar.children().indexOf(playToggle); // Insert it after play button
+                            controlBar.addChild(nextVideoButton, {}, playToggleIndex + 1);
+                        }
+                        // END: Implement custom next video button
 
                         // Remove duplicate captions button and move chapters to end
                         const cleanupControls = () => {