Activate speaker view when screensharing, even while in PiP

ts/components/CallManager.tsx

@@ -271,6 +271,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
         setLocalPreview={setLocalPreview}
         setRendererCanvas={setRendererCanvas}
         togglePip={togglePip}
+        toggleSpeakerView={toggleSpeakerView}
       />
     );
   }

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);

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]);