Add VideoGrid storybook

.storybook/main.js

@@ -1,4 +1,5 @@
 const svgrPlugin = require("vite-plugin-svgr");
+const path = require("path");
 
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -9,6 +10,14 @@ module.exports = {
   },
   async viteFinal(config) {
     config.plugins.push(svgrPlugin());
+    config.resolve = config.resolve || {};
+    config.resolve.alias = config.resolve.alias || {};
+    config.resolve.alias["$(res)"] = path.resolve(
+      __dirname,
+      "../node_modules/matrix-react-sdk/res"
+    );
+    config.resolve.dedupe = config.resolve.dedupe || [];
+    config.resolve.dedupe.push("react", "react-dom", "matrix-js-sdk");
     return config;
   },
 };

src/Header.stories.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { GridLayoutMenu } from "./GridLayoutMenu";
+import { GridLayoutMenu } from "./room/GridLayoutMenu";
 import {
   Header,
   HeaderLogo,

src/room/InCallView.jsx

@@ -10,6 +10,7 @@ import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import VideoGrid, {
   useVideoGridLayout,
 } from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
+import { VideoTileContainer } from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTileContainer";
 import SimpleVideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/SimpleVideoGrid";
 import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
 import { getAvatarUrl } from "../matrix-utils";
@@ -140,10 +141,18 @@ export function InCallView({
         <VideoGrid
           items={items}
           layout={layout}
-          getAvatar={renderAvatar}
           onFocusTile={onFocusTile}
           disableAnimations={isSafari}
-        />
+        >
+          {({ item, ...rest }) => (
+            <VideoTileContainer
+              key={item.id}
+              callFeed={item.callFeed}
+              getAvatar={renderAvatar}
+              {...rest}
+            />
+          )}
+        </VideoGrid>
       )}
       <div className={styles.footer}>
         <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />

src/video-grid/VideoGrid.stories.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import VideoGrid 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";
+
+export default {
+  title: "VideoGrid",
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    layout: {
+      options: ["freedom", "spotlight"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+export const ParticipantsTest = ({ layout, participantCount }) => {
+  const items = useMemo(
+    () =>
+      new Array(participantCount).fill(undefined).map((_, i) => ({
+        id: (i + 1).toString(),
+        focused: false,
+        presenter: false,
+      })),
+    [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} />
+        )}
+      </VideoGrid>
+    </div>
+  );
+};
+
+ParticipantsTest.args = {
+  layout: "freedom",
+  participantCount: 1,
+};