Design updates to calling lobby

Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
signalapp · Sep 10, 2021 · e374a76 · e374a76
1 parent 3c43935
commit e374a76
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 77 deletions.
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
@@ -230,8 +230,11 @@
 }
 
 @mixin lonely-local-video-preview {
-  object-fit: cover;
-  opacity: 0.6;
+  max-height: calc(100% - 24px);
+  height: auto;
+  transform: rotateY(180deg);
+  width: calc(100% - 24px);
+  border-radius: 8px;
 }
 
 // --- Buttons

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -5371,7 +5371,10 @@ button.module-image__border-overlay:focus {
   }
 
   &__local-preview-fullsize {
+    align-items: center;
+    display: flex;
     height: 100%;
+    justify-content: center;
     left: 0;
     position: absolute;
     top: 0;
@@ -5381,6 +5384,12 @@ button.module-image__border-overlay:focus {
     video {
       @include lonely-local-video-preview;
     }
+
+    &--presenting {
+      video {
+        transform: none;
+      }
+    }
   }
 
   &__footer {

diff --git a/stylesheets/components/CallingLobby.scss b/stylesheets/components/CallingLobby.scss
@@ -3,14 +3,17 @@
 
 .module-CallingLobby {
   &__local-preview {
-    @include lonely-local-video-preview;
-    height: 100%;
     position: absolute;
-    width: 100%;
     z-index: -1;
 
     &--camera-is-on {
-      transform: rotateY(180deg);
+      @include lonely-local-video-preview;
+      opacity: 0.6;
+    }
+
+    &--camera-is-off {
+      height: 100%;
+      width: 100%;
     }
   }
 

diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx
@@ -211,6 +211,8 @@ export const CallScreen: React.FC<PropsType> = ({
     remoteParticipant => remoteParticipant.hasRemoteVideo
   );
 
+  const isSendingVideo = hasLocalVideo || presentingSource;
+
   let isRinging: boolean;
   let hasCallStarted: boolean;
   let headerMessage: string | undefined;
@@ -278,9 +280,80 @@ export const CallScreen: React.FC<PropsType> = ({
       throw missingCaseError(activeCall);
   }
 
-  const isLonelyInGroup =
+  let lonelyInGroupNode: ReactNode;
+  let localPreviewNode: ReactNode;
+  if (
     activeCall.callMode === CallMode.Group &&
-    !activeCall.remoteParticipants.length;
+    !activeCall.remoteParticipants.length
+  ) {
+    lonelyInGroupNode = (
+      <div
+        className={classNames(
+          'module-ongoing-call__local-preview-fullsize',
+          presentingSource &&
+            'module-ongoing-call__local-preview-fullsize--presenting'
+        )}
+      >
+        {isSendingVideo ? (
+          <video ref={localVideoRef} autoPlay />
+        ) : (
+          <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
+            <Avatar
+              acceptedMessageRequest
+              avatarPath={me.avatarPath}
+              color={me.color || AvatarColors[0]}
+              noteToSelf={false}
+              conversationType="direct"
+              i18n={i18n}
+              isMe
+              name={me.name}
+              phoneNumber={me.phoneNumber}
+              profileName={me.profileName}
+              title={me.title}
+              // `sharedGroupNames` makes no sense for yourself, but `<Avatar>` needs it
+              //   to determine blurring.
+              sharedGroupNames={[]}
+              size={80}
+            />
+            <div className="module-calling__camera-is-off">
+              {i18n('calling__your-video-is-off')}
+            </div>
+          </CallBackgroundBlur>
+        )}
+      </div>
+    );
+  } else {
+    localPreviewNode = isSendingVideo ? (
+      <video
+        className={classNames(
+          'module-ongoing-call__footer__local-preview__video',
+          presentingSource &&
+            'module-ongoing-call__footer__local-preview__video--presenting'
+        )}
+        ref={localVideoRef}
+        autoPlay
+      />
+    ) : (
+      <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
+        <Avatar
+          acceptedMessageRequest
+          avatarPath={me.avatarPath}
+          color={me.color || AvatarColors[0]}
+          noteToSelf={false}
+          conversationType="direct"
+          i18n={i18n}
+          isMe
+          name={me.name}
+          phoneNumber={me.phoneNumber}
+          profileName={me.profileName}
+          title={me.title}
+          // See comment above about `sharedGroupNames`.
+          sharedGroupNames={[]}
+          size={80}
+        />
+      </CallBackgroundBlur>
+    );
+  }
 
   let videoButtonType: CallingButtonType;
   if (presentingSource) {
@@ -305,12 +378,6 @@ export const CallScreen: React.FC<PropsType> = ({
   });
 
   const isGroupCall = activeCall.callMode === CallMode.Group;
-  const localPreviewVideoClass = classNames({
-    'module-ongoing-call__footer__local-preview__video': true,
-    'module-ongoing-call__footer__local-preview__video--presenting': Boolean(
-      presentingSource
-    ),
-  });
 
   let presentingButtonType: CallingButtonType;
   if (presentingSource) {
@@ -320,7 +387,6 @@ export const CallScreen: React.FC<PropsType> = ({
   } else {
     presentingButtonType = CallingButtonType.PRESENTING_OFF;
   }
-  const isSendingVideo = hasLocalVideo || presentingSource;
 
   return (
     <div
@@ -375,41 +441,7 @@ export const CallScreen: React.FC<PropsType> = ({
         />
       )}
       {remoteParticipantsElement}
-      {isSendingVideo && isLonelyInGroup ? (
-        <div className="module-ongoing-call__local-preview-fullsize">
-          <video
-            className={localPreviewVideoClass}
-            ref={localVideoRef}
-            autoPlay
-          />
-        </div>
-      ) : null}
-      {!isSendingVideo && isLonelyInGroup ? (
-        <div className="module-ongoing-call__local-preview-fullsize">
-          <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
-            <Avatar
-              acceptedMessageRequest
-              avatarPath={me.avatarPath}
-              color={me.color || AvatarColors[0]}
-              noteToSelf={false}
-              conversationType="direct"
-              i18n={i18n}
-              isMe
-              name={me.name}
-              phoneNumber={me.phoneNumber}
-              profileName={me.profileName}
-              title={me.title}
-              // `sharedGroupNames` makes no sense for yourself, but `<Avatar>` needs it
-              //   to determine blurring.
-              sharedGroupNames={[]}
-              size={80}
-            />
-            <div className="module-calling__camera-is-off">
-              {i18n('calling__your-video-is-off')}
-            </div>
-          </CallBackgroundBlur>
-        </div>
-      ) : null}
+      {lonelyInGroupNode}
       <div className="module-ongoing-call__footer">
         {/* This layout-only element is not ideal.
             See the comment in _modules.css for more. */}
@@ -450,33 +482,7 @@ export const CallScreen: React.FC<PropsType> = ({
             'module-ongoing-call__footer__local-preview--audio-muted': !hasLocalAudio,
           })}
         >
-          {isSendingVideo && !isLonelyInGroup ? (
-            <video
-              className={localPreviewVideoClass}
-              ref={localVideoRef}
-              autoPlay
-            />
-          ) : null}
-          {!isSendingVideo && !isLonelyInGroup ? (
-            <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
-              <Avatar
-                acceptedMessageRequest
-                avatarPath={me.avatarPath}
-                color={me.color || AvatarColors[0]}
-                noteToSelf={false}
-                conversationType="direct"
-                i18n={i18n}
-                isMe
-                name={me.name}
-                phoneNumber={me.phoneNumber}
-                profileName={me.profileName}
-                title={me.title}
-                // See comment above about `sharedGroupNames`.
-                sharedGroupNames={[]}
-                size={80}
-              />
-            </CallBackgroundBlur>
-          ) : null}
+          {localPreviewNode}
         </div>
       </div>
     </div>