From 5c8e4ef12b3f4796c1982fe645095a2e5d520b6b Mon Sep 17 00:00:00 2001
From: audric <audric@loki.network>
Date: Wed, 9 Feb 2022 10:41:53 +1100
Subject: [PATCH] call: add local stream display in fullscreen

---
 .../calling/CallInFullScreenContainer.tsx     | 22 +++++++++++++++++++
 .../calling/DraggableCallContainer.tsx        |  5 -----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/ts/components/calling/CallInFullScreenContainer.tsx b/ts/components/calling/CallInFullScreenContainer.tsx
index 148ed6711..282200655 100644
--- a/ts/components/calling/CallInFullScreenContainer.tsx
+++ b/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}
diff --git a/ts/components/calling/DraggableCallContainer.tsx b/ts/components/calling/DraggableCallContainer.tsx
index 1506646a1..b4ed84637 100644
--- a/ts/components/calling/DraggableCallContainer.tsx
+++ b/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);