diff --git a/ts/components/CallManager.tsx b/ts/components/CallManager.tsx index ec70bc7cacf..b57691ef170 100644 --- a/ts/components/CallManager.tsx +++ b/ts/components/CallManager.tsx @@ -271,6 +271,7 @@ const ActiveCallManager: React.FC = ({ setLocalPreview={setLocalPreview} setRendererCanvas={setRendererCanvas} togglePip={togglePip} + toggleSpeakerView={toggleSpeakerView} /> ); } diff --git a/ts/components/CallingPip.stories.tsx b/ts/components/CallingPip.stories.tsx index 427e2cef5db..708b4ea545a 100644 --- a/ts/components/CallingPip.stories.tsx +++ b/ts/components/CallingPip.stories.tsx @@ -66,6 +66,7 @@ const createProps = (overrideProps: Partial = {}): PropsType => ({ setLocalPreview: action('set-local-preview'), setRendererCanvas: action('set-renderer-canvas'), togglePip: action('toggle-pip'), + toggleSpeakerView: action('toggleSpeakerView'), }); const story = storiesOf('Components/CallingPip', module); diff --git a/ts/components/CallingPip.tsx b/ts/components/CallingPip.tsx index 6d40c5eb358..2a4e78b6d8f 100644 --- a/ts/components/CallingPip.tsx +++ b/ts/components/CallingPip.tsx @@ -13,6 +13,7 @@ import { SetRendererCanvasType, } from '../state/ducks/calling'; import { missingCaseError } from '../util/missingCaseError'; +import { useActivateSpeakerViewOnPresenting } from '../hooks/useActivateSpeakerViewOnPresenting'; enum PositionMode { BeingDragged, @@ -58,6 +59,7 @@ export type PropsType = { setLocalPreview: (_: SetLocalPreviewType) => void; setRendererCanvas: (_: SetRendererCanvasType) => void; togglePip: () => void; + toggleSpeakerView: () => void; }; const PIP_HEIGHT = 156; @@ -75,6 +77,7 @@ export const CallingPip = ({ setLocalPreview, setRendererCanvas, togglePip, + toggleSpeakerView, }: PropsType): JSX.Element | null => { const videoContainerRef = React.useRef(null); const localVideoRef = React.useRef(null); @@ -86,6 +89,12 @@ export const CallingPip = ({ offsetY: PIP_TOP_MARGIN, }); + useActivateSpeakerViewOnPresenting( + activeCall.remoteParticipants, + activeCall.isInSpeakerView, + toggleSpeakerView + ); + React.useEffect(() => { setLocalPreview({ element: localVideoRef }); }, [setLocalPreview]);