fix popout math and fix seeking not seeking

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
Co-authored-by: William Oldham <wegg7250@gmail.com>

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);

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)

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<HTMLDivElement>(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
+    if (!videoInterface.popoutBounds) return 30;
-      ? `${Math.max(
+
-          window.innerWidth -
+    const buttonCenter =
-            videoInterface.popoutBounds.right -
+      videoInterface.popoutBounds.left + videoInterface.popoutBounds.width / 2;
-            videoInterface.popoutBounds.width / 2,
+
-          30
+    return Math.max(
-        )}px`
+      window.innerWidth -
-      : "30px";
+        buttonCenter -
+        (ref.current?.getBoundingClientRect().width ?? 0) / 2,
+      30
+    );
   }, [videoInterface.popoutBounds]);
+
   const distanceFromBottom = useMemo(() => {
     return videoInterface.popoutBounds
-      ? `${videoInterface.popoutBounds.height + 30}px`
+      ? videoInterface.popoutBounds.height + 30
-      : "30px";
+      : 30;
   }, [videoInterface.popoutBounds]);
 
   return (
@@ -56,10 +61,11 @@ export function PopoutProviderAction() {
       <div className="popout-wrapper pointer-events-auto absolute inset-0">
         <div onClick={handleClick} className="absolute inset-0" />
         <div
+          ref={ref}
           className="absolute z-10 grid h-[500px] w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200"
           style={{
-            right: distanceFromRight,
+            right: `${distanceFromRight}px`,
-            bottom: distanceFromBottom,
+            bottom: `${distanceFromBottom}px`,
           }}
         >
           <ShowPopout popoutId={videoInterface.popout} />

src/video/state/init.ts

@@ -25,6 +25,7 @@ function initPlayer(): VideoPlayerState {
       time: 0,
       duration: 0,
       buffered: 0,
+      draggingTime: 0,
     },
 
     meta: null,

src/video/state/providers/videoStateProvider.ts

@@ -99,8 +99,7 @@ export function createVideoStateProvider(
     },
     setSeeking(active) {
       state.mediaPlaying.isSeeking = active;
-      updateInterface(descriptor, state);
+      updateMediaPlaying(descriptor, state);
-      // TODO is seeking is bugged when buffering (recursive seeking as well)
 
       // if it was playing when starting to seek, play again
       if (!active) {