diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 5e44ce5c1..0e542fc05 100644 --- a/_locales/en/messages.json +++ b/_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": { diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c77fd9a43..8bb3dd9e5 100644 --- a/stylesheets/_modules.scss +++ b/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; diff --git a/ts/components/CallScreen.stories.tsx b/ts/components/CallScreen.stories.tsx index 7ded54205..7c96f256a 100644 --- a/ts/components/CallScreen.stories.tsx +++ b/ts/components/CallScreen.stories.tsx @@ -321,3 +321,12 @@ story.add('Group call - reconnecting', () => ( })} /> )); + +story.add('Group call - 0', () => ( + +)); diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx index a95b27b50..43f72d863 100644 --- a/ts/components/CallScreen.tsx +++ b/ts/components/CallScreen.tsx @@ -199,6 +199,10 @@ export const CallScreen: React.FC = ({ 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 = ({ /> {remoteParticipantsElement} + {hasLocalVideo && isLonelyInGroup ? ( +
+
+ ) : null} + {!hasLocalVideo && isLonelyInGroup ? ( +
+ + +
+
+ + {i18n('calling__your-video-is-off')} + +
+ +
+ ) : null}
{/* This layout-only element is not ideal. See the comment in _modules.css for more. */} @@ -284,13 +321,14 @@ export const CallScreen: React.FC = ({ 'module-ongoing-call__footer__local-preview--audio-muted': !hasLocalAudio, })} > - {hasLocalVideo ? ( + {hasLocalVideo && !isLonelyInGroup ? (
diff --git a/ts/components/CallingLobby.tsx b/ts/components/CallingLobby.tsx index 6ca1ae92f..f136d25df 100644 --- a/ts/components/CallingLobby.tsx +++ b/ts/components/CallingLobby.tsx @@ -162,8 +162,8 @@ export const CallingLobby = ({ /> ) : ( -
- +
+ {i18n('calling__your-video-is-off')}