When group call is empty you are now full screen

_locales/en/messages.json

@@ -1203,7 +1203,7 @@
     "description": "Button tooltip label for turning on the microphone"
   },
   "calling__your-video-is-off": {
-    "message": "Your video is off",
+    "message": "Your camera is off",
     "description": "Label in the calling lobby indicating that your camera is off"
   },
   "calling__lobby-summary--zero": {

stylesheets/_modules.scss

@@ -5960,6 +5960,33 @@ button.module-image__border-overlay:focus {
       width: 100%;
     }
   }
+
+  &__video-off {
+    &--icon {
+      @include color-svg(
+        '../images/icons/v2/video-off-solid-24.svg',
+        $color-white
+      );
+      height: 24px;
+      margin-bottom: 8px;
+      width: 24px;
+    }
+
+    &--text {
+      color: $color-white;
+      z-index: 1;
+    }
+
+    &--container {
+      display: flex;
+      flex-direction: row;
+      margin-top: 12px;
+
+      .module-calling__video-off--text {
+        margin-left: 10px;
+      }
+    }
+  }
 }
 
 .module-incoming-call {
@@ -6281,6 +6308,7 @@ button.module-image__border-overlay:focus {
     background: linear-gradient($color-black-alpha-40, transparent);
     top: 0;
     width: 100%;
+    z-index: 2;
   }
 
   &__header-message {
@@ -6373,12 +6401,21 @@ button.module-image__border-overlay:focus {
     }
   }
 
+  &__local-preview-fullsize {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
   &__footer {
     background: linear-gradient(transparent, $color-black-alpha-40);
     bottom: 0;
     display: flex;
     justify-content: space-between;
     width: 100%;
+    z-index: 2;
 
     &__actions {
       align-items: center;
@@ -6523,22 +6560,6 @@ button.module-image__border-overlay:focus {
     }
   }
 
-  &__video-off {
-    &--icon {
-      @include color-svg(
-        '../images/icons/v2/video-off-solid-24.svg',
-        $color-white
-      );
-      height: 24px;
-      margin-bottom: 8px;
-      width: 24px;
-    }
-
-    &--text {
-      z-index: 1;
-    }
-  }
-
   &__info {
     color: $color-white;
     margin-bottom: 36px;

ts/components/CallScreen.stories.tsx

@@ -321,3 +321,12 @@ story.add('Group call - reconnecting', () => (
     })}
   />
 ));
+
+story.add('Group call - 0', () => (
+  <CallScreen
+    {...createProps({
+      callMode: CallMode.Group,
+      remoteParticipants: [],
+    })}
+  />
+));

ts/components/CallScreen.tsx

@@ -199,6 +199,10 @@ export const CallScreen: React.FC<PropsType> = ({
       throw missingCaseError(activeCall);
   }
 
+  const isLonelyInGroup =
+    activeCall.callMode === CallMode.Group &&
+    !activeCall.remoteParticipants.length;
+
   const videoButtonType = hasLocalVideo
     ? CallingButtonType.VIDEO_ON
     : CallingButtonType.VIDEO_OFF;
@@ -251,6 +255,39 @@ export const CallScreen: React.FC<PropsType> = ({
         />
       </div>
       {remoteParticipantsElement}
+      {hasLocalVideo && isLonelyInGroup ? (
+        <div className="module-ongoing-call__local-preview-fullsize">
+          <video
+            className="module-ongoing-call__footer__local-preview__video"
+            ref={localVideoRef}
+            autoPlay
+          />
+        </div>
+      ) : null}
+      {!hasLocalVideo && isLonelyInGroup ? (
+        <div className="module-ongoing-call__local-preview-fullsize">
+          <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
+            <Avatar
+              avatarPath={me.avatarPath}
+              color={me.color || 'ultramarine'}
+              noteToSelf={false}
+              conversationType="direct"
+              i18n={i18n}
+              name={me.name}
+              phoneNumber={me.phoneNumber}
+              profileName={me.profileName}
+              title={me.title}
+              size={80}
+            />
+            <div className="module-calling__video-off--container">
+              <div className="module-calling__video-off--icon" />
+              <span className="module-calling__video-off--text">
+                {i18n('calling__your-video-is-off')}
+              </span>
+            </div>
+          </CallBackgroundBlur>
+        </div>
+      ) : null}
       <div className="module-ongoing-call__footer">
         {/* This layout-only element is not ideal.
             See the comment in _modules.css for more. */}
@@ -284,13 +321,14 @@ export const CallScreen: React.FC<PropsType> = ({
             'module-ongoing-call__footer__local-preview--audio-muted': !hasLocalAudio,
           })}
         >
-          {hasLocalVideo ? (
+          {hasLocalVideo && !isLonelyInGroup ? (
             <video
               className="module-ongoing-call__footer__local-preview__video"
               ref={localVideoRef}
               autoPlay
             />
-          ) : (
+          ) : null}
+          {!hasLocalVideo && !isLonelyInGroup ? (
             <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
               <Avatar
                 avatarPath={me.avatarPath}
@@ -305,7 +343,7 @@ export const CallScreen: React.FC<PropsType> = ({
                 size={80}
               />
             </CallBackgroundBlur>
-          )}
+          ) : null}
         </div>
       </div>
     </div>

ts/components/CallingLobby.tsx

@@ -162,8 +162,8 @@ export const CallingLobby = ({
           />
         ) : (
           <CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
-            <div className="module-calling-lobby__video-off--icon" />
-            <span className="module-calling-lobby__video-off--text">
+            <div className="module-calling__video-off--icon" />
+            <span className="module-calling__video-off--text">
               {i18n('calling__your-video-is-off')}
             </span>
           </CallBackgroundBlur>