fix pause bugs and stuff

src/components/player/base/Container.tsx

@@ -64,9 +64,7 @@ function BaseContainer(props: { children?: ReactNode }) {
   return (
     <div ref={containerEl}>
       <OverlayDisplay>
-        <div className="relative overflow-hidden h-screen select-none">
-          {props.children}
-        </div>
+        <div className="h-screen select-none">{props.children}</div>
       </OverlayDisplay>
     </div>
   );
@@ -80,11 +78,13 @@ export function Container(props: PlayerProps) {
 
   return (
     <div className="relative">
-      <VideoContainer />
       <BaseContainer>
-        <VideoClickTarget />
-        <HeadUpdater />
-        {props.children}
+        <VideoContainer />
+        <div className="relative h-screen overflow-hidden">
+          <VideoClickTarget />
+          <HeadUpdater />
+          {props.children}
+        </div>
       </BaseContainer>
     </div>
   );

src/components/player/hooks/useShouldShowControls.tsx

@@ -1,7 +1,7 @@
 import { PlayerHoverState } from "@/stores/player/slices/interface";
 import { usePlayerStore } from "@/stores/player/store";
 
-export function useShouldShowControls(opts?: { touchOnly: boolean }) {
+export function useShouldShowControls() {
   const hovering = usePlayerStore((s) => s.interface.hovering);
   const lastHoveringState = usePlayerStore(
     (s) => s.interface.lastHoveringState
@@ -9,12 +9,18 @@ export function useShouldShowControls(opts?: { touchOnly: boolean }) {
   const isPaused = usePlayerStore((s) => s.mediaPlaying.isPaused);
   const hasOpenOverlay = usePlayerStore((s) => s.interface.hasOpenOverlay);
 
-  const showTouchControls =
-    lastHoveringState === PlayerHoverState.MOBILE_TAPPED;
-  const notNotHovering = hovering !== PlayerHoverState.NOT_HOVERING;
+  const isUsingTouch = lastHoveringState === PlayerHoverState.MOBILE_TAPPED;
+  const isHovering = hovering !== PlayerHoverState.NOT_HOVERING;
 
-  if (opts?.touchOnly)
-    return (showTouchControls && notNotHovering) || isPaused || hasOpenOverlay;
+  // when using touch, pause screens can be dismissed by tapping
+  const showTargetsWithoutPause = isHovering || hasOpenOverlay;
+  const showTargetsIncludingPause = showTargetsWithoutPause || isPaused;
+  const showTargets = isUsingTouch
+    ? showTargetsWithoutPause
+    : showTargetsIncludingPause;
 
-  return notNotHovering || isPaused || hasOpenOverlay;
+  return {
+    showTouchTargets: isUsingTouch && showTargets,
+    showTargets,
+  };
 }

src/components/player/internals/VideoClickTarget.tsx

@@ -19,18 +19,20 @@ export function VideoClickTarget() {
 
   const togglePause = useCallback(
     (e: PointerEvent<HTMLDivElement>) => {
-      // pause on mouse click
-      if (e.pointerType === "mouse") {
-        if (e.button !== 0) return;
-        if (isPaused) display?.play();
-        else display?.pause();
-        return;
-      }
+      setTimeout(() => {
+        // pause on mouse click
+        if (e.pointerType === "mouse") {
+          if (e.button !== 0) return;
+          if (isPaused) display?.play();
+          else display?.pause();
+          return;
+        }
 
-      // toggle on other types of clicks
-      if (hovering !== PlayerHoverState.MOBILE_TAPPED)
-        updateInterfaceHovering(PlayerHoverState.MOBILE_TAPPED);
-      else updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
+        // toggle on other types of clicks
+        if (hovering !== PlayerHoverState.MOBILE_TAPPED)
+          updateInterfaceHovering(PlayerHoverState.MOBILE_TAPPED);
+        else updateInterfaceHovering(PlayerHoverState.NOT_HOVERING);
+      }, 10); // TODO this is dirty workaround, without this, tapping on something where a button will be will trigger it immediately
     },
     [display, isPaused, hovering, updateInterfaceHovering]
   );

src/pages/PlayerView.tsx

@@ -7,20 +7,15 @@ import { AutoPlayStart } from "@/components/player/atoms";
 import { usePlayer } from "@/components/player/hooks/usePlayer";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
 import { ScrapingPart } from "@/pages/parts/player/ScrapingPart";
-import { PlayerHoverState } from "@/stores/player/slices/interface";
 import {
   PlayerMeta,
   metaToScrapeMedia,
   playerStatus,
 } from "@/stores/player/slices/source";
-import { usePlayerStore } from "@/stores/player/store";
 
 export function PlayerView() {
   const { status, setScrapeStatus, playMedia, setMeta } = usePlayer();
-  const { lastHoveringState } = usePlayerStore((s) => s.interface);
-
-  const desktopControlsVisible = useShouldShowControls();
-  const touchControlsVisible = useShouldShowControls({ touchOnly: true });
+  const { showTargets, showTouchTargets } = useShouldShowControls();
 
   const meta = useMemo<PlayerMeta>(
     () => ({
@@ -70,7 +65,7 @@ export function PlayerView() {
         />
       ) : null}
 
-      <Player.BlackOverlay show={desktopControlsVisible} />
+      <Player.BlackOverlay show={showTargets} />
 
       <Player.CenterControls>
         <Player.LoadingSpinner />
@@ -79,14 +74,14 @@ export function PlayerView() {
 
       <Player.CenterMobileControls
         className="text-white"
-        show={touchControlsVisible}
+        show={showTouchTargets}
       >
         <Player.SkipBackward iconSizeClass="text-3xl" />
         <Player.Pause iconSizeClass="text-5xl" />
         <Player.SkipForward iconSizeClass="text-3xl" />
       </Player.CenterMobileControls>
 
-      <Player.TopControls show={desktopControlsVisible}>
+      <Player.TopControls show={showTargets}>
         <div className="grid grid-cols-[1fr,auto] xl:grid-cols-3 items-center">
           <div className="flex space-x-3 items-center">
             <Player.BackLink />
@@ -103,7 +98,7 @@ export function PlayerView() {
         </div>
       </Player.TopControls>
 
-      <Player.BottomControls show={desktopControlsVisible}>
+      <Player.BottomControls show={showTargets}>
         <Player.ProgressBar />
         <div className="flex justify-between">
           <Player.LeftSideControls className="hidden lg:flex">