From f3cee359c0ffabd63de31b71acd84b3f186a8fee Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 2 Feb 2022 18:32:23 -0800
Subject: [PATCH] Update VideoGrid story

---
 src/video-grid/VideoGrid.stories.jsx | 57 +++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/video-grid/VideoGrid.stories.jsx b/src/video-grid/VideoGrid.stories.jsx
index f716eba..060e3f4 100644
--- a/src/video-grid/VideoGrid.stories.jsx
+++ b/src/video-grid/VideoGrid.stories.jsx
@@ -1,23 +1,23 @@
 import React, { useState } from "react";
-import VideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
+import VideoGrid, {
+  useVideoGridLayout,
+} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
 import VideoTile from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTile";
 import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
 import { useMemo } from "react";
+import { Button } from "../button";
 
 export default {
   title: "VideoGrid",
   parameters: {
     layout: "fullscreen",
   },
-  argTypes: {
-    layout: {
-      options: ["freedom", "spotlight"],
-      control: { type: "radio" },
-    },
-  },
 };
 
-export const ParticipantsTest = ({ layout, participantCount }) => {
+export const ParticipantsTest = () => {
+  const [layout, setLayout] = useVideoGridLayout();
+  const [participantCount, setParticipantCount] = useState(1);
+
   const items = useMemo(
     () =>
       new Array(participantCount).fill(undefined).map((_, i) => ({
@@ -29,13 +29,42 @@ export const ParticipantsTest = ({ layout, participantCount }) => {
   );
 
   return (
-    <div style={{ display: "flex", width: "100vw", height: "100vh" }}>
-      <VideoGrid layout={layout} items={items}>
-        {({ item, ...rest }) => (
-          <VideoTile key={item.id} name={`User ${item.id}`} {...rest} />
+    <>
+      <div style={{ display: "flex", width: "100vw", height: "32px" }}>
+        <Button
+          onPress={() =>
+            setLayout((layout) =>
+              layout === "freedom" ? "spotlight" : "freedom"
+            )
+          }
+        >
+          Toggle Layout
+        </Button>
+        {participantCount < 12 && (
+          <Button onPress={() => setParticipantCount((count) => count + 1)}>
+            Add Participant
+          </Button>
         )}
-      </VideoGrid>
-    </div>
+        {participantCount > 0 && (
+          <Button onPress={() => setParticipantCount((count) => count - 1)}>
+            Remove Participant
+          </Button>
+        )}
+      </div>
+      <div
+        style={{
+          display: "flex",
+          width: "100vw",
+          height: "calc(100vh - 32px)",
+        }}
+      >
+        <VideoGrid layout={layout} items={items}>
+          {({ item, ...rest }) => (
+            <VideoTile key={item.id} name={`User ${item.id}`} {...rest} />
+          )}
+        </VideoGrid>
+      </div>
+    </>
   );
 };