From 3796ed718057b2db6bd8ff4494d91216e0f20626 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Tue, 1 Jul 2025 19:08:43 +0300
Subject: [PATCH] fix time hover

---
 package.json                                 |  2 +-
 src/components/VideoPlayer/VideoControls.tsx | 51 +++++++++++---------
 src/components/VideoPlayer/VideoPlayer.tsx   | 11 +++--
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index efdbc9d..9e2690e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qapp-core",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "Qortal's core React library with global state, UI components, and utilities",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/src/components/VideoPlayer/VideoControls.tsx b/src/components/VideoPlayer/VideoControls.tsx
index a69ddf9..c79343f 100644
--- a/src/components/VideoPlayer/VideoControls.tsx
+++ b/src/components/VideoPlayer/VideoControls.tsx
@@ -116,20 +116,25 @@ export const ProgressSlider = ({
   const debounceTimeoutRef = useRef<any>(null);
   const previousBlobUrlRef = useRef<string | null>(null);
 
-  const handleMouseMove = (e: React.MouseEvent) => {
-    const slider = sliderRef.current;
-    if (!slider) return;
+const handleMouseMove = (e: React.MouseEvent) => {
+  const slider = sliderRef.current;
+  if (!slider) return;
 
-    const rect = slider.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const percent = x / rect.width;
-    const time = Math.min(Math.max(0, percent * duration), duration);
-    setHoverX(e.clientX);
+  const rect = slider.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const percent = x / rect.width;
+  const time = Math.min(Math.max(0, percent * duration), duration);
 
-    setShowDuration(time);
-    if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
-  };
+  // Position anchor element at the correct spot
+  if (hoverAnchorRef.current) {
+    hoverAnchorRef.current.style.left = `${x}px`;
+  }
 
+  setHoverX(e.clientX); // optional – can be removed unless used elsewhere
+  setShowDuration(time);
+
+  if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+};
   const handleMouseLeave = () => {
     lastRequestedTimeRef.current = null;
     setThumbnailUrl(null);
@@ -167,17 +172,17 @@ export const ProgressSlider = ({
         padding: isVideoPlayerSmall ? "0px" : "0px 10px",
       }}
     >
-      <Box
-        ref={hoverAnchorRef}
-        sx={{
-          position: "absolute",
-          left: hoverX ?? -9999,
-          top: 0,
-          width: "1px",
-          height: "1px",
-          pointerEvents: "none",
-        }}
-      />
+     <Box
+  ref={hoverAnchorRef}
+  sx={{
+    position: "absolute",
+    top: 0,
+    width: "1px",
+    height: "1px",
+    pointerEvents: "none",
+    transform: "translateX(-50%)", // center popper on the anchor
+  }}
+/>
       <Slider
         ref={sliderRef}
         onMouseMove={handleMouseMove}
@@ -223,7 +228,7 @@ export const ProgressSlider = ({
           anchorEl={hoverAnchorRef.current}
           placement="top"
           disablePortal
-          modifiers={[{ name: "offset", options: { offset: [-10, 0] } }]}
+          modifiers={[{ name: "offset", options: { offset: [10, 0] } }]}
         >
           <Box
             sx={{
diff --git a/src/components/VideoPlayer/VideoPlayer.tsx b/src/components/VideoPlayer/VideoPlayer.tsx
index edaa484..11e39c3 100644
--- a/src/components/VideoPlayer/VideoPlayer.tsx
+++ b/src/components/VideoPlayer/VideoPlayer.tsx
@@ -319,7 +319,7 @@ export const VideoPlayer = ({
   useVideoPlayerHotKeys(hotkeyHandlers);
 
   const updateProgress = useCallback(() => {
-    if(!isPlaying) return
+    if(!isPlaying || !isPlayerInitialized) return
     const player = playerRef?.current;
     if (!player || typeof player?.currentTime !== "function") return;
 
@@ -328,7 +328,7 @@ export const VideoPlayer = ({
       setProgress(videoLocation, currentTime);
       setLocalProgress(currentTime);
     }
-  }, [videoLocation, isPlaying]);
+  }, [videoLocation, isPlaying, isPlayerInitialized]);
 
   useEffect(() => {
     if (videoLocation) {
@@ -616,8 +616,11 @@ export const VideoPlayer = ({
             playerRef.current?.poster("");
             playerRef.current?.playbackRate(playbackRate);
             playerRef.current?.volume(volume);
-            if (videoLocationRef.current) {
-              const savedProgress = getProgress(videoLocationRef.current);
+            const key = `${resource.service}-${resource.name}-${resource.identifier}`
+            console.log('key', key)
+            if (key) {
+              const savedProgress = getProgress(key);
+              console.log('savedProgress', savedProgress)
               if (typeof savedProgress === "number") {
                 playerRef.current?.currentTime(savedProgress);
               }