Don't fullscreen the video when double-clicking components

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "prepare": "husky install",
-    "dev": "NODE_ENV=development webpack serve --config src/webpack.config.ts",
+    "dev": "cross-env NODE_ENV=development webpack serve --config src/webpack.config.ts",
     "build": "webpack --config src/webpack.config.ts",
     "lint:eslint": "eslint src --ext .ts,.tsx",
     "lint:prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,scss}\"",
@@ -38,6 +38,7 @@
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.47.0",

src/pages/overlay/components/overlay/Overlay.tsx

@@ -164,6 +164,35 @@ export default function Overlay() {
     return () => document.body.removeEventListener("click", bodyClick, true);
   }, [bodyClick]);
 
+  // Handle body double clicks, ignoring them inside of overlay elements
+  const bodyDblClick = useCallback((e: MouseEvent) => {
+    // Get all the elements under the mouse
+    const elements = document.elementsFromPoint(e.clientX, e.clientY);
+
+    // For each element, if it has a background then we want to ignore the click
+    // If we reach the body, then break out of the loop and propagate the event
+    for (const element of elements) {
+      if (element === document.body) break;
+
+      const style = getComputedStyle(element);
+      if (
+        style.backgroundImage !== "none" ||
+        style.backgroundColor !== "rgba(0, 0, 0, 0)"
+      ) {
+        e.stopPropagation();
+        return;
+      }
+    }
+  }, []);
+
+  // If the user double clicks anywhere in the overlay itself, stop propagating the event
+  // This stops double clicks from toggling fullscreen video which is the default behavior
+  useEffect(() => {
+    document.body.addEventListener("dblclick", bodyDblClick, true);
+    return () =>
+      document.body.removeEventListener("dblclick", bodyDblClick, true);
+  }, [bodyDblClick]);
+
   // Generate the context for the overlay options
   const context = useMemo<OverlayOptionProps["context"]>(
     () => ({