Add list of participants to the lobby, and add basic blocking for max participants
This commit is contained in:
parent
f8b4862ed5
commit
daef1feae8
11 changed files with 112 additions and 27 deletions
|
@ -1166,6 +1166,10 @@
|
|||
"message": "Join Call",
|
||||
"description": "Button label in the call lobby for joining a call"
|
||||
},
|
||||
"calling__call-is-full": {
|
||||
"message": "Call is full",
|
||||
"description": "Button label in the call lobby when you can't join because the call is full"
|
||||
},
|
||||
"calling__button--video-disabled": {
|
||||
"message": "Camera disabled",
|
||||
"description": "Button tooltip label when the camera is disabled"
|
||||
|
|
|
@ -6454,6 +6454,10 @@ button.module-image__border-overlay:focus {
|
|||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
width: 160px;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__video {
|
||||
|
|
|
@ -101,6 +101,8 @@ story.add('Ongoing Direct Call', () => (
|
|||
},
|
||||
activeCallState: getCallState(),
|
||||
conversation: getConversation(),
|
||||
isCallFull: false,
|
||||
groupCallPeekedParticipants: [],
|
||||
groupCallParticipants: [],
|
||||
},
|
||||
})}
|
||||
|
@ -125,6 +127,8 @@ story.add('Ongoing Group Call', () => (
|
|||
},
|
||||
activeCallState: getCallState(),
|
||||
conversation: getConversation(),
|
||||
isCallFull: false,
|
||||
groupCallPeekedParticipants: [],
|
||||
groupCallParticipants: [],
|
||||
},
|
||||
})}
|
||||
|
@ -151,6 +155,8 @@ story.add('Call Request Needed', () => (
|
|||
}),
|
||||
activeCallState: getCallState(),
|
||||
conversation: getConversation(),
|
||||
isCallFull: false,
|
||||
groupCallPeekedParticipants: [],
|
||||
groupCallParticipants: [],
|
||||
},
|
||||
})}
|
||||
|
|
|
@ -96,7 +96,9 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
|
|||
call,
|
||||
activeCallState,
|
||||
conversation,
|
||||
groupCallPeekedParticipants,
|
||||
groupCallParticipants,
|
||||
isCallFull,
|
||||
} = activeCall;
|
||||
const {
|
||||
hasLocalAudio,
|
||||
|
@ -157,7 +159,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
|
|||
}
|
||||
|
||||
if (showCallLobby) {
|
||||
const participantNames = groupCallParticipants.map(participant =>
|
||||
const participantNames = groupCallPeekedParticipants.map(participant =>
|
||||
participant.isSelf
|
||||
? i18n('you')
|
||||
: participant.firstName || participant.title
|
||||
|
@ -171,6 +173,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
|
|||
hasLocalVideo={hasLocalVideo}
|
||||
i18n={i18n}
|
||||
isGroupCall={call.callMode === CallMode.Group}
|
||||
isCallFull={isCallFull}
|
||||
me={me}
|
||||
onCallCanceled={cancelActiveCall}
|
||||
onJoinCall={joinActiveCall}
|
||||
|
|
|
@ -93,6 +93,8 @@ const createProps = (
|
|||
type: 'direct',
|
||||
lastUpdated: Date.now(),
|
||||
},
|
||||
isCallFull: false,
|
||||
groupCallPeekedParticipants: [],
|
||||
groupCallParticipants: overrideProps.groupCallParticipants || [],
|
||||
},
|
||||
// We allow `any` here because this is fake and actually comes from RingRTC, which we
|
||||
|
|
|
@ -24,6 +24,7 @@ export type PropsType = {
|
|||
hasLocalVideo: boolean;
|
||||
i18n: LocalizerType;
|
||||
isGroupCall: boolean;
|
||||
isCallFull?: boolean;
|
||||
me: {
|
||||
avatarPath?: string;
|
||||
color?: ColorType;
|
||||
|
@ -46,6 +47,7 @@ export const CallingLobby = ({
|
|||
hasLocalVideo,
|
||||
i18n,
|
||||
isGroupCall = false,
|
||||
isCallFull = false,
|
||||
me,
|
||||
onCallCanceled,
|
||||
onJoinCall,
|
||||
|
@ -112,6 +114,45 @@ export const CallingLobby = ({
|
|||
? CallingButtonType.AUDIO_ON
|
||||
: CallingButtonType.AUDIO_OFF;
|
||||
|
||||
let joinButton: JSX.Element;
|
||||
if (isCallFull) {
|
||||
joinButton = (
|
||||
<button
|
||||
className="module-button__green module-calling-lobby__button"
|
||||
disabled
|
||||
tabIndex={0}
|
||||
type="button"
|
||||
>
|
||||
{i18n('calling__call-is-full')}
|
||||
</button>
|
||||
);
|
||||
} else if (isCallConnecting) {
|
||||
joinButton = (
|
||||
<button
|
||||
className="module-button__green module-calling-lobby__button"
|
||||
disabled
|
||||
tabIndex={0}
|
||||
type="button"
|
||||
>
|
||||
<Spinner svgSize="small" />
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
joinButton = (
|
||||
<button
|
||||
className="module-button__green module-calling-lobby__button"
|
||||
onClick={() => {
|
||||
setIsCallConnecting(true);
|
||||
onJoinCall();
|
||||
}}
|
||||
tabIndex={0}
|
||||
type="button"
|
||||
>
|
||||
{isGroupCall ? i18n('calling__join') : i18n('calling__start')}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-calling__container">
|
||||
<CallingHeader
|
||||
|
@ -191,29 +232,7 @@ export const CallingLobby = ({
|
|||
>
|
||||
{i18n('cancel')}
|
||||
</button>
|
||||
{isCallConnecting && (
|
||||
<button
|
||||
className="module-button__green module-calling-lobby__button"
|
||||
disabled
|
||||
tabIndex={0}
|
||||
type="button"
|
||||
>
|
||||
<Spinner svgSize="small" />
|
||||
</button>
|
||||
)}
|
||||
{!isCallConnecting && (
|
||||
<button
|
||||
className="module-button__green module-calling-lobby__button"
|
||||
onClick={() => {
|
||||
setIsCallConnecting(true);
|
||||
onJoinCall();
|
||||
}}
|
||||
tabIndex={0}
|
||||
type="button"
|
||||
>
|
||||
{isGroupCall ? i18n('calling__join') : i18n('calling__start')}
|
||||
</button>
|
||||
)}
|
||||
{joinButton}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -59,6 +59,8 @@ const createProps = (
|
|||
},
|
||||
call: activeCall.call || defaultCall,
|
||||
conversation: activeCall.conversation || conversation,
|
||||
isCallFull: false,
|
||||
groupCallPeekedParticipants: [],
|
||||
groupCallParticipants: [],
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
|
|
@ -17,6 +17,7 @@ import {
|
|||
ChangeIODevicePayloadType,
|
||||
GroupCallConnectionState,
|
||||
GroupCallJoinState,
|
||||
GroupCallPeekedParticipantType,
|
||||
GroupCallRemoteParticipantType,
|
||||
MediaDeviceSettings,
|
||||
} from '../../types/Calling';
|
||||
|
@ -71,6 +72,8 @@ export interface ActiveCallType {
|
|||
activeCallState: ActiveCallStateType;
|
||||
call: DirectCallStateType | GroupCallStateType;
|
||||
conversation: ConversationType;
|
||||
isCallFull: boolean;
|
||||
groupCallPeekedParticipants: Array<GroupCallPeekedParticipantType>;
|
||||
groupCallParticipants: Array<GroupCallRemoteParticipantType>;
|
||||
}
|
||||
|
||||
|
|
|
@ -9,7 +9,11 @@ import { calling as callingService } from '../../services/calling';
|
|||
import { getMe, getConversationSelector } from '../selectors/conversations';
|
||||
import { getActiveCall, GroupCallParticipantInfoType } from '../ducks/calling';
|
||||
import { getIncomingCall } from '../selectors/calling';
|
||||
import { CallMode, GroupCallRemoteParticipantType } from '../../types/Calling';
|
||||
import {
|
||||
CallMode,
|
||||
GroupCallPeekedParticipantType,
|
||||
GroupCallRemoteParticipantType,
|
||||
} from '../../types/Calling';
|
||||
import { StateType } from '../reducer';
|
||||
|
||||
import { getIntl } from '../selectors/user';
|
||||
|
@ -47,8 +51,34 @@ const mapStateToActiveCallProp = (state: StateType) => {
|
|||
return undefined;
|
||||
}
|
||||
|
||||
// TODO: The way we deal with remote participants isn't ideal. See DESKTOP-949.
|
||||
let isCallFull = false;
|
||||
const groupCallPeekedParticipants: Array<GroupCallPeekedParticipantType> = [];
|
||||
const groupCallParticipants: Array<GroupCallRemoteParticipantType> = [];
|
||||
if (call && call.callMode === CallMode.Group) {
|
||||
if (call.callMode === CallMode.Group) {
|
||||
isCallFull = call.peekInfo.deviceCount >= call.peekInfo.maxDevices;
|
||||
|
||||
call.peekInfo.conversationIds.forEach((conversationId: string) => {
|
||||
const peekedConversation = conversationSelector(conversationId);
|
||||
|
||||
if (!peekedConversation) {
|
||||
window.log.error(
|
||||
'Peeked participant has no corresponding conversation'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
groupCallPeekedParticipants.push({
|
||||
avatarPath: peekedConversation.avatarPath,
|
||||
color: peekedConversation.color,
|
||||
firstName: peekedConversation.firstName,
|
||||
isSelf: conversationId === state.user.ourConversationId,
|
||||
name: peekedConversation.name,
|
||||
profileName: peekedConversation.profileName,
|
||||
title: peekedConversation.title,
|
||||
});
|
||||
});
|
||||
|
||||
call.remoteParticipants.forEach(
|
||||
(remoteParticipant: GroupCallParticipantInfoType) => {
|
||||
const remoteConversation = conversationSelector(
|
||||
|
@ -83,6 +113,8 @@ const mapStateToActiveCallProp = (state: StateType) => {
|
|||
activeCallState,
|
||||
call,
|
||||
conversation,
|
||||
isCallFull,
|
||||
groupCallPeekedParticipants,
|
||||
groupCallParticipants,
|
||||
};
|
||||
};
|
||||
|
|
|
@ -58,6 +58,16 @@ export enum GroupCallJoinState {
|
|||
Joined = 2,
|
||||
}
|
||||
|
||||
// TODO: The way we deal with remote participants isn't ideal. See DESKTOP-949.
|
||||
export interface GroupCallPeekedParticipantType {
|
||||
avatarPath?: string;
|
||||
color?: ColorType;
|
||||
firstName?: string;
|
||||
isSelf: boolean;
|
||||
name?: string;
|
||||
profileName?: string;
|
||||
title: string;
|
||||
}
|
||||
export interface GroupCallRemoteParticipantType {
|
||||
avatarPath?: string;
|
||||
color?: ColorType;
|
||||
|
|
|
@ -14400,7 +14400,7 @@
|
|||
"rule": "React-useRef",
|
||||
"path": "ts/components/CallingLobby.tsx",
|
||||
"line": " const localVideoRef = React.useRef(null);",
|
||||
"lineNumber": 60,
|
||||
"lineNumber": 62,
|
||||
"reasonCategory": "usageTrusted",
|
||||
"updated": "2020-10-26T19:12:24.410Z",
|
||||
"reasonDetail": "Used to get the local video element for rendering."
|
||||
|
|
Loading…
Reference in a new issue