From 0fb9a20dc9b595b9f588256d2c3f7f5341ab9f09 Mon Sep 17 00:00:00 2001 From: dwithana Date: Fri, 1 Nov 2024 15:09:34 -0400 Subject: [PATCH] Update progress-bar CSS on fullscreen exit in iOS --- .../VideoJS/components/js/VideoJSProgress.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js index 7041e30b..e69f1e16 100644 --- a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js +++ b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js @@ -60,9 +60,17 @@ class CustomSeekBar extends SeekBar { }); // Update our progress bar after the user leaves full screen - this.player.on('fullscreenchange', (e) => { + this.player.on('fullscreenchange', () => { if (!this.player.isFullscreen()) { - this.setProgress(this.player.currentTime()); + const currentTime = this.player.currentTime(); + // Update CSS for played range in VideoJS player's progress-bar + let played = Math.min(100, + Math.max(0, 100 * (currentTime / this.totalDuration)) + ); + document.documentElement.style.setProperty( + '--range-progress', `calc(${played}%)` + ); + this.setProgress(currentTime); } });