From b6c7c19afcffdd7400cbf85ae2308404c0e8acd2 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Thu, 7 Oct 2021 13:17:29 -0700
Subject: [PATCH] Activate speaker view when screensharing, even while in PiP

Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>
---
 ts/components/CallManager.tsx        | 1 +
 ts/components/CallingPip.stories.tsx | 1 +
 ts/components/CallingPip.tsx         | 9 +++++++++
 3 files changed, 11 insertions(+)

diff --git a/ts/components/CallManager.tsx b/ts/components/CallManager.tsx
index ec70bc7cac..b57691ef17 100644
--- a/ts/components/CallManager.tsx
+++ b/ts/components/CallManager.tsx
@@ -271,6 +271,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
         setLocalPreview={setLocalPreview}
         setRendererCanvas={setRendererCanvas}
         togglePip={togglePip}
+        toggleSpeakerView={toggleSpeakerView}
       />
     );
   }
diff --git a/ts/components/CallingPip.stories.tsx b/ts/components/CallingPip.stories.tsx
index 427e2cef5d..708b4ea545 100644
--- a/ts/components/CallingPip.stories.tsx
+++ b/ts/components/CallingPip.stories.tsx
@@ -66,6 +66,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): 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 6d40c5eb35..2a4e78b6d8 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 | HTMLDivElement>(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]);