redo roomcallnavstatus ui, force user preferred mute/video states when first joining calls, update variable names and remove unnecessary logic

src/app/features/call/CallView.tsx

@@ -5,7 +5,7 @@ import { useCallState } from '../../pages/client/call/CallProvider';
 import { useCallMembers } from '../../hooks/useCallMemberships';
 
 import {
-  PrimaryRefContext,
+  CallRefContext,
 } from '../../pages/client/call/PersistentCallContainer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useDebounce } from '../../hooks/useDebounce';
@@ -42,7 +42,7 @@ export function CallViewUserGrid({ children }: { children: ReactNode }) {
 
 
 export function CallView({ room }: { room: Room }) {
-  const primaryIframeRef = useContext(PrimaryRefContext);
+  const callIframeRef = useContext(CallRefContext);
   const iframeHostRef = useRef<HTMLDivElement>(null);
 
   const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
@@ -60,7 +60,7 @@ export function CallView({ room }: { room: Room }) {
   } = useCallState();
 
   const isActiveCallRoom = activeCallRoomId === room.roomId
-  const shouldDisplayCall = isActiveCallRoom && isActiveCallReady;
+  const callIsCurrentAndReady = isActiveCallRoom && isActiveCallReady;
   const callMembers = useCallMembers(mx, room.roomId)
 
   const getName = (userId: string) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId);
@@ -71,8 +71,7 @@ export function CallView({ room }: { room: Room }) {
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 
-  /* eslint-disable-next-line no-nested-ternary */
-  const activeIframeDisplayRef = primaryIframeRef
+  const activeIframeDisplayRef = callIframeRef
 
   const applyFixedPositioningToIframe = useCallback(() => {
     const iframeElement = activeIframeDisplayRef?.current;
@@ -118,7 +117,7 @@ export function CallView({ room }: { room: Room }) {
     const iframeElement = activeIframeDisplayRef?.current;
     const hostElement = iframeHostRef?.current;
 
-    if (room.isCallRoom() || (shouldDisplayCall && iframeElement && hostElement)) {
+    if (room.isCallRoom() || (callIsCurrentAndReady && iframeElement && hostElement)) {
       applyFixedPositioningToIframe();
 
       const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);
@@ -146,7 +145,7 @@ export function CallView({ room }: { room: Room }) {
     activeIframeDisplayRef,
     applyFixedPositioningToIframe,
     debouncedApplyFixedPositioning,
-    shouldDisplayCall,
+    callIsCurrentAndReady,
     room,
   ]);
 
@@ -157,7 +156,7 @@ export function CallView({ room }: { room: Room }) {
         setViewedCallRoomId(room.roomId);
         navigateRoom(room.roomId);
       }
-      if (!shouldDisplayCall) {
+      if (!callIsCurrentAndReady) {
         hangUp(room.roomId);
         setActiveCallRoomId(room.roomId);
       } 
@@ -185,11 +184,11 @@ export function CallView({ room }: { room: Room }) {
           height: '100%',
           position: 'relative',
           pointerEvents: 'none',
-          display: shouldDisplayCall ? 'flex' : 'none',
+          display: callIsCurrentAndReady ? 'flex' : 'none',
         }}
       />
       <Box grow='Yes' justifyContent='Center' alignItems='Center' direction="Column" gap="300" style={{
-        display: shouldDisplayCall ? 'none' : 'flex',
+        display: callIsCurrentAndReady ? 'none' : 'flex',
       }}>
         <CallViewUserGrid>
           {callMembers.map(callMember => (

src/app/features/room-nav/RoomCallNavStatus.tsx

@@ -8,8 +8,8 @@ export function CallNavStatus() {
   const {
     activeCallRoomId,
     isAudioEnabled,
-    isVideoEnabled,
-    isActiveCallReady,
+    isVideoEnabled, 
+    isActiveCallReady,   
     toggleAudio,
     toggleVideo,
     hangUp,
@@ -21,9 +21,6 @@ export function CallNavStatus() {
       navigateRoom(activeCallRoomId);
     }
   };
-  if (!isActiveCallReady) {
-    return null;
-  }
 
   return (
     <Box
@@ -34,56 +31,10 @@ export function CallNavStatus() {
         justifyContent: 'center',
       }}
     >
-      <Box direction="Row" style={{ justifyContent: 'center' }}>
+      <Box direction="Row" justifyContent='SpaceBetween' alignItems='Center'>
         {/* Going to need better icons for this */}
-        <TooltipProvider
-          position="Top"
-          offset={4}
-          tooltip={
-            <Tooltip>
-              <Text>{!isAudioEnabled ? 'Unmute' : 'Mute'}</Text>
-            </Tooltip>
-          }
-        >
-          {(triggerRef) => (
-            <IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
-              <Icon src={!isAudioEnabled ? Icons.MicMute : Icons.Mic} />
-            </IconButton>
-          )}
-        </TooltipProvider>
-        <TooltipProvider
-          position="Top"
-          offset={4}
-          tooltip={
-            <Tooltip>
-              <Text>{!isVideoEnabled ? 'Video On' : 'Video Off'}</Text>
-            </Tooltip>
-          }
-        >
-          {(triggerRef) => (
-            <IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
-              <Icon src={!isVideoEnabled ? Icons.VideoCameraMute : Icons.VideoCamera} />
-            </IconButton>
-          )}
-        </TooltipProvider>
 
-        <TooltipProvider
-          position="Top"
-          offset={4}
-          tooltip={
-            <Tooltip>
-              <Text>Hang Up</Text>
-            </Tooltip>
-          }
-        >
-          {(triggerRef) => (
-            <IconButton variant="Background" ref={triggerRef} onClick={hangUp}>
-              <Icon src={Icons.Phone} />
-            </IconButton>
-          )}
-        </TooltipProvider>
-
-        <Box grow="Yes" justifyContent="Center" alignItems="Center">
+        <Box>
           <TooltipProvider
             position="Top"
             offset={4}
@@ -101,7 +52,13 @@ export function CallNavStatus() {
                 as="button"
                 onClick={handleGoToCallRoom}
                 ref={triggerRef}
+                style={{
+                  display: isActiveCallReady ? 'flex' : 'none',
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
               >
+                <Icon src={Icons.VolumeHigh}/>
                 <Text style={{ flexGrow: 1 }} size="B400" truncate>
                   {mx.getRoom(activeCallRoomId)?.name}
                 </Text>
@@ -109,6 +66,62 @@ export function CallNavStatus() {
             )}
           </TooltipProvider>
         </Box>
+
+        <Box>
+          <TooltipProvider
+            position="Top"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>{!isAudioEnabled ? 'Unmute' : 'Mute'}</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
+                <Icon src={!isAudioEnabled ? Icons.MicMute : Icons.Mic} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+          <TooltipProvider
+            position="Top"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>{!isVideoEnabled ? 'Video On' : 'Video Off'}</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
+                <Icon src={!isVideoEnabled ? Icons.VideoCameraMute : Icons.VideoCamera} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+
+          <TooltipProvider
+            position="Top"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>Hang Up</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton 
+                variant="Background" 
+                ref={triggerRef} 
+                onClick={hangUp}
+                style={{
+                  display: isActiveCallReady ? 'block' : 'none'
+                }}
+                >
+                <Icon src={Icons.Phone} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+        </Box>
       </Box>
     </Box>
   );