fix time hover

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",

src/components/VideoPlayer/VideoControls.tsx

@@ -116,7 +116,7 @@ export const ProgressSlider = ({
   const debounceTimeoutRef = useRef<any>(null);
   const previousBlobUrlRef = useRef<string | null>(null);
 
-  const handleMouseMove = (e: React.MouseEvent) => {
+const handleMouseMove = (e: React.MouseEvent) => {
   const slider = sliderRef.current;
   if (!slider) return;
 
@@ -124,12 +124,17 @@ export const ProgressSlider = ({
   const x = e.clientX - rect.left;
   const percent = x / rect.width;
   const time = Math.min(Math.max(0, percent * duration), duration);
-    setHoverX(e.clientX);
 
+  // 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);
-  };
 
+  if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+};
   const handleMouseLeave = () => {
     lastRequestedTimeRef.current = null;
     setThumbnailUrl(null);
@@ -171,13 +176,13 @@ export const ProgressSlider = ({
   ref={hoverAnchorRef}
   sx={{
     position: "absolute",
-          left: hoverX ?? -9999,
     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={{

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 key = `${resource.service}-${resource.name}-${resource.identifier}`
-              const savedProgress = getProgress(videoLocationRef.current);
+            console.log('key', key)
+            if (key) {
+              const savedProgress = getProgress(key);
+              console.log('savedProgress', savedProgress)
               if (typeof savedProgress === "number") {
                 playerRef.current?.currentTime(savedProgress);
               }