xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update VideoGrid story

Browse source
This commit is contained in:
Robert Long 2022-02-02 18:32:23 -08:00
commit f3cee359c0
1 changed files with 43 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/video-grid/VideoGrid.stories.jsx
View file

@ -1,23 +1,23 @@
import React, { useState } from "react"; 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 VideoTile from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoTile";
import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss"; import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
import { useMemo } from "react"; import { useMemo } from "react";
import { Button } from "../button";
export default { export default {
title: "VideoGrid", title: "VideoGrid",
parameters: { parameters: {
layout: "fullscreen", 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( const items = useMemo(
() => () =>
new Array(participantCount).fill(undefined).map((_, i) => ({ new Array(participantCount).fill(undefined).map((_, i) => ({
@ -29,13 +29,42 @@ export const ParticipantsTest = ({ layout, participantCount }) => {
); );
return ( return (
<div style={{ display: "flex", width: "100vw", height: "100vh" }}> <>
<VideoGrid layout={layout} items={items}> <div style={{ display: "flex", width: "100vw", height: "32px" }}>
{({ item, ...rest }) => ( <Button
<VideoTile key={item.id} name={`User ${item.id}`} {...rest} /> onPress={() =>
setLayout((layout) =>
layout === "freedom" ? "spotlight" : "freedom"
)
}
>
Toggle Layout
</Button>
{participantCount < 12 && (
<Button onPress={() => setParticipantCount((count) => count + 1)}>
Add Participant
</Button>
)} )}
</VideoGrid> {participantCount > 0 && (
</div> <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>
</>
); );
}; };