Qortal/qapp-core
1
0
Fork 0
mirror of https://github.com/Qortal/qapp-core.git synced 2025-07-15 05:21:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix time hover

Browse Source
This commit is contained in:
PhilReact 2025-07-01 19:08:43 +03:00
parent 9e6c1b2bb5
commit 3796ed7180
3 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "qapp-core", "name": "qapp-core",
"version": "1.0.39", "version": "1.0.41",
"description": "Qortal's core React library with global state, UI components, and utilities", "description": "Qortal's core React library with global state, UI components, and utilities",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/index.mjs", "module": "dist/index.mjs",

51
src/components/VideoPlayer/VideoControls.tsx
View File

@ -116,20 +116,25 @@ export const ProgressSlider = ({
const debounceTimeoutRef = useRef<any>(null); const debounceTimeoutRef = useRef<any>(null);
const previousBlobUrlRef = useRef<string | null>(null); const previousBlobUrlRef = useRef<string | null>(null);
const handleMouseMove = (e: React.MouseEvent) => { const handleMouseMove = (e: React.MouseEvent) => {
const slider = sliderRef.current; const slider = sliderRef.current;
if (!slider) return; if (!slider) return;
const rect = slider.getBoundingClientRect(); const rect = slider.getBoundingClientRect();
const x = e.clientX - rect.left; const x = e.clientX - rect.left;
const percent = x / rect.width; const percent = x / rect.width;
const time = Math.min(Math.max(0, percent * duration), duration); const time = Math.min(Math.max(0, percent * duration), duration);
setHoverX(e.clientX);
setShowDuration(time); // Position anchor element at the correct spot
if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current); 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 = () => { const handleMouseLeave = () => {
lastRequestedTimeRef.current = null; lastRequestedTimeRef.current = null;
setThumbnailUrl(null); setThumbnailUrl(null);
@ -167,17 +172,17 @@ export const ProgressSlider = ({
padding: isVideoPlayerSmall ? "0px" : "0px 10px", padding: isVideoPlayerSmall ? "0px" : "0px 10px",
}} }}
> >
<Box <Box
ref={hoverAnchorRef} ref={hoverAnchorRef}
sx={{ sx={{
position: "absolute", position: "absolute",
left: hoverX ?? -9999, top: 0,
top: 0, width: "1px",
width: "1px", height: "1px",
height: "1px", pointerEvents: "none",
pointerEvents: "none", transform: "translateX(-50%)", // center popper on the anchor
}} }}
/> />
<Slider <Slider
ref={sliderRef} ref={sliderRef}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
@ -223,7 +228,7 @@ export const ProgressSlider = ({
anchorEl={hoverAnchorRef.current} anchorEl={hoverAnchorRef.current}
placement="top" placement="top"
disablePortal disablePortal
modifiers={[{ name: "offset", options: { offset: [-10, 0] } }]} modifiers={[{ name: "offset", options: { offset: [10, 0] } }]}
> >
<Box <Box
sx={{ sx={{

11
src/components/VideoPlayer/VideoPlayer.tsx
View File

@ -319,7 +319,7 @@ export const VideoPlayer = ({
useVideoPlayerHotKeys(hotkeyHandlers); useVideoPlayerHotKeys(hotkeyHandlers);
const updateProgress = useCallback(() => { const updateProgress = useCallback(() => {
if(!isPlaying) return if(!isPlaying || !isPlayerInitialized) return
const player = playerRef?.current; const player = playerRef?.current;
if (!player || typeof player?.currentTime !== "function") return; if (!player || typeof player?.currentTime !== "function") return;
@ -328,7 +328,7 @@ export const VideoPlayer = ({
setProgress(videoLocation, currentTime); setProgress(videoLocation, currentTime);
setLocalProgress(currentTime); setLocalProgress(currentTime);
} }
}, [videoLocation, isPlaying]); }, [videoLocation, isPlaying, isPlayerInitialized]);
useEffect(() => { useEffect(() => {
if (videoLocation) { if (videoLocation) {
@ -616,8 +616,11 @@ export const VideoPlayer = ({
playerRef.current?.poster(""); playerRef.current?.poster("");
playerRef.current?.playbackRate(playbackRate); playerRef.current?.playbackRate(playbackRate);
playerRef.current?.volume(volume); 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") { if (typeof savedProgress === "number") {
playerRef.current?.currentTime(savedProgress); playerRef.current?.currentTime(savedProgress);
} }