signal-desktop/ts/components/CallingParticipantsList.stories.tsx

108 lines
3 KiB
TypeScript
Raw Normal View History

// Copyright 2020-2021 Signal Messenger, LLC
2020-10-30 20:34:04 +00:00
// SPDX-License-Identifier: AGPL-3.0-only
2020-10-15 19:53:21 +00:00
import * as React from 'react';
2021-05-28 16:15:17 +00:00
import { sample } from 'lodash';
2020-10-15 19:53:21 +00:00
import { action } from '@storybook/addon-actions';
import type { PropsType } from './CallingParticipantsList';
import { CallingParticipantsList } from './CallingParticipantsList';
2021-05-28 16:15:17 +00:00
import { AvatarColors } from '../types/Colors';
import type { GroupCallRemoteParticipantType } from '../types/Calling';
2021-10-26 22:59:08 +00:00
import { getDefaultConversationWithUuid } from '../test-both/helpers/getDefaultConversation';
2021-09-18 00:30:08 +00:00
import { setupI18n } from '../util/setupI18n';
2020-10-15 19:53:21 +00:00
import enMessages from '../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
2020-11-17 15:07:53 +00:00
function createParticipant(
participantProps: Partial<GroupCallRemoteParticipantType>
): GroupCallRemoteParticipantType {
return {
demuxId: 2,
2020-11-17 15:07:53 +00:00
hasRemoteAudio: Boolean(participantProps.hasRemoteAudio),
hasRemoteVideo: Boolean(participantProps.hasRemoteVideo),
presenting: Boolean(participantProps.presenting),
sharingScreen: Boolean(participantProps.sharingScreen),
videoAspectRatio: 1.3,
2021-10-26 22:59:08 +00:00
...getDefaultConversationWithUuid({
avatarPath: participantProps.avatarPath,
2021-05-28 16:15:17 +00:00
color: sample(AvatarColors),
isBlocked: Boolean(participantProps.isBlocked),
name: participantProps.name,
profileName: participantProps.title,
title: String(participantProps.title),
}),
2020-11-17 15:07:53 +00:00
};
}
2020-10-15 19:53:21 +00:00
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
i18n,
onClose: action('on-close'),
ourUuid: 'cf085e6a-e70b-41ec-a310-c198248af13f',
2020-11-17 15:07:53 +00:00
participants: overrideProps.participants || [],
2020-10-15 19:53:21 +00:00
});
2022-06-07 00:48:02 +00:00
export default {
title: 'Components/CallingParticipantsList',
};
2020-10-15 19:53:21 +00:00
2022-11-18 00:45:19 +00:00
export function NoOne(): JSX.Element {
2020-10-15 19:53:21 +00:00
const props = createProps();
return <CallingParticipantsList {...props} />;
2022-11-18 00:45:19 +00:00
}
2022-06-07 00:48:02 +00:00
NoOne.story = {
name: 'No one',
};
2020-10-15 19:53:21 +00:00
2022-11-18 00:45:19 +00:00
export function SoloCall(): JSX.Element {
2020-11-17 15:07:53 +00:00
const props = createProps({
participants: [
createParticipant({
title: 'Bardock',
}),
],
});
return <CallingParticipantsList {...props} />;
2022-11-18 00:45:19 +00:00
}
2020-11-17 15:07:53 +00:00
2022-11-18 00:45:19 +00:00
export function ManyParticipants(): JSX.Element {
2020-10-15 19:53:21 +00:00
const props = createProps({
participants: [
2020-11-17 15:07:53 +00:00
createParticipant({
2020-10-15 19:53:21 +00:00
title: 'Son Goku',
2020-11-17 15:07:53 +00:00
}),
createParticipant({
hasRemoteAudio: true,
presenting: true,
2020-11-20 19:39:50 +00:00
name: 'Rage Trunks',
2020-10-15 19:53:21 +00:00
title: 'Rage Trunks',
2020-11-17 15:07:53 +00:00
}),
createParticipant({
hasRemoteAudio: true,
2020-10-15 19:53:21 +00:00
title: 'Prince Vegeta',
2020-11-17 15:07:53 +00:00
}),
createParticipant({
hasRemoteAudio: true,
hasRemoteVideo: true,
2020-11-20 19:39:50 +00:00
name: 'Goku Black',
2020-10-15 19:53:21 +00:00
title: 'Goku Black',
2020-11-17 15:07:53 +00:00
}),
createParticipant({
2020-10-15 19:53:21 +00:00
title: 'Supreme Kai Zamasu',
2020-11-17 15:07:53 +00:00
}),
2020-10-15 19:53:21 +00:00
],
});
return <CallingParticipantsList {...props} />;
2022-11-18 00:45:19 +00:00
}
2020-11-20 17:19:53 +00:00
2022-11-18 00:45:19 +00:00
export function Overflow(): JSX.Element {
2020-11-20 17:19:53 +00:00
const props = createProps({
participants: Array(50)
.fill(null)
.map(() => createParticipant({ title: 'Kirby' })),
});
return <CallingParticipantsList {...props} />;
2022-11-18 00:45:19 +00:00
}