diff --git a/src/video/components/actions/BackdropAction.tsx b/src/video/components/actions/BackdropAction.tsx index c76fa456..0ef94bb8 100644 --- a/src/video/components/actions/BackdropAction.tsx +++ b/src/video/components/actions/BackdropAction.tsx @@ -9,6 +9,7 @@ interface BackdropActionProps { onBackdropChange?: (showing: boolean) => void; } +// TODO tap on mobile should remove backdrop instead of pausing export function BackdropAction(props: BackdropActionProps) { const descriptor = useVideoPlayerDescriptor(); const controls = useControls(descriptor); diff --git a/src/video/components/actions/ProgressAction.tsx b/src/video/components/actions/ProgressAction.tsx index 376235ba..ee08c5da 100644 --- a/src/video/components/actions/ProgressAction.tsx +++ b/src/video/components/actions/ProgressAction.tsx @@ -3,6 +3,7 @@ import { makePercentageString, useProgressBar, } from "@/hooks/useProgressBar"; +import { getPlayerState } from "@/video/state/cache"; import { useVideoPlayerDescriptor } from "@/video/state/hooks"; import { useControls } from "@/video/state/logic/controls"; import { useProgress } from "@/video/state/logic/progress"; @@ -34,9 +35,12 @@ export function ProgressAction() { useEffect(() => { if (dragging) { - controls.setDraggingTime(videoTime.duration * (dragPercentage / 100)); + const state = getPlayerState(descriptor); + controls.setDraggingTime( + state.progress.duration * (dragPercentage / 100) + ); } - }, [videoTime, dragging, dragPercentage, controls]); + }, [descriptor, dragging, dragPercentage, controls]); let watchProgress = makePercentageString( makePercentage((videoTime.time / videoTime.duration) * 100) diff --git a/src/video/components/popouts/PopoutProviderAction.tsx b/src/video/components/popouts/PopoutProviderAction.tsx index df71beb4..76384732 100644 --- a/src/video/components/popouts/PopoutProviderAction.tsx +++ b/src/video/components/popouts/PopoutProviderAction.tsx @@ -4,7 +4,7 @@ import { EpisodeSelectionPopout } from "@/video/components/popouts/EpisodeSelect import { useVideoPlayerDescriptor } from "@/video/state/hooks"; import { useControls } from "@/video/state/logic/controls"; import { useInterface } from "@/video/state/logic/interface"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import "./Popouts.css"; @@ -20,8 +20,9 @@ function ShowPopout(props: { popoutId: string | null }) { return null; } -// TODO improve anti offscreen math +// TODO bug: first load ref is null export function PopoutProviderAction() { + const ref = useRef(null); const descriptor = useVideoPlayerDescriptor(); const videoInterface = useInterface(descriptor); const controls = useControls(descriptor); @@ -32,19 +33,23 @@ export function PopoutProviderAction() { }, [controls]); const distanceFromRight = useMemo(() => { - return videoInterface.popoutBounds - ? `${Math.max( - window.innerWidth - - videoInterface.popoutBounds.right - - videoInterface.popoutBounds.width / 2, - 30 - )}px` - : "30px"; + if (!videoInterface.popoutBounds) return 30; + + const buttonCenter = + videoInterface.popoutBounds.left + videoInterface.popoutBounds.width / 2; + + return Math.max( + window.innerWidth - + buttonCenter - + (ref.current?.getBoundingClientRect().width ?? 0) / 2, + 30 + ); }, [videoInterface.popoutBounds]); + const distanceFromBottom = useMemo(() => { return videoInterface.popoutBounds - ? `${videoInterface.popoutBounds.height + 30}px` - : "30px"; + ? videoInterface.popoutBounds.height + 30 + : 30; }, [videoInterface.popoutBounds]); return ( @@ -56,10 +61,11 @@ export function PopoutProviderAction() {
diff --git a/src/video/state/init.ts b/src/video/state/init.ts index 3472d8c5..2d040774 100644 --- a/src/video/state/init.ts +++ b/src/video/state/init.ts @@ -25,6 +25,7 @@ function initPlayer(): VideoPlayerState { time: 0, duration: 0, buffered: 0, + draggingTime: 0, }, meta: null, diff --git a/src/video/state/providers/videoStateProvider.ts b/src/video/state/providers/videoStateProvider.ts index 94564927..1562945c 100644 --- a/src/video/state/providers/videoStateProvider.ts +++ b/src/video/state/providers/videoStateProvider.ts @@ -99,8 +99,7 @@ export function createVideoStateProvider( }, setSeeking(active) { state.mediaPlaying.isSeeking = active; - updateInterface(descriptor, state); - // TODO is seeking is bugged when buffering (recursive seeking as well) + updateMediaPlaying(descriptor, state); // if it was playing when starting to seek, play again if (!active) {