Add observer to detect of row overflows

web/src/hooks/resize-observer.ts

@@ -45,3 +45,34 @@ export function useResizeObserver(...refs: RefType[]) {
 
   return dimensions;
 }
+
+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],
+  );
+
+  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,6 +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 { useOverflowObserver } from "@/hooks/resize-observer";
 
 const SEGMENT_DURATION = 30;
 
@@ -77,6 +78,7 @@ export function RecordingView({
   const [mainCamera, setMainCamera] = useState(startCamera);
   const mainControllerRef = useRef<DynamicVideoController | null>(null);
   const mainLayoutRef = useRef<HTMLDivElement | null>(null);
+  const previewRowRef = useRef<HTMLDivElement | null>(null);
   const previewRefs = useRef<{ [camera: string]: PreviewController }>({});
 
   const [playbackStart, setPlaybackStart] = useState(startTime);
@@ -240,6 +242,8 @@ export function RecordingView({
 
   // layout
 
+  const previewRowOverflows = useOverflowObserver(previewRowRef);
+
   const getCameraAspect = useCallback(
     (cam: string) => {
       if (!config) {
@@ -450,7 +454,8 @@ export function RecordingView({
             </div>
             {isDesktop && (
               <div
-                className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[12%] flex-col justify-center overflow-y-auto" : "w-full h-28 overflow-x-auto"} `}
+                ref={previewRowRef}
+                className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[12%] flex-col justify-center overflow-y-auto" : `w-full h-28 overflow-x-auto ${previewRowOverflows ? "" : "justify-center items-center"}`}`}
               >
                 <div className="w-2" />
                 {allCameras.map((cam) => {