46 lines
1.2 KiB
React
46 lines
1.2 KiB
React
|
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,
|
||
|
|
};
|