Fix problem with popover opening

Author: AFCMS

src/components/Settings/SettingsPopover.tsx

@@ -1,36 +1,26 @@
-import { useState, useEffect, useRef } from "react";
+import { useState } from "react";
 import { useLingui } from "@lingui/react/macro";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { HiCog6Tooth } from "react-icons/hi2";
 
+import { SettingsPopoverStateProvider } from "./SettingsPopoverStateProvider";
 import { SettingsSpeedTab } from "./SettingsSpeedTab";
 import { SettingsRootTab } from "./SettingsRootTab";
 import { useVideoActions, useVideoState } from "../../hooks";
-import { useSetAtom } from "jotai";
-import { settingsPopoverOpenAtom } from "../../store/video";
 
 export function SettingsPopover() {
   const { t } = useLingui();
   const [settingsTab, setSettingsTab] = useState<"root" | "speed">("root");
-  const popoverOpenRef = useRef(false);
-  const setSettingsPopoverOpen = useSetAtom(settingsPopoverOpenAtom);
 
   const videoActions = useVideoActions();
   const videoState = useVideoState();
 
-  // Update the global popover state when ref changes
-  useEffect(() => {
-    setSettingsPopoverOpen(popoverOpenRef.current);
-  });
-
   return (
     <Popover>
       {({ open }) => {
-        // Update ref when popover state changes
-        popoverOpenRef.current = open;
-
         return (
           <>
+            <SettingsPopoverStateProvider open={open} />
             <PopoverButton
               onClick={() => {
                 setSettingsTab("root");

src/components/Settings/SettingsPopoverStateProvider.tsx

@@ -0,0 +1,19 @@
+import { useSetAtom } from "jotai";
+import { settingsPopoverOpenAtom } from "../../store/video";
+import { useEffect } from "react";
+
+interface SettingsPopoverStateProviderProps {
+  readonly open: boolean;
+}
+
+export function SettingsPopoverStateProvider(
+  props: SettingsPopoverStateProviderProps,
+) {
+  const setSettingsPopoverOpen = useSetAtom(settingsPopoverOpenAtom);
+
+  useEffect(() => {
+    setSettingsPopoverOpen(props.open);
+  }, [props.open, setSettingsPopoverOpen]);
+
+  return null;
+}

src/components/VideoPlayer.tsx

@@ -32,6 +32,20 @@ export default function VideoPlayerApp() {
     height: 0,
   });
   const settingsPopoverOpen = useAtomValue(settingsPopoverOpenAtom);
+  const justClosedPopoverRef = useRef(false);
+
+  // Detect when popover closes and set flag to prevent immediate actions
+  useEffect(() => {
+    if (!settingsPopoverOpen) {
+      justClosedPopoverRef.current = true;
+      const timer = setTimeout(() => {
+        justClosedPopoverRef.current = false;
+      }, 100);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [settingsPopoverOpen]);
 
   // Get video context data
   const videoActions = useVideoActions();
@@ -115,7 +129,7 @@ export default function VideoPlayerApp() {
   };
 
   const openFileDialog = () => {
-    if (!settingsPopoverOpen) {
+    if (!settingsPopoverOpen && !justClosedPopoverRef.current) {
       fileInputRef.current?.click();
     }
   };
@@ -357,7 +371,11 @@ export default function VideoPlayerApp() {
           ref={videoRef}
           src={videoUrl}
           className="h-full w-full object-contain"
-          onClick={videoActions.togglePlayPause}
+          onClick={() => {
+            if (!settingsPopoverOpen && !justClosedPopoverRef.current) {
+              videoActions.togglePlayPause();
+            }
+          }}
         />
       ) : (
         <div className="flex h-full w-full flex-col items-center justify-center text-white">
@@ -375,6 +393,7 @@ export default function VideoPlayerApp() {
               <p className="text-xl text-gray-300">
                 {t`Drop a video file anywhere or click here to open one`}
               </p>
+              <p>{settingsPopoverOpen ? "Settings Open" : "Settings Closed"}</p>
             </div>
           </div>
         </div>

src/store/video.ts

@@ -140,10 +140,8 @@ export const videoFileSetAtom = atom(null, (_get, set, file: File) => {
 
 export const togglePlayPauseAtom = atom(null, (get) => {
   const element = get(videoElementAtom);
-  const isSettingsPopoverOpen = get(settingsPopoverOpenAtom);
 
-  if (!element || isSettingsPopoverOpen) {
-    // No element registered or settings popover is open; nothing to toggle
+  if (!element) {
     return;
   }