From c9daec86910e41b9f95c11da171205e9d65b4cc3 Mon Sep 17 00:00:00 2001 From: dwithana Date: Tue, 27 Aug 2024 13:32:58 -0400 Subject: [PATCH] Limit time tooltip display offset to playable range width --- .../VideoJS/components/js/VideoJSProgress.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js index 24fbdd5e..d3278034 100644 --- a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js +++ b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js @@ -490,15 +490,20 @@ function ProgressBar({ let time = convertToTime(e, offsetx, currentSrcIndex); + if (!time) { return; } + setActiveSrcIndex(currentSrcIndex); setCurrentTime(time); // Set text in the tooltip as the time relevant to the pointer event's position timeToolRef.current.innerHTML = formatTooltipTime(time); - // Calculate the horizontal position of the time tooltip - // using the event's offsetX property - let leftWidth = offsetx - timeToolRef.current.offsetWidth / 2; // deduct 0.5 x width of tooltip element + // Calculate the horizontal position of the time tooltip using the event's offsetX property + // Set time tooltip offset starting from the start of playable range + let leftWidth = leftBlockRef.current?.offsetWidth <= offsetx ? offsetx - leftBlockRef.current?.offsetWidth : offsetx; + // Set time tooltip offset to not excedd the end of playable range + leftWidth = Math.min(leftWidth, sliderRangeRef.current?.offsetWidth + leftBlockRef.current?.offsetWidth); + leftWidth = leftWidth - timeToolRef.current.offsetWidth / 2; // deduct 0.5 x width of tooltip element if (leftBlockRef.current) leftWidth += leftBlockRef.current.offsetWidth; // add the blocked off area width // Add the width of preceding dummy ranges