Calling: Add local video/mute to local preview; button order

stylesheets/_modules.scss

@@ -3939,27 +3939,27 @@ button.module-image__border-overlay:focus {
     }
 
     &__info {
-      @include font-caption;
       align-items: flex-end;
       bottom: 0;
       display: flex;
-      height: 48px;
-      justify-content: space-between;
-      padding: 6px;
       position: absolute;
+      height: 60px;
+      justify-content: space-between;
+      padding-block: 0 16px;
+      padding-inline: 16px;
       user-select: none;
       width: 100%;
       z-index: $z-index-above-base;
 
       &__contact-name {
-        font-size: 12px;
+        font-size: 13px;
+        line-height: 18px;
         color: $color-white;
         margin-inline-end: 20px;
         overflow: hidden;
         text-overflow: ellipsis;
         visibility: hidden;
         white-space: nowrap;
-        margin-bottom: 2px;
       }
     }
 
@@ -4047,13 +4047,6 @@ button.module-image__border-overlay:focus {
           transform: inherit;
         }
       }
-
-      .CallingAudioIndicator {
-        bottom: 6px;
-        position: absolute;
-        inset-inline-end: 6px;
-        z-index: $z-index-base;
-      }
     }
   }
 

stylesheets/components/CallingAudioIndicator.scss

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .CallingAudioIndicator {
-  $size: 20px;
+  $size: 28px;
 
   display: flex;
   align-items: center;
@@ -14,11 +14,11 @@
   border-radius: calc($size / 2);
 
   &--with-content {
-    background: $color-black-alpha-30;
+    background: rgba($color-gray-80, 0.7);
   }
 
   &__content {
-    $size: 14px;
+    $size: 16px;
     width: $size;
     height: $size;
     /* Center Lottie animation */
@@ -34,3 +34,17 @@
     }
   }
 }
+
+.module-ongoing-call__footer__local-preview .CallingAudioIndicator {
+  position: absolute;
+  top: 6px;
+  inset-inline-end: 6px;
+  z-index: $z-index-base;
+}
+
+.module-ongoing-call__group-call-remote-participant .CallingAudioIndicator {
+  position: absolute;
+  top: 8px;
+  inset-inline-end: 8px;
+  z-index: $z-index-base;
+}

stylesheets/components/CallingStatusIndicator.scss

@@ -0,0 +1,37 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.CallingStatusIndicator {
+  $size: 28px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $size;
+  min-width: $size;
+  width: $size;
+  z-index: $z-index-base;
+  border-radius: calc($size / 2);
+  background: rgba($color-gray-80, 0.7);
+
+  &::after {
+    content: '';
+    $icon-size: 16px;
+    width: $icon-size;
+    height: $icon-size;
+  }
+}
+
+.CallingStatusIndicator--Video::after {
+  @include color-svg(
+    '../images/icons/v3/video/video-slash-fill-light.svg',
+    $color-white
+  );
+}
+
+.module-ongoing-call__footer__local-preview .CallingStatusIndicator--Video {
+  position: absolute;
+  top: 6px;
+  inset-inline-start: 6px;
+  z-index: $z-index-base;
+}

stylesheets/manifest.scss

@@ -37,6 +37,7 @@
 @import './components/Button.scss';
 @import './components/CallsTab.scss';
 @import './components/CallingAudioIndicator.scss';
+@import './components/CallingStatusIndicator.scss';
 @import './components/CallingButton.scss';
 @import './components/CallControls.scss';
 @import './components/CallSettingsButton.scss';

ts/components/CallScreen.tsx

@@ -581,21 +581,21 @@ export function CallScreen({
             </Button>
           </div>
         </div>
-        <div
+        {localPreviewNode ? (
-          className={classNames(
+          <div className="module-ongoing-call__footer__local-preview module-ongoing-call__footer__local-preview--active">
-            'module-ongoing-call__footer__local-preview',
+            {localPreviewNode}
-            `module-ongoing-call__footer__local-preview--${
+            {!isSendingVideo && (
-              localPreviewNode ? 'active' : 'inactive'
+              <div className="CallingStatusIndicator CallingStatusIndicator--Video" />
-            }`
+            )}
-          )}
+            <CallingAudioIndicator
-        >
+              hasAudio={hasLocalAudio}
-          {localPreviewNode}
+              audioLevel={localAudioLevel}
-          <CallingAudioIndicator
+              shouldShowSpeaking={isSpeaking}
-            hasAudio={hasLocalAudio}
+            />
-            audioLevel={localAudioLevel}
+          </div>
-            shouldShowSpeaking={isSpeaking}
+        ) : (
-          />
+          <div className="module-ongoing-call__footer__local-preview" />
-        </div>
+        )}
       </div>
     </div>
   );

ts/components/CallingHeader.tsx

@@ -42,24 +42,6 @@ export function CallingHeader({
         <div className="module-ongoing-call__header-message">{message}</div>
       ) : null}
       <div className="module-calling-tools">
-        {togglePip && (
-          <div className="module-calling-tools__button">
-            <Tooltip
-              content={i18n('icu:calling__pip--on')}
-              className="CallingButton__tooltip"
-              theme={Theme.Dark}
-            >
-              <button
-                aria-label={i18n('icu:calling__pip--on')}
-                className="CallSettingsButton__Button"
-                onClick={togglePip}
-                type="button"
-              >
-                <span className="CallSettingsButton__Icon CallSettingsButton__Icon--Pip" />
-              </button>
-            </Tooltip>
-          </div>
-        )}
         {isGroupCall && participantCount > 2 && toggleSpeakerView && (
           <div className="module-calling-tools__button">
             <Tooltip
@@ -109,6 +91,24 @@ export function CallingHeader({
             </button>
           </Tooltip>
         </div>
+        {togglePip && (
+          <div className="module-calling-tools__button">
+            <Tooltip
+              content={i18n('icu:calling__pip--on')}
+              className="CallingButton__tooltip"
+              theme={Theme.Dark}
+            >
+              <button
+                aria-label={i18n('icu:calling__pip--on')}
+                className="CallSettingsButton__Button"
+                onClick={togglePip}
+                type="button"
+              >
+                <span className="CallSettingsButton__Icon CallSettingsButton__Icon--Pip" />
+              </button>
+            </Tooltip>
+          </div>
+        )}
         {onCancel && (
           <div className="module-calling-tools__button">
             <Tooltip

ts/components/GroupCallRemoteParticipant.tsx

@@ -300,21 +300,23 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
           style={containerStyles}
         >
           {!props.isInPip && (
-            <div
+            <>
-              className={classNames(
-                'module-ongoing-call__group-call-remote-participant__info'
-              )}
-            >
-              <ContactName
-                module="module-ongoing-call__group-call-remote-participant__info__contact-name"
-                title={title}
-              />
               <CallingAudioIndicator
                 hasAudio={hasRemoteAudio}
                 audioLevel={props.audioLevel}
                 shouldShowSpeaking={isSpeaking}
               />
-            </div>
+              <div
+                className={classNames(
+                  'module-ongoing-call__group-call-remote-participant__info'
+                )}
+              >
+                <ContactName
+                  module="module-ongoing-call__group-call-remote-participant__info__contact-name"
+                  title={title}
+                />
+              </div>
+            </>
           )}
           {wantsToShowVideo && (
             <canvas