From 12fb07c6fc85f9b36e8b63e70c792986386f453f Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 6 Jan 2026 10:50:44 +0100
Subject: [PATCH] wip #7885

---
 js/libs/fluidbook/fluidbook.video.js | 117 +++++++++++++++++++--------
 1 file changed, 83 insertions(+), 34 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.video.js b/js/libs/fluidbook/fluidbook.video.js
index 7280a8e5..7fca1af4 100644
--- a/js/libs/fluidbook/fluidbook.video.js
+++ b/js/libs/fluidbook/fluidbook.video.js
@@ -263,49 +263,68 @@ FluidbookVideo.prototype = {
 
         player = videojs(id, setup);
 
-        for (var k = 0; k < tracks.length; k++) {
-            var track = tracks[k];
+        addAudioTracks()
 
-            if(!track.file.includes('.mp3')) {
-                continue;
+        function sendPlayEvent() {
+            if (!playEventSent) {
+                $this.fluidbook.stats.trackEvent(statsType, 'play', statsName);
+                playEventSent = true;
             }
+        }
 
-            // Create a track object.
-            var trackObj = new videojs.AudioTrack({
-                kind: track.kind,
-                label: track.label,
-                language: track.srclang
-            });
+        // Fake audio track to force tracklist display
+        const mainTrack = new videojs.AudioTrack({});
+        player.audioTracks().addTrack(mainTrack);
 
-            player.audioTracks().addTrack(trackObj);
+        function addAudioTracks() {
+            var audioTrackHtml = '<div class="audioTrackContainer">';
 
-            // Add audio
-            // var html = '<audio id="audio_'+id+'" src="data/links/'+track.file+'"></audio>';
+            for (var k = 0; k < tracks.length; k++) {
+                var track = tracks[k];
 
-            //$(e).append(html)
-        }
+                if (!track.file.includes('.mp3')) {
+                    continue;
+                }
 
-        function sendPlayEvent() {
-            if (!playEventSent) {
-                $this.fluidbook.stats.trackEvent(statsType, 'play', statsName);
-                playEventSent = true;
+                var trackObj = new videojs.AudioTrack({
+                    kind: track.kind,
+                    label: track.label,
+                    language: track.srclang,
+                    enabled: false
+                });
+
+                player.audioTracks().addTrack(trackObj);
+
+                audioTrackHtml += '<audio id="'+trackObj.id+'" src="data/links/'+track.file+'"></audio>';
             }
-        }
 
-        player.ready(function () {
-            player.controlBar.addChild('AudioTrackButton');
+            audioTrackHtml += '</div>';
 
-            // Hide CC if disabled in video settings
+            $(e).append(audioTrackHtml)
+        }
 
-            var tracks = player.audioTracks();
-            console.log(tracks);
+        function syncAudioAndVideo(audioTrackList) {
+            var track = audioTrackList.tracks_.filter((n) => { return n.enabled; })[0];
 
-            for (var i = 0; i < tracks.length; i++) {
-                console.log(tracks[i].label, tracks[i].language, tracks[i].enabled);
+            if (track) {
+                $("audio#" + track.id)[0].currentTime = player.currentTime();
             }
+        }
+
+        function resetAudios(track) {
+            if(track) {
+                $("audio#" + track.id)[0].currentTime = 0;
+            }
+        }
 
-            tracks[0].enabled = true
+        function getEnabledTrack(audioTrackList) {
+            return audioTrackList.tracks_.filter((n) => { return n.enabled; })[0];
+        }
 
+        // Get the current player's AudioTrackList object.
+        var audioTrackList = player.audioTracks();
+        player.ready(function () {
+            // Hide CC if disabled in video settings
             console.log('cc', cc);
             if (!cc) {
                 console.log('cc disabled');
@@ -417,11 +436,9 @@ FluidbookVideo.prototype = {
                 $this.fluidbook.links.hideLinkById(id);
             });
 
-            $this.fluidbook.sound.pauseAmbientIfSomethingIsPlaying();
-
+            syncAudioAndVideo(audioTrackList)
 
-            /*player.muted(1)
-            $("#audio_"+id)[0].play();*/
+            $this.fluidbook.sound.pauseAmbientIfSomethingIsPlaying();
         });
 
         player.on('pause', function () {
@@ -432,18 +449,45 @@ FluidbookVideo.prototype = {
 
             // Now the issue is that we need to hide it again if we start playing
             // So every time we do this, we can create a one-time listener for play events.
+            let enabledTrack = getEnabledTrack(audioTrackList)
             player.one('play', function () {
                 this.bigPlayButton.hide();
+                if(enabledTrack) {
+                    $("audio#" + enabledTrack.id)[0].play();
+                    syncAudioAndVideo(audioTrackList)
+                }
             });
 
+            if(enabledTrack) {
+                syncAudioAndVideo(audioTrackList)
+                $("audio#" + enabledTrack.id)[0].pause();
+            }
 
             $.each(hidelinksonplay, function (k, id) {
                 $this.fluidbook.links.showLinkById(id);
             });
 
             $this.fluidbook.sound.playAmbientIfNothingIsPlaying();
+        });
+
+        // synchronize video and audio
+        player.on('timeupdate', function () {
+            syncAudioAndVideo(audioTrackList)
+        })
 
-            $("#audio_"+id)[0].pause();
+        // Listen to the "change" event.
+        audioTrackList.addEventListener('change', function() {
+            // Log the currently enabled AudioTrack label.
+            for (var i = 0; i < audioTrackList.length; i++) {
+                var track = audioTrackList[i];
+
+                resetAudios(track)
+
+                if (track.enabled) {
+                    $("audio#"+track.id)[0].play()
+                    return;
+                }
+            }
         });
 
         player.on('fullscreenchange', function () {
@@ -456,6 +500,11 @@ FluidbookVideo.prototype = {
 
         player.on('ended', function () {
             $this.fluidbook.contentlock.addAction(linkid, 'complete');
+            syncAudioAndVideo(audioTrackList)
+            var enabledTrack = getEnabledTrack(audioTrackList);
+            if(enabledTrack) {
+                $("audio#" + enabledTrack.id)[0].ended()
+            }
         });
 
         if (autohide.length > 0) {
@@ -556,7 +605,7 @@ FluidbookVideo.prototype = {
     },
 
     hasOneVideoPlaying: function () {
-        let res = false;
+        let res= false;
         $.each(this.getActivePlayers(), function (k, player) {
             if (player.muted()) {
                 //return;
-- 
2.39.5