call: add local stream display in fullscreen

ts/components/calling/CallInFullScreenContainer.tsx

@@ -26,6 +26,15 @@ const CallInFullScreenVisible = styled.div`
   opacity: 1;
 `;
 
+const StyledLocalVideoElement = styled.video<{ isVideoMuted: boolean }>`
+  height: 20%;
+  width: 20%;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  opacity: ${props => (props.isVideoMuted ? 0 : 1)};
+`;
+
 export const CallInFullScreenContainer = () => {
   const dispatch = useDispatch();
   const ongoingCallWithFocused = useSelector(getHasOngoingCallWithFocusedConvo);
@@ -34,6 +43,7 @@ export const CallInFullScreenContainer = () => {
   const {
     remoteStream,
     remoteStreamVideoIsMuted,
+    localStream,
     currentConnectedAudioInputs,
     currentConnectedAudioOutputs,
     currentConnectedCameras,
@@ -43,6 +53,7 @@ export const CallInFullScreenContainer = () => {
   } = useVideoCallEventsListener('CallInFullScreenContainer', true);
 
   const videoRefRemote = React.useRef<HTMLVideoElement>(null);
+  const videoRefLocal = React.useRef<HTMLVideoElement>(null);
 
   function toggleFullScreenOFF() {
     dispatch(setFullScreenCall(false));
@@ -69,6 +80,12 @@ export const CallInFullScreenContainer = () => {
     }
   }
 
+  if (videoRefLocal?.current) {
+    if (videoRefLocal.current.srcObject !== localStream) {
+      videoRefLocal.current.srcObject = localStream;
+    }
+  }
+
   return (
     <CallInFullScreenVisible onClick={toggleFullScreenOFF}>
       <StyledVideoElement
@@ -76,6 +93,11 @@ export const CallInFullScreenContainer = () => {
         autoPlay={true}
         isVideoMuted={remoteStreamVideoIsMuted}
       />
+      <StyledLocalVideoElement
+        ref={videoRefLocal}
+        autoPlay={true}
+        isVideoMuted={localStreamVideoIsMuted}
+      />
       <CallWindowControls
         currentConnectedAudioInputs={currentConnectedAudioInputs}
         currentConnectedAudioOutputs={currentConnectedAudioOutputs}

ts/components/calling/DraggableCallContainer.tsx

@@ -53,11 +53,6 @@ const CenteredAvatarInDraggable = styled.div`
   align-items: center;
 `;
 
-// TODO:
-/**
- * Add mute input, deafen, end call, possibly add person to call
- * duration - look at how duration calculated for recording.
- */
 export const DraggableCallContainer = () => {
   const ongoingCallProps = useSelector(getHasOngoingCallWith);
   const selectedConversationKey = useSelector(getSelectedConversationKey);