set fullscreen off when remote stream is muted

ts/components/session/calling/CallInFullScreenContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
@@ -21,7 +21,7 @@ const CallInFullScreenVisible = styled.div`
   left: 0;
   display: flex;
   flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: black;
   border: var(--session-border);
   opacity: 1;
 `;
@@ -47,6 +47,14 @@ export const CallInFullScreenContainer = () => {
   useKey('Escape', () => {
     toggleFullScreenOFF();
   });
+
+  useEffect(() => {
+    // close fullscreen mode if the remote video gets muted
+    if (remoteStreamVideoIsMuted) {
+      dispatch(setFullScreenCall(false));
+    }
+  }, [remoteStreamVideoIsMuted]);
+
   if (
     !hasOngoingCall ||
     !ongoingCallPubkey ||

ts/components/session/calling/InConversationCallContainer.tsx

@@ -343,7 +343,7 @@ export const InConversationCallContainer = () => {
               showAudioInputMenu(currentConnectedAudioInputs, e);
             }}
           />
-          <ShowInFullScreenButton isDisabled={remoteStreamVideoIsMuted} />
+          {!remoteStreamVideoIsMuted && <ShowInFullScreenButton />}
         </InConvoCallWindowControls>
         <VideoInputMenu triggerId={videoTriggerId} camerasList={currentConnectedCameras} />
         <AudioInputMenu triggerId={audioTriggerId} audioInputsList={currentConnectedAudioInputs} />