From d1866a0e5ddde35972b9b21061c751a67a2a33c5 Mon Sep 17 00:00:00 2001 From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com> Date: Tue, 1 Dec 2020 19:52:01 -0600 Subject: [PATCH] Group calling: tell RingRTC about our rendered resolutions for perf --- stylesheets/_modules.scss | 2 +- ts/components/CallManager.stories.tsx | 1 + ts/components/CallManager.tsx | 16 ++++++ ts/components/CallScreen.stories.tsx | 1 + ts/components/CallScreen.tsx | 4 ++ ts/components/CallingPip.stories.tsx | 1 + ts/components/CallingPip.tsx | 5 +- ts/components/CallingPipRemoteVideo.tsx | 48 +++++++++++++++++- ts/components/GroupCallRemoteParticipants.tsx | 50 +++++++++++++++++-- ts/services/calling.ts | 8 +++ ts/state/ducks/calling.ts | 23 +++++++++ .../nonRenderedRemoteParticipant_test.ts | 16 ++++++ ts/types/Calling.ts | 7 +++ ts/util/hooks.ts | 22 ++++++++ ts/util/lint/exceptions.json | 2 +- .../ringrtc/nonRenderedRemoteParticipant.ts | 12 +++++ 16 files changed, 211 insertions(+), 7 deletions(-) create mode 100644 ts/test/util/ringrtc/nonRenderedRemoteParticipant_test.ts create mode 100644 ts/util/ringrtc/nonRenderedRemoteParticipant.ts diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 6b2dc916e..0465f6d80 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -6552,7 +6552,7 @@ button.module-image__border-overlay:focus { background-color: $color-gray-95; border-radius: 4px 4px 0 0; display: flex; - height: 120px; + height: 120px; // This height should be kept in sync with 's hard-coded height. justify-content: center; overflow: hidden; position: relative; diff --git a/ts/components/CallManager.stories.tsx b/ts/components/CallManager.stories.tsx index b12139fd0..2be945c95 100644 --- a/ts/components/CallManager.stories.tsx +++ b/ts/components/CallManager.stories.tsx @@ -73,6 +73,7 @@ const createProps = (storyProps: Partial = {}): PropsType => ({ title: text('Caller Title', 'Morty Smith'), }, renderDeviceSelection: () =>
, + setGroupCallVideoRequest: action('set-group-call-video-request'), setLocalAudio: action('set-local-audio'), setLocalPreview: action('set-local-preview'), setLocalVideo: action('set-local-video'), diff --git a/ts/components/CallManager.tsx b/ts/components/CallManager.tsx index 6f319d87d..297287f86 100644 --- a/ts/components/CallManager.tsx +++ b/ts/components/CallManager.tsx @@ -13,6 +13,7 @@ import { CallMode, CallState, GroupCallJoinState, + GroupCallVideoRequest, VideoFrameSource, } from '../types/Calling'; import { ConversationType } from '../state/ducks/conversations'; @@ -23,6 +24,7 @@ import { DeclineCallType, DirectCallStateType, HangUpType, + SetGroupCallVideoRequestType, SetLocalAudioType, SetLocalPreviewType, SetLocalVideoType, @@ -60,6 +62,7 @@ export interface PropsType { profileName?: string; title: string; }; + setGroupCallVideoRequest: (_: SetGroupCallVideoRequestType) => void; setLocalAudio: (_: SetLocalAudioType) => void; setLocalVideo: (_: SetLocalVideoType) => void; setLocalPreview: (_: SetLocalPreviewType) => void; @@ -83,6 +86,7 @@ const ActiveCallManager: React.FC = ({ getGroupCallVideoFrameSource, me, renderDeviceSelection, + setGroupCallVideoRequest, setLocalAudio, setLocalPreview, setLocalVideo, @@ -129,6 +133,16 @@ const ActiveCallManager: React.FC = ({ [getGroupCallVideoFrameSource, conversation.id] ); + const setGroupCallVideoRequestForConversation = useCallback( + (resolutions: Array) => { + setGroupCallVideoRequest({ + conversationId: conversation.id, + resolutions, + }); + }, + [setGroupCallVideoRequest, conversation.id] + ); + let showCallLobby: boolean; switch (call.callMode) { @@ -205,6 +219,7 @@ const ActiveCallManager: React.FC = ({ hangUp={hangUp} hasLocalVideo={hasLocalVideo} i18n={i18n} + setGroupCallVideoRequest={setGroupCallVideoRequestForConversation} setLocalPreview={setLocalPreview} setRendererCanvas={setRendererCanvas} togglePip={togglePip} @@ -223,6 +238,7 @@ const ActiveCallManager: React.FC = ({ i18n={i18n} joinedAt={joinedAt} me={me} + setGroupCallVideoRequest={setGroupCallVideoRequestForConversation} setLocalPreview={setLocalPreview} setRendererCanvas={setRendererCanvas} setLocalAudio={setLocalAudio} diff --git a/ts/components/CallScreen.stories.tsx b/ts/components/CallScreen.stories.tsx index e8f9f05b1..a5d2d7351 100644 --- a/ts/components/CallScreen.stories.tsx +++ b/ts/components/CallScreen.stories.tsx @@ -114,6 +114,7 @@ const createProps = ( profileName: 'Morty Smith', title: 'Morty Smith', }, + setGroupCallVideoRequest: action('set-group-call-video-request'), setLocalAudio: action('set-local-audio'), setLocalPreview: action('set-local-preview'), setLocalVideo: action('set-local-video'), diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx index 472712919..52c80c20a 100644 --- a/ts/components/CallScreen.tsx +++ b/ts/components/CallScreen.tsx @@ -20,6 +20,7 @@ import { CallMode, CallState, GroupCallConnectionState, + GroupCallVideoRequest, VideoFrameSource, } from '../types/Calling'; import { ColorType } from '../types/Colors'; @@ -45,6 +46,7 @@ export type PropsType = { profileName?: string; title: string; }; + setGroupCallVideoRequest: (_: Array) => void; setLocalAudio: (_: SetLocalAudioType) => void; setLocalVideo: (_: SetLocalVideoType) => void; setLocalPreview: (_: SetLocalPreviewType) => void; @@ -64,6 +66,7 @@ export const CallScreen: React.FC = ({ i18n, joinedAt, me, + setGroupCallVideoRequest, setLocalAudio, setLocalVideo, setLocalPreview, @@ -187,6 +190,7 @@ export const CallScreen: React.FC = ({ getGroupCallVideoFrameSource={getGroupCallVideoFrameSource} i18n={i18n} remoteParticipants={groupCallParticipants} + setGroupCallVideoRequest={setGroupCallVideoRequest} /> ); break; diff --git a/ts/components/CallingPip.stories.tsx b/ts/components/CallingPip.stories.tsx index dd55b85c2..1de5840dc 100644 --- a/ts/components/CallingPip.stories.tsx +++ b/ts/components/CallingPip.stories.tsx @@ -68,6 +68,7 @@ const createProps = ( hangUp: action('hang-up'), hasLocalVideo: boolean('hasLocalVideo', overrideProps.hasLocalVideo || false), i18n, + setGroupCallVideoRequest: action('set-group-call-video-request'), setLocalPreview: action('set-local-preview'), setRendererCanvas: action('set-renderer-canvas'), togglePip: action('toggle-pip'), diff --git a/ts/components/CallingPip.tsx b/ts/components/CallingPip.tsx index bc054b03e..f697647ef 100644 --- a/ts/components/CallingPip.tsx +++ b/ts/components/CallingPip.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { minBy, debounce, noop } from 'lodash'; import { CallingPipRemoteVideo } from './CallingPipRemoteVideo'; import { LocalizerType } from '../types/Util'; -import { VideoFrameSource } from '../types/Calling'; +import { GroupCallVideoRequest, VideoFrameSource } from '../types/Calling'; import { ActiveCallType, HangUpType, @@ -54,6 +54,7 @@ export type PropsType = { hangUp: (_: HangUpType) => void; hasLocalVideo: boolean; i18n: LocalizerType; + setGroupCallVideoRequest: (_: Array) => void; setLocalPreview: (_: SetLocalPreviewType) => void; setRendererCanvas: (_: SetRendererCanvasType) => void; togglePip: () => void; @@ -70,6 +71,7 @@ export const CallingPip = ({ hangUp, hasLocalVideo, i18n, + setGroupCallVideoRequest, setLocalPreview, setRendererCanvas, togglePip, @@ -269,6 +271,7 @@ export const CallingPip = ({ getGroupCallVideoFrameSource={getGroupCallVideoFrameSource} i18n={i18n} setRendererCanvas={setRendererCanvas} + setGroupCallVideoRequest={setGroupCallVideoRequest} /> {hasLocalVideo ? (