From 0105c4f6b2935139a6fe93a2b077165a31628f4b Mon Sep 17 00:00:00 2001
From: Jelle van Snik <jellevs@gmail.com>
Date: Tue, 7 Feb 2023 23:20:00 +0100
Subject: [PATCH] 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>
---
 .../components/actions/BackdropAction.tsx     |  1 +
 .../components/actions/ProgressAction.tsx     |  8 +++--
 .../popouts/PopoutProviderAction.tsx          | 34 +++++++++++--------
 src/video/state/init.ts                       |  1 +
 .../state/providers/videoStateProvider.ts     |  3 +-
 5 files changed, 29 insertions(+), 18 deletions(-)

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<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
-      ? `${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() {
       <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,
-            bottom: distanceFromBottom,
+            right: `${distanceFromRight}px`,
+            bottom: `${distanceFromBottom}px`,
           }}
         >
           <ShowPopout popoutId={videoInterface.popout} />
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) {