// Copyright 2020 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import * as React from 'react'; import { action } from '@storybook/addon-actions'; import type { Meta } from '@storybook/react'; import type { PropsType } from './CallManager'; import { CallManager } from './CallManager'; import { CallEndedReason, CallState, CallViewMode, GroupCallConnectionState, GroupCallJoinState, } from '../types/Calling'; import { CallMode } from '../types/CallDisposition'; import type { ActiveGroupCallType, GroupCallRemoteParticipantType, } from '../types/Calling'; import type { ConversationType, ConversationTypeType, } from '../state/ducks/conversations'; import { AvatarColors } from '../types/Colors'; import { generateAci } from '../types/ServiceId'; import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation'; import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource'; import { setupI18n } from '../util/setupI18n'; import enMessages from '../../_locales/en/messages.json'; import { StorySendMode } from '../types/Stories'; import { FAKE_CALL_LINK, FAKE_CALL_LINK_WITH_ADMIN_KEY, getDefaultCallLinkConversation, } from '../test-both/helpers/fakeCallLink'; import { allRemoteParticipants } from './CallScreen.stories'; import { getPlaceholderContact } from '../state/selectors/conversations'; const i18n = setupI18n('en', enMessages); const getConversation = () => getDefaultConversation({ id: '3051234567', avatarUrl: undefined, color: AvatarColors[0], title: 'Rick Sanchez', name: 'Rick Sanchez', phoneNumber: '3051234567', profileName: 'Rick Sanchez', markedUnread: false, type: 'direct' as ConversationTypeType, lastUpdated: Date.now(), }); const getUnknownContact = (): ConversationType => ({ ...getPlaceholderContact(), serviceId: generateAci(), }); const getUnknownParticipant = (): GroupCallRemoteParticipantType => ({ ...getPlaceholderContact(), serviceId: generateAci(), aci: generateAci(), demuxId: Math.round(10000 * Math.random()), hasRemoteAudio: true, hasRemoteVideo: true, isHandRaised: false, mediaKeysReceived: false, presenting: false, sharingScreen: false, videoAspectRatio: 1, }); const getCommonActiveCallData = () => ({ conversation: getConversation(), joinedAt: Date.now(), hasLocalAudio: true, hasLocalVideo: false, localAudioLevel: 0, viewMode: CallViewMode.Paginated, outgoingRing: true, pip: false, settingsDialogOpen: false, showParticipantsList: false, }); const createProps = (storyProps: Partial = {}): PropsType => ({ ...storyProps, availableCameras: [], acceptCall: action('accept-call'), approveUser: action('approve-user'), batchUserAction: action('batch-user-action'), bounceAppIconStart: action('bounce-app-icon-start'), bounceAppIconStop: action('bounce-app-icon-stop'), cancelCall: action('cancel-call'), changeCallView: action('change-call-view'), closeNeedPermissionScreen: action('close-need-permission-screen'), declineCall: action('decline-call'), denyUser: action('deny-user'), getGroupCallVideoFrameSource: (_: string, demuxId: number) => fakeGetGroupCallVideoFrameSource(demuxId), getIsSharingPhoneNumberWithEverybody: () => false, getPresentingSources: action('get-presenting-sources'), hangUpActiveCall: action('hang-up-active-call'), hasInitialLoadCompleted: true, i18n, incomingCall: null, callLink: storyProps.callLink ?? undefined, isGroupCallRaiseHandEnabled: true, me: { ...getDefaultConversation({ color: AvatarColors[0], title: 'Morty Smith', }), serviceId: generateAci(), }, notifyForCall: action('notify-for-call'), openSystemPreferencesAction: action('open-system-preferences-action'), playRingtone: action('play-ringtone'), removeClient: action('remove-client'), blockClient: action('block-client'), renderDeviceSelection: () =>
, renderEmojiPicker: () => <>EmojiPicker, renderReactionPicker: () =>
, sendGroupCallRaiseHand: action('send-group-call-raise-hand'), sendGroupCallReaction: action('send-group-call-reaction'), setGroupCallVideoRequest: action('set-group-call-video-request'), setIsCallActive: action('set-is-call-active'), setLocalAudio: action('set-local-audio'), setLocalPreview: action('set-local-preview'), setLocalVideo: action('set-local-video'), setPresenting: action('toggle-presenting'), setRendererCanvas: action('set-renderer-canvas'), setOutgoingRing: action('set-outgoing-ring'), showContactModal: action('show-contact-modal'), showShareCallLinkViaSignal: action('show-share-call-link-via-signal'), startCall: action('start-call'), stopRingtone: action('stop-ringtone'), switchToPresentationView: action('switch-to-presentation-view'), switchFromPresentationView: action('switch-from-presentation-view'), toggleParticipants: action('toggle-participants'), togglePip: action('toggle-pip'), toggleScreenRecordingPermissionsDialog: action( 'toggle-screen-recording-permissions-dialog' ), toggleSettings: action('toggle-settings'), isConversationTooBigToRing: false, pauseVoiceNotePlayer: action('pause-audio-player'), }); const getActiveCallForCallLink = ( overrideProps: Partial = {} ): ActiveGroupCallType => { return { conversation: getDefaultCallLinkConversation(), joinedAt: Date.now(), hasLocalAudio: true, hasLocalVideo: true, localAudioLevel: 0, viewMode: CallViewMode.Paginated, outgoingRing: false, pip: false, settingsDialogOpen: false, showParticipantsList: overrideProps.showParticipantsList ?? true, callMode: CallMode.Adhoc, connectionState: overrideProps.connectionState ?? GroupCallConnectionState.NotConnected, conversationsByDemuxId: new Map(), deviceCount: 0, joinState: overrideProps.joinState ?? GroupCallJoinState.NotJoined, localDemuxId: 1, maxDevices: 5, groupMembers: [], isConversationTooBigToRing: false, peekedParticipants: overrideProps.peekedParticipants ?? allRemoteParticipants.slice(0, 3), remoteParticipants: overrideProps.remoteParticipants ?? [], pendingParticipants: overrideProps.pendingParticipants ?? [], raisedHands: new Set(), remoteAudioLevels: new Map(), }; }; export default { title: 'Components/CallManager', argTypes: {}, args: {}, } satisfies Meta; export function NoCall(): JSX.Element { return ; } export function OngoingDirectCall(): JSX.Element { return ( ); } export function OngoingGroupCall(): JSX.Element { return ( (), deviceCount: 0, joinState: GroupCallJoinState.Joined, localDemuxId: 1, maxDevices: 5, groupMembers: [], isConversationTooBigToRing: false, peekedParticipants: [], pendingParticipants: [], raisedHands: new Set(), remoteParticipants: [], remoteAudioLevels: new Map(), }, })} /> ); } export function RingingDirectCall(): JSX.Element { return ( ); } export function RingingGroupCall(): JSX.Element { return ( ); } export function CallRequestNeeded(): JSX.Element { return ( ); } export function CallLinkLobbyParticipantsKnown(): JSX.Element { return ( ); } export function CallLinkLobbyParticipants1Unknown(): JSX.Element { return ( ); } export function CallLinkLobbyParticipants1Known1Unknown(): JSX.Element { return ( ); } export function CallLinkLobbyParticipants1Known2Unknown(): JSX.Element { return ( ); } export function CallLinkLobbyParticipants1Known12Unknown(): JSX.Element { const peekedParticipants: Array = [ allRemoteParticipants[0], ]; for (let n = 12; n > 0; n -= 1) { peekedParticipants.push(getUnknownContact()); } return ( ); } export function CallLinkLobbyParticipants3Unknown(): JSX.Element { return ( ); } export function CallLinkWithJoinRequestsOne(): JSX.Element { return ( ); } export function CallLinkWithJoinRequestsTwo(): JSX.Element { return ( ); } export function CallLinkWithJoinRequestsMany(): JSX.Element { return ( ); } export function CallLinkWithJoinRequestUnknownContact(): JSX.Element { return ( ); } export function CallLinkWithJoinRequestsSystemContact(): JSX.Element { return ( ); } export function CallLinkWithJoinRequestsSystemContactMany(): JSX.Element { return ( ); } export function CallLinkWithJoinRequestsParticipantsOpen(): JSX.Element { return ( ); } export function CallLinkWithUnknownContacts(): JSX.Element { return ( ); }