From e36c21853f5f44280d494f748c1a15f219c8c6f5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 10 May 2024 08:55:32 -0500
Subject: [PATCH] lock aspect ratio

---
 web/src/views/live/DraggableGridLayout.tsx | 26 +++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index fd1b0907b..4996ae426 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -12,7 +12,12 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Layout, Responsive, WidthProvider } from "react-grid-layout";
+import {
+  ItemCallback,
+  Layout,
+  Responsive,
+  WidthProvider,
+} from "react-grid-layout";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
 import { LivePlayerMode } from "@/types/live";
@@ -298,6 +303,24 @@ export default function DraggableGridLayout({
     );
   }, [containerWidth, marginValue]);
 
+  const handleResize: ItemCallback = (
+    _: Layout[],
+    oldLayoutItem: Layout,
+    layoutItem: Layout,
+    placeholder: Layout,
+  ) => {
+    const heightDiff = layoutItem.h - oldLayoutItem.h;
+    const widthDiff = layoutItem.w - oldLayoutItem.w;
+    const changeCoef = oldLayoutItem.w / oldLayoutItem.h;
+    if (Math.abs(heightDiff) < Math.abs(widthDiff)) {
+      layoutItem.h = layoutItem.w / changeCoef;
+      placeholder.h = layoutItem.w / changeCoef;
+    } else {
+      layoutItem.w = layoutItem.h * changeCoef;
+      placeholder.w = layoutItem.h * changeCoef;
+    }
+  };
+
   return (
     <>
       <Toaster position="top-center" closeButton={true} />
@@ -342,6 +365,7 @@ export default function DraggableGridLayout({
             containerPadding={[0, isEditMode ? 6 : 3]}
             resizeHandles={isEditMode ? ["sw", "nw", "se", "ne"] : []}
             onDragStop={handleLayoutChange}
+            onResize={handleResize}
             onResizeStop={handleLayoutChange}
           >
             {includeBirdseye && birdseyeConfig?.enabled && (