Merge pull request #1107 from robintown/new-grid-breakpoint

Switch to the new grid once there are >12 participants

public/locales/en-GB/app.json

@@ -102,7 +102,6 @@
   "Turn off camera": "Turn off camera",
   "Turn on camera": "Turn on camera",
   "Unmute microphone": "Unmute microphone",
-  "Use the upcoming grid system": "Use the upcoming grid system",
   "User menu": "User menu",
   "Username": "Username",
   "Version: {{version}}": "Version: {{version}}",

src/room/InCallView.tsx

@@ -56,7 +56,7 @@ import {
   TileDescriptor,
 } from "../video-grid/VideoGrid";
 import { Avatar } from "../Avatar";
-import { useNewGrid, useShowInspector } from "../settings/useSetting";
+import { useShowInspector } from "../settings/useSetting";
 import { useModalTriggerState } from "../Modal";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useUrlParams } from "../UrlParams";
@@ -277,8 +277,8 @@ export function InCallView({
     []
   );
 
-  const [newGrid] = useNewGrid();
+  const Grid =
-  const Grid = newGrid ? NewVideoGrid : VideoGrid;
+    items.length > 12 && layout === "freedom" ? NewVideoGrid : VideoGrid;
   const prefersReducedMotion = usePrefersReducedMotion();
 
   const renderContent = (): JSX.Element => {

src/settings/SettingsModal.tsx

@@ -33,7 +33,6 @@ import { MediaDevicesState } from "./mediaDevices";
 import {
   useShowInspector,
   useOptInAnalytics,
-  useNewGrid,
   useDeveloperSettingsTab,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
@@ -60,7 +59,6 @@ export const SettingsModal = (props: Props) => {
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [developerSettingsTab, setDeveloperSettingsTab] =
     useDeveloperSettingsTab();
-  const [newGrid, setNewGrid] = useNewGrid();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -235,17 +233,6 @@ export const SettingsModal = (props: Props) => {
                 }
               />
             </FieldRow>
-            <FieldRow>
-              <InputField
-                id="newGrid"
-                label={t("Use the upcoming grid system")}
-                type="checkbox"
-                checked={newGrid}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setNewGrid(e.target.checked)
-                }
-              />
-            </FieldRow>
             <FieldRow>
               <Button onPress={downloadDebugLog}>
                 {t("Download debug logs")}

src/settings/useSetting.ts

@@ -98,7 +98,5 @@ export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
   return [false, null];
 };
 
-export const useNewGrid = () => useSetting("new-grid", false);
-
 export const useDeveloperSettingsTab = () =>
   useSetting("developer-settings-tab", false);