Simplify listener

web/src/hooks/resize-observer.ts

@@ -59,37 +59,3 @@ export function useResizeObserver(...refs: RefType[]) {
     return items;
   }
 }
-
-export function useOverflowObserver(ref: MutableRefObject<HTMLElement | null>) {
-  const [overflow, setOverflow] = useState<boolean>(false);
-  const resizeObserver = useMemo(
-    () =>
-      new ResizeObserver(() => {
-        window.requestAnimationFrame(() => {
-          if (ref.current) {
-            setOverflow(
-              ref.current.scrollWidth > ref.current.clientWidth ||
-                ref.current.scrollHeight > ref.current.clientHeight,
-            );
-          }
-        });
-      }),
-    [ref],
-  );
-
-  useEffect(() => {
-    const elem = ref.current;
-
-    if (elem) {
-      resizeObserver.observe(elem);
-    }
-
-    return () => {
-      if (elem) {
-        resizeObserver.unobserve(elem);
-      }
-    };
-  }, [ref, resizeObserver]);
-
-  return overflow;
-}

web/src/views/events/RecordingView.tsx

@@ -43,10 +43,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { FaVideo } from "react-icons/fa";
 import { VideoResolutionType } from "@/types/live";
 import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
-import {
+import { useResizeObserver } from "@/hooks/resize-observer";
-  useOverflowObserver,
-  useResizeObserver,
-} from "@/hooks/resize-observer";
 import { cn } from "@/lib/utils";
 
 const SEGMENT_DURATION = 30;
@@ -247,8 +244,6 @@ export function RecordingView({
 
   // layout
 
-  const previewRowOverflows = useOverflowObserver(previewRowRef);
-
   const getCameraAspect = useCallback(
     (cam: string) => {
       if (!config) {
@@ -330,6 +325,17 @@ export function RecordingView({
     };
   }, [config, mainCameraAspect, mainWidth, mainHeight, mainCamera]);
 
+  const previewRowOverflows = useMemo(() => {
+    if (!previewRowRef.current) {
+      return false;
+    }
+
+    return (
+      previewRowRef.current.scrollWidth > previewRowRef.current.clientWidth ||
+      previewRowRef.current.scrollHeight > previewRowRef.current.clientHeight
+    );
+  }, [previewRowRef.current?.scrollWidth, previewRowRef.current?.scrollHeight]);
+
   return (
     <div ref={contentRef} className="size-full pt-2 flex flex-col">
       <Toaster closeButton={true} />